resize

src/components/patientRegister/PatientRegisterList.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="display: flex">
-    <div style="display: flex; width: 90%">
+    <div :style="'width:' + (window.pageWidth - 200 - 120 - 70) + 'px;'">
       <el-table :data="dataList" border height="430" row-key="id" size="small"
         class="el-table__body-wrapper tbody" highlight-current-row @row-click="rowick" ref="dataList"
         @selection-change="handleSelectionChange">
@@ -204,7 +204,7 @@ export default {
   //挂载完成
   mounted() { },
   computed: {
-    ...mapState(["dict", "patientRegister", "customerOrg"]),
+    ...mapState(["window","dict", "patientRegister", "customerOrg"]),
   },
   methods: {
     ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),

src/components/patientRegister/patientRegisterQuery.vue

@@ -1,128 +1,64 @@
 <template>
   <div style="display: flex">
-    <div style="display: flex; flex-wrap: wrap; width: 90%">
-      <div class="block query">
+    <div :style="'display: flex; flex-wrap: wrap; width:' + (window.pageWidth - 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
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :picker-options="pickerOptions"
-          size="small"
-          style="width: 240px"
-        >
+        <el-date-picker v-model="patientRegister.query.dateRange" type="daterange" align="right" unlink-panels
+          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" size="small"
+          style="width: 240px">
         </el-date-picker>
       </div>
       <div class="query">
         <span>条码号：</span>
-        <el-input
-          placeholder="条码号"
-          v-model="patientRegister.query.patientRegisterNo"
-          size="small"
-          clearable
-          style="width: 150px"
-        />
+        <el-input placeholder="条码号" v-model="patientRegister.query.patientRegisterNo" size="small" clearable
+          style="width: 150px" />
       </div>
       <div class="query">
         <span>档案号：</span>
-        <el-input
-          placeholder="档案号"
-          v-model="patientRegister.query.patientNo"
-          size="small"
-          clearable
-          style="width: 135px"
-        />
+        <el-input placeholder="档案号" v-model="patientRegister.query.patientNo" size="small" clearable
+          style="width: 135px" />
       </div>
       <div class="query">
         <span>姓名：</span>
-        <el-input
-          placeholder="姓名"
-          v-model="patientRegister.query.patientName"
-          size="small"
-          clearable
-          style="width: 100px"
-        />
+        <el-input placeholder="姓名" v-model="patientRegister.query.patientName" size="small" clearable
+          style="width: 100px" />
       </div>
       <div class="query">
         <span>性别：</span>
-        <el-select
-          v-model="patientRegister.query.sex"
-          placeholder="请选择"
-          style="width: 80px"
-          size="small"
-        >
-          <el-option
-            v-for="item in dict.forSex"
-            :key="item.id"
-            :label="item.displayName"
-            :value="item.id"
-          >
+        <el-select v-model="patientRegister.query.sex" placeholder="请选择" style="width: 80px" size="small">
+          <el-option v-for="item in dict.forSex" :key="item.id" :label="item.displayName" :value="item.id">
           </el-option>
         </el-select>
       </div>
       <div class="query">
         <span>身份证号：</span>
-        <el-input
-          placeholder="身份证号"
-          v-model="patientRegister.query.idCardNo"
-          size="small"
-          clearable
-          style="width: 180px"
-        />
+        <el-input placeholder="身份证号" v-model="patientRegister.query.idCardNo" size="small" clearable
+          style="width: 180px" />
       </div>
       <div class="query">
-        <el-cascader
-          v-model="patientRegister.query.customerOrgId"
-          :options="patientRegister.customerOrgTreeAll"
-          :props="{
-            checkStrictly: true,
-            expandTrigger: 'hover',
-            ...customerOrg.treeprops,
-          }"
-          :show-all-levels="false"
-          clearable
-          :disabled="orgEnable == 'Y' ? false : true"
-          size="small"
-        >
+        <el-cascader v-model="patientRegister.query.customerOrgId" :options="patientRegister.customerOrgTreeAll" 
+          :props="{checkStrictly: true,expandTrigger: 'hover',...customerOrg.treeprops,}" 
+          :show-all-levels="false" clearable :disabled="orgEnable == 'Y' ? false : true" size="small">
         </el-cascader>
-        <el-checkbox v-model="patientRegister.query.customerOrgFlag"
-          >单位作为查询条件</el-checkbox
-        >
+        <el-checkbox v-model="patientRegister.query.customerOrgFlag">单位作为查询条件</el-checkbox>
       </div>
       <div class="query">
         <span>状态：</span>
-        <el-select
-          v-model="patientRegister.query.completeFlag"
-          placeholder="请选择"
-          clearable
-          style="width: 80px"
-          size="small"
-        >
-          <el-option
-            v-for="item in dict.completeFlag"
-            :key="item.id"
-            :label="item.displayName"
-            :value="item.id"
-          >
+        <el-select v-model="patientRegister.query.completeFlag" placeholder="请选择" clearable style="width: 80px"
+          size="small">
+          <el-option v-for="item in dict.completeFlag" :key="item.id" :label="item.displayName" :value="item.id">
           </el-option>
         </el-select>
       </div>
     </div>
+
     <!-- 按钮区域 -->
     <div style="margin-left: 10px; width: 110px">
       <div class="listBtn">
