选择框组件封装

src/components/basicKnow/AddTerm.vue

@@ -562,41 +562,10 @@
               ></el-input>
             </el-form-item>
             <el-form-item v-if="data.type=='体格检查结果'" label="科室：" prop="description" class="marT">
-              <searchTerm v-model="klVitalResultVO.deptList" :type="115"></searchTerm>
-              <!-- <el-select
-                v-model="klVitalResultVO.deptList"
-                multiple
-                filterable
-                remote
-                reserve-keyword
-                placeholder="请输入关键词"
-                :remote-method="searchConcept"
-              >
-                <el-option
-                  v-for="item in conceptList"
-                  :key="item.conceptId"
-                  :label="item.conceptName"
-                  :value="item.conceptId"
-                ></el-option>
-              </el-select> -->
+              <searchTerm :list.sync="klVitalResultVO.deptList" :autoValue="true" :type="115"></searchTerm>
             </el-form-item>
             <el-form-item v-if="data.type=='体格检查结果'" label="部位：" prop="description" class="marT">
-              <el-select
-                v-model="klVitalResultVO.partList"
-                multiple
-                filterable
-                remote
-                reserve-keyword
-                placeholder="请输入关键词"
-                :remote-method="searchConcept"
-              >
-                <el-option
-                  v-for="item in conceptList"
-                  :key="item.conceptId"
-                  :label="item.conceptName"
-                  :value="item.conceptId"
-                ></el-option>
-              </el-select>
+              <searchTerm :list.sync="klVitalResultVO.partList" :autoValue="true" :type="122"></searchTerm>
             </el-form-item>
             <el-form-item v-if="data.type=='体格检查结果'" label="不适宜人群：" prop="description" class="marT">
               <div-editable v-model="klVitalResultVO.suitablePopNo" :Maincontent="'Maincontent1'"></div-editable>
