引入：

  npm i mmkk-plug -S

---

.vue：

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

components: {
  formBar,
  tableBar,
  btnBar
},

---

按钮 参数：

字段	注释	类型	必传	默认
btnList	按钮列表	Array	是	[]
isAuthority	是否启用权限	Boolean	否	true

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

按钮 btnList参数：

字段	注释	类型	必传	默认
label	按钮名称	String	是	''
value	按钮对应值	String/Number	是	''
icon	图标	String	否	''
type	按钮类型	String	否	''
size	按钮大小	String	否	''

---

表单 参数：

字段	说明	类型	必传	默认
formStyle	form表单的样式及相关参数	Object	否	{}
formButton	表单的按钮	Object	否	{}
formData	form表单的值,用于编辑表单的赋值时传入，默认值不建议使用此参数，该方式传递默认值会被清空，请使用formItem中的value传递默认参数	Object	否	{}
formItem	form表单项、表单元素	Object	是	{}

表单 formStyle参数：

字段	说明	类型	必传	默认
lableWidth	表单域标签的宽度	String	否	'80px'
inline	一行内显示一个表单项 （ 查询表单默认是一行显示多个，只有在添加或编辑等表单会需要传此参数）	Boolean	否	false
labelPosition	表单域标签的对齐方向	String	否	'right'
size	用于控制该表单内组件的尺寸	String	否	'small'

表单 formButton参数：

字段	说明	类型	必传	默认
btnShow	是否使用按钮组件 （传递true后或显示查询和重置两个按钮，用于查询表单）	Boolean	否	false
col	按钮区域的排列	Array	否	[4,6,8,12,24]
list	表单的其他按钮（此处按钮是没有权限验证的，需要 权限验证的按钮需要放在按钮组件中 ）	Array	否	[]
list - label	按钮名称	String	否	''
list - value	按钮标识	String/Number	否	''

表单 formItem参数-公共：

字段	说明	类型	必传	默认
itemtype	表单项类型，详见下表 【表单项类型参数】	String	是	''
label	表单标签文本	String	是	''
value	表单标签文本	String	否	''
col	表单项排列	Array	否	[4,6,8,12,24]
isShow	表单项是否显示	Boolean	否	true
id	表单项key，表格项有变化或者表单项像是隐藏时需要此id	Number	否	''
value	表单标签文本	String	否	''
lableWidth	表单域标签的宽度	String	否	'80px'
rules	表单验证条件	Array	否	[]
clearable	是否显示清空按钮	Boolean	否	true
placeholder	占位提示语	String	否	'请输入/请选择' + label
disabled	是否可编辑	Boolean	否	false

表单 表单项类型参数 ：

类型	说明
label	展示框
input	文本输入框
select	下拉选择框
date	日期时间段选择
number	数字输入框
switch	开关
cascader	级联选择器
radio	单选
checkbox	多选
upload	图片/文件上传
inputNumber	文本输入框-只可输入数字
groupNumber	数组输入框-区间输入
groupInput	文本输入框-区间输入
slot	插槽

formItem参数-input：

字段	说明	类型	必传	默认
type	原生属性 text，textarea 等	String	否	''
maxlength	最大输入数	String	否	''
showPassword	是否显示切换密码图标	Boolean	否	false

示例：

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

表单 formItem参数-select：

字段	说明	类型	必传	默认
option	选择框数据列	Array/String	是	[]
valueName	option中的显示内容属性名称。	String	否	''
lableName	option中的值属性名称。	String	否	''
collapseTags	多选时是否将选中值按文字的形式展示	Boolean	否	false
multiple	是否多选	Boolean	否	false
filterable	是否可搜索	Boolean	否	false
allowCreate	是否允许用户创建新条目，需配合 filterable 使用	Boolean	否	false
defaultFirstOption	在输入框按下回车，选择第一个匹配项	Boolean	否	false
valueKey	如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。	String	否	''

示例：

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

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

表单 formItem参数-date：

字段	说明	类型	必传	默认
type	时间选择框类型 year/month/date/week/ datetime/datetimerange/daterange	String	否	'date '
format	可选，绑定值的格式。不指定则绑定值为 Date 对象	String	否	''

示例：

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

表单 formItem参数-number：

字段	说明	类型	必传	默认
controls	是否使用控制按钮	Boolean	否	false
controlsposition	控制按钮位置	String	否	'right'
precision	数值精度	Number	否	0
step	计数器步长	Number	否	0
max	最大值	Number	否	Infinity
min	控制按钮位置	Number	否	0
unit	单位	String	否	''

表单 formItem参数-switch：

字段	说明	类型	空	默认
activeValue	switch 打开时的值	boolean / string / number	否	1
inactiveValue	switch 关闭时的值	boolean / string / number	否	0