-        <el-button type="primary" class="btnClass" @click="btnQuery"
-          >查询</el-button
-        >
+        <el-button type="primary" class="btnClass" @click="btnQuery">查询</el-button>
       </div>
       <div class="listBtn">
-        <el-button type="danger" class="btnClass" @click="readIdCard"
-          >读身份证</el-button
-        >
+        <el-button type="danger" class="btnClass" @click="readIdCard">读身份证</el-button>
       </div>
     </div>
   </div>
@@ -178,7 +114,7 @@ export default {
   mounted() { },
 
   computed: {
-    ...mapState(["dict", "patientRegister", "customerOrg"]),
+    ...mapState(["window", "dict", "patientRegister", "customerOrg"]),
   },
   methods: {
     //查询
@@ -198,11 +134,13 @@ export default {
 .query {
   margin-left: 10px;
 }
+
 .listBtn {
   margin-top: 5px;
 
   text-align: center;
 }
+
 .btnClass {
   /* position: absolute; */
   /* left: 0;

src/store/index.js

@@ -28,7 +28,7 @@ export default new Vuex.Store({
       contactMethodList: [], //联系方式列表
       orgEditStyle:'',      //编辑表单样式
       orgDetailStyle:'',    //体检次数样式
-      orgDetailHeight:170,    //体检次数LIST表格高度
+      orgDetailHeight:200,    //体检次数LIST表格高度
       personStyle:'',       //联系人样式
     },
     //体检单位分组

src/views/customerOrg/patientRegister.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="box">
-    <div style="width: 100%">
+  <div>
     <el-card>
       <div style="display: flex">
         <!-- 单位树组件 -->
-          <div style="width: 200px; border: 1px solid">
+        <div :style="CustomerOrgTreeStyle">
           <CustomerOrgTreeAll />
         </div>
-          <div style="margin-left: 10px; width: 85%">
+        <div :style="CustomerOrgRightStyle">
           <!-- 查询条件  -->
           <PatientRegisterQuery />
 
@@ -25,7 +24,6 @@
       </div>
     </el-card>
   </div>
-  </div>
 </template>
 <script>
 import { mapState, mapActions } from "vuex";
@@ -47,6 +45,8 @@ export default {
   data() {
     return {
       tabChoosed: "1",
+      CustomerOrgTreeStyle:"",
+      CustomerOrgRightStyle:"margin-left: 10px;",
     };
   },
 
@@ -55,10 +55,11 @@ export default {
   //挂载完成
   mounted() {
     this.dictInit();
+    this.resize();
   },
 
   computed: {
-    ...mapState(["dict", "patientRegister", "customerOrg"]),
+    ...mapState(["window","dict", "patientRegister", "customerOrg"]),
   },
 
   methods: {
@@ -174,23 +175,59 @@ export default {
 
       console.log("dict", this.dict);
     },
+
+    resize() {
+      let headerHeight = Number(150);
+      let orgDetailHeight = Number(200);
+      let editHeight = Number(200);
+      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;";
+
+      this.customerOrg.orgEditStyle = 'display: flex;';
+      this.customerOrg.orgDetailStyle = 'display: flex;';
+      if (this.window.pageHeight < 600) {
+        this.customerOrg.orgDetailHeight = orgDetailHeight;
+        this.CustomerOrgTreeStyle = "overflow: scroll;border: 1px solid;width:200px; height:" + (orgDetailHeight*2 + Number(50)) + "px;";
+        this.customerOrg.orgEditStyle += "overflow-y: scroll;height:" + orgDetailHeight + "px;";
+        this.customerOrg.orgDetailStyle += "overflow-y: scroll;height:" + orgDetailHeight + "px;";
+      } else {
+        this.customerOrg.orgDetailHeight = orgDetailHeight + Math.floor((this.window.pageHeight - 600) * 1 / 3);
+        editHeight = this.window.pageHeight - headerHeight - this.customerOrg.orgDetailHeight - 50;
+        if (editHeight > 400) {
+          this.customerOrg.orgEditStyle += "height:" + editHeight + "px;";
+          this.customerOrg.orgDetailStyle += "height:" + this.customerOrg.orgDetailHeight + "px;";
+        } else {
+          this.customerOrg.orgEditStyle += "overflow-y: scroll;height:" + editHeight + "px;";
+          this.customerOrg.orgDetailStyle += "overflow-y: scroll;height:" + this.customerOrg.orgDetailHeight + "px;";
+        }
+        
+      }
+
+    }
   },
 
   //监听事件()
   watch: {
     //1级单位值改变，分组改变
     "patientRegister.query.CustomerOrgParentId"(newVal, oldVal) {
-      console.log(
-        "watch patientRegister.query.CustomerOrgParentId newVal：",
-        newVal,
-        " oldVal：",
-        oldVal
-      );
+      console.log("watch patientRegister.query.CustomerOrgParentId newVal：",newVal,"oldVal：",oldVal);
       if (newVal != oldVal && newVal !== this.dict.personOrgId) {
         this.getCustomerOrgGroup(newVal);
       }
     },
+
+    "window.pageHeight"(newVal, oldVal) {
+      if (newVal != oldVal) {
+        this.resize();
+      }
     },
+    "window.pageWidth"(newVal, oldVal) {
+      if (newVal != oldVal) {
+        this.resize();
+      }
+    },
+  },
+  
 };
 </script>
 <style scoped>