refactor: ♻️ 抽离CURD的使用部分代码为Hooks实现

src/views/demo/curd/config/content.ts

@@ -1,4 +1,5 @@
 import type { IContentConfig } from "@/components/PageContent/index.vue";
+import { exportUser } from "@/api/user";
 
 const contentConfig: IContentConfig = {
   pageName: "sys:user",
@@ -60,6 +61,10 @@ const contentConfig: IContentConfig = {
       });
     });
   },
+  exportAction: function (queryParams) {
+    // 导出Excel文件
+    return exportUser(queryParams as any);
+  },
   pk: "id",
   toolbar: [
     "refresh",

src/views/demo/curd/index.vue

@@ -19,9 +19,9 @@
       @operat-click="handleOperatClick"
     >
       <template #status="scope">
-        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">{{
-          scope.row[scope.prop] == 1 ? "启用" : "禁用"
-        }}</el-tag>
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
       </template>
     </page-content>
 
@@ -46,43 +46,25 @@ import searchConfig from "./config/search";
 import contentConfig from "./config/content";
 import addModalConfig from "./config/add";
 import editModalConfig from "./config/edit";
-import type PageSearch from "@/components/PageSearch/index.vue";
-import type PageContent from "@/components/PageContent/index.vue";
-import type { IOperatData } from "@/components/PageContent/index.vue";
-import type PageModal from "@/components/PageModal/index.vue";
+import usePage from "@/hooks/usePage";
+import type { IOperatData, IObject } from "@/hooks/usePage";
 
-const searchRef = ref<InstanceType<typeof PageSearch>>();
-const contentRef = ref<InstanceType<typeof PageContent>>();
-const addModalRef = ref<InstanceType<typeof PageModal>>();
-
-// 搜索
-function handleQueryClick(queryParams: any) {
-  contentRef.value?.fetchPageData(queryParams, true);
-}
-// 重置
-function handleResetClick() {
-  contentRef.value?.fetchPageData({}, true);
-}
-// 新增
-function handleAddClick() {
-  //显示添加表单
-  addModalRef.value?.setModalVisible();
-}
-// 导出
-function handleExportClick() {
-  console.log("export");
-  // 可以根据检索条件去导出数据
-  console.log(searchRef.value?.getQueryParams());
-}
-// 其他工具栏
-function handleToolbarClick(name: string) {
-  console.log(name);
-}
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+} = usePage();
 // 编辑
-const editModalRef = ref<InstanceType<typeof PageModal>>();
-function handleEditClick(row: any) {
-  //显示编辑表单 根据id获取的数据进行填充
-  const idMap: Record<string, any> = {
+function handleEditClick(row: IObject) {
+  // 模拟根据id获取数据进行填充
+  const idMap: IObject = {
     2: {
       id: 2,
       username: "admin",
@@ -112,6 +94,13 @@ function handleEditClick(row: any) {
   };
   editModalRef.value?.setModalVisible(idMap[row.id]);
 }
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "upload") {
+    ElMessage.success("点击了导入按钮");
+  }
+}
 // 其他操作列
 function handleOperatClick(data: IOperatData) {
   console.log(data);
@@ -134,9 +123,4 @@ function handleOperatClick(data: IOperatData) {
     });
   }
 }
-// 表单提交
-function handleSubmitClick() {
-  //刷新列表数据
-  contentRef.value?.fetchPageData({}, true);
-}
 </script>