feat: 完成pure角色页面对接

Yi.Pure.Vue3/src/api/system.ts

@@ -1,50 +1,6 @@
 import { http } from "@/utils/http";
 import type { Result, ResultList, ResultPage } from "./result.ts";
 
-/** 获取系统管理-用户管理列表 */
-export const getUserList = (data?: object) => {
-  return http.request<ResultPage>("get", "/user", { params: data });
-};
-
-/** 获取一个用户详细消息 */
-export const getUser = (userId: string) => {
-  return http.request<Result>("get", `/user/${userId}`, {});
-};
-
-/** 删除用户 */
-export const delUser = (userIds: string[]) => {
-  return http.request<Result>("delete", `/user`, {
-    params: { id: userIds }
-  });
-};
-
-/** 用户密码重置 */
-export const resetUserPwd = (id: string, password: string) => {
-  return http.request<Result>("put", `/account/rest-password/${id}`, {
-    data: { password }
-  });
-};
-
-/** 改变用户状态 */
-export const changeUserStatus = (userId: string, state: boolean) => {
-  return http.request<Result>("put", `/user/${userId}/${state}`, {});
-};
-
-/** 修改用户 */
-export const updateUser = (id: string, data: any) => {
-  return http.request<Result>("put", `/user/${id}`, { data });
-};
-
-/** 获取角色选择框列表 */
-export const getRoleOption = () => {
-  return http.request<ResultPage>("get", `/role`, {});
-};
-
-/** 新增角色 */
-export const addUser = (data: any) => {
-  return http.request<Result>("post", `/user`, { data });
-};
-
 /** 新增角色 */
 export const addRole = (data: any) => {
   return http.request<Result>("post", `/role`, { data });
@@ -60,11 +16,6 @@ export const getMenuList = (data?: object) => {
   return http.request<Result>("post", "/menu", { data });
 };
 
-/** 获取系统管理-部门管理列表 */
-export const getDeptList = (data?: object) => {
-  return http.request<ResultPage>("get", "/dept", { data });
-};
-
 /** 获取系统监控-在线用户列表 */
 export const getOnlineLogsList = (data?: object) => {
   return http.request<ResultPage>("post", "/online-logs", { data });

Yi.Pure.Vue3/src/api/system/dept.ts

@@ -0,0 +1,7 @@
+import {http} from "@/utils/http";
+import type {ResultPage} from "@/api/result";
+
+/** 获取系统管理-部门管理列表 */
+export const getDeptList = (data?: object) => {
+  return http.request<ResultPage>("get", "/dept", { data });
+};

Yi.Pure.Vue3/src/api/system/menu.ts

@@ -0,0 +1,7 @@
+import {http} from "@/utils/http";
+import type {ResultPage} from "@/api/result";
+
+/** 查询菜单下拉树结构 */
+export const getMenuOption = () => {
+  return http.request<ResultPage>("get", `/menu`, {});
+};

Yi.Pure.Vue3/src/api/system/role.ts

@@ -0,0 +1,47 @@
+import { http } from "@/utils/http";
+import type { Result, ResultList, ResultPage } from "@/api/result";
+
+/** 获取角色选择框列表 */
+export const getRoleOption = () => {
+  return http.request<ResultPage>("get", `/role`, {});
+};
+
+/** 查询角色列表 */
+export const listRole = query => {
+  return http.request<ResultPage>("get", `/role`, { params: query });
+};
+
+/** 查询角色详细 */
+export const getRole = roleId => {
+  return http.request<Result>("get", `/role/${roleId}`, {});
+};
+
+/** 新增角色 */
+export const addRole = data => {
+  return http.request<Result>("post", `/role`, { data });
+};
+
+/** 修改角色 */
+export const updateRole = (roleId, data) => {
+  return http.request<Result>("put", `/role/${roleId}`, { data });
+};
+
+/** 修改角色 */
+export const changeRoleStatus = (roleId, state) => {
+  return http.request<Result>("put", `/role/${roleId}/${state}`, {});
+};
+
+/** 删除角色 */
+export const delRole = roleIds => {
+  return http.request<Result>("delete", `/role`, { params: { id: roleIds } });
+};
+
+/** 修改角色数据权限 */
+export const updataDataScope = data => {
+  return http.request<Result>("put", `/role/data-scpoce`, { data });
+};
+
+/** 根据角色ID查询菜单下拉树结构 */
+export const getRoleMenuSelect = roleId => {
+  return http.request<ResultList>("get", `/menu/role-id/${roleId}`, {});
+};

Yi.Pure.Vue3/src/api/system/user.ts

@@ -0,0 +1,41 @@
+import { http } from "@/utils/http";
+import type { Result, ResultList, ResultPage } from "@/api/result";
+
+/** 获取系统管理-用户管理列表 */
+export const getUserList = (data?: object) => {
+  return http.request<ResultPage>("get", "/user", { params: data });
+};
+
+/** 获取一个用户详细消息 */
+export const getUser = (userId: string) => {
+  return http.request<Result>("get", `/user/${userId}`, {});
+};
+
+/** 删除用户 */
+export const delUser = (userIds: string[]) => {
+  return http.request<Result>("delete", `/user`, {
+    params: { id: userIds }
+  });
+};
+
+/** 用户密码重置 */
+export const resetUserPwd = (id: string, password: string) => {
+  return http.request<Result>("put", `/account/rest-password/${id}`, {
+    data: { password }
+  });
+};
+
+/** 改变用户状态 */
+export const changeUserStatus = (userId: string, state: boolean) => {
+  return http.request<Result>("put", `/user/${userId}/${state}`, {});
+};
+
+/** 修改用户 */
+export const updateUser = (id: string, data: any) => {
+  return http.request<Result>("put", `/user/${id}`, { data });
+};
+
+/** 新增用户 */
+export const addUser = (data: any) => {
+  return http.request<Result>("post", `/user`, { data });
+};

Yi.Pure.Vue3/src/views/system/role/form.vue

@@ -5,9 +5,13 @@ import { FormProps } from "./utils/types";
 
 const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
-    name: "",
-    code: "",
-    remark: ""
+    roleName: "",
+    roleCode: "",
+    remark: "",
+    deptIds: [],
+    menuIds: [],
+    orderNum: 0,
+    dataScope: "ALL"
   })
 });
 
