meixicheckstaff v0.2.3

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

emit事件

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}`
    };
});