前端业务逻辑还差download未实现

README.md

@@ -2,9 +2,13 @@
 
 [ElementPlus中文官网](https://element-plus.gitee.io/zh-CN/component/overview.html)
 
+[MMDN](https://developer.mozilla.org/zh-CN/)
+
 ```sh
 npm create vite@latest
 
 cnpm install element-plus --save
 cnpm install vue-router --save
+
+cnpm install axios --save
 ```

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "element-plus": "^2.6.0",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0"

src/request/reportInfo.js

@@ -0,0 +1,10 @@
+import request from "./request"
+
+export const postForReportInfoBySMonth = async smonth =>
+    await request.post("/cost/api/report/smonth", smonth)
+
+export const postForSMonthAll = async () =>
+    await request.post("/cost/api/report/smonth/all")
+
+export const postForDownload = async reportInfo =>
+    await request.post("/cost/api/report/download", reportInfo)

src/request/request.js

@@ -0,0 +1,26 @@
+/**
+ * 封装axios，添加统一的拦截器
+ */
+import axios from "axios"
+
+const request = axios.create({
+    timeout: 10000
+})
+
+// 请求拦截器
+request.interceptors.request.use(
+    req => req,
+    error => Promise.reject(error)
+)
+
+// 响应拦截器
+request.interceptors.response.use(
+    // 解一层包装
+    res => res.data,
+    error => {
+        console.log(error);
+        Promise.reject("出错了!")
+    }
+)
+
+export default request;

src/views/EnergyConsumptionStatisticsReport.vue

@@ -3,13 +3,9 @@
     <div class="query-container">
       <div>
         <span class="formTitle">账期:</span>
-        <el-date-picker
-          v-model="value2"
-          type="month"
-          value-format="yyyyMM"
-          placeholder="请选择账期"
-        />
-        <el-button type="primary" class="btn">查询</el-button>
+        <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">
@@ -17,20 +13,13 @@
         <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="smonth" align="center" label="账期" />
-          <el-table-column
-            prop="display_name"
-            align="center"
-            label="文件名称"
-          />
+        <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">下载</el-button>
+              <el-button type="primary" plain size="small" @click="handleDownload(scope)">下载</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -39,33 +28,59 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      value2: "",
-      tableData: [
-        {
-          smonth: "202401",
-          display_name: "report_205_202401.xls",
-        },
-        {
-          smonth: "202401",
-          display_name: "report_IDC_202401.xlsx",
-        },
-        {
-          smonth: "202401",
-          display_name: "report_节能减排报表_202401.xlsx",
-        },
-      ],
-    };
-  },
-};
+<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 {
-  /* TODO 这里的背景色应该占满整个屏幕，并且不需要有滚动条 */
   /* background-color: #f0f2f5; */
   padding: 10px;
 }
@@ -78,15 +93,19 @@ export default {
   line-height: 60px;
   padding: 0 20px;
 }
+
 .query-container .formTitle {
   margin-right: 10px;
 }
+
 .query-container .btn {
   margin-left: 10px;
 }
+
 .content {
-    padding: 0 15px 15px;
+  padding: 0 15px 15px;
 }
+
 .contentTitle {
   width: 100%;
   border-left: 5px solid #409eff;

vite.config.js

@@ -4,4 +4,11 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    proxy: {
+      "/cost/api": {
+        target: "http://127.0.0.1:18000"
+      }
+    }
+  }
 })