Mk-util NPM | npm.io

mk-util 基于elementUI开发的实用组件

目录
1、selectInput 选择组件
 2、personFilter 人员选择组件
 3、departmentFilter 部门选择组件
 4、localizationData 浏览器indexedDB数据库操作组件
 5、initData 数据初始缓存组件 6、tablePage 多功能表格组件 7、designView 设计表视图组件

项目中引用插件

首先需要安装mk-util包npm install mk-util -S 然后在main.js文件中添加以下代码

import MK from 'mk-util'
Vue.use(MK)

1、selectInput 选择组件的调用

<select-input
v-model="value"
:isMultiple="true" 
:isKeyword="true" 
:isCreated="false" 
:selectData="s_data"
returnField="all"
:revealField="['name']"
:queryField="['name','say']"/>

组件可传参数：
isMultiple: 选择框是否支持多选，默认为单选
isKeyword: 是否保留上次搜索关键字，默认保留
isCreated: 是否可创建条目，默认不可创建
upperCase: 是否将小写转大写，类型时Boolean,默认为false
mode: 匹配模式，0包含匹配；1左匹配；2右匹配；默认包含匹配
len: 开始查询时字符所需长度，默认为1个长度
keyName: 绑定数据源的某字段
size: 尺寸，可选值：medium/small/mini limit: 限制查询结果条数，默认10条
queryField: 查询的字段名，可多个字段，必传参数
revealField: 展示的字段名，默认和queryField一致
selectData: 数据源
returnField: 返回字段，默认值为all,返回选中的整条数据

2、personFilter 人员选择组件的调用

<person-filter ref="filter" 
      v-model="value"
      :queryField="['name']"
      :revealField="['name','email']"/>

组件可传参数：
mode: 匹配模式，0包含匹配；1左匹配；2右匹配；默认包含匹配
len: 开始查询时字符所需长度，默认为1个长度
size: 尺寸，可选值：medium/small/mini ，默认为空 limit: 限制查询结果条数，默认10条
queryField: 查询的字段名，可多个字段，必传参数
revealField: 展示的字段名，默认和queryField一致
returnField: 返回字段，默认返回选中的整条数据

3、departmentFilter 部门选择组件的调用

<department-filter ref="filter" 
      v-model="value"
      :queryField="['name']"
      :revealField="['name']"/>

组件可传参数：
isMultiple: 选择框是否支持多选，默认为多选
mode: 匹配模式，0包含匹配；1左匹配；2右匹配；默认包含匹配
len: 开始查询时字符所需长度，默认为1个长度
size: 尺寸，可选值：medium/small/mini ，默认为空 limit: 限制查询结果条数，默认10条
queryField: 查询的字段名，可多个字段，必传参数
revealField: 展示的字段名，默认和queryField一致
returnField: 返回字段，默认返回选中的整条数据

4、localizationData 浏览器indexedDB数据库操作组件的调用

<localization-data 
ref="local" 
database="han" 
table="person" 
url="http://192.168.18.204:8093/api/v1/user/getEncrpyUserListByCondition" 
:field="['userList','list']"/>

组件可传参数:
isUpdateData: 是否更新数据，类型Boolean
url: 数据源地址，类型String
field: 需要读取数据源的字段，类型Array, 如：'userList','list'表示读取userList.list的值
source: 数据源, 类型Array 如果传入数据源则自动写入数据，但url的优先级高于source
database: 数据库名，类型String
table: 表名，类型String

可调用方法:

this.$refs['local'].initDB()  //初始化数据库
this.$refs['local'].apiData() //当数据源来自url，则调用该方法写入数据
await this.$refs['local'].getData() //获取数据
this.$refs['local'].removeData() //删除数据

5、initData 数据初始缓存组件的调用

<init-data 
:update="true"
:tables="[{
      name: "person",
      url: "http://192.168.18.204:8093/api/v1/user/getEncrpyUserListByCondition",
      field: ['userList','list']
},
{
      name: "department",
      url: "http://192.168.18.204:8093/api/v1/dept/getEncrpyDeptListByCondition",
      field: ['userList','list']
}]"
/>

组件可传参数:
update: 更新数据，类型Boolean，默认为false
tables: 数据库表信息，类型Array, 结构为[{name:'',url:'',field:[]}] ，name表示：表名；url表示：数据源地址；field表示：需要写入数据库的数据源字段;默认值为上述代码中传入的值

6、tablePage 多功能表格组件的调用

该组件集成了分页、添加、删除、修改、打印、导出功能

<tablePage 
:oper="oper"
:columns="columns" 
:list="list" 
:isHighlight="false" 
:isSort="isSort" 
:isExp="true" 
:total="10"
:pageSize="10"
:create="createConf" 
:revise="reviseConf"
@on-query="queryList" 
@on-remove="remove"
@on-submit="submit"
/>

