diff --git a/src/hooks/async/useLoading.ts b/src/hooks/async/useLoading.ts
new file mode 100644
index 0000000..19a2178
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/hooks/dialog/useDialogState.ts b/src/hooks/dialog/useDialogState.ts
new file mode 100644
index 0000000..015bffa
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/hooks/dialog/useFormDialog.ts b/src/hooks/dialog/useFormDialog.ts
new file mode 100644
index 0000000..c8916d3
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/hooks/form/useSearchReset.ts b/src/hooks/form/useSearchReset.ts
new file mode 100644
index 0000000..8c261d3
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/hooks/form/useSearchToggle.ts b/src/hooks/form/useSearchToggle.ts
new file mode 100644
index 0000000..9c89d0a
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/hooks/table/useTableSelection.ts b/src/hooks/table/useTableSelection.ts
new file mode 100644
index 0000000..739e19d
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/hooks/tree/useTreeCollapsed.ts b/src/hooks/tree/useTreeCollapsed.ts
new file mode 100644
index 0000000..8e298eb
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/views/demo/demo/index.vue b/src/views/demo/demo/index.vue
index b99dc7b..80a1a11 100644
--- a/src/views/demo/demo/index.vue
+++ b/src/views/demo/demo/index.vue
@@ -138,26 +138,23 @@
 <script setup name="Demo" lang="ts">
 import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
 import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { download as requestDownload } from '@/utils/request';
 
 const demoList = ref<DemoVO[]>([]);
 const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const demoFormRef = ref<ElFormInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const initFormData: DemoForm = {
   id: undefined,
   deptId: undefined,
@@ -188,26 +185,26 @@ const data = reactive<PageData<DemoForm, DemoQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<DemoVO>(item => item.id);
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: demoFormRef,
+  initialFormData: initFormData
+});
 
 /** 查询测试单列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listDemo(queryParams.value);
-  demoList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listDemo(queryParams.value);
+    demoList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 
 /** 取消按钮 */
 const cancel = () => {
   reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  demoFormRef.value?.resetFields();
+  closeDialog();
 };
 
 /** 搜索按钮操作 */
@@ -216,24 +213,18 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: DemoVO[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加测试单';
+  openDialog('添加测试单');
 };
 
 /** 修改按钮操作 */
@@ -242,8 +233,7 @@ const handleUpdate = async (row?: DemoVO) => {
   const _id = row?.id || ids.value[0];
   const res = await getDemo(_id);
   Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改测试单';
+  showDialog('修改测试单');
 };
 
 /** 提交按钮 */
@@ -257,7 +247,7 @@ const submitForm = () => {
         await addDemo(form.value).finally(() => (buttonLoading.value = false));
       }
       modal.msgSuccess('修改成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
@@ -266,7 +256,7 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: DemoVO) => {
   const _ids = row?.id || ids.value;
-  await modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？');
   await delDemo(_ids);
   modal.msgSuccess('删除成功');
   await getList();
diff --git a/src/views/demo/tree/index.vue b/src/views/demo/tree/index.vue
index df65b0f..dd5ab31 100644
--- a/src/views/demo/tree/index.vue
+++ b/src/views/demo/tree/index.vue
@@ -49,7 +49,7 @@
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
-        <el-table-column label="父id" align="center" prop="parentId" />
+        <el-table-column label="父id" prop="parentId" />
         <el-table-column label="部门id" align="center" prop="deptId" />
         <el-table-column label="用户id" align="center" prop="userId" />
         <el-table-column label="树节点名" align="center" prop="treeName" />
@@ -116,6 +116,10 @@
 <script setup name="Tree" lang="ts">
 import { listTree, getTree, delTree, addTree, updateTree } from '@/api/demo/tree';
 import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
 import modal from '@/plugins/modal';
 import { handleTree } from '@/utils/ruoyi';
 
@@ -128,19 +132,14 @@ type TreeOption = {
 const treeList = ref<TreeVO[]>([]);
 const treeOptions = ref<TreeOption[]>([]);
 const buttonLoading = ref(false);
-const showSearch = ref(true);
+const { showSearch } = useSearchToggle();
 const isExpandAll = ref(true);
-const loading = ref(false);
+const { loading, setLoading, withLoading } = useLoading();
 
 const queryFormRef = ref<ElFormInstance>();
 const treeFormRef = ref<ElFormInstance>();
 const treeTableRef = ref<ElTableInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const initFormData: TreeForm = {
   id: undefined,
   parentId: undefined,
@@ -167,16 +166,21 @@ const data = reactive<PageData<TreeForm, TreeQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: treeFormRef,
+  initialFormData: initFormData
+});
 
 /** 查询测试树列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listTree(queryParams.value);
-  const data = handleTree<TreeVO>(res.data, 'id', 'parentId');
-  if (data) {
-    treeList.value = data;
-    loading.value = false;
-  }
+  await withLoading(async () => {
+    const res = await listTree(queryParams.value);
+    const data = handleTree<TreeVO>(res.data, 'id', 'parentId');
+    if (data) {
+      treeList.value = data;
+    }
+  });
 };
 
 /** 查询测试树下拉树结构 */
@@ -191,13 +195,7 @@ const getTreeselect = async () => {
 // 取消按钮
 const cancel = () => {
   reset();
-  dialog.visible = false;
-};
-
-// 表单重置
-const reset = () => {
-  form.value = { ...initFormData };
-  treeFormRef.value?.resetFields();
+  closeDialog();
 };
 
 /** 搜索按钮操作 */
@@ -205,23 +203,23 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 新增按钮操作 */
 const handleAdd = (row?: TreeVO) => {
-  reset();
+  openDialog('添加测试树');
   getTreeselect();
   if (row && row.id) {
     form.value.parentId = row.id;
   } else {
     form.value.parentId = 0;
   }
-  dialog.visible = true;
-  dialog.title = '添加测试树';
 };
 
 /** 展开/折叠操作 */
@@ -247,8 +245,7 @@ const handleUpdate = async (row: TreeVO) => {
   }
   const res = await getTree(row.id);
   Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改测试树';
+  showDialog('修改测试树');
 };
 
 /** 提交按钮 */
@@ -262,7 +259,7 @@ const submitForm = () => {
         await addTree(form.value).finally(() => (buttonLoading.value = false));
       }
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
@@ -271,8 +268,8 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row: TreeVO) => {
   await modal.confirm('是否确认删除测试树编号为"' + row.id + '"的数据项？');
-  loading.value = true;
-  await delTree(row.id).finally(() => (loading.value = false));
+  setLoading(true);
+  await delTree(row.id).finally(() => setLoading(false));
   await getList();
   modal.msgSuccess('删除成功');
 };
diff --git a/src/views/monitor/logininfo/index.vue b/src/views/monitor/logininfo/index.vue
index 9b1b24d..bfd14e7 100644
--- a/src/views/monitor/logininfo/index.vue
+++ b/src/views/monitor/logininfo/index.vue
@@ -156,6 +156,10 @@
 <script setup name="LoginInfo" lang="ts">
 import { list, delLoginInfo, cleanLoginInfo, unlockLoginInfo } from '@/api/monitor/logininfo';
 import { LoginInfoQuery, LoginInfoVO } from '@/api/monitor/logininfo/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
@@ -165,12 +169,8 @@ const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
 const { sys_common_status } = toRefs<any>(useDict('sys_common_status'));
 
 const loginInfoList = ref<LoginInfoVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const selectName = ref<Array<string>>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 const dateRange = ref<any>(['', '']);
 const defaultSort = ref<any>({ prop: 'loginTime', order: 'descending' });
@@ -187,33 +187,41 @@ const queryParams = ref<LoginInfoQuery>({
   orderByColumn: defaultSort.value.prop,
   isAsc: defaultSort.value.order
 });
