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

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 defaultSort = ref<any>({ prop: 'loginTime', order: 'descending' });
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
 
 const queryFormRef = ref<ElFormInstance>();
 const loginInfoTableRef = ref<ElTableInstance>();
@@ -184,8 +185,8 @@ const queryParams = ref<LoginInfoQuery>({
   ipaddr: '',
   userName: '',
   status: '',
-  orderByColumn: defaultSort.value.prop,
-  isAsc: defaultSort.value.order
+  orderByColumn: 'loginTime',
+  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 defaultSort = ref<any>({ prop: 'operTime', order: 'descending' });
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
 
 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,
-    isAsc: defaultSort.value.order
+    orderByColumn: 'operTime',
+    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();