feat(role): 角色管理功能优化

- 新增批量给用户添加角色功能
- 新增删除用户角色功能
- 优化用户选择界面，支持多选和反选
- 调整医生和角色列表的样式

src/api/doctorApi/index.ts

@@ -70,6 +70,15 @@ const getRankList = (data: { rankName: string }) => {
   return request('/bi-manager/user/getRankList', 'POST', data);
 };
 
+/**
+ * 职称列表
+ * @param {deptName: string}
+ * @returns
+ */
+const delUserRole = (data: { roleId: string; userId: string }) => {
+  return request('/bi-manager/user/delUserRole', 'POST', data);
+};
+
 export default {
   addUser,
   delUser,
@@ -77,5 +86,6 @@ export default {
   getUserList,
   resetPd,
   getDeptList,
-  getRankList
+  getRankList,
+  delUserRole
 };

src/api/roleApi/index.ts

@@ -42,10 +42,19 @@ const getRoleList = (data) =>
 const getUserListById = (data: { id: string }) =>
   request<any>('/bi-manager/role/getUserListById', 'post', data);
 
+/**
+ * 角色管理-批量给用户加角色
+ * @param id:string
+ * @returns
+ */
+const editUserByRole = (data: { roleId: string; userIds: Array<string> }) =>
+  request<any>('/bi-manager/user/editUserByRole', 'post', data);
+
 export default {
   addRole,
   delRoleById,
   editRoleById,
   getRoleList,
-  getUserListById
+  getUserListById,
+  editUserByRole
 };

src/views/doctor/components/AddDoctor.vue

@@ -95,6 +95,7 @@
   // 获取医生列表
   onMounted(() => {
     fetchRoleList();
+    fetchDeptList();
   });
   const roleList = ref([]);
   const fetchRoleList = async () => {
@@ -124,8 +125,13 @@
       type: 'input',
       required: true
     },
-    { label: '科室名称', prop: 'deptName', type: 'input', required: true },
-    { label: '科室编码', prop: 'deptCode', type: 'input', required: true },
+    {
+      label: '科室名称',
+      prop: 'deptCode',
+      type: 'select',
+      required: true,
+      options: deptList.value
+    },
     {
       label: '用户密码',
       vIf: useType.value === 'add',
@@ -191,6 +197,9 @@
           add: doctorApi.addUser,
           edit: doctorApi.editUser
         };
+        form.deptName = deptList.value.find(
+          (item) => item.value === form.deptCode
+        )?.label;
         const [, ret] = await tryit(apiObj[useType.value!])(form);
         if (ret?.code === 200) {
           EleMessage.success(useType.value === 'add' ? '添加成功' : '修改成功');
@@ -212,4 +221,16 @@
   const handleCancel = () => {
     modalVisible.value = false;
   };
+
+  // 获取科室列表
+  const deptList = ref();
+  const fetchDeptList = async () => {
+    const [, ret] = await tryit(doctorApi.getDeptList)({ deptName: '' });
+    deptList.value = ret.data.map((item) => {
+      return {
+        label: item.deptName,
+        value: item.deptCode
+      };
+    });
+  };
 </script>

src/views/doctor/index.vue

@@ -52,8 +52,8 @@
             type="primary"
             v-for="item in row.jurisdictionName"
             :key="item"
-            >{{ item }}</el-tag
-          >
+            >{{ item }}
+          </el-tag>
         </template>
 
         <!-- 角色列表 -->
@@ -63,8 +63,8 @@
             type="primary"
             v-for="item in row.roleNames"
             :key="item"
-            >{{ item }}</el-tag
-          >
+            >{{ item }}
+          </el-tag>
         </template>
 
         <template #pager>
@@ -186,7 +186,7 @@
   onMounted(() => {
     fetchDoctorList();
     fetchDeptList();
-    fetchRankList();
+    // fetchRankList();
   });
 
   const gridOptions = reactive<VxeGridProps>({
@@ -276,7 +276,7 @@
       label: '医生编码',
       type: 'input',
       col: {
-        span: 4
+        span: 5
       }
     },
     {
@@ -284,7 +284,7 @@
       label: '医生名称',
       type: 'input',
       col: {
-        span: 4
+        span: 5
       }
     },
     {
@@ -292,19 +292,20 @@
       label: '科室',
       type: 'select',
       col: {
-        span: 4
+        span: 5
       },
+      clearable: true,
       options: deptList.value || []
-    },
-    {
-      prop: 'technicalTitleCode',
-      label: '职称',
-      type: 'select',
-      col: {
-        span: 4
-      },
-      options: rankList.value || []
     }
+    // {
+    //   prop: 'technicalTitleCode',
+    //   label: '职称',
+    //   type: 'select',
+    //   col: {
+    //     span: 4
+    //   },
+    //   options: rankList.value || []
+    // }
   ]);
 
   // 获取科室列表

src/views/role/components/AddUserModal.vue

@@ -8,13 +8,16 @@
   import doctorApi from '@/api/doctorApi';
   // coms
   import { FcSearch } from '@fancy-design/coms';
+  import roleApi from '@/api/roleApi';
 
   const modalVisible = ref(false);
-  const handleOpen = () => {
+  const curRole = ref();
+  const handleOpen = (roleInfo) => {
     modalVisible.value = true;
     fetchDoctorList();
-    fetchRankList();
+    // fetchRankList();
     fetchDeptList();
+    curRole.value = roleInfo;
   };
   defineExpose({
     open: handleOpen
@@ -29,6 +32,7 @@
       keyField: 'id',
       isHover: true
     },
+
     columnConfig: {
       resizable: true
     },
@@ -40,7 +44,10 @@
       remote: true
     },
     checkboxConfig: {
-      trigger: 'row'
+      trigger: 'row',
+      checkMethod: ({ row }) => {
+        return !row.roleIds.includes(curRole.value.roleId);
+      }
     },
     columns: [
       {
@@ -85,14 +92,35 @@
   // 点击取消
   const handleCancel = () => {
     modalVisible.value = false;
+    resetFields();
+    GridRef.value?.clearCheckboxRow();
+    pageLoading.value = false;
   };
 
   // 点击确认
-  const handleConfirm = () => {
-    if (selectUserList.value.length === 0) {
-      return ElMessage.warning('请选择医生');
-    }
-    console.log(selectUserList.value, 'sss');
+  const emits = defineEmits('reload');
+  const handleConfirm = async () => {
+    ElMessageBox.confirm('确定要保存吗?', {
+      type: 'warning',
+      title: '提示'
+    }).then(async () => {
+      if (selectUserList.value.length === 0) {
+        return ElMessage.warning('请选择医生');
+      }
+
+      const params: { roleId: string; userIds: Array<string> } = {
+        userIds: selectUserList.value.map((item) => item.userId),
+        roleId: curRole.value.roleId
+      };
+      const [error] = await tryit(roleApi.editUserByRole)(params);
+      if (error) {
+        return ElMessage.error(error);
+      }
+      ElMessage.success('保存成功');
+      emits('reload');
+      handleCancel();
+      // console.log(selectUserList.value, 'sss');
+    });
   };
 
   // 获取医生列表
@@ -250,8 +278,8 @@
                 type="primary"
                 v-for="item in row.jurisdictionName"
                 :key="item"
-                >{{ item }}</el-tag
-              >
+                >{{ item }}
+              </el-tag>
             </template>
 
             <!-- 角色列表 -->
@@ -261,8 +289,8 @@
                 type="primary"
                 v-for="item in row.roleNames"
                 :key="item"
-                >{{ item }}</el-tag
-              >
+                >{{ item }}
+              </el-tag>
             </template>
 
             <template #pager>

src/views/role/index.vue

@@ -51,8 +51,8 @@
               type="primary"
               v-for="item in row.jurisdictionName"
               :key="item"
-              >{{ item }}</el-tag
-            >
+              >{{ item }}
+            </el-tag>
           </template>
 
           <!-- 角色列表 -->
@@ -62,8 +62,8 @@
               type="primary"
               v-for="item in row.roleNames"
               :key="item"
-              >{{ item }}</el-tag
-            >
+              >{{ item }}
+            </el-tag>
           </template>
 
           <!-- 状态 -->
@@ -79,10 +79,10 @@
           <!-- 操作 -->
           <template #option_slot="{ row }">
             <el-link type="primary" @click="AddUserRef?.open('edit', row)"
-              >编辑</el-link
-            >
+              >编辑
+            </el-link>
             <el-divider direction="vertical" />
-            <el-link type="danger">删除</el-link>
+            <el-link type="danger" @click="handleDel(row)">删除</el-link>
           </template>
 
           <template #menuName_slot="{ row }">
@@ -114,7 +114,7 @@
       </div>
     </div>
     <AddRole ref="AddRoleRef" @reload="fetchRoleList" />
-    <AddUser ref="AddUserRef" :curRole @reload="fetchRoleList" />"
+    <AddUser ref="AddUserRef" :curRole @reload="fetchRoleList" />
     <AddUserModal ref="AddUserModalRef" @reload="fetchRoleList" />
   </ele-loading>
 </template>
@@ -139,7 +139,7 @@
   const AddUserModalRef = ref<InstanceType<typeof AddUserModal>>();
   const handleAddUser = () => {
     if (!curRole) return ElMessage.warning('请选择角色');
-    AddUserModalRef.value?.open();
+    AddUserModalRef.value?.open(curRole.value);
   };
 
   // 获取角色列表
@@ -210,8 +210,8 @@
       return;
     }
     if (ret.code === 200) {
-      rgridOptions.data = ret.data.list;
-      userParams.total = ret.data.total;
+      rgridOptions.data = ret.data ? ret.data.list : [];
+      userParams.total = ret.data ? ret.data.total : 0;
     }
     pageLoading.value = false;
   };
@@ -279,6 +279,26 @@
     }
   });
 
+  // 点击删除
+  const handleDel = (row) => {
+    ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', {
+      title: '提示',
+      type: 'error'
+    }).then(async () => {
+      pageLoading.value = true;
+      const params = {
+        roleId: curRole.value.roleId,
+        userId: row.userId
+      };
+      const [, ret] = await tryit(doctorApi.delUserRole)(params);
+      if (ret?.code === 200) {
+        pageLoading.value = false;
+        ElMessage.success('删除成功');
+        fetchUserByRole();
+      }
+    });
+  };
+
   const rgridOptions = reactive<VxeGridProps>({
     round: true,
     border: 'inner',
@@ -356,7 +376,7 @@
         field: '操作',
         fixed: 'right',
         title: '操作',
-        width: 200,
+        width: 100,
         slots: { default: 'option_slot' }
       }
     ],