调整药品输入表格样式

src/components/ChineseMedicine.vue

@@ -215,7 +215,7 @@
         <!-- 表格  -->
         <div class="table-show flex-plane-t-between flex-wrap">
           <!-- 表一和表二 -->
-          <div class="table-left-body">
+          <div class="table-left-body" :style="{zIndex: Math.max(0, index % 2 + 1)}">
             <div class="table-left" v-if="true">
               <el-table
                 :data="recipe_tabs[recipe_tabs_c].tableData"
@@ -243,11 +243,7 @@
                           :disabled="recipe_tabs[recipe_tabs_c].disable"
                         ></el-input>
 
-                        <div
-                          class="table-choose3"
-                          v-if="index === scope.row.id - 1"
-                          :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
-                        >
+                        <div class="table-choose3" v-if="index === scope.row.id - 1">
                           <div class="table-choose-h flex-vertical-between">
                             <div class="flex-center">药品名称</div>
                             <div class="flex-center">规格</div>
@@ -312,10 +308,7 @@
                           :disabled="recipe_tabs[recipe_tabs_c].disable"
                         ></el-input>
                         <!-- v-model="scope.row.key" -->
-                        <div
-                          class="table-choose3"
-                          :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
-                        >
+                        <div class="table-choose3">
                           <div class="table-choose-h flex-vertical-between">
                             <div class="flex-center">药品名称</div>
                             <div class="flex-center">规格</div>
@@ -459,7 +452,7 @@
             </div>
           </div>
 
-          <div class="table-left-body">
+          <div class="table-left-body" :style="{zIndex: Math.max(0, index % 2)}">
             <div class="table-left" v-if="true">
               <el-table
                 :data="recipe_tabs[recipe_tabs_c].tableData1"
@@ -486,11 +479,7 @@
                           :disabled="recipe_tabs[recipe_tabs_c].disable"
                         ></el-input>
 
-                        <div
-                          class="table-choose3"
-                          v-if="index === scope.row.id - 1"
-                          :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
-                        >
+                        <div class="table-choose3" v-if="index === scope.row.id - 1">
                           <div class="table-choose-h flex-vertical-between">
                             <div class="flex-center">药品名称</div>
                             <div class="flex-center">规格</div>
@@ -555,10 +544,7 @@
                           :disabled="recipe_tabs[recipe_tabs_c].disable"
                         ></el-input>
                         <!-- v-model="scope.row.key" -->
-                        <div
-                          class="table-choose3"
-                          :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
-                        >
+                        <div class="table-choose3">
                           <div class="table-choose-h flex-vertical-between">
                             <div class="flex-center">药品名称</div>
                             <div class="flex-center">规格</div>
@@ -957,7 +943,7 @@
       </div>
     </div>
 
-    <popup
+    <popup class="accord-edit-wrapper"
       :showDialog="showDialog"
       distanceTop="4vh"
       @cancle="showDialog=false"
@@ -2022,10 +2008,10 @@ export default {
       let index = scope.row.id ? scope.row.id - 1 : 0;
       // console.log(this.recipe_tabs[this.recipe_tabs_c].totalTableD[index], '我是key')
 
-      let ids = document.querySelectorAll("#operate2");
-      ids.forEach((item, index) => {
-        item.style["z-index"] = "auto";
-      });
+      // let ids = document.querySelectorAll("#operate2");
+      // ids.forEach((item, index) => {
+      //   item.style["z-index"] = "auto";
+      // });
       // if (e != '') {
       //     this.recipe_tabs[this.recipe_tabs_c].totalTableD[
       //         scope.row.id - 1
@@ -2059,10 +2045,10 @@ export default {
         this.recipe_tabs[this.recipe_tabs_c].totalTableD[index].key = "";
         this.recipe_tabs[this.recipe_tabs_c].totalTableD[index].showSearch = false;
         this.recipe_tabs[this.recipe_tabs_c].totalTableD[index].drugList = [];
-        let ids = document.querySelectorAll("#operate2");
-        ids.forEach((item, index) => {
-          item.style["z-index"] = "99";
-        });
+        // let ids = document.querySelectorAll("#operate2");
+        // ids.forEach((item, index) => {
+        //   item.style["z-index"] = "99";
+        // });
         this._splitDataToView();
       }, 500);
     },