表单 formItem参数-cascader：

字段	说明	类型	必传	默认
option	选择框数据列	Array/String	是	[]
filterable	是否可搜索	Boolean	否	false
checkStrictly	是否严格的遵守父子节点不互相关联。	Boolean	否	false
valueName	option中的显示内容属性名称。	String	否	''
lableName	option中的值属性名称。	String	否	''
multiple	是否多选	Boolean	否	false
emitPath	在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值	Boolean	否	false

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

表单 formItem参数-radio/checkbox：

字段	说明	类型	必传	默认
option	选择框数据列	Array	是	[]

formItem参数-upload：

字段	说明	类型	必传	默认
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效 .xls,.xlsx .png, .jpg）	String	是	''
limit	最大允许上传个数	Number	否	''
fileList	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	Array	否	[]
tip	提示内容	String	否	''

表单 formItem参数-groupNumber：

字段	说明	类型	必传	默认
controls	是否使用控制按钮	Boolean	否	false
controlsposition	控制按钮位置	String	否	'right'
precision	数值精度	Number	否	0
numberMax	最大值	Number	否	Infinity
min	控制按钮位置	Number	否	0
prop1	起始值属性名称	String	否	0
prop2	终止值属性名称	String	否	''

表单 formItem参数-slot：

字段	说明	类型	必传	默认
style	样式	Array	是	{}
示例：

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

---

表单 事件

|字段|说明|返回参数| | :------------:| :------------:| :------------:| :------------:| :------------:| |formClick | 返回通过验证的form对象 | form, item, row, index| |formChange | 公共触发事件 change事件 |val, item, form| |uploadCallback | 覆盖默认的上传行为，可以自定义上传的实现 |file| |uploadRemove | 删除文件 |file|

表单 formClick事件返回参数说明

字段	说明	类型
form	表单对象	Object
item	按钮对象 两个默认按钮 0：重置 1：查询 其他的类型是需要传入的 牢记传入的类型不可为0和1	Object
row	传入的按钮对象，传入按钮参数会返回	Object
index	传入的按钮角标，传入按钮参数会返回	Object

表单 父组件可调用方法

字段	说明	类型
forceUpdate	表单重绘 更新	function
formClear	表单清空	function
formReset	表单重置	function
formCreated	表单数据重新转换，用于编辑表单赋值不成功的情况	function

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

• 父组件获取表单数据 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]
},

---

表格 参数：

字段	注释	类型	必传	默认
dataList	数据列表	Array	是	[]
tableColumn	表格表头及设置	Array	是	[]
operationbtn	操作列按钮	Array	否	[]
operationWidth	列宽度	String	否	'120px'
numberSerial	是否显示序号	Boolean	否	false
selection	是否显示选择框	Boolean	否	false
tableOption	是否启用表格列操作按钮	Boolean	否	false
total	分页总条数	Boolean	否	false
paging	分页配置	Object	否	{}
tableHelght	表格用于计算高度差值	Number	否	0
rowKey	折叠表格设置key值	String	否	'id'
errorMsg	页面错误提示	String	否	'暂无数据'
isAuthority	是否使用权限	Boolean	否	false
isSkeleton	是否使用骨架屏	Boolean	否	false

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

表格 tableColumn参数：

字段	注释	类型	必传	默认
label	列名称	String	是	''
prop	列名称对应的数据属性名	String	是	''
width	列宽度	String	否	''
showTooltip	超出隐藏并悬浮提示	String	否	''
align	数据对齐方式	String	否	'center'
headerAlign	表头对齐方式	String	否	'center'
sortable	对应列是否可以排序 true, false, 'custom'	Boolean/String	否	'false
fixed	列是否固定在左侧或者右侧,true 表示固定在左侧	String	否	true
filter	根据数据展示相应的文字 建议使用slot	Array	否	[]
copy	是否使用复制	Boolean	否	false
link	是否使用超链接跳转	Boolean	否	false
img	是否使用图片展示	Boolean	否	false
slot	是否使用slot	Boolean	否	false

表格 tableColumn参数 - filter：

字段	注释	类型	必传	默认
value	需要转义的值	String	是	''
lable	将值转义成的字符串	String	是	''

表格 operationbtn参数：

字段	注释	类型	必传	默认
filter	根据数据展示相应的文字 建议使用slot	Array	否	[]
slot	是否使用slot	Boolean	否	false
label	按钮名称	String	是	''
value	按钮对应值	String/	是	''
icon	图标	String	否	''
type	按钮类型	String	否	''
size	按钮大小	String	否	''

---

表格 返回事件

字段	注释	参数
btnClick	表单按钮返回数据	row, index
btnselectionChange	选择数据触发	row
pagination	分页数据	paging

---

表格 示例

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

---