@@ -1313,20 +1282,20 @@ export default {
       console.log(params);
       // return false
       this.saveDisable = true; //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
-      api.saveBaseConceptInfo(params).then(res => {
-        const result = res.data;
-        if (result.code == 0) {
-          this.warning(res.data.msg || '操作成功', 'success');
-          //返回带搜索条件的首页
-          this.$router.push({
-            name: 'BasicTermsMaintenance',
-            params: Object.assign({}, this.$route.params, { currentPage: 1 })
-          });
-        } else {
-          this.warning(res.data.msg);
-        }
-        this.saveDisable = false;
-      });
+      // api.saveBaseConceptInfo(params).then(res => {
+      //   const result = res.data;
+      //   if (result.code == 0) {
+      //     this.warning(res.data.msg || '操作成功', 'success');
+      //     //返回带搜索条件的首页
+      //     this.$router.push({
+      //       name: 'BasicTermsMaintenance',
+      //       params: Object.assign({}, this.$route.params, { currentPage: 1 })
+      //     });
+      //   } else {
+      //     this.warning(res.data.msg);
+      //   }
+      //   this.saveDisable = false;
+      // });
     },
     inputAge() {
       // console.log("输入年龄")

src/components/basicKnow/searchTerm.vue

@@ -6,25 +6,45 @@
       v-html="innerText"
       @input="handleInput"
       @focus="isChange = false"
-    ></div> -->
-    <ul class="list">
-      <li class="item" v-for="(item,index) in conceptList" :key="index">{{item.conceptName}}</li>
-    </ul>
-    <div class="source">
-      <transition-group name="flip-list">
-        <span
-          v-for="item in conceptList"
-          :key="item"
-          draggable="true"
-          class="items"
-          @dragstart="dragstart(item)"
-          @dragenter="dragenter(item)"
-          @dragend="dragend(item)"
+    ></div>-->
+
+    <div class="source" @click="getfouce">
+      <div class="select">
+        <transition-group name="flip-list">
+          <span
+            v-for="(item,index) in items"
+            :key="item.conceptId"
+            draggable="true"
+            class="items"
+            @dragstart="dragstart(item)"
+            @dragenter="dragenter(item)"
+            @dragend="dragend(item)"
+          >
+            {{item.conceptName}}
+            <i class="el-icon-close" @click.stop="delTag(index)"></i>
+          </span>
+        </transition-group>
+        <input
+          class="inp"
+          @mousedown.stop
+          ref="inputVal"
+          @blur="unblur"
+          v-model="value"
+          @input="handleInput"
+        />
+      </div>
+      <ul class="list" v-if="conceptList.length>0 && onshow">
+        <li
+          @mousedown.prevent
+          class="item"
+          @click="getTag(item)"
+          v-for="(item,index) in conceptList"
+          :key="index"
         >
-          <span class="tag">{{item}}</span>
-        </span>
-      </transition-group>
-      <input />
+          {{item.conceptName}}
+          <img src />
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -33,19 +53,28 @@
 import api from '@api/knowledgeTree.js';
 export default {
   name: 'searchTerm',
-  props: ['value', 'type'],
+  props: ['type'],
   data() {
     return {
-      innerText: this.value,
       conceptList: [],
       oldNum: 0,
-      newNum: 0
+      newNum: 0,
+      value: '',
+      items: [],
+      listL: [],
+      onshow: false
     };
   },
   watch: {
-    value() {
-      if (this.isChange) {
-        this.innerText = this.value;
+    items(newVal, oldVal) {
+      // TO DO
+      let arr = [];
+      newVal.forEach(item => {
+        arr.push(item.conceptId);
+      });
+      console.log(arr);
+      if (this.autoValue) {
+        this.$emit('updata:list', arr);
       }
     }
   },
@@ -54,7 +83,7 @@ export default {
       const param = {
         excludedConceptIds: [],
         libType: this.type,
-        name: event.target.innerText
+        name: this.value
       };
       api
         .searchConcept(param)
@@ -62,25 +91,47 @@ export default {
           if (res.data.code == '0') {
             const data = res.data.data;
             this.conceptList = data;
+            this.onshow = true;
           }
         })
         .catch(error => {
           console.log(error);
         });
     },
-    shuffle: function() {
+    getfouce() {
+      this.$refs.inputVal.focus();
+    },
+    getTag(item) {
+      var v = this.items.some(el => {
+        return el.conceptName == item.conceptName;
+      });
+      if (v) {
+        return;
+      }
+      this.items.push(item);
+      this.onshow = true;
+    },
+    delTag(index) {
+      this.items.splice(index, 1);
+    },
+    unblur() {
+      this.onshow = false;
+      this.value = '';
+    },
+    shuffle() {
       this.items = _.shuffle(this.items);
     },
     // 记录初始信息
-    dragstart: function(value) {
+    dragstart(value) {
       this.oldNum = value;
     },
     // 做最终操作
-    dragend: function(value) {
+    dragend(value) {
       if (this.oldNum != this.newNum) {
         let oldIndex = this.items.indexOf(this.oldNum);
         let newIndex = this.items.indexOf(this.newNum);
         let newItems = [...this.items];
+        console.log(oldIndex);
         // 删除老的节点
         newItems.splice(oldIndex, 1);
         // 在列表中目标位置增加新的节点
@@ -158,11 +209,23 @@ export default {
   overflow-y: auto;
   border-radius: 4px;
   margin-top: 6px;
-  .items{
-    border-radius:5px ;
-    padding: 3px 4px;
-    background: #48C5D7;
-    margin: 0 5px;
+
+  .select {
+    .items {
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      border-radius: 5px;
+      padding: 3px 4px;
+      background: #48c5d7;
+      margin: 0 5px;
+      display: inline-block;
+    }
+    .inp {
+      width: 80px;
+      height: 30px;
+      border: none;
+    }
   }
 }
 </style>