cost_control_ui/src/views/EnergyConsumptionStatisticsReport.vue

<template>
  <div class="container">
    <div class="query-container">
      <div>
        <span class="formTitle">账期:</span>
        <el-date-picker v-model="selectedSMonth" type="month" format="YYYYMM" value-format="YYYYMM" placeholder="请选择账期"
          :disabled-date="checkSMonth" />
        <el-button type="primary" class="btn" @click="refreshTableData(selectedSMonth)">查询</el-button>
      </div>
    </div>
    <div class="content">
      <div>
        <div class="contentTitle">节能减排</div>
      </div>
      <div>
        <el-table :data="tableData" stripe style="width: 100%" border class="Ttable"
          :cell-style="{ borderColor: '#ebeef5' }" :header-cell-style="{ borderColor: '#ebeef5' }">
          <el-table-column prop="month" align="center" label="账期" />
          <el-table-column prop="displayName" align="center" label="文件名称" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" plain size="small" @click="handleDownload(scope)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { postForReportInfoBySMonth, postForSMonthAll, postForDownload } from '../request/reportInfo';

// 选中的账期
const selectedSMonth = ref("")
// 允许的账期
const allSMonthSet = ref(new Set())

const tableData = ref([])

const checkSMonth = (time) => {
  const month = time.getMonth() < 9 ? `0${time.getMonth() + 1}` : `${time.getMonth() + 1}`
  const sMonth = `${time.getFullYear()}${month}`
  return !allSMonthSet.value.has(sMonth)
}

const refreshTableData = (month) => {
  console.log(month);
  postForReportInfoBySMonth(month).then(res => {
    console.log(res);
    if (res.success) {
      tableData.value = res.data
    } else {
      ElMessage.error("出错了")
    }
  }).catch(() => ElMessage.error("出错了"))
}

// TODO download还未实现
const handleDownload = (scope) => {
  postForDownload(scope.row)
    .then(res => console.log(res))
    .catch(() => ElMessage.error("出错了"))
}

onMounted(() => {
  postForSMonthAll().then(res => {
    if (res.success) {
      allSMonthSet.value = new Set(res.data)
      selectedSMonth.value = res.data[0]
      refreshTableData(selectedSMonth.value)
    } else {
      ElMessage.error("出错了")
    }
  }).catch(() => ElMessage.error("出错了"))
})

</script>

<style lang="css" scoped>
.container {
  /* background-color: #f0f2f5; */
  padding: 10px;
}

.query-container {
  background-color: #ffffff;
  height: 60px;
  /* margin: 10px; */
  vertical-align: middle;
  line-height: 60px;
  padding: 0 20px;
}

.query-container .formTitle {
  margin-right: 10px;
}

.query-container .btn {
  margin-left: 10px;
}

.content {
  padding: 0 15px 15px;
}

.contentTitle {
  width: 100%;
  border-left: 5px solid #409eff;
  padding-left: 10px;
  height: 20px;
  line-height: 20px;
  margin: 30px 0 10px;
}
</style>