+const {
+  ids,
+  selectedRows,
+  single,
+  multiple,
+  handleSelectionChange: handleTableSelectionChange
+} = useTableSelection<LoginInfoVO>(item => item.infoId);
+const selectName = computed(() => selectedRows.value.map(item => item.userName));
 
 /** 查询登录日志列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await list(addDateRange(queryParams.value, dateRange.value));
-  loginInfoList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await list(addDateRange(queryParams.value, dateRange.value));
+    loginInfoList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  dateRange.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  loginInfoTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
-};
-/** 多选框选中数据 */
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    dateRange.value = ['', ''];
+  },
+  afterReset: () => {
+    loginInfoTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
+  }
+});
 const handleSelectionChange = (selection: LoginInfoVO[]) => {
-  ids.value = selection.map(item => item.infoId);
-  multiple.value = !selection.length;
-  single.value = selection.length != 1;
-  selectName.value = selection.map(item => item.userName);
+  handleTableSelectionChange(selection);
 };
 /** 排序触发事件 */
 const handleSortChange = (column: any) => {
diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue
index e839532..41ffa6f 100644
--- a/src/views/monitor/operlog/index.vue
+++ b/src/views/monitor/operlog/index.vue
@@ -208,6 +208,10 @@
 <script setup name="Operlog" lang="ts">
 import { list, delOperlog, cleanOperlog } from '@/api/monitor/operlog';
 import { OperLogForm, OperLogQuery, OperLogVO } from '@/api/monitor/operlog/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
@@ -219,10 +223,8 @@ const { sys_oper_type, sys_common_status, sys_device_type } = toRefs<any>(
 );
 
 const operlogList = ref<OperLogVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 const dateRange = ref<any>(['', '']);
 const defaultSort = ref<any>({ prop: 'operTime', order: 'descending' });
@@ -279,14 +281,15 @@ const data = reactive<PageData<OperLogForm, OperLogQuery>>({
 });
 
 const { queryParams, form } = toRefs(data);
+const { ids, multiple, handleSelectionChange: handleTableSelectionChange } = useTableSelection<OperLogVO>(item => item.operId);
 
 /** 查询登录日志 */
 const getList = async () => {
-  loading.value = true;
-  const res = await list(addDateRange(queryParams.value, dateRange.value));
-  operlogList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await list(addDateRange(queryParams.value, dateRange.value));
+    operlogList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 /** 操作日志类型字典翻译 */
 const typeFormat = (row: OperLogForm) => {
@@ -297,17 +300,19 @@ const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  dateRange.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  operLogTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
-};
-/** 多选框选中数据 */
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    dateRange.value = ['', ''];
+  },
+  afterReset: () => {
+    operLogTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
+  }
+});
 const handleSelectionChange = (selection: OperLogVO[]) => {
-  ids.value = selection.map(item => item.operId);
-  multiple.value = !selection.length;
+  handleTableSelectionChange(selection);
 };
 /** 排序触发事件 */
 const handleSortChange = (column: any) => {
diff --git a/src/views/system/client/index.vue b/src/views/system/client/index.vue
index b9c12f9..4d3123a 100644
--- a/src/views/system/client/index.vue
+++ b/src/views/system/client/index.vue
@@ -280,6 +280,11 @@
 <script setup name="Client" lang="ts">
 import { listClient, getClient, delClient, addClient, updateClient, changeStatus } from '@/api/system/client';
 import { ClientVO, ClientQuery, ClientForm } from '@/api/system/client/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
@@ -289,22 +294,15 @@ const { sys_grant_type } = toRefs<any>(useDict('sys_grant_type'));
 const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
 
 const clientList = ref<ClientVO[]>([]);
-const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { loading: buttonLoading, withLoading: withButtonLoading } = useLoading();
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<ClientVO>(item => item.id);
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const clientFormRef = ref<ElFormInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const initFormData: ClientForm = {
   id: undefined,
   clientId: undefined,
@@ -347,6 +345,19 @@ const data = reactive<PageData<ClientForm, ClientQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: clientFormRef,
+  initialFormData: initFormData
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 const getRuleList = (ruleList?: string[], ruleValue?: string) => {
   if (Array.isArray(ruleList) && ruleList.length) {
@@ -363,23 +374,17 @@ const getRuleList = (ruleList?: string[], ruleValue?: string) => {
 
 /** 查询客户端管理列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listClient(queryParams.value);
-  clientList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listClient(queryParams.value);
+    clientList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 
 /** 取消按钮 */
 const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  clientFormRef.value?.resetFields();
+  closeDialog();
+  resetForm();
 };
 
 /** 搜索按钮操作 */
@@ -388,48 +393,33 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: ClientVO[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加客户端管理';
+  openDialog('添加客户端管理');
 };
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: ClientVO) => {
-  reset();
+  resetForm();
   const _id = row?.id || ids.value[0];
   const res = await getClient(_id);
   Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改客户端管理';
+  showDialog('修改客户端管理');
 };
 
 /** 提交按钮 */
 const submitForm = () => {
   clientFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateClient(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addClient(form.value).finally(() => (buttonLoading.value = false));
-      }
+      await withButtonLoading(async () => {
+        if (form.value.id) {
+          await updateClient(form.value);
+        } else {
+          await addClient(form.value);
+        }
+      });
       modal.msgSuccess('修改成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
@@ -438,7 +428,7 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: ClientVO) => {
   const _ids = row?.id || ids.value;
-  await modal.confirm('是否确认删除客户端管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await modal.confirm('是否确认删除客户端管理编号为"' + _ids + '"的数据项？');
   await delClient(_ids);
   modal.msgSuccess('删除成功');
   await getList();
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index 5871389..07ef673 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -189,6 +189,11 @@
 <script setup name="Config" lang="ts">
 import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config';
 import { ConfigForm, ConfigQuery, ConfigVO } from '@/api/system/config/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
@@ -197,20 +202,14 @@ import { parseTime, addDateRange } from '@/utils/ruoyi';
 const { sys_yes_no } = toRefs<any>(useDict('sys_yes_no'));
 
 const configList = ref<ConfigVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<ConfigVO>(item => item.configId);
 const total = ref(0);
 const dateRange = ref<any>(['', '']);
 
 const queryFormRef = ref<ElFormInstance>();
 const configFormRef = ref<ElFormInstance>();
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
 const initFormData: ConfigForm = {
   configId: undefined,
   configName: '',
@@ -236,56 +235,52 @@ const data = reactive<PageData<ConfigForm, ConfigQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: configFormRef,
+  initialFormData: initFormData
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    dateRange.value = ['', ''];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 查询参数列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listConfig(addDateRange(queryParams.value, dateRange.value));
-  configList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listConfig(addDateRange(queryParams.value, dateRange.value));
+    configList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 /** 取消按钮 */
 const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  configFormRef.value?.resetFields();
+  closeDialog();
+  resetForm();
 };
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  dateRange.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: ConfigVO[]) => {
-  ids.value = selection.map(item => item.configId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加参数';
+  openDialog('添加参数');
 };
 /** 修改按钮操作 */
 const handleUpdate = async (row?: ConfigVO) => {
-  reset();
+  resetForm();
   const configId = row?.configId || ids.value[0];
   const res = await getConfig(configId);
   Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改参数';
+  showDialog('修改参数');
 };
 /** 提交按钮 */
 const submitForm = () => {
@@ -293,7 +288,7 @@ const submitForm = () => {
     if (valid) {
       form.value.configId ? await updateConfig(form.value) : await addConfig(form.value);
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 5148d0c..666de06 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -194,6 +194,10 @@ import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild }
 import { DeptForm, DeptQuery, DeptVO } from '@/api/system/dept/types';
 import { listUserByDeptId } from '@/api/system/user';
 import { UserVO } from '@/api/system/user/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { handleTree, parseTime } from '@/utils/ruoyi';
@@ -207,17 +211,12 @@ interface DeptOptionsType {
 const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
 
 const deptList = ref<DeptVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const deptOptions = ref<DeptOptionsType[]>([]);
 const isExpandAll = ref(true);
 const deptUserList = ref<UserVO[]>([]);
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const deptTableRef = ref<ElTableInstance>();
 const queryFormRef = ref<ElFormInstance>();
 const deptFormRef = ref<ElFormInstance>();
@@ -265,16 +264,17 @@ const initData: PageData<DeptForm, DeptQuery> = {
 const data = reactive<PageData<DeptForm, DeptQuery>>(initData);
 
 const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data);
+const { dialog, openDialog, closeDialog, setTitle } = useDialogState();
 
 /** 查询菜单列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listDept(queryParams.value);
-  const data = handleTree<DeptVO>(res.data, 'deptId');
-  if (data) {
-    deptList.value = data;
-  }
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listDept(queryParams.value);
+    const data = handleTree<DeptVO>(res.data, 'deptId');
+    if (data) {
+      deptList.value = data;
+    }
+  });
 };
 
 /** 查询当前部门的所有用户 */
@@ -288,7 +288,7 @@ async function getDeptAllUser(deptId: any) {
 /** 取消按钮 */
 const cancel = () => {
   reset();
-  dialog.visible = false;
+  closeDialog();
 };
 /** 表单重置 */
 const reset = () => {
@@ -300,11 +300,13 @@ const reset = () => {
 const handleQuery = () => {
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 展开/折叠操作 */
 const handleToggleExpandAll = () => {
@@ -329,8 +331,8 @@ const handleAdd = async (row?: DeptVO) => {
     if (row && row.deptId) {
       form.value.parentId = row?.deptId;
     }
-    dialog.visible = true;
-    dialog.title = '添加部门';
+    setTitle('添加部门');
+    openDialog();
   }
 };
 
@@ -354,18 +356,18 @@ const handleUpdate = async (row: DeptVO) => {
       deptOptions.value.push(noResultsOptions);
     }
   }
-  dialog.visible = true;
-  dialog.title = '修改部门';
+  setTitle('修改部门');
+  openDialog();
 };
 /** 提交按钮 */
 const submitForm = () => {
   deptFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      form.value.deptId ? await updateDept(form.value) : await addDept(form.value);
-      modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
-    }
+      if (valid) {
+        form.value.deptId ? await updateDept(form.value) : await addDept(form.value);
+        modal.msgSuccess('操作成功');
+        closeDialog();
+        await getList();
+      }
   });
 };
 /** 删除按钮操作 */
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 8599a53..26f4e3a 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -369,6 +369,10 @@
 import { addMenu, cascadeDelMenu, delMenu, getMenu, listMenu, updateMenu } from '@/api/system/menu';
 import { MenuForm, MenuQuery, MenuVO } from '@/api/system/menu/types';
 import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { handleTree } from '@/utils/ruoyi';
@@ -386,15 +390,10 @@ const { sys_show_hide, sys_normal_disable, sys_yes_no } = toRefs<any>(
 const menuList = ref<MenuVO[]>([]);
 const menuChildrenListMap = ref({});
 const menuExpandMap = ref({});
-const loading = ref(true);
-const showSearch = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const menuOptions = ref<MenuOptionsType[]>([]);
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const queryFormRef = ref<ElFormInstance>();
 const menuFormRef = ref<ElFormInstance>();
 const initFormData = {
@@ -428,6 +427,7 @@ const data = reactive<PageData<MenuForm, MenuQuery>>({
 const menuTableRef = ref<ElTableInstance>();
 
 const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data);
+const { dialog, openDialog, closeDialog, setTitle } = useDialogState();
 
 type MenuTagType = 'warning' | 'primary' | 'success' | 'danger';
 
@@ -486,31 +486,31 @@ const refreshAllExpandMenuData = () => {
 
 /** 查询菜单列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listMenu(queryParams.value);
+  await withLoading(async () => {
+    const res = await listMenu(queryParams.value);
 
-  const tempMap = {};
-  // 存储 父菜单:子菜单列表
-  for (const menu of res.data) {
-    const parentId = menu.parentId;
-    if (!tempMap[parentId]) {
-      tempMap[parentId] = [];
+    const tempMap = {};
+    // 存储 父菜单:子菜单列表
+    for (const menu of res.data) {
+      const parentId = menu.parentId;
+      if (!tempMap[parentId]) {
+        tempMap[parentId] = [];
+      }
+      tempMap[parentId].push(menu);
     }
-    tempMap[parentId].push(menu);
-  }
-  // 创建一个当前所有 menuId 的 Set，用于查找父菜单是否存在于当前数据中
-  const menuIdSet = new Set();
-  // 设置有没有子菜单
-  for (const menu of res.data) {
-    menu['hasChildren'] = tempMap[menu.menuId]?.length > 0;
-    menuIdSet.add(menu.menuId);
-  }
-  menuChildrenListMap.value = tempMap;
-  // 找出所有父ID不在当前菜单ID集合中的菜单项，作为新的顶层菜单
-  menuList.value = res.data.filter(menu => !menuIdSet.has(menu.parentId));
-  // 根据新数据重新加载子菜单数据
-  refreshAllExpandMenuData();
-  loading.value = false;
+    // 创建一个当前所有 menuId 的 Set，用于查找父菜单是否存在于当前数据中
+    const menuIdSet = new Set();
+    // 设置有没有子菜单
+    for (const menu of res.data) {
+      menu['hasChildren'] = tempMap[menu.menuId]?.length > 0;
+      menuIdSet.add(menu.menuId);
+    }
+    menuChildrenListMap.value = tempMap;
+    // 找出所有父ID不在当前菜单ID集合中的菜单项，作为新的顶层菜单
+    menuList.value = res.data.filter(menu => !menuIdSet.has(menu.parentId));
+    // 根据新数据重新加载子菜单数据
+    refreshAllExpandMenuData();
+  });
 };
 /** 查询菜单下拉树结构 */
 const getTreeselect = async () => {
@@ -523,7 +523,7 @@ const getTreeselect = async () => {
 /** 取消按钮 */
 const cancel = () => {
   reset();
-  dialog.visible = false;
+  closeDialog();
 };
 /** 表单重置 */
 const reset = () => {
@@ -535,18 +535,20 @@ const reset = () => {
 const handleQuery = () => {
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /** 新增按钮操作 */
 const handleAdd = (row?: MenuVO) => {
   reset();
   getTreeselect();
   row && row.menuId ? (form.value.parentId = row.menuId) : (form.value.parentId = 0);
-  dialog.visible = true;
-  dialog.title = '添加菜单';
+  setTitle('添加菜单');
+  openDialog();
 };
 /** 修改按钮操作 */
 const handleUpdate = async (row: MenuVO) => {
@@ -556,18 +558,18 @@ const handleUpdate = async (row: MenuVO) => {
     const { data } = await getMenu(row.menuId);
     form.value = data;
   }
-  dialog.visible = true;
-  dialog.title = '修改菜单';
+  setTitle('修改菜单');
+  openDialog();
 };
 /** 提交按钮 */
 const submitForm = () => {
   menuFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      form.value.menuId ? await updateMenu(form.value) : await addMenu(form.value);
-      modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
-    }
+      if (valid) {
+        form.value.menuId ? await updateMenu(form.value) : await addMenu(form.value);
+        modal.msgSuccess('操作成功');
+        closeDialog();
+        await getList();
+      }
   });
 };
 /** 删除按钮操作 */
@@ -581,22 +583,19 @@ const handleDelete = async (row: MenuVO) => {
 const deleteLoading = ref<boolean>(false);
 const menuTreeRef = ref<ElTreeInstance>();
 
-const deleteDialog = reactive<DialogOption>({
-  visible: false,
-  title: '级联删除菜单'
-});
+const { dialog: deleteDialog, openDialog: openDeleteDialog, closeDialog: closeDeleteDialog } = useDialogState('级联删除菜单');
 
 /** 级联删除按钮操作 */
 const handleCascadeDelete = () => {
   menuTreeRef.value?.setCheckedKeys([]);
   getTreeselect();
-  deleteDialog.visible = true;
+  openDeleteDialog();
 };
 
 /** 取消按钮 */
 const cancelCascade = () => {
   menuTreeRef.value?.setCheckedKeys([]);
-  deleteDialog.visible = false;
+  closeDeleteDialog();
 };
 
 /** 删除提交按钮 */
@@ -611,7 +610,7 @@ const submitDeleteForm = async () => {
   await cascadeDelMenu(menuIds).finally(() => (deleteLoading.value = false));
   await getList();
   modal.msgSuccess('删除成功');
-  deleteDialog.visible = false;
+  closeDeleteDialog();
 };
 
 onMounted(() => {
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 3ffaa5e..232b7fc 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -230,6 +230,12 @@
 import { useRoute, useRouter } from 'vue-router';
 import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice';
 import { NoticeForm, NoticeQuery, NoticeVO } from '@/api/system/notice/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { resolveOssContent } from '@/utils/ossContent';
@@ -241,23 +247,12 @@ const route = useRoute();
 const router = useRouter();
 
 const noticeList = ref<NoticeVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const noticeFormRef = ref<ElFormInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-const detailDialog = reactive({
-  visible: false
-});
 const routeDetailSyncing = ref(false);
 const emptyNoticeContent = '<p>暂无公告内容</p>';
 
@@ -289,49 +284,46 @@ const data = reactive<PageData<NoticeForm, NoticeQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<NoticeVO>(item => item.noticeId);
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: noticeFormRef,
+  initialFormData: initFormData
+});
+const { dialog: detailDialog, openDialog: openDetailDialog, closeDialog: closeDetailDialog } = useDialogState('公告详情');
 
 /** 查询公告列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listNotice(queryParams.value);
-  noticeList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listNotice(queryParams.value);
+    noticeList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 /** 取消按钮 */
 const cancel = () => {
-  dialog.visible = false;
+  closeDialog();
 };
 /** 对话框关闭后重置 */
 const handleDialogClosed = () => {
   reset();
 };
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  noticeFormRef.value?.resetFields();
-};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: NoticeVO[]) => {
-  ids.value = selection.map(item => item.noticeId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加公告';
+  openDialog('添加公告');
 };
 /**修改按钮操作 */
 const handleUpdate = async (row?: NoticeVO) => {
@@ -339,8 +331,7 @@ const handleUpdate = async (row?: NoticeVO) => {
   const noticeId = row?.noticeId || ids.value[0];
   const { data } = await getNotice(noticeId);
   Object.assign(form.value, data);
-  dialog.visible = true;
-  dialog.title = '修改公告';
+  showDialog('修改公告');
 };
 /** 详情按钮操作 */
 const handleDetail = async (row: NoticeVO) => {
@@ -351,7 +342,7 @@ const openDetail = async (noticeId: string | number) => {
   const { data } = await getNotice(noticeId);
   data.noticeContent = await resolveOssContent(data.noticeContent);
   detailForm.value = data;
-  detailDialog.visible = true;
+  openDetailDialog();
 };
 /** 详情弹窗关闭后移除路由参数 */
 const handleDetailDialogClosed = async () => {
@@ -374,7 +365,7 @@ const submitForm = () => {
     if (valid) {
       form.value.noticeId ? await updateNotice(form.value) : await addNotice(form.value);
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
diff --git a/src/views/system/oss/config.vue b/src/views/system/oss/config.vue
index 60210f8..1478bb7 100644
--- a/src/views/system/oss/config.vue
+++ b/src/views/system/oss/config.vue
@@ -212,27 +212,24 @@ import {
   changeOssConfigStatus
 } from '@/api/system/ossConfig';
 import { OssConfigForm, OssConfigQuery, OssConfigVO } from '@/api/system/ossConfig/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 
 const { sys_yes_no } = toRefs<any>(useDict('sys_yes_no'));
 const ossConfigList = ref<OssConfigVO[]>([]);
 const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, setLoading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const ossConfigFormRef = ref<ElFormInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 // 列显隐信息
 const columns = ref<FieldOption[]>([
   { key: 0, label: `主建`, visible: false },
@@ -314,48 +311,43 @@ const data = reactive<PageData<OssConfigForm, OssConfigQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
-
 const protocol = computed(() => (form.value.isHttps === 'Y' ? 'https://' : 'http://'));
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<OssConfigVO>(item => item.ossConfigId);
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: ossConfigFormRef,
+  initialFormData: initFormData
+});
 
 /** 查询对象存储配置列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listOssConfig(queryParams.value);
-  ossConfigList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listOssConfig(queryParams.value);
+    ossConfigList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 /** 取消按钮 */
 const cancel = () => {
-  dialog.visible = false;
   reset();
-};
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  ossConfigFormRef.value?.resetFields();
+  closeDialog();
 };
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-/** 选择条数  */
-const handleSelectionChange = (selection: OssConfigVO[]) => {
-  ids.value = selection.map(item => item.ossConfigId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加对象存储配置';
+  openDialog('添加对象存储配置');
 };
 /** 修改按钮操作 */
 const handleUpdate = async (row?: OssConfigVO) => {
@@ -363,8 +355,7 @@ const handleUpdate = async (row?: OssConfigVO) => {
   const ossConfigId = row?.ossConfigId || ids.value[0];
   const res = await getOssConfig(ossConfigId);
   Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改对象存储配置';
+  showDialog('修改对象存储配置');
 };
 /** 提交按钮 */
 const submitForm = () => {
@@ -377,7 +368,7 @@ const submitForm = () => {
         await addOssConfig(form.value).finally(() => (buttonLoading.value = false));
       }
       modal.msgSuccess('新增成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
@@ -398,8 +389,8 @@ const handleStatusChange = async (row: OssConfigVO) => {
 const handleDelete = async (row?: OssConfigVO) => {
   const ossConfigIds = row?.ossConfigId || ids.value;
   await modal.confirm('是否确认删除OSS配置编号为"' + ossConfigIds + '"的数据项?');
-  loading.value = true;
-  await delOssConfig(ossConfigIds).finally(() => (loading.value = false));
+  setLoading(true);
+  await delOssConfig(ossConfigIds).finally(() => setLoading(false));
   await getList();
   modal.msgSuccess('删除成功');
 };
diff --git a/src/views/system/oss/index.vue b/src/views/system/oss/index.vue
index 4af39f1..8b21a6b 100644
--- a/src/views/system/oss/index.vue
+++ b/src/views/system/oss/index.vue
@@ -189,6 +189,11 @@ import { getConfigKey, updateConfigByKey } from '@/api/system/config';
 import { listOss, delOss } from '@/api/system/oss';
 import { OssForm, OssQuery, OssVO } from '@/api/system/oss/types';
 import ImagePreview from '@/components/ImagePreview/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import download from '@/plugins/download';
 import modal from '@/plugins/modal';
 import { parseTime, addDateRange } from '@/utils/ruoyi';
@@ -198,21 +203,13 @@ const router = useRouter();
 const ossList = ref<OssVO[]>([]);
 const showTable = ref(true);
 const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, setLoading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 const type = ref(0);
 const previewListResource = ref(true);
 const dateRangeCreateTime = ref<any>(['', '']);
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 // 默认排序
 const defaultSort = ref({ prop: 'createTime', order: 'ascending' });
 
@@ -242,17 +239,23 @@ const data = reactive<PageData<OssForm, OssQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<OssVO>(item => item.ossId);
+const { dialog, resetForm: reset, openDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: ossFormRef,
+  initialFormData: initFormData
+});
 
 /** 查询OSS对象存储列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await getConfigKey('sys.oss.previewListResource');
-  previewListResource.value = res?.data === undefined ? true : res.data === 'true';
-  const response = await listOss(addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime'));
-  ossList.value = response.data?.rows;
-  total.value = response.data?.total;
-  loading.value = false;
-  showTable.value = true;
+  await withLoading(async () => {
+    const res = await getConfigKey('sys.oss.previewListResource');
+    previewListResource.value = res?.data === undefined ? true : res.data === 'true';
+    const response = await listOss(addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime'));
+    ossList.value = response.data?.rows;
+    total.value = response.data?.total;
+    showTable.value = true;
+  });
 };
 function checkFileSuffix(fileSuffix: string | string[]) {
   const arr = ['.png', '.jpg', '.jpeg'];
@@ -261,34 +264,28 @@ function checkFileSuffix(fileSuffix: string | string[]) {
 }
 /** 取消按钮 */
 function cancel() {
-  dialog.visible = false;
   reset();
-}
-/** 表单重置 */
-function reset() {
-  form.value = { ...initFormData };
-  ossFormRef.value?.resetFields();
+  closeDialog();
 }
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
 }
-/** 重置按钮操作 */
-function resetQuery() {
-  showTable.value = false;
-  dateRangeCreateTime.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  queryParams.value.orderByColumn = defaultSort.value.prop;
-  queryParams.value.isAsc = defaultSort.value.order;
-  handleQuery();
-}
-/** 选择条数  */
-function handleSelectionChange(selection: OssVO[]) {
-  ids.value = selection.map(item => item.ossId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    showTable.value = false;
+    dateRangeCreateTime.value = ['', ''];
+    queryParams.value.orderByColumn = defaultSort.value.prop;
+    queryParams.value.isAsc = defaultSort.value.order;
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /** 设置列的排序为我们自定义的排序 */
 const handleHeaderClass = ({ column }: any): any => {
   column.order = column.multiOrder;
@@ -340,21 +337,17 @@ const handleOssConfig = () => {
 };
 /** 文件按钮操作 */
 const handleFile = () => {
-  reset();
   type.value = 0;
-  dialog.visible = true;
-  dialog.title = '上传文件';
+  openDialog('上传文件');
 };
 /** 图片按钮操作 */
 const handleImage = () => {
-  reset();
   type.value = 1;
-  dialog.visible = true;
-  dialog.title = '上传图片';
+  openDialog('上传图片');
 };
 /** 提交按钮 */
 const submitForm = () => {
-  dialog.visible = false;
+  closeDialog();
   getList();
 };
 /** 下载按钮操作 */
@@ -375,8 +368,8 @@ const handlePreviewListResource = async (preview: boolean) => {
 const handleDelete = async (row?: OssVO) => {
   const ossIds = row?.ossId || ids.value;
   await modal.confirm('是否确认删除OSS对象存储编号为"' + ossIds + '"的数据项?');
-  loading.value = true;
-  await delOss(ossIds).finally(() => (loading.value = false));
+  setLoading(true);
+  await delOss(ossIds).finally(() => setLoading(false));
   await getList();
   modal.msgSuccess('删除成功');
 };
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index fc97b41..cec7f08 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -235,6 +235,12 @@ import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
 import { listPost, addPost, delPost, getPost, updatePost, deptTreeSelect } from '@/api/system/post';
 import { PostForm, PostQuery, PostVO } from '@/api/system/post/types';
 import TreePanel from '@/components/TreePanel/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
@@ -243,23 +249,16 @@ import { parseTime } from '@/utils/ruoyi';
 const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
 
 const postList = ref<PostVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<PostVO>(item => item.postId);
 const total = ref(0);
-const treeCollapsed = ref(false);
+const { treeCollapsed } = useTreeCollapsed();
 const deptOptions = ref<DeptTreeVO[]>([]);
 const treePanelRef = ref<InstanceType<typeof TreePanel>>();
 const postFormRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const initFormData: PostForm = {
   postId: undefined,
   deptId: undefined,
@@ -292,6 +291,24 @@ const data = reactive<PageData<PostForm, PostQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs<PageData<PostForm, PostQuery>>(data);
+const { dialog, resetForm, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: postFormRef,
+  initialFormData: initFormData
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    queryParams.value.deptId = undefined;
+    treePanelRef.value?.setCurrentKey(undefined);
+    queryParams.value.belongDeptId = undefined;
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 查询部门下拉树结构 */
 const getTreeSelect = async () => {
@@ -308,23 +325,17 @@ const handleNodeClick = (data: DeptVO) => {
 
 /** 查询岗位列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listPost(queryParams.value);
-  postList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listPost(queryParams.value);
+    postList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 
 /** 取消按钮 */
 const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  postFormRef.value?.resetFields();
+  closeDialog();
+  resetForm();
 };
 
 /** 搜索按钮操作 */
@@ -336,39 +347,18 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  queryParams.value.deptId = undefined;
-  treePanelRef.value?.setCurrentKey(undefined);
-  /** 清空左边部门树选中值 */
-  queryParams.value.belongDeptId = undefined;
-  handleQuery();
-};
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: PostVO[]) => {
-  ids.value = selection.map(item => item.postId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加岗位';
+  openDialog('添加岗位');
 };
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: PostVO) => {
-  reset();
+  resetForm();
   const postId = row?.postId || ids.value[0];
   const res = await getPost(postId);
   Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改岗位';
+  showDialog('修改岗位');
 };
 
 /** 提交按钮 */
@@ -377,7 +367,7 @@ const submitForm = () => {
     if (valid) {
       form.value.postId ? await updatePost(form.value) : await addPost(form.value);
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
diff --git a/src/views/system/role/authUser.vue b/src/views/system/role/authUser.vue
index 144c6e4..3776352 100644
--- a/src/views/system/role/authUser.vue
+++ b/src/views/system/role/authUser.vue
@@ -110,6 +110,10 @@ import { RouteLocationNormalized } from 'vue-router';
 import { allocatedUserList, authUserCancel, authUserCancelAll } from '@/api/system/role';
 import { UserQuery } from '@/api/system/user/types';
 import { UserVO } from '@/api/system/user/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import tab from '@/plugins/tab';
 import { useDict } from '@/utils/dict';
@@ -119,11 +123,9 @@ const route = useRoute();
 const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
 
 const userList = ref<UserVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
-const userIds = ref<Array<string | number>>([]);
 
 const queryFormRef = ref<ElFormInstance>();
 const selectRef = ref<InstanceType<typeof SelectUser>>();
@@ -135,14 +137,15 @@ const queryParams = reactive<UserQuery>({
   userName: undefined,
   phoneNumber: undefined
 });
+const { ids: userIds, multiple, handleSelectionChange } = useTableSelection<UserVO>(item => item.userId);
 
 /** 查询授权用户列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await allocatedUserList(queryParams);
-  userList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await allocatedUserList(queryParams);
+    userList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 // 返回按钮
 const handleClose = () => {
@@ -164,16 +167,12 @@ const handleQuery = () => {
   queryParams.pageNum = 1;
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-// 多选框选中数据
-const handleSelectionChange = (selection: UserVO[]) => {
-  userIds.value = selection.map(item => item.userId);
-  multiple.value = !selection.length;
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /** 打开授权用户表弹窗 */
 const openSelectUser = () => {
   selectRef.value?.show();
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 340d83f..526542e 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -336,6 +336,11 @@ import {
   deptTreeSelect
 } from '@/api/system/role';
 import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
@@ -360,10 +365,8 @@ interface RoleMenuPermissionMeta {
 }
 
 const roleList = ref<RoleVO[]>();
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 const dateRange = ref<any>(['', '']);
 const menuPermissionMeta = ref<RoleMenuPermissionMeta>({
@@ -784,21 +787,17 @@ const data = reactive<PageData<RoleForm, RoleQuery>>({
   }
 });
 const { form, queryParams, rules } = toRefs(data);
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
+const { ids, single, handleSelectionChange } = useTableSelection<RoleVO>(item => item.roleId);
+const { dialog, openDialog, closeDialog, setTitle } = useDialogState();
 
 /**
  * 查询角色列表
  */
 const getList = () => {
-  loading.value = true;
-  listRole(addDateRange(queryParams.value, dateRange.value)).then(res => {
+  withLoading(async () => {
+    const res = await listRole(addDateRange(queryParams.value, dateRange.value));
     roleList.value = res.data?.rows;
     total.value = res.data?.total;
-    loading.value = false;
   });
 };
 
@@ -810,12 +809,17 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置 */
-const resetQuery = () => {
-  dateRange.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    dateRange.value = ['', ''];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /**删除按钮操作 */
 const handleDelete = async (row?: RoleVO) => {
   const roleids = row?.roleId || ids.value;
@@ -835,12 +839,6 @@ const handleExport = () => {
     `role_${new Date().getTime()}.xlsx`
   );
 };
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: RoleVO[]) => {
-  ids.value = selection.map((item: RoleVO) => item.roleId);
-  single.value = selection.length != 1;
-};
-
 /** 角色状态修改 */
 const handleStatusChange = async (row: RoleVO) => {
   const text = row.status === '0' ? '启用' : '停用';
@@ -888,8 +886,8 @@ const reset = () => {
 /** 添加角色 */
 const handleAdd = () => {
   reset();
-  dialog.visible = true;
-  dialog.title = '添加角色';
+  setTitle('添加角色');
+  openDialog();
 };
 /** 修改角色 */
 const handleUpdate = async (row?: RoleVO) => {
@@ -901,8 +899,8 @@ const handleUpdate = async (row?: RoleVO) => {
   // 菜单分配已迁移到“分配权限”弹窗，这里预置已有菜单，避免基础信息保存时误清空菜单权限。
   const { checkedKeys } = await getRoleMenuTreeselect(roleId);
   form.value.menuIds = checkedKeys;
-  dialog.title = '修改角色';
-  dialog.visible = true;
+  setTitle('修改角色');
+  openDialog();
 };
 /** 根据角色ID查询菜单树结构 */
 const getRoleMenuTreeselect = (roleId: string | number) => {
@@ -963,19 +961,19 @@ const getMenuAllCheckedKeys = (): any => {
 /** 提交按钮 */
 const submitForm = () => {
   roleFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      syncFormMenuPermissionIds();
-      form.value.roleId ? await updateRole(form.value) : await addRole(form.value);
-      modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      getList();
-    }
+      if (valid) {
+        syncFormMenuPermissionIds();
+        form.value.roleId ? await updateRole(form.value) : await addRole(form.value);
+        modal.msgSuccess('操作成功');
+        closeDialog();
+        getList();
+      }
   });
 };
 /** 取消按钮 */
 const cancel = () => {
   reset();
-  dialog.visible = false;
+  closeDialog();
 };
 /** 选择角色权限范围触发 */
 const dataScopeSelectChange = (value: string) => {
@@ -991,7 +989,7 @@ const handleDataScope = async (row: RoleVO) => {
   const menuRes = await getRoleMenuTreeselect(row.roleId);
   const res = await getRoleDeptTreeSelect(row.roleId);
   openDataScope.value = true;
-  dialog.title = '分配权限';
+  setTitle('分配权限');
   await nextTick(() => {
     initPermissionState(menuRes.checkedKeys);
     syncFormMenuPermissionIds();
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ac3270e..bce4122 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -461,6 +461,12 @@ import { RoleVO } from '@/api/system/role/types';
 import api from '@/api/system/user';
 import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
 import TreePanel from '@/components/TreePanel/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
 import modal from '@/plugins/modal';
 import { useUserStore } from '@/store/modules/user';
 import { useDict } from '@/utils/dict';
@@ -473,14 +479,11 @@ import UserViewDrawer from './view.vue';
 const router = useRouter();
 const { sys_normal_disable, sys_user_gender } = toRefs<any>(useDict('sys_normal_disable', 'sys_user_gender'));
 const userList = ref<UserVO[]>();
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 const dateRange = ref<any>(['', '']);
-const treeCollapsed = ref(false);
+const { treeCollapsed } = useTreeCollapsed();
 const deptOptions = ref<DeptTreeVO[]>([]);
 const enabledDeptOptions = ref<DeptTreeVO[]>([]);
 const initPassword = ref<string>('');
@@ -519,11 +522,6 @@ const uploadRef = ref<ElUploadInstance>();
 const formDialogRef = ref<ElDialogInstance>();
 const userViewRef = ref<InstanceType<typeof UserViewDrawer>>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const initFormData: UserForm = {
   userId: undefined,
   deptId: undefined,
@@ -595,14 +593,16 @@ const initData: PageData<UserForm, UserQuery> = {
 const data = reactive<PageData<UserForm, UserQuery>>(initData);
 
 const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<UserVO>(item => item.userId);
+const { dialog, openDialog: openUserDialog, closeDialog: closeUserDialog, setTitle: setDialogTitle } = useDialogState();
 
 /** 查询用户列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await api.listUser(addDateRange(queryParams.value, dateRange.value));
-  loading.value = false;
-  userList.value = res.data?.rows;
-  total.value = res.data?.total;
+  await withLoading(async () => {
+    const res = await api.listUser(addDateRange(queryParams.value, dateRange.value));
+    userList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 
 /** 查询部门下拉树结构 */
@@ -636,15 +636,19 @@ const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  dateRange.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  queryParams.value.deptId = undefined;
-  treePanelRef.value?.setCurrentKey(undefined);
-  handleQuery();
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    dateRange.value = ['', ''];
+    queryParams.value.deptId = undefined;
+    treePanelRef.value?.setCurrentKey(undefined);
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: UserVO) => {
@@ -706,13 +710,6 @@ const handleResetPwd = async (row: UserVO) => {
   }
 };
 
-/** 选择条数  */
-const handleSelectionChange = (selection: UserVO[]) => {
-  ids.value = selection.map(item => item.userId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
 /** 详情按钮操作 */
 const handleViewDetail = (row: UserVO) => {
   userViewRef.value?.openDrawer(row.userId);
@@ -773,7 +770,7 @@ const reset = () => {
 };
 /** 取消按钮 */
 const cancel = () => {
-  dialog.visible = false;
+  closeUserDialog();
   reset();
 };
 
@@ -781,8 +778,8 @@ const cancel = () => {
 const handleAdd = async () => {
   reset();
   const { data } = await api.getUser();
-  dialog.visible = true;
-  dialog.title = '新增用户';
+  setDialogTitle('新增用户');
+  openUserDialog();
   postOptions.value = data.posts;
   roleOptions.value = data.roles;
   form.value.password = initPassword.value.toString();
@@ -793,8 +790,8 @@ const handleUpdate = async (row?: UserForm) => {
   reset();
   const userId = row?.userId || ids.value[0];
   const { data } = await api.getUser(userId);
-  dialog.visible = true;
-  dialog.title = '修改用户';
+  setDialogTitle('修改用户');
+  openUserDialog();
   Object.assign(form.value, data.user);
   postOptions.value = data.posts;
   roleOptions.value = Array.from(
@@ -821,7 +818,7 @@ const submitForm = () => {
         await api.addUser(form.value);
       }
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeUserDialog();
       await getList();
     }
   });
@@ -831,7 +828,7 @@ const submitForm = () => {
  * 关闭用户弹窗
  */
 const closeDialog = () => {
-  dialog.visible = false;
+  closeUserDialog();
   resetForm();
 };
 
diff --git a/src/views/tool/gen/index.vue b/src/views/tool/gen/index.vue
index 4c8a356..f8998bf 100644
--- a/src/views/tool/gen/index.vue
+++ b/src/views/tool/gen/index.vue
@@ -194,6 +194,11 @@
 import { useRoute } from 'vue-router';
 import { delTable, genCode, getDataNames, listTable, previewTable, synchDb } from '@/api/tool/gen';
 import { TableQuery, TableVO } from '@/api/tool/gen/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import download from '@/plugins/download';
 import modal from '@/plugins/modal';
 import router from '@/router';
@@ -203,11 +208,8 @@ import ImportTable from './importTable.vue';
 const route = useRoute();
 
 const tableList = ref<TableVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
 const total = ref(0);
 const dateRange = ref<any>(['', '']);
 const uniqueId = ref('');
@@ -231,10 +233,8 @@ const preview = ref<{
   data: {},
   activeName: 'domain.java'
 });
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: '代码预览'
-});
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<TableVO>(item => item.tableId);
+const { dialog, openDialog: openPreviewDialog } = useDialogState('代码预览');
 
 /** 查询多数据源名称 */
 const getDataNameList = async () => {
@@ -244,11 +244,11 @@ const getDataNameList = async () => {
 
 /** 查询表集合 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listTable(addDateRange(queryParams.value, dateRange.value));
-  tableList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listTable(addDateRange(queryParams.value, dateRange.value));
+    tableList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -280,29 +280,28 @@ const handleSynchDb = async (row: TableVO) => {
 const openImportTable = () => {
   importRef.value?.show(queryParams.value.dataName);
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  dateRange.value = ['', ''];
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    dateRange.value = ['', ''];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /** 预览按钮 */
 const handlePreview = async (row: TableVO) => {
   const res = await previewTable(row.tableId);
   preview.value.data = res.data;
-  dialog.visible = true;
+  openPreviewDialog();
   preview.value.activeName = 'domain.java';
 };
 /** 复制代码成功 */
 const copyTextSuccess = () => {
   modal.msgSuccess('复制成功');
 };
-// 多选框选中数据
-const handleSelectionChange = (selection: TableVO[]) => {
-  ids.value = selection.map(item => item.tableId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
 /** 修改按钮操作 */
 const handleEditTable = (row?: TableVO) => {
   const tableId = row?.tableId || ids.value[0];
diff --git a/src/views/workflow/category/index.vue b/src/views/workflow/category/index.vue
index 9797d4a..47dbcdd 100644
--- a/src/views/workflow/category/index.vue
+++ b/src/views/workflow/category/index.vue
@@ -123,6 +123,10 @@
 <script setup name="Category" lang="ts">
 import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category';
 import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
 import modal from '@/plugins/modal';
 import { handleTree } from '@/utils/ruoyi';
 
@@ -135,19 +139,14 @@ type CategoryOption = {
 const categoryList = ref<CategoryVO[]>([]);
 const categoryOptions = ref<CategoryOption[]>([]);
 const buttonLoading = ref(false);
-const showSearch = ref(true);
+const { showSearch } = useSearchToggle();
 const isExpandAll = ref(true);
-const loading = ref(false);
+const { loading, setLoading, withLoading } = useLoading();
 
 const queryFormRef = ref<ElFormInstance>();
 const categoryFormRef = ref<ElFormInstance>();
 const categoryTableRef = ref<ElTableInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const initFormData: CategoryForm = {
   categoryId: undefined,
   categoryName: '',
@@ -168,16 +167,21 @@ const data = reactive<PageData<CategoryForm, CategoryQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: categoryFormRef,
+  initialFormData: initFormData
+});
 
 /** 查询流程分类列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listCategory(queryParams.value);
-  const data = handleTree<CategoryVO>(res.data, 'categoryId', 'parentId');
-  if (data) {
-    categoryList.value = data;
-    loading.value = false;
-  }
+  await withLoading(async () => {
+    const res = await listCategory(queryParams.value);
+    const data = handleTree<CategoryVO>(res.data, 'categoryId', 'parentId');
+    if (data) {
+      categoryList.value = data;
+    }
+  });
 };
 
 /** 查询流程分类下拉树结构 */
@@ -194,13 +198,7 @@ const getTreeselect = async () => {
 // 取消按钮
 const cancel = () => {
   reset();
-  dialog.visible = false;
-};
-
-// 表单重置
-const reset = () => {
-  form.value = { ...initFormData };
-  categoryFormRef.value?.resetFields();
+  closeDialog();
 };
 
 /** 搜索按钮操作 */
@@ -208,23 +206,23 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 新增按钮操作 */
 const handleAdd = (row?: CategoryVO) => {
-  reset();
+  openDialog('添加流程分类');
   getTreeselect();
   if (row?.categoryId) {
     form.value.parentId = row.categoryId;
   } else {
     form.value.parentId = undefined;
   }
-  dialog.visible = true;
-  dialog.title = '添加流程分类';
 };
 
 /** 展开/折叠操作 */
@@ -250,8 +248,7 @@ const handleUpdate = async (row: CategoryVO) => {
   }
   const res = await getCategory(row.categoryId);
   Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改流程分类';
+  showDialog('修改流程分类');
 };
 
 /** 提交按钮 */
@@ -265,7 +262,7 @@ const submitForm = () => {
         await addCategory(form.value).finally(() => (buttonLoading.value = false));
       }
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeDialog();
       getList();
     }
   });
@@ -274,8 +271,8 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row: CategoryVO) => {
   await modal.confirm('是否确认删除"' + row.categoryName + '"的分类？');
-  loading.value = true;
-  await delCategory(row.categoryId).finally(() => (loading.value = false));
+  setLoading(true);
+  await delCategory(row.categoryId).finally(() => setLoading(false));
   await getList();
   modal.msgSuccess('删除成功');
 };
diff --git a/src/views/workflow/leave/index.vue b/src/views/workflow/leave/index.vue
index 305b00b..5276ffb 100644
--- a/src/views/workflow/leave/index.vue
+++ b/src/views/workflow/leave/index.vue
@@ -155,6 +155,10 @@ import { useRoute } from 'vue-router';
 import { cancelProcessApply } from '@/api/workflow/instance';
 import { delLeave, listLeave } from '@/api/workflow/leave';
 import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import tab from '@/plugins/tab';
 import router from '@/router';
@@ -165,11 +169,9 @@ import { parseTime } from '@/utils/ruoyi';
 const route = useRoute();
 const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
 const leaveList = ref<LeaveVO[]>([]);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, setLoading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<LeaveVO>(item => item.id);
 const total = ref(0);
 const options = [
   {
@@ -207,11 +209,11 @@ const { queryParams } = toRefs(data);
 
 /** 查询请假列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listLeave(queryParams.value);
-  leaveList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listLeave(queryParams.value);
+    leaveList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 
 /** 搜索按钮操作 */
@@ -220,18 +222,14 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: LeaveVO[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 新增按钮操作 */
 const handleAdd = () => {
@@ -271,7 +269,7 @@ const handleView = (row?: LeaveVO) => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: LeaveVO) => {
   const _ids = row?.id || ids.value;
-  await modal.confirm('是否确认删除请假编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await modal.confirm('是否确认删除请假编号为"' + _ids + '"的数据项？');
   await delLeave(_ids);
   modal.msgSuccess('删除成功');
   await getList();
@@ -291,12 +289,12 @@ const handleExport = () => {
 /** 撤销按钮操作 */
 const handleCancelProcessApply = async (id: string) => {
   await modal.confirm('是否确认撤销当前单据？');
-  loading.value = true;
+  setLoading(true);
   const data = {
     businessId: id,
     message: '申请人撤销流程！'
   };
-  await cancelProcessApply(data).finally(() => (loading.value = false));
+  await cancelProcessApply(data).finally(() => setLoading(false));
   await getList();
   modal.msgSuccess('撤销成功');
 };
diff --git a/src/views/workflow/processDefinition/index.vue b/src/views/workflow/processDefinition/index.vue
index 0e5921f..4ea8422 100644
--- a/src/views/workflow/processDefinition/index.vue
+++ b/src/views/workflow/processDefinition/index.vue
@@ -81,7 +81,7 @@
                   v-hasPermi="['workflow:definition:import']"
                   type="primary"
                   icon="UploadFilled"
-                  @click="uploadDialog.visible = true"
+                  @click="openUploadDialog()"
                 >
                   部署流程文件
                 </el-button>
@@ -315,7 +315,7 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="modelDialog.visible = false">取消</el-button>
+          <el-button @click="closeModelDialog()">取消</el-button>
           <el-button type="primary" @click="handleSubmit">保存</el-button>
         </div>
       </template>
@@ -342,6 +342,13 @@ import {
 } from '@/api/workflow/definition';
 import { FlowDefinitionQuery, FlowDefinitionVo, FlowDefinitionForm } from '@/api/workflow/definition/types';
 import TreePanel from '@/components/TreePanel/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
 import modal from '@/plugins/modal';
 import { download as requestDownload } from '@/utils/request';
 
@@ -351,31 +358,18 @@ const router = useRouter();
 const queryFormRef = ref<ElFormInstance>();
 const treePanelRef = ref<InstanceType<typeof TreePanel>>();
 
-const loading = ref(true);
-const ids = ref<Array<any>>([]);
-const flowCodeList = ref<Array<any>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const showSearch = ref(true);
+const { loading, setLoading, withLoading } = useLoading(true);
 const total = ref(0);
 const uploadDialogLoading = ref(false);
 const processDefinitionList = ref<FlowDefinitionVo[]>([]);
 const categoryOptions = ref<CategoryTreeVO[]>([]);
-const treeCollapsed = ref(false);
+const { treeCollapsed } = useTreeCollapsed();
+const { showSearch } = useSearchToggle();
 const autoPass = ref(false);
 /** 部署文件分类选择 */
 const selectCategory = ref();
 const defFormRef = ref<ElFormInstance>();
 const activeName = ref('0');
-const uploadDialog = reactive<DialogOption>({
-  visible: false,
-  title: '部署流程文件'
-});
-
-const modelDialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
 
 // 查询参数
 const queryParams = ref<FlowDefinitionQuery>({
@@ -413,6 +407,20 @@ const form = ref<FlowDefinitionForm>({
   formCustom: '',
   modelValue: ''
 });
+const {
+  ids,
+  selectedRows,
+  single,
+  multiple,
+  handleSelectionChange
+} = useTableSelection<FlowDefinitionVo, string>(item => String(item.id));
+const flowCodeList = computed(() => selectedRows.value.map(item => item.flowCode));
+const { dialog: uploadDialog, openDialog: openUploadDialog, closeDialog: closeUploadDialog } = useDialogState('部署流程文件');
+const { dialog: modelDialog, resetForm: reset, showDialog: showModelDialog, closeDialog: closeModelDialog } = useFormDialog({
+  form,
+  formRef: defFormRef,
+  initialFormData: initFormData
+});
 onMounted(() => {
   getPageList();
   getTreeselect();
@@ -445,21 +453,19 @@ const handleQuery = () => {
     getUnPublishList();
   }
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  queryParams.value.category = '';
-  queryParams.value.pageNum = 1;
-  queryParams.value.pageSize = 10;
-  handleQuery();
-};
-// 多选框选中数据
-const handleSelectionChange = (selection: any) => {
-  ids.value = selection.map((item: any) => item.id);
-  flowCodeList.value = selection.map((item: any) => item.flowCode);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.category = '';
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 //分页
 const getPageList = async () => {
   if (route.query.activeName) {
@@ -476,19 +482,19 @@ const getPageList = async () => {
 };
 //分页
 const getList = async () => {
-  loading.value = true;
-  const resp = await listDefinition(queryParams.value);
-  processDefinitionList.value = resp.data?.rows;
-  total.value = resp.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const resp = await listDefinition(queryParams.value);
+    processDefinitionList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
 };
 //查询未发布的流程定义列表
 const getUnPublishList = async () => {
-  loading.value = true;
-  const resp = await unPublishList(queryParams.value);
-  processDefinitionList.value = resp.data?.rows;
-  total.value = resp.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const resp = await unPublishList(queryParams.value);
+    processDefinitionList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
 };
 
 /** 删除按钮操作 */
@@ -496,8 +502,8 @@ const handleDelete = async (row?: FlowDefinitionVo) => {
   const id = row?.id || ids.value;
   const defList = processDefinitionList.value.filter(x => id.indexOf(x.id) != -1).map(x => x.flowCode);
   await modal.confirm('是否确认删除流程定义编码为【' + defList + '】的数据项？');
-  loading.value = true;
-  await deleteDefinition(id).finally(() => (loading.value = false));
+  setLoading(true);
+  await deleteDefinition(id).finally(() => setLoading(false));
   await handleQuery();
   modal.msgSuccess('删除成功');
 };
@@ -511,8 +517,8 @@ const handlePublish = async (row?: FlowDefinitionVo) => {
       row.version +
       '】的数据项？，发布后会将已发布流程定义改为失效！'
   );
-  loading.value = true;
-  await publish(row.id).finally(() => (loading.value = false));
+  setLoading(true);
+  await publish(row.id).finally(() => setLoading(false));
   activeName.value = '0';
   await handleQuery();
   modal.msgSuccess('发布成功');
@@ -526,7 +532,7 @@ const handleProcessDefState = async (row: FlowDefinitionVo, status: number | str
     msg = `启动后，此流程下的所有任务都允许往后流转，您确定激活【${row.flowName || row.flowCode}】吗？`;
   }
   try {
-    loading.value = true;
+    setLoading(true);
     await modal.confirm(msg);
     await active(row.id, !!status);
     await handleQuery();
@@ -535,7 +541,7 @@ const handleProcessDefState = async (row: FlowDefinitionVo, status: number | str
     row.activityStatus = status === 0 ? 1 : 0;
     console.error(error);
   } finally {
-    loading.value = false;
+    setLoading(false);
   }
 };
 
@@ -558,7 +564,7 @@ const handlerImportDefinition = (data: UploadRequestOptions): XMLHttpRequest =>
   formData.append('category', selectCategory.value);
   importDef(formData)
     .then(() => {
-      uploadDialog.visible = false;
+      closeUploadDialog();
       modal.msgSuccess('部署成功');
       activeName.value = '1';
       handleQuery();
@@ -597,11 +603,6 @@ const designView = async (row: FlowDefinitionVo) => {
     }
   });
 };
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  defFormRef.value?.resetFields();
-};
 /**
  * 新增
  */
@@ -612,8 +613,7 @@ const handleAdd = async () => {
   }
   form.value.modelValue = 'CLASSICS';
   form.value.formCustom = 'N';
-  modelDialog.visible = true;
-  modelDialog.title = '新增流程';
+  showModelDialog('新增流程');
 };
 /** 修改按钮操作 */
 const handleUpdate = async (row?: FlowDefinitionVo) => {
@@ -628,26 +628,25 @@ const handleUpdate = async (row?: FlowDefinitionVo) => {
       autoPass.value = extJson.autoPass;
     }
   }
-  modelDialog.visible = true;
-  modelDialog.title = '修改流程';
+  showModelDialog('修改流程');
 };
 
 const handleSubmit = async () => {
   defFormRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      loading.value = true;
+      setLoading(true);
       const ext: { autoPass: boolean } = {
         autoPass: autoPass.value
       };
       form.value.ext = JSON.stringify(ext);
       if (form.value.id) {
-        await edit(form.value).finally(() => (loading.value = false));
+        await edit(form.value).finally(() => setLoading(false));
       } else {
-        await add(form.value).finally(() => (loading.value = false));
+        await add(form.value).finally(() => setLoading(false));
         activeName.value = '1';
       }
       modal.msgSuccess('操作成功');
-      modelDialog.visible = false;
+      closeModelDialog();
       handleQuery();
     }
   });
@@ -659,7 +658,7 @@ const handleCopyDef = async (row: FlowDefinitionVo) => {
     cancelButtonText: '取消',
     type: 'warning'
   } as ElMessageBoxOptions).then(() => {
-    loading.value = true;
+    setLoading(true);
     copy(row.id)
       .then(resp => {
         if (resp.code === 200) {
@@ -668,7 +667,7 @@ const handleCopyDef = async (row: FlowDefinitionVo) => {
           handleQuery();
         }
       })
-      .finally(() => (loading.value = false));
+      .finally(() => setLoading(false));
   });
 };
 
diff --git a/src/views/workflow/processInstance/index.vue b/src/views/workflow/processInstance/index.vue
index c18fb71..884bb42 100644
--- a/src/views/workflow/processInstance/index.vue
+++ b/src/views/workflow/processInstance/index.vue
@@ -321,6 +321,12 @@ import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
 import TreePanel from '@/components/TreePanel/index.vue';
 import UserSelect from '@/components/UserSelect/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 
@@ -340,18 +346,9 @@ const form = ref<Record<string, any>>({
 });
 const ruleFormRef = ref<FormInstance>();
 const userSelectRef = ref<InstanceType<typeof UserSelect>>();
-// 遮罩层
-const loading = ref(true);
-// 选中数组
-const ids = ref<Array<any>>([]);
-// 选中实例id数组
-const instanceIds = ref<Array<number | string>>([]);
-// 非单个禁用
-const single = ref(true);
-// 非多个禁用
-const multiple = ref(true);
-// 显示搜索条件
-const showSearch = ref(true);
+const { loading, setLoading, withLoading } = useLoading(true);
+const { ids: instanceIds, single, multiple, handleSelectionChange } = useTableSelection<FlowInstanceVO>(item => item.id);
+const { showSearch } = useSearchToggle();
 // 总条数
 const total = ref(0);
 // 实例id
@@ -367,12 +364,9 @@ const processDefinitionName = ref();
 const processInstanceList = ref<FlowInstanceVO[]>([]);
 const processDefinitionHistoryList = ref<Array<any>>([]);
 const categoryOptions = ref<CategoryTreeVO[]>([]);
-const treeCollapsed = ref(false);
+const { treeCollapsed } = useTreeCollapsed();
 
-const processDefinitionDialog = reactive<DialogOption>({
-  visible: false,
-  title: '流程定义'
-});
+const { dialog: processDefinitionDialog } = useDialogState('流程定义');
 
 const tab = ref('running');
 // 作废原因
@@ -415,39 +409,36 @@ const handleQuery = () => {
     getProcessInstanceFinishList();
   }
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  queryParams.value.category = '';
-  queryParams.value.pageNum = 1;
-  queryParams.value.pageSize = 10;
-  queryParams.value.createByIds = [];
-  userSelectCount.value = 0;
-  handleQuery();
-};
-// 多选框选中数据
-const handleSelectionChange = (selection: FlowInstanceVO[]) => {
-  ids.value = selection.map((item: any) => item.id);
-  instanceIds.value = selection.map((item: FlowInstanceVO) => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.category = '';
+    queryParams.value.createByIds = [];
+    userSelectCount.value = 0;
+    selectUserIds.value = [];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 //分页
 const getProcessInstanceRunningList = () => {
-  loading.value = true;
-  pageByRunning(queryParams.value).then(resp => {
+  withLoading(async () => {
+    const resp = await pageByRunning(queryParams.value);
     processInstanceList.value = resp.data?.rows;
     total.value = resp.data?.total;
-    loading.value = false;
   });
 };
 //分页
 const getProcessInstanceFinishList = () => {
-  loading.value = true;
-  pageByFinish(queryParams.value).then(resp => {
+  withLoading(async () => {
+    const resp = await pageByFinish(queryParams.value);
     processInstanceList.value = resp.data?.rows;
     total.value = resp.data?.total;
-    loading.value = false;
   });
 };
 
@@ -455,12 +446,12 @@ const getProcessInstanceFinishList = () => {
 const handleDelete = async (row?: FlowInstanceVO) => {
   const instanceIdList = row?.id ?? instanceIds.value;
   await modal.confirm('是否确认删除？');
-  loading.value = true;
+  setLoading(true);
   if ('running' === tab.value) {
-    await deleteByInstanceIds(instanceIdList).finally(() => (loading.value = false));
+    await deleteByInstanceIds(instanceIdList).finally(() => setLoading(false));
     getProcessInstanceRunningList();
   } else {
-    await deleteHisByInstanceIds(instanceIdList).finally(() => (loading.value = false));
+    await deleteHisByInstanceIds(instanceIdList).finally(() => setLoading(false));
     getProcessInstanceFinishList();
   }
   modal.msgSuccess('删除成功');
@@ -477,13 +468,13 @@ const changeTab = async (pane: TabsPaneContext) => {
 /** 作废按钮操作 */
 const handleInvalid = async (row: FlowInstanceVO) => {
   await modal.confirm('是否确认作废？');
-  loading.value = true;
+  setLoading(true);
   if ('running' === tab.value) {
     const param = {
       id: row.id,
       comment: deleteReason.value
     };
-    await invalid(param).finally(() => (loading.value = false));
+    await invalid(param).finally(() => setLoading(false));
     getProcessInstanceRunningList();
     modal.msgSuccess('操作成功');
   }
diff --git a/src/views/workflow/spel/index.vue b/src/views/workflow/spel/index.vue
index 9b23d55..c38c078 100644
--- a/src/views/workflow/spel/index.vue
+++ b/src/views/workflow/spel/index.vue
@@ -210,28 +210,26 @@
 <script setup name="Spel" lang="ts">
 import { listSpel, getSpel, delSpel, addSpel, updateSpel } from '@/api/workflow/spel';
 import { SpelVO, SpelQuery, SpelForm } from '@/api/workflow/spel/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 
 const { sys_show_hide, sys_normal_disable } = toRefs<any>(useDict('sys_show_hide', 'sys_normal_disable'));
 
 const spelList = ref<SpelVO[]>([]);
-const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { loading: buttonLoading, withLoading: withButtonLoading } = useLoading();
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<SpelVO>(item => item.id);
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const spelFormRef = ref<ElFormInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
 const initFormData: SpelForm = {
   id: undefined,
   componentName: undefined,
@@ -259,26 +257,33 @@ const data = reactive<PageData<SpelForm, SpelQuery>>({
 });
 
 const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: spelFormRef,
+  initialFormData: initFormData
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 查询流程spel表达式定义列表 */
 const getList = async () => {
-  loading.value = true;
-  const res = await listSpel(queryParams.value);
-  spelList.value = res.data?.rows;
-  total.value = res.data?.total;
-  loading.value = false;
+  await withLoading(async () => {
+    const res = await listSpel(queryParams.value);
+    spelList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
 };
 
 /** 取消按钮 */
 const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  spelFormRef.value?.resetFields();
+  closeDialog();
+  resetForm();
 };
 
 /** 搜索按钮操作 */
@@ -287,48 +292,33 @@ const handleQuery = () => {
   getList();
 };
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: SpelVO[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加流程spel表达式定义';
+  openDialog('添加流程spel表达式定义');
 };
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: SpelVO) => {
-  reset();
+  resetForm();
   const _id = row?.id || ids.value[0];
   const res = await getSpel(_id);
   Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改流程spel表达式定义';
+  showDialog('修改流程spel表达式定义');
 };
 
 /** 提交按钮 */
 const submitForm = () => {
   spelFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateSpel(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addSpel(form.value).finally(() => (buttonLoading.value = false));
-      }
+      await withButtonLoading(async () => {
+        if (form.value.id) {
+          await updateSpel(form.value);
+        } else {
+          await addSpel(form.value);
+        }
+      });
       modal.msgSuccess('操作成功');
-      dialog.visible = false;
+      closeDialog();
       await getList();
     }
   });
@@ -337,9 +327,7 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: SpelVO) => {
   const _ids = row?.id || ids.value;
-  await modal
-    .confirm('是否确认删除流程spel表达式定义编号为"' + _ids + '"的数据项？')
-    .finally(() => (loading.value = false));
+  await modal.confirm('是否确认删除流程spel表达式定义编号为"' + _ids + '"的数据项？');
   await delSpel(_ids);
   modal.msgSuccess('删除成功');
   await getList();
diff --git a/src/views/workflow/task/allTaskWaiting.vue b/src/views/workflow/task/allTaskWaiting.vue
index 2069300..63eebcd 100644
--- a/src/views/workflow/task/allTaskWaiting.vue
+++ b/src/views/workflow/task/allTaskWaiting.vue
@@ -172,13 +172,17 @@
 import { TabsPaneContext } from 'element-plus';
 import { UserVO } from '@/api/system/user/types';
 import { pageByAllTaskWait, pageByAllTaskFinish, updateAssignee, urgeTask } from '@/api/workflow/task';
-import { TaskQuery } from '@/api/workflow/task/types';
+import { TaskQuery, FlowTaskVO } from '@/api/workflow/task/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
 import messageType from '@/components/Process/MessageType.vue';
 import processMeddle from '@/components/Process/processMeddle.vue';
 import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
 import UserSelect from '@/components/UserSelect/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 
@@ -193,17 +197,10 @@ const messageTypeRef = ref<InstanceType<typeof messageType>>();
 const queryFormRef = ref<ElFormInstance>();
 const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
 const { wf_task_status } = toRefs<any>(useDict('wf_task_status'));
-// 遮罩层
-const loading = ref(true);
-// 选中数组
-const ids = ref<Array<any>>([]);
-// 非单个禁用
-const single = ref(true);
-// 非多个禁用
-const multiple = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<FlowTaskVO, string>(item => String(item.id));
 const userMultiple = ref(false);
-// 显示搜索条件
-const showSearch = ref(true);
+const { showSearch } = useSearchToggle();
 // 总条数
 const total = ref(0);
 // 模型定义表格数据
@@ -223,6 +220,21 @@ const queryParams = ref<TaskQuery>({
   createByIds: []
 });
 const tab = ref('waiting');
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.createByIds = [];
+    userSelectCount.value = 0;
+    selectUserIds.value = [];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -232,22 +244,6 @@ const handleQuery = () => {
     getFinishList();
   }
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  queryParams.value.pageSize = 10;
-  queryParams.value.createByIds = [];
-  userSelectCount.value = 0;
-  selectUserIds.value = [];
-  handleQuery();
-};
-// 多选框选中数据
-const handleSelectionChange = (selection: any) => {
-  ids.value = selection.map((item: any) => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
 const changeTab = async (data: TabsPaneContext) => {
   taskList.value = [];
   queryParams.value.pageNum = 1;
@@ -259,19 +255,17 @@ const changeTab = async (data: TabsPaneContext) => {
 };
 //分页
 const getWaitingList = () => {
-  loading.value = true;
-  pageByAllTaskWait(queryParams.value).then(resp => {
+  withLoading(async () => {
+    const resp = await pageByAllTaskWait(queryParams.value);
     taskList.value = resp.data?.rows;
     total.value = resp.data?.total;
-    loading.value = false;
   });
 };
 const getFinishList = () => {
-  loading.value = true;
-  pageByAllTaskFinish(queryParams.value).then(resp => {
+  withLoading(async () => {
+    const resp = await pageByAllTaskFinish(queryParams.value);
     taskList.value = resp.data?.rows;
     total.value = resp.data?.total;
-    loading.value = false;
   });
 };
 // 打开催办
@@ -296,7 +290,6 @@ const handleUserTask = async data => {
 const submitCallback = async data => {
   if (data && data.length > 0) {
     await modal.confirm('是否确认提交？');
-    loading.value = true;
     await updateAssignee(ids.value, data[0].userId);
     handleQuery();
     modal.msgSuccess('操作成功');
diff --git a/src/views/workflow/task/myDocument.vue b/src/views/workflow/task/myDocument.vue
index f307938..3760c80 100644
--- a/src/views/workflow/task/myDocument.vue
+++ b/src/views/workflow/task/myDocument.vue
@@ -156,30 +156,27 @@ import { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types
 import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
 import TreePanel from '@/components/TreePanel/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 
 const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
 const queryFormRef = ref<ElFormInstance>();
 
-// 遮罩层
-const loading = ref(true);
-// 选中数组
-const businessIds = ref<Array<number | string>>([]);
-const instanceIds = ref<Array<number | string>>([]);
-// 非单个禁用
-const single = ref(true);
-// 非多个禁用
-const multiple = ref(true);
-// 显示搜索条件
-const showSearch = ref(true);
+const { loading, setLoading, withLoading } = useLoading(true);
+const { ids: instanceIds, single, multiple, handleSelectionChange } = useTableSelection<FlowInstanceVO>(item => item.id);
+const { showSearch } = useSearchToggle();
 // 总条数
 const total = ref(0);
 // 模型定义表格数据
 const processInstanceList = ref<FlowInstanceVO[]>([]);
 
 const categoryOptions = ref<CategoryTreeVO[]>([]);
-const treeCollapsed = ref(false);
+const { treeCollapsed } = useTreeCollapsed();
 
 const tab = ref('running');
 // 查询参数
@@ -213,28 +210,25 @@ const getTreeselect = async () => {
 const handleQuery = () => {
   getList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  queryParams.value.category = '';
-  queryParams.value.pageNum = 1;
-  queryParams.value.pageSize = 10;
-  handleQuery();
-};
-// 多选框选中数据
-const handleSelectionChange = (selection: FlowInstanceVO[]) => {
-  businessIds.value = selection.map((item: any) => item.businessId);
-  instanceIds.value = selection.map((item: FlowInstanceVO) => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.category = '';
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 //分页
 const getList = () => {
-  loading.value = true;
-  pageByCurrent(queryParams.value).then(resp => {
+  withLoading(async () => {
+    const resp = await pageByCurrent(queryParams.value);
     processInstanceList.value = resp.data?.rows;
     total.value = resp.data?.total;
-    loading.value = false;
   });
 };
 
@@ -242,9 +236,9 @@ const getList = () => {
 const handleDelete = async (row: FlowInstanceVO) => {
   const instanceIdList = row.id || instanceIds.value;
   await modal.confirm('是否确认删除？');
-  loading.value = true;
+  setLoading(true);
   if ('running' === tab.value) {
-    await deleteByInstanceIds(instanceIdList).finally(() => (loading.value = false));
+    await deleteByInstanceIds(instanceIdList).finally(() => setLoading(false));
     getList();
   }
   modal.msgSuccess('删除成功');
@@ -253,13 +247,13 @@ const handleDelete = async (row: FlowInstanceVO) => {
 /** 撤销按钮操作 */
 const handleCancelProcessApply = async (businessId: string) => {
   await modal.confirm('是否确认撤销当前单据？');
-  loading.value = true;
+  setLoading(true);
   if ('running' === tab.value) {
     const data = {
       businessId: businessId,
       message: '申请人撤销流程！'
     };
-    await cancelProcessApply(data).finally(() => (loading.value = false));
+    await cancelProcessApply(data).finally(() => setLoading(false));
     getList();
   }
   modal.msgSuccess('撤销成功');
diff --git a/src/views/workflow/task/taskCopyList.vue b/src/views/workflow/task/taskCopyList.vue
index 7f8ba2c..de023c1 100644
--- a/src/views/workflow/task/taskCopyList.vue
+++ b/src/views/workflow/task/taskCopyList.vue
@@ -97,20 +97,17 @@ import { pageByTaskCopy } from '@/api/workflow/task';
 import { TaskQuery } from '@/api/workflow/task/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import { useDict } from '@/utils/dict';
 
 const queryFormRef = ref<ElFormInstance>();
 const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
-// 遮罩层
-const loading = ref(true);
-// 选中数组
-const ids = ref<Array<any>>([]);
-// 非单个禁用
-const single = ref(true);
-// 非多个禁用
-const multiple = ref(true);
-// 显示搜索条件
-const showSearch = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<any>(item => item.id);
+const { showSearch } = useSearchToggle();
 // 总条数
 const total = ref(0);
 // 模型定义表格数据
@@ -123,30 +120,26 @@ const queryParams = ref<TaskQuery>({
   flowName: undefined,
   flowCode: undefined
 });
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /** 搜索按钮操作 */
 const handleQuery = () => {
   getTaskCopyList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  queryParams.value.pageSize = 10;
-  handleQuery();
-};
-// 多选框选中数据
-const handleSelectionChange = (selection: any) => {
-  ids.value = selection.map((item: any) => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
 //分页
 const getTaskCopyList = () => {
-  loading.value = true;
-  pageByTaskCopy(queryParams.value).then(resp => {
+  withLoading(async () => {
+    const resp = await pageByTaskCopy(queryParams.value);
     taskList.value = resp.data?.rows;
     total.value = resp.data?.total;
-    loading.value = false;
   });
 };
 
diff --git a/src/views/workflow/task/taskFinish.vue b/src/views/workflow/task/taskFinish.vue
index 2eb6fbe..2924c1a 100644
--- a/src/views/workflow/task/taskFinish.vue
+++ b/src/views/workflow/task/taskFinish.vue
@@ -135,6 +135,10 @@ import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
 import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
 import UserSelect from '@/components/UserSelect/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import { useDict } from '@/utils/dict';
 
 const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
@@ -143,16 +147,9 @@ const { wf_task_status } = toRefs<any>(useDict('wf_task_status'));
 const queryFormRef = ref<ElFormInstance>();
 
 const userSelectRef = ref<InstanceType<typeof UserSelect>>();
-// 遮罩层
-const loading = ref(true);
-// 选中数组
-const ids = ref<Array<any>>([]);
-// 非单个禁用
-const single = ref(true);
-// 非多个禁用
-const multiple = ref(true);
-// 显示搜索条件
-const showSearch = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<any>(item => item.id);
+const { showSearch } = useSearchToggle();
 // 总条数
 const total = ref(0);
 // 模型定义表格数据
@@ -170,32 +167,30 @@ const queryParams = ref<TaskQuery>({
 const selectUserIds = ref<Array<number | string>>([]);
 //申请人选择数量
 const userSelectCount = ref(0);
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.createByIds = [];
+    userSelectCount.value = 0;
+    selectUserIds.value = [];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 /** 搜索按钮操作 */
 const handleQuery = () => {
   getFinishList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  queryParams.value.pageSize = 10;
-  queryParams.value.createByIds = [];
-  userSelectCount.value = 0;
-  selectUserIds.value = [];
-  handleQuery();
-};
-// 多选框选中数据
-const handleSelectionChange = (selection: any) => {
-  ids.value = selection.map((item: any) => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
 const getFinishList = () => {
-  loading.value = true;
-  pageByTaskFinish(queryParams.value).then(resp => {
+  withLoading(async () => {
+    const resp = await pageByTaskFinish(queryParams.value);
     taskList.value = resp.data?.rows;
     total.value = resp.data?.total;
-    loading.value = false;
   });
 };
 /** 查看按钮操作 */
diff --git a/src/views/workflow/task/taskWaiting.vue b/src/views/workflow/task/taskWaiting.vue
index 0429bc4..5ca7bef 100644
--- a/src/views/workflow/task/taskWaiting.vue
+++ b/src/views/workflow/task/taskWaiting.vue
@@ -116,6 +116,10 @@ import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
 import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
 import UserSelect from '@/components/UserSelect/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
 import { useDict } from '@/utils/dict';
 
 const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
@@ -123,16 +127,9 @@ const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
 const userSelectRef = ref<InstanceType<typeof UserSelect>>();
 //提交组件
 const queryFormRef = ref<ElFormInstance>();
-// 遮罩层
-const loading = ref(true);
-// 选中数组
-const ids = ref<Array<any>>([]);
-// 非单个禁用
-const single = ref(true);
-// 非多个禁用
-const multiple = ref(true);
-// 显示搜索条件
-const showSearch = ref(true);
+const { loading, withLoading } = useLoading(true);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<any>(item => item.id);
+const { showSearch } = useSearchToggle();
 // 总条数
 const total = ref(0);
 // 模型定义表格数据
@@ -151,6 +148,21 @@ const queryParams = ref<TaskQuery>({
   flowCode: undefined,
   createByIds: []
 });
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.createByIds = [];
+    userSelectCount.value = 0;
+    selectUserIds.value = [];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
 onMounted(() => {
   getWaitingList();
 });
@@ -158,29 +170,12 @@ onMounted(() => {
 const handleQuery = () => {
   getWaitingList();
 };
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  queryParams.value.pageNum = 1;
-  queryParams.value.pageSize = 10;
-  queryParams.value.createByIds = [];
-  userSelectCount.value = 0;
-  selectUserIds.value = [];
-  handleQuery();
-};
-// 多选框选中数据
-const handleSelectionChange = (selection: any) => {
-  ids.value = selection.map((item: any) => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
 //分页
 const getWaitingList = () => {
-  loading.value = true;
-  pageByTaskWait(queryParams.value).then(resp => {
+  withLoading(async () => {
+    const resp = await pageByTaskWait(queryParams.value);
     taskList.value = resp.data?.rows;
     total.value = resp.data?.total;
-    loading.value = false;
   });
 };
 //办理