术语命名维护添加同义词

src/components/icss/AddMedicalName.vue

@@ -23,36 +23,12 @@
               <p v-if="id">{{data.name}}</p>
               <!-- 4-18 需求变更 -->
               <input v-else type="text" v-model="data.name" placeholder="请输入术语" maxlength="50" @blur="handleBlur(1)">
-             
-              <div  
-                v-if="searchType ==='standard'&& similarList.length > 0" 
-                class="similarBox clearfix"
-                 id="dragModalWrap"
-              > 
-                <div class="tabTitle"  id="dragModalTitle" @mousedown="dragAdd($event)" @mouseup="dragDel">
-                    相似词数据
-                </div>
-                
-                <div class="tableBox">
-                    
-                  <table class="similarTable">
-                    <tr>
-                      <td>序号</td>
-                      <td>术语</td>
-                      <td>归属</td>
-                    </tr>
-                    <tr v-for="(item,index) in similarList" :key="item.conceptId">
-                      <td>{{index+1}}</td>
-                      <td>{{item.name}}</td>
-                      <td>{{item.isConceptRemark}}</td>
-                    </tr>
-                  </table>
-                </div>
-                 <div class="closeTableBox"
-                  >
-                      <span class="closeTable"  @click="closeTable">关闭</span>
-                  </div>
-              </div>
+             <SimilarListDrag 
+                :searchType='searchType'
+                :similarList = 'similarList'
+                isShow = "true"
+             >
+             </SimilarListDrag>
             </td>
             <td>
               <input type="text" v-model="data.spell" placeholder="请输入拼音" maxlength="50"  @input="handlePinyin($event,1)">
@@ -104,35 +80,12 @@
                 <!-- 使用原生input，输入限制 -->
                 <!-- <el-input v-model="item.name" placeholder="请输入术语" maxlength="30" size="small" @input.native="handleInput(2,index)"></el-input> -->
                 <input type="text" v-model="item.name" :title="item.name" placeholder="请输入术语" maxlength="50" @blur="handleBlur(2,index,99)" />
-                <div  
-                  v-if="searchType ==='standard'&& similarList.length > 0" 
-                  class="similarBox clearfix"
-                  id="dragModalWrap"
-                > 
-                  <div class="tabTitle"  id="dragModalTitle" @mousedown="dragAdd($event)" @mouseup="dragDel">
-                      相似词数据
-                  </div>
-                 
-                  <div class="tableBox">
-                      
-                    <table class="similarTable">
-                      <tr>
-                        <td>序号</td>
-                        <td>术语</td>
-                        <td>归属</td>
-                      </tr>
-                      <tr v-for="(item,index) in similarList" :key="item.conceptId">
-                        <td>{{index+1}}</td>
-                        <td>{{item.name}}</td>
-                        <td>{{item.isConceptRemark}}</td>
-                      </tr>
-                    </table>
-                  </div>
-                   <div class="closeTableBox"
-                  >
-                      <span class="closeTable"  @click="closeTable">关闭</span>
-                  </div>
-                </div>
+                <SimilarListDrag 
+                    :searchType='searchType'
+                    :similarList = 'similarList'
+                    :isShow = "index ===searchIndex"
+                >
+                </SimilarListDrag>
               </td>
               <!-- <td v-if="!item.isEdit">
                 {{item.spell}}
@@ -203,30 +156,12 @@
               <!-- 使用原生input，输入限制 -->
               <!-- <el-input v-model="item.name" placeholder="请输入术语" maxlength="30" size="small" @input.native="handleInput(2,index)"></el-input> -->
               <input type="text" v-model="item.name" placeholder="请输入术语" maxlength="50" @blur="handleBlur(2,index)">
-              <div v-if="index ===  searchIndex && searchType ==='similar'&& similarList.length > 0" id="dragModalWrap" class="similarBox">
-                  <div class="tabTitle"  id="dragModalTitle" @mousedown="dragAdd" @mouseup="dragDel">
-                    相似词数据
-                </div>
-                
-                <div class="tableBox">
-                    
-                  <table class="similarTable">
-                    <tr>
-                      <td>序号</td>
-                      <td>术语</td>
-                      <td>归属</td>
-                    </tr>
-                    <tr v-for="(item,index) in similarList" :key="item.conceptId">
-                      <td>{{index+1}}</td>
-                      <td>{{item.name}}</td>
-                      <td>{{item.isConceptRemark}}</td>
-                    </tr>
-                  </table>
-                </div>
-                <div class="closeTableBox" >
-                      <span class="closeTable"  @click="closeTable">关闭</span>
-                  </div>
-              </div>
+              <SimilarListDrag 
+                :searchType='searchType'
+                :similarList = 'similarList'
+                :isShow = "index ===searchIndex"
+              >
+              </SimilarListDrag>
             </td>
             <td>
               <input type="text" v-model="item.spell" placeholder="请输入拼音" maxlength="50"  @input="handlePinyin($event,3,index)">
@@ -292,7 +227,8 @@
 <script type="text/javascript">
 import api from '@api/icss.js';
 import pinyin from '../../js/Convert_Pinyin.js';
