fix

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

+<template>
+  <!-- 多级表头情况 -->
+  <el-table-column v-if="item.children instanceof Array && item.children.length" :label="item.label" :prop="item.prop" :width="item.width"
+    :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
+    :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false" :show-overflow-tooltip="item.showOverflowTooltip">
+    <template v-for="(child,index) of item.children">
+      <table-list-column :key="child.uid ? child.uid : index" :item="child">
+        <template v-for="(index, name) in $slots" :slot="name">
+          <slot :name="name" />
+        </template>
+        <template v-for="(index, name) in $scopedSlots" :slot="name" slot-scope="{row,$index}">
+          <slot :name="name" :data="child" :row="row" :index="$index"></slot>
+        </template>
+      </table-list-column>
+    </template>
+  </el-table-column>
+  <!-- 复选框列 -->
+  <el-table-column v-else-if="item.type === 'selection'" type="selection" :width="item.width ? item.width : '38px'" :fixed="item.fixed"
+    :align="item.align?item.align:'left'" :show-overflow-tooltip="item.showOverflowTooltip">
+  </el-table-column>
+  <!-- 序号列 -->
+  <el-table-column v-else-if="item.type === 'index'" type="index" :label="item.label ? item.label : '序号'"
+    :width="flexWidth(tableData.length,item.width,hasQueryParams)" :min-width="item.minWidth" :align="item.align?item.align:'left'"
+    :fixed="item.fixed" :resizable="false">
+    <template slot-scope="scope">{{pagingHandler(hasQueryParams,queryParams,scope)}}</template>
+  </el-table-column>
+  <!-- 正常列 -->
+  <el-table-column v-else :label="item.label" :prop="item.prop" :width="item.width ? item.width : 'auto'" :min-width="item.minWidth"
+    :align="item.align?item.align:'left'" :fixed="item.fixed" :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false"
+    :resizable="false" :show-overflow-tooltip="item.showOverflowTooltip">
+    <!-- 自定义表头 -->
+    <template v-if="item.slotHeader" slot="header">
+      <slot :name="item.slotName"></slot>
+    </template>
+    <!-- 非自定义表头 -->
+    <template slot-scope="scope">
+      <!-- 有自定义插槽 -->
+      <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item">
+        <!-- 默认取值 -->
+        {{ scope.row[item.prop] ? scope.row[item.prop] : '-' }}
+      </slot>
+      <!-- 操作栏 不需要设置slot-->
+      <slot v-else-if="item.prop == 'action-field-bar'" name="action-field-bar" :row="scope.row" :index="scope.$index" :data="item"></slot>
+      <!-- 没有插槽 -->
+      <span v-else>
+        {{ scope.row[item.prop] ? scope.row[item.prop] : '-' }}
+      </span>
+    </template>
+  </el-table-column>
+</template>
+<script>
+export default {
+  name: "TableListColumn",
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    queryParams: {
+      type: Object,
+      default: () => ({})
+    },
+    tableData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    queryParams: {
+      handler(newValue) {
+        const _temp = newValue ? newValue : {};
+        const keys = Object.keys(_temp);
+        if (keys.length) {
+          this.hasQueryParams = true;
+        } else {
+          this.hasQueryParams = false;
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  data() {
+    return {
+      hasQueryParams: this.hasQueryParams
+    };
+  },
+  //可访问data属性
+  created() {
+
+  },
+  //计算集
+  computed: {
+
+  },
+  //方法集
+  methods: {
+    flexWidth(len = 0, width = 50, hasQueryParams) {
+      if (hasQueryParams) {
+        let currentMax = this.queryParams.pageNum * this.queryParams.pageSize - this.queryParams.pageSize + len;
+        if (currentMax.toString().length > 3) {
+          width = width + (currentMax.toString().length - 3) * 10;
+        }
+      }
+      return width + 'px';
+    },
+    pagingHandler(hasQueryParams, queryParams, scope) {
+      // 有分页参数
+      if (hasQueryParams) {
+        return queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1;
+      }
+      // 不分页
+      return scope.$index + 1;
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>

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

+<template>
+  <div class="table-list-com-ins" :class="{'is-empty-table' : !tableDataTotal,'no-pagination' : !hasQueryParams}">
+    <div class="table-item">
+      <el-table v-if="tableDataTotal>0" class="fixed-table" v-loading="tableLoading" :data="tableData" element-loading-text="Loading" ref="tableRef"
+        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>
+        <!-- 列二次封装 -->
+        <template v-for="(item,index) of formColum">
+          <table-list-column v-if="item.use !== false" :key="item.uid ? item.uid : index" :tableData="tableData" :item="item">
+            <!-- 根据透传属性创建插槽 -->
+            <template v-for="(index, name) in $slots" :slot="name">
+              <slot :name="name" />
+            </template>
+            <template v-for="(index, name) in $scopedSlots" :slot="name" slot-scope="{row,index}">
+              <slot :name="name" :data="item" :row="row" :index="index"></slot>
+            </template>
+          </table-list-column>
+        </template>
+
+        <template slot="empty">
+        </template>
+      </el-table>
+
+      <div class="table-empty-container" v-else>
+        <no-data />
+      </div>
+    </div>
+
+    <div class="pagination-box" v-if="show_page && hasQueryParams && tableDataTotal>queryParams.pageSize">
+      <el-pagination background :current-page="current_page" :page-size="queryParams.pageSize" :total="tableDataTotal"
+        layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+import NoData from '@/components/NoData';
+import TableListColumn from "@/components/TableListCom/components/TableListColumn";
+export default {
+  name: "tableListCom",
+  props: {
+    height: {
+      type: [String, Number]
+    },
+    maxHeight: {
+      type: Boolean
+    },
+    isIndex: {
+      type: Boolean,
+      default: false
+    },
+    needSelection: {
+      type: Object,
+      default: () => ({
+        flag: false,
+        width: "39px",
+        fixed: false,
+        align: "left",
+        showOverflowTooltip: false
+      })
+    },
+    cellClassName: {
+      type: Function,
+      default: () => { }
+    },
+    cellStyle: {
+      type: Function,
+      default: () => { }
+    },
+    rowClassName: {
+      type: Function,
+      default: () => { }
+    },
+    rowStyle: {
+      type: Function,
+      default: () => { }
+    },
+    // 吸顶偏移量
+    stickyHeader: {
+      type: Object,
+      default: () => ({
+        offsetBottom: '0px',
+        offsetTop: "0px",
+        show: false
+      })
+    },
+    indexFixed: {
+      type: Boolean,
+      default: false
+    },
+    tableLoading: {
+      type: Boolean,
+      default: false
+    },
+    defaultSort: {
+      type: Object,
+      default: null
+    },
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    formColum: {
+      type: Array,
+      default: () => []
+    },
+    tableDataTotal: {
+      type: Number,
+      default: 0
+    },
+    queryParams: {
+      type: Object,
+      default: () => ({})
+    },
+    paging: {
+      type: Boolean,
+      default: true
+    },
+    MaxPage: {  //最大页码
+      type: Number,
+      default: 500
+    },
+  },
+  components: {
+    NoData,
+    TableListColumn
+  },
+  data() {
+    return {
+      current_page: this.queryParams.pageNum,
+      show_page: this.paging,
+      comMaxHeight: null,
+      hasQueryParams: false
+    };
+  },
+  watch: {
+    'queryParams.pageNum'(newVal, oldVal) {
+      this.current_page = newVal;
+    },
+    queryParams: {
+      handler(newValue) {
+        const _temp = newValue ? newValue : {};
+        const keys = Object.keys(_temp);
+        if (keys.length) {
+          this.hasQueryParams = true;
+        } else {
+          this.hasQueryParams = false;
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    this.maxHeight ? this.maxHeightInit() : null;
+  },
+  methods: {
+    // 自适应当前容器
+    async maxHeightInit() {
+      try {
+        await this.$nextTick();
+        /** 
+         * @type {HTMLDivElement}
+        */
+        const container = this.$el.querySelector(".table-item");
+        if (container) {
+          this.comMaxHeight = `${container.offsetHeight}px`;
+        }
+      } catch (error) {
+
+      }
+    },
+    pagingHandler(hasQueryParams, queryParams, scope) {
+      // 有分页参数
+      if (hasQueryParams) {
+        return queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1;
+      }
+      // 不分页
+      return scope.$index + 1;
+    },
+    handleCurrentChange(e) {
+      if (this.MaxPage < e) {
+        this.show_page = false;
+        this.$nextTick(() => {
+          this.current_page = this.queryParams.pageNum;
+          this.$message.warning(`对不起，最多只能访问${this.MaxPage}页`);
+          this.show_page = true;
+        });
+      } else {
+        this.$emit('handle-current-change', e);
+      }
+    },
+    handleSizeChange(e) {
+      this.$emit('handle-current-change', e);
+    },
+    sortChange(e) {
+      this.$emit('sort-change', e);
+    },
+    selectionChange(selectionArray) {
+      this.$emit("selectionChange", selectionArray);
+    },
+    flexWidth(tableData, width = 50) {
+      let currentMax = this.queryParams.pageNum * this.queryParams.pageSize - this.queryParams.pageSize + tableData.length;
+      if (currentMax.toString().length > 3) {
+        width = width + (currentMax.toString().length - 3) * 10;
+      }
+      return width + 'px';
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-list-com-ins {
+  &.is-empty-table {
+    .table-item {
+      max-height: unset;
+      height: 100%;
+    }
+  }
+
+  &.no-pagination {
+    ::v-deep .table-item {
+      max-height: 100%;
+    }
+  }
+  ::v-deep .table-item {
+    width: 100%;
+    max-height: calc(100% - 40px);
+
+    .no-line-feed {
+      display: block;
+      color: #0081ff;
+      cursor: pointer;
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .pagination-box {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    .el-table th.gutter {
+      display: table-cell !important;
+    }
+
+    .el-table--border th.gutter:last-of-type {
+      display: block !important;
+      padding-right: 16px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 16px;
+      height: 16px;
+    }
+
+    .el-scrollbar-warp::-webkit-scrollbar {
+      width: 16px;
+      height: 16px;
+    }
+
+    // 空状态容器
+    .table-empty-container {
+      width: 100%;
+      height: 100%;
+      min-height: 360px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .no-data {
+        min-height: unset;
+      }
+    }
+
+    .el-table {
+      .el-table__header-wrapper {
+        min-height: 40px;
+      }
+      /* 右侧fixed列 */
+      .el-table__fixed-right {
+        right: 16px !important;
+        bottom: 16px !important;
+        .el-table__fixed-header-wrapper {
+          position: absolute;
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #ffffff;
+  }
+
+  ::v-deep .el-table__row {
+    &:nth-child(even) {
+      background-color: #f9fcff;
+      .more {
+        background: #f8fbff;
+        span {
+          color: #0081ff;
+        }
+      }
+    }
+    &:nth-child(odd) {
+      .more {
+        span {
+          color: #0081ff;
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-table th.el-table__cell.is-leaf,
+  ::v-deep .el-table td.el-table__cell {
+    border-bottom: 1px solid #e6eaf1;
+  }
+  ::v-deep .el-table--border .el-table__cell {
+    border-right: 1px solid #e6eaf1;
+  }
+  ::v-deep .el-table__body tr.hover-row.current-row > td,
+  ::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
+  ::v-deep .el-table__body tr.hover-row.el-table__row--striped > td,
+  ::v-deep .el-table__body tr.hover-row > td {
+    background-color: #dcebff !important;
+    .more {
+      background: #dcebff;
+    }
+  }
+
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: #dcebff;
+  }
+  ::v-deep .fixed-table {
+    overflow: visible;
+  }
+  ::v-deep .el-table__header-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 9;
+  }
+  ::v-deep .el-table__fixed-header-wrapper {
+    position: sticky;
+    z-index: 9;
+    top: 0;
+  }
+  ::v-deep .el-table__fixed {
+    overflow-x: clip;
+    overflow-y: clip;
+  }
+}
+</style>

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

 <template>
   <div class="table-list-com-ins" :class="{'is-empty-table' : !tableDataTotal,'no-pagination' : !hasQueryParams}">
     <div class="table-item">
-      <el-table v-if="tableDataTotal>0" class="fixed-table" :class="headerFixed ? 'headerFixed':''" v-loading="tableLoading" :data="tableData"
+      <el-table v-if="tableDataTotal>0" class="fixed-table" v-loading="tableLoading" :data="tableData"
         element-loading-text="Loading" ref="tableRef" 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">
@@ -24,34 +24,6 @@
           </table-list-column>
         </template>
 
-        <!-- <template v-for="(item,index) in formColum">
-          <template v-if="item.use !== false">
-            <el-table-column v-if="item.type == 'selection'" type="selection" :key="item.uid ? item.uid : index"
-              :width="item.width ? item.width : '38px'" :fixed="item.fixed" :align="item.align?item.align:'left'"
-              :show-overflow-tooltip="item.showOverflowTooltip">
-            </el-table-column>
-            <el-table-column v-else-if="item.type == 'index'" type="index" :key="item.uid ? item.uid : index" :label="item.label ? item.label : '序号'"
-              :width="flexWidth(tableData,item.width)" :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
-              :resizable="false">
-              <template slot-scope="scope">{{pagingHandler(hasQueryParams,queryParams,scope)}}</template>
-            </el-table-column>
-            <el-table-column v-else :key="item.uid ? item.uid : index" :label="item.label" :prop="item.prop" :width="item.width"
-              :min-width="item.minWidth" :align="item.align?item.align:'left'" :fixed="item.fixed"
-              :sortable="item.sortable ?item.sortable=='custom'? 'custom':true : false" :resizable="false"
-              :show-overflow-tooltip="item.showOverflowTooltip">
-              <template v-if="item.slotHeader" slot="header">
-                <slot :name="item.slotName"></slot>
-              </template>
-              <template slot-scope="scope">
-                <slot v-if="item.slot" :name="item.prop" :row="scope.row" :index="scope.$index" :data="item"></slot>
-                <slot v-else-if="item.prop == 'action-field-bar'" name="action-field-bar" :row="scope.row" :index="scope.$index" :data="item"></slot>
-                <div v-else>
-                  {{ scope.row[item.prop] || '-' }}
-                </div>
-              </template>
-            </el-table-column>
-          </template>
-        </template> -->
         <template slot="empty">
         </template>
       </el-table>
@@ -120,10 +92,6 @@ export default {
         show: false
       })
     },
-    headerFixed: {
-      type: Boolean,
-      default: false
-    },
     indexFixed: {
       type: Boolean,
       default: false
@@ -267,6 +235,7 @@ export default {
   ::v-deep .table-item {
     width: 100%;
     max-height: calc(100% - 40px);
+
     .no-line-feed {
       display: block;
       color: #0081ff;
@@ -321,6 +290,14 @@ export default {
       .el-table__header-wrapper {
         min-height: 40px;
       }
+      /* 右侧fixed列 */
+      .el-table__fixed-right {
+        /* right: 0px !important;
+        bottom: 16px !important; */
+        .el-table__fixed-header-wrapper {
+          position: absolute;
+        }
+      }
     }
   }
 
@@ -380,18 +357,6 @@ export default {
     z-index: 9;
     top: 0;
   }
-  .headerFixed {
-    ::v-deep .el-table__header-wrapper {
-      position: sticky;
-      top: 80px;
-      z-index: 9;
-    }
-    ::v-deep .el-table__fixed-header-wrapper {
-      position: sticky;
-      z-index: 9;
-      top: 80px;
-    }
-  }
   ::v-deep .el-table__fixed {
     overflow-x: clip;
     overflow-y: clip;

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

@@ -35,7 +35,7 @@
         <!-- 数据列表部分 -->
         <div class="project-feedsummary-list-container">
           <dsk-skeleton v-if="tableLoading"></dsk-skeleton>
-          <table-list-com :tableData="tableDataList" :formColum="formColum" v-else-if="!tableLoading" :maxHeight="true" :tableDataTotal="total"
+          <custom-table :tableData="tableDataList" :formColum="formColum" v-else-if="!tableLoading" :maxHeight="true" :tableDataTotal="total"
             :paging="false">
             <template slot="action-field-bar" slot-scope="scope">
               <div class="project-action-field-bar" v-if="scope.row.id != '0'">
@@ -43,7 +43,7 @@
               </div>
               <span v-else>-</span>
             </template>
-          </table-list-com>
+          </custom-table>
         </div>
       </div>
     </div>
@@ -58,7 +58,7 @@ import ProjectSideMenu from "@/views/projectCostLedger/detail/components/Project
 import { getFeedSummaryMenuTreeApi, getFeedSummaryMonthListApi, getFeedSummaryListApi } from "@/api/projectCostLedger";
 import DskTableHeaderSetting from "@/components/DskTableHeaderSetting";
 import DskSkeleton from "@/components/DskSkeleton";
-import TableListCom from "@/components/TableListCom";
+import CustomTable from "@/components/CustomTable";
 import AddActualCost from "./components/AddActualCost";
 import { v4 } from 'uuid';
 import dayjs from "dayjs";
@@ -110,7 +110,7 @@ export default {
   components: {
     ProjectSideMenu,
     DskTableHeaderSetting,
-    TableListCom,
+    CustomTable,
     DskSkeleton,
     AddActualCost
   },

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

@@ -193,8 +193,8 @@ export default {
         const detail = await getProjectDetailApi(projectId);
         if (detail.code == 200 && detail.data) {
           if (detail.data.id) detail.data["projectId"] = detail.data.id;
-          detail.data["projectId"] = "1754425038355890177";
-          detail.data["cbStage"] = 0;
+          // detail.data["projectId"] = "1754425038355890177";
+          // detail.data["cbStage"] = 0;
           this.detailInfo = detail.data;
         }
       } catch (error) {