gasInjection-project/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>
  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';

  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指定表格配置时除外）
  const { tableContext } = useListPage({ tableProps: defaultTableProps });
  const [register, { getForm, setLoading, getPaginationRef, setPagination, setProps, getColumns, setColumns }] = tableContext;

  /**
   * 初始化表格，该方法将根据参数设定新的表头、表单，如果提供了自定义的表头、表单配置则不作操作。
   *
   * 之所以将设备相关的信息作参数传入，是因为这样可以确认依赖关系，即需要有设备信息之后再初始化表格。
   *
   * @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: defaultSchemas,
      },
      pagination: props.pagination || defaultPaginationProps,
    });
  }

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

  // 表格数据相关的字段
  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>[]>([]);

  /**
   * 获取设备信息列表，初始化设备信息及设备可选项
   */
  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>

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