指标网组件库

基于ElementUI进行的二次封装组件库

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run lib

安装

使用npm安装插件

npm i zb-comp

在入口文件导入zb-comp

import ZbComp from 'zb-comp';
import 'zb-comp/lib/index/index.css';
Vue.use(ZbComp);

按需加载

增加bable-plugin-import插件

npm i babel-plugin-import -D

修改babel.config.js

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'zb-comp',
        style: name => `${name}/index.css`,
        camel2DashComponentName: false,
        camel2UnderlineComponentName: false,
      },
    ],
  ],
};

修改导入方式

import { Dialog,Space,NoData } from 'zb-comp';

Vue.use(Dialog);
Vue.use(Space);
Vue.use(NoData);

组件

Space

避免组件紧贴在一起，拉开统一的空间。

<zb-space>
  <div>Div1</div>
  <div>Div2</div>
</zb-space>

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ---- | ------ | ------------------------------------------------ | ------- | -------- | | size | string | 'small','middle','large', '10px', '10rem', '10%' | 'small' | 间距大小 |

ColumnFilter

表格列设置，可以选择需要展示的列和不需展示的列

1. 设置表头最后一列的render方式

<el-table-column prop="action" label="操作" align="left" :render-header="renderOperationHeader">

2. 在render函数中加入zb-column-filter

renderOperationHeader(h: any, { column }: any) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <span>{column.label}</span>
      <zb-column-filter columns={indexTableColumn} onChange={this.columnChange} />
    </div>
  );
}

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ------ | ------ | ------------------------------------------------ | ------- | -------- | | column | string | 'small','middle','large', '10px', '10rem', '10%' | 'small' | 间距大小 |

| 事件 | 回调值 | 描述 | | ------ | -------- | ------------------------ | | change | 表头数据 | 点击确定后返回的表头数据 |

column

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | -------- | ------- | ----------- | ------ | ------------------ | | id | string | | | 唯一表示 | | visible | boolean | true, false | true | 列是否可见 | | editable | boolean | true, false | true | 列设置是否可以更改 |

Dialog

基于ElementUI的Dialog，可接受ElementUI的参数

<zb-dialog></zb-dialog>

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ---------------- | ------- | ----------------------- | ------ | ---------------- | | type | string | 'danger','warn', 'info' | | 弹窗类型 | | showCancelButton | boolean | true, false | true | 是否显示取消按钮 | | showFooter | boolean | true, false | true | 是否显示底部按钮 |

| 事件 | 回调值 | 描述 | | ------- | ------ | -------------- | | confirm | | 点击确定的回调 | | close | | 点击取消的回调 |

插槽

| 属性 | 描述 | | ------ | ------------ | | footer | 弹窗底部插槽 |

函数式调用Dialog

导入插件后，可直接用下面的命令弹出Dialog

this.$dialog.alert({
  type: 'danger',
  message: '弹出框',
  confirm: () => {
    console.log('点击确定回调')
  },
  close: () => {
    console.log('点击取消回调')
  }
})

总共有this.$dialog.alert和this.$dialog.confirm两种调用方式，效果同window.alert和window.confirm

注意

1. 函数式调用，适用于只需要给用户进行一句话提示时使用，复杂场景请使用组件式调用
2. 组件式调用，请不要同时传入confirm事件和confirm属性，否则点击确定会触发两次
3. 组件式调用，请不要同时传入close事件和close属性，否则点击确定会触发两次

NoData

无数据时的展示

<zb-nodata />

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ----------- | ------ | ------ | ---------- | ---------- | | description | string | | '暂无数据' | 无数据描述 |

TableSearch

表格条件筛选组件，基于ElementUI的Form、FormItem、Input、Select、Cascader、DatePicker、Button等组件封装

<zb-table-search />

参数

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ---------------- | -------| ----------------------- | ------ | -------------- | | conf | array | | | 所有筛选条件的集合 | | labelWidth | string | | 'auto' | 表单域标签的宽度 | | contentWidth | string | | '140px'| 表单域输入框选择框等的宽度 |

conf 参数配置举例

