fix

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

@@ -2,17 +2,12 @@
   <div class="custom-table-list-com-ins"
     :class="{'is-empty-table' : !tableDataTotal,'no-pagination' : !hasQueryParams,'auto-max-height' : maxHeight,'has-y-Scroll' : maxHeight && hasYScroll}"
     :style="maxBodyFixedStyle">
-    <div class="table-item">
-      <el-table v-if="tableDataTotal>0" class="custom-table" v-loading="tableLoading" :data="tableData" element-loading-text="Loading"
+    <div class="custom-table-item">
+      <el-table v-if="tableDataTotal>0" class="custom-table" v-loading="comTableLoading" :data="tableData" element-loading-text="加载中"
         ref="customTableRef" border fit highlight-current-row :default-sort="defaultSort?defaultSort:{}" @sort-change="sortChange"
         @selection-change="selectionChange" :cell-class-name="cellClassName" :cell-style="cellStyle" :row-class-name="rowClassName"
-        :row-style="rowStyle" :height="height" :maxHeight="comMaxHeight" v-sticky-header="stickyHeader">
-        <el-table-column type="selection" :width="needSelection.width ? needSelection.width : '38px'" v-if="needSelection.flag"
-          :fixed="needSelection.fixed" :align="needSelection.align" :show-overflow-tooltip="needSelection.showOverflowTooltip">
-        </el-table-column>
-        <el-table-column type="index" v-if="isIndex" label="序号" :width="flexWidth(tableData)" align="left" :fixed="indexFixed" :resizable="false">
-          <template slot-scope="scope">{{pagingHandler(hasQueryParams,queryParams,scope)}}</template>
-        </el-table-column>
+        :row-style="rowStyle" :row-key="rowKey" :lazy="lazy" :load="loadFn" :tree-props="treeOptions" :height="height" :maxHeight="comMaxHeight"
+        v-sticky-header="stickyHeader">
 
         <!-- 列二次封装 -->
         <template v-for="(item,index) of formColum">
