|
|
|
@ -3,110 +3,151 @@ |
|
|
|
<template> |
|
|
|
<div class="main"> |
|
|
|
<div class="left"> |
|
|
|
<div class="ns-table-title">部门管理</div> |
|
|
|
<div class="ns-table-title ns-title-extra-box">部门管理</div> |
|
|
|
<a-row> |
|
|
|
<a-col :span="12" class="tree"> |
|
|
|
<ns-button style="margin: 10px" type="primary" @click="pipe(addApartment)"> |
|
|
|
新增部门 |
|
|
|
</ns-button> |
|
|
|
<ns-button type="primary" @click="pipe(addApartmentSon, true)">新增子部门</ns-button> |
|
|
|
<ns-button style="margin: 10px" type="primary" @click="pipe(deleteDept, true)"> |
|
|
|
删除 |
|
|
|
</ns-button> |
|
|
|
<a-col :span="8" class="tree"> |
|
|
|
<a-tree |
|
|
|
ref="treeRef" |
|
|
|
v-if="deptTreeData?.length" |
|
|
|
:tree-data="deptTreeData" |
|
|
|
:selectedKeys="deptTreeSelectedKeys" |
|
|
|
blockNode |
|
|
|
defaultExpandAll |
|
|
|
@select="SelectApartmentTree"> |
|
|
|
<template #title="data"> |
|
|
|
{{ data.deptInfo?.deptName }} |
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center"> |
|
|
|
<span>{{ data.deptInfo?.deptName }}</span> |
|
|
|
<a-dropdown> |
|
|
|
<ns-icon name="actionMore" size="14" class="actionMore" /> |
|
|
|
<template #overlay> |
|
|
|
<a-menu> |
|
|
|
<a-menu-item |
|
|
|
v-for="(action, index) in filterAction(data, dropActions)" |
|
|
|
:key="index" |
|
|
|
@click="action.func(data)"> |
|
|
|
<span>{{ action.title }}</span> |
|
|
|
</a-menu-item> |
|
|
|
</a-menu> |
|
|
|
</template> |
|
|
|
</a-dropdown> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</a-tree> |
|
|
|
<a-empty style="margin-top: 120px" v-else /> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12" class="list"> |
|
|
|
<a-tabs v-model:activeKey="activeKey"> |
|
|
|
<a-tab-pane :key="1" tab="部门信息"> |
|
|
|
<ns-form |
|
|
|
ref="formRef" |
|
|
|
:schemas="formSchema" |
|
|
|
:wrapperCol="{ span: 18 }" |
|
|
|
:model="formData" |
|
|
|
formLayout="vertical" |
|
|
|
class="form" /> |
|
|
|
</a-tab-pane> |
|
|
|
<a-tab-pane :key="2" :disabled="selectRef?.hasOwnProperty('orgInfo')" tab="部门权限"> |
|
|
|
<a-tree |
|
|
|
v-if="deptPermissionTreeData?.length" |
|
|
|
:tree-data="deptPermissionTreeData" |
|
|
|
:fieldNames="{ children: 'menus', title: 'label', key: 'permissionId' }" |
|
|
|
v-model:checkedKeys="deptcheckedKeys" |
|
|
|
checkable |
|
|
|
:selectable="false" |
|
|
|
defaultExpandAll |
|
|
|
@check="deptCheck"> |
|
|
|
<template #title="data"> {{ data.label }}</template> |
|
|
|
</a-tree> |
|
|
|
</a-tab-pane> |
|
|
|
</a-tabs> |
|
|
|
<ns-button style="margin: 16px" type="primary" @click="CancelApartment">取消 </ns-button> |
|
|
|
<ns-button v-show="disabled" type="primary" @click="pipe(deptEdit, true, false)" |
|
|
|
>编辑</ns-button |
|
|
|
> |
|
|
|
<ns-button v-show="!disabled" type="primary" @click="deptSure">确定</ns-button> |
|
|
|
<a-col :span="16" class="list"> |
|
|
|
<div class="pane"> |
|
|
|
<a-tabs v-model:activeKey="activeKey"> |
|
|
|
<a-tab-pane :key="1" tab="部门信息"> |
|
|
|
<ns-form |
|
|
|
ref="formRef" |
|
|
|
:schemas="formSchema" |
|
|
|
:wrapperCol="{ span: 19 }" |
|
|
|
:labelCol="{ span: 5 }" |
|
|
|
:model="formData" |
|
|
|
formLayout="vertical" |
|
|
|
class="form" /> |
|
|
|
</a-tab-pane> |
|
|
|
<a-tab-pane :key="2" :disabled="selectRef?.hasOwnProperty('orgInfo')" tab="部门权限"> |
|
|
|
<a-tree |
|
|
|
v-if="deptPermissionTreeData?.length" |
|
|
|
:tree-data="deptPermissionTreeData" |
|
|
|
:fieldNames="{ children: 'menus', title: 'label', key: 'permissionId' }" |
|
|
|
v-model:checkedKeys="deptcheckedKeys" |
|
|
|
checkable |
|
|
|
:selectable="false" |
|
|
|
defaultExpandAll |
|
|
|
@check="deptCheck"> |
|
|
|
<template #title="data"> {{ data.label }}</template> |
|
|
|
</a-tree> |
|
|
|
<a-empty style="margin-top: 120px" v-else /> |
|
|
|
</a-tab-pane> |
|
|
|
</a-tabs> |
|
|
|
<a-space v-if="activeKey === 1 || deptPermissionTreeData?.length"> |
|
|
|
<ns-button type="primary" @click="CancelApartment">取消 </ns-button> |
|
|
|
<ns-button v-show="disabled" type="primary" @click="pipe(deptEdit, true, false)"> |
|
|
|
编辑 |
|
|
|
</ns-button> |
|
|
|
<ns-button v-show="!disabled" type="primary" @click="deptSure">确定</ns-button> |
|
|
|
</a-space> |
|
|
|
</div> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<div class="ns-table-title">角色管理</div> |
|
|
|
<div class="ns-table-title ns-title-extra-box">角色管理</div> |
|
|
|
<a-row> |
|
|
|
<a-col :span="12" class="tree"> |
|
|
|
<ns-button style="margin: 10px" type="primary" @click="rolePipe(addUser, true)"> |
|
|
|
新增角色 |
|
|
|
</ns-button> |
|
|
|
<ns-button type="primary" @click="rolePipe(addUserSon)">新增子角色</ns-button> |
|
|
|
<ns-button style="margin: 10px" type="primary" @click="rolePipe(deleteUser)"> |
|
|
|
删除 |
|
|
|
</ns-button> |
|
|
|
<a-col :span="8" class="tree"> |
|
|
|
<a-space wrap style="margin-bottom: 16px"> |
|
|
|
<ns-button type="primary" @click="rolePipe(addUser, true)"> 新增角色 </ns-button> |
|
|
|
<ns-button type="primary" @click="rolePipe(addUserSon)">新增子角色</ns-button> |
|
|
|
<ns-button type="primary" @click="rolePipe(deleteUser)"> 删除 </ns-button> |
|
|
|
</a-space> |
|
|
|
<a-tree |
|
|
|
v-if="roleTreeData.length" |
|
|
|
:tree-data="roleTreeData" |
|
|
|
:selectedKeys="roleTreeSelectedKeys" |
|
|
|
blockNode |
|
|
|
defaultExpandAll |
|
|
|
@select="SelectUserTree"> |
|
|
|
<template #title="data"> |
|
|
|
{{ data.zhName }} |
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center"> |
|
|
|
<span> {{ data.zhName }}</span> |
|
|
|
<!-- <a-dropdown> |
|
|
|
<ns-icon name="actionMore" size="14" class="actionMore" /> |
|
|
|
<template #overlay> |
|
|
|
<a-menu> |
|
|
|
<a-menu-item |
|
|
|
v-for="(action, index) in dropRoleActions" |
|
|
|
:key="index" |
|
|
|
@click="action.func(data)"> |
|
|
|
<span>{{ action.title }}</span> |
|
|
|
</a-menu-item> |
|
|
|
</a-menu> |
|
|
|
</template> |
|
|
|
</a-dropdown> --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</a-tree> |
|
|
|
<a-empty style="margin-top: 120px" v-else /> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12" class="list"> |
|
|
|
<a-tabs v-model:activeKey="roleActiveKey"> |
|
|
|
<a-tab-pane :key="1" tab="角色信息"> |
|
|
|
<ns-form |
|
|
|
ref="formRoleRef" |
|
|
|
:schemas="formSchema2" |
|
|
|
:model="roleFormData" |
|
|
|
:wrapperCol="{ span: 18 }" |
|
|
|
formLayout="vertical" |
|
|
|
class="form" /> |
|
|
|
</a-tab-pane> |
|
|
|
<a-tab-pane :key="2" tab="角色权限"> |
|
|
|
<a-tree |
|
|
|
v-if="rolePermissionTreeData?.length" |
|
|
|
:tree-data="rolePermissionTreeData" |
|
|
|
v-model:checkedKeys="roleCheckedKeys" |
|
|
|
defaultExpandAll |
|
|
|
:fieldNames="{ children: 'menus', title: 'label', key: 'permissionId' }" |
|
|
|
:selectable="false" |
|
|
|
checkable |
|
|
|
@check="roleCheck" /> |
|
|
|
</a-tab-pane> |
|
|
|
</a-tabs> |
|
|
|
<ns-button style="margin: 16px" type="primary" @click="CancelUser">取消</ns-button> |
|
|
|
<ns-button v-show="roleDisabled" type="primary" @click="rolePipe(roleEdit, false, false)"> |
|
|
|
编辑 |
|
|
|
</ns-button> |
|
|
|
<ns-button v-show="!roleDisabled" type="primary" @click="roleSure"> 确定 </ns-button> |
|
|
|
<a-col :span="16" class="list"> |
|
|
|
<div class="pane"> |
|
|
|
<a-tabs v-model:activeKey="roleActiveKey"> |
|
|
|
<a-tab-pane :key="1" tab="角色信息"> |
|
|
|
<ns-form |
|
|
|
ref="formRoleRef" |
|
|
|
:schemas="formSchema2" |
|
|
|
:model="roleFormData" |
|
|
|
:labelCol="{ span: 5 }" |
|
|
|
:wrapperCol="{ span: 19 }" |
|
|
|
formLayout="vertical" |
|
|
|
class="form" /> |
|
|
|
</a-tab-pane> |
|
|
|
<a-tab-pane :key="2" tab="角色权限"> |
|
|
|
<a-tree |
|
|
|
v-if="rolePermissionTreeData?.length" |
|
|
|
:tree-data="rolePermissionTreeData" |
|
|
|
v-model:checkedKeys="roleCheckedKeys" |
|
|
|
defaultExpandAll |
|
|
|
:fieldNames="{ children: 'menus', title: 'label', key: 'permissionId' }" |
|
|
|
:selectable="false" |
|
|
|
checkable |
|
|
|
@check="roleCheck" /> |
|
|
|
<a-empty style="margin-top: 120px" v-else /> |
|
|
|
</a-tab-pane> |
|
|
|
</a-tabs> |
|
|
|
<a-space v-if="activeKey === 1 || rolePermissionTreeData?.length"> |
|
|
|
<ns-button type="primary" @click="CancelUser">取消</ns-button> |
|
|
|
<ns-button |
|
|
|
v-show="roleDisabled" |
|
|
|
type="primary" |
|
|
|
@click="rolePipe(roleEdit, false, false)"> |
|
|
|
编辑 |
|
|
|
</ns-button> |
|
|
|
<ns-button v-show="!roleDisabled" type="primary" @click="roleSure"> 确定 </ns-button> |
|
|
|
</a-space> |
|
|
|
</div> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</div> |
|
|
|
@ -174,8 +215,6 @@ |
|
|
|
|
|
|
|
/**操作拦截 */ |
|
|
|
const pipe = (func: Function, flag = false, toggle = true) => { |
|
|
|
console.log(selectRef.value); |
|
|
|
|
|
|
|
if (toggle) activeKey.value = 1; |
|
|
|
if (flag) { |
|
|
|
// 只有部门的操作 |
|
|
|
@ -237,6 +276,14 @@ |
|
|
|
}; |
|
|
|
|
|
|
|
getPermissionTree({ projectId, orgId }); |
|
|
|
// 选中自己的第一个部门 |
|
|
|
const initDept = () => { |
|
|
|
if (!deptTreeData.value?.length || !deptTreeData.value[0]?.children?.length) return; |
|
|
|
const info = { |
|
|
|
node: { key: '0-0-0', dataRef: { deptInfo: deptTreeData.value[0]?.children[0].deptInfo } }, |
|
|
|
}; |
|
|
|
SelectApartmentTree(['0-0-0'], info); |
|
|
|
}; |
|
|
|
|
|
|
|
// 部门树 |
|
|
|
const getDepartList = (params) => { |
|
|
|
@ -255,6 +302,7 @@ |
|
|
|
}; |
|
|
|
getDepartList({ orgId }).then((res) => { |
|
|
|
deptTreeData.value = res; |
|
|
|
initDept(); |
|
|
|
}); |
|
|
|
|
|
|
|
// 获取部门树 |
|
|
|
@ -267,14 +315,24 @@ |
|
|
|
|
|
|
|
// 获取角色树 |
|
|
|
const getUserTree = (params = { deptId: selectRef.value?.deptInfo?.deptId }) => { |
|
|
|
http.post(department.queryRoleTree, params).then((res) => { |
|
|
|
return http.post(department.queryRoleTree, params).then((res) => { |
|
|
|
roleTreeData.value = res.data; |
|
|
|
}); |
|
|
|
}; |
|
|
|
// 根据依赖刷新角色树 |
|
|
|
watchEffect(() => { |
|
|
|
if (selectRef.value) { |
|
|
|
getUserTree(); |
|
|
|
getUserTree().then(() => { |
|
|
|
return; |
|
|
|
if (!roleTreeData.value?.length) { |
|
|
|
selectRoleRef.value = {}; |
|
|
|
roleFormData.value = {}; |
|
|
|
} |
|
|
|
const info = { |
|
|
|
node: { key: '0-0', dataRef: { ...roleTreeData.value[0] } }, |
|
|
|
}; |
|
|
|
SelectUserTree(['0-0'], info); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
@ -285,26 +343,28 @@ |
|
|
|
callback: null, |
|
|
|
}; |
|
|
|
|
|
|
|
const addApartment = () => { |
|
|
|
const addApartment = (data) => { |
|
|
|
const { deptInfo } = data; |
|
|
|
|
|
|
|
disabled.value = false; |
|
|
|
opMap.type = 'addDept'; |
|
|
|
formData.value = {}; |
|
|
|
let sourceOrgId = ''; |
|
|
|
if (!currentOrgRef.value.own) { |
|
|
|
if (deptInfo.orgId !== orgId) { |
|
|
|
// 此处为给关联企业加部门 |
|
|
|
sourceOrgId = orgId; |
|
|
|
} |
|
|
|
opMap.fuc = (params) => { |
|
|
|
return formRef.value.triggerSubmit().then(() => { |
|
|
|
return http.post(department.deptSave, { |
|
|
|
...params, |
|
|
|
orgId: selectRef.value.deptInfo?.orgId, |
|
|
|
orgId: deptInfo?.orgId, |
|
|
|
sourceOrgId, |
|
|
|
projectId, |
|
|
|
orgName, |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
return; |
|
|
|
}; |
|
|
|
|
|
|
|
const addApartmentSon = () => { |
|
|
|
@ -365,17 +425,22 @@ |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
const deleteDept = () => { |
|
|
|
const deleteDept = (data) => { |
|
|
|
console.log(data); |
|
|
|
|
|
|
|
// 删除逻辑 |
|
|
|
Modal.confirm({ |
|
|
|
title: '是否确认删除', |
|
|
|
onOk() { |
|
|
|
http.post(department.deptDel, { deptId: selectRef.value.deptInfo.deptId }).then(() => { |
|
|
|
http.post(department.deptDel, { deptId: data.deptInfo.deptId }).then(() => { |
|
|
|
getTree(); |
|
|
|
clearDeptData(); |
|
|
|
// 清空select树 |
|
|
|
deptTreeSelectedKeys.value = []; |
|
|
|
selectRef.value = ''; |
|
|
|
if (data.selected) { |
|
|
|
// 删除选中的数据需要清空 |
|
|
|
deptTreeSelectedKeys.value = []; |
|
|
|
selectRef.value = ''; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
onCancel() { |
|
|
|
@ -647,55 +712,116 @@ |
|
|
|
rolePermission(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 部门区域的dropdown |
|
|
|
const dropActions = ref([ |
|
|
|
{ title: '新增部门', func: addApartment, key: 'addDept' }, |
|
|
|
{ title: '新增子部门', func: addApartmentSon, key: 'addDeptSon' }, |
|
|
|
{ title: '删除', func: deleteDept, key: 'deleteDept' }, |
|
|
|
// { title: '新增角色', func: addUser, key: 'addUser' }, |
|
|
|
]); |
|
|
|
|
|
|
|
const filterAction = (data, actions) => { |
|
|
|
if (data.hasOwnProperty('orgInfo')) { |
|
|
|
// 企业节点 |
|
|
|
return actions.filter(({ key }) => key === 'addDept'); |
|
|
|
} |
|
|
|
return actions; |
|
|
|
}; |
|
|
|
|
|
|
|
// 角色区域的dropdown |
|
|
|
const dropRoleActions = ref([ |
|
|
|
{ title: '新增角色', func: addUser, key: 'addUser' }, |
|
|
|
{ title: '新增子角色', func: addUserSon, key: 'addUserSon' }, |
|
|
|
{ title: '删除', func: deleteUser, key: 'deleteUser' }, |
|
|
|
]); |
|
|
|
const treeRef = ref(); |
|
|
|
console.log(treeRef); |
|
|
|
</script> |
|
|
|
<style lang="less" scoped> |
|
|
|
:deep(.ns-form::after) { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.actionMore { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
:deep(.ant-row) { |
|
|
|
height: calc(100% - 44px); |
|
|
|
} |
|
|
|
:deep(.ant-tree-node-content-wrapper) { |
|
|
|
&:hover { |
|
|
|
.actionMore { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.ant-tabs-nav-wrap) { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
:deep(.ant-tabs-tabpane) { |
|
|
|
padding: 20px; |
|
|
|
padding-top: @ns-gap; |
|
|
|
.form { |
|
|
|
margin: 0 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.ant-space) { |
|
|
|
justify-content: flex-end; |
|
|
|
} |
|
|
|
|
|
|
|
.main { |
|
|
|
display: flex; |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
background-color: @ns-content-bg; |
|
|
|
> div:first-child { |
|
|
|
margin-right: @ns-gap; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.left { |
|
|
|
.left, |
|
|
|
.right { |
|
|
|
width: 50%; |
|
|
|
height: calc(100vh-50px); |
|
|
|
border-right: 5px solid rgb(229, 235, 240); |
|
|
|
height: 100%; |
|
|
|
padding: @ns-gap; |
|
|
|
background-color: @white; |
|
|
|
border-radius: @ns-border-radius; |
|
|
|
box-shadow: @ns-content-box-shadow; |
|
|
|
} |
|
|
|
|
|
|
|
.tree { |
|
|
|
width: 400px; |
|
|
|
height: 89vh; |
|
|
|
border-right: 2px solid rgb(229, 235, 240); |
|
|
|
height: 100%; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
border-radius: @ns-border-radius; |
|
|
|
border: 1px solid #ebeef5; |
|
|
|
padding: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.top { |
|
|
|
height: 50vh; |
|
|
|
border-bottom: 5px solid rgb(229, 235, 240); |
|
|
|
.list { |
|
|
|
padding-left: @ns-gap; |
|
|
|
height: 100%; |
|
|
|
.pane { |
|
|
|
padding-left: @ns-gap; |
|
|
|
border-left: 1px solid #ebeef5; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
:deep(.ant-tabs-content) { |
|
|
|
height: 100%; |
|
|
|
.ant-tree { |
|
|
|
height: 100%; |
|
|
|
overflow-y: scroll; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.ns-table-title { |
|
|
|
text-align: left; |
|
|
|
height: 46px; |
|
|
|
line-height: 46px; |
|
|
|
font-size: 18px; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
user-select: text; |
|
|
|
padding-left: 16px; |
|
|
|
width: 100%; |
|
|
|
border-bottom: 2px solid rgb(229, 235, 240); |
|
|
|
} |
|
|
|
|
|
|
|
.table { |
|
|
|
width: 2000px; |
|
|
|
margin-bottom: @ns-gap; |
|
|
|
} |
|
|
|
|
|
|
|
.admin { |
|
|
|
|
xuziqiang
8 months ago
