feat: 完善角色管理页面 (#557)

src/views/components/button/index.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 
 defineOptions({
-  name: "Button"
+  name: "ButtonPage"
 });
 
 const { VITE_PUBLIC_PATH } = import.meta.env;

src/views/components/dialog/index.vue

@@ -7,7 +7,7 @@ import forms, { type FormProps } from "./form.vue";
 import { addDialog, closeDialog, closeAllDialog } from "@/components/ReDialog";
 
 defineOptions({
-  name: "Dialog"
+  name: "DialogPage"
 });
 
 const router = useRouter();

src/views/components/map/index.vue

@@ -2,7 +2,7 @@
 import { Amap } from "@/components/ReMap";
 
 defineOptions({
-  name: "Map"
+  name: "MapPage"
 });
 </script>
 

src/views/components/video/index.vue

@@ -8,7 +8,7 @@ import Player from "xgplayer";
 import "xgplayer/dist/index.min.css";
 
 defineOptions({
-  name: "Video"
+  name: "VideoPage"
 });
 
 onMounted(() => {

src/views/system/dept/form.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { formRules } from "./rule";
-import { FormProps } from "./types";
 import ReCol from "@/components/ReCol";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
 import { usePublicHooks } from "../hooks";
 
 const props = withDefaults(defineProps<FormProps>(), {

src/views/system/dept/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useDept } from "./hook";
+import { useDept } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 

src/views/system/dept/utils/hook.tsx

@@ -1,12 +1,12 @@
 import dayjs from "dayjs";
-import editForm from "./form.vue";
+import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
-import { usePublicHooks } from "../hooks";
 import { message } from "@/utils/message";
 import { getDeptList } from "@/api/system";
-import { type FormItemProps } from "./types";
+import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
+import { type FormItemProps } from "../utils/types";
 import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 
 export function useDept() {

src/views/system/role/form.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    name: "",
+    code: "",
+    remark: ""
+  })
+});
+
+const ruleFormRef = ref();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-form-item label="角色名称" prop="name">
+      <el-input
+        v-model="newFormInline.name"
+        clearable
+        placeholder="请输入角色名称"
+      />
+    </el-form-item>
+
+    <el-form-item label="角色标识" prop="code">
+      <el-input
+        v-model="newFormInline.code"
+        clearable
+        placeholder="请输入角色标识"
+      />
+    </el-form-item>
+
+    <el-form-item label="备注">
+      <el-input
+        v-model="newFormInline.remark"
+        placeholder="请输入备注信息"
+        type="textarea"
+      />
+    </el-form-item>
+  </el-form>
+</template>

src/views/system/role/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRole } from "./hook";
+import { useRole } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Database from "@iconify-icons/ri/database-2-line";
-import More from "@iconify-icons/ep/more-filled";
+// import Database from "@iconify-icons/ri/database-2-line";
+// import More from "@iconify-icons/ep/more-filled";
 import Delete from "@iconify-icons/ep/delete";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Search from "@iconify-icons/ep/search";
