|
|
|
@ -6,16 +6,26 @@ |
|
|
|
<div class="ns-table-title">部门管理</div> |
|
|
|
<a-row> |
|
|
|
<a-col :span="12" class="tree"> |
|
|
|
<ns-button style="margin: 10px" type="primary" @click="addApartment">新增部门</ns-button> |
|
|
|
<ns-button type="primary" @click="addApartmentSon">新增子部门</ns-button> |
|
|
|
<ns-button style="margin: 10px" type="primary" @click="deleteApartment">删除</ns-button> |
|
|
|
<ns-button :disabled="disabled" style="margin: 10px" type="primary" @click="addApartment" |
|
|
|
>新增部门</ns-button |
|
|
|
> |
|
|
|
<ns-button :disabled="disabled" type="primary" @click="addApartmentSon" |
|
|
|
>新增子部门</ns-button |
|
|
|
> |
|
|
|
<ns-button |
|
|
|
:disabled="disabled" |
|
|
|
style="margin: 10px" |
|
|
|
type="primary" |
|
|
|
@click="deleteApartment" |
|
|
|
>删除</ns-button |
|
|
|
> |
|
|
|
<a-tree |
|
|
|
v-if="apartmentTreeData?.length" |
|
|
|
:tree-data="apartmentTreeData" |
|
|
|
defaultExpandAll |
|
|
|
@select="SelectApartmentTree"> |
|
|
|
<template #title="data"> |
|
|
|
{{ data.deptInfo.deptName }} |
|
|
|
{{ data.deptInfo?.deptName }} |
|
|
|
</template> |
|
|
|
</a-tree> |
|
|
|
</a-col> |
|
|
|
@ -51,12 +61,20 @@ |
|
|
|
<div class="ns-table-title">角色管理</div> |
|
|
|
<a-row> |
|
|
|
<a-col :span="12" class="tree"> |
|
|
|
<ns-button style="margin: 10px" type="primary" @click="addUser">新增角色</ns-button> |
|
|
|
<ns-button type="primary" @click="addUserSon">新增子角色</ns-button> |
|
|
|
<ns-button style="margin: 10px" type="primary" @click="deleteUser">删除</ns-button> |
|
|
|
<a-tree :tree-data="userTreeData" defaultExpandAll @select="SelectUserTree"> |
|
|
|
<ns-button :disabled="disabled2" style="margin: 10px" type="primary" @click="addUser" |
|
|
|
>新增角色</ns-button |
|
|
|
> |
|
|
|
<ns-button :disabled="disabled2" type="primary" @click="addUserSon">新增子角色</ns-button> |
|
|
|
<ns-button :disabled="disabled2" style="margin: 10px" type="primary" @click="deleteUser" |
|
|
|
>删除</ns-button |
|
|
|
> |
|
|
|
<a-tree |
|
|
|
v-if="userTreeData.length" |
|
|
|
:tree-data="userTreeData" |
|
|
|
defaultExpandAll |
|
|
|
@select="SelectUserTree"> |
|
|
|
<template #title="data"> |
|
|
|
{{ data }} |
|
|
|
{{ data.zhName }} |
|
|
|
</template> |
|
|
|
</a-tree> |
|
|
|
</a-col> |
|
|
|
@ -94,10 +112,11 @@ |
|
|
|
import { Modal } from 'ant-design-vue'; |
|
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; |
|
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
|
import { uuid } from '@antv/x6/lib/util/string/uuid'; |
|
|
|
import { cloneDeep } from 'lodash-es'; |
|
|
|
import { formConfig, formConfig2 } from './config'; |
|
|
|
import { department } from '/@/api/origanizemanage'; |
|
|
|
import { permission } from '/@/api/origanizemanage'; |
|
|
|
import { NsMessage } from '/nerv-lib/component'; |
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
name: 'AuthorityManageIndex', |
|
|
|
@ -119,39 +138,10 @@ |
|
|
|
const formSchema2 = formConfig2(disabled2 as any); |
|
|
|
const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId; |
|
|
|
const projectId = JSON.parse(sessionStorage.getItem('userInfo')).projectId; |
|
|
|
|
|
|
|
watch(ApartcheckedKeys, () => { |
|
|
|
console.log('checkedKeys', ApartcheckedKeys.value); |
|
|
|
}); |
|
|
|
watch(UsercheckedKeys, () => { |
|
|
|
console.log('checkedKeys', UsercheckedKeys.value); |
|
|
|
}); |
|
|
|
|
|
|
|
// 部门树 |
|
|
|
const getDepartList = (params) => { |
|
|
|
return http.post(department.dartList, params); |
|
|
|
}; |
|
|
|
getDepartList({ orgId: 1 }).then((res) => { |
|
|
|
apartmentTreeData.value = res.data; |
|
|
|
}); |
|
|
|
const opMap: any = { |
|
|
|
type: 'add', |
|
|
|
fuc: () => {}, |
|
|
|
record: {}, |
|
|
|
}; |
|
|
|
|
|
|
|
const userAdminTreeData = ref([]); |
|
|
|
const apartmentTreeData = ref([]); |
|
|
|
|
|
|
|
const userTreeData = ref([ |
|
|
|
{ |
|
|
|
title: '产品总监', |
|
|
|
key: '0-0', |
|
|
|
children: [ |
|
|
|
{ title: '产品经理', key: '0-0-0', info: { departname: '产品经理' } }, |
|
|
|
{ title: '产品助理', key: '0-0-1', info: { departname: '产品助理' } }, |
|
|
|
], |
|
|
|
}, |
|
|
|
]); |
|
|
|
const userTreeData = ref([]); |
|
|
|
|
|
|
|
const apartmentAdminTreeData = [ |
|
|
|
{ |
|
|
|
@ -174,17 +164,40 @@ |
|
|
|
], |
|
|
|
}, |
|
|
|
]; |
|
|
|
watch(ApartcheckedKeys, () => { |
|
|
|
console.log('checkedKeys', ApartcheckedKeys.value); |
|
|
|
}); |
|
|
|
watch(UsercheckedKeys, () => { |
|
|
|
console.log('checkedKeys', UsercheckedKeys.value); |
|
|
|
}); |
|
|
|
|
|
|
|
const userAdminTreeData = ref([ |
|
|
|
{ |
|
|
|
title: '产品总监', |
|
|
|
key: '0-0', |
|
|
|
children: [ |
|
|
|
{ title: '产品经理1', key: '0-0-0' }, |
|
|
|
{ title: '产品经理2', key: '0-0-1' }, |
|
|
|
], |
|
|
|
}, |
|
|
|
]); |
|
|
|
// 部门树 |
|
|
|
const getDepartList = (params) => { |
|
|
|
return http.post(department.dartList, params); |
|
|
|
}; |
|
|
|
getDepartList({ orgId }).then((res) => { |
|
|
|
apartmentTreeData.value = res.data; |
|
|
|
}); |
|
|
|
|
|
|
|
const getTree = () => { |
|
|
|
getDepartList({ orgId }).then((res) => { |
|
|
|
apartmentTreeData.value = res.data; |
|
|
|
NsMessage.success('操作成功'); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const getUserTree = (params = { deptId: 2 }) => { |
|
|
|
http.post(department.queryRoleTree, params).then((res) => { |
|
|
|
userTreeData.value = res.data; |
|
|
|
}); |
|
|
|
}; |
|
|
|
getUserTree({ deptId: 2 }); |
|
|
|
const opMap: any = { |
|
|
|
type: 'add', |
|
|
|
fuc: () => {}, |
|
|
|
record: {}, |
|
|
|
callback: null, |
|
|
|
}; |
|
|
|
|
|
|
|
function fetch(api, params) { |
|
|
|
return http.post(api, params); |
|
|
|
@ -192,9 +205,14 @@ |
|
|
|
|
|
|
|
const addApartment = () => { |
|
|
|
disabled.value = false; |
|
|
|
opMap.type = 'add'; |
|
|
|
opMap.type = 'addDept'; |
|
|
|
formData.value = {}; |
|
|
|
opMap.fuc = (params) => { |
|
|
|
fetch(department.deptSave, { ...params, orgId, projectId }); |
|
|
|
return http.post(department.deptSave, { |
|
|
|
...params, |
|
|
|
orgId, |
|
|
|
projectId, |
|
|
|
}); |
|
|
|
}; |
|
|
|
return; |
|
|
|
}; |
|
|
|
@ -204,7 +222,7 @@ |
|
|
|
opMap.type = 'addson'; |
|
|
|
formData.value = {}; |
|
|
|
opMap.fuc = (params) => { |
|
|
|
fetch(department.deptSave, { |
|
|
|
return http.post(department.deptSave, { |
|
|
|
...params, |
|
|
|
orgId, |
|
|
|
projectId, |
|
|
|
@ -215,30 +233,58 @@ |
|
|
|
|
|
|
|
const addUser = () => { |
|
|
|
disabled2.value = false; |
|
|
|
opMap.type = 'addUser'; |
|
|
|
formData.value = {}; |
|
|
|
opMap.fuc = (params) => { |
|
|
|
delete params.roleId; |
|
|
|
return http.post(department.addRole, { |
|
|
|
...params, |
|
|
|
orgId, |
|
|
|
projectId, |
|
|
|
enName: 'leader', |
|
|
|
roleNote: 'wqe', |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
const addUserSon = () => { |
|
|
|
disabled.value = false; |
|
|
|
opMap.type = 'addson'; |
|
|
|
opMap.type = 'addUserSon'; |
|
|
|
formData.value = {}; |
|
|
|
opMap.fuc = (params) => { |
|
|
|
delete params.roleId; |
|
|
|
delete params.proleId; |
|
|
|
return http.post(department.addRole, { |
|
|
|
...params, |
|
|
|
proleId: 4, |
|
|
|
orgId, |
|
|
|
projectId, |
|
|
|
enName: 'leader', |
|
|
|
roleNote: 'wqe', |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
const deleteApartment = () => { |
|
|
|
// 删除逻辑 |
|
|
|
// opMap.type = 'deptDelete'; |
|
|
|
// opMap.fuc = (params) => { |
|
|
|
// return http.post(department.deptDel, params).then(() => { |
|
|
|
// NsMessage.success('删除成功'); |
|
|
|
// }); |
|
|
|
// }; |
|
|
|
Modal.confirm({ |
|
|
|
title: '是否确认删除', |
|
|
|
icon: createVNode(ExclamationCircleOutlined), |
|
|
|
content: createVNode('div', { style: 'color:red;' }, ''), |
|
|
|
onOk() { |
|
|
|
function deepDel(data = apartmentTreeData.value[0].children) { |
|
|
|
data.map((item, index) => { |
|
|
|
if (item.key === selectKey.value) data.splice(index, 1); |
|
|
|
}); |
|
|
|
} |
|
|
|
deepDel(); |
|
|
|
console.log(selectKey.value); |
|
|
|
http.post(department.deptDel, { deptId: selectRef.value.deptInfo.deptId }).then(() => { |
|
|
|
getTree(); |
|
|
|
clearData(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
onCancel() { |
|
|
|
console.log('Cancel'); |
|
|
|
}, |
|
|
|
class: 'test', |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
@ -248,38 +294,46 @@ |
|
|
|
icon: createVNode(ExclamationCircleOutlined), |
|
|
|
content: createVNode('div', { style: 'color:red;' }, ''), |
|
|
|
onOk() { |
|
|
|
function deepDel(data = userTreeData.value[0].children) { |
|
|
|
data.map((item, index) => { |
|
|
|
if (item.key === selectKey2.value) data.splice(index, 1); |
|
|
|
}); |
|
|
|
} |
|
|
|
deepDel(); |
|
|
|
console.log(selectKey2.value); |
|
|
|
}, |
|
|
|
onCancel() { |
|
|
|
console.log('Cancel'); |
|
|
|
http.post(department.delRole, { roleId: selectRef2.value.roleId }).then(() => { |
|
|
|
getUserTree(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
class: 'test', |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const clearData = () => { |
|
|
|
selectRef.value = {}; |
|
|
|
formData.value = {}; |
|
|
|
opMap.type = ''; |
|
|
|
opMap.fuc = ''; |
|
|
|
selectKey.value = ''; |
|
|
|
}; |
|
|
|
// 部门选择 |
|
|
|
const SelectApartmentTree = (selectedKeys: any, info: any) => { |
|
|
|
console.log(selectedKeys, info); |
|
|
|
|
|
|
|
disabled.value = false; |
|
|
|
console.log(selectedKeys, 'selectedKeys'); |
|
|
|
console.log(info.node.dataRef, 'info'); |
|
|
|
const { selected } = info; |
|
|
|
disabled.value = !selected; |
|
|
|
console.log(info, 'info'); |
|
|
|
selectKey.value = selectedKeys[0]; |
|
|
|
selectRef.value = info.node.dataRef; |
|
|
|
formData.value = info.node.dataRef.deptInfo; |
|
|
|
formData.value = cloneDeep(info.node.dataRef.deptInfo); |
|
|
|
opMap.type = 'editDpet'; |
|
|
|
opMap.fuc = (params) => { |
|
|
|
return http.post(department.deptEdit, params); |
|
|
|
}; |
|
|
|
|
|
|
|
getUserTree({ deptId: selectRef.value.deptInfo.deptId }); |
|
|
|
}; |
|
|
|
|
|
|
|
// 角色选择 |
|
|
|
const SelectUserTree = (selectedKeys: any, info: any) => { |
|
|
|
disabled2.value = false; |
|
|
|
const { selected } = info; |
|
|
|
disabled2.value = !selected; |
|
|
|
console.log(selectedKeys, 'selectedKeys'); |
|
|
|
console.log(info.node.dataRef.info, 'info'); |
|
|
|
console.log(info, 'info'); |
|
|
|
selectKey2.value = selectedKeys[0]; |
|
|
|
selectRef2.value = info.node.dataRef; |
|
|
|
formData2.value = info.node.dataRef.info; |
|
|
|
formData2.value = cloneDeep(info.node.dataRef); |
|
|
|
}; |
|
|
|
|
|
|
|
const CancelApartment = () => { |
|
|
|
@ -305,27 +359,27 @@ |
|
|
|
|
|
|
|
// disabled.value = !disabled.value; |
|
|
|
// console.log(formData.value.name, 'formData'); |
|
|
|
console.log(opMap.type, 'opMap.type'); |
|
|
|
if (opMap.type === 'add') { |
|
|
|
console.log(opMap.type, 'ApartmentSure'); |
|
|
|
const opArr = ['addDept', 'editDpet']; |
|
|
|
if (opArr.includes(opMap.type)) { |
|
|
|
console.log(formRef.value, formData); |
|
|
|
opMap.fuc && opMap.fuc(formData.value); |
|
|
|
opMap.fuc && |
|
|
|
opMap.fuc(formData.value).then(() => { |
|
|
|
getTree(); |
|
|
|
}); |
|
|
|
} else if (selectRef.value && opMap.type === 'addson') |
|
|
|
opMap.fuc && opMap.fuc(formData.value); |
|
|
|
else { |
|
|
|
console.log('ss'); |
|
|
|
else if (opMap.type === 'deptDelete') { |
|
|
|
opMap.fuc && opMap.fuc({ ...formData.value, selectRef: selectRef.value }); |
|
|
|
} |
|
|
|
}; |
|
|
|
const UserSure = () => { |
|
|
|
disabled2.value = !disabled2.value; |
|
|
|
opMap.fuc && opMap.fuc(formData2.value); |
|
|
|
console.log(formData2.value, 'formData2'); |
|
|
|
console.log(opMap.type, 'opMap.type'); |
|
|
|
if (opMap.type === 'add') { |
|
|
|
userTreeData.value[0].children.push({ |
|
|
|
title: formData2.value.departname, |
|
|
|
key: 'a2', |
|
|
|
info: { ...formData2.value }, |
|
|
|
}); |
|
|
|
const typeArr = ['addUserSon', 'addUser']; |
|
|
|
if (typeArr.includes(opMap.type)) { |
|
|
|
opMap.fuc && opMap.fuc(formData2.value); |
|
|
|
} else if (selectRef2.value && opMap.type === 'addson') |
|
|
|
selectRef2.value['children'] = [ |
|
|
|
{ |
|
|
|
@ -379,16 +433,19 @@ |
|
|
|
display: flex; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.left { |
|
|
|
width: 50%; |
|
|
|
height: calc(100vh-50px); |
|
|
|
border-right: 5px solid rgb(229, 235, 240); |
|
|
|
} |
|
|
|
|
|
|
|
.tree { |
|
|
|
width: 400px; |
|
|
|
height: 89vh; |
|
|
|
border-right: 2px solid rgb(229, 235, 240); |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
@ -397,6 +454,7 @@ |
|
|
|
height: 50vh; |
|
|
|
border-bottom: 5px solid rgb(229, 235, 240); |
|
|
|
} |
|
|
|
|
|
|
|
.ns-table-title { |
|
|
|
text-align: left; |
|
|
|
height: 46px; |
|
|
|
@ -408,9 +466,11 @@ |
|
|
|
width: 100%; |
|
|
|
border-bottom: 2px solid rgb(229, 235, 240); |
|
|
|
} |
|
|
|
|
|
|
|
.table { |
|
|
|
width: 2000px; |
|
|
|
} |
|
|
|
|
|
|
|
.admin { |
|
|
|
text-align: left; |
|
|
|
height: 42px; |
|
|
|
@ -421,6 +481,7 @@ |
|
|
|
padding-left: 16px; |
|
|
|
width: calc(100% + 32px); |
|
|
|
} |
|
|
|
|
|
|
|
.form { |
|
|
|
margin: 20px; |
|
|
|
} |
|
|
|
|
xuziqiang
4 months ago