qingban-SPC/src/views/statistic/report/index.vue

<template>
  <div class="container1">
    <div class="header">
      <Search
        ref="searchref"
        :searchOptions="searchOptons"
        @data-list="getTableData"
      />
    </div>
    <div class="table">
      <!-- <el-button class="btn" style="margin-bottom: 5px" @click="showPrint"
        >打印</el-button
      > -->
      <el-table
        :data="tableData"
        border
        :style="{ height: maxHeight - 40 + 'px' }"
      >
        <el-table-column prop="reportCode" label="报告编码" />
        <el-table-column prop="reportName" label="报告名称" />
        <el-table-column prop="creator" label="创建人" />
        <el-table-column prop="created" label="创建时间" />
        <el-table-column
          align="center"
          width="160"
          prop=""
          label="操作"
          id="opear"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              class="btn"
              style="height: 25px"
              @click="toLook(row)"
              link
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination />
    </div>
    <ReportView v-model="showStatus" :tableData="tableData" />
  </div>
</template>

<script setup>
import Search from "@/components/Search/index.vue";
import ReportView from "@/components/ReportView/index.vue";
import { useDictionaryStore } from "@/store";
import { getData } from "@/api/report";
import Pagination from "@/components/Pagination/index.vue";
const searchref = ref(null);
const showPrint = () => {
  showStatus.value = true;
};
const toLook = (row) => {
  const fullUrl = window.location.href;
  const parts = fullUrl.split("/");
  const thirdSlashIndex = 2;
  const truncatedUrl = parts.slice(0, thirdSlashIndex + 1).join("/");
  window.open(truncatedUrl + "/" + row.fileUrl, "_blank");
};
const currentOption = reactive({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 40],
});
const getCurrentMonthStartAndEndDates = () => {
  // 获取当前日期
  let now = new Date();

  // 获取当前月份的第一天
  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);

  // 获取当前月份的最后一天
  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);

  // 格式化日期为'YYYY-MM-DD'格式
  function formatDate(date) {
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, "0");
    let day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }

  // 返回包含开始和结束日期的数组
  return [formatDate(startDate), formatDate(endDate)];
};
const tableData = ref([]);
const getTableData = async () => {
  const { data } = await getData({
    pageNo: currentOption.page,
    pageSize: currentOption.limit,
    startTime: searchref.value.searchForm.time
      ? searchref.value.searchForm.time[0]
      : null,
    endTime: searchref.value.searchForm.time
      ? searchref.value.searchForm.time[1]
      : null,
    reportCode: searchref.value.searchForm.reportCode,
    reportName: searchref.value.searchForm.reportName,
  });
  tableData.value = data.records;
  currentOption.total = data.totalCount;
};
const showStatus = ref(false);
const searchOptons = [
  {
    label: "创建时间",
    prop: "time",
    type: "daterange",
  },
  {
    label: "报告编号",
    prop: "reportCode",
    type: "input",
  },
  {
    label: "报告名称",
    prop: "reportName",
    type: "input",
  },
];
const maxHeight = ref(null);
const setHeight = () => {
  maxHeight.value = document.querySelector(".table").clientHeight - 30;
};
onMounted(async () => {
  searchref.value.searchForm.time = getCurrentMonthStartAndEndDates();
  setHeight();
  getTableData();
});
</script>

<style scoped lang="scss">
.btn {
  height: 25px;
}
.container1 {
  background-color: white;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: auto;
  }
  .table {
    flex: 1;
    padding-bottom: 20px;
  }
}
</style>