[Wip 0000] 场景类历史数据组件更改实现细节及代码小型重构

src/views/vent/comment/history/HistoryTable.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref, shallowRef } from 'vue';
-  import { BasicColumn, BasicTableProps, PaginationProps, FormProps, FormSchema, BasicTable } from '/@/components/Table';
+  import { BasicColumn, PaginationProps, BasicTable } from '/@/components/Table';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { defaultFormProps, defaultPaginationProps, getDefaultSchemas, defaultTableProps } from './history.data';
   import { getDeviceList, list } from './history.api';
@@ -25,11 +25,11 @@
   const props = withDefaults(
     defineProps<{
       /** 表格项配置，默认由deviceCode获取且联动dictCode，可以覆写，覆写后将不支持联动，参考BaiscTable */
-      columns?: BasicColumn[];
+      // columns?: BasicColumn[];
       /** 表格操作项配置，默认为空，可以覆写 */
-      actionColumns?: BasicColumn;
+      // actionColumns?: BasicColumn;
       /** 查询表单项配置，默认联动dictCode，可以覆写，覆写后将不支持联动，提供formProps时此项无效，参考BaiscTable */
-      schemas?: FormSchema[];
+      // schemas?: FormSchema[];
       /** 表格分页配置，可以覆写，参考BaiscTable */
       pagination?: PaginationProps;
       /** 设备编码，该编码用于从字段/点表配置中读出表头，示例：forcFan */
@@ -37,9 +37,9 @@
       /** 字典编码，该编码用于从字典配置中读出设备项，示例：forcFan_dict */
       dictCode: string;
       /** 表格配置，参考BaiscTable，该值会与默认的配置进行浅合并，这里提供的任何配置都是优先的 */
-      tableProps?: BasicTableProps;
+      // tableProps?: BasicTableProps;
       /** 查询表单配置，参考BaiscTable */
-      formProps?: FormProps;
+      // formProps?: FormProps;
     }>(),
     {
       deviceCode: '',
@@ -47,73 +47,71 @@
     }
   );
 
-  // 初始化表格，将默认配置与props提供的配置合并
-  const defaultSchemas = getDefaultSchemas(props.dictCode);
-  const defaultColumns = getTableHeaderColumns(props.deviceCode.concat('_history'));
+  // 创建表格，此表格目前不具备常用功能，需要初始化后使用（props指定表格配置时除外）
+  const { tableContext } = useListPage({ tableProps: defaultTableProps });
+  const [register, { getForm, setLoading, getPaginationRef, setPagination, setProps, getColumns, setColumns }] = tableContext;
 
