太美丽了！

src/service/api/category.ts

@@ -1,14 +1,21 @@
 import { request } from '../request';
 
 /** get category list */
-export function fetchGetCategoryList(name?: string | null, type?: string | null) {
+// export function fetchGetCategoryList(name?: string | null, type?: string | null) {
+//   return request({
+//     url: '/category/categoryTree',
+//     method: 'post',
+//     data: {
+//       categoryName: name,
+//       categoryType: type
+//     }
+//   });
+// }
+export function fetchGetCategoryList(data?: Api.Category.CategorySearchParams) {
   return request({
     url: '/category/categoryTree',
     method: 'post',
-    data: {
-      categoryName: name,
-      categoryType: type
-    }
+    data
   });
 }
 

src/typings/api.d.ts

@@ -1368,6 +1368,11 @@ declare namespace Api {
   namespace Category {
     type CategoryType = '网站' | '文献';
 
+    type CategorySearchParams = {
+      categoryName?: string | null, 
+      categoryType?: string | null
+    }
+
     type RowData = Category & {
       children?: RowData[];
     };

src/views/category/index.vue

@@ -1,25 +1,19 @@
 <script setup lang="tsx">
 import { $t } from '@/locales';
-import { ref, onMounted } from 'vue';
 import { NButton, NPopconfirm, DataTableColumns } from 'naive-ui';
 import { fetchGetCategoryList, fetchDeleteCategory } from '@/service/api';
-import { useFormOperate } from './modules/table';
+import { useFormOperate, useCategoryTable } from './modules/table';
 import CategorySearch from './modules/category.vue';
 import CategoryOperateDrawer from './modules/category-operate-drawer.vue';
 import CategoryHeaderOperation from "./modules/category-header-operation.vue";
 
-onMounted(async () => {
-  try {
-    getData();
-  } catch (error) {
-    window.$message?.success($t('common.loadFail'));
-  }
-});
-
-let loading = ref(false)
-// 数据
-let tableData = ref<Api.Category.RowData[]>([]);
-// 表行
+const {
+  loading,
+  tableData,
+  params,
+  getData,
+  rowKey,
+} = useCategoryTable(fetchGetCategoryList);
 const columns = (): DataTableColumns<Api.Category.RowData> => [
   {
     title: $t('page.category.form.categoryName'),
@@ -69,23 +63,18 @@ const columns = (): DataTableColumns<Api.Category.RowData> => [
     )
   }
 ]
-const rowKey = (row: Api.Category.RowData) => row.id
 
-const getData = async () => {
-  loading.value = true;
-  const { data } = await fetchGetCategoryList();
-  tableData.value = data as Api.Category.RowData[];
-  loading.value = false;
-};
 const {
   drawerVisible,
   operateType,
   editingData,
   handleAdd,
   handleEdit,
-  onDeleted
+  onDeleted,
+  onUpdate
 } = useFormOperate({
-  getData
+  getData,
+  immediate: true
 });
 
 // 表头添加操作
@@ -106,17 +95,15 @@ const Delete = async (id: number) => {
   if (res.error) return;
   onDeleted();
 }
-// 查询
-const update = (res: Api.Category.RowData[]) => {
-  tableData.value = res;
-}
+
 </script>
 
 <template>
     <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
         <!-- 查询组件 -->
         <CategorySearch 
-          @update="update"
+          @update="onUpdate"
+          v-model:model="params"
         />
         <DeleteAlert />
         <NCard 
@@ -140,6 +127,7 @@ const update = (res: Api.Category.RowData[]) => {
                 :max-height="490"
                 :columns="columns()"
                 :data="tableData"
+                :loading="loading"
                 :row-key="rowKey"
                 default-expand-all
             />
@@ -152,6 +140,5 @@ const update = (res: Api.Category.RowData[]) => {
             />
         </NCard>
     </div>
-
 </template>
 

src/views/category/modules/category.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import { $t } from '@/locales';
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
 import { NCard, NForm, NFormItemGi, NGrid, NInput, NSelect, NButton, NSpace } from 'naive-ui';
 import { useAppStore } from '@/store/modules/app';
-import { translateOptions } from '@/utils/common';
-// import { categoryTypeOptions } from '@/constants/business';
-import { fetchGetCategoryList } from '@/service/api';
 const appStore = useAppStore();
 
 interface Model {
@@ -14,9 +10,10 @@ interface Model {
   categoryType: string | null;
 }
 
-const model = ref<Model>({
-  categoryName: null,
-  categoryType: null
+// 使用 defineModel 来定义双向绑定的模型
+const model = defineModel<Model>('model', {
+  required: true,
+  default: () => ({ categoryName: null, categoryType: null })
 });
 
 const categoryTypeOptions = [
@@ -27,27 +24,17 @@ const categoryTypeOptions = [
 const btnSpan = computed(() => appStore.isMobile ? '24' : '12');
 
 interface Emits {
-  (e: 'update', value: any): void;
+  (e: 'update'): void;
 }
 const emit = defineEmits<Emits>();
 
 const search = async () => {
-  console.log('搜索:', model.value.categoryName);
-  // 在这里添加搜索逻辑
-  try {
-    const {data} = await fetchGetCategoryList(model.value.categoryName, model.value.categoryType);
-    emit('update', data);
-  } catch (error) {
-    console.error('Failed to fetch category list:', error);
-  }
+    emit('update');
 }
-
-async function reset() {
-  model.value.categoryName = null;
-  model.value.categoryType = null;
-  // 在这里添加重置逻辑
-  const {data} = await fetchGetCategoryList();
-    emit('update', data);
+function reset() {
+    model.value.categoryName = null;
+    model.value.categoryType = null;
+    emit('update');
 }
 </script>
 

src/views/category/modules/table.ts

@@ -1,12 +1,47 @@
-import { ref, Ref, Reactive } from 'vue';
-import { jsonClone } from '@sa/utils';
+import { ref, Ref } from 'vue';
 import { useBoolean } from '@sa/hooks';
 import { $t } from '@/locales';
 
+type CategoryApiFn<T = any, R = Api.Category.CategorySearchParams> = (
+  params?: R
+) => Promise<NaiveUI.FlatResponseData<T>>; // data/msg
+
+export function useCategoryTable<T extends Api.Category.RowData[]>(apiFn: CategoryApiFn<T>) {
+  const loading = ref(false);
+  const tableData = ref<Api.Category.RowData[]>([]);
+  const params = ref({
+    categoryName: null,
+    categoryType: null
+  });
+
+  const rowKey = (row: Api.Category.RowData) => row.id
+
+  const getData = async () => { // 无参
+    loading.value = true;
+    try {
+      const { data } = await apiFn(params.value);
+      tableData.value = data as Api.Category.RowData[];
+    } catch (error) {
+      console.error(error);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    loading,
+    tableData,
+    params,
+    getData,
+    rowKey
+  };
+}
+
 export function useFormOperate<T extends Record<string, any>>(config: {
   getData: () => Promise<void>;
+  immediate?: boolean; // 添加 immediate 参数，默认为 false
 }) {
-  const { getData } = config;
+  const { getData, immediate } = config;
 
   const { bool: drawerVisible, setTrue: openDrawer, setFalse: closeDrawer } = useBoolean();
   const operateType: Ref<NaiveUI.TableOperateType>  = ref('add');
@@ -38,6 +73,21 @@ export function useFormOperate<T extends Record<string, any>>(config: {
     await getData();
   }
 
+  async function onUpdate() {
+    console.log('搜索');
+    // 在这里添加搜索逻辑
+    try {
+      await getData();
+    } catch (error) {
+      window.$message?.error($t('common.loadFail'));
+    }
+  }
+
+   // 如果 immediate 为 true，则在初始化时调用 getData
+   if (immediate) {
+    getData();
+  }
+
   return {
     drawerVisible, // 抽屉是否可见
     operateType, // 操作类型
@@ -46,6 +96,7 @@ export function useFormOperate<T extends Record<string, any>>(config: {
     closeDrawer, // 关闭抽屉
     handleAdd, // 添加操作
     handleEdit, // 编辑操作
-    onDeleted
+    onDeleted, // 删除操作
+    onUpdate // 搜索操作
   };
 }