merge

dsk-operate-ui/src/api/projectCostLedger/index.js

@@ -78,7 +78,7 @@ export function deleteCbProjectFile(data) {
   return request({
     url: '/cbProjectFile/deleteCbProjectFile',
     method: 'Delete',
-    data:data
+    data: data
   });
 }
 
@@ -160,14 +160,14 @@ export function pushProjectvolume(data) {
   return request({
     url: '/cb/cost/measures/push/project/volume',
     method: 'post',
-    data:data
+    data: data
   });
 }
 
 //措措施费-获取上一次推送工程量
 export function projectVolume(data) {
   return request({
-    url: '/cb/cost/measures/last/project/volume/'+data,
+    url: '/cb/cost/measures/last/project/volume/' + data,
     method: 'GET',
   });
 }
@@ -186,6 +186,17 @@ export const getFeedSummaryMenuTreeApi = (params = {}) => request({
   params
 });
 
+/**
+ * 获取已记录月份集合
+ * @param {*} params 
+ * @returns 
+ */
+export const getFeedSummaryMonthListApi = (params = {}) => request({
+  url: "/cb/quantity/summary/monthList",
+  method: "get",
+  params
+});
+
 /**
  * 获取科目月份列表
  * @param {{

dsk-operate-ui/src/components/DskSkeleton/index.vue

+<template>
+  <div class="dsk-skeleton-outer-container">
+    <el-skeleton :animated="true" class="dsk-skeleton-inner-container">
+      <template slot="template">
+        <template v-for="item of count">
+          <div :key="item">
+            <el-skeleton-item variant="text" style="width: 60%;" />
+            <el-skeleton-item variant="text" style="width: 100%;" />
+            <el-skeleton-item variant="text" style="width: 100%;" />
+            <el-skeleton-item variant="text" style="width: 100%;" />
+          </div>
+        </template>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dskSkeleton',
+  data() {
+    return {
+      count: 0
+    };
+  },
+  created() {
+    this.getSkeletonCount();
+  },
+  methods: {
+    async getSkeletonCount() {
+      try {
+        await this.$nextTick();
+        const skeletonContainer = this.$el.querySelector(".dsk-skeleton-inner-container");
+        const height = skeletonContainer.offsetHeight;
+        // 160高度为一组
+        const group = Math.round(height / 160);
+        this.count = group;
+      } catch (error) {
+
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dsk-skeleton-outer-container {
+  padding: 0px 16px;
+  background: #fff;
+  z-index: 999;
+
+  .dsk-skeleton-inner-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+.el-skeleton__item {
+  height: 20px;
+  border-radius: 0;
+  margin-top: 16px;
+  background: #f0f0f0;
+}
+
+.el-skeleton {
+  .el-skeleton__item:last-of-type {
+    /* margin-bottom: 16px; */
+  }
+}
+</style>

dsk-operate-ui/src/views/projectCostLedger/detail/components/FeedSummary/index.vue

@@ -2,7 +2,7 @@
   <div class="feed-summary-container">
     <div class="feed-summary-inner">
       <div class="left-side-menu">
-        <project-side-menu :menuTree="menuTreeList" :menuOptions="menuOptions" :unique-opened="false" :default-active="defaultActive"
+        <project-side-menu :menuTree="menuTreeList" :menuOptions="menuOptions" :unique-opened="false" :default-active="currentNodeName"
           @select="menuSelect">
           <template slot="房建类成本科目-1">
             <img src="@/assets/images/projectCostLedger/icon_cost_detail_2.svg" alt="">
@@ -17,8 +17,12 @@
       <div class="right-table-list-container">
         <div class="project-table-list-header">
           <div class="project-table-list-haeder-left">
