药品搜索输入框 显示 & 输入问题

src/components/ChineseMedicine.vue

@@ -245,7 +245,7 @@
 
                         <div
                           class="table-choose3"
-                          v-if="scope.row.key"
+                          v-if="index === scope.row.id - 1"
                           :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
                         >
                           <div class="table-choose-h flex-vertical-between">
@@ -294,7 +294,7 @@
                   <template slot-scope="scope" v-if="scope.row.name">
                     <div
                       @click="clickName(scope)"
-                      v-if="!scope.row.showSearch"
+                      v-if="index !== scope.row.id - 1"
                       :style="{'color':scope.row.color?scope.row.color:''}"
                     >{{scope.row.name}}</div>
                     <div v-else class="flex-vertical-between">
@@ -314,7 +314,6 @@
                         <!-- v-model="scope.row.key" -->
                         <div
                           class="table-choose3"
-                          v-if="scope.row.key"
                           :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
                         >
                           <div class="table-choose-h flex-vertical-between">
@@ -489,7 +488,7 @@
 
                         <div
                           class="table-choose3"
-                          v-if="scope.row.key"
+                          v-if="index === scope.row.id - 1"
                           :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
                         >
                           <div class="table-choose-h flex-vertical-between">
@@ -538,7 +537,7 @@
                   <template slot-scope="scope" v-if="scope.row.name">
                     <div
                       @click="clickName(scope)"
-                      v-if="!scope.row.showSearch"
+                      v-if="index !== scope.row.id - 1"
                       :style="{'color':scope.row.color?scope.row.color:''}"
                     >{{scope.row.name}}</div>
                     <div v-else class="flex-vertical-between">
@@ -558,7 +557,6 @@
                         <!-- v-model="scope.row.key" -->
                         <div
                           class="table-choose3"
-                          v-if="scope.row.key"
                           :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
                         >
                           <div class="table-choose-h flex-vertical-between">
@@ -998,6 +996,8 @@ import { debounce } from "@/utils/format.js";
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 import popup from "@/components/Propup.vue";
 import accompanied from "./ui/accompanied.vue";
