style:table组件的完善自适应头部高度。进度查询的修改

renchao@pashanhoo.com
Showing 7 changed files with 95 additions and 34 deletions
src/components/lbTable/lb-table.vue
src/views/workflow/components/batchDel.vue
src/views/workflow/components/processViewer.vue
src/views/workflow/workFrame.vue
src/views/workflow/workFrameView.vue
src/views/ywbl/dbx/dbx.vue
src/views/zhcx/jdcx/jdcx.vue
--- a/src/components/lbTable/lb-table.vue
View file @77bdb13
+++ b/src/components/lbTable/lb-table.vue
View file @77bdb13
@@ -10,13 +10,13 @@
 <template>
  <div :class="['lb-table', customClass]">
-    <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable"
+    <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
-      :border='border' :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection"
+      :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
-      :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
+      :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
-      :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
+      :span-method="this.merge ? this.mergeMethod : this.spanMethod">
      <el-table-column width="45" align="center" v-if="isRadio">
        <template slot-scope="scope">
-          <el-radio v-model="selected" :label="scope.$index" class="table-radio"></el-radio>
+          <el-radio v-model="selected" :label="scope.$index"></el-radio>
        </template>
      </el-table-column>
@@ -24,14 +24,14 @@
      </lb-column>
    </el-table>
-    <el-table v-else ref="elTable" class="table-fixed" :row-style="{ height: '50px' }" :border='border'
+    <el-table v-else ref="elTable" id="heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }"
-      :row-class-name="tableRowClassName" :show-header='showHeader'
+      :border='border' :row-class-name="tableRowClassName" :show-header='showHeader' v-bind="$attrs"
-      :header-cell-style="{ background: 'rgb(236, 245, 255)' }" v-bind="$attrs" :max-height="maxHeight"
+      :max-height="maxHeight" :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
-      v-on="$listeners" :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
+      :span-method="this.merge ? this.mergeMethod : this.spanMethod">
      <el-table-column width="45" align="center" v-if="isRadio">
        <template slot-scope="scope">
-          <el-radio v-model="selected" :label="scope.$index" class="table-radio"></el-radio>
+          <el-radio v-model="selected" :label="scope.$index"></el-radio>
        </template>
      </el-table-column>
      <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
@@ -40,7 +40,7 @@
    <br>
    <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
-      :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
+      layout="total,  prev, pager, next" @current-change="paginationCurrentChange"
      :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
    </el-pagination>
  </div>
