MX BMS

一个基于 Vue 2 和 Element UI 的业务管理系统组件库。

安装

1npm install @mxbc/mx-bms

使用

完整引入

1import Vue from 'vue'
2import MxBMS from '@mxbc/mx-bms'
3
4Vue.use(MxBMS)

按需引入

1import Vue from 'vue'
2import { DynamicPage } from '@mxbc/mx-bms'
3
4Vue.use(DynamicPage)

组件

DynamicPage 动态页面

一个集成了表单、表格和分页的动态页面组件。

1<template>
2  <mx-dynamic-page
3    :schema="schema"
4    :fetch-data="fetchData"
5    @handleTableRowAction="handleTableRowAction"
6  />
7</template>

DynamicPage 属性

参数	说明	类型	可选值	默认值
schema	页面配置	object	—	required
showTable	是否显示表格	boolean	—	true
showForm	是否显示表单	boolean	—	true
showPagination	是否显示分页	boolean	—	true
showSelection	是否显示多选	boolean	—	false
fetchData	获取数据的方法	function	—	null
defaultQueryParams	默认查询参数	object	—	{ page: 1, limit: 10 }

Schema 配置示例

1const schema = {
2  formSchema: {
3    items: [
4      {
5        label: '名称',
6        prop: 'name',
7        component: 'el-input'
8      },
9      {
10        label: '类型',
11        prop: 'type',
12        component: 'el-select',
13        options: [
14          { label: '类型1', value: 1 },
15          { label: '类型2', value: 2 }
16        ]
17      }
18    ],
19    actions: ['search', 'reset']
20  },
21  tableSchema: {
22    columns: [
23      {
24        label: '名称',
25        prop: 'name'
26      },
27      {
28        label: '操作',
29        prop: 'actions',
30        actions: [
31          {
32            text: '编辑',
33            type: 'primary',
34            name: 'edit'
35          },
36          {
37            text: '删除',
38            type: 'danger',
39            name: 'delete'
40          }
41        ]
42      }
43    ]
44  }
45}

License

ISC