gasInjection-project/src/views/vent/monitorManager/comment/WorkFaceAlarmHistoryTable.vue

<template>
  <div class="alarm-history-table">
    <BasicTable ref="alarmHistory" @register="registerTable" />
  </div>
</template>

<script lang="ts" name="system-user" setup>
  //ts语法
  import { watch, ref, defineExpose } 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';
  
  const props = defineProps({
    columnsType: {
      type: String,
      required: true,
    },
    deviceType: {
      type: String,
      required: true,
    },
    deviceListApi: {
      type: Function,
      default: (params) => defHttp.get({ url: '/safety/ventanalyManageSystem/linkdevicelist', params })
    },
    designScope: {
      type: String,
    },
    sysId: {
      type: String,
    },
    scroll: {
      type: Object,
      default: () => { }
    },
    list: {
      type: Function,
      default: (params) => defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params })
    }
  });
  const alarmHistory = ref()
  const columns = ref([])

  watch(
    () => {
      return props.columnsType;
    },
    (newVal) => {
      const column = getTableHeaderColumns(newVal + '_history')
      if (column && column.length < 1) {
        const arr = newVal.split('_')
        const columnKey = arr.reduce((prev, cur, index) => {
          if (index !== arr.length - 2) {
            return prev + '_' + cur
          } else {
            return prev
          }
        })
        columns.value = getTableHeaderColumns(arr[0] + '_history');
      } else {
        columns.value = column
      }
      if (alarmHistory.value) reload()
    },
    {
      immediate: true
    }
  );

  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    tableProps: {
      api: props.list,
      columns: columns,
      canResize: true,
      showTableSetting: false,
      showActionColumn: false,
      bordered: false,
      size: 'small',
      scroll: props.scroll,
      formConfig: {
        labelAlign: 'left',
        showAdvancedButton: false,
        // autoAdvancedCol: 2,
        schemas: [
          {
            label: '时间范围',
            field: 'createTime',
            component: 'RangePicker',
            componentProps: {
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
            },
          },
          {
            label: '查询设备',
            field: 'deviceId',
            component: 'ApiSelect',
            componentProps: {
              api: props.deviceListApi,
              resultField: 'records',
              labelField: 'strname',
              valueField: 'id',
            },
          },
        ],
        fieldMapToTime: [['createTime', ['starttime', 'endtime'], '']],
      },
      fetchSetting: {
        listField: 'records',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100'],
      },
      beforeFetch(params) {
        params.devicetype = props.deviceType + '*';
        if (props.sysId) {
          params.sysId = props.sysId;
        }
      },
    },
  });
  //注册table数据
  const [registerTable, { reload, setLoading }] = tableContext;
  defineExpose({ setLoading })
</script>

<style scoped lang="less">
  @ventSpace: zxm;

  :deep(.ventSpace-table-body) {
    height: auto !important;
  }
  :deep(.zxm-picker){
      height: 30px !important;
  }
  .alarm-history-table {
    width: 100%;
    :deep(.jeecg-basic-table-form-container) {
      .@{ventSpace}-form {
        padding: 0 !important;
        border: none !important;
        margin-bottom: 0 !important;
        .@{ventSpace}-picker,
        .@{ventSpace}-select-selector {
          width: 100% !important;
          background: #00000017;
          border: 1px solid #b7b7b7;
          input,
          .@{ventSpace}-select-selection-item,
          .@{ventSpace}-picker-suffix {
            color: #fff;
          }
          .@{ventSpace}-select-selection-placeholder {
            color: #ffffffaa;
          }
        }
      }
      .@{ventSpace}-table-title {
        min-height: 0 !important;
      }
    }
  }
</style>