feat: 组织架构角色

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

@@ -1,4 +1,5 @@
 import * as api from '@/api/permission/dept.js';
+import * as systemAPI from '@/api/permission/system.js';
 import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
 const state = () => ({
     condition: {},
@@ -6,7 +7,7 @@ const state = () => ({
     total: 0,
     opts: {
         init: false,
-        role: [],
+        system: [],
     },
 });
 const getters = {};
@@ -29,6 +30,7 @@ const actions = {
         commit('setOpts', {
             ...state.opts,
             init: true,
+            system: await systemAPI.search(),
         });
     },
     detail: async (context, id) => {

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

@@ -1,4 +1,5 @@
 import * as api from '@/api/permission/dept.js';
+import * as roleAPI from '@/api/permission/role.js';
 import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
 const state = () => ({
     code: 'DeptRoleManagement',
@@ -9,7 +10,9 @@ const state = () => ({
         init: false,
     },
 });
-const getters = {};
+const getters = {
+    roleList: (state) => (systemId) => state.list.find((item) => item.systemVO.id === systemId)?.roleListVO || [],
+};
 const mutations = {
     setCondition: (state, data) => (state.condition = data),
     setList: (state, data) => (state.list = data),
@@ -31,16 +34,15 @@ const actions = {
             init: true,
         });
     },
-    detail: async (context, id) => {
-        let res = await api.detail(id);
+    role: async (context, systemId) => {
+        let res = await roleAPI.search({ pageIndex: 1, length: 9999, systemId });
         if (!res) {
-            ElMessage.error('加载详情失败');
+            ElMessage.error('查询系统角色失败');
         }
-        return res;
+        return res?.records || [];
     },
     save: async ({ dispatch }, data) => {
-        let save = data.id ? api.update : api.create;
-        let res = await save(data);
+        let res = await api.addRole(data);
         if (res) {
             ElMessage.success('保存成功');
             dispatch('search');
@@ -49,22 +51,18 @@ const actions = {
         }
         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);
+    remove: async ({ dispatch }, data) => {
+        try {
+            await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
+            let res = await api.delRole(data);
+            if (res) {
+                ElMessage.success('删除成功');
+                dispatch('search');
+            } else {
+                ElMessage.error('删除失败');
             }
+        } catch (e) {
+            console.info('取消删除', e);
         }
     },
 };

src/store/modules/permission/role/role.js

@@ -68,7 +68,7 @@ const actions = {
         let update = data.roleIds instanceof Array ? deptAPI.addRole : deptAPI.delRole;
         let res = await update(data);
         if (!res) {
-            ElMessage.error('保存组织机构失败');
+            ElMessage.error('保存失败');
         }
         return res;
     },

src/views/permission/dept/index.vue

@@ -107,40 +107,51 @@
                     </table-list>
                 </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>
+                    <template v-if="state.condition2.departmentId">
+                        <div class="role-list">
+                            <div v-for="(item, index) in opts.system" :key="index" class="system">
+                                <h3 class="system-header">
+                                    {{ item.systemName }}
+                                </h3>
+                                <div class="flex">
+                                    <el-tag
+                                        v-for="(role, j) in store.getters['deptRole/roleList'](item.id)"
+                                        :key="index + '' + j"
+                                        closable
+                                        size="large"
+                                        @close="handleDelRole(role.id)"
+                                    >
+                                        {{ role.roleName }}
+                                    </el-tag>
+                                    <el-button @click="handleAddRole(item.id)">添加角色</el-button>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div v-if="!roleList.length" class="empty">暂无数据</div>
+                    </template>
+                    <div v-else class="empty">请选择组织架构</div>
+                    <el-dialog v-model="roleVisible" title="添加角色">
+                        <el-form v-loading="loading3">
+                            <el-form-item>
+                                <el-select
+                                    v-model="checkedRole"
+                                    :config="{
+                                        label: 'roleName',
+                                        value: 'id',
+                                        disabled: (item) =>
+                                            store.getters['deptRole/roleList'](currentSystemId).findIndex(
+                                                (role) => role.id === item.id
+                                            ) !== -1,
+                                    }"
+                                    multiple
+                                    :opts="systemRoleList"
+                                />
+                            </el-form-item>
+                        </el-form>
+                        <template #footer>
+                            <el-button @click="roleVisible = false">取消</el-button>
+                            <el-button :loading="loading3" type="primary" @click="handleSaveRole">确定</el-button>
+                        </template>
+                    </el-dialog>
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -282,7 +293,9 @@
     /* 角色 */
     const loading3 = ref(false);
     const roleVisible = ref(false);
-    const roleList = computed(() => _.cloneDeep(store.state.deptRole.list));
+    const systemRoleList = ref([]);
+    const currentSystemId = ref(null);
+    const checkedRole = ref([]);
     const handleSearchRole = async () => {
         if (state.condition3.departmentId) {
             loading3.value = true;
@@ -304,9 +317,34 @@
         { immediate: true, deep: true }
     );
     const handleDelRole = async (id) => {
-        store.dispatch('deptRole/remove', { id });
+        store.dispatch('deptRole/remove', {
+            departmentId: state.condition3.departmentId,
+            isDeleteDepartmentOfEmployeeRole: true,
+            roleId: id,
+        });
+    };
+    const handleAddRole = async (id) => {
+        loading3.value = true;
+        roleVisible.value = true;
+        currentSystemId.value = id;
+        systemRoleList.value = await store.dispatch('deptRole/role', id);
+        loading3.value = false;
+    };
+    const handleSaveRole = async () => {
+        loading3.value = true;
+        let res =
+            !unref(checkedRole).length ||
+            (await store.dispatch('deptRole/save', {
+                departmentId: state.condition3.departmentId,
+                isDistributionCurrentDepartmentEmployee: true,
+                roleIds: unref(checkedRole),
+            }));
+        if (res) {
+            roleVisible.value = false;
+            handleSearchRole();
+        }
+        loading3.value = false;
     };
-    const handleAddRole = async () => {};
 
     /* 表单 */
     const refsForm = ref(null);

src/views/permission/role/index.vue

@@ -291,7 +291,7 @@
                       isDistributionCurrentDepartmentEmployee: true,
                       roleIds: [formState.form.id],
                   }
-                : { departmentId: data.id, isDeleteDepartmentOfEmployeeRole: true, roleIds: formState.form.id };
+                : { departmentId: data.id, isDeleteDepartmentOfEmployeeRole: true, roleId: formState.form.id };
         store.dispatch('role/updateDept', params);
         nextTick(() => {
             try {