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 v-for="it in searchDatas" :key="it.id" @click.stop="chooseFirst(it)" :title="(it.name+'('+it.type+')').length>10?it.name+'('+it.type+')':''">{{it.name+'('+it.type+')'}}</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 v-for="it in searchDatas" :key="it.id" @click.stop="chooseEnd(it)" :title="(it.name+'('+it.type+')').length>10?it.name+'('+it.type+')':''">{{it.name+'('+it.type+')'}}</li>
          </ul>
        </div>
        <table class="deptbox">
          <tr>
            <td>起始术语<span class="necess">*</span></td>
            <td>类型<span class="necess">*</span></td>
            <td>关系<span class="necess">*</span></td>
            <td>终点术语<span class="necess">*</span></td>
            <td>类型<span class="necess">*</span></td>
          </tr>
          <tr>
            <td>
              <span>{{data.startName}}</span>
            </td>
            <td>
              <span>{{data.startType}}</span>
            </td>
            <td>
              <el-select v-model="data.relationName" clearable placeholder="请选择" size="mini">
                <el-option
                  v-for="item in relationList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
              <!-- <span>{{data.relationName}}</span> -->
            </td>
            <td>
              <span>{{data.endName}}</span>
            </td>
            <td>
              <span>{{data.endType}}</span>
            </td>
          </tr>
        </table>
        <div class="btn">
          <el-button
            type="primary"
            :disabled = 'saveDisable'
            @click="comfirn"
          >建立术语关系</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import api from '@api/icss.js';
  export default {
    name:'AddMedicalRelation',
    data(){
      return{
        data:{
          startName:'',
          startType:'',
          // relationName:'包含于',
          relationName:'',
          endName:'',
          endType:'',
        },
        relationList:[],
        firstInput:'',
        endInput:'',
        showFlag:0,
        searchDatas:[],
        saveDisable: false  //保存按钮禁止点击
      }
    },
    created(){
      // 关系只有“属于”，前端写死 5-16
      // this.getRelationList();
      // 使用枚举7-12
      const list = JSON.parse(localStorage.getItem('knowledgeEnumsData'));
      this.relationList = list.lexiconRSTypeEnum;
    },
    methods:{
      /*getRelationList(){//获取关系下拉
        const param = {
          'code':'',
          'name':''
        }
        api.getAllRelationType(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.relationList = result.data;
          }else{
            this.$message({
              message:result.msg || "数据请求失败",
              type:'warning'
            })
          }
        })
      },*/
      comfirn(){
        // 添加页面关系已经写死“属于”
        if(!this.data.startName.trim() || !this.data.relationName.trim() || !this.data.endName.trim()){
          this.$message({
            type:'warning',
            message:'请填写相关信息'
          })
          return
        }
        this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
        api.addRelationConcept(this.data).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.$message({
              type:'success',
              message:result.msg||'添加成功'
            })
            this.$router.push({path: 'LT-YXSYKWH-YXSYGXWH'});
          }else{
            this.$message({
              type:'warning',
              message:result.msg
            })
          }
          this.saveDisable = false
        })
      },
      search(type){
        let item = type==1?this.firstInput:this.endInput;
        const params = {
          'isConcept':1,
          'name':item.trim()
        }
        if(item.trim()){
          // this.showFlag = type;
          api.searchRelationConcept(params).then((res)=>{
            const result = res.data;
            if(result.code==0){
              this.searchDatas = result.data;
              if(result.data&&result.data.length>0){
                this.showFlag = type;
              }else{
                this.showFlag = 0;
              }
            }else{
              this.$message({
                type:'warning',
                message:result.msg
              })
            }
          })
        }
      },
      chooseFirst(item){
        this.data.startName = item.name;
        this.data.startType = item.type;
        this.firstInput = "";
        this.closeSearch();
      },
      chooseEnd(item){
        this.data.endName = item.name;
        this.data.endType = item.type;
        this.endInput = "";
        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;
          cursor: pointer;
        }
        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;
  }
  .necess{
    display: inline-block;
    vertical-align: middle;
    color: red;
    margin-left: 2px;
  }
</style>