医学术语命名维护添加同义词可拖拽

package.json

@@ -26,6 +26,7 @@
     "@vue/eslint-config-standard": "^3.0.4",
     "axios": "^0.18.0",
     "element-ui": "^2.4.7",
+    "jquery": "^3.4.1",
     "js-md5": "^0.7.3",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",

src/api/utils.js

@@ -1,3 +1,102 @@
+import $ from 'jquery';
+
+function getWindowInnerHeight(){
+  if(window.innerHeight!=undefined){
+    return window.innerHeight;
+  }else{
+    let by = document.body, ele = document.documentElement;
+    return Math.min(by.clientHeight,ele.clientHeight);
+  }
+};
+function getWindowInnerWidth(){
+  let width = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth
+  return width
+};
+function getPageCoordinate(event,stic){//获取鼠标点击的位置
+  let e = event || window.event;
+  var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+  var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+  var x = e.pageX || (e.clientX + scrollX);
+  var y = (e.pageY+(stic?25:0)) || (e.clientY + scrollY + (stic?25:0));//弹窗位置偏下25
+  let obj = {
+    boxLeft : x ,
+    boxTop : y+18
+  }
+  return obj;
+}
+
+ /**
+ * @param {拖动元素/清除拖动事件监听} type add:添加事件监听  del:移除事件监听
+ * @param {展开元素id} addDom 
+ */
+let width = '',//屏幕宽度
+  height = '', //屏幕高度
+  dragWrapper = '',//拖拽元素
+  mouseX = 0,//鼠标距离页面左侧
+  mouseY = 0,//鼠标距离页面上部
+  dragX = 0,//鼠标可拖拽到左边的最大距离（元素定位左侧距离）
+  dragY = 0,//鼠标可拖拽到上边的最大距离（元素定位上边距离）
+  isDrag = false,//元素是否处于拖拽中
+  addPart = null;//展开区域,这个展开的宽度应当是固定宽度了
+/**
+ * 
+ * @param {事件对象} event 
+ * @param {被拖动的元素} dragModalWrap
+ * @param {可拖动的区域} dragModalTitle 
+ */
+function handleMove(event) {
+  let wrap = $("#"+dragWrapper); //被拖拽的元素
+  let dragDes = $("#"+addPart); //展開区域
+  let page = getPageCoordinate(event, '0');//获取鼠标位置
+  let maxDragX = 0,dragDesWidth = 0;
+  let wrapHeight = wrap[0].offsetHeight;//直接用.height()获取的高度不准确
+  let wrapWidth = wrap[0].offsetWidth;
+  let maxDragY = height - wrapHeight; //最大可拖拽y方向距离
+  if (dragDes[0]) { //存在就有类似治疗方案的弹窗，最大可推拽x方向距离
+    dragDesWidth = dragDes[0].offsetWidth//展开元素的宽度
+    maxDragX = width - wrapWidth - dragDesWidth
+  } else {
+    maxDragX = width - wrapWidth
+  }
+  if (isDrag) {
+    dragX = page.boxLeft - mouseX //鼠标可拖拽到左边的最大距离
+    dragY = page.boxTop - mouseY //鼠标可拖拽到上边的最大距离
+    if (dragX < 300) { //不能超出左边界
+      dragX = 300
+    }
+    if (dragY < 100) { //不能超出上边界
+      dragY = 100
+    }
+    if (dragDes[0]) {
+      if (width - dragX - dragDesWidth < wrapWidth) { //不能超出右边界
+        dragX = maxDragX
+      }
+    } else {
+      if (width - dragX < wrapWidth) { //不能超出右边界
+        dragX = maxDragX
+      }
+    }
+    if (height - dragY < wrapHeight) { //不能超出下边界
+      dragY = maxDragY
+    }
+    // isMove = true
+    wrap.css({
+      left: dragX + 'px',
+      marginLeft: 0 + 'px',
+      marginTop: 0 + 'px',
+      top: dragY + 'px',
+      bottom:'auto',
+      right:'inherit',
+    })
+  }
+}
+/**
+ * 鼠标弹起弹窗不在跟随鼠标移动
+ */
+function handleUp(){
+  isDrag = false;
+  return
+}
 export default {
   //判断字符串是否能转成json
   isJsonStr(str) {
@@ -292,5 +391,32 @@ export default {
   getImgName(url){
     const arr = url.split("/");
     return arr[arr.length-1];
+  },
+ 
+  dragBox(dragWrap,dragTop,type,addDom,img) {
+    let drag = $("#"+dragTop); //拖拽区域
+    let wrap = $("#"+dragWrap); //被拖拽的元素
+    width = getWindowInnerWidth(); 
+    height = getWindowInnerHeight();
+    addPart = addDom||null;
+    dragWrapper = dragWrap;
+    if (type === 'del') {
+      $(document).off('mousemove', handleMove)
+      $(document).off('mouseup', handleUp)
+    } else {
+      drag.on('mousedown', function (event) {
+        let lenHeight = wrap.height()
+        if(img){
+          $("#preImg").css("height",(lenHeight)+'px')
+          $("#dragModalWrap").css("height",(lenHeight)+'px')
+        }
+        let page = getPageCoordinate(event, '0');
+        mouseX = page.boxLeft - wrap.offset().left; //鼠标到拖拽元素的左边界的距离
+        mouseY = page.boxTop - wrap.offset().top; //鼠标到拖拽元素的上边界的距离
+        isDrag = true
+      })
+      $(document).on('mousemove', handleMove)
+      $(document).on('mouseup', handleUp)
+    }
   }
 }

src/components/icss/AddMedicalName.vue

@@ -5,6 +5,7 @@
             linkTo="MedicalName"></crumbs>
     <div class="contents">
       <div class="content">
+        
         <h3>添加术语：</h3>
         <p class="titl">医学标准术语：</p>
         <table class="deptbox" v-if="id == ''">
@@ -22,8 +23,35 @@
               <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'" class="similarBox">
-
+             
+              <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>
             </td>
             <td>
@@ -76,6 +104,35 @@
                 <!-- 使用原生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>
               </td>
               <!-- <td v-if="!item.isEdit">
                 {{item.spell}}
@@ -146,8 +203,29 @@
               <!-- 使用原生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'" class="similarBox">
-
+              <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>
             </td>
             <td>
@@ -214,6 +292,7 @@
 <script type="text/javascript">
 import api from '@api/icss.js';
 import pinyin from '../../js/Convert_Pinyin.js';
+ import utils from '@api/utils.js';
   export default {
     name:'AddMedicalName',
     data(){
@@ -264,7 +343,7 @@ import pinyin from '../../js/Convert_Pinyin.js';
         dioType:'', //默认展示一类
         deptList:[], //更多信息-科室
         dept:'',  //默认展示全科
-        SimilarList: [], //相似词列表
+        similarList: [], //相似词列表
         searchIndex: -1, //展示哪个的同义词
         searchType: ''
       }
@@ -289,6 +368,19 @@ import pinyin from '../../js/Convert_Pinyin.js';
       },
     },
     methods:{
+      indexMethod(index) {
+        return index  +1 ;
+      },
+      dragAdd(ev){
+        utils.dragBox('dragModalWrap','dragModalTitle','add')
+      },
+      dragDel(){
+          utils.dragBox('dragModalWrap','dragModalTitle','del')
+      },
+      closeTable(){
+        this.similarList = []
+      
+      },
       // 诊断类型下--更多信息-类型
       getDioType(flag){
         api.getknowledgeList().then((res)=>{
@@ -439,7 +531,7 @@ import pinyin from '../../js/Convert_Pinyin.js';
             data.spell = pinyin.getCamelChars(data.name);
             this.unfit = false;
             this.searchType = 'standard'
-            this.getSimilarList()
+            this.getSimilarList(this.data.name)
 
           }
 
@@ -454,13 +546,15 @@ import pinyin from '../../js/Convert_Pinyin.js';
               });
               // this.synonymous[index-1].name = '';
               this.unfit = true;
+      
             }else{
               // let current = this.synonymous[index-1];
               let current = this.allwords[index];
               current.spell = pinyin.getCamelChars(current.name);
               this.unfit = false;
-              this.searchType = 'similar';
+                      this.searchType = 'standard';
               this.searchIndex = index;
+              this.getSimilarList(this.allwords[index].name)
             }
           }else{
             if(this.synonymous[index].name && !pattern.test(this.synonymous[index].name)){
@@ -476,6 +570,7 @@ import pinyin from '../../js/Convert_Pinyin.js';
               this.unfit = false;
               this.searchType = 'similar';
               this.searchIndex = index;
+              this.getSimilarList(this.synonymous[index].name)
             }
           }
         }