-            <el-date-picker v-model="recordDate" type="month" placeholder="选择月" format="yyyy年MM月" value-format="yyyy-MM"
-              class="project-record-date" @change="timeChange"></el-date-picker>
+            <!-- <el-date-picker v-model="recordDate" type="month" placeholder="选择月" format="yyyy年MM月" value-format="yyyy-MM"
+              class="project-record-date" @change="timeChange"></el-date-picker> -->
+            <el-select v-model="recordDate" placeholder="请选择年月" class="project-month-select-options" clearable @change="monthChange">
+              <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
           </div>
           <div class="project-table-list-haeder-right">
             <!-- 实体工程材料单位换算 -->
@@ -29,16 +33,24 @@
             <dsk-table-header-setting :settingList="formColum" @settingChange="settingChange"></dsk-table-header-setting>
           </div>
         </div>
+        <!-- 数据列表部分 -->
+        <div class="project-feedsummary-list-container">
+          <dsk-skeleton v-if="tableLoading"></dsk-skeleton>
+          <table-list-com :tableData="tableDataList" v-else-if="!tableLoading" :tableDataTotal="total" :paging="false"></table-list-com>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import ProjectSideMenu from "@/views/projectCostLedger/detail/components/ProjectSideMenu";
-import { getFeedSummaryMenuTreeApi, getFeedSummaryListApi } from "@/api/projectCostLedger";
+import { getFeedSummaryMenuTreeApi, getFeedSummaryMonthListApi, getFeedSummaryListApi } from "@/api/projectCostLedger";
 import DskTableHeaderSetting from "@/components/DskTableHeaderSetting";
+import DskSkeleton from "@/components/DskSkeleton";
 import TableListCom from "@/components/TableListCom";
 import { v4 } from 'uuid';
