refactor: extract device snmp query composable function

src/composables/query/device/index.ts

@@ -1,3 +1,4 @@
 export * from './domains';
 
+export * from './use-device-snmp-logs-query';
 export * from './use-line-devices-query';

src/composables/query/device/use-device-snmp-logs-query.ts

@@ -0,0 +1,88 @@
+import type { NdmDeviceResultVO, PageParams } from '@/apis/models';
+import { postSnmpLogPage } from '@/apis/requests';
+import { DEVICE_SNMP_LOGS_QUERY_KEY } from '@/constants';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import type { PaginationProps } from 'naive-ui';
+import { computed, h, watch } from 'vue';
+import { reactive, type Ref } from 'vue';
+
+export function useDeviceSnmpLogsQuery(stationCode: Ref<string>, ndmDevice: Ref<NdmDeviceResultVO>, dateTimeRange: Ref<[number, number]>) {
+  const DEFAULT_PAGE_SIZE = 10;
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showSizePicker: true,
+    page: 1,
+    pageSize: DEFAULT_PAGE_SIZE,
+    pageSizes: [5, 10, 20, 50, 80, 100],
+    itemCount: 0,
+    prefix: ({ itemCount }) => {
+      return h('div', {}, { default: () => `共${itemCount}条` });
+    },
+    onUpdatePage: (page) => {
+      pagination.page = page;
+      refresh();
+    },
+    onUpdatePageSize: (pageSize) => {
+      pagination.pageSize = pageSize;
+      pagination.page = 1;
+      refresh();
+    },
+  });
+  const queryKey = reactive([DEVICE_SNMP_LOGS_QUERY_KEY, stationCode, ndmDevice, dateTimeRange, pagination.page, pagination.pageSize]);
+
+  const queryClient = useQueryClient();
+
+  const {
+    data: snmpLogRespData,
+    isPending,
+    isFetching,
+    error,
+  } = useQuery({
+    queryKey,
+    enabled: computed(() => dateTimeRange.value.every((dateTime) => dateTime > 0)),
+    queryFn: async () => {
+      const deviceId = ndmDevice.value.id;
+      const createdTime_precisest = dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
+      const createdTime_preciseed = dayjs(dateTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
+      const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
+        current: pagination.page ?? 1,
+        size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+        sort: 'id',
+        order: 'descending',
+      };
+      const respData = await postSnmpLogPage(stationCode.value, {
+        model: { deviceId },
+        extra: { createdTime_precisest, createdTime_preciseed },
+        ...restParams,
+      });
+      return respData;
+    },
+  });
+
+  watch(snmpLogRespData, (data) => {
+    if (data) {
+      pagination.itemCount = parseInt(data.total);
+    }
+  });
+
+  watch(error, (err) => {
+    if (err) {
+      console.error(`查询${ndmDevice.value.name}的SNMP日志失败:`, err);
+      window.$message.error(err.message);
+    }
+  });
+
+  const refresh = () => {
+    queryClient.invalidateQueries({ queryKey });
+  };
+
+  return {
+    snmpLogRespData,
+    isPending,
+    isFetching,
+    error,
+    pagination,
+    refresh,
+  };
+}