feat: 建立系统管理模块之间的关联关系

src/api/role.ts

@@ -32,6 +32,12 @@ export const getRoleList = (data?: object) => {
   });
 };
 
+/** 获取系统管理-不分页查询角色管理列表 */
+export const getRoleListNoPage = () => {
+  // return http.request<ResultTable>("post", "/role", { data });
+  return http.request<ResultTable>("post", "/api/role/get-role-list");
+};
+
 // 系统管理-删除角色
 export const deleteRole = (id: string) => {
   return http.request<Result>("post", `/api/role/delete-role/${id}`);
@@ -44,3 +50,12 @@ export const addRole = (data?: object) => {
 export const updateRole = (data?: object) => {
   return http.request<Result>("post", "/api/role/modify-role", { data });
 };
+
+// 系统管理-根据用户id查询角色列表
+export const getRoleListByUserId = (id: string | number) => {
+  return http.request<Result>("post", `/api/role/get-role-by-user/${id}`);
+};
+// 系统管理 - 根据用户id绑定角色
+export const bindRoleByUserId = (data?: object) => {
+  return http.request<Result>("post", "/api/role/bind-role-by-user", { data });
+};

src/api/system.ts

@@ -3,6 +3,7 @@ import { http } from "@/utils/http";
 type Result = {
   success: boolean;
   data?: Array<any>;
+  code?: string;
 };
 
 type ResultTable = {
@@ -44,7 +45,7 @@ export const getRoleList = (data?: object) => {
 
 /** 获取系统管理-菜单管理列表 */
 export const getMenuList = (data?: object) => {
-  return http.request<Result>("post", "/api/menu/find-menu-list-by-page", {
+  return http.request<ResultTable>("post", "/api/menu/find-menu-list-by-page", {
     data
   });
 };
@@ -64,6 +65,16 @@ export const deleteMenu = (data?: { id: number }) => {
   return http.request<Result>("post", `/api/menu/delete-menu/${data.id}`);
 };
 
+// 根据角色ID获取菜单列表
+export const getMenuListByRoleId = (roleId: number) => {
+  return http.request<Result>("post", `/api/menu/get-menu-by-role/${roleId}`);
+};
+
+// 给角色绑定菜单
+export const bindMenuByRoleId = (data?: object) => {
+  return http.request<Result>("post", "/api/role/add-role-menu", { data });
+};
+
 /** 获取系统管理-部门管理列表 */
 export const getDeptList = (data?: object) => {
   return http.request<ResultTable>(

src/api/user.ts

@@ -104,12 +104,17 @@ export const updateUser = (data?: object) => {
   });
 };
 
-/** 系统管理-用户管理-删除用户 */
-export const deleteUser = (data?: object) => {
-  return http.request<UserInfoResult>("post", "/api/user/delete-user", {
+/** 系统管理-用户管理-给用户绑定上角色 */
+export const addUserRole = (data?: object) => {
+  return http.request<UserInfoResult>("post", "/api/user/add-user-role", {
     data
   });
 };
+
+/** 系统管理-用户管理-删除用户 */
+export const deleteUser = (id: number | string) => {
+  return http.request<UserInfoResult>("post", `/api/user/delete-user/${id}`);
+};
 /** 系统管理-用户管理-重置密码 */
 export const resetPassword = (data?: object) => {
   return http.request<UserInfoResult>("post", "/api/user/reset-password", {

src/views/systems/role/utils/hook.tsx

@@ -8,8 +8,12 @@ import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
-import { getKeyList, deviceDetection } from "@pureadmin/utils";
-import { getRoleMenu, getRoleMenuIds } from "@/api/system";
+import { deviceDetection } from "@pureadmin/utils";
+import {
+  getMenuListByRoleId,
+  getMenuList,
+  bindMenuByRoleId
+} from "@/api/system";
 import { getRoleList, addRole, updateRole, deleteRole } from "@/api/role";
 import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
 
@@ -36,7 +40,7 @@ export function useRole(treeRef: Ref) {
   const { switchStyle } = usePublicHooks();
   const treeProps = {
     value: "id",
-    label: "title",
+    label: "name",
     children: "children"
   };
   const pagination = reactive<PaginationProps>({
@@ -291,8 +295,9 @@ export function useRole(treeRef: Ref) {
     if (id) {
       curRow.value = row;
       isShow.value = true;
-      const { data } = await getRoleMenuIds({ id });
-      treeRef.value.setCheckedKeys(data);
+      const { data } = await getMenuListByRoleId(id);
+      treeRef.value.setCheckedKeys(data?.map(item => item.id) ?? []);
+      console.log("treeRef.value", treeRef.value, data);
     } else {
       curRow.value = null;
       isShow.value = false;
@@ -311,9 +316,16 @@ export function useRole(treeRef: Ref) {
   function handleSave() {
     const { id, name } = curRow.value;
     // 根据用户 id 调用实际项目中菜单权限修改接口
-    console.log(id, treeRef.value.getCheckedKeys());
-    message(`角色名称为${name}的菜单权限修改成功`, {
-      type: "success"
+    // 添加给角色绑定菜单接口
+    const params = {
+      roleId: id,
+      menuIds: treeRef.value.getCheckedKeys()
+    };
+    console.log("params", params);
+    bindMenuByRoleId(params).then(res => {
+      if (res.code === "0") {
+        message(`角色名称为${name}的菜单权限修改成功`, { type: "success" });
+      }
     });
   }
 
@@ -330,9 +342,9 @@ export function useRole(treeRef: Ref) {
 
   onMounted(async () => {
     onSearch();
-    const { data } = await getRoleMenu();
-    treeIds.value = getKeyList(data, "id");
-    treeData.value = handleTree(data);
+    const { data } = await getMenuList({ pageNum: 1, pageSize: 1000 });
+    // treeIds.value = getKeyList(data, "id");
+    treeData.value = handleTree(data.records);
   });
 
   watch(isExpandAll, val => {

src/views/systems/user/form/index.vue

@@ -70,7 +70,7 @@ defineExpose({ getRef });
         </el-form-item>
       </re-col>
 
-      <re-col
+      <!-- <re-col
         v-if="newFormInline.title === '新增'"
         :value="12"
         :xs="24"
@@ -83,7 +83,7 @@ defineExpose({ getRef });
             placeholder="请输入用户密码"
           />
         </el-form-item>
-      </re-col>
+      </re-col> -->
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="手机号" prop="mobile">
           <el-input
@@ -144,7 +144,7 @@ defineExpose({ getRef });
           </el-cascader>
         </el-form-item>
       </re-col>
-      <re-col
+      <!-- <re-col
         v-if="newFormInline.title === '新增'"
         :value="12"
         :xs="24"
@@ -161,7 +161,7 @@ defineExpose({ getRef });
             :style="switchStyle"
           />
         </el-form-item>
-      </re-col>
+      </re-col> -->
 
       <re-col>
         <el-form-item label="备注">

src/views/systems/user/index.vue

@@ -180,22 +180,23 @@ const {
               >
                 修改
               </el-button>
-              <el-popconfirm
+              <!-- <el-popconfirm
                 :title="`是否确认删除用户编号为${row.id}的这条数据`"
                 @confirm="handleDelete(row)"
               >
-                <template #reference>
-                  <el-button
-                    class="reset-margin"
-                    link
-                    type="primary"
-                    :size="size"
-                    :icon="useRenderIcon(Delete)"
-                  >
-                    删除
-                  </el-button>
-                </template>
-              </el-popconfirm>
+                <template #reference> -->
+              <el-button
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(Delete)"
+                @click="handleDelete(row)"
+              >
+                删除
+              </el-button>
+              <!-- </template>
+              </el-popconfirm> -->
               <el-dropdown>
                 <el-button
                   class="ml-3! mt-[2px]!"

src/views/systems/user/utils/hook.tsx

@@ -18,13 +18,13 @@ import {
   deviceDetection
 } from "@pureadmin/utils";
 import {
-  getRoleIds,
+  // getRoleIds,
   getDeptList,
   getUserList
   // getAllRoleList
 } from "@/api/system";
-import { addUser, updateUser } from "@/api/user";
-import { getRoleList } from "@/api/role";
+import { addUser, updateUser, deleteUser, addUserRole } from "@/api/user";
+import { getRoleListNoPage, getRoleListByUserId } from "@/api/role";
 import {
   ElForm,
   ElInput,
@@ -47,10 +47,10 @@ import {
 export function useUser(tableRef: Ref, treeRef: Ref) {
   const form = reactive({
     // 左侧部门树的id
-    // deptId: "",
-    // username: "",
-    // mobile: "",
-    // status: "",
+    deptId: null,
+    username: null,
+    mobile: null,
+    status: null,
     pageNum: 1,
     pageSize: 10
   });
@@ -237,8 +237,33 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
   }
 
   function handleDelete(row) {
-    message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" });
-    onSearch();
+    // 添加删除功能
+    ElMessageBox.confirm(
+      `确认要删除<strong style='color:var(--el-color-primary)'>${
+        row.username
+      }</strong>用户吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(() => {
+        deleteUser(row.id).then(res => {
+          if (res.code === "0") {
+            onSearch();
+            message(`您删除了用户编号为${row.id}的这条数据`, {
+              type: "success"
+            });
+          } else {
+            message("删除失败", { type: "error" });
+          }
+        });
+      })
+      .catch(() => {});
   }
 
   function handleSizeChange(val: number) {
@@ -301,26 +326,29 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     onSearch();
   }
 
-  // function formatHigherDeptOptions(treeList) {
-  //   // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
-  //   if (!treeList || !treeList.length) return;
-  //   const newTreeList = [];
-  //   for (let i = 0; i < treeList.length; i++) {
-  //     treeList[i].disabled = treeList[i].status === 0 ? true : false;
-  //     formatHigherDeptOptions(treeList[i].children);
-  //     newTreeList.push(treeList[i]);
-  //   }
-  //   return newTreeList;
-  // }
+  function formatHigherDeptOptions(treeList) {
+    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+    if (!treeList || !treeList.length) return;
+    const newTreeList = [];
+    for (let i = 0; i < treeList.length; i++) {
+      treeList[i].disabled = treeList[i].status === 0 ? true : false;
+      formatHigherDeptOptions(treeList[i].children);
+      newTreeList.push(treeList[i]);
+    }
+    return newTreeList;
+  }
 
   function openDialog(title = "新增", row?: FormItemProps) {
+    const depts = formatHigherDeptOptions(higherDeptOptions.value); // 处理上级部门数据,获取选择的部门层级数组
     addDialog({
       title: `${title}用户`,
       props: {
         formInline: {
           title,
-          // higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
-          deptId: row?.deptId ?? 0,
+          higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
+          // deptId: row?.deptId ?? 0,
+          deptId: (row?.deptId || depts[depts.length - 1].id) ?? 0,
+          dependencies: row?.deptId ?? 0,
           nickname: row?.nickname ?? "",
           username: row?.username ?? "",
           password: row?.password ?? "",
@@ -362,25 +390,35 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
               mobile,
               name,
               nickname,
-              username
+              username,
+              higherDeptOptions
             } = curData;
-            const params = {
-              avatar,
+            console.log("higherDeptOptions", higherDeptOptions);
+            const params: {
+              avatar: string;
+              deptId: number;
+              email: string;
+              gender: string | number;
+              mobile: string | number;
+              name: string;
+              nickname: string;
+              username: string;
+              id?: number; // Add optional id property
+            } = {
+              avatar: avatar,
               deptId,
               email,
               gender,
               mobile,
-              name,
+              name: name || username,
               nickname,
-              username,
-              id: title === "新增" ? null : curData.id
+              username
             };
             if (title === "新增") {
               // 实际开发先调用新增接口，再进行下面操作
               // 新增用户
-
               addUser(params).then(res => {
-                if (res.code === 200) {
+                if (res.code === "0") {
                   message("新增用户成功", { type: "success" });
                   chores();
                 } else {
@@ -409,7 +447,6 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       }
     });
   }
-
   const cropRef = ref();
   /** 上传头像 */
   function handleUpload(row) {
@@ -517,7 +554,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
   /** 分配角色 */
   async function handleRole(row) {
     // TODO 选中的角色列表
-    const ids = (await getRoleIds({ id: row.id })).data ?? [];
+    const ids = (await getRoleListByUserId(row.id)).data?.map(i => i.id) ?? [];
     addDialog({
       title: `分配 ${row.username} 用户的角色`,
       props: {
@@ -538,6 +575,19 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
         const curData = options.props.formInline as RoleFormItemProps;
         console.log("curIds", curData.ids);
         // 根据实际业务使用curData.ids和row里的某些字段去调用修改角色接口即可
+        // 调用用户绑定角色接口
+        addUserRole({
+          userId: row.id,
+          roleIds: curData.ids
+        }).then(res => {
+          if (res.code === "0") {
+            message("分配角色成功", { type: "success" });
+            done(); // 关闭弹框
+            onSearch(); // 刷新表格数据
+          } else {
+            message("分配角色失败", { type: "error" });
+          }
+        });
         done(); // 关闭弹框
       }
     });
@@ -554,9 +604,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     treeLoading.value = false;
 
     // 角色列表
-    roleOptions.value = (
-      await getRoleList({ pageNum: 1, pageSize: 100 })
-    ).data.records;
+    roleOptions.value = (await getRoleListNoPage()).data ?? [];
   });
 
   return {