# ibi-vue2-comp-use

**Repository Path**: cboard_beta/ibi-vue2-comp-use

## Basic Information

- **Project Name**: ibi-vue2-comp-use
- **Description**: IBI Vue2 组件化样例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-11
- **Last Updated**: 2023-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
title: Vue2组件化集成
icon:
category: guide
tags:

- 开发者

---

## 安装依赖

- 项目与关键模块版本

```json
{
  "vue": "^2.6.14",
  "vue-i18n": "^8.28.2",
  "vuex": "^3.0.1",
  "element-ui": "^2.15.12"
}
```

- 安装第三方npm依赖

```bash
npm install element-ui axios numbro tippy.js file-saver countup.js moment 
```

> 项目中原本已经存在的依赖可以不用重复安装

:::details ElementUI按需引入

- 如果您项目中没有用到明细表格，可以不引入element-ui
- 如果您项目中使用的是其他的ui库，又需要使用明细表格，可以按需导入明细表依赖的组件

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

```bash
npm install babel-plugin-component -D
```

然后，将 .babelrc 修改为：

```json
{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
```

```javascript
import {
  Table,
  TableColumn,
  Loading,
  Row,
  Pagination,
  Popover,
  Input,
  Select,
  Option,
  CheckboxGroup,
  Checkbox
} from 'element-ui';

[Table, TableColumn, Loading, Row, Pagination, Popover, Input, Select, Option, CheckboxGroup, Checkbox].forEach(e => Vue.use(e));
```

:::

:::details IBI使用的element-ui定制化说明
IBI对element-ui做了一些个性化定制工作，如：明细表分页按钮样式配置、颜色拾取器风格、各种表单样式属性等，但基本不影响原生功能，
如果您需要整合之后呈现的效果与IBI一致可以把

```javascript
import ElementUI from 'element-ui';

Vue.use(ElementUI);
```

修改为

```javascript
import ChuguoUI from 'chuguo-ui';

Vue.use(ChuguoUI);
````

:::

- 安装IBI npm依赖

```
npm install @chuguotech/ibi-vue2-comp
```

- 其他外挂依赖

```
$ tree -L 1 vendor
vendor
├── echarts
├── font-awesome-4.7.0
├── jQuery
├── jQueryUI
├── jquery-contextmenu
└── exceljs.min.js

```

如果你使用的vue-cli创建的项目，可以参考下面的demo项目

[Demo项目地址]()

## 开始

### 组件注册

```javascript
import IbiComp from '@chuguotech/ibi-vue2-comp';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// ElementUI
Vue.use(ElementUI);

// 安装IbiComp
Vue.use(IbiComp, {
    baseServerUrl: 'http://localhost:8026/cboard' // IBI 服务地址
});
```

### 整合外部vue-i18n

如果您的项目中已经存在i18n国际化配置，可以使用下面办法融合ibi国际化配置

```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n';
import { enLocale, zhLocale } from '@chuguotech/ibi-vue2-comp'

const messages = {
    en: {
        ...enLocale,
        message: {
            hello: 'hello world'
        }
    },
    cn: {
        ...zhLocale,
        message: {
            hello: '你好世界'
        }
    }
};

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: 'cn', // 设置地区
    messages, // 设置地区信息
});


Vue.use(IbiComp, {
    baseServerUrl: 'http://localhost:8026/cboard' // IBI 服务地址
    i18n //注册IbiComps时传入i18n对象
});
```

### 整合外部Vuex

如果您的项目中已经存在Vuex, 可以用下面的办法混入ibiStore模块

```javascript
import Vue from 'vue';
import Vuex from 'vuex';
import { ibiStore } from '@chuguotech/ibi-vue2-comp';

Vue.use(Vuex);

const store = Vuex.Store({
    state: {
        ... // 您的项目中原有啊Vuex定义
    },
    modules: {
        ...ibiStore.modules // 混入ibiStore模块
    }
});

Vue.use(IbiComp, {
    baseServerUrl: 'http://localhost:8026/cboard' // IBI 服务地址
    store //注册IbiComps时传入store对象
});
```

## IbiChart组件

用来展示IBI中的所有图表

- 支持图表类型包含：交叉表、ECharts图表、KPI、明细表
- 支持参数配置响应
- 支持联动事件
- 支持表格数据下载

```html
<ibi-chart
        :chart-id="chartId"
        isInBoard
>
</ibi-chart>
```

### 认证

我们知道访问IBI中的资源需要权限认证，IbiChart组件支持以下认证方式

- 用户名密码props传递认证
- SDK API统一认证
- IBI Token认证

#### 用户名密码props传递认证

对于安全性要求不高的整合可以使用用户名密码的形式认证，认证用户名和密码可以通过表单动态传入，比如在展示图表之前让用户交互式传入用户名密码

```html
<ibi-chart
        :chart-id="chartId"
        username="xxx"
        password="xxx"
        isInBoard
