sl-sfy-safety/src/views/message/reportmessage/components/LogForm.vue

<template>
  <div class="log-form">
    <BasicTable
      :columns="logColumns"
      :data-source="logList"
      :row-key="(row) => row.code"
      :pagination="{
        total: total,
        pageSize: pageSize,
        currentPage: pageNum,
        hideOnSinglePage: !logList,
      }"
      :tableSetting="{
        size: false,
        redo: false,
        fullscreen: false,
        striped: false,
        setting: false,
      }"
      :striped="true"
      ref="tableRef"
      @page-num-change="handlePageNumChange"
      @page-size-change="handlePageSizeChange"
    >
      <template #empty>
        <div class="empty-content flex flex-col items-center">
          <span class="empty-text">暂无推送记录</span>
        </div>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { BasicTable } from '@/components/Table';
import { logColumns } from '../overviewColumns';
import { logData } from '../type';
import { queryPushRecords, queryPushRecordsParams } from '../api/index';
import { storeToRefs } from 'pinia';
import useFormList from '../store/useFormList';
const formStore = useFormList();
const { type } = storeToRefs(formStore);
const props = defineProps<{
  statisticType: number;
}>();
const logList = ref<logData[]>();
const total = ref<number>(0);
const pageSize = ref<number>(10);
const pageNum = ref<number>(1);
const getLoglist = (pageNum, pageSize) => {
  const params: queryPushRecordsParams = {
    pageNum: pageNum,
    pageSize: pageSize,
    statisticType: props.statisticType,
    type: type.value,
  };
  queryPushRecords(params).then((res) => {
    logList.value = res.reportPushRecords;
    total.value = res.total;
  });
};
const handlePageNumChange = (num) => {
  pageNum.value = num;
  getLoglist(pageNum.value, pageSize.value);
};
const handlePageSizeChange = (size) => {
  pageNum.value = 1;
  pageSize.value = size;
  getLoglist(pageNum.value, pageSize.value);
};
onMounted(() => {
  getLoglist(pageNum.value, pageSize.value);
});
</script>

<style lang="scss" scoped>
::v-deep .s-table {
  .el-table__body-wrapper {
    overflow-y: auto;
  }
}
</style>