@@ -57,20 +52,6 @@ export default {
     maxHeight: {
       type: [Boolean, Number]
     },
-    isIndex: {
-      type: Boolean,
-      default: false
-    },
-    needSelection: {
-      type: Object,
-      default: () => ({
-        flag: false,
-        width: "39px",
-        fixed: false,
-        align: "left",
-        showOverflowTooltip: false
-      })
-    },
     cellClassName: {
       type: Function,
       default: () => { }
@@ -87,6 +68,25 @@ export default {
       type: Function,
       default: () => { }
     },
+    rowKey: {
+      type: [String, Number],
+      default: "id"
+    },
+    // 是否树形结构懒加载
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    // 懒加载函数
+    loadFn: {
+      type: Function,
+      default: () => { }
+    },
+    // 懒加载配置字段映射
+    treeOptions: {
+      type: Object,
+      default: () => ({})
+    },
     // 吸顶偏移量
     stickyHeader: {
       type: Object,
@@ -147,7 +147,8 @@ export default {
       headerLastBlockHeight: 0,
       hasYScroll: false,
       observer: null,
-      resizeTimer: null
+      resizeTimer: null,
+      comTableLoading: this.tableLoading
     };
   },
   watch: {
@@ -166,6 +167,11 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    tableLoading: {
+      handler(newValue) {
+        this.comTableLoading = newValue;
+      }
     }
   },
   computed: {
@@ -303,7 +309,7 @@ export default {
 .custom-table-list-com-ins {
   /* 空数据样式 */
   &.is-empty-table {
-    .table-item {
+    .custom-table-item {
       max-height: unset;
       height: 100%;
     }
@@ -312,7 +318,7 @@ export default {
   /* maxHeight自适应样式 */
   &.auto-max-height {
     height: 100%;
-    ::v-deep .table-item {
+    ::v-deep .custom-table-item {
       // 原滚动条为6px  现在多10px
       .el-table {
         /* 右侧fixed列 */
@@ -350,7 +356,7 @@ export default {
 
     // 是否存在Y轴滚动条
     &.has-y-Scroll {
-      ::v-deep .table-item {
+      ::v-deep .custom-table-item {
         .el-table {
           /* 右侧fixed列 */
           .el-table__fixed-right {
@@ -366,12 +372,12 @@ export default {
 
   /* 不需要分页 或没有分页参数 */
   &.no-pagination {
-    ::v-deep .table-item {
+    ::v-deep .custom-table-item {
       max-height: 100%;
     }
   }
 
-  ::v-deep .table-item {
+  ::v-deep .custom-table-item {
     width: 100%;
     max-height: calc(100% - 40px);
 
@@ -437,7 +443,7 @@ export default {
         padding-right: 12px;
         padding-left: 12px;
         line-height: 21px;
-        font-size: 12px;
+        font-size: 14px;
         font-weight: 400;
       }
 

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

@@ -21,7 +21,7 @@
       <div class="right-table-list-container">
         <div class="project-table-list-header">
           <div class="project-table-list-haeder-left">
-            <el-select v-model="recordDate" placeholder="请选择年月" class="project-month-select-options" clearable @change="monthChange">
+            <el-select v-model="expenseDate" placeholder="请选择年月" class="project-month-select-options" clearable @change="monthChange">
               <el-option v-for="item in monthList" :key="item.expenseDate" :label="item.label" :value="item.expenseDate">
               </el-option>
             </el-select>
@@ -35,8 +35,8 @@
           <dsk-skeleton v-if="tableLoading"></dsk-skeleton>
           <!-- 非实体工程材料列表 -->
           <el-form :model="dataForm" ref="feedSummaryForm" :show-message="false" v-else-if="!tableLoading" class="feed-summary-form">
-            <custom-table :tableData="dataForm.tableDataList" :formColum="formColum" :max-height="true" :tableDataTotal="total" :paging="false"
-              :cell-class-name="cellClassName">
+            <custom-table :tableData="dataForm.tableDataList" :formColum="formColum" :max-height="true" :row-key="rowKey" :lazy="true"
+              :load-fn="tableLazyLoad" :tree-options="treeOptions" :tableDataTotal="total" :paging="false" :cell-class-name="cellClassName">
             </custom-table>
           </el-form>
         </div>
@@ -53,6 +53,13 @@ import { v4 } from 'uuid';
 import dayjs from "dayjs";
 import { cloneDeep } from "lodash-es";
 import { add } from "@/utils/decimal";
+
+// 可编辑字段
+const editPropNames = [
+  "taxInclusiveExpense",
+  "taxExclusiveExpense",
+];
+
 export default {
   name: "costSummary",
   props: {
@@ -81,9 +88,9 @@ export default {
         this.comProjectId = newValue;
       }
     },
-    recordDate: {
+    expenseDate: {
       handler(newValue, oldValue) {
-        this.oldRecordDate = newValue;
+        this.oldExpenseDate = newValue;
       }
     }
   },
@@ -118,10 +125,16 @@ export default {
       total: 0,
       // 列表表头
       formColum: [
-        // { label: '序号', prop: "staticSerialNumber", type: "index", lock: true, width: "53", fixed: false, uid: v4() },
-        // { label: '操作', prop: "action-field-bar", width: "99", uid: v4(), fixed: "right" },
+        { label: '序号', prop: "number", width: "53", uid: v4() },
+        { label: '名称', prop: "cbName", width: "303", uid: v4() },
       ],
       monthList: [],
+      rowKey: "id",
+      // 列表懒加载配置
+      treeOptions: {
+        children: "children",
+        hasChildren: "hasChildren"
+      },
       // 源数据月份
       originMonthList: [],
       dataForm: {
@@ -129,9 +142,9 @@ export default {
         tableDataList: [],
       },
       // 当前查询的数据月份
-      recordDate: "",
+      expenseDate: "",
       // 历史查询月份
-      oldRecordDate: "",
+      oldExpenseDate: "",
       // 当前选中子菜单的父类名称
       currentParentName: "",
       // 当前选中的成本科目
@@ -241,9 +254,9 @@ export default {
       // 判断当月是否存在于server返回month集合中 有传入的重置时间 采用重置时间
       const _now = this.getNowMonth();
       if (resetDate && this.includeNowMonth(resetDate)) {
-        params["recordDate"] = resetDate;
+        params["expenseDate"] = resetDate;
       } else if (this.includeNowMonth(_now)) {
-        params["recordDate"] = _now;
+        params["expenseDate"] = _now;
       }
       return params;
     },
@@ -270,8 +283,7 @@ export default {
           const data = monthList.data;
           this.originMonthList = cloneDeep(data);
           const _now = this.getNowMonth();
-          this.recordDate = _now;
-          // this.oldRecordDate = _now;
+          this.expenseDate = _now;
           // 默认以当前月数据为准 若不包含当前月 需要手动push数据
           if (!data.includes(_now)) {
             data.push({
@@ -301,16 +313,16 @@ export default {
       const params = this.createRequestConditions();
       // 清空了年月 默认选中当前月
       if (!month) {
-        this.recordDate = _now;
+        this.expenseDate = _now;
         // 如果命中的旧月份 等于当前月 且 不处于编辑状态 说明清空的是默认查询月 不调用接口
-        if (this.oldRecordDate == _now && !this.addActualCostEditStatus) return;
+        if (this.oldExpenseDate == _now && !this.addActualCostEditStatus) return;
       } else {
         // 正常选择
-        params["recordDate"] = month;
+        params["expenseDate"] = month;
       }
       this.resetEditStatus();
       // 获取列表数据
-      this.getFeedSummaryList(params);
+      this.getCostSummaryList(params);
     },
     monthsSort(monthList) {
       const sortResult = monthList.sort((before, after) => {
@@ -325,7 +337,18 @@ export default {
         this.tableLoading = true;
         const list = await getCostSummaryListApi(params);
         if (list.code == 200 && list.data instanceof Array) {
-          const _temp = list.data;
+          let _temp = list.data;
+          // 如果有长度循环处理字段
+          if (_temp.length) {
+            _temp = _temp.map(item => {
+              if (!item.hasChildren) {
+                item.hasChildren = false;
+              } else {
+                item.hasChildren = true;
+              };
+              return item;
+            });
+          }
           this.$set(this.dataForm, "tableDataList", cloneDeep(_temp));
           this.originTableDataList = cloneDeep(_temp);
           this.total = _temp.length;
@@ -336,6 +359,45 @@ export default {
         this.tableLoading = false;
       }
     },
+    async getCostSummaryListLazy(params = {}) {
+      try {
+        const list = await getCostSummaryListApi(params);
+        if (list.code == 200 && list.data instanceof Array) {
+          let _temp = list.data;
+          // 如果有长度循环处理字段
+          if (_temp.length) {
+            _temp = _temp.map(item => {
+              if (!item.hasChildren) {
+                item.hasChildren = false;
+              } else {
+                item.hasChildren = true;
+              };
+              return item;
+            });
+          }
+          return _temp;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 列表懒加载
+    async tableLazyLoad(row, treeNode, resolve) {
+      try {
+        const { id } = row;
+        const { cbType, expenseDate } = this.createRequestConditions();
+        const params = {
+          id,
+          cbType
+        };
+        expenseDate ? params["expenseDate"] = expenseDate : null;
+        const _lazyResult = await this.getCostSummaryListLazy(params);
+        
+        resolve([]);
+      } catch (error) {
+
+      }
+    },
     // 编辑状态下 进行了其它操作
     resetEditStatus() {
       // 当前需要编辑或者新增的成本年份
@@ -351,7 +413,7 @@ export default {
         const index = this.monthList.findIndex(item => item.value == _selectActualCostTime);
         if (index != -1) {
           this.monthList.splice(index, 1);
-          this.recordDate = this.getNowMonth();
+          this.expenseDate = this.getNowMonth();
         }
       }
     },
@@ -360,8 +422,8 @@ export default {
       this.currentNodeValue = currentId;
       const parentName = currentTemp.parent ? this.getCurrentType(currentTemp.parent) : currentId;
       if (parentName) this.currentParentName = parentName;
-      const params = this.createRequestConditions(this.recordDate);
-      this.getFeedSummaryList(params);
+      const params = this.createRequestConditions(this.expenseDate);
+      this.getCostSummaryList(params);
     },
   },
 }