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

2026-04-17 15:09:17 +08:00
parent 2ce3786ee0
commit 6a3394bdc5
33 changed files with 1062 additions and 968 deletions
--- 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();
--- 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();
    }
  });
--- 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();
+      }
  });
 };
 /** 删除按钮操作 */
--- 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(() => {
--- 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();
    }
  });
--- 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('删除成功');
 };
--- 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('删除成功');
 };
--- 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();
    }
  });
--- 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();
--- 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();
--- 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();
 };