安装
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>