2025-1-7

src/assets/scss/global.scss

@@ -522,3 +522,19 @@ input[type="number"] {
   height: auto;
   line-height: 1.5;
 }
+
+.full-block{
+  height:100%;
+  width:100%;
+  overflow:hidden;
+}
+.flex-layout{
+  display:flex;
+  flex-direction:column;
+}
+.flex-auto{
+  flex:1 1 auto
+}
+.flex-none{
+  flex:none
+}

src/views/modules/base/laborClass.vue

@@ -5,12 +5,12 @@ export default {
   name: "laborClass",
   props:{
     height:{
-      type: [Number,String],
-      default: '78vh'
+      type: [Number],
     }
   },
   data(){
     return{
+      scrollHeight:0,
       dataList:[],
       queryLoading:false,
       laborClass:{
@@ -172,6 +172,9 @@ export default {
           }
         }
       })
+    },
+    setScrollHeight(){
+      this.scrollHeight = window.innerHeight-120
     }
   },
   watch:{
@@ -188,46 +191,55 @@ export default {
           this.saveLoading = false;
         },5000)
       }
-    }
+    },
   },
   created() {
     this.handleQuery();
+    if (!this.height){
+      this.setScrollHeight()
+      window.addEventListener('resize',this.setScrollHeight)
+    }else {
+      this.scrollHeight = this.height
+    }
+  },
+  destroyed() {
+    window.removeEventListener('resize',this.setScrollHeight)
   }
 }
 </script>
 
 <template>
-<div>
-  <el-form :model="queryParams" label-position="top" style="width: 1000px">
-    <el-row :gutter="10">
-      <el-col :span="4">
-        <el-form-item label="人员等级编码">
-          <el-input v-model="queryParams.levelId"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="4">
-        <el-form-item label="人员等级描述">
-          <el-input v-model="queryParams.levelDesc"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="3">
-        <el-form-item label="是否在用">
-          <el-select v-model="queryParams.active" style="width: 100%">
-            <el-option label="全部" value=""></el-option>
-            <el-option label="Y" value="Y"></el-option>
-            <el-option label="N" value="N"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="4">
-        <el-form-item label=" ">
-          <el-button type="primary" @click="handleQuery">查询</el-button>
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
+<div class="full-block flex-layout" :style="{height:scrollHeight+'px'}">
+  <el-form class="flex-none" :model="queryParams" label-position="top" style="width: 1000px">
+      <el-row :gutter="10">
+        <el-col :span="4">
+          <el-form-item label="人员等级编码">
+            <el-input v-model="queryParams.levelId"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="人员等级描述">
+            <el-input v-model="queryParams.levelDesc"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-form-item label="是否在用">
+            <el-select v-model="queryParams.active" style="width: 100%">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="Y" value="Y"></el-option>
+              <el-option label="N" value="N"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label=" ">
+            <el-button type="primary" @click="handleQuery">查询</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-  <el-table :data="dataList" v-loading="queryLoading" border :height="height">
+  <el-table class="flex-auto" :data="dataList" v-loading="queryLoading" border height="100%">
     <el-table-column
       v-for="(item,index) in columns" :key="index"
       :sortable="item.columnSortable"
@@ -249,8 +261,7 @@ export default {
       </template>
     </el-table-column>
   </el-table>
-
-  <el-pagination @size-change="handleSizeChange"
+  <el-pagination class="flex-none" @size-change="handleSizeChange"
                  @current-change="handlePageChange"
                  :current-page="no"
                  :page-sizes="[50, 100, 200, 500]"

src/views/modules/base/workCenterCost.vue

@@ -6,12 +6,12 @@ export default {
   name: "workCenterCost",
   props:{
     height:{
-      type: [Number,String],
-      default: '78vh'
+      type: [Number],
     }
   },
   data(){
     return{
+      scrollHeight:0,
       dataList:[],
       queryLoading:false,
       workCenterCost:{
@@ -192,6 +192,9 @@ export default {
           }
         }
       })
+    },
+    setScrollHeight(){
+      this.scrollHeight = window.innerHeight-120
     }
   },
   watch:{
@@ -212,13 +215,22 @@ export default {
   },
   created() {
     this.handleQuery();
+    if (!this.height){
+      this.setScrollHeight()
+      window.addEventListener('resize',this.setScrollHeight)
+    }else {
+      this.scrollHeight = this.height
+    }
+  },
+  destroyed() {
+    window.removeEventListener('resize',this.setScrollHeight)
   }
 }
 </script>
 
 <template>
-<div>
-  <el-form :model="queryParams" label-position="top" style="width: 1000px">
+<div class="full-block flex-layout" :style="{height:scrollHeight+'px'}">
+  <el-form class="flex-none" :model="queryParams" label-position="top" style="width: 1000px">
     <el-row :gutter="10">
       <el-col :span="4">
         <el-form-item label="加工中心编码">
@@ -256,7 +268,7 @@ export default {
     </el-row>
   </el-form>
 
-  <el-table :data="dataList" v-loading="queryLoading" border :height="height">
+  <el-table class="flex-auto" :data="dataList" v-loading="queryLoading" border height="100%">
     <el-table-column
       v-for="(item,index) in columns" :key="index"
       :sortable="item.columnSortable"
@@ -279,7 +291,8 @@ export default {
     </el-table-column>
   </el-table>
 
-  <el-pagination @size-change="handleSizeChange"
+  <el-pagination class="flex-none"
+                 @size-change="handleSizeChange"
                  @current-change="handlePageChange"
                  :current-page="no"
                  :page-sizes="[50, 100, 200, 500]"