refactor: system pages (#399)

* refactor: system pages * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update
2026-01-20 16:53:37 +08:00 · 2022-12-16 14:34:10 +08:00
parent 66fdfebb5e
commit 923f09db5b
25 changed files with 521 additions and 444 deletions
--- a/src/views/system/role/columns.tsx
+++ b/src/views/system/role/columns.tsx
@@ -1,11 +1,25 @@
-import { ref } from "vue";
 import dayjs from "dayjs";
 import { message } from "@/utils/message";
+import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
+import { type PaginationProps } from "@pureadmin/table";
+import { reactive, ref, computed, onMounted } from "vue";

-export function useColumns() {
+export function useRole() {
+  const form = reactive({
+    name: "",
+    code: "",
+    status: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
  const switchLoadMap = ref({});
-
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
  const columns: TableColumnList = [
    {
      type: "selection",
@@ -21,19 +35,23 @@ export function useColumns() {
    },
    {
      label: "角色编号",
-      prop: "id"
+      prop: "id",
+      minWidth: 100
    },
    {
      label: "角色名称",
-      prop: "name"
+      prop: "name",
+      minWidth: 120
    },
    {
      label: "角色标识",
-      prop: "code"
+      prop: "code",
+      minWidth: 150
    },
    {
      label: "角色类型",
      prop: "type",
+      minWidth: 150,
      cellRenderer: ({ row, props }) => (
        <el-tag
          size={props.size}
@@ -46,12 +64,12 @@ export function useColumns() {
    },
    {
      label: "显示顺序",
-      prop: "sort"
+      prop: "sort",
+      minWidth: 100
    },
    {
      label: "状态",
-      prop: "status",
-      width: 130,
+      minWidth: 130,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
@@ -68,7 +86,7 @@ export function useColumns() {
    },
    {
      label: "创建时间",
-      width: 180,
+      minWidth: 180,
      prop: "createTime",
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -80,6 +98,15 @@ export function useColumns() {
      slot: "operation"
    }
  ];
+  const buttonClass = computed(() => {
+    return [
+      "!h-[20px]",
+      "reset-margin",
+      "!text-gray-500",
+      "dark:!text-white",
+      "dark:hover:!text-primary"
+    ];
+  });

  function onChange({ row, index }) {
    ElMessageBox.confirm(
@@ -123,7 +150,59 @@ export function useColumns() {
      });
  }

+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  function handleDelete(row) {
+    console.log(row);
+  }
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getRoleList();
+    dataList.value = data.list;
+    pagination.total = data.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
  return {
-    columns
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    buttonClass,
+    onSearch,
+    resetForm,
+    handleUpdate,
+    handleDelete,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
  };
 }
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useColumns } from "./columns";
-import { getRoleList } from "@/api/system";
-import { reactive, ref, onMounted } from "vue";
-import { type FormInstance } from "element-plus";
-import { TableProBar } from "@/components/ReTable";
-import { type PaginationProps } from "@pureadmin/table";
+import { ref } from "vue";
+import { useRole } from "./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 Delete from "@iconify-icons/ep/delete";
@@ -19,64 +17,22 @@ defineOptions({
  name: "Role"
 });

-const form = reactive({
-  name: "",
-  code: "",
-  status: ""
-});
-
-const dataList = ref([]);
-const loading = ref(true);
-const { columns } = useColumns();
-
-const formRef = ref<FormInstance>();
-
-const pagination = reactive<PaginationProps>({
-  total: 0,
-  pageSize: 10,
-  currentPage: 1,
-  background: true
-});
-
-function handleUpdate(row) {
-  console.log(row);
-}
-
-function handleDelete(row) {
-  console.log(row);
-}
-
-function handleCurrentChange(val: number) {
-  console.log(`current page: ${val}`);
-}
-
-function handleSizeChange(val: number) {
-  console.log(`${val} items per page`);
-}
-
-function handleSelectionChange(val) {
-  console.log("handleSelectionChange", val);
-}
-
-async function onSearch() {
-  loading.value = true;
-  const { data } = await getRoleList();
-  dataList.value = data.list;
-  pagination.total = data.total;
-  setTimeout(() => {
-    loading.value = false;
-  }, 500);
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  onSearch();
-};
-
-onMounted(() => {
-  onSearch();
-});
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  buttonClass,
+  onSearch,
+  resetForm,
+  handleUpdate,
+  handleDelete,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole();
 </script>

 <template>
@@ -88,13 +44,28 @@ onMounted(() => {
      class="bg-bg_color w-[99/100] pl-8 pt-4"
    >
      <el-form-item label="角色名称：" prop="name">
-        <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
+        <el-input
+          v-model="form.name"
+          placeholder="请输入角色名称"
+          clearable
+          class="!w-[200px]"
+        />
      </el-form-item>
      <el-form-item label="角色标识：" prop="code">
-        <el-input v-model="form.code" placeholder="请输入角色标识" clearable />
+        <el-input
+          v-model="form.code"
+          placeholder="请输入角色标识"
+          clearable
+          class="!w-[180px]"
+        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
-        <el-select v-model="form.status" placeholder="请选择状态" clearable>
+        <el-select
+          v-model="form.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-[180px]"
+        >
          <el-option label="已开启" value="1" />
          <el-option label="已关闭" value="0" />
        </el-select>
@@ -114,12 +85,7 @@ onMounted(() => {
      </el-form-item>
    </el-form>

-    <TableProBar
-      title="角色列表"
-      :loading="loading"
-      :dataList="dataList"
-      @refresh="onSearch"
-    >
+    <PureTableBar title="角色列表" @refresh="onSearch">
      <template #buttons>
        <el-button type="primary" :icon="useRenderIcon(AddFill)">
          新增角色
@@ -131,6 +97,7 @@ onMounted(() => {
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
+          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="columns"
@@ -151,8 +118,8 @@ onMounted(() => {
              link
              type="primary"
              :size="size"
-              @click="handleUpdate(row)"
              :icon="useRenderIcon(EditPen)"
+              @click="handleUpdate(row)"
            >
              修改
            </el-button>
@@ -172,18 +139,18 @@ onMounted(() => {
            </el-popconfirm>
            <el-dropdown>
              <el-button
-                class="ml-3"
+                class="ml-3 mt-[2px]"
                link
                type="primary"
                :size="size"
-                @click="handleUpdate(row)"
                :icon="useRenderIcon(More)"
+                @click="handleUpdate(row)"
              />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button
-                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                      :class="buttonClass"
                      link
                      type="primary"
                      :size="size"
@@ -194,7 +161,7 @@ onMounted(() => {
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
-                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+                      :class="buttonClass"
                      link
                      type="primary"
                      :size="size"
@@ -209,7 +176,7 @@ onMounted(() => {
          </template>
        </pure-table>
      </template>
-    </TableProBar>
+    </PureTableBar>
  </div>
 </template>