get searchConf(): Record<string, any>[] {
  return [
    {
      type: 'input',
      id: 'queryName',
      name: '名称',
      placeholder: '请输入清单名称',
      length: 30,
    },
    {
      type: 'select',
      id: 'reviewStatus',
      name: '审核状态',
      placeholder: '请选择审核状态',
      options: this.reviewStatusList.map((_item: { status: string; name: string }) => ({
        value: _item.status,
        name: _item.name,
      })),
    },
    {
      type: 'date-range',
      id: 'dateRange',
      name: '审核时间',
      dbWidth: true,
      'picker-options': {
        disabledDate(time: any): boolean {
          const endTime = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60* 1000 - 1;
          return time.getTime() > endTime;
        },
      },
    },
    {
      type: 'select',
      id: 'rational',
      name: '是否合理',
      placeholder: '请选择审核人',
      options: [
        {
          name: '是',
          value: true,
        },
        {
          name: '否',
          value: false,
        },
      ],
    },
    {
      type: 'select',
      id: 'areaId',
      name: '地区',
      placeholder: '请选择地区',
      event: {
        change: (value: string) => this.getBqItem(value),
      },
      options: this.areaList.map((_item: { areaId: string; name: string }) => ({
        value: _item.areaId,
        name: _item.name,
      })),
    },
    {
      type: 'select',
      id: 'tradeTemplateId',
      name: '清单',
      placeholder: '请选择清单',
      event: {
        change: (value: string) => this.getBqItemTrade(value),
      },
      hidden: !this.selectedAreaId,
      options: this.tradeTemplateList.map((_item: { id: string; description: string }) => ({
        value: _item.id,
        name: _item.description,
      })),
    }
  ]

事件

| 事件 | 回调值 | 描述 | | ------- | ------ | -------------- | | onSearch | 所有筛选条件对应值构成的对象 | 点击搜索按钮的回调 |

插槽

| 属性 | 描述 | | ------ | ------------ | | btn | 除默认搜索重置按钮外，自定义的其他操作按钮 |

QuarterPicker

季度选择器，基于ElementUI的DatePicker, Card等组件封装，实现季度选择

<zb-quarter-picker />

参数

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ---------------- | -------| ----------------------- | ------ | -------------- | | value | array | '', '2002-01-01' | '' | 默认日期 |

事件

| 事件 | 回调值 | 描述 | | ------- | ------ | -------------- | | onChange| 选中季度对象 | 点击季度回调 |

QuarterRangePicker

季度范围选择器，基于ElementUI的DatePicker, Card等组件封装，实现季度范围选择

<zb-quarter-range-picker />

参数

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ---------------- | -------| ----------------------- | ------ | -------------- | | value | array | null, [], ['2002-01-01', '2020-12-31'] | null | 默认日期范围 |

事件

| 事件 | 回调值 | 描述 | | ------- | ------ | -------------- | | onChange | 两个选中季度对象的数组 | 点击季度范围回调 |

Table

表格组件，基于ElementUI的Table, TableColumn, Pagination等组件和TableSearch组件实现的包含顶部条件筛选，表格及分页功能的 列表组件。

<zb-table />

参数

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ---------------- | -------| ----------------------- | ------ | -------------- | | searchConf | array | | | 所有筛选条件的集合 | | labelWidth | string | | '80px' | 顶部过滤条件表单域标签的宽度 | | columns | array | | | 表格列头数据 | | tableData | array | | | 表格数据 | | showIndex | boolean | | true | 是否显示序号列 | | showPagination | boolean | | true | 是否显示分页 | | selectedIds | string | | '' | 所有选中数据id | | pageNo | number | | 1 | 当前页码 | | pageSize | number | | 15 | 每页显示数量 | | pageSizes | number[] | | [15, 30, 45, 60] | 每页显示个数选择器的选项设置 | | total | number | | 0 | 数据总数量 | | selectable | Function(row, index) | | | 仅对有复选框列的表格有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 |

注意

1. 除上表中参数外，还支持el-table组件支持的所有参数

事件

| 事件 | 回调值 | 描述 | | ------- | ------ | -------------- | | onSearch | 过滤条件 | 点击搜索或重置按钮回调 | | onRefresh | | 点击分页查询表格数据回调 | | onCellClick | row, column, cell, event | 点击分页查询表格数据回调 |

注意

1. 除上表中事件外，还支持el-table组件支持的所有事件

插槽

| 属性 | 描述 | | ------ | ------------ | | default | 顶部筛选条件区，除默认搜索重置按钮外，自定义的其他操作按钮 | | tableColumnBefore | 表格开始自定义列 | | tableColumnAfter | 表格最后自定义列 |

Excel

基于 luckysheet 和 luckyexcel 的 Excel文件预览组件。

<zb-excel />

参数

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ---------------- | -------| ----------------------- | ------ | -------------- | | file | Blob | | 无 | 要预览的blob文件 | | config | object | | 组件内置的默认配置参数 | Excel展示的配置参数 |

注意

1. 目前只支持.xlsx格式的Excel文件预览；
2. config如果使用默认配置参数，该组件只支持预览，如果需要其他功能，可通过config进行配置，具体可参考luckysheet官方文档： https://mengshukeji.gitee.io/LuckysheetDocs/zh/；
3. 使用该组件需在项目public下的index.html文件中引入如下文件：

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

Docx

基于 docx-preview 封装的 Word 文档预览组件

<zb-docx />

参数

| 属性 | 类型 | 可选值 | 默认值 | 描述 | | ---------------- | -------| ----------------------- | ------ | -------------- | | src | Blob | | 无 | 要预览的blob文件 |

注意

1. 目前只支持.docx格式的Word文档预览；