@@ -30,7 +34,7 @@ defineExpose({ getRef });
   >
     <el-form-item label="角色名称" prop="name">
       <el-input
-        v-model="newFormInline.name"
+        v-model="newFormInline.roleName"
         clearable
         placeholder="请输入角色名称"
       />
@@ -38,7 +42,7 @@ defineExpose({ getRef });
 
     <el-form-item label="角色标识" prop="code">
       <el-input
-        v-model="newFormInline.code"
+        v-model="newFormInline.roleCode"
         clearable
         placeholder="请输入角色标识"
       />

Yi.Pure.Vue3/src/views/system/role/index.vue

@@ -100,7 +100,7 @@ onMounted(() => {
     >
       <el-form-item label="角色名称：" prop="name">
         <el-input
-          v-model="form.name"
+          v-model="form.roleName"
           placeholder="请输入角色名称"
           clearable
           class="!w-[180px]"
@@ -108,7 +108,7 @@ onMounted(() => {
       </el-form-item>
       <el-form-item label="角色标识：" prop="code">
         <el-input
-          v-model="form.code"
+          v-model="form.roleCode"
           placeholder="请输入角色标识"
           clearable
           class="!w-[180px]"
@@ -116,13 +116,13 @@ onMounted(() => {
       </el-form-item>
       <el-form-item label="状态：" prop="status">
         <el-select
-          v-model="form.status"
+          v-model="form.state"
           placeholder="请选择状态"
           clearable
           class="!w-[180px]"
         >
-          <el-option label="已启用" value="1" />
-          <el-option label="已停用" value="0" />
+          <el-option label="已启用" :value="true" />
+          <el-option label="已停用" :value="false" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -147,7 +147,7 @@ onMounted(() => {
       <PureTableBar
         :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
         style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
-        title="角色管理（仅演示，操作后不生效）"
+        title="角色管理"
         :columns="columns"
         @refresh="onSearch"
       >
@@ -194,7 +194,7 @@ onMounted(() => {
                 修改
               </el-button>
               <el-popconfirm
-                :title="`是否确认删除角色名称为${row.name}的这条数据`"
+                :title="`是否确认删除角色名称为${row.roleName}的这条数据`"
                 @confirm="handleDelete(row)"
               >
                 <template #reference>

Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx

@@ -9,14 +9,27 @@ import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
 import { getKeyList, deviceDetection } from "@pureadmin/utils";
-import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
-import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
+import {
+  listRole,
+  getRole,
+  addRole,
+  updateRole,
+  changeRoleStatus,
+  delRole,
+  getRoleMenuSelect,
+  updataDataScope
+} from "@/api/system/role";
+import { getMenuOption } from "@/api/system/menu";
+
+import {type Ref, reactive, ref, onMounted, h, toRaw, watch, nextTick} from "vue";
 
 export function useRole(treeRef: Ref) {
   const form = reactive({
-    name: "",
-    code: "",
-    status: ""
+    roleName: "",
+    roleCode: "",
+    state: true,
+    skipCount: 1,
+    maxResultCount: 10
   });
   const curRow = ref();
   const formRef = ref();
@@ -31,9 +44,10 @@ export function useRole(treeRef: Ref) {
   const isExpandAll = ref(false);
   const isSelectAll = ref(false);
   const { switchStyle } = usePublicHooks();
+  let currentRoleData: any = {};
   const treeProps = {
     value: "id",
-    label: "title",
+    label: "menuName",
     children: "children"
   };
   const pagination = reactive<PaginationProps>({
@@ -49,11 +63,11 @@ export function useRole(treeRef: Ref) {
     },
     {
       label: "角色名称",
-      prop: "name"
+      prop: "roleName"
     },
     {
       label: "角色标识",
-      prop: "code"
+      prop: "roleCode"
     },
     {
       label: "状态",
@@ -61,9 +75,9 @@ export function useRole(treeRef: Ref) {
         <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
           loading={switchLoadMap.value[scope.index]?.loading}
-          v-model={scope.row.status}
-          active-value={1}
-          inactive-value={0}
+          v-model={scope.row.state}
+          active-value={true}
+          inactive-value={false}
           active-text="已启用"
           inactive-text="已停用"
           inline-prompt
@@ -80,10 +94,10 @@ export function useRole(treeRef: Ref) {
     },
     {
       label: "创建时间",
-      prop: "createTime",
+      prop: "creationTime",
       minWidth: 160,
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+      formatter: ({ creationTime }) =>
+        dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "操作",
@@ -92,22 +106,13 @@ export function useRole(treeRef: Ref) {
       slot: "operation"
     }
   ];
-  // const buttonClass = computed(() => {
-  //   return [
-  //     "!h-[20px]",
-  //     "reset-margin",
-  //     "!text-gray-500",
-  //     "dark:!text-white",
-  //     "dark:hover:!text-primary"
-  //   ];
-  // });
 
-  function onChange({ row, index }) {
+  async function onChange({ row, index }) {
     ElMessageBox.confirm(
       `确认要<strong>${
-        row.status === 0 ? "停用" : "启用"
+        row.state === false ? "停用" : "启用"
       }</strong><strong style='color:var(--el-color-primary)'>${
-        row.name
+        row.roleName
       }</strong>吗?`,
       "系统提示",
       {
@@ -118,7 +123,7 @@ export function useRole(treeRef: Ref) {
         draggable: true
       }
     )
-      .then(() => {
+      .then(async () => {
         switchLoadMap.value[index] = Object.assign(
           {},
           switchLoadMap.value[index],
@@ -126,7 +131,9 @@ export function useRole(treeRef: Ref) {
             loading: true
           }
         );
-        setTimeout(() => {
+
+        await changeRoleStatus(row.id, row.state);
+
         switchLoadMap.value[index] = Object.assign(
           {},
           switchLoadMap.value[index],
@@ -134,27 +141,29 @@ export function useRole(treeRef: Ref) {
             loading: false
           }
         );
-          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
+        message(`已${row.state === false ? "停用" : "启用"}${row.roleName}`, {
           type: "success"
         });
-        }, 300);
       })
       .catch(() => {
-        row.status === 0 ? (row.status = 1) : (row.status = 0);
+        row.state === false ? (row.state = true) : (row.state = false);
       });
   }
 
-  function handleDelete(row) {
-    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+  async function handleDelete(row) {
+    await delRole([row.id]);
+    message(`您删除了角色名称为${row.roleName}的这条数据`, { type: "success" });
     onSearch();
   }
 
   function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
+    form.maxResultCount = val;
+    onSearch();
   }
 
   function handleCurrentChange(val: number) {
-    console.log(`current page: ${val}`);
+    form.skipCount = val;
+    onSearch();
   }
 
   function handleSelectionChange(val) {
@@ -163,31 +172,34 @@ export function useRole(treeRef: Ref) {
 
   async function onSearch() {
     loading.value = true;
-    const { data } = await getRoleList(toRaw(form));
-    dataList.value = data.list;
-    pagination.total = data.total;
-    pagination.pageSize = data.pageSize;
-    pagination.currentPage = data.currentPage;
-
-    setTimeout(() => {
+    const { data } = await listRole(toRaw(form));
+    dataList.value = data.items;
+    pagination.total = data.totalCount;
     loading.value = false;
-    }, 500);
   }
-
   const resetForm = formEl => {
     if (!formEl) return;
     formEl.resetFields();
     onSearch();
   };
 
-  function openDialog(title = "新增", row?: FormItemProps) {
+  async function openDialog(title = "新增", row?: FormItemProps) {
+    let data: any = null;
+    if (title == "修改") {
+      const response = await getRole(row?.id);
+      data = response.data;
+    }
     addDialog({
       title: `${title}角色`,
       props: {
         formInline: {
-          name: row?.name ?? "",
-          code: row?.code ?? "",
-          remark: row?.remark ?? ""
+          roleName: row?.roleName ?? "",
+          roleCode: row?.roleCode ?? "",
+          remark: row?.remark ?? "",
+          deptIds: data?.deptIds ?? [],
+          menuIds: data?.menuIds ?? [],
+          orderNum: data?.orderNum ?? 0,
+          dataScope: data?.dataScope ?? "ALL"
         }
       },
       width: "40%",
@@ -200,21 +212,22 @@ export function useRole(treeRef: Ref) {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;
         function chores() {
-          message(`您${title}了角色名称为${curData.name}的这条数据`, {
+          message(`您${title}了角色名称为${curData.roleName}的这条数据`, {
             type: "success"
           });
           done(); // 关闭弹框
           onSearch(); // 刷新表格数据
         }
-        FormRef.validate(valid => {
+        FormRef.validate(async valid => {
           if (valid) {
-            console.log("curData", curData);
             // 表单规则校验通过
             if (title === "新增") {
               // 实际开发先调用新增接口，再进行下面操作
+              await addRole(curData);
               chores();
             } else {
               // 实际开发先调用修改接口，再进行下面操作
+              await updateRole(row?.id, curData);
               chores();
             }
           }
@@ -227,10 +240,13 @@ export function useRole(treeRef: Ref) {
   async function handleMenu(row?: any) {
     const { id } = row;
     if (id) {
-      curRow.value = row;
+      curRow.value = (await getRole(id)).data;
+      curRow.value.menuIds = (await getRoleMenuSelect(id)).data.map(m => m.id);
       isShow.value = true;
-      const { data } = await getRoleMenuIds({ id });
-      treeRef.value.setCheckedKeys(data);
+      nextTick(async () => {
+        treeRef.value.setCheckedKeys(curRow.value.menuIds);
+      });
+
     } else {
       curRow.value = null;
       isShow.value = false;
@@ -246,11 +262,13 @@ export function useRole(treeRef: Ref) {
   }
 
   /** 菜单权限-保存 */
-  function handleSave() {
-    const { id, name } = curRow.value;
+  async function handleSave() {
+    const { id, roleName } = curRow.value;
+    curRow.value.menuIds = treeRef.value.getCheckedKeys();
     // 根据用户 id 调用实际项目中菜单权限修改接口
-    console.log(id, treeRef.value.getCheckedKeys());
-    message(`角色名称为${name}的菜单权限修改成功`, {
+    await updateRole(id, curRow.value);
+
+    message(`角色名称为${roleName}的菜单权限修改成功`, {
       type: "success"
     });
   }
@@ -268,7 +286,7 @@ export function useRole(treeRef: Ref) {
 
   onMounted(async () => {
     onSearch();
-    const { data } = await getRoleMenu();
+    const data = (await getMenuOption()).data.items;
     treeIds.value = getKeyList(data, "id");
     treeData.value = handleTree(data);
   });
@@ -300,7 +318,6 @@ export function useRole(treeRef: Ref) {
     isExpandAll,
     isSelectAll,
     treeSearchValue,
-    // buttonClass,
     onSearch,
     resetForm,
     openDialog,

Yi.Pure.Vue3/src/views/system/role/utils/rule.ts

@@ -3,6 +3,6 @@ import type { FormRules } from "element-plus";
 
 /** 自定义表单规则校验 */
 export const formRules = reactive(<FormRules>{
-  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
-  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
+  roleName: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
+  roleCode: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
 });

Yi.Pure.Vue3/src/views/system/role/utils/types.ts

@@ -1,10 +1,11 @@
 // 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
 
 interface FormItemProps {
+  id?: string;
   /** 角色名称 */
-  name: string;
+  roleName: string;
   /** 角色编号 */
-  code: string;
+  roleCode: string;
   /** 备注 */
   remark: string;
 }

Yi.Pure.Vue3/src/views/system/user/form/index.vue

@@ -25,11 +25,11 @@ const props = withDefaults(defineProps<FormProps>(), {
 
 const sexOptions = [
   {
-    value: 0,
+    value: "Male",
     label: "男"
   },
   {
-    value: 1,
+    value: "Woman",
     label: "女"
   }
 ];

Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx

@@ -17,16 +17,16 @@ import {
   deviceDetection
 } from "@pureadmin/utils";
 import {
-  getDeptList,
-  getUserList,
   getUser,
-  getRoleOption,
   addUser,
   delUser,
   resetUserPwd,
   changeUserStatus,
-  updateUser
-} from "@/api/system";
+  updateUser,
+  getUserList
+} from "@/api/system/user";
+import { getRoleOption } from "@/api/system/role";
+import { getDeptList } from "@/api/system/dept";
 import {
   ElForm,
   ElInput,
@@ -116,10 +116,10 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       cellRenderer: ({ row, props }) => (
         <el-tag
           size={props.size}
-          type={row.sex === 1 ? "danger" : null}
+          type={row.sex === "Woman" ? "danger" : null}
           effect="plain"
         >
-          {row.sex === 1 ? "女" : "男"}
+          {row.sex === "Woman" ? "女" : "男"}
         </el-tag>
       )
     },