>
</ibi-chart>
```

#### SDK API统一认证

在图表加载之前认证一次即可，

```vue
import IbiComp, { cboardCommon } from '@chuguotech/ibi-vue2-comp';

cboardCommon.loginService.auth('xxx', 'xxx').then(response => {
  const {valid} = response.data;
  if (valid) {
    new Vue({
      i18n,
      store,
      router,
      render: h => h(App),
    }).$mount('#app')
  }
});

// 后续组件加载不需要传入认证信息

<ibi-chart
    :chart-id="chartId"
    isInBoard
>
</ibi-chart>
```

#### Token认证

需要传入IBI认可的Token

```html
<ibi-chart
        :chart-id="chartId"
        token="xxx"
        isInBoard
>
</ibi-chart>
```

### 参数

```html
<div>
<el-select v-model="params[0].values" multiple>
    <el-option value="Mexico"></el-option>
    <el-option value="Canada"></el-option>
</el-select>
<el-button @click="query">Query</el-button>
</div>

<ibi-chart
    :chart-id="chartId"
    :params="params"
    isInBoard
    watchParam
>
</ibi-chart>

```

#### params格式

```typescript
// 参数数据，一个图可以接收多个参数
params: [BoardParam]

// 参数对象
class BoardParam {
    type: String // 过滤的类型 =, ≠, >, <, ≥, ≤, like, not like, [a, b]
    values: String[] // 过滤设定值
    col: ParamLink[] // 参数关联对象，一个参数可以关联到对个对象
}

// 关联对象, 一个参数可以关联到对个对象
class ParamLink {
    // 设定关联对象类型
    type: String // ‘dataset’, 'widget', 'report,
    // 设定关联对象ID
    targetId: String | Number // 如: 数据集ID， 图表
    // 设定具体关联的维度或者字段，当type为dataset、widget的时候设定
    col: String // 字段名
    // 当type为report的时候设定
    targetId: String  // ibi-report组件的sid
    datasetName: String // 报表组件中的数据集名称
    column: {
        name: String // 改报表数据集的字段
    }
}
```

```javascript
// 参数格式简单样例
params: [{
    col: [{datasetId: 1, col: 'sales_country',}],
    type: '=',
    values: ['Canada'],
}, {
    col: [{datasetId: 1, col: 'age',}],
    type: '>',
    values: [30],
}]

// report参数格式样例
rptParams: [{
    type: '=',
    values: [],
    col: [{
        type: 'report',
        targetId: rptId,
        datasetName: 'invoice-mtd',
        column: {
            name: 'bus_type'
        }
    }]
}]
```

#### watchParam

监控参数变动即时更新图表

#### 通过vuex store发送全局图表更新消息

```vue
<el-button @click="query">Query</el-button>

import { boardStore } from '@chuguotech/ibi-vue2-comp';

methods: {
  query() {
    this.updateBoardParamsTick(true);
  },
  ...boardStore.boardMapMutations({
    updateBoardParamsTick: boardStore.M_BOARD_PARAMS_TICK,
  }),
}
```

### 联动

#### relations联动定义

```html
<ibi-chart
        :chart-id="chartId"
        :relations="relations"
        isInBoard
>
</ibi-chart>
```

```javascript
relations: {
    excludeSelf: true,
    links: [{
      type: 'dataset',
      targetId: 1,
      conditions: [{
          source: {
              type: 'row',
              index: 0,
              column: 'the_year',
          },
          target: {
              column: 'the_year'
          },
        }],
    }]
}
```

### 样式

```html
<ibi-chart
        :chart-id="chartId"
        :relations="relations"
        :extOption="extOption"
        isInBoard
>
</ibi-chart>
```

#### expOption格式

- 配置Option样式融合
  通过传入与原图样式配置结构一致的对象覆盖修改样式

```javascript
extOption = {
    title: {
        text: '名称改变'
    }
}
```

- 钩子函数

**优势**：通过回调函数修改样式，该方法的优势是能够debug，与IBI中ECharts图表开发者模式原理一致，在render之前被调用，然后通过代码修改，好处是方便debug  
**缺点**：该模式目前仅支持ECharts图表

```javascript
 extOption = {
  devTool: {
    beforeRender(option) {
      console.log(option);
      _.merge(option, {
        title: {
          text: '名称改变',
        }
      })
    },
    beforeDestroy(echartsInstance) {
      //
    }
  }
}
```