组件可传参数: oper：表格操作项，配置表格的新增、批量删除、修改、单行删除、导出、打印功能
columns：定义表格的表头字段
list：表格数据
isHighlight：是否高亮选中的当前行,默认为false
isSort：是否可以排序,默认为true
isExp：是否显示打印和导出按钮,默认为true
total：表格数据的总条数，类型是number, 默认为0
pageSize: 每页显示的数据条数，类型是number, 默认为20
create：添加数据时弹框的表单配置项
revise: 修改数据时弹框的表单配置项
on-query：表格初始化查询数据时触发的事件
on-remove: 删除单条表格数据时触发的事件
on-submit: 添加或修改数据弹框的确定那妞被点击时触发的事件

示例：

<tablePage :oper="oper" :isExp="true" :columns="columns" @on-query="queryList" @on-remove="remove" @on-submit="submit"/>

export default class tablePageDemo extends Vue {
    columns: object[] = [
        {prop:'code', label: '编号'},
        {prop:'username', label: '名称'},
        {prop:'stime', label: '开始时间'},
        {prop:'etime', label: '结束时间'}
    ]
    list: object[] = [
        {code: "198379", username: "Maker", stime: '2019-08-06', etime: '2019-10-04'},
        {code: "187894", username: "Alice", stime: '2019-09-22', etime: '2019-12-02'},
    ]
    //当isExp为true时，可以在oper传入{print:true, export:true}来控制打印和导出这两个按钮的显示
    oper: object = {insert: true, delete: true, deletes: true, update: true, print: true, export: true}
    queryList(val: number) {
        console.log(val)
    }
    remove(val: any) {
        console.log(val.data)
        val.callback()
    }
    submit(val: any) {
        console.log(val.data)
        val.callback()
    }
}

7、designView 设计表视图组件

该组件是单表、双表视图组件，通过传入不同数据，渲染出不同界面布局，提供了两套类型布局组件，分别为：单表、双表

<designView 
type="double"
rowKey="id"
childName="children" 
:filters="filters"
:total="2"
:tableData="tableData"
:dialogConf="dialogFormConf"
:oper="oper" 
:isExp="true"
:isSort="false" />

组件可传参数:
type: 界面布局类型，分为两种单表（single）、双表（double）
rowKey：行数据的Key，在显示树形数据时该项必填
childName：树形数据时指定子节点的字段名
filters：查询条件的表单项
total：数据总条数
tableData：表格数据，定义表头和表数据，如果是单表，数据结构为：{columns:[],list:[]};如果是双表，数据结构为：{ltable:{columns:[],list:[]},stable:{columns:[],list:[]}}
dialogConf: 弹框的表单配置项，数据类型为{create: object[], revise: object[]}
oper：表格操作项，配置表格的新增、批量删除、修改、单行删除、导出、打印功能
isExp：是否显示打印和导出按钮,默认为true
isSort：是否可以排序,默认为true

示例：

export default class designViewDemo extends Vue {
    oper: object[] = [{insert: true, delete: true, deletes: false, update: true, print:false,export:false}, {insert: false, delete: false, deletes: false, update: true, export: true, print: true}]
    filters: object[] = [{label: '部门', type: 'input', value: '', field: 'dept'}]
    dialogFormConf: {create: object[], revise: object[]} = {
        create:[
            {required:true, label: '部门', type: 'input', value: '', field: 'dept', message: "填写你的部门名称"},
            {required:true, label: '职业', type: 'select', value: '', field: 'job', options: [{label:'前端开发', value:'1'},{label:'后端开发', value:'2'}]}
        ], 
        revise:[
            {required:true, label: '名称', type: 'input', value: '', field: 'dept'}
        ]
    }
    tableData: object = {
        // columns: [
        //     {prop:'code', label: '编号'},
        //     {prop:'username', label: '名称'},
        //     {prop:'stime', label: '开始时间'},
        //     {prop:'etime', label: '结束时间'},
        // ],
        // list:[
        //     {code: "198379", username: "Maker", stime: '2019-08-06', etime: '2019-10-04'},
        //     {code: "198274", username: 'Alice', stime: '2019-06-16', etime: '2019-08-25'}
        // ]
        ltable: {
            columns: [
                {prop:'name', label: '名称'},
                {prop:'type', label: '类型'}
            ],
            list: [
                {name: "示例一1", type: "测试一"},
                {name: "示例二", type: '测试二'}
            ],
        },
        rtable: {
            columns: [
                {prop:'name', label: '名称'},
                {prop:'type', label: '类型'}
            ],
            list: [
                {id:1, name: "示例一2", type: "测试一", children:[{id:10, name: "示例2", type: "测试2"},{id:11, name: "示例3", type: "测试3"},{id:12, name: "示例4", type: "测试4",children:[{id:100, name: "示例2", type: "测试2"},{id:101, name: "示例3", type: "测试3"},{id:102, name: "示例4", type: "测试4"}]}]},
                {id:2, name: "示例二", type: '测试二'}
            ]
        },
    }
}