-  const { tableContext } = useListPage({
-    tableProps: {
-      ...defaultTableProps,
-      columns: props.columns || defaultColumns,
-      actionColumn: props.actionColumns,
-      showActionColumn: Boolean(props.actionColumns),
-      formConfig: props.formProps || {
+  /**
+   * 初始化表格，该方法将根据参数设定新的表头、表单，如果提供了自定义的表头、表单配置则不作操作。
+   *
+   * 之所以将设备相关的信息作参数传入，是因为这样可以确认依赖关系，即需要有设备信息之后再初始化表格。
+   *
+   * @param deviceCodes 获取表头所用的编码，从左到右依次尝试，直到找到第一个有表头信息的为止
+   * @param deviceOptions 设备下拉框对应的选项
+   */
+  function initTable(deviceCodes: string[], deviceOptions: any[]) {
+    const defaultSchemas = getDefaultSchemas(props.dictCode, deviceOptions);
+    let defaultColumns: BasicColumn[] = [];
+    for (const code of deviceCodes) {
+      const cols = getTableHeaderColumns(code);
+      if (cols.length) {
+        defaultColumns = cols;
+        break;
+      }
+    }
+    setProps({
+      columns: defaultColumns,
+      formConfig: {
         ...defaultFormProps,
-        schemas: props.schemas || defaultSchemas,
+        schemas: defaultSchemas,
       },
       pagination: props.pagination || defaultPaginationProps,
-      ...props.tableProps,
-    },
-  });
-  const [register, { getForm, setLoading, setColumns, getPaginationRef, setPagination }] = tableContext;
-
-  // 表格数据相关
-  const data = shallowRef([]);
-
-  // 搜索
-  async function search() {
-    const form = getForm();
-    await form.validate();
-    await fetchData(form.getFieldsValue());
+    });
   }
 
-  // 分站类型，不同的分站类型对应不同的方式获取历史数据
-  const deviceInfo = ref({});
-
-  // 获取设备列表信息，初始化一些信息
-  async function fetchDevice() {
-    const results = await getDeviceList({ devicetype: props.deviceCode, pageSize: 10000 });
-
-    const id = results[0].id || results[0].deviceID;
-    deviceInfo.value = results[0];
-    await getForm().setFieldsValue({ gdeviceid: id });
+  /**
+   * 更新表头，表头默认情况下需要和子设备联动
+   * @param prefix 子设备的值，即为表头取数据时字段的前缀
+   */
+  function updateColumns(prefix: string) {
+    const cols = getColumns();
+    setColumns(
+      cols.map((col) => {
+        return {
+          ...col,
+          dataIndex: col.dataIndex ? `${prefix || ''}${col.dataIndex}` : undefined,
+        };
+      })
+    );
   }
 
-  // 核心，获取表格的数据
-  function fetchData(formData: Record<string, unknown>) {
-    setLoading(true);
+  // 表格数据相关的字段
+  const data = shallowRef([]);
 
+  /**
+   * 获取列表的数据
+   *
+   * 这些参数确认了依赖关系，即需要有表单数据、设备信息之后再尝试获取表格数据。
+   *
+   * @param formData 表格上方的表单数据
+   * @param deviceCode 设备编码
+   * @param deviceInfo 设备信息
+   */
+  function fetchData(formData: Record<string, unknown>, deviceCode: string, deviceInfo: any) {
+    setLoading(true);
     const pagination = getPaginationRef() as PaginationProps;
-    list(
-      props.deviceCode,
-      deviceInfo,
-      {
-        ...formData,
-        pageNo: pagination.current,
-        pageSize: pagination.pageSize,
-        column: 'createTime',
-        strtype: props.deviceCode + '*',
-        isEmployee: props.deviceCode.startsWith('vehicle') ? false : true,
-      },
-      pagination
-    )
+    return list(deviceCode, deviceInfo, formData, pagination)
       .then(({ records, total, current }) => {
-        // 表格的列需要默认情况下需要和设备列表联动
-        defaultColumns.filter((col) => {
-          col.dataIndex = `${formData.deviceid}${col.dataIndex}`;
-        });
-        setColumns(defaultColumns);
-
         setPagination({
           current,
           total,
@@ -125,8 +123,49 @@
       });
   }
 
-  onMounted(() => {
-    fetchDevice();
+  // 设备信息相关的字段
+  const deviceInfo = ref<Record<string, unknown>>({});
+  const deviceOptions = ref<Record<string, unknown>[]>([]);
+
+  /**
+   * 获取设备信息列表，初始化设备信息及设备可选项
+   */
+  async function fetchDevice() {
+    const results = await getDeviceList({ devicetype: props.deviceCode, pageSize: 10000 });
+
+    const options = results.map((item) => {
+      return {
+        label: item.strinstallpos,
+        value: item.id || item.deviceID,
+        deviceType: item.strtype || item.deviceType,
+        devicekind: item.devicekind,
+        stationtype: item.stationtype,
+      };
+    });
+    deviceOptions.value = options;
+    deviceInfo.value = results[0];
+  }
+
+  /**
+   * 搜索，核心方法
+   *
+   * 该方法获取表单、处理表单数据后尝试获取数据并设置表头
+   */
+  async function search() {
+    const form = getForm();
+    await form.validate();
+    const formData = form.getFieldsValue();
+    deviceInfo.value = deviceOptions.value.find((opt) => {
+      return opt.value === formData.gdeviceid;
+    }) as Record<string, unknown>;
+    const code = (deviceInfo.value.deviceType || props.deviceCode.concat('*')) as string;
+    await fetchData(formData, code, deviceInfo.value);
+    updateColumns(formData.deviceNum);
+  }
+
+  onMounted(async () => {
+    await fetchDevice();
+    initTable([deviceInfo.value.deviceType as string, props.deviceCode.concat('_history')], deviceOptions.value);
     search();
   });
 </script>

src/views/vent/comment/history/history.api.ts

@@ -7,8 +7,12 @@ enum Api {
   getHistoryData = '/ventanaly-device/history/getHistoryData',
 }
 /**
- * 列表接口
- * @param params
+ * 获取列表的接口
+ * @param deviceCode 设备编码，作为 strtype 传参
+ * @param deviceInfo 设备信息，根据分站判别所用的 api
+ * @param formData 表单数据
+ * @param pagination 分页数据
+ * @returns
  */
 export const list = (deviceCode: string, deviceInfo: any, formData: any, pagination: PaginationProps) => {
   if (deviceInfo.stationType === 'redis') {
@@ -21,7 +25,7 @@ export const list = (deviceCode: string, deviceInfo: any, formData: any, paginat
         startTime: formData.ttime_begin,
         endTime: formData.ttime_end,
         deviceId: formData.gdeviceid,
-        strtype: deviceCode + '*',
+        strtype: deviceCode,
         interval: formData.skip || '1h',
         isEmployee: deviceCode.startsWith('vehicle') ? false : true,
       },
@@ -34,7 +38,7 @@ export const list = (deviceCode: string, deviceInfo: any, formData: any, paginat
           pageNo: pagination.current,
           pageSize: pagination.pageSize,
           column: 'createTime',
-          strtype: deviceInfo.strtype || deviceCode.concat('*'),
+          strtype: deviceCode,
           ...formData,
         },
       })

src/views/vent/comment/history/history.data.ts

@@ -2,8 +2,14 @@ import dayjs from 'dayjs';
 import { BasicTableProps, PaginationProps, FormProps, FormSchema } from '/@/components/Table';
 // import { getAutoScrollContainer } from '/@/utils/common/compUtils';
 
-/** 默认的查询表单项props */
-export const getDefaultSchemas: (dictCode: string) => FormSchema[] = (dictCode: string) => [
+/**
+ * 默认的查询表单项props
+ *
+ * @param dictCode 字典编码，用于初始化子设备下拉框
+ * @param deviceOptions 设备编码，用于初始化设备下拉框
+ * @returns
+ */
+export const getDefaultSchemas: (dictCode: string, deviceOptions: any[]) => FormSchema[] = (dictCode: string, deviceOptions: any[]) => [
   {
     field: 'ttime_begin',
     label: '开始时间',
@@ -37,15 +43,17 @@ export const getDefaultSchemas: (dictCode: string) => FormSchema[] = (dictCode:
   {
     label: '查询设备',
     field: 'gdeviceid',
-    component: 'Input',
+    component: 'Select',
     required: true,
-    // componentProps: {
-    //   onChange: (e, option) => {
-    //     nextTick(async () => {
-    //       await getDataSource();
-    //     });
-    //   },
-    // },
+    defaultValue: deviceOptions[0].value,
+    componentProps: {
+      options: deviceOptions,
+      // onChange: (e, option) => {
+      //   nextTick(async () => {
+      //     await getDataSource();
+      //   });
+      // },
+    },
     colProps: {
       span: 4,
     },
@@ -54,6 +62,7 @@ export const getDefaultSchemas: (dictCode: string) => FormSchema[] = (dictCode:
     label: '子设备',
     field: 'deviceNum',
     component: 'JDictSelectTag',
+    show: Boolean(dictCode),
     componentProps: {
       dictCode,
       placeholder: '请选择',
@@ -115,6 +124,7 @@ export const defaultTableProps: BasicTableProps = {
   bordered: false,
   size: 'small',
   showIndexColumn: true,
+  showActionColumn: false,
 };
 
 /** 默认的查询表单props，参考 BasicForm 组件 */