feat: 部门角色

.vscode/extensions.json

@@ -7,8 +7,8 @@
         "ecmel.vscode-html-css",
         "abusaidm.html-snippets",
         "octref.vetur",
-        "johnsoncodehk.volar",
         "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode"
+        "esbenp.prettier-vscode",
+        "Vue.volar"
     ]
 }

src/api/permission/dept.js

@@ -47,6 +47,13 @@ export const remove = (idList) => {
         params: { idList },
     });
 };
+export const searchRole = (params) => {
+    return request({
+        url: '/uc/role/department',
+        method: 'get',
+        params,
+    });
+};
 export const addRole = (data) => {
     return request({
         url: '/uc/department/role',

src/store/modules/permission/dept/dept.js

@@ -6,6 +6,7 @@ const state = () => ({
     total: 0,
     opts: {
         init: false,
+        role: [],
     },
 });
 const getters = {};

src/store/modules/permission/dept/deptRole.js

@@ -0,0 +1,76 @@
+import * as api from '@/api/permission/dept.js';
+import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
+const state = () => ({
+    code: 'DeptRoleManagement',
+    condition: {},
+    list: [],
+    total: 0,
+    opts: {
+        init: false,
+    },
+});
+const getters = {};
+const mutations = {
+    setCondition: (state, data) => (state.condition = data),
+    setList: (state, data) => (state.list = data),
+    setTotal: (state, data) => (state.total = data),
+    setOpts: (state, data) => (state.opts = data),
+};
+const actions = {
+    search: async ({ state, commit }) => {
+        let res = await api.searchRole(state.condition);
+        commit('setList', res || []);
+        if (!res) {
+            ElMessage.error('查询部门角色失败');
+        }
+        return res;
+    },
+    load: async ({ state, commit }) => {
+        commit('setOpts', {
+            ...state.opts,
+            init: true,
+        });
+    },
+    detail: async (context, id) => {
+        let res = await api.detail(id);
+        if (!res) {
+            ElMessage.error('加载详情失败');
+        }
+        return res;
+    },
+    save: async ({ dispatch }, data) => {
+        let save = data.id ? api.update : api.create;
+        let res = await save(data);
+        if (res) {
+            ElMessage.success('保存成功');
+            dispatch('search');
+        } else {
+            ElMessage.error('保存失败');
+        }
+        return res;
+    },
+    remove: async ({ dispatch }, idList) => {
+        if (!idList.length) {
+            ElMessage.warning('请选择要删除的数据');
+        } else {
+            try {
+                await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
+                let res = await api.remove(idList.join(','));
+                if (res) {
+                    ElMessage.success('删除成功');
+                    dispatch('search');
+                } else {
+                    ElMessage.error('删除失败');
+                }
+            } catch (e) {
+                console.info('取消删除', e);
+            }
+        }
+    },
+};
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};

src/views/permission/dept/index.vue

@@ -22,7 +22,7 @@
                         children: 'childDepartment',
                         disabled: (data) => !data.isEnable,
                     }"
-                    @current-change="(data) => (state.condition2.departmentId = data.id)"
+                    @current-change="(data) => handleChange(data.id)"
                 >
                     <template #default="{ data, node }">
                         <div class="flex">
@@ -89,7 +89,6 @@
                         :config="employeeConfig"
                         :data="employeeList"
                         :operation="['search']"
-                        :total="employeeTotal"
                         @search="handleSearchEmployee"
                     >
                         <template #search>
@@ -107,7 +106,42 @@
                         </template>
                     </table-list>
                 </el-tab-pane>
-                <el-tab-pane label="角色" name="role">待开发</el-tab-pane>
+                <el-tab-pane label="角色" name="role">
+                    <div class="role-list">
+                        <div v-for="(item, index) in roleList" :key="index" class="system">
+                            <h3 class="system-header">
+                                {{ item.systemVO.systemName }}
+                            </h3>
+                            <div class="flex">
+                                <el-tag
+                                    v-for="(role, j) in item.roleListVO"
+                                    :key="index + '' + j"
+                                    closable
+                                    size="large"
+                                    @close="handleDelRole(role.id)"
+                                >
+                                    {{ role.roleName }}
+                                </el-tag>
+                                <el-popover v-model:visible="roleVisible" placement="top" :width="160">
+                                    <!-- <el-select
+                                        :config="{ label: 'roleName', value: 'id' }"
+                                        :opts="opts.role"
+                                        style="margin-bottom: 10px"
+                                    /> -->
+                                    <p>还没做</p>
+                                    <div style="text-align: right; margin: 0">
+                                        <el-button size="small" text @click="roleVisible = false">取消</el-button>
+                                        <el-button size="small" type="primary" @click="handleAddRole">确定</el-button>
+                                    </div>
+                                    <template #reference>
+                                        <el-button>添加角色</el-button>
+                                    </template>
+                                </el-popover>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="!roleList.length" class="empty">暂无数据</div>
+                </el-tab-pane>
             </el-tabs>
         </div>
     </div>
@@ -130,12 +164,17 @@
     const state = reactive({
         condition1: { hiddenDisable: false },
         condition2: { employeeName: null, userName: null, phone: null, departmentId: null },
+        condition3: { departmentId: null },
     });
     const handleSearch = async () => {
         loading.value = true;
         await store.dispatch('dept/search');
         loading.value = false;
     };
+    const handleChange = (id) => {
+        state.condition2.departmentId = id;
+        state.condition3.departmentId = id;
+    };
     watch(
         () => state.condition1,
         (value) => {
@@ -147,7 +186,7 @@
 
     const currentTab = ref('employee');
 
-    /* 查询员工 */
+    /* 员工 */
     const loading2 = ref(false);
     const refsTable = ref(null);
     const employeeCode = computed(() => store.state.deptEmployee.code);
@@ -240,6 +279,35 @@
         ],
     });
 
