checked-pick-pc v1.6.17

TOC

checked-pick-pc

pc端 选主体、部门、人员插件

安装

vue2.7 以上版本安装指令

npm i checked-pick-pc -D

vue2.7 以下版本安装指令

npm i @vue/composition-api -D
npm i checked-pick-pc -D

使用

在需要使用的组件内引入

import { departPerson } from 'checked-pick-pc'
export default {
  components: { departPerson }
}

在页面使用

<template>
  <div id="app">
    <departPerson :visible.sync="visible" v-bind="entity" @callback="handleCallback" @cancel="handleCancel">
      <template #checkedUser="{item}">
        <div class="item">{{item.name}}</div>
      </template>
    </departPerson>
  </div>
</template>
<script>
import 'checked-pick-pc/style.css'
import { departPerson } from 'checked-pick-pc'
export default {
  components: { departPerson },
  data() {
    return {
      visible: true,
      entity: {
        source: '0',
        type: '5',
        request: request,       
        businessId: '0003',
        codeType: [3],              
        multiple: true,
        // checkedArray: [
        //   { type: 1, id: '05d670c04eeb7b6c3eac074ac7787795', subjectId: '05d670c04eeb7b6c3eac074ac7787795', uid:''},
        //   { type: 1, id: '3577dfcafee9466baf6d34a002a8664e', subjectId: '3577dfcafee9466baf6d34a002a8664e', uid:''},
        //   { type: 2, id: '0871614242828d543cf594a5388d9ad2', subjectId: '9f13a9c9c400fa6e6228848ce1f131ee', uid:''},
        //   { type: 2, id: 'd91643028e6eb5d214411b451e8577e6', subjectId: '9f13a9c9c400fa6e6228848ce1f131ee', uid:''},
        //   { type: 3, id: '0c1c5f405d183e5bdaf3e63073e22954', subjectId: '9f13a9c9c400fa6e6228848ce1f131ee', uid:''},
        //   { type: 3, id: '30a37a1f9875e577eda4982e33b153b0', subjectId: '9f13a9c9c400fa6e6228848ce1f131ee', uid:''},
        //   { type: 3, id: '45595063d9886ed106b35550ce733c25', subjectId: '9f13a9c9c400fa6e6228848ce1f131ee', uid:''},
        //   { type: 4, id: 'b97b3ade07e3bcffec60c10656b0b51a', subjectId: '9f13a9c9c400fa6e6228848ce1f131ee', uid:''},
        //   { type: 4, id: '0b5cba3593e2f688cabb9ba27c2a2a36', subjectId: '9f13a9c9c400fa6e6228848ce1f131ee', uid:''},
        // ]      
      },
    }
  },
  methods: {
    handleCallback(res) {
      console.log('callback_OK', res)
    },
    handleCancel() {
      console.log('cancel_No')
    }
  }
}
</script>

属性-Attributes

注意:

deptCode 传递时 checkedArray内必须带上 deptId

deptCodeArray 不能和 deptCode 同时存在

参数	类型	默认值	说明
visible	Boolean	false	是否显示 true-显示 false-隐藏
source	String	'0'	来源 0-平台 1-流程引擎
type	String	'0'	类型 0-当前公司 1-当前公司下递归分子公司（不含当前公司） 2-当前主体及递归分子公司 3-当前主体+直属分子公司（即当前公司+一级分子公司） 4-当前主体下直属分子公司（即当前公司下一级分子公司（不含当前公司）） 5-集团及递归分子公司6-集团下递归分子公司（不含集团） 7-集团直属分子公司（即集团下一级子公司不含集团） 8-集团及直属分子公司（即集团+集团下一级子公司）
request	Object	null	axios接口请求方法 需要包含 get post 请求方式
businessId	String	''	业务Id
orgType	Array	0	显示类型 0-组织 1-群组 2-公共群组
codeType	Array	[]	可选类型 1-主体 2-部门 3-人员 5-群组 6-群组人员
multiple	Boolean	false	是否多选 true-多选 false-单选
maxMultiple	Number	0	多选时最多选择多少项 0表示无限制
isNoClose	Boolean	false	是否手动关闭 true-是 false-否
deptCode	String	''	部门id
deptCodeArray	String	''	多部门id
itemCode	String	''	群组id
subjectName	String	''	主体名称
isLoadingClose	Boolean	false	手动控制关闭loading 【根据业务id存储选中数据才生效】
checkedArray	Array	[]	选中的数据 checkedinfo,checkedinfo

checkedinfo-对象说明

注意：type=2或4时 subjectId必填 type=3时 传入uid时 deptId、subjectId不必填 传入id时 subjectId必传

属性名	类型	说明
type	String	类型 1-主体 2-部门 3-人员 4-当前部门及子部门 5-群组 6-群组人员
id	String	id（主体、部门、人员）
subjectId	String	主体id
uid	String	uid
deptId	String	部门id
itemId	String	群组id
isDeleteNo	Boolean	禁用删除 true-禁用 false-不禁用

插槽-Slots

checkedUser 选中人员区域-关闭图标前面

插槽返回值

属性名	说明
id	人员id
name	人员名称
uid	用户id

事件-Events

callback 事件回调参数checkedArray说明

属性名	类型	说明
type	String	类型 1-主体 2-部门 3-人员 4-当前部门及子部门
id	String	id（主体、部门、人员）
uid	String	uid
name	String	名称
ancestors	String	祖级Id
ancestorNames	String	祖级名称
phone	String	手机号码
subjectId	String	主体id
sex	String	性别 0-女 1-男
avatar	String	头像