gasInjection-project/src/views/vent/deviceManager/comment/HistoryTable.vue

<template>
  <div class="history-table" v-if="loading">
    <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource">
      <template #form-submitBefore>
        <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
  //ts语法
  import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
  import { FormSchema } from '/@/components/Form/index';
  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';

  const props = defineProps({
    columnsType: {
      type: String,
    },
    columns: {
      type: Array,
      // required: true,
      default: () => [],
    },
    historyColumns: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
    },
    scroll: {
      type: Object,
      default: { y: 0 },
    },
    formSchemas: {
      type: Array<FormSchema>,
      default: () => [],
    },
  });
  //获取分站数据
  const getDeviceListApi = (params) => defHttp.get({ url: '/safety/ventanalySubStation/alllist', params });
  const historyTable = ref();
  const loading = ref(false);
  const dataSource = ref([]);

  const emit = defineEmits(['change']);

  const historyType = ref('');
  const deviceKide = ref('');
  const columns = ref([]);
  const deviceOptions = ref([]);
  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
  const deviceTypeStr = ref('');
  loading.value = true;

  watch(
    () => {
      return props.columnsType;
    },
    async (newVal) => {
      if (!newVal) return;
      deviceKide.value = newVal;
      if (historyTable.value) {
        getForm().resetFields();
        // getForm().updateSchema();
        // getForm();
      }
      dataSource.value = [];
      await getDeviceList();
      nextTick(() => {
        getDataSource();
      });

      if (historyTable.value) reload();
    },
    {
      immediate: true,
    }
  );

  watch(
    () => props.scroll.y,
    (newVal) => {
      if (newVal) {
        tableScroll.value = { y: newVal - 100 };
      } else {
        tableScroll.value = {};
      }
    }
  );

  watch(
    () => props.id,
    async () => {
      await getForm().setFieldsValue({});
      await getDeviceList();
    }
  );

  async function getDeviceList() {
    let result;
    const res = await getDeviceListApi({ column: 'createTime', pageNo: 1, pageSize: 10000 });
    result = res;
    if (result) {
      deviceOptions.value = [];
      deviceOptions.value = result.map((item) => {
        return {
          label: item['strinstallpos'],
          value: item['id'],
          strinstallpos: item['strinstallpos'],
        };
        // return { label: item['strname'], value: item['id']}
      });
    }
    deviceOptions.value.unshift({ label: '--请选择设备--', value: '', strinstallpos: '' });
  }

  function resetFormParam() {
    const formData = getForm().getFieldsValue();
    const pagination = getPaginationRef();
    formData['pageNo'] = pagination['current'];
    formData['pageSize'] = pagination['pageSize'];
    formData['column'] = 'createTime';
    const params = {
      pageNo: pagination['current'],
      pageSize: pagination['pageSize'],
      column: pagination['createTime'],
      starttime_begin: formData['starttime_begin'],
      starttime_endtime: formData['starttime_endtime'],
      nsubstationid: formData['nsubstationid'],
      nwartype: 1001,
    };
    return params;
  }

  async function getDataSource() {
    dataSource.value = [];
    setLoading(true);
    const params = await resetFormParam();
    const result = await defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params: params });
    // if (result['datalist']['records'].length > 0) {
    //   dataSource.value = result['datalist']['records'].map((item: any) => {
    //     return Object.assign(item, item['readData']);
    //   });
    // } else {
    //   dataSource.value = [];
    // }
    dataSource.value = result['records'];

    setLoading(false);
  }

  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    tableProps: {
      // api: list,
      columns: props.historyColumns ? props.historyColumns : (props.historyColumns as any[]),
      canResize: true,
      showTableSetting: false,
      showActionColumn: false,
      bordered: false,
      size: 'small',
      scroll: tableScroll,
      showIndexColumn: true,
      tableLayout: 'auto',
      formConfig: {
        labelAlign: 'left',
        showAdvancedButton: false,
        showSubmitButton: false,
        showResetButton: false,
        baseColProps: {
          xs: 24,
          sm: 24,
          md: 24,
          lg: 9,
          xl: 7,
          xxl: 4,
        },
        schemas:
          props.formSchemas.length > 0
            ? props.formSchemas
            : [
                {
                  field: 'starttime_begin',
                  label: '开始时间',
                  component: 'DatePicker',
                  defaultValue: dayjs().startOf('date'),
                  required: true,
                  componentProps: {
                    showTime: true,
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    getPopupContainer: getAutoScrollContainer,
                  },
                  colProps: {
                    span: 4,
                  },
                },
                {
                  field: 'starttime_endtime',
                  label: '结束时间',
                  component: 'DatePicker',
                  defaultValue: dayjs(),
                  required: true,
                  componentProps: {
                    showTime: true,
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    getPopupContainer: getAutoScrollContainer,
                  },
                  colProps: {
                    span: 4,
                  },
                },
                {
                  label: '查询设备',
                  field: 'nsubstationid',
                  component: 'Select',
                  defaultValue: props.id ? props.id : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
                  componentProps: {
                    showSearch: true,
                    filterOption: (input: string, option: any) => {
                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
                    },
                    options: deviceOptions,
                    onChange: (e, option) => {
                      if (option) {
                        historyType.value = option.value; // 使用选项的value（即id）更新historyType
                      }
                    },
                  },
                  colProps: {
                    span: 4,
                  },
                },
                {
                  field: 'nwartype',
                  required: true,
                  componentProps: {
                    valueFormat: '1001',
                  },
                  colProps: {
                    span: 4,
                  },
                },
              ],
      },
      // fetchSetting: {
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100'],
        showQuickJumper: false,
      },
      beforeFetch() {
        const newParams = { ...resetFormParam() };
        // debugger;
        return newParams;
      },
    },
  });

  //注册table数据
  const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;

  watchEffect(() => {
    if (historyTable.value && dataSource) {
      const data = dataSource.value || [];
      emit('change', data);
    }
  });

  onMounted(async () => {
    await getDeviceList();
    if (deviceOptions.value[0]) {
      historyType.value = deviceOptions.value[0]['strinstallpos'] || deviceOptions.value[0]['id'];
      nextTick(async () => {
        await getDataSource();
      });
    }
  });
  defineExpose({ setLoading });
</script>

<style scoped lang="less">
  @import '/@/design/theme.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}-form {
        padding: 0 !important;
        border: none !important;
        margin-bottom: 0 !important;
        .@{ventSpace}-picker,
        .@{ventSpace}-select-selector {
          width: 100% !important;
          height: 100%;
          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;
      }
    }
    .pagination-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .page-num {
        border: 1px solid #0090d8;
        padding: 4px 8px;
        margin-right: 5px;
        color: #0090d8;
      }
      .btn {
        margin-right: 10px;
      }
    }
  }
</style>
<style lang="less" scoped>
  :deep(.zxm-picker-dropdown) {
    top: 50px !important;
    left: 5px !important;
  }
</style>