yjdp-web/src/views/emergencyCommandMap/RightSection/knowledgeWarehouse.vue

<template>
  <Dialog custom-show type="xl" title="知识库列表" hide-footer @close="closeDialog">
    <!-- 表格组件 -->
    <div class="common-table">
      <div class="table-header">
        <div class="td">报告编号</div>
        <div class="td">报告名称</div>
        <div class="td">主题词</div>
        <div class="td">事件类型</div>
        <div class="td">摘要</div>
        <div class="td">来源单位</div>
        <div class="td">发布时间</div>
      </div>
      <div v-for="(item, index) in tableData" :key="index" class="tr">
        <div class="td">{{ item.reportId }}</div>
        <div class="td">{{ item.reportName }}</div>
        <div class="td">{{ item.subject }}</div>
        <div class="td">
          <dict-tag :options="mm_event_type" :value="item.eventType" />
        </div>
        <div class="td">{{ item.summary }}</div>
        <div class="td">{{ item.publishingUnit }}</div>
        <div class="td">{{ item.publishDate }}</div>
      </div>
    </div>
    <div class="footer">
      <el-pagination
        background
        :hide-on-single-page="true"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @current-change="handleChangePage"
      />
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { fetchReports } from '@/api/knowledge/index';
import { parseTime } from '@/utils/ruoyi';

const emit = defineEmits(['update:show']);
const closeDialog = () => {
  emit('update:show', false);
};
const proxy = getCurrentInstance()?.proxy;
const { mm_event_type } = toRefs<any>(
  proxy?.useDict('mm_event_type')
);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  sortBy: 'publishDate',
  sortOrder: 'desc'
});
let total = ref(0);
const tableData = ref([]);

const handleChangePage = (newNum) => {
  queryParams.pageNum = newNum;
  getList();
};

// getLists是获取列表数据的方法
const getList = async () => {
  fetchReports(queryParams).then((res) => {
    let data = res.data;
    data.forEach((item) => {
      item.publishDate = parseTime(item.publishDate, '{y}-{m}-{d} {h}:{i}:{s}');
    });
    total.value = res.total;
    tableData.value = data;
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.footer {
  height: 64px;
  display: flex;
  justify-content: flex-end;
  margin: 30px 0;
  .pagination-container {
    height: 64px;
    margin: 0;
  }
  :deep(.el-pagination__total) {
    color: #a7ccdf;
    font-size: 32px;
  }
  :deep(.el-pagination) {
    .btn-next,
    .btn-prev {
      background-color: transparent;
      border: none;
      .el-icon {
        font-size: 22px;
        color: #a7ccdf;
      }
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      background-color: transparent;
      border: none;
    }
    .el-pager li {
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 38px;
      color: #a7ccdf;
      background-color: #0e3064;
      border: 1px solid #0c57a7;
      margin: 0 6px;
      &:hover {
        background-color: #038dff;
        border: 1px solid #038dff;
      }
    }
    .el-pager li.is-active {
      background-color: #038dff;
      border: 1px solid #038dff;
    }
    .el-pagination__goto {
      font-size: 38px;
      color: #a7ccdf;
    }
  }
}
</style>