resize

src/components/patientRegister/PatientRegisterSignList.vue

@@ -1,8 +1,10 @@
 <template>
-  <div>
   <div style="display: flex">
-      <el-table :data="dataList" border width="100%" height="700" row-key="id" size="small"
-        highlight-current-row ref="dataList"
+    <div :style="'width:' + (window.pageWidth - 200 - 120 - 70) + 'px;'">
+      <el-table :data="dataList" border 
+        width="100%" 
+        :height="window.pageHeight < 600 ? 350:window.pageHeight-250" 
+        row-key="id" size="small" highlight-current-row ref="dataList"
         @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="40"/>
         <el-table-column prop="isMedicalStart" label="签到" width="50">
@@ -118,8 +120,8 @@
         </el-table-column>
 
       </el-table>      
-
-      <div style="margin-left: 10px">
+    </div> 
+    <div style="margin-left: 10px;width:110px;">
         <div class="listBtn">
           <el-button type="success" class="btnClass" @click="sign">签到</el-button>
         </div>
@@ -127,7 +129,6 @@
           <el-button type="primary" class="btnClass" @click="scanSign">扫码签到</el-button>
         </div>        
       </div>
-    </div> 
     <el-dialog title="扫/输入条码签到" :visible.sync="dialogVisible">
       <el-form :model="form">
         <el-form-item label="条码" label-width="100px">
@@ -171,7 +172,7 @@ export default {
   //挂载完成
   mounted() { },
   computed: {
-    ...mapState(["dict", "patientRegister", "customerOrg"]),
+    ...mapState(["window","dict", "patientRegister", "customerOrg"]),
   },
   methods: {
     ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),

src/views/customerOrg/patientRegister.vue

@@ -188,7 +188,7 @@ export default {
         this.patientRegister.prAsbItemHeight = Math.floor((this.window.pageHeight - 300) * 1 / 3); 
         //console.log(this.patientRegister.prListHeight,this.patientRegister.prAsbItemHeight)
       }
-    }
+    },
   },
 
   //监听事件()

src/views/customerOrg/patientRegisterSign.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="box">
-    <div style="width: 100%">
+  <div>    
     <el-card>
       <div style="display: flex">
         <!-- 单位树组件 -->
-          <div style="width: 15%; border: 1px solid">
+        <div :style="CustomerOrgTreeStyle">
           <CustomerOrgTreeAll />
         </div>
-          <div style="margin-left: 10px; width: 85%">
+        <div :style="CustomerOrgRightStyle">
           <!-- 查询条件  -->
           <PatientRegisterQuery />
 
@@ -18,7 +17,6 @@
       </div>
     </el-card>    
   </div>
-  </div>
 </template>
 <script>
 import { mapState, mapActions } from "vuex";
@@ -38,10 +36,14 @@ export default {
   data() {
     return {
       tabChoosed: "1",
+      CustomerOrgTreeStyle:'',
+      CustomerOrgRightStyle:'',
     };
   },
 
-  created() {},
+  created() {
+    this.resize();
+  },
 
   //挂载完成
   mounted() {
@@ -49,7 +51,7 @@ export default {
   },
 
   computed: {
-    ...mapState(["dict", "patientRegister", "customerOrg"]),
+    ...mapState(["window","dict", "patientRegister", "customerOrg"]),
   },
 
   methods: {
@@ -165,6 +167,18 @@ export default {
 
       console.log("dict", this.dict);
     },
+
+    resize() {
+      //console.log(this.window.pageHeight,this.window.pageWidth)
+      let headerHeight = Number(150);
+
+      this.CustomerOrgTreeStyle = "overflow: scroll;border: 1px solid;width:200px; height:" + (this.window.pageHeight - headerHeight) + "px;";
+      this.CustomerOrgRightStyle = "margin-left: 10px;width:" + (this.window.pageWidth - 200 - 60) + "px; height:" + (this.window.pageHeight - headerHeight) + "px;";
+  
+      if (this.window.pageHeight < 600) {
+        this.CustomerOrgTreeStyle = "overflow: scroll;border: 1px solid;width:200px; height:" + (600 - headerHeight) + "px;"; 
+      }
+    },
   },
 
   //监听事件()
@@ -181,11 +195,19 @@ export default {
         this.getCustomerOrgGroup(newVal);
       }
     },
+
+    "window.pageHeight"(newVal, oldVal) {
+      if (newVal != oldVal) {
+        this.resize();
+      }
+    },
+    "window.pageWidth"(newVal, oldVal) {
+      if (newVal != oldVal) {
+        this.resize();
+      }
+    },
   },
 };
 </script>
 <style scoped>
-.box {
-  display: flex;
-}
 </style>