@qianhang/userselector

安装

npm i @qianhang/userselector

使用

main.js中添加如下代码

import UserSelector from '@qianhang/userselector';
import '@qianhang/userselector/styles/UserSelector.css';

Vue.use(UserSelector);

接口添加

在src/api下新建文件夹componentsApi，在该文件夹下新建文件userselector.js文件

import request from '@/router/axios';

let url = '/api/blade-system';
// 查询组织树
export const getOrgsTree = () => {
  return request({
    url: url + '/dept/tree-allData',
    method: 'get',
    params: {}
  })
}
// 查询角色树
export const getRoleTree = () => {
  return request({
    url: url + '/role/list-selector',
    method: 'get',
    params: {}
  })
}
// 通过id查人员列表
export const getByIdAndUserName = (current, size, params) => {
  return request({
    url: url + '/user/getPageByDeptIdAndUserName',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

// 查询上下级树
export const getSupSubTree = () => {
  return request({
    url: url + '/orgAttachedDefinition/getOrgAttachedTree',
    method: 'get',
    params: {}
  })
}

页面中使用

<UserSelector
  :userSelectorOptions="userSelectorOptions"
  :getOrgsTree="getOrgsTree"
  :getRoleTree="getRoleTree"
  :getByIdAndUserName="getByIdAndUserName"
  :initData="initData"
  @submitHandler="submitHandler"
/>
<script>
import {
  getOrgsTree,
  getRoleTree,
  getByIdAndUserName,
  getSupSubTree
} from "@/api/componentsApi/userselector";

export default {
  data() {
    return {
      userSelectorOptions: {
        size: 'small', // 回显框的大小：medium/small/mini,默认值为small
        width: 1000, // dialog的宽度：默认值为1000px
        classifyOptions: { // 大分类配置
          orgsOptions: { // 组织配置
            name: 'orgs',
            checkbox: {
              firm: true, // 公司是否可选，默认值为true
              dept: true, // 部门是否可选, 默认值为 true
              post: true  // 岗位是否可选, 默认值为 true
            },
            queryPersonnel: true, // 是否查询人员，默认值为true
            showPost: false,  // 是否显示岗位, 默认值为false
            multiple: true  // 是否多选, 默认值为true
          },
          roleOptions: { // 角色配置
            name: 'role',
            checkbox: true, // 是否可选，默认值为true
            multiple: true, // 是否多选，默认值为true
            queryPersonnel: true // 是否查询人员，默认值为true
          },
          personnelOptions: { // 人员配置
            name: 'personnel',
            multiple: true // 是否多选，默认值为true
          },
          supSubOptions: {
            name: 'supSub',
            queryPersonnel: false, // 是否查询人员，该配置项始终为false
            multiple: true // 是否多选，默认为true
          }
        },
      },
      getOrgsTree, // 查询组织Tree
      getRoleTree, // 查询角色Tree
      getByIdAndUserName, // 查询人员列表
      getSupSubTree, // 查询上下级Tree
      initData: [] // 初始化数据
    }
  },
  methods: {
    submitHandler(data) { // 点击“确认”按钮返回的已选择数据
      console.log('选中的数据', data);
    }
  }
}
</script>