update 优化 重构抽出一些常用hooks组件简化页面编码

src/hooks/async/useLoading.ts

@@ -0,0 +1,22 @@
+export function useLoading(initialValue = false) {
+  const loading = ref(initialValue);
+
+  const setLoading = (value: boolean) => {
+    loading.value = value;
+  };
+
+  const withLoading = async <T>(task: () => Promise<T>) => {
+    loading.value = true;
+    try {
+      return await task();
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    loading,
+    setLoading,
+    withLoading
+  };
+}

src/hooks/dialog/useDialogState.ts

@@ -0,0 +1,33 @@
+export function useDialogState(initialTitle = '') {
+  const dialog = reactive<DialogOption>({
+    visible: false,
+    title: initialTitle
+  });
+
+  const openDialog = (title?: string) => {
+    if (title !== undefined) {
+      dialog.title = title;
+    }
+    dialog.visible = true;
+  };
+
+  const closeDialog = () => {
+    dialog.visible = false;
+  };
+
+  const toggleDialog = () => {
+    dialog.visible = !dialog.visible;
+  };
+
+  const setTitle = (title: string) => {
+    dialog.title = title;
+  };
+
+  return {
+    dialog,
+    openDialog,
+    closeDialog,
+    toggleDialog,
+    setTitle
+  };
+}

src/hooks/dialog/useFormDialog.ts

@@ -0,0 +1,42 @@
+import type { Ref } from 'vue';
+import { useDialogState } from './useDialogState';
+
+interface UseFormDialogOptions<T extends Record<string, any>> {
+  form: Ref<T>;
+  formRef?: Ref<ElFormInstance | undefined>;
+  initialFormData: T;
+  initialTitle?: string;
+}
+
+export function useFormDialog<T extends Record<string, any>>(options: UseFormDialogOptions<T>) {
+  const { form, formRef, initialFormData, initialTitle } = options;
+  const { dialog, openDialog, closeDialog, setTitle } = useDialogState(initialTitle);
+
+  const resetForm = () => {
+    form.value = { ...initialFormData };
+    formRef?.value?.resetFields();
+    formRef?.value?.clearValidate?.();
+  };
+
+  const openFormDialog = (title?: string) => {
+    resetForm();
+    openDialog(title);
+  };
+
+  const showDialog = (title?: string) => {
+    openDialog(title);
+  };
+
+  const closeFormDialog = () => {
+    closeDialog();
+  };
+
+  return {
+    dialog,
+    resetForm,
+    openDialog: openFormDialog,
+    showDialog,
+    closeDialog: closeFormDialog,
+    setTitle
+  };
+}

src/hooks/form/useSearchReset.ts

@@ -0,0 +1,43 @@
+import type { Ref } from 'vue';
+
+interface UseSearchResetOptions<T extends Record<string, any>> {
+  queryFormRef: Ref<ElFormInstance | undefined>;
+  queryParams?: Ref<T>;
+  pageNumKey?: keyof T;
+  pageSizeKey?: keyof T;
+  initialPageNum?: number;
+  initialPageSize?: number;
+  resetExtras?: () => void;
+  afterReset?: () => void;
+}
+
+export function useSearchReset<T extends Record<string, any>>(options: UseSearchResetOptions<T>) {
+  const {
+    queryFormRef,
+    queryParams,
+    pageNumKey,
+    pageSizeKey,
+    initialPageNum = 1,
+    initialPageSize,
+    resetExtras,
+    afterReset
+  } = options;
+
+  const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    if (queryParams?.value) {
+      if (pageNumKey) {
+        queryParams.value[pageNumKey] = initialPageNum as T[keyof T];
+      }
+      if (pageSizeKey && initialPageSize !== undefined) {
+        queryParams.value[pageSizeKey] = initialPageSize as T[keyof T];
+      }
+    }
+    resetExtras?.();
+    afterReset?.();
+  };
+
+  return {
+    resetQuery
+  };
+}

src/hooks/form/useSearchToggle.ts

@@ -0,0 +1,17 @@
+export function useSearchToggle(initialValue = true) {
+  const showSearch = ref(initialValue);
+
+  const toggleSearch = () => {
+    showSearch.value = !showSearch.value;
+  };
+
+  const setShowSearch = (value: boolean) => {
+    showSearch.value = value;
+  };
+
+  return {
+    showSearch,
+    toggleSearch,
+    setShowSearch
+  };
+}

src/hooks/table/useTableSelection.ts

@@ -0,0 +1,33 @@
+const isSelectableId = (value: unknown): value is string | number => {
+  return typeof value === 'string' || typeof value === 'number';
+};
+
+export function useTableSelection<T, ID extends string | number = string | number>(getRowId: (row: T) => ID) {
+  const ids = ref<ID[]>([]);
+  const selectedRows = ref<T[]>([]);
+  const single = ref(true);
+  const multiple = ref(true);
+
+  const handleSelectionChange = (selection: T[]) => {
+    selectedRows.value = selection;
+    ids.value = selection.map(getRowId).filter(isSelectableId) as ID[];
+    single.value = selection.length !== 1;
+    multiple.value = selection.length === 0;
+  };
+
+  const clearSelection = () => {
+    selectedRows.value = [];
+    ids.value = [];
+    single.value = true;
+    multiple.value = true;
+  };
+
+  return {
+    ids,
+    selectedRows,
+    single,
+    multiple,
+    handleSelectionChange,
+    clearSelection
+  };
+}

src/hooks/tree/useTreeCollapsed.ts

@@ -0,0 +1,17 @@
+export function useTreeCollapsed(initialValue = false) {
+  const treeCollapsed = ref(initialValue);
+
+  const toggleCollapsed = () => {
+    treeCollapsed.value = !treeCollapsed.value;
+  };
+
+  const setCollapsed = (value: boolean) => {
+    treeCollapsed.value = value;
+  };
+
+  return {
+    treeCollapsed,
+    toggleCollapsed,
+    setCollapsed
+  };
+}