platformFront/src/components/icss/AddMedicalRelation.vue

<template>
  <div>
    <crumbs title="医学术语关系-添加" linkTo="/admin/LT-YXSYKWH-YXSYGXWH"></crumbs>
    <div class="contents">
      <div class="content" @click="closeSearch">
        <p>明细</p>
        <div class="search">
          <span>起始术语搜索：</span>
          <el-input size="small" v-model="firstInput" placeholder="输入术语" @input="search(1)"></el-input>
          <ul v-if="showFlag==1">
            <li>测试</li>
            <li v-for="it in searchDatas" :key="it.id" @click.stop="chooseFirst(it)" :title="it.name.length>10?it.name:''">{{it.name}}</li>
          </ul>
        </div>
        <div class="search">
          <span>终点术语搜索：</span>
          <el-input size="small" v-model="endInput" placeholder="输入术语" @input="search(2)"></el-input>
          <ul v-if="showFlag==2">
            <li>测试2</li>
            <li v-for="it in searchDatas" :key="it.id" @click.stop="chooseEnd(it)" :title="it.name.length>10?it.name:''">{{it.name}}</li>
          </ul>
        </div>
        <table class="deptbox">
          <tr>
            <td>起始术语</td>
            <td>类型</td>
            <td>关系</td>
            <td>终点术语</td>
            <td>类型</td>
          </tr>
          <tr>
            <td>
              <span>{{data.start_name}}</span>
            </td>
            <td>
              <span>{{data.start_type}}</span>
            </td>
            <td>
              <el-select v-model="data.relation" clearable placeholder="请选择" size="mini">
                <el-option
                  v-for="item in relationList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key">
                </el-option>
              </el-select>
            </td>
            <td>
              <span>{{data.end_name}}</span>
            </td>
            <td>
              <span>{{data.end_type}}</span>
            </td>
          </tr>
        </table>
        <div class="btn">
          <el-button
            type="primary"
            @click="comfirn"
          >确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    name:'AddMedicalRelation',
    data(){
      return{
        data:{
          start_name:'',
          start_type:'',
          relation:'',
          end_name:'',
          end_type:''
        },
        relationList:[
          {
            name:"测试1",
            key:1
          },{
            name:"测试2",
            key:2
          },{
            name:"测试3",
            key:3
          }
        ],
        firstInput:'',
        endInput:'',
        showFlag:0,
        searchDatas:[
          {
            name:"测试1",
            id:1,
            type:'药品'
          },{
            name:"测试2",
            id:2,
            type:'药品'
          },{
            name:"测试3",
            id:3,
            type:'药品小类'
          }
        ],
      }
    },
    methods:{
      comfirn(){
        console.log(444,this.data);
      },
      search(type){
        let item = type==1?this.firstInput:this.endInput;
        if(item){
          this.showFlag = type;
          /*api.getAllConcept(item).then((res)=>{
            const result = res.data;
            if(result.code==0){
              this.searchDatas = result.data;
              this.showFlag = type;
            }else{
              this.$message({
                type:'warning',
                message:result.msg
              })
            }
          })*/
        }
      },
      chooseFirst(item){
        this.data.start_name = item.name;
        this.data.start_type = item.type;
        this.closeSearch();
      },
      chooseEnd(item){
        this.data.end_name = item.name;
        this.data.end_type = item.type;
        this.closeSearch();
      },
      closeSearch(){
        this.showFlag = 0;
        // this.searchDatas = [];
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../../less/admin.less";
  .content{
    background: #fff;
    padding: 20px 20px 30px;
    color: #545455;
    .search{
      width: 185px;
      display: inline-block;
      margin: 20px 255px 25px 0;
      .el-input--small{
        margin-top: 8px;
      }
      position: relative;
      ul{
        width: 183px;
        position: absolute;
        top: 63px;
        border:1px solid #ccc;
        background: #fff;
        max-height: 291px;
        overflow-y: auto;
        li{
          border:1px solid #fff;
          padding-left: 7px;
          height: 27px;
          line-height: 27px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        li:hover{
          border-color:#22ccc8;
        }
      }
    }
  }
  .deptbox{
    // width: 100%;
    background: #fff;
    padding: 20px 10px 30px;
    font-size: 14px;
    text-align: left;
    border-collapse: collapse;
    >tr{
      height: 30px;
      text-align: center;
      td{
        width: 135px;
        border: 1px solid #666;
        padding:5px;
      }
      input{
        border:none;
        width: 100%;
      }
    } 
  }
  .btn {
    text-align: right;
    margin-top: 20px;
  }
</style>