@@ -492,12 +587,15 @@ import pinyin from '../../js/Convert_Pinyin.js';
         }
         // e.target.value = e.target.value.replace(/[^a-zA-Z]/g,'');
       },
-      getSimilarList(){
+      getSimilarList(name){
+        if(!name){
+          return
+        }
         const param = {
-          inputStr: this.data.name
+          inputStr: name
         }
         api.getSimilarList(param).then((res) =>{
-          console.log('res',res)
+          this.similarList = res.data.data
         })
       },
       addSpan(type){
@@ -705,6 +803,9 @@ import pinyin from '../../js/Convert_Pinyin.js';
 </script>
 <style lang="less" scoped>
    @import "../../less/admin.less";
+   table,tr,td {
+     list-style: none;
+   }
    /deep/ .radioWrap .el-radio {
      display: block;
      height: 41px;
@@ -758,6 +859,7 @@ import pinyin from '../../js/Convert_Pinyin.js';
         width: 135px;
         border: 1px solid #666;
         padding:5px;
+        position: relative;
       }
       input{
         border:none;
@@ -846,10 +948,56 @@ import pinyin from '../../js/Convert_Pinyin.js';
     margin-top: 20px;
   }
   .similarBox {
-    position: absolute;
+    position: fixed;
     background: #fff;
-    width: 200px;
-    height: 200px;
+    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>

vue.config.js

@@ -28,5 +28,5 @@ module.exports = {
                 '@api': path.resolve(__dirname,'./src/api/')
             }
         }
-    }
+    },
 };