动态调整高度

src/views/serviceManagement/servicesToBeReviewed/index.vue

@@ -79,36 +79,50 @@
         </el-row>
       </el-form>
     </div>
-    <vxe-table
-      border
-      allAlign="center"
-      show-overflow
-      highlight-hover-row
-      height="800"
-      empty-text="暂无匹配数据"
-      :loading="tableLoading"
-      :data="tableData"
-      :scroll-y="{ enabled: false }"
-      :header-cell-style="{ 'text-align': 'center' }"
-      :cell-style="{ 'text-align': 'center' }"
-    >
-      <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
-      <vxe-table-column field="taskNumber" title="服务编号"></vxe-table-column>
-      <vxe-table-column field="cycle" title="执行包周期"> </vxe-table-column>
-      <vxe-table-column field="pkgName" title="执行包名称"></vxe-table-column>
-      <vxe-table-column field="taskTypeName" title="服务类型" width="200"></vxe-table-column>
-      <vxe-table-column field="taskScore" title="服务分值" width="100"></vxe-table-column>
-      <vxe-table-column field="salesName" title="推广员姓名" width="150"></vxe-table-column>
-      <vxe-table-column field="createTime" title="服务提交时间"></vxe-table-column>
-      <vxe-table-column field="taskStatusName" title="服务当前状态" width="100"></vxe-table-column>
-      <vxe-table-column field="entName" title="服务提供商"></vxe-table-column>
-      <vxe-table-column field="mahName" title="产品所属生产企业"></vxe-table-column>
-      <vxe-table-column field="skuName" title="关联产品名称"></vxe-table-column>
-      <vxe-table-column field="provAbbr" title="执行包所属省份" width="130"></vxe-table-column>
-      <vxe-table-column title="操作">
-        <div>操作</div>
-      </vxe-table-column>
-    </vxe-table>
+
+    <div class="tips">当前选择表格已选择{{ totalNum }}项，总积分：{{ totalScore }}</div>
+
+    <div class="table">
+      <vxe-table
+        ref="tableRef"
+        border
+        allAlign="center"
+        show-overflow
+        highlight-hover-row
+        height="auto"
+        empty-text="暂无匹配数据"
+        :loading="tableLoading"
+        :data="tableData"
+        :scroll-y="{ enabled: false }"
+        :scroll-x="{ enabled: true }"
+        :header-cell-style="{ 'text-align': 'center' }"
+        :cell-style="{ 'text-align': 'center' }"
+        @checkbox-all="selectAllChangeEvent"
+        @checkbox-change="selectChangeEvent"
+      >
+        <vxe-column type="checkbox" width="60"></vxe-column>
+        <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
+        <vxe-table-column field="taskNumber" title="服务编号" width="200"></vxe-table-column>
+        <vxe-table-column field="cycle" title="执行包周期" width="200"> </vxe-table-column>
+        <vxe-table-column field="pkgName" title="执行包名称" width="200"></vxe-table-column>
+        <vxe-table-column field="taskTypeName" title="服务类型" width="200"></vxe-table-column>
+        <vxe-table-column field="taskScore" title="服务分值" width="100"></vxe-table-column>
+        <vxe-table-column field="salesName" title="推广员姓名" width="150"></vxe-table-column>
+        <vxe-table-column field="createTime" title="服务提交时间" width="200"></vxe-table-column>
+        <vxe-table-column field="taskStatusName" title="服务当前状态" width="120"></vxe-table-column>
+        <vxe-table-column field="entName" title="服务提供商" width="200"></vxe-table-column>
+        <vxe-table-column field="mahName" title="产品所属生产企业" width="200"></vxe-table-column>
+        <vxe-table-column field="skuName" title="关联产品名称" width="200"></vxe-table-column>
+        <vxe-table-column field="provAbbr" title="执行包所属省份" width="130"></vxe-table-column>
+        <vxe-table-column title="操作" fixed="right" width="130">
+          <div class="btns">
+            <el-button type="text">审核</el-button>
+            <el-button type="text">服务详情</el-button>
+          </div>
+        </vxe-table-column>
+      </vxe-table>
+    </div>
+
     <vxe-pager
       :current-page.sync="page.currentPage"
       :page-size.sync="page.pageSize"
@@ -128,6 +142,7 @@ import { getDictType } from '@/api/common';
 import abbreviationsProvinces from '@/const/abbreviationsProvinces.js';
 import dayjs from 'dayjs';
 import { mapGetters } from 'vuex';
+import color from '@/mixins/color';
 
 export default {
   data() {
@@ -146,9 +161,9 @@ export default {
       abbreviationsProvincesList: abbreviationsProvinces,
       nodeId: '',
       searchFrom: {
-        year: '',
+        year: '2024',
         taskTypeId: '',
-        quarter: '',
+        quarter: '4',
         createTime: '',
         provAbbr: '',
         mahName: '',
@@ -157,6 +172,8 @@ export default {
         skuId: '',
         taskStatus: 3
       },
+      totalNum: 0,
+      totalScore: 0,
       page: {
         pageSizes: [10, 50, 100, 300, 500],
         total: 0, // 总页数
@@ -204,10 +221,8 @@ export default {
         nodeId = 1;
     }
 
-    if (roles.includes()) console.log('roles', roles);
-
     const currentYear = dayjs().format('YYYY');
-    this.searchFrom.year = currentYear;
+    // this.searchFrom.year = currentYear;
     this.nodeId = nodeId;
     this.searchFrom.nodeId = nodeId;
     this.getList();
@@ -265,7 +280,7 @@ export default {
     },
     clearSearch() {
       this.searchFrom = {
-        year: '2025',
+        year: '',
         taskTypeId: '',
         quarter: '',
         createTime: '',
@@ -295,6 +310,20 @@ export default {
         this.currDrugList = [];
         this.drugDisabled = true;
       }
+    },
+    selectAllChangeEvent(obj) {
+      const records = obj.selection;
+      this.totalNum = records.length;
+      this.totalScore = records.reduce((pre, cur) => {
+        return pre + (Number(cur.taskScore) || 0);
+      }, 0);
+    },
+    selectChangeEvent(obj) {
+      const records = obj.selection;
+      this.totalNum = records.length;
+      this.totalScore = records.reduce((pre, cur) => {
+        return pre + (Number(cur.taskScore) || 0);
+      }, 0);
     }
   }
 };
@@ -306,4 +335,17 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+
+.tips {
+  display: inline-block;
+  padding: 0 5px;
+  color: #85ce61;
+  border-radius: 3px;
+  line-height: 14px;
+  font-size: 14px;
+}
+
+.table {
+  height: calc(100vh - 300px);
+}
 </style>