- import utils from '@api/utils.js';
+import utils from '@api/utils.js';
+import SimilarListDrag from './SimilarListDrag'
   export default {
     name:'AddMedicalName',
     data(){
@@ -368,9 +304,6 @@ import pinyin from '../../js/Convert_Pinyin.js';
       },
     },
     methods:{
-      indexMethod(index) {
-        return index  +1 ;
-      },
       dragAdd(ev){
         utils.dragBox('dragModalWrap','dragModalTitle','add')
       },
@@ -552,7 +485,7 @@ import pinyin from '../../js/Convert_Pinyin.js';
               let current = this.allwords[index];
               current.spell = pinyin.getCamelChars(current.name);
               this.unfit = false;
-                      this.searchType = 'standard';
+              this.searchType = 'standard';
               this.searchIndex = index;
               this.getSimilarList(this.allwords[index].name)
             }
@@ -798,6 +731,9 @@ import pinyin from '../../js/Convert_Pinyin.js';
           this.dept = '';
         } 
       }
+    },
+    components: {
+      SimilarListDrag
     }
   }
 </script>
@@ -947,57 +883,4 @@ import pinyin from '../../js/Convert_Pinyin.js';
   /deep/ .marT{
     margin-top: 20px;
   }
-  .similarBox {
-    position: fixed;
-    background: #fff;
-    width: 400px;
-    max-height: 280px;
-    top: 350px;
-    // border: 1px solid #000;
-   
-     z-index: 10;
-     left: 660px;
-    //  top: 0;
-     box-shadow:0 0 12px #ccc;
-  }
-  .tabTitle {
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    font-size: 16px;
-    font-weight: bold;
-    cursor: move;
-  }
-  .closeTableBox{
-    position: relative;
-    height: 35px;
-  }
-  .closeTable {
-    position: absolute;
-    display: inline-block;
-    width: 40px;
-    height: 25px;
-    border-radius: 5px;
-    cursor: pointer;
-    border: 1px solid #000;
-    box-sizing: border-box;
-    right: 30px;
-    top: 5px;
-  }
-  .tableBox {
-    max-height: 200px;
-    overflow: auto;
-    padding: 0 30px;
-  }
-  .similarTable{
-    border-collapse: collapse;
-   
-    >tr{
-       border: 1px solid #000;
-      td{
-        border: 1px solid #000;
-      }
-    }
-    
-  }
 </style>

src/components/icss/SimilarListDrag.vue

@@ -0,0 +1,116 @@
+<template>
+    <div  
+    v-if="searchType ==='standard'&& similarList.length > 0&&isShow" 
+    class="similarBox clearfix"
+        id="dragModalWrap"
+    > 
+        <div class="tabTitle"  id="dragModalTitle" @mousedown="dragAdd($event)" @mouseup="dragDel">
+            相似词数据
+        </div>
+    
+        <div class="tableBox">
+            
+            <table class="similarTable">
+            <tr>
+                <td>序号</td>
+                <td>术语</td>
+                <td>归属</td>
+            </tr>
+            <tr v-for="(item,index) in similarList" :key="item.conceptId">
+                <td>{{index+1}}</td>
+                <td>{{item.name}}</td>
+                <td>{{item.isConceptRemark}}</td>
+            </tr>
+            </table>
+        </div>
+        <div class="closeTableBox"
+        >
+            <span class="closeTable"  @click="closeTable">关闭</span>
+        </div>
+    </div>
+</template>
+<script>
+import utils from '@api/utils.js';
+export default {
+    name: "SimilarListDrag",
+    props: ["searchType","similarList","isShow"],
+    data() {
+        return{
+
+        }
+    },
+    methods: {
+        dragAdd(ev){
+            utils.dragBox('dragModalWrap','dragModalTitle','add')
+        },
+        dragDel(){
+            utils.dragBox('dragModalWrap','dragModalTitle','del')
+        },
+        closeTable(){
+            this.similarList = []
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+.similarBox {
+    position: fixed;
+    background: #fff;
+    width: 400px;
+    max-height: 280px;
+    top: 350px;
+    // border: 1px solid #000;
+   
+     z-index: 10;
+     left: 660px;
+    //  top: 0;
+     box-shadow:0 0 12px #ccc;
+  }
+  .tabTitle {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: move;
+  }
+  .closeTableBox{
+    position: relative;
+    height: 35px;
+  }
+  .closeTable {
+    position: absolute;
+    display: inline-block;
+    width: 40px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 5px;
+    cursor: pointer;
+    border: 1px solid #000;
+    box-sizing: border-box;
+    right: 30px;
+    top: 5px;
+  }
+  .tableBox {
+    max-height: 200px;
+    overflow: auto;
+    padding: 0 30px;
+  }
+  .similarTable{
+          
+    width: 100%;
+    border-collapse: collapse;
+   
+    >tr{
+        height: 30px;
+    text-align: center;
+       border: 1px solid #000;
+      td{
+        border: 1px solid #000;
+        width: 135px;
+        position: relative;
+      }
+    }
+    
+  }
+</style>