+import dayjs from "dayjs";
+import { cloneDeep } from "lodash-es";
 export default {
   name: "feedSummary",
   props: {
@@ -73,7 +85,8 @@ export default {
   components: {
     ProjectSideMenu,
     DskTableHeaderSetting,
-    TableListCom
+    TableListCom,
+    DskSkeleton
   },
   data() {
     return {
@@ -83,16 +96,28 @@ export default {
       },
       comProjectDetailInfo: {},
       comProjectId: "",
-      defaultActive: "",
       menuTreeList: [],
+      // 加载数据列表
+      tableLoading: false,
+      total: 0,
       // 列表表头
       formColum: [
         { label: '序号', prop: "staticSerialNumber", type: "index", lock: true, fixed: false, uid: v4() },
       ],
+      // 已记录月份集合
+      monthList: [],
+      // 源数据月份
+      originMonthList: [],
       // 当前查询的数据月份
       recordDate: "",
+      // 历史查询月份
+      oldRecordDate: "",
       // 当前选中子菜单的父类名称
-      currentParentName: ""
+      currentParentName: "",
+      // 当前选中的成本科目
+      currentNodeName: "",
+      // 数据列表
+      tableDataList: []
     };
   },
   //可访问data属性
@@ -109,10 +134,64 @@ export default {
       try {
         const { projectId, cbStage } = detail;
         if (!projectId) return;
-        await this.getFeedSummaryMenuTree({
+        const params = {
           projectId,
           cbStage
-        });
+        };
+        await this.getFeedSummaryMenuTree(params);
+        await this.getFeedSummaryMonthList(params);
+        await this.initDefaultSetting();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async initDefaultSetting() {
+      try {
+        const defaultCurrent = this.findMenuNode(this.menuTreeList, "结构劳务分包");
+        // 默认选中结构劳务分包
+        if (defaultCurrent) {
+          this.currentNodeName = defaultCurrent.name;
+          const params = this.createRequestConditions();
+          await this.getFeedSummaryList(params);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    createRequestConditions() {
+      const { projectId, cbStage } = this.comProjectDetailInfo;
+      const params = {
+        projectId,
+        cbStage
+      };
+      params["cbSubjectName"] = this.currentNodeName;
+      // 判断当月是否存在于server返回month集合中
+      const _now = dayjs(new Date().valueOf()).format("YYYYMM");
+      if (this.includeNowMonth(_now)) {
+        params["recordDate"] = _now;
+      }
+      return params;
+    },
+    // 返回当前月是否在server month集合中
+    includeNowMonth(time) {
+      return this.originMonthList.includes(time);
+    },
+    findMenuNode(tree, nodeName) {
+      for (const item of tree) {
+        if (item.name == nodeName) return item;
+        if (item.children instanceof Array) {
+          const result = this.findMenuNode(item.children, nodeName);
+          if (result) return result;
+        }
+      }
+    },
+    async getFeedSummaryList(params = {}) {
+      try {
+        const list = await getFeedSummaryListApi(params);
+        if (list.code == 200 && list.data instanceof Array) {
+          this.tableDataList = list.data;
+          this.total = list.data.length;
+        }
       } catch (error) {
 
       }
@@ -120,7 +199,7 @@ export default {
     async getFeedSummaryMenuTree(params) {
       try {
         const result = await getFeedSummaryMenuTreeApi(params);
-        if (result.code == 200) {
+        if (result.code == 200 && result.data instanceof Array) {
           const _tempArray = result.data;
           this.menuTreeList = _tempArray;
         }
@@ -128,19 +207,58 @@ export default {
 
       }
     },
-    async getFeedSummaryList(params = {}) {
+    async getFeedSummaryMonthList(params) {
       try {
-        const list = await getFeedSummaryListApi(params);
-        if (list.code == 200 && list.data instanceof Array) {
-
+        const monthList = await getFeedSummaryMonthListApi(params);
+        if (monthList.code == 200 && monthList.data instanceof Array) {
+          const data = monthList.data;
+          this.originMonthList = cloneDeep(data);
+          const _now = dayjs(new Date().valueOf()).format("YYYYMM");
+          this.recordDate = _now;
+          this.oldRecordDate = _now;
+          // 默认以当前月数据为准 若不包含当前月 需要手动push数据 
+          if (!data.includes(_now)) {
+            data.push(_now);
+            data.push("202401");
+            data.push("202312");
+          }
+          this.monthList = data.map(item => {
+            return {
+              label: dayjs(item).format("YYYY年MM月"),
+              value: item
+            };
+          });
         }
       } catch (error) {
 
       }
     },
+    monthChange(month) {
+      // 当前月
+      const _now = dayjs(new Date().valueOf()).format("YYYYMM");
+      // 请求列表参数
+      const params = this.createRequestConditions();
+      // 清空了年月默认选中当前月
+      if (!month) {
+        this.recordDate = _now;
+        // 如果命中的旧月份 等于当前月 说明清空的是当前月 不调用接口
+        if (this.oldRecordDate == _now) return;
+      } else {
+        // 正常选择
+        params["recordDate"] = month;
+        // 记录历史切换年月
+        this.oldRecordDate = month;
+      }
+      // 获取列表数据
+      this.getFeedSummaryList(params);
+    },
     menuSelect(currentId, currentTemp) {
+      this.currentNodeName = currentId;
       const parentName = currentTemp.parent ? this.getCurrentType(currentTemp.parent) : currentId;
       if (parentName) this.currentParentName = parentName;
+      // 请求数据列表
+      const params = this.createRequestConditions();
+      this.getFeedSummaryList(params);
     },
     getCurrentType(parent) {
       if (parent.level == 2) {
@@ -220,6 +338,29 @@ export default {
               display: none;
             }
           }
+          .project-month-select-options {
+            width: 140px;
+            .el-input__inner {
+              height: 32px;
+              line-height: 32px;
+              padding: 0px 12px;
+              border-radius: 2px;
+              border-color: #dcdfe6;
+              font-size: 14px;
+              color: #232323;
+              font-weight: 350;
+            }
+            .el-input__suffix {
+              right: 12px;
+              .el-input__icon {
+                line-height: 32px;
+                width: auto;
+              }
+            }
+            .el-input__prefix {
+              display: none;
+            }
+          }
         }
 
         .project-table-list-haeder-right {
@@ -243,6 +384,11 @@ export default {
           }
         }
       }
+
+      .project-feedsummary-list-container {
+        width: 100%;
+        height: calc(100% - 48px);
+      }
     }
   }
 }