@@ -2620,7 +2606,15 @@ export default {
       }
       setTimeout(() => {
         const el = document.querySelectorAll(`#searchD${index+1}`)[0];
-        if (el) el.focus();
+        if (el) {
+          el.focus();
+          const container = document.querySelector(`.table-container`);
+          if (container) {
+            const _bottom = container.getBoundingClientRect().bottom;
+            const bottom = el.getBoundingClientRect().bottom;
+            if (bottom + 220 > _bottom) container.scrollTop += 220;
+          }
+        }
       }, 100);
     },
     // 获取省数据
@@ -2836,6 +2830,16 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+.accord-edit-wrapper {
+  .popup-container {
+    display: flex;
+    flex-direction: column;
+    > div { flex: auto; }
+    > div.btns { flex: none; }
+  }
+}
+</style>
 <style lang="scss" scoped>
 @import "../style/common.scss";
 
@@ -2891,14 +2895,24 @@ export default {
 }
 
 #chineseM {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   .table-container {
-    padding: 5px 0px;
+    display: flex;
+    flex-direction: column;
+    //padding: 5px 0px;
+    height: 100%;
     // height: 340px;
-    height: calc(100% - 80px);
+    //height: calc(100% - 80px);
     overflow: auto;
 
     .t-con-header {
+      position: sticky;
+      top: -1px;
+      z-index: 99;
+      background-color: #fff;
+      padding-top: 5px;
       margin-bottom: 0px;
 
       .t-con-radio {
@@ -2931,21 +2945,29 @@ export default {
         cursor: pointer;
       }
     }
+    .table-msg {
+      flex: auto;
+      display: flex;
+      flex-direction: column;
+
+    }
   }
 }
 
 .table-show {
+  flex: auto;
   width: 100%;
   // min-height: 212px;
-  overflow: auto;
+  //overflow: auto;
 
   // background: #5386F6;
   // overflow: hidden;
-  z-index: 999;
+  //z-index: 999;
   position: relative;
 
   .table-left-body {
     width: 50%;
+    height: 100%;
     position: relative;
     perspective: 100px;
     // padding-bottom: 10px;
@@ -2953,6 +2975,7 @@ export default {
 
   .table-left {
     width: 100%;
+    height: 100%;
     overflow-y: auto;
     border: 1px solid #dedede;
     box-sizing: border-box;
@@ -3010,7 +3033,7 @@ export default {
         height: 53px;
         line-height: 53px;
         border: 1px solid #dedede;
-        z-index: 9999;
+        //z-index: 9999;
         border-top: 0 !important;
       }
 
@@ -3072,7 +3095,7 @@ export default {
   }
 
   .table-choose {
-    z-index: 9999;
+    //z-index: 9999;
     width: 332px;
     height: 221px;
     background: #ffffff;
@@ -3126,7 +3149,7 @@ export default {
   padding: 0 10px;
   // margin-top: 241px;
   margin-top: 5px;
-  z-index: -1;
+  //z-index: -1;
 
   .header-about {
     .item {
@@ -3355,7 +3378,7 @@ export default {
   // perspective: 100px;
 
   .dose-section {
-    z-index: 999999 !important;
+    //z-index: 999999 !important;
     position: fixed;
     width: 50px;
     //left: 136px;
@@ -3375,16 +3398,16 @@ export default {
 }
 
 .table-choose3 {
-  z-index: 999999 !important;
+  z-index: 99;
   // width: 332px;
   width: 532px;
   height: 221px;
   background: #ffffff;
   border: 2px solid #d8d8d8;
   position: fixed;
-  top: 44px;
+  //top: 44px;
   left: 84px;
-  margin-top: 19px;
+  //margin-top: 19px;
   overflow: auto;
 
   .table-choose-h {
@@ -3454,6 +3477,7 @@ export default {
 
 .table-show::v-deep .el-table {
   // z-index: 999;
+  height: 100%;
 }
 
 .table-show::v-deep .el-table th {

src/components/MedicineAccord.vue

@@ -44,14 +44,13 @@
         <!-- 表格  -->
         <div class="table-show flex-plane-t-between flex-wrap">
           <!-- 表一和表二 -->
-          <div class="table-left-body">
+          <div class="table-left-body" :style="{zIndex: Math.max(0, index % 2 + 1)}">
             <div class="table-left" v-if="true">
               <el-table
                 :data="recipe_tabs[recipe_tabs_c].tableData"
                 style="width:100%;"
                 :span-method="arraySpanMethod1"
                 id="table1"
-                height="500px"
               >
                 <el-table-column prop="id" label width="20">
                   <template slot-scope="scope">
@@ -73,11 +72,7 @@
                           :disabled="recipe_tabs[recipe_tabs_c].disable"
                         ></el-input>
 
-                        <div
-                          class="table-choose3"
-                          v-if="index === scope.row.id - 1"
-                          :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
-                        >
+                        <div class="table-choose3" v-if="index === scope.row.id - 1">
                           <div class="table-choose-h flex-vertical-between">
                             <div class="flex-center">药品名称</div>
                             <div class="flex-center">规格</div>
@@ -142,10 +137,7 @@
                           :disabled="recipe_tabs[recipe_tabs_c].disable"
                         ></el-input>
                         <!-- v-model="scope.row.key" -->
-                        <div
-                          class="table-choose3"
-                          :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
-                        >
+                        <div class="table-choose3">
                           <div class="table-choose-h flex-vertical-between">
                             <div class="flex-center">药品名称</div>
                             <div class="flex-center">规格</div>
@@ -289,13 +281,12 @@
             </div>
           </div>
 
-          <div class="table-left-body">
+          <div class="table-left-body" :style="{zIndex: Math.max(0, index % 2)}">
             <div class="table-left" v-if="true">
               <el-table
                 :data="recipe_tabs[recipe_tabs_c].tableData1"
                 :span-method="arraySpanMethod1"
                 id="table1"
-                height="500px"
               >
                 <el-table-column prop="id" label width="20">
                   <template slot-scope="scope">
@@ -317,11 +308,7 @@
                           :disabled="recipe_tabs[recipe_tabs_c].disable"
                         ></el-input>
 
-                        <div
-                          class="table-choose3"
-                          v-if="index === scope.row.id - 1"
-                          :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
-                        >
+                        <div class="table-choose3" v-if="index === scope.row.id - 1">
                           <div class="table-choose-h flex-vertical-between">
                             <div class="flex-center">药品名称</div>
                             <div class="flex-center">规格</div>
@@ -386,10 +373,7 @@
                           :disabled="recipe_tabs[recipe_tabs_c].disable"
                         ></el-input>
                         <!-- v-model="scope.row.key" -->
-                        <div
-                          class="table-choose3"
-                          :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
-                        >
+                        <div class="table-choose3">
                           <div class="table-choose-h flex-vertical-between">
                             <div class="flex-center">药品名称</div>
                             <div class="flex-center">规格</div>
@@ -1485,9 +1469,9 @@ export default {
       // console.log(this.recipe_tabs[this.recipe_tabs_c].totalTableD[index], '我是key')
 
       let ids = document.querySelectorAll(".medicine-editor-wrapper #operate2");
-      ids.forEach((item, index) => {
-        item.style["z-index"] = "auto";
-      });
+      // ids.forEach((item, index) => {
+      //   item.style["z-index"] = "auto";
+      // });
       // if (e != '') {
       //     this.recipe_tabs[this.recipe_tabs_c].totalTableD[
       //         scope.row.id - 1
@@ -1522,9 +1506,9 @@ export default {
         this.recipe_tabs[this.recipe_tabs_c].totalTableD[index].showSearch = false;
         this.recipe_tabs[this.recipe_tabs_c].totalTableD[index].drugList = [];
         let ids = document.querySelectorAll("#operate2");
-        ids.forEach((item, index) => {
-          item.style["z-index"] = "99";
-        });
+        // ids.forEach((item, index) => {
+        //   item.style["z-index"] = "99";
+        // });
         this._splitDataToView();
       }, 500);
     },
@@ -2073,8 +2057,15 @@ export default {
       }
       setTimeout(() => {
         const el = document.querySelectorAll(`.medicine-editor-wrapper #searchD${index+1}`)[0];
-        console.log(el);
-        if (el) el.focus();
+        if (el) {
+          el.focus();
+          const container = document.querySelector(`.popup-container`) || document.querySelector(`.second-view`)
+          if (container) {
+            const _bottom = container.getBoundingClientRect().bottom;
+            const bottom = el.getBoundingClientRect().bottom;
+            if (bottom + 220 > _bottom) container.scrollTop += 220;
+          }
+        }
       }, 100);
     },
     // 获取省数据
@@ -2272,6 +2263,55 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.medicine-editor-wrapper {
+  height: 100%;
+}
+.table-container {
+  display: flex;
+  flex-direction: column;
+  padding: 5px 0px;
+  height: 100%;
+
+  .t-con-header {
+    flex: none;
+    margin-bottom: 0px;
+
+    .t-con-radio {
+      flex: 1;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #eaeaea;
+    }
+
+    .t-radio-title {
+      width: 82px;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    .t-radio-group {
+      flex: 1;
+    }
+
+    .add-presc1 {
+      width: 84px;
+      height: 34px;
+      background: #ffae45;
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #ffffff;
+      cursor: pointer;
+    }
+  }
+  .table-msg {
+    flex: auto;
+  }
+}
+</style>
+<style lang="scss" scoped>
 @import "../style/common.scss";
 
 .table-header {
@@ -2325,69 +2365,29 @@ export default {
   margin-right: 10px;
 }
 
-#chineseM {
-  height: 100%;
-  .table-container {
-    padding: 5px 0px;
-    // height: 340px;
-    height: calc(100% - 80px);
-    overflow: auto;
-
-    .t-con-header {
-      margin-bottom: 0px;
-
-      .t-con-radio {
-        flex: 1;
-        padding-bottom: 5px;
-        border-bottom: 1px solid #eaeaea;
-      }
-
-      .t-radio-title {
-        width: 82px;
-        font-size: 16px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #333333;
-      }
-
-      .t-radio-group {
-        flex: 1;
-      }
-
-      .add-presc1 {
-        width: 84px;
-        height: 34px;
-        background: #ffae45;
-        border-radius: 4px;
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: bold;
-        color: #ffffff;
-        cursor: pointer;
-      }
-    }
-  }
-}
-
 .table-show {
   width: 100%;
+  height: 100%;
   // min-height: 212px;
-  overflow: auto;
+  //overflow: auto;
 
   // background: #5386F6;
   // overflow: hidden;
-  z-index: 999;
+  //z-index: 999;
   position: relative;
 
   .table-left-body {
     width: 50%;
+    height: 100%;
     position: relative;
+    z-index: 0;
     perspective: 100px;
     // padding-bottom: 10px;
   }
 
   .table-left {
     width: 100%;
+    height: 100%;
     overflow-y: auto;
     border: 1px solid #dedede;
     box-sizing: border-box;
@@ -2445,7 +2445,7 @@ export default {
         height: 53px;
         line-height: 53px;
         border: 1px solid #dedede;
-        z-index: 9999;
+        //z-index: 9999;
         border-top: 0 !important;
       }
 
@@ -2507,7 +2507,7 @@ export default {
   }
 
   .table-choose {
-    z-index: 9999;
+    //z-index: 9999;
     width: 332px;
     height: 221px;
     background: #ffffff;
@@ -2561,7 +2561,7 @@ export default {
   padding: 0 10px;
   // margin-top: 241px;
   margin-top: 5px;
-  z-index: -1;
+  //z-index: -1;
 
   .header-about {
     .item {
@@ -2790,7 +2790,7 @@ export default {
   // perspective: 100px;
 
   .dose-section {
-    z-index: 999999 !important;
+    //z-index: 999999 !important;
     position: fixed;
     width: 50px;
     left: 136px;
@@ -2809,16 +2809,16 @@ export default {
 }
 
 .table-choose3 {
-  z-index: 999999 !important;
+  z-index: 99;
   // width: 332px;
   width: 532px;
   height: 221px;
   background: #ffffff;
   border: 2px solid #d8d8d8;
   position: fixed;
-  top: 44px;
+  //top: 32px;
   left: 84px;
-  margin-top: 19px;
+  //margin-top: 19px;
   overflow: auto;
 
   .table-choose-h {
@@ -2888,6 +2888,17 @@ export default {
 
 .table-show::v-deep .el-table {
   // z-index: 999;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .el-table__header-wrapper {
+    flex: none;
+  }
+  .el-table__body-wrapper {
+    flex: auto;
+    min-height: 221px;
+  }
 }
 
 .table-show::v-deep .el-table th {

src/style/media/diagnosis/prescribing.scss

@@ -20,11 +20,11 @@
     ::v-deep {
       #chineseM{
         .table-msg{
-          height: calc(100% - 25px);
-          overflow: auto;
+          //height: calc(100% - 25px);
+          //overflow: auto;
         }
         .table-show {
-          min-height: calc(100% - 80px);
+          //min-height: calc(100% - 80px);
         }
       }
 
@@ -131,8 +131,8 @@
   // 中药
   .prescribing ::v-deep .table-container {
     // height: 519px !important;
-     height: calc(100% - 80px) !important;
-    overflow: auto;
+    // height: calc(100% - 80px) !important;
+    //overflow: auto;
   }
 
    .prescribing ::v-deep .med-accord .table-container{
@@ -162,8 +162,8 @@
   // 中药
   .prescribing ::v-deep .table-container {
     // height: 394px !important;
-     height: calc(100% - 80px) !important;
-    overflow: auto;
+    // height: calc(100% - 80px) !important;
+    //overflow: auto;
   }
 
    .prescribing ::v-deep .med-accord .table-container{
@@ -199,8 +199,8 @@
    // 中药
   .prescribing ::v-deep .table-container {
     // height: 394px !important;
-     height: calc(100% - 80px) !important;
-    overflow: auto;
+    // height: calc(100% - 80px) !important;
+    //overflow: auto;
   }
 
   

src/views/business/AccordEdit.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="accordEdit">
     <!-- <div class="flex-center back" @click="$router.back()" v-if='showBtn'>返回</div> -->
-    <div>
+    <div class="sticky" v-if="showBtn">
       <el-button size="mini" type="primary" @click="$router.back()" v-if="showBtn">返回</el-button>
       <el-button
         size="mini"
         type="warning"
-        v-if="(type=='edit' &&showBtn) || (type=='add' && showBtn)"
+        v-if="type === 'edit' || type === 'add'"
         @click="save()"
       >保存</el-button>
     </div>
-    <div class="flex-vertical-center-l flex-wrap topForm">
+    <div class="flex-vertical-center-l flex-wrap">
       <div class="item flex-vertical-center-l">
         <span>*</span>
         <div class="name">方名：</div>
@@ -681,6 +681,25 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.accordEdit {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  > div { flex: none; }
+  > div.bottom { flex: auto; }
+  
+  .sticky {
+    position: sticky;
+    top: -6px;
+    width: 100%;
+    background-color: #fff;
+    z-index: 11;
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+  }
+}
+</style>
+<style lang="scss" scoped>
 @import "../../style/common.scss";
 
 .accordEdit {
@@ -688,22 +707,6 @@ export default {
   background: #ffffff;
   border-radius: 5px;
   box-sizing: border-box;
-  height: 99%;
-  overflow: auto;
-
-  .back {
-    width: 74px;
-    height: 36px;
-    background: #5386f6;
-    border-radius: 4px;
-    font-size: 14px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #ffffff;
-    margin-bottom: 49px;
-    cursor: pointer;
-  }
-
   .item {
     font-size: 14px;
     font-family: PingFang SC;
@@ -726,8 +729,5 @@ export default {
   .topForm {
     margin-top: 10px;
   }
-
-  .bottom {
-  }
 }
 </style>

src/views/diagnosis/Prescribing.vue

@@ -4570,15 +4570,16 @@ export default {
   }
 
   .pre-center {
-    height: 100%;
+    display: flex;
+    flex-direction: column;
     flex: 1;
     padding: 5px 5px;
     background: #fff;
     box-sizing: border-box;
-    overflow: auto;
-    overflow-y: auto;
-    height: 470px;
+    overflow: hidden;
 
+    > div { flex: none; }
+    > div.center-table { flex: auto; }
     .center-tab {
       div {
         cursor: default;