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

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>>();
 /** 详细按钮操作 */