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

<template>
  <BasicTable ref="historyTable" @register="register" :data-source="data">
    <template #bodyCell="{ column, record }">
      <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">
        {{ record.warnFlag == '0' ? '正常' : '报警' }}
      </a-tag>
      <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">
        {{ record.netStatus == '0' ? '断开' : '连接' }}
      </a-tag>
    </template>
    <template #form-submitBefore>
      <a-button type="primary" preIcon="ant-design:search-outlined" @click="search">查询</a-button>
    </template>
  </BasicTable>
</template>

<script lang="ts" setup>
  // 场景类历史数据公共组件！
  // 用于服务场景类历史数据业务，这类数据通常由一条数据返回多个子设备的信息，例如：{ forcFan1Temp, forcFan2Temp }；
  // 而此组件可以将这些数据分类，例如：表格只有 温度 一列，但可以根据所选的子设备展示不同的数据；
  // 综上所述，此组件在基础的历史数据组件上添加了子设备下拉框（由字典驱动），用户选择子设备后表头将动态调整以适配数据展示；
  // 使用方法如下：
  // 设有历史数据2条，[{ name, forcFan1Temp, forcFan2Temp }, { name, forcFan1Temp, forcFan2Temp }]。
  // 1、配置设备字段（通常是综合管理-设备字段管理），加$的字段将允许动态展示数据。如 name-名称，$Temp-温度。
  // 2、配置数据字典（通常是设置-数据字典），为上述设备的子设备添加编码。如 压风机1-forcFan1，压风机2-forcFan2。
  // 3、配合前端开发人员开发，调用该组件并使用上面定好的device-code（设备字段）、dict-code（数据字典）。
  // 4、测试结果，子设备选择 压风机1 时，表格会读取 name、forcFan1Temp 作展示。
  import { onMounted, ref, shallowRef } from 'vue';
  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';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { initDictOptions } from '/@/utils/dict';

  const props = withDefaults(
    defineProps<{
      /** 表格项配置，默认由deviceCode获取且联动dictCode，可以覆写，覆写后将不支持联动，参考BaiscTable */
      // columns?: BasicColumn[];
      /** 表格操作项配置，默认为空，可以覆写 */
      // actionColumns?: BasicColumn;
      /** 查询表单项配置，默认联动dictCode，可以覆写，覆写后将不支持联动，提供formProps时此项无效，参考BaiscTable */
      // schemas?: FormSchema[];
      /** 表格分页配置，可以覆写，参考BaiscTable */
      pagination?: PaginationProps;
      /** 设备编码，该编码用于从字段/点表配置中读出默认表头，示例：forcFan */
      deviceCode: string;
      /** 字典编码，该编码用于从字典配置中读出设备项，示例：forcFan_dict */
      dictCode: string;
      /** 表格配置，参考BaiscTable，该值会与默认的配置进行浅合并，这里提供的任何配置都是优先的 */
      // tableProps?: BasicTableProps;
      /** 查询表单配置，参考BaiscTable */
      // formProps?: FormProps;
    }>(),
    {
      deviceCode: '',
      dictCode: '',
    }
  );

  // 创建表格，此表格目前不具备常用功能，需要初始化后使用（props指定表格配置时除外）
  let originColumns: BasicColumn[] = [];
  const { tableContext } = useListPage({ tableProps: defaultTableProps });
  const [register, { getForm, setLoading, getPaginationRef, setPagination, setProps, setColumns }] = tableContext;

  /**
   * 初始化表格，该方法将根据参数设定新的表头、表单，如果提供了自定义的表头、表单配置则不作操作。
   *
   * 之所以将设备相关的信息作参数传入，是因为这样可以确认依赖关系，即需要有设备信息之后再初始化表格。
   *
   * @param deviceCodes 获取表头所用的编码，从左到右依次尝试，直到找到第一个有表头信息的为止
   * @param deviceOptions 设备下拉框对应的选项
   */
  function initTable(deviceCodes: string[], deviceOptions: any[], dictOptions: any[]) {
    const defaultSchemas = getDefaultSchemas(dictOptions, deviceOptions);
    for (const code of deviceCodes) {
      const cols = getTableHeaderColumns(code);
      if (cols.length) {
        originColumns = cols;
        setColumns(cols);
        break;
      }
    }
    setProps({
      formConfig: {
        ...defaultFormProps,
        schemas: defaultSchemas,
      },
      pagination: props.pagination || defaultPaginationProps,
    });
  }

  /**
   * 更新表头，表头默认情况下需要和子设备联动
   * @param prefix 子设备的值，即为表头取数据时字段的前缀
   */
  function updateColumns(prefix: string) {
    const cols = originColumns.map((col) => {
      const di = col.dataIndex as string;
      if (di && di.includes('$')) {
        return {
          ...col,
          dataIndex: di.replace('$', prefix),
        };
      }
      return col;
    });
    setColumns(cols);
  }

  // 表格数据相关的字段
  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;
    return list(deviceCode, deviceInfo, formData, pagination)
      .then(({ records, total, current }) => {
        setPagination({
          current,
          total,
        });
        records.forEach((item) => {
          Object.assign(item, item.readData);
        });
        data.value = records;
      })
      .finally(() => {
        setLoading(false);
      });
  }

  // 设备信息相关的字段
  const deviceInfo = ref<Record<string, unknown>>({});
  const deviceOptions = ref<Record<string, unknown>[]>([]);
  const dictOptions = ref<Record<string, unknown>[]>([]); // 子设备下拉框选项

  /**
   * 获取设备信息列表，初始化设备信息及设备可选项
   */
  async function fetchDevice() {
    const results = await getDeviceList({ devicetype: props.deviceCode, pageSize: 10000 });
    const dicts = await initDictOptions(props.dictCode);

    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];
    dictOptions.value = dicts;
  }

  /**
   * 搜索，核心方法
   *
   * 该方法获取表单、处理表单数据后尝试获取数据并设置表头
   */
  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, dictOptions.value);
    search();
  });
</script>

<style scoped lang="less">
  @import '/@/design/vent/color.less';
</style>