meixicheckstaff

用于勾选员工/部门的业务组件

• meixicheckstaff
  • 项目结构
  • 安装
  • 组件预览
  • useSelectStaff 相关api
  • selectStaff
    • props
    • emit事件
    • value回显参考代码

项目结构

|-- lib   ------------------------------------打包后的文件夹
|   |-- demo.html
|   |-- index.d.ts
|   |-- index.d.ts.map
|   |-- index.js
|   |-- meixicheckstaff.common.js
|   |-- meixicheckstaff.umd.js
|   |-- meixicheckstaff.umd.min.js
|   |-- config
|   |   |-- config.d.ts
|   |   |-- config.d.ts.map
|   |   |-- config.js
|   |   |-- enDict.d.ts
|   |   |-- enDict.d.ts.map
|   |   |-- enDict.js
|   |   |-- selectUserConfig.d.ts
|   |   |-- selectUserConfig.d.ts.map
|   |   |-- selectUserConfig.js
|   |-- control
|       |-- useSelectStaff.d.ts
|       |-- useSelectStaff.d.ts.map
|       |-- useSelectStaff.js
|-- packages -------------------------------------项目主要文件夹
|   |-- index.js
|   |-- index.ts ---------------------------------入口文件
|   |-- component --------------------------------vue工程文件
|   |   |-- dialogSelectStaff.vue
|   |   |-- selectStaff.vue
|   |   |-- selectUser
|   |       |-- selectDept.vue
|   |       |-- selectDictLetter.vue
|   |       |-- selectUserAndDeptTag.vue
|   |       |-- selectUserFrame.vue
|   |       |-- selectUserGroup.vue
|   |       |-- selectUserGroupItem.vue
|   |       |-- selectUserGroupWrap.vue
|   |       |-- selectUserWrap.vue
|   |-- config -----------------------------------配置项
|   |   |-- config.ts
|   |   |-- enDict.ts
|   |   |-- selectUserConfig.ts
|   |-- control
|       |-- useSelectStaff.js
|       |-- useSelectStaff.ts```

安装

npm install meixicheckstaff

组件预览

状态为选择员工的界面预览

状态为选择账户的界面预览

状态为选择部门的界面预览

状态为选择部门的界面预览

//函数共导出三个实例对象

//index.ts
export {
    //通过该实例类可以通过函数式渲染相关选择的组件
    useSelectStaff,
    //vue工程文件 在vue工程文件中通过html标签渲染
    //使用方式<selectStaff></selectStaff>
    //相关props及emit事件见下面
    selectStaff,
    // 如果需要通过函数式渲染选择员工组件需要通过该函数设置相关配置
    // [1,2] 第一个参数默认是1 指的是是否选择员工/账户  第二个参数 1是指员工 2是指选的是部门 3是是否一起选择员工与部门
    //setOptions(1, 2);
    setOptions
}

useSelectStaff 相关api

interface useSelectStaff {
    // 渲染选择员工
    useSelectStaffOfDialog: (value: any, checkType: checkType, cb: Function) => void
    // 渲染选择部门
    useSelectDeptOfDialog: (value: any, checkType: checkType, cb: Function) => void
    // 渲染选择员工与部门
    useSelectStaffAndDeptOfDialog: (value: any, cb: Function) => void
}

selectStaff

props

| 属性 | 类型 | 默认值 | 可选值 | 描述 | |-----------|---------|--------|------------------|----------------------------| | type | Number | 1 | 1，2，3 | 1是员工2是部门3是员工与部门 | | checkType | String | single | single/multiple | single是指单选/multiple是指多选 | | userType | | 1 | 1/2 | 1是员工/2是账户 | | departId | Array | 无 | 无 | 当type类型为1时生效，查询指定部门下的员工与账户 | | disabled | Boolean | false | true/false | 是否禁用选择 | | value | Array | | | 绑定及回显的值（如需要回显请参考以下代码） |

emit事件

| 名称 | 参数 | 描述 | |-------|-------|--------------------| | input | value | 当v-model绑定的值被修改时触发 |

value回显参考代码

//这里的limitDept为v-model绑定的值
//goodsCouponLimitDeptVOList后端返回的值
this.limitDept = goodsCouponLimitDeptVOList.map((item) => {
    return {
        name: item.deptName,
        //如果是
        // 员工需改为staffId
        // 账户需改为accountId
        deptId: item.deptId,
        // 员工需改为staffId
        // 账户需改为accountId
        id: `deptId${item.deptId}`
    };
});