resize

src/components/customerOrg/ContactPerson.vue

@@ -1,14 +1,12 @@
 <template>
   <div>
-    <div style="display: flex">
-      <div style="width: 95%">
+    <div :style="customerOrg.orgDetailStyle">
+      <div :style="'width:'+(window.pageWidth - 200 - 120 - 70)+'px;'">
         <el-table
           :data="customerOrg.contactPersonList"
-          border
-          height="150"
-          row-key="id"
+          border          
+          :height="Math.floor(customerOrg.orgDetailHeight/2)"
           size="small"
-          class="el-table__body-wrapper tbody"
           highlight-current-row
           @row-click="rowClick"
           ref="customerOrg.contactPersonList"
@@ -33,14 +31,11 @@
             </template>
           </el-table-column>
         </el-table>
-
         <el-table
           :data="customerOrg.contactMethodList"
           border
-          height="150"
-          row-key="id"
+          :height="Math.floor(customerOrg.orgDetailHeight/2)"
           size="small"
-          class="el-table__body-wrapper tbody"
           highlight-current-row
           @row-click="rowClickMethod"
           ref="customerOrg.contactMethodList"
@@ -71,7 +66,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div style="margin-left: 10px; margin-top: 5%">
+      <div style="margin-left: 10px; margin-top: 40px">
         <div style="margin-top: 10px">
           <el-button type="primary" @click="add" class="btnClass">新增</el-button>
         </div>
