refactor(system): 重构列表数据结构，统一分页查询参数

src/views/system/dict/index.vue

@@ -1,14 +1,9 @@
 <template>
   <div class="page-container">
     <el-card class="page-search" shadow="never">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :model="tableData.params" :inline="true">
         <el-form-item label="关键字" prop="keywords">
-          <el-input
-            v-model="queryParams.keywords"
-            placeholder="字典名称/编码"
-            clearable
-            @keyup.enter="handleQuery"
-          />
+          <el-input v-model="tableData.params.keywords" placeholder="字典名称/编码" clearable @keyup.enter="handleQuery" />
         </el-form-item>
 
         <el-form-item>
@@ -22,24 +17,13 @@
       <div class="page-toolbar">
         <div class="page-toolbar__left">
           <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
-          <el-button
-            type="danger"
-            :disabled="ids.length === 0"
-            icon="delete"
-            @click="handleDelete()"
-          >
+          <el-button type="danger" :disabled="ids.length === 0" icon="delete" @click="handleDelete()">
             删除
           </el-button>
         </div>
       </div>
 
-      <el-table
-        v-loading="loading"
-        highlight-current-row
-        :data="tableData"
-        border
-        @selection-change="handleSelectionChange"
-      >
+      <el-table v-loading="loading" highlight-current-row :data="tableData.list" border @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="字典名称" prop="name" />
         <el-table-column label="字典编码" prop="dictCode" />
@@ -59,43 +43,22 @@
               字典数据
             </el-button>
 
-            <el-button
-              type="primary"
-              link
-              size="small"
-              icon="edit"
-              @click.stop="handleEditClick(scope.row.id)"
-            >
+            <el-button type="primary" link size="small" icon="edit" @click.stop="handleEditClick(scope.row.id)">
               编辑
             </el-button>
-            <el-button
-              type="danger"
-              link
-              size="small"
-              icon="delete"
-              @click.stop="handleDelete(scope.row.id)"
-            >
+            <el-button type="danger" link size="small" icon="delete" @click.stop="handleDelete(scope.row.id)">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="fetchData"
-      />
+      <pagination v-if="tableData.total > 0" v-model:total="tableData.total" v-model:page="tableData.params.pageNum"
+        v-model:limit="tableData.params.pageSize"
+        @pagination="fetchData" />
     </el-card>
 
-    <el-dialog
-      v-model="dialogState.visible"
-      :title="dialogState.title"
-      width="500px"
-      @close="closeDialog"
-    >
+    <el-dialog v-model="dialogState.visible" :title="dialogState.title" width="500px" @close="closeDialog">
       <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入字典名称" />
