platformFront/src/components/icss/SimilarListDrag.vue

<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>