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

src/components/RoleSelect/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <el-dialog
-      v-model="roleDialog.visible.value"
+      v-model="dialog.visible"
-      :title="roleDialog.title.value"
+      :title="dialog.title"
       width="80%"
       append-to-body
       class="role-select-dialog"
@@ -108,9 +108,10 @@ import { VxeTableInstance } from 'vxe-table';
 import animateConfig from '@/animate';
 import api from '@/api/system/role';
 import { RoleVO, RoleQuery } from '@/api/system/role/types';
-import useDialog from '@/hooks/useDialog';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 import { useDict } from '@/utils/dict';
-import { parseTime, addDateRange } from '@/utils/ruoyi';
+import { parseTime } from '@/utils/ruoyi';
 
 interface PropType {
   modelValue?: RoleVO[] | RoleVO | undefined;
@@ -130,12 +131,10 @@ const roleList = ref<RoleVO[]>();
 const loading = ref(true);
 const showSearch = ref(true);
 const total = ref(0);
-const dateRange = ref<any>(['', '']);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
 const selectRoleList = ref<RoleVO[]>([]);
 
-const roleDialog = useDialog({
+const { dialog, openDialog, closeDialog } = useDialogState('角色选择');
-  title: '角色选择'
-});
 
 const queryFormRef = ref<ElFormInstance>();
 const tableRef = ref<VxeTableInstance<RoleVO>>();
@@ -153,7 +152,7 @@ const defaultSelectRoleIds = computed(() => computedIds(prop.data));
 const confirm = () => {
   emit('update:modelValue', selectRoleList.value);
   emit('confirmCallBack', selectRoleList.value);
-  roleDialog.closeDialog();
+  closeDialog();
 };
 
 const computedIds = data => {
@@ -174,7 +173,7 @@ const computedIds = data => {
  */
 const getList = () => {
   loading.value = true;
-  api.listRole(addDateRange(queryParams.value, dateRange.value)).then(res => {
+  api.listRole(applyDateRange(queryParams.value)).then(res => {
     roleList.value = res.data?.rows;
     total.value = res.data?.total;
     loading.value = false;
@@ -197,7 +196,7 @@ const handleQuery = () => {
 
 /** 重置 */
 const resetQuery = () => {
-  dateRange.value = ['', ''];
+  resetDateRange();
   queryFormRef.value?.resetFields();
   handleQuery();
 };
@@ -255,10 +254,10 @@ const initSelectRole = async () => {
   }
 };
 const close = () => {
-  roleDialog.closeDialog();
+  closeDialog();
 };
 watch(
-  () => roleDialog.visible.value,
+  () => dialog.visible,
   (newValue: boolean) => {
     if (newValue) {
       initSelectRole();
@@ -275,8 +274,8 @@ onMounted(() => {
 });
 
 defineExpose({
-  open: roleDialog.openDialog,
+  open: openDialog,
-  close: roleDialog.closeDialog
+  close: closeDialog
 });
 </script>
 

src/components/UserSelect/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <el-dialog
-      v-model="userDialog.visible.value"
+      v-model="dialog.visible"
-      :title="userDialog.title.value"
+      :title="dialog.title"
       width="80%"
       append-to-body
       class="user-select-dialog"
@@ -172,9 +172,9 @@ import animateConfig from '@/animate';
 import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
 import api from '@/api/system/user';
 import { UserQuery, UserVO } from '@/api/system/user/types';
-import useDialog from '@/hooks/useDialog';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 import { useDict } from '@/utils/dict';
-import { addDateRange } from '@/utils/ruoyi';
 
 interface PropType {
   modelValue?: UserVO[] | UserVO | undefined;
@@ -196,7 +196,7 @@ const userList = ref<UserVO[]>();
 const loading = ref(true);
 const showSearch = ref(true);
 const total = ref(0);
-const dateRange = ref<any>(['', '']);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
 const deptName = ref('');
 const treeCollapsed = ref(false);
 const deptOptions = ref<DeptTreeVO[]>([]);
@@ -206,9 +206,7 @@ const deptTreeRef = ref<ElTreeInstance>();
 const queryFormRef = ref<ElFormInstance>();
 const tableRef = ref<VxeTableInstance<UserVO>>();
 
-const userDialog = useDialog({
+const { dialog, openDialog, closeDialog } = useDialogState('用户选择');
-  title: '用户选择'
-});
 
 const queryParams = ref<UserQuery>({
   pageNum: 1,
@@ -236,7 +234,7 @@ watchEffect(
 const confirm = () => {
   emit('update:modelValue', selectUserList.value);
   emit('confirmCallBack', selectUserList.value);
-  userDialog.closeDialog();
+  closeDialog();
 };
 
 const computedIds = data => {
@@ -271,7 +269,7 @@ const getTreeSelect = async () => {
 const getList = async () => {
   loading.value = true;
   queryParams.value.userIds = prop.userIds;
-  const res = await api.listUser(addDateRange(queryParams.value, dateRange.value));
+  const res = await api.listUser(applyDateRange(queryParams.value));
   loading.value = false;
   userList.value = res.data?.rows;
   total.value = res.data?.total;
@@ -298,7 +296,7 @@ const handleQuery = () => {
 };
 /** 重置按钮操作 */
 const resetQuery = (refresh = true) => {
-  dateRange.value = ['', ''];
+  resetDateRange();
   queryFormRef.value?.resetFields();
   queryParams.value.pageNum = 1;
   queryParams.value.deptId = undefined;
@@ -357,11 +355,11 @@ const initSelectUser = async () => {
   }
 };
 const close = () => {
-  userDialog.closeDialog();
+  closeDialog();
 };
 
 watch(
-  () => userDialog.visible.value,
+  () => dialog.visible,
   async (newValue: boolean) => {
     if (newValue) {
       await getTreeSelect(); // 初始化部门数据
@@ -377,8 +375,8 @@ watch(
 );
 
 defineExpose({
-  open: userDialog.openDialog,
+  open: openDialog,
-  close: userDialog.closeDialog
+  close: closeDialog
 });
 </script>
 

src/hooks/form/useDateRangeQuery.ts

@@ -0,0 +1,19 @@
+import { addDateRange } from '@/utils/ruoyi';
+
+export function useDateRangeQuery(propName?: string) {
+  const dateRange = ref<any>(['', '']);
+
+  const applyDateRange = <T extends Record<string, any>>(queryParams: T) => {
+    return addDateRange(queryParams, dateRange.value, propName);
+  };
+
+  const resetDateRange = () => {
+    dateRange.value = ['', ''];
+  };
+
+  return {
+    dateRange,
+    applyDateRange,
+    resetDateRange
+  };
+}

src/hooks/table/useTableSortQuery.ts

@@ -0,0 +1,44 @@
+import type { Ref } from 'vue';
+
+type TableSortOrder = 'ascending' | 'descending' | null;
+
+interface TableSortState {
+  prop: string;
+  order: TableSortOrder;
+}
+
+interface UseTableSortQueryOptions<T extends Record<string, any>> {
+  queryParams: Ref<T>;
+  defaultSort: TableSortState;
+  tableRef?: Ref<ElTableInstance | undefined>;
+  onSortChange?: () => void;
+}
+
+export function useTableSortQuery<T extends { orderByColumn?: string; isAsc?: string | null }>(
+  options: UseTableSortQueryOptions<T>
+) {
+  const { queryParams, defaultSort: initialSort, tableRef, onSortChange } = options;
+  const defaultSort = ref<TableSortState>({ ...initialSort });
+
+  const handleSortChange = (column: { prop: string; order: TableSortOrder }) => {
+    queryParams.value.orderByColumn = column.prop as T['orderByColumn'];
+    queryParams.value.isAsc = column.order as T['isAsc'];
+    onSortChange?.();
+  };
+
+  const resetSort = () => {
+    queryParams.value.orderByColumn = defaultSort.value.prop as T['orderByColumn'];
+    queryParams.value.isAsc = defaultSort.value.order as T['isAsc'];
+    if (tableRef?.value && defaultSort.value.order) {
+      tableRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
+      return;
+    }
+    onSortChange?.();
+  };
+
+  return {
+    defaultSort,
+    handleSortChange,
+    resetSort
+  };
+}

src/hooks/tree/useTreeTableExpand.ts

@@ -0,0 +1,39 @@
+import type { Ref } from 'vue';
+
+interface UseTreeTableExpandOptions<T> {
+  tableRef: Ref<ElTableInstance | undefined>;
+  data: Ref<T[]>;
+  initialExpandAll?: boolean;
+  getChildren?: (row: T) => T[] | undefined;
+}
+
+export function useTreeTableExpand<T extends Record<string, any>>(options: UseTreeTableExpandOptions<T>) {
+  const { tableRef, data, initialExpandAll = true, getChildren = row => row.children as T[] | undefined } = options;
+
+  const isExpandAll = ref(initialExpandAll);
+
+  const toggleRows = (rows: T[], expanded: boolean) => {
+    rows.forEach(row => {
+      tableRef.value?.toggleRowExpansion(row, expanded);
+      const children = getChildren(row);
+      if (children?.length) {
+        toggleRows(children, expanded);
+      }
+    });
+  };
+
+  const setExpandAll = (expanded: boolean) => {
+    isExpandAll.value = expanded;
+    toggleRows(data.value, expanded);
+  };
+
+  const handleToggleExpandAll = () => {
+    setExpandAll(!isExpandAll.value);
+  };
+
+  return {
+    isExpandAll,
+    setExpandAll,
+    handleToggleExpandAll
+  };
+}

src/hooks/useDialog.ts

@@ -1,31 +0,0 @@
-import type { Ref } from 'vue';
-
-interface Options {
-  title?: string;
-}
-interface Return {
-  title: Ref<string>;
-  visible: Ref<boolean>;
-  openDialog: () => void;
-  closeDialog: () => void;
-}
-export default (ops?: Options): Return => {
-  const visible = ref(false);
-  const title = ref(ops?.title || '');
-
-  const openDialog = () => {
-    visible.value = true;
-  };
-
-  const closeDialog = () => {
-    visible.value = false;
-  };
-
-  return {
-    title,
-    visible,
-
-    openDialog,
-    closeDialog
-  };
-};

src/views/demo/tree/index.vue

@@ -120,6 +120,7 @@ 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 { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
 import modal from '@/plugins/modal';
 import { handleTree } from '@/utils/ruoyi';
 
@@ -133,12 +134,15 @@ const treeList = ref<TreeVO[]>([]);
 const treeOptions = ref<TreeOption[]>([]);
 const buttonLoading = ref(false);
 const { showSearch } = useSearchToggle();
-const isExpandAll = ref(true);
 const { loading, setLoading, withLoading } = useLoading();
 
 const queryFormRef = ref<ElFormInstance>();
 const treeFormRef = ref<ElFormInstance>();
 const treeTableRef = ref<ElTableInstance>();
+const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<TreeVO>({
+  tableRef: treeTableRef,
+  data: treeList
+});
 
 const initFormData: TreeForm = {
   id: undefined,
@@ -222,20 +226,6 @@ const handleAdd = (row?: TreeVO) => {
   }
 };
 
-/** 展开/折叠操作 */
-const handleToggleExpandAll = () => {
-  isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(treeList.value, isExpandAll.value);
-};
-
-/** 展开/折叠操作 */
-const toggleExpandAll = (data: TreeVO[], status: boolean) => {
-  data.forEach(item => {
-    treeTableRef.value?.toggleRowExpansion(item, status);
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
-  });
-};
-
 /** 修改按钮操作 */
 const handleUpdate = async (row: TreeVO) => {
   reset();

src/views/monitor/logininfo/index.vue

@@ -157,13 +157,15 @@
 import { list, delLoginInfo, cleanLoginInfo, unlockLoginInfo } from '@/api/monitor/logininfo';
 import { LoginInfoQuery, LoginInfoVO } from '@/api/monitor/logininfo/types';
 import { useLoading } from '@/hooks/async/useLoading';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 import { useSearchReset } from '@/hooks/form/useSearchReset';
 import { useSearchToggle } from '@/hooks/form/useSearchToggle';
 import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTableSortQuery } from '@/hooks/table/useTableSortQuery';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
-import { parseTime, addDateRange } from '@/utils/ruoyi';
+import { parseTime } from '@/utils/ruoyi';
 
 const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
 const { sys_common_status } = toRefs<any>(useDict('sys_common_status'));
@@ -172,8 +174,7 @@ const loginInfoList = ref<LoginInfoVO[]>([]);
 const { loading, withLoading } = useLoading(true);
 const { showSearch } = useSearchToggle();
 const total = ref(0);
-const dateRange = ref<any>(['', '']);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
-const defaultSort = ref<any>({ prop: 'loginTime', order: 'descending' });
 
 const queryFormRef = ref<ElFormInstance>();
 const loginInfoTableRef = ref<ElTableInstance>();
@@ -184,8 +185,8 @@ const queryParams = ref<LoginInfoQuery>({
   ipaddr: '',
   userName: '',
   status: '',
-  orderByColumn: defaultSort.value.prop,
+  orderByColumn: 'loginTime',
-  isAsc: defaultSort.value.order
+  isAsc: 'descending'
 });
 const {
   ids,
@@ -199,11 +200,17 @@ const selectName = computed(() => selectedRows.value.map(item => item.userName))
 /** 查询登录日志列表 */
 const getList = async () => {
   await withLoading(async () => {
-    const res = await list(addDateRange(queryParams.value, dateRange.value));
+    const res = await list(applyDateRange(queryParams.value));
     loginInfoList.value = res.data?.rows;
     total.value = res.data?.total;
   });
 };
+const { defaultSort, handleSortChange, resetSort } = useTableSortQuery<LoginInfoQuery>({
+  queryParams,
+  tableRef: loginInfoTableRef,
+  defaultSort: { prop: 'loginTime', order: 'descending' },
+  onSortChange: getList
+});
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -214,21 +221,15 @@ const { resetQuery } = useSearchReset({
   queryParams,
   pageNumKey: 'pageNum',
   resetExtras: () => {
-    dateRange.value = ['', ''];
+    resetDateRange();
   },
   afterReset: () => {
-    loginInfoTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
+    resetSort();
   }
 });
 const handleSelectionChange = (selection: LoginInfoVO[]) => {
   handleTableSelectionChange(selection);
 };
-/** 排序触发事件 */
-const handleSortChange = (column: any) => {
-  queryParams.value.orderByColumn = column.prop;
-  queryParams.value.isAsc = column.order;
-  getList();
-};
 /** 删除按钮操作 */
 const handleDelete = async (row?: LoginInfoVO) => {
   const infoIds = row?.infoId || ids.value;

src/views/monitor/operlog/index.vue

@@ -209,13 +209,15 @@
 import { list, delOperlog, cleanOperlog } from '@/api/monitor/operlog';
 import { OperLogForm, OperLogQuery, OperLogVO } from '@/api/monitor/operlog/types';
 import { useLoading } from '@/hooks/async/useLoading';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 import { useSearchReset } from '@/hooks/form/useSearchReset';
 import { useSearchToggle } from '@/hooks/form/useSearchToggle';
 import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTableSortQuery } from '@/hooks/table/useTableSortQuery';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
-import { parseTime, addDateRange, selectDictLabel } from '@/utils/ruoyi';
+import { parseTime, selectDictLabel } from '@/utils/ruoyi';
 import OperInfoDialog from './operInfoDialog.vue';
 
 const { sys_oper_type, sys_common_status, sys_device_type } = toRefs<any>(
@@ -226,8 +228,7 @@ const operlogList = ref<OperLogVO[]>([]);
 const { loading, withLoading } = useLoading(true);
 const { showSearch } = useSearchToggle();
 const total = ref(0);
-const dateRange = ref<any>(['', '']);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
-const defaultSort = ref<any>({ prop: 'operTime', order: 'descending' });
 
 const operLogTableRef = ref<ElTableInstance>();
 const queryFormRef = ref<ElFormInstance>();
@@ -274,8 +275,8 @@ const data = reactive<PageData<OperLogForm, OperLogQuery>>({
     os: '',
     businessType: '',
     status: '',
-    orderByColumn: defaultSort.value.prop,
+    orderByColumn: 'operTime',
-    isAsc: defaultSort.value.order
+    isAsc: 'descending'
   },
   rules: {}
 });
@@ -286,11 +287,17 @@ const { ids, multiple, handleSelectionChange: handleTableSelectionChange } = use
 /** 查询登录日志 */
 const getList = async () => {
   await withLoading(async () => {
-    const res = await list(addDateRange(queryParams.value, dateRange.value));
+    const res = await list(applyDateRange(queryParams.value));
     operlogList.value = res.data?.rows;
     total.value = res.data?.total;
   });
 };
+const { defaultSort, handleSortChange, resetSort } = useTableSortQuery<OperLogQuery>({
+  queryParams,
+  tableRef: operLogTableRef,
+  defaultSort: { prop: 'operTime', order: 'descending' },
+  onSortChange: getList
+});
 /** 操作日志类型字典翻译 */
 const typeFormat = (row: OperLogForm) => {
   return selectDictLabel(sys_oper_type.value, row.businessType);
@@ -305,21 +312,15 @@ const { resetQuery } = useSearchReset({
   queryParams,
   pageNumKey: 'pageNum',
   resetExtras: () => {
-    dateRange.value = ['', ''];
+    resetDateRange();
   },
   afterReset: () => {
-    operLogTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
+    resetSort();
   }
 });
 const handleSelectionChange = (selection: OperLogVO[]) => {
   handleTableSelectionChange(selection);
 };
-/** 排序触发事件 */
-const handleSortChange = (column: any) => {
-  queryParams.value.orderByColumn = column.prop;
-  queryParams.value.isAsc = column.order;
-  getList();
-};
 
 const operInfoDialogRef = ref<InstanceType<typeof OperInfoDialog>>();
 /** 详细按钮操作 */

src/views/system/config/index.vue

@@ -191,13 +191,14 @@ import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache
 import { ConfigForm, ConfigQuery, ConfigVO } from '@/api/system/config/types';
 import { useLoading } from '@/hooks/async/useLoading';
 import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 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';
-import { parseTime, addDateRange } from '@/utils/ruoyi';
+import { parseTime } from '@/utils/ruoyi';
 
 const { sys_yes_no } = toRefs<any>(useDict('sys_yes_no'));
 
@@ -206,7 +207,7 @@ 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 { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
 
 const queryFormRef = ref<ElFormInstance>();
 const configFormRef = ref<ElFormInstance>();
@@ -245,7 +246,7 @@ const { resetQuery } = useSearchReset({
   queryParams,
   pageNumKey: 'pageNum',
   resetExtras: () => {
-    dateRange.value = ['', ''];
+    resetDateRange();
   },
   afterReset: () => {
     handleQuery();
@@ -255,7 +256,7 @@ const { resetQuery } = useSearchReset({
 /** 查询参数列表 */
 const getList = async () => {
   await withLoading(async () => {
-    const res = await listConfig(addDateRange(queryParams.value, dateRange.value));
+    const res = await listConfig(applyDateRange(queryParams.value));
     configList.value = res.data?.rows;
     total.value = res.data?.total;
   });

src/views/system/dept/index.vue

@@ -198,6 +198,7 @@ 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 { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { handleTree, parseTime } from '@/utils/ruoyi';
@@ -214,12 +215,15 @@ const deptList = ref<DeptVO[]>([]);
 const { loading, withLoading } = useLoading(true);
 const { showSearch } = useSearchToggle();
 const deptOptions = ref<DeptOptionsType[]>([]);
-const isExpandAll = ref(true);
 const deptUserList = ref<UserVO[]>([]);
 
 const deptTableRef = ref<ElTableInstance>();
 const queryFormRef = ref<ElFormInstance>();
 const deptFormRef = ref<ElFormInstance>();
+const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<DeptVO>({
+  tableRef: deptTableRef,
+  data: deptList
+});
 
 const initFormData: DeptForm = {
   deptId: undefined,
@@ -308,19 +312,6 @@ const { resetQuery } = useSearchReset({
   }
 });
 
-/** 展开/折叠操作 */
-const handleToggleExpandAll = () => {
-  isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(deptList.value, isExpandAll.value);
-};
-/** 展开/折叠所有 */
-const toggleExpandAll = (data: DeptVO[], status: boolean) => {
-  data.forEach(item => {
-    deptTableRef.value?.toggleRowExpansion(item, status);
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
-  });
-};
-
 /** 新增按钮操作 */
 const handleAdd = async (row?: DeptVO) => {
   reset();

src/views/system/oss/index.vue

@@ -191,12 +191,13 @@ 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 { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 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';
+import { parseTime } from '@/utils/ruoyi';
 
 const router = useRouter();
 
@@ -208,7 +209,11 @@ const { showSearch } = useSearchToggle();
 const total = ref(0);
 const type = ref(0);
 const previewListResource = ref(true);
-const dateRangeCreateTime = ref<any>(['', '']);
+const {
+  dateRange: dateRangeCreateTime,
+  applyDateRange: applyCreateTimeDateRange,
+  resetDateRange: resetCreateTimeDateRange
+} = useDateRangeQuery('CreateTime');
 
 // 默认排序
 const defaultSort = ref({ prop: 'createTime', order: 'ascending' });
@@ -251,7 +256,7 @@ const getList = async () => {
   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'));
+    const response = await listOss(applyCreateTimeDateRange(queryParams.value));
     ossList.value = response.data?.rows;
     total.value = response.data?.total;
     showTable.value = true;
@@ -278,7 +283,7 @@ const { resetQuery } = useSearchReset({
   pageNumKey: 'pageNum',
   resetExtras: () => {
     showTable.value = false;
-    dateRangeCreateTime.value = ['', ''];
+    resetCreateTimeDateRange();
     queryParams.value.orderByColumn = defaultSort.value.prop;
     queryParams.value.isAsc = defaultSort.value.order;
   },

src/views/system/role/index.vue

@@ -338,13 +338,14 @@ import {
 import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
 import { useLoading } from '@/hooks/async/useLoading';
 import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 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';
-import { parseTime, addDateRange } from '@/utils/ruoyi';
+import { parseTime } from '@/utils/ruoyi';
 
 const router = useRouter();
 const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
@@ -368,7 +369,7 @@ const roleList = ref<RoleVO[]>();
 const { loading, withLoading } = useLoading(true);
 const { showSearch } = useSearchToggle();
 const total = ref(0);
-const dateRange = ref<any>(['', '']);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
 const menuPermissionMeta = ref<RoleMenuPermissionMeta>({
   treeOptions: [],
   buttonIds: new Set<string>(),
@@ -795,7 +796,7 @@ const { dialog, openDialog, closeDialog, setTitle } = useDialogState();
  */
 const getList = () => {
   withLoading(async () => {
-    const res = await listRole(addDateRange(queryParams.value, dateRange.value));
+    const res = await listRole(applyDateRange(queryParams.value));
     roleList.value = res.data?.rows;
     total.value = res.data?.total;
   });
@@ -814,7 +815,7 @@ const { resetQuery } = useSearchReset({
   queryParams,
   pageNumKey: 'pageNum',
   resetExtras: () => {
-    dateRange.value = ['', ''];
+    resetDateRange();
   },
   afterReset: () => {
     handleQuery();

src/views/system/user/index.vue

@@ -463,6 +463,7 @@ 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 { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 import { useSearchReset } from '@/hooks/form/useSearchReset';
 import { useSearchToggle } from '@/hooks/form/useSearchToggle';
 import { useTableSelection } from '@/hooks/table/useTableSelection';
@@ -473,7 +474,6 @@ import { useDict } from '@/utils/dict';
 import { checkPermi } from '@/utils/permission';
 import { globalHeaders } from '@/utils/request';
 import { download as requestDownload } from '@/utils/request';
-import { addDateRange } from '@/utils/ruoyi';
 import UserViewDrawer from './view.vue';
 
 const router = useRouter();
@@ -482,7 +482,7 @@ const userList = ref<UserVO[]>();
 const { loading, withLoading } = useLoading(true);
 const { showSearch } = useSearchToggle();
 const total = ref(0);
-const dateRange = ref<any>(['', '']);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
 const { treeCollapsed } = useTreeCollapsed();
 const deptOptions = ref<DeptTreeVO[]>([]);
 const enabledDeptOptions = ref<DeptTreeVO[]>([]);
@@ -599,7 +599,7 @@ const { dialog, openDialog: openUserDialog, closeDialog: closeUserDialog, setTit
 /** 查询用户列表 */
 const getList = async () => {
   await withLoading(async () => {
-    const res = await api.listUser(addDateRange(queryParams.value, dateRange.value));
+    const res = await api.listUser(applyDateRange(queryParams.value));
     userList.value = res.data?.rows;
     total.value = res.data?.total;
   });
@@ -641,7 +641,7 @@ const { resetQuery } = useSearchReset({
   queryParams,
   pageNumKey: 'pageNum',
   resetExtras: () => {
-    dateRange.value = ['', ''];
+    resetDateRange();
     queryParams.value.deptId = undefined;
     treePanelRef.value?.setCurrentKey(undefined);
   },

src/views/tool/gen/index.vue

@@ -196,13 +196,13 @@ import { delTable, genCode, getDataNames, listTable, previewTable, synchDb } fro
 import { TableQuery, TableVO } from '@/api/tool/gen/types';
 import { useLoading } from '@/hooks/async/useLoading';
 import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 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';
-import { addDateRange } from '@/utils/ruoyi';
 import ImportTable from './importTable.vue';
 
 const route = useRoute();
@@ -211,7 +211,7 @@ const tableList = ref<TableVO[]>([]);
 const { loading, withLoading } = useLoading(true);
 const { showSearch } = useSearchToggle();
 const total = ref(0);
-const dateRange = ref<any>(['', '']);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
 const uniqueId = ref('');
 const dataNameList = ref<Array<string>>([]);
 
@@ -245,7 +245,7 @@ const getDataNameList = async () => {
 /** 查询表集合 */
 const getList = async () => {
   await withLoading(async () => {
-    const res = await listTable(addDateRange(queryParams.value, dateRange.value));
+    const res = await listTable(applyDateRange(queryParams.value));
     tableList.value = res.data?.rows;
     total.value = res.data?.total;
   });
@@ -285,7 +285,7 @@ const { resetQuery } = useSearchReset({
   queryParams,
   pageNumKey: 'pageNum',
   resetExtras: () => {
-    dateRange.value = ['', ''];
+    resetDateRange();
   },
   afterReset: () => {
     handleQuery();
@@ -324,7 +324,7 @@ onMounted(() => {
   if (time != null && time != uniqueId.value) {
     uniqueId.value = time as string;
     queryParams.value.pageNum = Number(route.query.pageNum);
-    dateRange.value = ['', ''];
+    resetDateRange();
     queryFormRef.value?.resetFields();
   }
   getList();

src/views/workflow/category/index.vue

@@ -127,6 +127,7 @@ 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 { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
 import modal from '@/plugins/modal';
 import { handleTree } from '@/utils/ruoyi';
 
@@ -140,12 +141,15 @@ const categoryList = ref<CategoryVO[]>([]);
 const categoryOptions = ref<CategoryOption[]>([]);
 const buttonLoading = ref(false);
 const { showSearch } = useSearchToggle();
-const isExpandAll = ref(true);
 const { loading, setLoading, withLoading } = useLoading();
 
 const queryFormRef = ref<ElFormInstance>();
 const categoryFormRef = ref<ElFormInstance>();
 const categoryTableRef = ref<ElTableInstance>();
+const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<CategoryVO>({
+  tableRef: categoryTableRef,
+  data: categoryList
+});
 
 const initFormData: CategoryForm = {
   categoryId: undefined,
@@ -225,20 +229,6 @@ const handleAdd = (row?: CategoryVO) => {
   }
 };
 
-/** 展开/折叠操作 */
-const handleToggleExpandAll = () => {
-  isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(categoryList.value, isExpandAll.value);
-};
-
-/** 展开/折叠操作 */
-const toggleExpandAll = (data: CategoryVO[], status: boolean) => {
-  data.forEach(item => {
-    categoryTableRef.value?.toggleRowExpansion(item, status);
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
-  });
-};
-
 /** 修改按钮操作 */
 const handleUpdate = async (row: CategoryVO) => {
   reset();