+    /* 角色 */
+    const loading3 = ref(false);
+    const roleVisible = ref(false);
+    const roleList = computed(() => _.cloneDeep(store.state.deptRole.list));
+    const handleSearchRole = async () => {
+        if (state.condition3.departmentId) {
+            loading3.value = true;
+            await store.dispatch('deptRole/search');
+            loading3.value = false;
+        } else {
+            proxy.$message.error('请先选择部门');
+        }
+    };
+    watch(
+        () => state.condition3,
+        (value) => {
+            let search = value?.departmentId && value?.departmentId !== store.state.deptRole.condition.departmentId;
+            store.commit('deptRole/setCondition', _.cloneDeep(value));
+            if (search) {
+                handleSearchRole();
+            }
+        },
+        { immediate: true, deep: true }
+    );
+    const handleDelRole = async (id) => {
+        store.dispatch('deptRole/remove', { id });
+    };
+    const handleAddRole = async () => {};
+
     /* 表单 */
     const refsForm = ref(null);
     const formState = reactive({
@@ -301,6 +369,7 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
+                margin-bottom: @layout-space;
                 .aside-title {
                     font-size: @layout-h3;
                 }
@@ -336,7 +405,12 @@
             }
         }
         .content {
+            width: 100%;
+            flex-shrink: 1;
+            display: flex;
+            overflow: hidden;
             .el-tabs {
+                width: 100%;
                 height: 100%;
                 display: flex;
                 flex-direction: column;
@@ -347,6 +421,28 @@
                     }
                 }
             }
+            .common-list {
+                width: 100%;
+                overflow: hidden;
+            }
+            .role-list {
+                .system {
+                    & + .system {
+                        margin-top: @layout-space;
+                    }
+                    .system-header {
+                        margin-bottom: @layout-space;
+                    }
+                    .flex {
+                        display: flex;
+                        align-items: center;
+                        flex-wrap: wrap;
+                    }
+                    .el-tag {
+                        margin: @layout-space-small @layout-space @layout-space-small 0;
+                    }
+                }
+            }
         }
     }
 </style>