gasInjection-project/src/views/vent/safetyList/common/HistoryTable.vue

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

<script lang="ts" setup>
//ts语法
import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
import { subStationList } from '../safetyList.api';
import { historyColumns } from '../historyLsit.data';
import { FormSchema } from '/@/components/Form/index';
import { BasicTable } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import { useMethods } from '/@/hooks/system/useMethods';
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: () => [],
  },
  stationId: {
    type: String,
  },
  scroll: {
    type: Object,
    default: { y: 0 },
  },
  formSchemas: {
    type: Array<FormSchema>,
    default: () => [],
  },
});
const postExportXlsUrl = '/safety/ventanalySubStation/export158StatusLog';
//获取分站数据
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 tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
const statusMap = new Map([
  ['1', '连接成功'],
  ['0', '连接失败'],
]);
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 = [];
    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.stationId,
  async () => {
    await getForm().setFieldsValue({});
  }
);

function resetFormParam() {
  const formData = getForm().getFieldsValue();
  const pagination = getPaginationRef();
  formData['pageNo'] = pagination['current'];
  formData['pageSize'] = pagination['pageSize'];
  const params = {
    pageNo: pagination['current'],
    pageSize: pagination['pageSize'],
    createTime_begin: formData['starttime_begin'],
    createTime_end: formData['starttime_end'],
    stationId: props.stationId,
    status: formData['status'],
  };
  return params;
}

async function getDataSource() {
  dataSource.value = [];
  setLoading(true);
  const params = await resetFormParam();
  const result = await defHttp.post({ url: '/safety/ventanalySubStation/get158StatusLog', 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 = result['records'];
  // }
  // return result;

  setLoading(false);
}
//导出
// function onExportXlsFn() {
//   // const params = resetFormParam();
//   // // 判断时间间隔和查询时间区间，数据量下载大时进行提示
//   // return onExportXlsPost(params);
// }
//导入导出方法
function onExportXlsFn() {
  const { handleExportXlsPost } = useMethods();
  const params = resetFormParam();
  handleExportXlsPost('历史数据', postExportXlsUrl, params);
}

// 列表页面公共参数、方法
const { tableContext, onExportXlsPost } = 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: 6,
                },
              },
              {
                field: 'starttime_end',
                label: '结束时间',
                component: 'DatePicker',
                defaultValue: dayjs(),
                required: true,
                componentProps: {
                  showTime: true,
                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
                  getPopupContainer: getAutoScrollContainer,
                },
                colProps: {
                  span: 6,
                },
              },
              {
                label: '连接状态',
                field: 'status',
                component: 'Select',
                defaultValue: '1',
                componentProps: () => {
                  return {
                    options: [
                      { label: '连接成功', value: 1 },
                      { label: '连接失败', value: 0 },
                    ],
                  };
                },
                colProps: {
                  span: 6,
                },
              },
            ],
    },
    // fetchSetting: {
    pagination: {
      current: 1,
      pageSize: 20,
      pageSizeOptions: ['10', '30', '50', '100'],
      showQuickJumper: false,
    },

    beforeFetch() {
      const newParams = { ...resetFormParam() };
      // debugger;
      return newParams;
    },
  },
  exportConfig: {
    name: '历史列表',
    url: postExportXlsUrl,
  },
});

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

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

onMounted(async () => {
  if (props.stationId) {
    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}-zxm-select-selection-item {
          color: #00000017 !important;
        }
      }
    }
    .@{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>