@@ -63,7 +63,7 @@ export default {
    },
    border: {
      type: Boolean,
-      default: true,
+      default: false,
    },
    showHeader: {
      type: Boolean,
@@ -75,12 +75,16 @@ export default {
    },
    heightNum: {
      type: Number,
-      default: 265,
+      default: 355,
    },
    maxHeight: {
      type: Number,
      default: 500
    },
+    minHeight: {
+      type: Number,
+      default: undefined
+    },
    heightNumSetting: {
      type: Boolean,
      default: false,
@@ -93,6 +97,10 @@ export default {
      type: String,
      default: 'left',
    },
+    calcHeight: {
+      type: Number,
+      default: 170
+    },
    merge: Array,
  },
  components: {
@@ -100,7 +108,7 @@ export default {
  },
  data () {
    return {
-      tableHeight: '',
+      tableHeight: 'auto',
      mergeLine: {},
      mergeIndex: {},
      selected: ''
@@ -128,8 +136,63 @@ export default {
    },
    getHeight () {
      if (!this.heightNumSetting) {
-        this.tableHeight = window.innerHeight - this.heightNum
+        let _this = this
+        if (this.heightNum) {
+          _this.$nextTick(() => {
+            if (document.querySelector(".tags-view-container")) {
+              window.addEventListener('resize', () => {
+                if (_this.calcHeight == 230) {
+                  _this.tableHeight = _this.calcHeightx(192)
+                } else {
+                  _this.tableHeight = _this.calcHeightx(_this.calcHeight)
                }
+              });
+              if (_this.calcHeight == 230) {
+                _this.tableHeight = _this.calcHeightx(192)
+              } else {
+                _this.tableHeight = _this.calcHeightx(_this.calcHeight)
+              }
+            } else {
+              window.addEventListener('resize', () => {
+                _this.tableHeight = _this.calcHeightx(_this.calcHeight)
+              });
+              _this.tableHeight = _this.calcHeightx(_this.calcHeight)
+            }
+          })
+        } else {
+          _this.tableHeight = window.innerHeight - _this.heightNum
+        }
+      } else {
+        this.tableHeight = this.heightNum
+        this.$nextTick(() => {
+          this.minHeight && (document.getElementById('heightNumSetting').style.minHeight = this.minHeight + 'px')
+        })
+      }
+    },
+    calcHeightx (value, wappered = true) {
+      //项目自定义的公共header部分的高度，可忽略
+      let header = document.querySelector(".from-clues-header").offsetHeight;
+      //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
+      value = value == undefined ? 100 : value;
+      if (document.querySelector(".tags-view-container")) {
+        let tagsView = document.querySelector(".tags-view-container").offsetHeight;
+        var res = window.innerHeight - parseInt(header) - value - parseInt(tagsView);
+      } else {
+        var res = window.innerHeight - parseInt(header) - value;
+      }
+      if (wappered) {
+        //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
+        let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
+        //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
+        let header = window.document.getElementsByClassName('el-table__header-wrapper');
+        //必须加延时，要不然赋不上去值
+        setTimeout(() => {
+          //通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
+          wapper[0].style.height = (value - header[0].clientHeight)
+        }, 100)
+      }
+      return res;
    },
    clearSelection () {
      this.$refs.elTable.clearSelection()
@@ -220,13 +283,7 @@ export default {
  padding-right: 3px;
 }
-.table-radio {
+/deep/.el-radio__label {
-  /deep/.el-radio__label {
  display: none;
-  }
-}
-/deep/.el-radio {
-  margin-right: 5px !important;
 }
 </style>
--- a/src/views/workflow/components/batchDel.vue
View file @77bdb13
+++ b/src/views/workflow/components/batchDel.vue
View file @77bdb13
+<!--
+ * @Description: 
+ * @Autor: renchao
+ * @LastEditTime: 2023-04-26 16:05:28
+-->
 <template>
  <div class='batchDel'>
    <lb-table :column="columns" :data="formData.dataList" :maxHeight="460" :heightNumSetting="true" :pagination="false"
--- a/src/views/workflow/components/processViewer.vue
View file @77bdb13
+++ b/src/views/workflow/components/processViewer.vue
View file @77bdb13
@@ -53,10 +53,10 @@
      </el-select>
      <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
        <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
-        <el-table-column label="环节名称" prop="taskName" minWidth="150px" align="center" />
+        <el-table-column label="环节名称" prop="taskName" minWidth="150" align="center" />
-        <el-table-column label="办理人" prop="assigneeName" minWidth="100px" align="center" />
+        <el-table-column label="办理人" prop="assigneeName" minWidth="100" align="center" />
-        <el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
+        <el-table-column label="处理时间" prop="createTime" width="160" align="center" />
-        <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
+        <el-table-column label="办结时间" prop="finishTime" width="160" align="center" />
        <el-table-column label="操作方式" align="center">
        </el-table-column>
      </el-table>
--- a/src/views/workflow/workFrame.vue
View file @77bdb13
+++ b/src/views/workflow/workFrame.vue
View file @77bdb13
@@ -16,7 +16,7 @@
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
-      <NoticeBar class="NoticeBar" :noticeList="noticeList" />
+      <NoticeBar class="NoticeBar" :noticeList="noticeList" v-if="noticeList.length > 0" />
    </div>
    <!-- 内容框架 -->
    <div class="containerFrame">
--- a/src/views/workflow/workFrameView.vue
View file @77bdb13
+++ b/src/views/workflow/workFrameView.vue
View file @77bdb13
@@ -13,10 +13,10 @@
      <ul>
        <li @click="operation(item)" v-for="(item, index) in rightButtonList" :key="index">
          <svg-icon class="icon" :icon-class="item.icon" />
-          <span class="iconName">{{ item.name }} {{item.value }}</span>
+          <span class="iconName">{{ item.name }} {{ item.value }}</span>
        </li>
      </ul>
-      <NoticeBar class="NoticeBar" :noticeList="noticeList" />
+      <NoticeBar class="NoticeBar" :noticeList="noticeList" v-if="noticeList.length > 0" />
    </div>
    <!-- 内容框架 -->
    <div class="containerFrame">
--- a/src/views/ywbl/dbx/dbx.vue
View file @77bdb13
+++ b/src/views/ywbl/dbx/dbx.vue
View file @77bdb13
@@ -86,9 +86,8 @@
    </div>
    <div class="from-clues-content">
      <lb-table :page-size="pageData.size" class="loadingtext" @sort-change="handleSort"
-        :current-page.sync="pageData.currentPage" :heightNum="335" :total="tableData.total"
+        :current-page.sync="pageData.currentPage" :total="tableData.total" @size-change="handleSizeChange"
-        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
+        @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
-        :data="tableData.data">
      </lb-table>
    </div>
    <searchBox v-model="isSearch" @getSearch="getSearch" :advancedForm="otherForm" />
--- a/src/views/zhcx/jdcx/jdcx.vue
View file @77bdb13
+++ b/src/views/zhcx/jdcx/jdcx.vue
View file @77bdb13
@@ -2,10 +2,10 @@
  <div class="from-clues">
    <!-- 表单部分 -->
    <div class="from-clues-header">
-      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="80px">
+      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="100px">
        <el-row>
          <el-col :span="5">
-            <el-form-item label="业务来源" label-width="70px">
+            <el-form-item label="业务来源">
              <el-select v-model="queryForm.ywly" class="width100" filterable clearable placeholder="请选择业务来源">
                <el-option v-for="item in dictData['ywly']" :key="item.dcode" :label="item.dname" :value="item.dcode">
                </el-option>