@@ -24,11 +24,13 @@ const {
   columns,
   dataList,
   pagination,
-  buttonClass,
+  // buttonClass,
   onSearch,
   resetForm,
-  handleUpdate,
+  openDialog,
+  handleMenu,
   handleDelete,
+  // handleDatabase,
   handleSizeChange,
   handleCurrentChange,
   handleSelectionChange
@@ -66,8 +68,8 @@ const {
           clearable
           class="!w-[180px]"
         >
-          <el-option label="已开启" value="1" />
-          <el-option label="已关闭" value="0" />
+          <el-option label="已启用" value="1" />
+          <el-option label="已停用" value="0" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -85,9 +87,17 @@ const {
       </el-form-item>
     </el-form>
 
-    <PureTableBar title="角色列表" :columns="columns" @refresh="onSearch">
+    <PureTableBar
+      title="角色列表（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
       <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon(AddFill)">
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
           新增角色
         </el-button>
       </template>
@@ -118,11 +128,24 @@ const {
               type="primary"
               :size="size"
               :icon="useRenderIcon(EditPen)"
-              @click="handleUpdate(row)"
+              @click="openDialog('编辑', row)"
             >
               修改
             </el-button>
-            <el-popconfirm title="是否确认删除?">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(Menu)"
+              @click="handleMenu"
+            >
+              菜单权限
+            </el-button>
+            <el-popconfirm
+              :title="`是否确认删除角色名称为${row.name}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
               <template #reference>
                 <el-button
                   class="reset-margin"
@@ -130,20 +153,18 @@ const {
                   type="primary"
                   :size="size"
                   :icon="useRenderIcon(Delete)"
-                  @click="handleDelete(row)"
                 >
                   删除
                 </el-button>
               </template>
             </el-popconfirm>
-            <el-dropdown>
+            <!-- <el-dropdown>
               <el-button
                 class="ml-3 mt-[2px]"
                 link
                 type="primary"
                 :size="size"
                 :icon="useRenderIcon(More)"
-                @click="handleUpdate(row)"
               />
               <template #dropdown>
                 <el-dropdown-menu>
@@ -154,6 +175,7 @@ const {
                       type="primary"
                       :size="size"
                       :icon="useRenderIcon(Menu)"
+                      @click="handleMenu"
                     >
                       菜单权限
                     </el-button>
@@ -165,13 +187,14 @@ const {
                       type="primary"
                       :size="size"
                       :icon="useRenderIcon(Database)"
+                      @click="handleDatabase"
                     >
                       数据权限
                     </el-button>
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
-            </el-dropdown>
+            </el-dropdown> -->
           </template>
         </pure-table>
       </template>

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

@@ -1,9 +1,13 @@
 import dayjs from "dayjs";
+import editForm from "../form.vue";
 import { message } from "@/utils/message";
 import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import { type FormItemProps } from "../utils/types";
 import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";
+import { reactive, ref, onMounted, h, toRaw } from "vue";
 
 export function useRole() {
   const form = reactive({
@@ -11,9 +15,11 @@ export function useRole() {
     code: "",
     status: ""
   });
+  const formRef = ref();
   const dataList = ref([]);
   const loading = ref(true);
   const switchLoadMap = ref({});
+  const { switchStyle } = usePublicHooks();
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -21,19 +27,6 @@ export function useRole() {
     background: true
   });
   const columns: TableColumnList = [
-    // {
-    //   label: "勾选列", // 如果需要表格多选，此处label必须设置
-    //   type: "selection",
-    //   width: 55,
-    //   align: "left",
-    //   fixed: "left"
-    // },
-    {
-      label: "序号",
-      type: "index",
-      width: 70,
-      fixed: "left"
-    },
     {
       label: "角色编号",
       prop: "id",
@@ -49,25 +42,6 @@ export function useRole() {
       prop: "code",
       minWidth: 150
     },
-    {
-      label: "角色类型",
-      prop: "type",
-      minWidth: 150,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.type === 1 ? "danger" : ""}
-          effect="plain"
-        >
-          {row.type === 1 ? "内置" : "自定义"}
-        </el-tag>
-      )
-    },
-    {
-      label: "显示顺序",
-      prop: "sort",
-      minWidth: 100
-    },
     {
       label: "状态",
       minWidth: 130,
@@ -78,13 +52,19 @@ export function useRole() {
           v-model={scope.row.status}
           active-value={1}
           inactive-value={0}
-          active-text="已开启"
-          inactive-text="已关闭"
+          active-text="已启用"
+          inactive-text="已停用"
           inline-prompt
+          style={switchStyle.value}
           onChange={() => onChange(scope as any)}
         />
       )
     },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 150
+    },
     {
       label: "创建时间",
       minWidth: 180,
@@ -95,19 +75,19 @@ export function useRole() {
     {
       label: "操作",
       fixed: "right",
-      width: 180,
+      width: 240,
       slot: "operation"
     }
   ];
-  const buttonClass = computed(() => {
-    return [
-      "!h-[20px]",
-      "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
-    ];
-  });
+  // const buttonClass = computed(() => {
+  //   return [
+  //     "!h-[20px]",
+  //     "reset-margin",
+  //     "!text-gray-500",
+  //     "dark:!text-white",
+  //     "dark:hover:!text-primary"
+  //   ];
+  // });
 
   function onChange({ row, index }) {
     ElMessageBox.confirm(
@@ -115,7 +95,7 @@ export function useRole() {
         row.status === 0 ? "停用" : "启用"
       }</strong><strong style='color:var(--el-color-primary)'>${
         row.name
-      }</strong>角色吗?`,
+      }</strong>吗?`,
       "系统提示",
       {
         confirmButtonText: "确定",
@@ -141,7 +121,7 @@ export function useRole() {
               loading: false
             }
           );
-          message("已成功修改角色状态", {
+          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
             type: "success"
           });
         }, 300);
@@ -151,12 +131,9 @@ export function useRole() {
       });
   }
 
-  function handleUpdate(row) {
-    console.log(row);
-  }
-
   function handleDelete(row) {
-    console.log(row);
+    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
   }
 
   function handleSizeChange(val: number) {
@@ -173,9 +150,12 @@ export function useRole() {
 
   async function onSearch() {
     loading.value = true;
-    const { data } = await getRoleList();
+    const { data } = await getRoleList(toRaw(form));
     dataList.value = data.list;
     pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
     setTimeout(() => {
       loading.value = false;
     }, 500);
@@ -187,6 +167,56 @@ export function useRole() {
     onSearch();
   };
 
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}角色`,
+      props: {
+        formInline: {
+          name: row?.name ?? "",
+          code: row?.code ?? "",
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "40%",
+      draggable: true,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了角色名称为${curData.name}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用编辑接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  /** 菜单权限 */
+  function handleMenu() {
+    message("等菜单管理页面开发后完善");
+  }
+
+  /** 数据权限 可自行开发 */
+  // function handleDatabase() {}
+
   onMounted(() => {
     onSearch();
   });
@@ -197,11 +227,13 @@ export function useRole() {
     columns,
     dataList,
     pagination,
-    buttonClass,
+    // buttonClass,
     onSearch,
     resetForm,
-    handleUpdate,
+    openDialog,
+    handleMenu,
     handleDelete,
+    // handleDatabase,
     handleSizeChange,
     handleCurrentChange,
     handleSelectionChange

src/views/system/role/utils/rule.ts

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

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

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