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

src/hooks/usePage.ts

@@ -0,0 +1,58 @@
+import { ref } from "vue";
+import type PageSearch from "@/components/PageSearch/index.vue";
+import type PageContent from "@/components/PageContent/index.vue";
+import type PageModal from "@/components/PageModal/index.vue";
+import type { IOperatData, IObject } from "@/components/PageContent/index.vue";
+export type { IOperatData, IObject };
+
+function usePage() {
+  const searchRef = ref<InstanceType<typeof PageSearch>>();
+  const contentRef = ref<InstanceType<typeof PageContent>>();
+  const addModalRef = ref<InstanceType<typeof PageModal>>();
+  const editModalRef = ref<InstanceType<typeof PageModal>>();
+
+  // 搜索
+  function handleQueryClick(queryParams: IObject) {
+    contentRef.value?.fetchPageData(queryParams, true);
+  }
+  // 重置
+  function handleResetClick() {
+    contentRef.value?.fetchPageData({}, true);
+  }
+  // 新增
+  function handleAddClick() {
+    //显示添加表单
+    addModalRef.value?.setModalVisible();
+  }
+  // 编辑
+  function handleEditClick(row: IObject) {
+    //显示编辑表单 根据数据进行填充
+    editModalRef.value?.setModalVisible(row);
+  }
+  // 表单提交
+  function handleSubmitClick() {
+    //刷新列表数据
+    contentRef.value?.fetchPageData({}, true);
+  }
+  // 导出
+  function handleExportClick() {
+    // 根据检索条件导出数据
+    const queryParams = searchRef.value?.getQueryParams();
+    contentRef.value?.exportPageData(queryParams);
+  }
+
+  return {
+    searchRef,
+    contentRef,
+    addModalRef,
+    editModalRef,
+    handleQueryClick,
+    handleResetClick,
+    handleAddClick,
+    handleEditClick,
+    handleSubmitClick,
+    handleExportClick,
+  };
+}
+
+export default usePage;