feat: 角色管理

fix/0524_ch
向文可 3 years ago
parent e40eefde1e
commit 9b9ed3f9d2

@ -1,3 +1,4 @@
import * as deptAPI from '@/api/permission/dept.js';
import * as featureAPI from '@/api/permission/feature.js'; import * as featureAPI from '@/api/permission/feature.js';
import * as menuAPI from '@/api/permission/menu.js'; import * as menuAPI from '@/api/permission/menu.js';
import * as api from '@/api/permission/role.js'; import * as api from '@/api/permission/role.js';
@ -11,6 +12,7 @@ const state = () => ({
opts: { opts: {
init: false, init: false,
system: [], system: [],
dept: [],
status: [ status: [
{ {
label: '启用', label: '启用',
@ -46,6 +48,7 @@ const actions = {
...state.opts, ...state.opts,
init: true, init: true,
system: await systemAPI.search(), system: await systemAPI.search(),
dept: await deptAPI.search({ hiddenDisable: true }),
}); });
}, },
loadMenu: async (context, systemId) => { loadMenu: async (context, systemId) => {
@ -61,6 +64,14 @@ const actions = {
} }
return res; return res;
}, },
updateDept: async (context, data) => {
let update = data.roleIds instanceof Array ? deptAPI.addRole : deptAPI.delRole;
let res = await update(data);
if (!res) {
ElMessage.error('保存组织机构失败');
}
return res;
},
detail: async (context, id) => { detail: async (context, id) => {
let res = await api.detail(id); let res = await api.detail(id);
if (!res) { if (!res) {

@ -59,7 +59,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="角色权限" name="2"> <el-tab-pane :disabled="!formState.form.id" label="角色权限" name="2">
<el-form <el-form
ref="refsForm2" ref="refsForm2"
v-loading="formState.submitting" v-loading="formState.submitting"
@ -107,7 +107,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="绑定组织" name="3"> <el-tab-pane :disabled="!formState.form.id" label="绑定组织" name="3">
<el-form <el-form
ref="refsForm3" ref="refsForm3"
v-loading="formState.submitting" v-loading="formState.submitting"
@ -116,7 +116,23 @@
:model="formState.form" :model="formState.form"
:rules="formState.rules3" :rules="formState.rules3"
> >
<el-form-item label="选择绑定组织" prop="menuIds" /> <el-form-item label="选择绑定组织" prop="departmentList">
<el-tree
ref="refsTree2"
:data="opts.dept"
:default-checked-keys="formState.form.departmentList.map((item) => item.id)"
default-expand-all
:expand-on-click-node="false"
highlight-current
node-key="id"
:props="{
label: 'name',
value: 'id',
}"
show-checkbox
@check-change="handleCheckDept"
/>
</el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -135,7 +151,7 @@
const store = useStore(); const store = useStore();
const loading = ref(false); const loading = ref(false);
const code = computed(() => store.state.role.code); const code = computed(() => store.state.role.code);
const list = computed(() => store.state.role.list); const list = computed(() => _.cloneDeep(store.state.role.list));
const total = computed(() => store.state.role.total); const total = computed(() => store.state.role.total);
const opts = computed(() => store.state.role.opts); const opts = computed(() => store.state.role.opts);
if (!unref(opts).init) { if (!unref(opts).init) {
@ -198,6 +214,7 @@
isEnable: true, isEnable: true,
menuIds: [], menuIds: [],
permissionIds: [], permissionIds: [],
departmentList: [],
}, },
rules1: { rules1: {
systemId: [{ required: true, message: '所属系统不能为空' }], systemId: [{ required: true, message: '所属系统不能为空' }],
@ -208,6 +225,9 @@
rules2: { rules2: {
menuIds: [{ required: true, message: '功能权限不能为空' }], menuIds: [{ required: true, message: '功能权限不能为空' }],
}, },
rules3: {
departmentList: [{ required: true, trigger: 'change', message: '绑定组织不能为空' }],
},
}); });
watch( watch(
() => formState.currentTab, () => formState.currentTab,
@ -217,7 +237,9 @@
res.permissionIds = []; res.permissionIds = [];
const deep = (arr) => { const deep = (arr) => {
(arr || []).forEach((item) => { (arr || []).forEach((item) => {
res.menuIds.push(item.id); if (item.isHave) {
res.menuIds.push(item.id);
}
res.permissionIds.push( res.permissionIds.push(
...(item.permissionChild || []).filter((item) => item.isHave).map((item) => item.id) ...(item.permissionChild || []).filter((item) => item.isHave).map((item) => item.id)
); );
@ -254,16 +276,61 @@
formState.form.permissionIds.splice(formState.form.permissionIds.indexOf(data.id), 1); formState.form.permissionIds.splice(formState.form.permissionIds.indexOf(data.id), 1);
} }
}; };
const refsTree2 = ref(null);
const updateChecked = ref(false);
const handleCheckDept = async (data, checked, childChecked) => {
if (!unref(updateChecked)) {
let params =
checked || childChecked
? {
departmentId: data.id,
isDistributionCurrentDepartmentEmployee: true,
roleIds: [formState.form.id],
}
: { departmentId: data.id, isDeleteDepartmentOfEmployeeRole: true, roleIds: formState.form.id };
let res = await store.dispatch('role/updateDept', params);
if (checked || childChecked) {
if (res) {
formState.form.departmentList.push({ ...data });
}
} else {
if (res) {
formState.form.departmentList.splice(
formState.form.departmentList.findIndex((item) => item.id === data.id),
1
);
}
}
nextTick(() => {
try {
unref(refsForm3).validate();
} catch (e) {
console.info(e);
}
updateChecked.value = true;
unref(refsTree2).setCheckedKeys(formState.form.departmentList.map((item) => item.id));
nextTick(() => {
updateChecked.value = false;
});
});
}
};
const handleCreate = (row) => { const handleCreate = (row) => {
formState.formVisible = true; formState.formVisible = true;
Object.assign( Object.assign(
formState.form, formState.form,
row || { _.cloneDeep(
id: null, row || {
systemId: null, id: null,
roleName: null, systemId: null,
roleDesc: null, roleName: null,
} roleDesc: null,
isEnable: true,
menuIds: [],
permissionIds: [],
departmentList: [],
}
)
); );
}; };
const handleCancel = () => { const handleCancel = () => {
@ -275,21 +342,23 @@
await proxy.$validate( await proxy.$validate(
formState.currentTab === '1' ? refsForm : formState.currentTab === '2' ? refsForm2 : refsForm3 formState.currentTab === '1' ? refsForm : formState.currentTab === '2' ? refsForm2 : refsForm3
); );
let data = _.cloneDeep(formState.form); if (formState.currentTab === '3') {
let res = await store.dispatch(
formState.currentTab === '1'
? 'role/save'
: formState.currentTab === '2'
? 'role/updateMenu'
: 'role/updateDept',
data
);
if (res && formState.currentTab === '1') {
formState.form.id = res.id;
}
if (res && formState.currentTab === '3') {
formState.formVisible = false; formState.formVisible = false;
formState.currentTab = '1';
handleSearch();
} else { } else {
let data = _.cloneDeep(formState.form);
let res = await store.dispatch(
formState.currentTab === '1'
? 'role/save'
: formState.currentTab === '2'
? 'role/updateMenu'
: 'role/updateDept',
data
);
if (res && formState.currentTab === '1') {
formState.form.id = res.id;
}
formState.currentTab = +formState.currentTab + 1 + ''; formState.currentTab = +formState.currentTab + 1 + '';
} }
} catch (e) { } catch (e) {
@ -368,16 +437,24 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.form2 { .el-tabs {
display: flex; .el-form {
.el-form-item { .el-form-item {
width: 50%; width: 100%;
flex: 1; :deep(.el-form-item__content) {
:deep(.el-form-item__content) {
.el-tree {
width: 100%; width: 100%;
.el-tree {
width: 100%;
}
} }
} }
} }
.form2 {
display: flex;
.el-form-item {
width: 50%;
flex: 1;
}
}
} }
</style> </style>

@ -21,10 +21,10 @@ export default (configEnv) => {
proxy: { proxy: {
'/api': { '/api': {
// target: 'http://192.168.10.109:8090/', // 显雨 // target: 'http://192.168.10.109:8090/', // 显雨
target: 'http://192.168.10.5:4500', // 高玉 // target: 'http://192.168.10.5:4500', // 高玉
// target: 'http://192.168.10.67:8090', // 罗战 // target: 'http://192.168.10.67:8090', // 罗战
// target: 'http://192.168.10.93:8090', // 周渺 // target: 'http://192.168.10.93:8090', // 周渺
// target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址 target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
// target: 'https://you-gateway.mashibing.com', // 生产环境 // target: 'https://you-gateway.mashibing.com', // 生产环境
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''), rewrite: (path) => path.replace(/^\/api/, ''),

Loading…
Cancel
Save