@@ -203,7 +198,7 @@ export default {
   mounted() {},
 
   computed: {
-    ...mapState(["customerOrg"]),
+    ...mapState(["window","customerOrg"]),
   },
 
   methods: {

src/components/customerOrg/customerOrgEdit.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="display: flex">
-    <div>
+  <div :style="customerOrg.orgEditStyle">
+    <div> <!--overflow-y: scroll;height:200px;-->
       <el-form ref="form" :model="customerOrg.customerOrgRd" label-width="100px" :rules="rules" size="medium">
         <el-row>
           <el-col :span="8">
@@ -109,9 +109,7 @@
               <el-input type="textarea" v-model="customerOrg.customerOrgRd.remark" maxlength="100" show-word-limit />
             </el-form-item>
           </el-col>
-        </el-row>
-        <!--  -->
-        <el-divider />
+        </el-row>        
         <el-row>
           <el-col :span="5">
             <el-form-item label="创建者">
@@ -137,7 +135,7 @@
       </el-form>
     </div>
     <!-- 按钮区域 -->
-    <div style="margin-left: 10px; margin-top: 5%" >
+    <div style="width:110px;margin-left: 10px; margin-top: 5%" >
       <div class="btnList">
         <el-button type="primary" @click="add('')" class="btnClass">新增单位</el-button>
       </div>
@@ -162,6 +160,7 @@ export default {
   components: {},
   data() {
     return {
+      customerOrgEditStyle:"height:400px;",
       data: {
         organizationdata: [], //体检中心数据
         customerOrgType: [], //单位类别
@@ -211,13 +210,16 @@ export default {
 
     //获取单位类别列表
     this.getOrgType();
+    
   },
 
   computed: {
-    ...mapState(["customerOrg"]),
+    ...mapState(["customerOrg","window"]),
   },
   methods: {
     ...mapMutations(["setData"]),
+    
+
     //获取组织体检中心数据
     getoraniztion() {
       getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
@@ -328,6 +330,8 @@ export default {
       });
     },
   },
+
+
 };
 </script>
 <style scoped>

src/components/customerOrg/customerOrgRegister.vue

@@ -1,14 +1,11 @@
 <template>
-  <div>
-    <div style="display: flex">
+  <div :style="customerOrg.orgDetailStyle">
+    <div :style="'width:'+(window.pageWidth - 200 - 120 - 70)+'px;'">
       <el-table
         :data="customerOrg.customerOrgRegisterList"
-        border
-        style="width: 90%"
-        height="300"
-        row-key="id"
-        size="small"
-        class="el-table__body-wrapper tbody"
+        border        
+        :height="customerOrg.orgDetailHeight"      
+        size="small"        
         highlight-current-row
         @row-click="rowClick"
         ref="customerOrg.customerOrgRegisterList"
@@ -45,17 +42,17 @@
             {{ scope.row.lastModificationTime | dateFormat }}
           </template>
         </el-table-column>
-      </el-table>
-      <div style="margin-left: 10px; margin-top: 5%">
-        <div style="margin-top: 10px">
-          <el-button type="primary" @click="add" class="btnClass">增加次数</el-button>
-        </div>
-        <div style="margin-top: 10px">
-          <el-button type="success" @click="edit" class="btnClass">体检完成</el-button>
-        </div>
-        <div style="margin-top: 10px">
-          <el-button type="danger" @click="cansel" class="btnClass">取消完成</el-button>
-        </div>
+      </el-table>      
+    </div>
+    <div style="margin-left: 10px; margin-top: 40px">
+      <div style="margin-top: 10px">
+        <el-button type="primary" @click="add" class="btnClass">增加次数</el-button>
+      </div>
+      <div style="margin-top: 10px">
+        <el-button type="success" @click="edit" class="btnClass">体检完成</el-button>
+      </div>
+      <div style="margin-top: 10px">
+        <el-button type="danger" @click="cansel" class="btnClass">取消完成</el-button>
       </div>
     </div>
   </div>
@@ -78,7 +75,7 @@ export default {
   mounted() {},
 
   computed: {
-    ...mapState(["customerOrg"]),
+    ...mapState(["customerOrg","window"]),
   },
 
   methods: {

src/components/customerOrg/customerOrgTree.vue

@@ -1,10 +1,8 @@
 <template>
-  <el-tree
-  class="tree"
+  <el-tree    
     :data="customerOrg.customerOrgTree"
     :props="customerOrg.treeprops"
-    @node-click="treeclick"
-  ></el-tree>
+    @node-click="treeclick"/>
 </template>
 <script>
 import { mapState, mapMutations } from "vuex";
@@ -17,7 +15,7 @@ export default {
   },
   //<el-tree :data="$store.state.customerOrg.customerOrgTree" :props="$store.state.customerOrg.treeprops" @node-click="treeclick"></el-tree>
   computed: {
-    ...mapState(["customerOrg"]),
+    ...mapState(["customerOrg","window"]),
   },
   //创建组件后
   created() {},
@@ -30,7 +28,7 @@ export default {
 
   methods: {
     ...mapMutations(["setData"]),
-
+    
     //获取体检单位列表树信息
     getCustomerOrgTree() {
       //let customerOrgTree = []
@@ -109,6 +107,7 @@ export default {
       this.getContactPersonList(data.id);
     },
   },
+ 
 };
 </script>
 <style scoped>

src/components/patientRegister/patientRegisterQuery.vue

@@ -110,8 +110,7 @@
           >
           </el-option>
         </el-select>
-      </div>
-      <div class="query" style="width: 50%">22</div>
+      </div>      
     </div>
     <!-- 按钮区域 -->
     <div style="margin-left: 10px; width: 110px">

src/main.js

@@ -64,3 +64,13 @@ new Vue({
   store,
   render: (h) => h(App),
 }).$mount("#app");
+
+
+//监听页面大小改变
+window.addEventListener('resize', onResize);
+function onResize() {    
+    //console.log(document.body.clientHeight,'-document.body.clientHeight-',window.innerHeight)
+    store.commit('setData', { key: 'window.pageHeight', value: window.innerHeight})
+    store.commit('setData', { key: 'window.pageWidth', value: window.innerWidth})
+}
+onResize();

src/store/index.js

@@ -9,6 +9,10 @@ export default new Vuex.Store({
   state: {
     changepassword:'',//用户密码
     set: "qqqq",
+    window:{
+      pageHeight:960, //页面高度
+      pageWidth:1920, //页面宽度
+    },    
     customerOrg: {
       //体检单位设置
       customerOrgTree: [], //体检单位列表
@@ -22,6 +26,10 @@ export default new Vuex.Store({
       customerOrgRegisterList: [], //单位体检次数登记列表
       contactPersonList: [], //联系人列表
       contactMethodList: [], //联系方式列表
+      orgEditStyle:'',      //编辑表单样式
+      orgDetailStyle:'',    //体检次数样式
+      orgDetailHeight:170,    //体检次数LIST表格高度
+      personStyle:'',       //联系人样式
     },
     //体检单位分组
     personnelUnit: {

src/views/customerOrg/customerOrg.vue

@@ -1,30 +1,33 @@
 <template>
-  <div class="box">
-    <div>
-      <el-card>
-        <div style="display: flex">
-          <!-- 单位树组件 -->
-          <div style="width: 15%; border: 1px solid">
-            <CustomerOrgTree />
-          </div>
-          <div style="width: 85%">
-            <!-- 单位详情  录入与编辑  -->
-            <CustomerOrgEdit />
-            <!-- 体检次数  联系人  -->
-            <el-tabs style="margin-left: 10px" v-model="tabChoosed">
-              <!-- 体检次数 -->
-              <el-tab-pane label="体检次数" name="1">
-                <CustomerOrgRegister />
-              </el-tab-pane>
-              <!-- 联系人 -->
-              <el-tab-pane label="联系人" name="2">
-                <ContactPerson />
-              </el-tab-pane>
-            </el-tabs>
-          </div>
+  <div>
+    <el-card style="display: block; ">
+      <!--  标题高度 60px
+      <div slot="header">
+        <span>体检单位设置</span>
+      </div>
+      -->      
+      <div style="display: flex">
+        <!-- 单位树组件 -->
+        <div :style="CustomerOrgTreeStyle">
+          <CustomerOrgTree />
         </div>
-      </el-card>
-    </div>
+        <div :style="CustomerOrgRightStyle">
+          <!-- 单位详情  录入与编辑  -->
+          <CustomerOrgEdit />
+          <!-- 体检次数  联系人  -->
+          <el-tabs style="margin-left: 10px" v-model="tabChoosed">
+            <!-- 体检次数 -->
+            <el-tab-pane label="体检次数" name="1">
+              <CustomerOrgRegister />
+            </el-tab-pane>
+            <!-- 联系人 -->
+            <el-tab-pane label="联系人" name="2">
+              <ContactPerson />
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 <script>
@@ -43,30 +46,66 @@ export default {
   data() {
     return {
       tabChoosed: "1",
+      CustomerOrgTreeStyle: "overflow: scroll;border: 1px solid;width:200px; height:600px;",
+      CustomerOrgRightStyle: "width:200px; height:600px;",
     };
   },
 
-  created() {},
+  created() { },
 
   //挂载完成
-  mounted() {},
+  mounted() {
+    this.resize();
+  },
 
   computed: {
-    ...mapState(["customerOrg"]),
+    ...mapState(["customerOrg", "window"]),
+  },
+  methods: {
+    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 = "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;";
+        }
+        
+      }
+
+    }
   },
-  methods: {},
+
+
   //监听事件
-  // watch:{
-  //   'customerOrg.customerOrgId'(newVal, oldVal){
-  //     if(newVal != oldVal && newVal != ""){
-  //       alert(newVal)
-  //     }
-  //   },
-  // },
+  watch: {
+    "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>
+<style scoped></style>