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

<template>
  <div class="history-table">
    <BasicTable ref="historyTable" @register="registerTable" >
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="system-user" setup>
  //ts语法
  import { watchEffect, ref } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { defHttp } from '/@/utils/http/axios';
  import dayjs from 'dayjs';
  const historyTable = ref();
  const list = (params) => defHttp.get({ url: '/safety/ventanalyMonitorData/list', params });
  const emit = defineEmits(['change']);
  const props = defineProps({
    columnsType: {
      type: String,
      required: true,
    },
    deviceType: {
      type: String,
      required: true,
    },
    deviceListApi: {
      type: Function,
      required: true,
    },
    designScope: {
      type: String,
    },
    scroll: {
      type: Object,
      default: () => { }
    }
  });

  const columns = getTableHeaderColumns(props.columnsType);

  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    tableProps: {
      api: list,
      columns: columns,
      canResize: true,
      showTableSetting: false,
      showActionColumn: false,
      bordered: false,
      size: 'small',
      scroll: props.scroll,
      formConfig: {
        labelAlign: 'left',
        showAdvancedButton: false,
        // autoAdvancedCol: 2,

        baseColProps: {
          // offset: 0.5,
          xs: 24,
          sm: 24,
          md: 24,
          lg: 9,
          xl: 7,
          xxl: 4,
        },
        schemas: [
          {
            label: '查询日期',
            field: 'tData',
            component: 'DatePicker',
            defaultValue: dayjs(),
            componentProps: {
              valueFormat: 'YYYY-MM-DD',
            },
          },
          {
            label: '时间区间',
            field: 'tickectDate',
            component: 'TimeRangePicker',
            componentProps: {
              placeholder: ['开始时间', '结束时间'],
              valueFormat: 'HH:mm:ss',
            },
          },
          {
            label: '查询设备',
            field: 'gdeviceid',
            component: 'ApiSelect',
            componentProps: {
              api: props.deviceListApi,
              resultField: 'records',
              labelField: 'strname',
              valueField: 'id',
            },
          },
          {
            label: '间隔时间',
            field: 'skip',
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '5秒',
                  value: '1',
                },
                {
                  label: '10秒',
                  value: '2',
                },
                {
                  label: '1分钟',
                  value: '3',
                },
                {
                  label: '5分钟',
                  value: '4',
                },
                {
                  label: '10分钟',
                  value: '5',
                },
              ],
            },
          },
        ],
        fieldMapToTime: [['tickectDate', ['ttime_begin', 'ttime_end'], '']],
      },
      fetchSetting: {
        listField: 'datalist.records',
      },
      pagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
      },
      beforeFetch(params) {
        params.strtype = props.deviceType + '*';
      },
      afterFetch(resultItems) {
        resultItems.map((item) => {
          Object.assign(item, item['readData']);
        });
        return resultItems;
      },
    },
  });
  //注册table数据
  const [registerTable, { getDataSource }] = tableContext;

  watchEffect(() => {
    if (historyTable.value && getDataSource) {
      const data = getDataSource() || [];
      emit('change', data);
      console.log('[ data ] >', data);
    }
  });
</script>

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

  :deep(.@{ventSpace}-table-body) {
    height: auto !important;
  }
  :deep(.zxm-picker){
      height: 30px !important;
  }
  .history-table {
    width: 100%;
    :deep(.jeecg-basic-table-form-container) {
      .@{ventSpace}-table-title {
        min-height: 0 !important;
      }
    }
  }
</style>