vent-template/src/views/vent/monitorManager/handlerMonitor/index.vue

<template>
  <div class="alarm-history-table">
    <BasicTable ref="alarmHistory" @register="registerTable">
      <template #form-onExportXls>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="system-user" setup>
  //ts语法
  import { watch, ref, defineExpose, inject, onMounted } 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';
  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
  import { list } from './handle.api';

  const props = defineProps({
    deviceListApi: {
      type: Function,
    },
    designScope: {
      type: String,
    },
    sysId: {
      type: String,
    },
    list: {
      type: Function,
      default: (params) => defHttp.get({ url: '/safety/ventanalyDevicesetLog/list', params }),
    },
  });

  const alarmHistory = ref();
  const columns = getTableHeaderColumns('operator_history');

  // 列表页面公共参数、方法
  const { tableContext, onExportXls } = useListPage({
    tableProps: {
      api: list,
      columns: columns,
      canResize: true,
      showTableSetting: false,
      showActionColumn: false,
      bordered: false,
      size: 'small',
      showIndexColumn: true,
      // scroll: { y: 600 },
      formConfig: {
        labelAlign: 'left',
        showAdvancedButton: false,
        // autoAdvancedCol: 2,
        schemas: [
          {
            label: '设备类型',
            field: 'devicetype',
            component: 'MTreeSelect',
            componentProps: {
              virtual: false,
            },
            colProps: { span: 5 },
          },
          {
            label: '操作类型',
            field: 'nlogtype',
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '人工远程控制',
                  value: '1',
                },
                {
                  label: '系统联动控制',
                  value: '2',
                },
                {
                  label: '其他控制',
                  value: '3',
                },
              ],
            },
            colProps: { span: 5 },
          },
          {
            field: 'createTime_begin',
            label: '开始时间',
            component: 'DatePicker',
            defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
            required: true,
            componentProps: {
              showTime: true,
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
              getPopupContainer: getAutoScrollContainer,
            },
            colProps: {
              span: 4,
            },
          },
          {
            field: 'createTime_end',
            label: '结束时间',
            component: 'DatePicker',
            defaultValue: dayjs(),
            required: true,
            componentProps: {
              showTime: true,
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
              getPopupContainer: getAutoScrollContainer,
            },
            colProps: {
              span: 4,
            },
          },
        ],
      },
      fetchSetting: {
        listField: 'records',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100'],
      },
      beforeFetch(params) {
        params.devicetype = params.devicetype ? params.devicetype + '*' : '';
        return params;
      },
    },
    exportConfig: {
      name: '操作历史列表',
      url: '/safety/ventanalyDevicesetLog/exportXls',
    },
  });
  //注册table数据
  const [registerTable, { setLoading }] = tableContext;

  onMounted(async () => {});

  defineExpose({ setLoading });
</script>

<style scoped lang="less">
  @ventSpace: zxm;
  :deep(.zxm-table-container) {
    max-height: 720px !important;
  }
  :deep(.ventSpace-table-body) {
    height: auto !important;
  }
  :deep(.zxm-picker) {
    height: 30px !important;
  }
  :deep(.@{ventSpace}-picker-dropdown) {
    position: absolute !important;
    top: 35px !important;
    left: 0 !important;
  }
  .alarm-history-table {
    width: 100%;
    height: 700px;
    :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>