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) => {
    debugger;
    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 = {
    pageNum: 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 = [];
  // }
  return result;

  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/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}-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>