+
+let medicineBlurTimer;
 export default {
   components: {
     popup,
@@ -1109,7 +1109,7 @@ export default {
         }
       ], // 处方 tabs
       recipe_tabs_c: 0, // 处方 tabs 下标
-      index: 0, // 全局index 下拉加载时使用
+      index: -1, // 全局index 下拉加载时使用
 
       provinceList1: [], // 全局省列表 赋值用
       countWay: "1", // 计算方式
@@ -1533,7 +1533,7 @@ export default {
         this.$message.warning("已支付处方不可以清空");
         return;
       }
-      this.index = 0;
+      this.index = -1;
       this.recipe_tabs[this.recipe_tabs_c].disable = false;
       this.recipe_tabs[this.recipe_tabs_c].isMyMade = true;
       this.recipe_tabs[this.recipe_tabs_c].totalTableD.splice(
@@ -1623,6 +1623,7 @@ export default {
       this.countNowRecipeMoney();
     },
     load() {
+      if (this.index === -1) return;
       console.log("进入");
       let key = this.recipe_tabs[this.recipe_tabs_c].totalTableD[this.index]
         .key;
@@ -1811,6 +1812,10 @@ export default {
       });
       if (isHas) {
         this.$message.warning("请勿重复添加药品");
+        clearTimeout(medicineBlurTimer);
+        let index = scope.row.id ? scope.row.id - 1 : 0;
+        const el = document.querySelectorAll(`#searchD${index+1}`)[0];
+        if (el) el.focus();
         return;
       }
 
@@ -1882,8 +1887,9 @@ export default {
 
       if (from != "now") return;
       setTimeout(() => {
-        let ids = document.querySelectorAll("#dose" + scope.row.id);
-        document.querySelectorAll("#dose" + scope.row.id)[0].focus();
+        const el = document.querySelectorAll("#dose" + scope.row.id)[0];
+        if (el) el.focus();
+        this.index = -1;
       }, 500);
 
       this.countNowRecipeMoney();
@@ -1976,6 +1982,7 @@ export default {
       this.countNowRecipeMoney();
     },
     clickName(scope) {
+      if (medicineBlurTimer) clearTimeout(medicineBlurTimer);
       // 隐藏滚动条
       if (scope.row.id % 2 == 0) {
         document.getElementsByClassName(
@@ -1986,21 +1993,16 @@ export default {
           "el-table__body-wrapper"
         )[0].style.overflow = "hidden";
       }
+      let index = scope.row.id ? scope.row.id - 1 : 0;
+      this.index = index;
 
       this.medIndex = scope.$index;
       this.clickPid = scope.row.medid;
 
-      this.recipe_tabs[this.recipe_tabs_c].totalTableD[
-        scope.row.id - 1
-      ].showSearch = !this.recipe_tabs[this.recipe_tabs_c].totalTableD[
-        scope.row.id - 1
-      ].showSearch;
-
-      this.recipe_tabs[this.recipe_tabs_c].totalTableD[scope.row.id - 1].key =
-        scope.row.name;
-      this.recipe_tabs[this.recipe_tabs_c].totalTableD[
-        scope.row.id - 1
-      ].search_i = 0;
+      const totalData = this.recipe_tabs[this.recipe_tabs_c].totalTableD;
+      totalData[index].showSearch = !totalData[index].showSearch;
+      totalData[index].key = scope.row.name;
+      totalData[index].search_i = 0;
 
       if (!scope.row.key) scope.row.key = scope.row.name;
       debounce(this.getTableDrug(scope.row.key, 1, scope.row.id - 1), 10000);
@@ -2038,7 +2040,7 @@ export default {
       totalData[index].key = e;
       totalData[index].search_i = 0;
       this._splitDataToView(totalData);
-      this.index = scope.row.id - 1;
+      this.index = index;
 
       // this.getTableDrug(scope.row.key, 1, scope.row.id - 1)
 
@@ -2048,61 +2050,19 @@ export default {
       this.medIndex = scope.$index;
     },
     drugBlur(e, scope) {
-      // 调用 父级合理用药接口
-
-      // father.getRationalMedForPlat(scope.row.medid)
-      // 失去焦点 释放滚动条
-      if (scope.row.id % 2 == 0) {
-        document.getElementsByClassName(
-          "el-table__body-wrapper"
-        )[1].style.overflow = "auto";
-      } else {
-        document.getElementsByClassName(
-          "el-table__body-wrapper"
-        )[0].style.overflow = "auto";
-      }
-      setTimeout(() => {
-        let index = scope.row.id ? scope.row.id - 1 : 0;
-        this.recipe_tabs[this.recipe_tabs_c].totalTableD[index].key = "";
-
-        let ids = document.querySelectorAll("#operate2");
-        ids.forEach((item, index) => {
-          item.style["z-index"] = "99";
-        });
-
-        this.recipe_tabs[this.recipe_tabs_c].totalTableD.forEach(item => {
-          item.drugList = [];
-        });
-        this._splitDataToView();
-      }, 500);
+      return this.drugBlur1(e, scope)
     },
     drugBlur1(e, scope) {
-      // 调用 父级合理用药接口
-
-      // 失去焦点 展示滚动条
-      if (scope.row.id % 2 == 0) {
-        document.getElementsByClassName(
-          "el-table__body-wrapper"
-        )[1].style.overflow = "auto";
-      } else {
-        document.getElementsByClassName(
-          "el-table__body-wrapper"
-        )[0].style.overflow = "auto";
-      }
-      setTimeout(() => {
+      medicineBlurTimer = setTimeout(() => {
+        this.index = -1;
         let index = scope.row.id ? scope.row.id - 1 : 0;
         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].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";
         });
-
-        this.recipe_tabs[this.recipe_tabs_c].totalTableD.forEach(item => {
-          item.drugList = [];
-        });
         this._splitDataToView();
       }, 500);
     },
@@ -2594,6 +2554,7 @@ export default {
     },
     // 获取表格药品列表
     async getTableDrug(key, page, index, load = true) {
+      if (medicineBlurTimer) clearTimeout(medicineBlurTimer);
       if (!load) return;
       let pharmacyName = "";
       // let type = 0
@@ -2612,6 +2573,7 @@ export default {
         pharmacyid: this.recipe_tabs[this.recipe_tabs_c].pharmacyID
       };
       let res = await getTableDrug(params);
+      if (this.index !== index) return;
 
       if (res.ResultCode == 0) {
         // 计算方式3

src/components/MedicineAccord.vue

@@ -75,7 +75,7 @@
 
                         <div
                           class="table-choose3"
-                          v-if="scope.row.key"
+                          v-if="index === scope.row.id - 1"
                           :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
                         >
                           <div class="table-choose-h flex-vertical-between">
@@ -124,7 +124,7 @@
                   <template slot-scope="scope" v-if="scope.row.name">
                     <div
                       @click="clickName(scope)"
-                      v-if="!scope.row.showSearch"
+                      v-if="index !== scope.row.id - 1"
                       :style="{'color':scope.row.color?scope.row.color:''}"
                     >{{scope.row.name}}</div>
                     <div v-else class="flex-vertical-between">
@@ -144,7 +144,6 @@
                         <!-- v-model="scope.row.key" -->
                         <div
                           class="table-choose3"
-                          v-if="scope.row.key"
                           :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
                         >
                           <div class="table-choose-h flex-vertical-between">
@@ -320,7 +319,7 @@
 
                         <div
                           class="table-choose3"
-                          v-if="scope.row.key"
+                          v-if="index === scope.row.id - 1"
                           :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
                         >
                           <div class="table-choose-h flex-vertical-between">
@@ -369,7 +368,7 @@
                   <template slot-scope="scope" v-if="scope.row.name">
                     <div
                       @click="clickName(scope)"
-                      v-if="!scope.row.showSearch"
+                      v-if="index !== scope.row.id - 1"
                       :style="{'color':scope.row.color?scope.row.color:''}"
                     >{{scope.row.name}}</div>
                     <div v-else class="flex-vertical-between">
@@ -389,7 +388,6 @@
                         <!-- v-model="scope.row.key" -->
                         <div
                           class="table-choose3"
-                          v-if="scope.row.key"
                           :style="medIndex==0?'':{top:(medIndex*35)+'px'}"
                         >
                           <div class="table-choose-h flex-vertical-between">
@@ -563,6 +561,8 @@ import { debounce } from "@/utils/format.js";
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 import popup from "@/components/Propup.vue";
 import accompanied from "./ui/accompanied.vue";
+
+let medicineBlurTimer;
 export default {
   components: {
     popup,
@@ -673,7 +673,7 @@ export default {
         }
       ], // 处方 tabs
       recipe_tabs_c: 0, // 处方 tabs 下标
-      index: 0, // 全局index 下拉加载时使用
+      index: -1, // 全局index 下拉加载时使用
 
       provinceList1: [], // 全局省列表 赋值用
       countWay: "1", // 计算方式
@@ -1042,7 +1042,7 @@ export default {
     },
     // 清空处方
     clearRecipe() {
-      this.index = 0;
+      this.index = -1;
       this.recipe_tabs[this.recipe_tabs_c].disable = false;
       this.recipe_tabs[this.recipe_tabs_c].isMyMade = true;
       this.recipe_tabs[this.recipe_tabs_c].totalTableD.splice(
@@ -1124,6 +1124,7 @@ export default {
       this.countNowRecipeMoney();
     },
     load() {
+      if (this.index === -1) return;
       console.log("进入");
       let key = this.recipe_tabs[this.recipe_tabs_c].totalTableD[this.index]
         .key;
@@ -1296,6 +1297,10 @@ export default {
       });
       if (isHas) {
         this.$message.warning("请勿重复添加药品");
+        clearTimeout(medicineBlurTimer);
+        let index = scope.row.id ? scope.row.id - 1 : 0;
+        const el = document.querySelectorAll(`.medicine-editor-wrapper #searchD${index+1}`)[0];
+        if (el) el.focus();
         return;
       }
 
@@ -1349,8 +1354,9 @@ export default {
 
       if (from != "now") return;
       setTimeout(() => {
-        let ids = document.querySelectorAll(".medicine-editor-wrapper #dose" + scope.row.id);
-        document.querySelectorAll(".medicine-editor-wrapper #dose" + scope.row.id)[0].focus();
+        const el = document.querySelectorAll(".medicine-editor-wrapper #dose" + scope.row.id)[0];
+        if (el) el.focus();
+        this.index = -1;
       }, 500);
 
       this.countNowRecipeMoney();
@@ -1438,6 +1444,7 @@ export default {
       this.countNowRecipeMoney();
     },
     clickName(scope) {
+      if (medicineBlurTimer) clearTimeout(medicineBlurTimer);
       // 隐藏滚动条
       if (scope.row.id % 2 == 0) {
         document.getElementsByClassName(
@@ -1448,24 +1455,19 @@ export default {
           "el-table__body-wrapper"
         )[0].style.overflow = "hidden";
       }
+      let index = scope.row.id ? scope.row.id - 1 : 0;
+      this.index = index;
 
       this.medIndex = scope.$index;
       this.clickPid = scope.row.medid;
 
-      this.recipe_tabs[this.recipe_tabs_c].totalTableD[
-        scope.row.id - 1
-      ].showSearch = !this.recipe_tabs[this.recipe_tabs_c].totalTableD[
-        scope.row.id - 1
-      ].showSearch;
-
-      this.recipe_tabs[this.recipe_tabs_c].totalTableD[scope.row.id - 1].key =
-        scope.row.name;
-      this.recipe_tabs[this.recipe_tabs_c].totalTableD[
-        scope.row.id - 1
-      ].search_i = 0;
+      const totalData = this.recipe_tabs[this.recipe_tabs_c].totalTableD;
+      totalData[index].showSearch = !totalData[index].showSearch;
+      totalData[index].key = scope.row.name;
+      totalData[index].search_i = 0;
 
       if (!scope.row.key) scope.row.key = scope.row.name;
-      debounce(this.getTableDrug(scope.row.key, 1, scope.row.id - 1), 10000);
+      debounce(this.getTableDrug(scope.row.key, 1, index), 10000);
     },
     // 输入框获取 药品列表
     searchDrug(e, scope) {
@@ -1500,7 +1502,7 @@ export default {
       totalData[index].key = e;
       totalData[index].search_i = 0;
       this._splitDataToView(totalData);
-      this.index = scope.row.id - 1;
+      this.index = index;
 
       // this.getTableDrug(scope.row.key, 1, scope.row.id - 1)
 
@@ -1510,61 +1512,19 @@ export default {
       this.medIndex = scope.$index;
     },
     drugBlur(e, scope) {
-      // 调用 父级合理用药接口
-
-      // father.getRationalMedForPlat(scope.row.medid)
-      // 失去焦点 释放滚动条
-      if (scope.row.id % 2 == 0) {
-        document.getElementsByClassName(
-          "el-table__body-wrapper"
-        )[1].style.overflow = "auto";
-      } else {
-        document.getElementsByClassName(
-          "el-table__body-wrapper"
-        )[0].style.overflow = "auto";
-      }
-      setTimeout(() => {
-        let index = scope.row.id ? scope.row.id - 1 : 0;
-        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"] = "99";
-        });
-
-        this.recipe_tabs[this.recipe_tabs_c].totalTableD.forEach(item => {
-          item.drugList = [];
-        });
-        this._splitDataToView();
-      }, 500);
+      return this.drugBlur1(e, scope)
     },
     drugBlur1(e, scope) {
-      // 调用 父级合理用药接口
-
-      // 失去焦点 展示滚动条
-      if (scope.row.id % 2 == 0) {
-        document.getElementsByClassName(
-          "el-table__body-wrapper"
-        )[1].style.overflow = "auto";
-      } else {
-        document.getElementsByClassName(
-          "el-table__body-wrapper"
-        )[0].style.overflow = "auto";
-      }
-      setTimeout(() => {
+      medicineBlurTimer = setTimeout(() => {
+        this.index = -1;
         let index = scope.row.id ? scope.row.id - 1 : 0;
         this.recipe_tabs[this.recipe_tabs_c].totalTableD[index].key = "";
-        this.recipe_tabs[this.recipe_tabs_c].totalTableD[
-          index
-        ].showSearch = false;
-        let ids = document.querySelectorAll(".medicine-editor-wrapper #operate2");
+        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";
         });
-
-        this.recipe_tabs[this.recipe_tabs_c].totalTableD.forEach(item => {
-          item.drugList = [];
-        });
         this._splitDataToView();
       }, 500);
     },
@@ -2047,6 +2007,7 @@ export default {
     },
     // 获取表格药品列表
     async getTableDrug(key, page, index, load = true) {
+      if (medicineBlurTimer) clearTimeout(medicineBlurTimer);
       if (!load) return;
       let pharmacyName = "";
       // let type = 0
@@ -2065,6 +2026,7 @@ export default {
         pharmacyid: this.recipe_tabs[this.recipe_tabs_c].pharmacyID
       };
       let res = await getTableDrug(params);
+      if (this.index !== index) return;
 
       if (res.ResultCode == 0) {
         // 计算方式3