feat: 对接系统管理-角色管理模块

src/api/role.ts

@@ -31,8 +31,8 @@ export const getRoleList = (data?: object) => {
 };
 
 // 系统管理-删除角色
-export const deleteRole = (data?: { id: string }) => {
-  return http.request<Result>("post", "/api/role/delete-role", { data });
+export const deleteRole = (id: string) => {
+  return http.request<Result>("post", `/api/role/delete-role/${id}`);
 };
 // 系统管理-添加角色
 export const addRole = (data?: object) => {
@@ -40,5 +40,5 @@ export const addRole = (data?: object) => {
 };
 // 系统管理-修改角色
 export const updateRole = (data?: object) => {
-  return http.request<Result>("post", "/api/role/update-role", { data });
+  return http.request<Result>("post", "/api/role/modify-role", { data });
 };

src/views/login/index.vue

@@ -66,7 +66,7 @@ const { locale, translationCh, translationEn } = useTranslationLang();
 
 const ruleForm = reactive({
   username: "zhangxiaoming",
-  password: "string",
+  password: "123456",
   verifyCode: ""
 });
 

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

@@ -10,7 +10,7 @@ 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 { getRoleList, addRole, updateRole } from "@/api/role";
+import { getRoleList, addRole, updateRole, deleteRole } from "@/api/role";
 import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
 
 export function useRole(treeRef: Ref) {
@@ -105,7 +105,7 @@ export function useRole(treeRef: Ref) {
   //   ];
   // });
 
-  function onChange({ row, index }) {
+  function onChange({ row }) {
     ElMessageBox.confirm(
       `确认要<strong>${
         row.status === 0 ? "停用" : "启用"
@@ -122,25 +122,42 @@ export function useRole(treeRef: Ref) {
       }
     )
       .then(() => {
-        switchLoadMap.value[index] = Object.assign(
-          {},
-          switchLoadMap.value[index],
-          {
-            loading: true
+        // 调用修改接口,修改角色状态
+        const params = {
+          id: row.id,
+          status: row.status
+        };
+        // 实际开发先调用修改接口，再进行下面操作
+        updateRole(params).then(res => {
+          if (res.code === "0") {
+            message(
+              `角色名称为${row.name}的${row.status === 0 ? "停用" : "启用"}成功`,
+              {
+                type: "success"
+              }
+            );
           }
-        );
-        setTimeout(() => {
-          switchLoadMap.value[index] = Object.assign(
-            {},
-            switchLoadMap.value[index],
-            {
-              loading: false
-            }
-          );
-          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
-            type: "success"
-          });
-        }, 300);
+        });
+
+        // switchLoadMap.value[index] = Object.assign(
+        //   {},
+        //   switchLoadMap.value[index],
+        //   {
+        //     loading: true
+        //   }
+        // );
+        // setTimeout(() => {
+        //   switchLoadMap.value[index] = Object.assign(
+        //     {},
+        //     switchLoadMap.value[index],
+        //     {
+        //       loading: false
+        //     }
+        //   );
+        //   message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
+        //     type: "success"
+        //   });
+        // }, 300);
       })
       .catch(() => {
         row.status === 0 ? (row.status = 1) : (row.status = 0);
@@ -148,7 +165,29 @@ export function useRole(treeRef: Ref) {
   }
 
   function handleDelete(row) {
-    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+    // 删除角色
+    ElMessageBox.confirm(
+      `确认要删除角色名称为<strong style='color:var(--el-color-primary)'>${
+        row.name
+      }</strong>吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(() => {
+        deleteRole(row.id).then(res => {
+          if (res.code === "0") {
+            message(`角色名称为${row.name}的删除成功`, { type: "success" });
+            onSearch();
+          }
+        });
+      })
+      .catch(() => {});
     onSearch();
   }
 
@@ -228,11 +267,13 @@ export function useRole(treeRef: Ref) {
             } else {
               // 实际开发先调用修改接口，再进行下面操作
               // chores();
+              // 把id加到参数里
+              curData.id = row.id;
               updateRole(curData).then(res => {
                 if (res.code === "0") {
-                  message(`角色名称为${curData.name}的新增成功`, {
-                    type: "success"
-                  });
+                  // message(`角色名称为${curData.name}的新增成功`, {
+                  //   type: "success"
+                  // });
                   // 实际开发先调用新增接口，再进行下面操作
                   chores();
                 }

src/views/systems/role/utils/types.ts

@@ -7,6 +7,7 @@ interface FormItemProps {
   code: string;
   /** 备注 */
   remark: string;
+  id?: string;
 }
 interface FormProps {
   formInline: FormItemProps;