mmkk-plug v1.1.1

引入：

  npm i mmkk-plug -S

.vue：

import { btnBar, tableBar, formBar } from 'mmkk-plug'

components: {
  formBar,
  tableBar,
  btnBar
},

按钮 参数：

• 备注：isAuthority 默认启用权限，使用的数据源为接口返回的数据列表

按钮 btnList参数：

表单 参数：

表单 formStyle参数：

表单 formButton参数：

表单 formItem参数-公共：

表单 表单项类型参数 ：

formItem参数-input：

**示例：**

{
		itemtype: 'input',
		label: '关键字',
		maxlength: 10,
		placeholder: '请输入用户昵称/账号/姓名',
		col: [6, 8, 12, 24, 24]
}

表单 formItem参数-select：

**示例：**

{
          itemtype: 'select',
          label: '状态',
          option: [
            { label: '全部', value: '' },
            { label: '启用', value: 10 },
            { label: '禁用', value: 20 }
          ],
          placeholder: '用户状态',
          col: [6, 8, 12, 24, 24]
}

• 备注：option参数比较复杂，分三种情况，文档推荐直接传递数组一种形式

表单 formItem参数-date：

**示例：**

{
          itemtype: 'date',
          label: '创建时间',
          type: 'datetimerange',
          col: [6, 16, 12, 24, 24]
}

表单 formItem参数-number：

表单 formItem参数-switch：

表单 formItem参数-cascader：

• 备注：option参数比较复杂，分三种情况，文档推荐直接传递数组一种形式

表单 formItem参数-radio/checkbox：

formItem参数-upload：

表单 formItem参数-groupNumber：

表单 formItem参数-slot：

**示例：**

	{
		itemtype: 'slot',
		label: '门店',
		heightAuto: true,
		col: [6, 16, 12, 24, 24],
		style: {
			'height': 'auto !important'
		}
	}

表单 事件

表单 formClick事件返回参数说明

表单 父组件可调用方法

表单 父组件可调用其他操作

• 父组件获取表单数据 this.$refs.组件ref.form
• 父组件获取表单通过验证的数据结果

this.$refs.组件ref.$refs.form.validate(valid => {
        if (valid) {
          通过验证
        } else {
          console.log('表单验证失败')
          return false
        }
})

**表单 示例**

<form-bar
  ref="serchform"
  :form-item="formItem"
  :form-button="formButton"
  @formClick="formClick"
>
  <template slot="storeIds" slot-scope="scope">
    <el-select
      v-model="scope.form.storeIds"
      class="width-style"
      placeholder="请选择门店"
      clearable
      multiple
      filterable
      remote
      reserve-keyword
      collapse-tags
      :remote-method="remoteMethod"
:loading="storeLoading"
size="small"
>
<el-option
v-for="item in storetList"
:key="item.id"
:label="item.storeName"
:value="item.id"
/>
</el-select>
</template>
</form-bar>

formItem: {
searchWord: {
itemtype: 'input',
label: '关键字',
// maxlength: 10,
placeholder: '请输入用户昵称/账号/姓名',
col: [6, 8, 12, 24, 24]
},
status: {
itemtype: 'select',
label: '状态',
option: [
  { label: '全部', value: '' },
  { label: '启用', value: 10 },
  { label: '禁用', value: 20 }
],
placeholder: '用户状态',
col: [6, 8, 12, 24, 24]
},
storeIds: {
itemtype: 'slot',
label: '门店',
heightAuto: true,
col: [6, 16, 12, 24, 24],
style: {
  'height': 'auto !important'
}
},
startTime: {
itemtype: 'date',
label: '创建时间',
type: 'datetimerange',
col: [6, 16, 12, 24, 24]
}
},
formButton: {
btnShow: true,
col: [6, 8, 12, 24, 24]
},

表格 参数：

• 备注：isAuthority 默认启用权限，使用的数据源为接口返回的数据列表

表格 tableColumn参数：

表格 tableColumn参数 - filter：

表格 operationbtn参数：

表格 返回事件

**表格 示例**

<table-bar
  :data-list="dataList"
  :table-column="tableColumn"
  :operationbtn="operationbtn"
  :total="total"
  :paging="paging"
  :operation-width="'200px'"
  :selection="true"
  @pagination="pagination"
  @btnselectionChange="selectionChange"
  @BtnClick="BtnClick"
>
  <template slot="status" slot-scope="scope">
    <el-switch
      v-model="scope.row.status"
      :active-value="10"
      :inactive-value="20"
      @change="handleStatusChange(scope.row)"
    />
  </template>
</table-bar>

tableColumn: [
  {
    label: '用户编号',
    width: '180',
    prop: 'userId'
  },
  {
    label: '员工号/账号',
    width: '100',
    prop: 'userName'
  },
  {
    label: '用户状态',
    prop: 'status',
    slot: true,
    width: '120'
  },
],
operationbtn: [
  {
    value: 2,
    label: '修改'
  },
  {
    value: 3,
    label: '删除'
  },
  {
    value: 4,
    label: '重置密码'
  }
],
paging: {
  pageSize: 10,
  pageIndex: 1
}