resize

src/components/patientRegister/PatientRegisterRecoverList.vue

@@ -1,7 +1,9 @@
 <template>
-  <div>
   <div style="display: flex">
-      <el-table :data="dataList" border width="100%" height="700" row-key="id" size="small"
+    <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"/>
@@ -113,8 +115,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="recover">回收表单</el-button>
       </div>
@@ -122,7 +124,6 @@
         <el-button type="primary" class="btnClass" @click="scanRecover">扫码回收</el-button>
       </div>        
     </div>
-    </div> 
     <el-dialog title="扫/输入条码签到" :visible.sync="dialogVisible">
       <el-form :model="form">
         <el-form-item label="条码" label-width="100px">
@@ -166,7 +167,7 @@ export default {
   //挂载完成
   mounted() { },
   computed: {
-    ...mapState(["dict", "patientRegister", "customerOrg"]),
+    ...mapState(["window","dict", "patientRegister", "customerOrg"]),
   },
   methods: {
     ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),

src/components/patientRegister/PatientRegisterRefuseList.vue

@@ -1,8 +1,9 @@
 <template>
-  <div>
   <div style="display: flex">
-      <div style="width:46%;">
-        <el-table :data="dataList" border height="700" row-key="id" size="small" highlight-current-row ref="dataList"
+    <div :style="'width:' + Math.floor((window.pageWidth - 120 - 86)/2) + 'px;'">
+      <el-table :data="dataList" border 
+        :height="window.pageHeight < 600 ? 350:window.pageHeight-250"
+        row-key="id" size="small" highlight-current-row ref="dataList"
         @row-click="rowClick">
         <el-table-column type="index" width="50" label="序号" />
         <el-table-column prop="completeFlag" label="体检进度">
@@ -110,8 +111,8 @@
 
       </el-table>
     </div>
-      <div style="width:47%;margin-left: 5px;">
-        <div style="display: flex; flex-wrap: wrap; width: 100%;">
+    <div :style="'margin-left: 5px;width:' + Math.floor((window.pageWidth - 120 - 86)/2) + 'px;'">
+      <div style="display: flex; flex-wrap: wrap;height:40px; width: 100%;">
         <div class="query">
           <span>条码号</span>
           <el-input placeholder="条码号" v-model="quick.patientRegisterNo" size="small" style="width: 140px" clearable
@@ -119,7 +120,7 @@
         </div>
         <div class="query">
           <span>档案号</span>
-            <el-input placeholder="档案号" v-model="quick.patientNo" size="small" style="width: 130px" clearable
+          <el-input placeholder="档案号" v-model="quick.patientNo" size="small" style="width: 100px" clearable
             @input="onQueryByPatientNo" />
         </div>
         <div class="query">
@@ -127,7 +128,9 @@
           <el-input placeholder="姓名" v-model="quick.patientName" size="small" style="width: 100px" disabled />
         </div>
       </div>
-        <el-table :data="doctorCheck.RegisterCheckList" style="width: 100%" height="660" border highlight-current-row
+      <el-table :data="doctorCheck.RegisterCheckList"  
+        :height="window.pageHeight < 600 ? 310:window.pageHeight-290"
+        border highlight-current-row
         size="small" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="40" />
         <el-table-column prop="asbitemName" label="组合项目" width="180" />
@@ -144,7 +147,7 @@
         </el-table-column>
       </el-table>
     </div>
-      <div style="margin-left: 10px;width:100px;">
+    <div style="margin-left: 10px;width:110px;">
       <div class="listBtn">
         <el-button type="success" class="btnClass" @click="resuse('2')">登记弃检</el-button>
       </div>
@@ -153,8 +156,6 @@
       </div>
     </div>
   </div>
-
-  </div>
 </template>
 <script>
 import moment from "moment";
@@ -189,7 +190,7 @@ export default {
   //挂载完成
   mounted() { },
   computed: {
-    ...mapState(["dict", "patientRegister", "customerOrg", "doctorCheck"]),
+    ...mapState(["window","dict", "patientRegister", "customerOrg", "doctorCheck"]),
   },
   methods: {
     ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),

src/components/patientRegister/patientRegisterQuery.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="display: flex">
-    <div :style="'display: flex; flex-wrap: wrap; height:100px;width:' + (window.pageWidth - 200 - 120 - 70) + 'px;'">
+    <div :style="'display: flex; flex-wrap: wrap; height:100px;width:' + (window.pageWidth - (orgEnable=='Y' ? 0:200) - 120 - 70) + 'px;'">
       <div class="query">
         <span class="demonstration">登记日期：</span>
         <el-date-picker v-model="patientRegister.query.dateRange" type="daterange" align="right" unlink-panels
@@ -37,7 +37,7 @@
       </div>
       <div class="query">
         <el-cascader v-model="patientRegister.query.customerOrgId" :options="patientRegister.customerOrgTreeAll" 
-          :props="{checkStrictly: true,expandTrigger: 'hover',...customerOrg.treeprops,}" 
+          :props="{checkStrictly: true,expandTrigger: 'hover',...customerOrg.treeprops,}" placeholder="请选择单位"
           :show-all-levels="false" clearable :disabled="orgEnable == 'Y' ? false : true" size="small">
         </el-cascader>
         <el-checkbox v-model="patientRegister.query.customerOrgFlag">单位作为查询条件</el-checkbox>

src/views/customerOrg/patientRegisterRecover.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,11 +51,24 @@ export default {
   },
 
   computed: {
-    ...mapState(["dict", "patientRegister", "customerOrg"]),
+    ...mapState(["window","dict", "patientRegister", "customerOrg"]),
   },
 
   methods: {
     ...mapActions(["getCustomerOrgGroup"]),
+
+    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;"; 
+      }
+    },
+
     //数据初始化
     dictInit() {
       //性别（仅档案用）
@@ -183,6 +198,17 @@ export default {
         this.getCustomerOrgGroup(newVal);
       }
     },
+
+    "window.pageHeight"(newVal, oldVal) {
+      if (newVal != oldVal) {
+        this.resize();
+      }
+    },
+    "window.pageWidth"(newVal, oldVal) {
+      if (newVal != oldVal) {
+        this.resize();
+      }
+    },
   },
 };
 </script>

src/views/customerOrg/patientRegisterRefuse.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="box">
-    <div style="width: 100%">
+  <div>
     <el-card>          
-        <div style="display: flex">          
-          <div style="margin-left: 10px; width: 100%">
+      <div style=" width: 100%">
         <!-- 查询条件  -->
         <PatientRegisterQuery orgEnable="Y"/>
 
@@ -11,10 +9,8 @@
         <PatientRegisterRefuseList />
 
       </div>      
-        </div>
     </el-card>
   </div>
-  </div>
 </template>
 <script>
 import { mapState, mapActions } from "vuex";
@@ -185,7 +181,5 @@ export default {
 };
 </script>
 <style scoped>
-.box {
-  display: flex;
-}
+
 </style>