Vue2组件化集成

2023-2-8

开发者

About 19 min

# 安装依赖

项目与关键模块版本

{
  "vue": "^2.6.14",
  "vue-i18n": "^8.28.2",
  "vuex": "^3.0.1",
  "axios": "^1.2.0",
  "element-ui": "^2.15.12",
  "exceljs": "^4.3.0",
  "lodash": "^4.17.21",
  "moment": "^2.29.4",
  "numbro": "^2.3.6"
}

1
2
3
4
5
6
7
8
9
10
11

安装第三方npm依赖

npm install element-ui axios numbro moment

如果你的项目中已经存在的依赖可以不用重复安装

ElementUI按需引入

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

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

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

IBI使用的element-ui定制化说明

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

import ElementUI from 'element-ui';

Vue.use(ElementUI);

1
2
3

修改为

import ChuguoUI from 'chuguo-ui';

Vue.use(ChuguoUI);

1
2
3

安装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

1
2
3
4
5
6
7
8
9

# Demo项目地址

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

Demo项目地址 (opens new window)

# 开始

# 组件注册

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 服务地址
});

1
2
3
4
5
6
7
8
9
10
11

# 整合外部vue-i18n

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

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对象
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 整合外部Vuex

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

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对象
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# IbiChart组件

用来展示IBI中的所有图表

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

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

1
2
3
4
5

# 认证

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

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

# 用户名密码props传递认证

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

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

1
2
3
4
5
6
7

# SDK API统一认证

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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Token认证

需要传入IBI认可的Token

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

1
2
3
4
5
6

# 参数

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 查询参数(params)格式

// 参数数据，一个图可以接收多个参数
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 // 改报表数据集的字段
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 参数格式简单样例
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'
        }
    }]
}]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# watchParam

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

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

<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,
  }),
}

1
2
3
4
5
6
7
8
9
10
11
12

# 联动

# relations联动定义

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

1
2
3
4
5
6

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 样式

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

1
2
3
4
5
6
7

# expOption格式

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

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

1
2
3
4
5

钩子函数

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# IbiBoard组件

<ibi-board :boardId="boardId" height="calc(100vh - 100px)"></ibi-board>

注意

看板组件仅支持自由布局看板，大屏看板暂不支持

# 认证

目前看板组件不支持认证传参，认证需要在组件加载之前通过api认证

# 参数props

# boardId

参数	类型	解释
boardId	Number/String	看板ID属性，当看板ID变化时组件会监控并切换看板内容

# showBoardParam

参数	类型	解释
showBoardParam	Boolean	是否显示看板查询参数

# showTitle

参数	类型	解释
showTitle	Boolean	是否显示标题

# hiddenParamNames

参数	类型	解释
hiddenParamNames	Array[String]	需要隐藏的参数名数组

# background

参数	类型	解释
background	String	看板背景色

# height

参数	类型	解释
height	String	看板高度，如：'100px', '100vh', 'calc(100vh - 100px)'

# filters

看板参数的状态可以通过传递一个js对象赋值，具体格式如下：

{
    "boardParams": [
        {
            "id": "mpgxi01ev6k",
            "name": "用户",
            "type": "=",
            "values": ["aaa", "bbb"]
        },
        {
            "id": "2khmtv1s63p",
            "name": "用户名",
            "type": "=",
            "values": []
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

通过 id 与看板上的参数进行关联，关联不上则会被废弃

type：不同的参数类型 type 值有所区别，设置前建议通过URL参数工具查看之后调试确认

const EQ = '=',
    NEQ = '≠',
    GT = '>',
    LT = '<',
    GET = '≥',
    LET = '≤',
    LIKE = 'like',
    NOT_LIKE = 'not like',
    GEL = '(a,b]',
    EGL = '[a,b)',
    GL = '(a,b)',
    EGEL = '[a,b]';

1
2
3
4
5
6
7
8
9
10
11
12

参数形式	支持类型
通用过滤器	支持所有类型
日期范围	支持闭区间[a,b]
复选框, 下拉框	支持相等过滤 =
关键词输入	like

多看报集成父页面异步消息交互 IBI功能模块整合到外部系统

Vue2组件化集成

# 安装依赖

# Demo项目地址

# 开始

# 组件注册

# 整合外部vue-i18n

# 整合外部Vuex

# IbiChart组件

# 认证

# 用户名密码props传递认证

# SDK API统一认证

# Token认证

# 参数

# 查询参数(params)格式

# watchParam

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

# 联动

# relations联动定义

# 样式

# expOption格式

# IbiBoard组件

# 认证

# 参数props

# boardId

# showBoardParam

# showTitle

# hiddenParamNames

# background

# height

# filters

Description