@@ -128,206 +91,206 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "Dict",
-  inheritAttrs: false,
-});
-
-import DictAPI from "@/api/system/dict";
-import type { DictTypeQueryParams, DictTypeItem, DictTypeForm } from "@/api/system/dict";
-import type { FormInstance, FormRules } from "element-plus";
-import router from "@/router";
-
-// 表单引用
-const queryFormRef = ref<FormInstance>();
-const dataFormRef = ref<FormInstance>();
-
-// 查询参数
-const queryParams = reactive<DictTypeQueryParams>({
-  pageNum: 1,
-  pageSize: 10,
-});
-
-// 列表数据
-const tableData = ref<DictTypeItem[]>();
-const total = ref(0);
-const loading = ref(false);
-const ids = ref<string[]>([]);
-
-// 弹窗状态
-const dialogState = reactive({
-  title: "",
-  visible: false,
-});
-
-// 表单数据
-const formData = reactive<DictTypeForm>({
-  status: 1,
-});
-
-// 验证规则
-const rules: FormRules = {
-  name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
-  dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
-};
-
-/**
- * 加载字典列表数据
- */
-function fetchData(): void {
-  loading.value = true;
-  DictAPI.getPage(queryParams)
-    .then((data) => {
-      tableData.value = data.list;
-      total.value = data.total ?? 0;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-/**
- * 查询按钮点击事件
- */
-function handleQuery(): void {
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 重置查询
- */
-function handleResetQuery(): void {
-  queryFormRef.value?.resetFields();
-  queryParams.pageNum = 1;
-  fetchData();
-}
-
-/**
- * 表格选择变化事件
- */
-function handleSelectionChange(selection: DictTypeItem[]): void {
-  ids.value = selection.map((item) => item.id);
-}
-
-/**
- * 新增按钮点击事件
- */
-function handleCreateClick(): void {
-  resetForm();
-  dialogState.visible = true;
-  dialogState.title = "新增字典";
-}
-
-/**
- * 编辑按钮点击事件
- * @param id 字典ID
- */
-function handleEditClick(id: string): void {
-  resetForm();
-  dialogState.visible = true;
-  dialogState.title = "修改字典";
-  DictAPI.getFormData(id).then((data) => {
-    Object.assign(formData, data);
+  defineOptions({
+    name: "Dict",
+    inheritAttrs: false,
   });
-}
 
-function resetForm(): void {
-  dataFormRef.value?.clearValidate();
-  formData.id = undefined;
-  formData.name = undefined;
-  formData.dictCode = undefined;
-  formData.status = 1;
-  formData.remark = undefined;
-}
+  import DictAPI from "@/api/system/dict";
+  import type { DictTypeItem, DictTypeForm } from "@/api/system/dict";
+  import type { FormInstance, FormRules } from "element-plus";
+  import router from "@/router";
 
-/**
- * 提交表单
- */
-function handleSubmit(): void {
-  dataFormRef.value?.validate((isValid) => {
-    if (isValid) {
-      loading.value = true;
-      const id = formData.id;
-      if (id) {
-        DictAPI.update(id, formData)
-          .then(() => {
-            ElMessage.success("修改成功");
-            closeDialog();
-            handleQuery();
-          })
-          .finally(() => (loading.value = false));
-      } else {
-        DictAPI.create(formData)
-          .then(() => {
-            ElMessage.success("新增成功");
-            closeDialog();
-            handleQuery();
-          })
-          .finally(() => (loading.value = false));
-      }
-    }
-  });
-}
+  // 表单引用
+  const queryFormRef = ref<FormInstance>();
+  const dataFormRef = ref<FormInstance>();
 
-/**
- * 关闭弹窗
- */
-function closeDialog(): void {
-  dialogState.visible = false;
-  dataFormRef.value?.resetFields();
-  resetForm();
-}
-
-/**
- * 删除字典
- * @param id 字典ID
- */
-function handleDelete(id?: number): void {
-  const attrGroupIds = [id || ids.value].join(",");
-  if (!attrGroupIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
-  }
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(
-    () => {
-      DictAPI.deleteByIds(attrGroupIds).then(() => {
-        ElMessage.success("删除成功");
-        handleResetQuery();
-      });
+  // 列表数据
+  const loading = ref(false);
+  const ids = ref<string[]>([]);
+  const tableData = reactive<PageResult<DictTypeItem>>({
+    list: [],
+    total: 0,
+    params: { //查询参数
+      pageNum: 1,
+      pageSize: 10,
     },
-    () => {
-      ElMessage.info("已取消删除");
-    }
-  );
-}
+  });
 
-/**
- * 打开字典数据页面
- * @param row 字典数据
- */
-function openDictData(row: DictTypeItem): void {
-  try {
-    const route = router.resolve({
-      name: "DictItem",
-      query: { dictCode: row.dictCode, title: `【${row.name}】字典数据` },
+  // 弹窗状态
+  const dialogState = reactive({
+    title: "",
+    visible: false,
+  });
+
+  // 表单数据
+  const formData = reactive<DictTypeForm>({
+    status: 1,
+  });
+
+  // 验证规则
+  const rules: FormRules = {
+    name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
+    dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
+  };
+
+  /**
+   * 加载字典列表数据
+   */
+  function fetchData(): void {
+    loading.value = true;
+    DictAPI.getPage(tableData.params)
+      .then((data) => {
+        tableData.list = data.list ?? []
+        tableData.total = data.total ?? 0;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  /**
+   * 查询按钮点击事件
+   */
+  function handleQuery(): void {
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
+
+  /**
+   * 重置查询
+   */
+  function handleResetQuery(): void {
+    queryFormRef.value?.resetFields();
+    tableData.params.pageNum = 1;
+    fetchData();
+  }
+
+  /**
+   * 表格选择变化事件
+   */
+  function handleSelectionChange(selection: DictTypeItem[]): void {
+    ids.value = selection.map((item) => item.id);
+  }
+
+  /**
+   * 新增按钮点击事件
+   */
+  function handleCreateClick(): void {
+    resetForm();
+    dialogState.visible = true;
+    dialogState.title = "新增字典";
+  }
+
+  /**
+   * 编辑按钮点击事件
+   * @param id 字典ID
+   */
+  function handleEditClick(id: string): void {
+    resetForm();
+    dialogState.visible = true;
+    dialogState.title = "修改字典";
+    DictAPI.getFormData(id).then((data) => {
+      Object.assign(formData, data);
     });
-    if (route.matched.length === 0) {
-      ElMessage.error("路由未注册，请刷新页面后重试");
+  }
+
+  function resetForm(): void {
+    dataFormRef.value?.clearValidate();
+    formData.id = undefined;
+    formData.name = undefined;
+    formData.dictCode = undefined;
+    formData.status = 1;
+    formData.remark = undefined;
+  }
+
+  /**
+   * 提交表单
+   */
+  function handleSubmit(): void {
+    dataFormRef.value?.validate((isValid) => {
+      if (isValid) {
+        loading.value = true;
+        const id = formData.id;
+        if (id) {
+          DictAPI.update(id, formData)
+            .then(() => {
+              ElMessage.success("修改成功");
+              closeDialog();
+              handleQuery();
+            })
+            .finally(() => (loading.value = false));
+        } else {
+          DictAPI.create(formData)
+            .then(() => {
+              ElMessage.success("新增成功");
+              closeDialog();
+              handleQuery();
+            })
+            .finally(() => (loading.value = false));
+        }
+      }
+    });
+  }
+
+  /**
+   * 关闭弹窗
+   */
+  function closeDialog(): void {
+    dialogState.visible = false;
+    dataFormRef.value?.resetFields();
+    resetForm();
+  }
+
+  /**
+   * 删除字典
+   * @param id 字典ID
+   */
+  function handleDelete(id?: number): void {
+    const attrGroupIds = [id || ids.value].join(",");
+    if (!attrGroupIds) {
+      ElMessage.warning("请勾选删除项");
       return;
     }
-    router.push(route);
-  } catch (error) {
-    console.error("路由跳转失败:", error);
-    ElMessage.error("页面跳转失败，请刷新页面后重试");
+    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(
+      () => {
+        DictAPI.deleteByIds(attrGroupIds).then(() => {
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        });
+      },
+      () => {
+        ElMessage.info("已取消删除");
+      }
+    );
   }
-}
 
-onMounted(() => {
-  handleQuery();
-});
+  /**
+   * 打开字典数据页面
+   * @param row 字典数据
+   */
+  function openDictData(row: DictTypeItem): void {
+    try {
+      const route = router.resolve({
+        name: "DictItem",
+        query: { dictCode: row.dictCode, title: `【${row.name}】字典数据` },
+      });
+      if (route.matched.length === 0) {
+        ElMessage.error("路由未注册，请刷新页面后重试");
+        return;
+      }
+      router.push(route);
+    } catch (error) {
+      console.error("路由跳转失败:", error);
+      ElMessage.error("页面跳转失败，请刷新页面后重试");
+    }
+  }
+
+  onMounted(() => {
+    handleQuery();
+  });
 </script>