platformFront/src/components/icss/AddConceptRelation.vue

<template>
  <div class="addConceptRelationBox" @click="close">
    <crumbs
    :title="'医学术语关联维护-'+titleText"
    class="topBack"
    :param="$route.params"
    linkTo="ConceptRelation"
    ></crumbs>
    <el-form :model="form" ref="ruleForm"  class="addDepartForm">
      <p class="assayTitle">选择医学标准术语</p>
      <el-form-item  v-if="!isEdit" label="术语搜索：" prop="department">
        <input class="searchInput"  @focus="focuInput" type="text" v-model = "searchDiagVal"> 
        <span class="searchName" @click="searchDiag">搜索</span>
        <!-- <ul class="itemList conceptList" ref="conceptList"> -->
        <ul class="itemList" v-show="conceptList.length>0">
          <li 
          v-for="item in conceptList" 
          class="diagItem ellipsis"
          :title="item.conceptNameType"
          @click="selectDiag(item)"
          :key="item.conceptId">
          {{item.conceptNameType||item.conceptName}}
        </li>
      </ul>
    </el-form-item>
    <el-form-item class="isRequired" label="已选择术语：" prop="type">
      {{form.conceptNameType}}
    </el-form-item>
  </el-form>
  <div class="symptomList">
    <div class="bottomPartLeft fl">
      <p class="assayTitle">关联标准术语</p>
      <p class="symptomPoolTitle">术语搜索</p>
      <el-form>
        <el-form-item label="类型：">
          <el-select v-model="type" placeholder="请选择" size="small">
          <el-option 
            v-for="item in typeList"
            :key="item.key"
            :label="item.name"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="symptomPool">
      <el-input
        placeholder="请输入搜索内容"
        v-model="searchTagVal">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    <ul class="tagList tagPool">
      <li v-for="(item, index) in leftTagsList"
      class = "tagItem"
      :key='item.conceptId'
      :title="item.conceptNameType"
      :style="getStyle(item)?styles:null"
      @click='selectLeftTag(item, index)'
      >
      <!-- <p class="tagName ellipsis" >{{item.conceptName}} </p> -->
      <p class="ellipsis" >{{item.conceptNameType}} </p>
    </li>
  </ul>
</div>

</div>
<div class="bottomPartMid fl">
  <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
  <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
</div>
<div class="bottomPartRight fl">
  <p class="symptomPoolTitle">已选内容：</p>
  <ul class="tagList operationPool">
    <li class = "tagItem"
    v-for="(item,index) in rightTagsList" 
    :key='item.conceptId'
    :style="index === selectRightTagIndex?styles:null"
    @click='selectRightTag(index)'
    >   
    <!-- <p v-if="item.conceptName" class="tagName  ellipsis" :title="'[ '+item.conceptName+' ]'">{{item.conceptName}} </p> -->
    <p v-if="item.conceptName" class="ellipsis" :title="item.conceptNameType">{{item.conceptNameType}} </p>
  </li>
</ul>

</div>
<div class="bottomPartMid fl" >
  <p><span class="el-icon-arrow-up" @click="toUp"></span></p>
  <p><span class="el-icon-arrow-down" @click="toDown"></span></p>
</div>

</div>
<div class="btn">
  <el-button
  type="primary"
  :disabled = 'saveDisable'
  @click="submitForm('ruleForm')"
  >确 定</el-button>
</div>
</div>

</template>

<script>
import api from '@api/icss.js';
export default {
  name: 'AddConceptRelation',
  data() {
    return{
      form: {
        conceptId: '', 
        conceptName:'',
        conceptNameType:''
      },
      titleText: '添加',
      conceptList: [],
      searchDiagVal: '',
      searchTagVal: '',
      isEdit: false,
      leftTagsList:[],
      rightTagsList:[], //右侧已选的左侧不能再搜出--去重处理
      selectLeftTagsList: [],
      selectRightTagIndex: -1,
      styles:{
        background:'#eae7e7'
      },
      type:'',
      typeList:[],
      nodeList:[],
      saveDisable: false  //保存按钮禁止点击
    }
  },
        created(){
          const { isEdit, data } = this.$route.params;
          if(isEdit) {
            this.titleText = '修改';
            this.isEdit = isEdit;
            this.rightTagsList = data.nodeList;
            this.form.conceptId =data.conceptId;
            this.form.conceptName =data.conceptName;
            this.form.conceptNameType =data.conceptNameType;
          }
          let typeList = JSON.parse(localStorage.getItem("knowledgeEnumsData"));
          // this.typeList = typeList.lexiconTypeEnum;
          this.typeList = typeList.concatLexiconTypeEnum; //7-8 RGB
        },
        watch: {
          searchTagVal(newVal, preVal) {
            if(newVal.trim() != preVal.trim()){
              this.getTagList(false)
            }
          },
          type(newVal,preVal){
            if(newVal != preVal){
              this.getTagList(true)
            }
          }
        },
        methods: {
          close() {
            this.conceptList =[];
          },
          back(){
            this.$router.go(-1);
          },
          searchDiag() {
          const param = {
            "name": this.searchDiagVal,
            "relationId": 17,
            "relationPosition": 1
          }
          api.getConceptInfoAssay(param).then((res)=>{
           if(res.data.code === '0') {
             this.conceptList = res.data.data
           }
       })
        },
        selectDiag(item) {
          this.form.conceptId = item.conceptId;
          this.form.conceptName = item.conceptName;
          this.form.conceptNameType = item.conceptNameType;
          this.searchDiagVal = '';
          this.conceptList=[];
        },
        focuInput() {

        },
        getTagList(flag) {
          const notIds = this.selectedTags();
          let param;
          if(flag){
            param = {
              "name": this.searchTagVal,
              "relationId": 17,
              "relationPosition": 2,
              "typeId": this.type, //选中类型的id
              "relationConceptId":this.form.conceptId,
              "excludedConceptIds":notIds
            }
          }else{// 单独搜索时不带类型限制
            param = {
              "name": this.searchTagVal,
              "relationId": 17,
              "relationPosition": 2,
              "relationConceptId":this.form.conceptId,
              "excludedConceptIds":notIds
            }
          }
          api.getConceptInfoAssay(param).then((res)=>{
           if(res.data.code === '0') {
             this.leftTagsList = res.data.data
           }
         })
        },
        selectedTags() {//右侧选项ids
          let selectedTags = []
          for (let i =0; i < this.rightTagsList.length; i++) {
            selectedTags.push(this.rightTagsList[i].conceptId)
          }
          return selectedTags
        },
        selectLeftTag(tag, index, e) {
          const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
          if (hasTag) {
            this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.conceptId !== tag.conceptId)
          } else {
            this.selectLeftTagsList.push(tag);
          }
        },
        selectRightTag(index) {
          this.selectRightTagIndex = this.selectRightTagIndex === index ? -1 : index
        },
        toRightList(){
          if(this.selectLeftTagsList.length==0){
            return
          }
          this.rightTagsList.push(...this.selectLeftTagsList);
          this.selectLeftTagsList = [];
          this.selectRightTagIndex = -1;
          if(this.searchTagVal.trim()){
            this.getTagList(false);
          }else{
            this.getTagList(true)
          }
        },
        toLeftList(){
          if(this.selectRightTagIndex == -1) {
            return
          }
          this.rightTagsList.splice(this.selectRightTagIndex, 1)
          this.selectLeftTagsList = [];
          this.selectRightTagIndex -= 1;
          if(this.searchTagVal.trim()){
            this.getTagList(false);
          }else{
            this.getTagList(true)
          }
        },
        toUp(){
          if(this.selectRightTagIndex === 0 || this.selectRightTagIndex === -1) {
            return
          }
          const tempItem = this.rightTagsList[this.selectRightTagIndex]
          this.rightTagsList.splice(this.selectRightTagIndex, 1)
          this.rightTagsList.splice(this.selectRightTagIndex-1, 0,tempItem)
          this.selectRightTagIndex -= 1
        },
        toDown(){
         if(this.selectRightTagIndex === this.rightTagsList.length-1 || this.selectRightTagIndex === -1) {
          return
        }
        const tempItem = this.rightTagsList[this.selectRightTagIndex]
        this.rightTagsList.splice(this.selectRightTagIndex, 1)
        this.rightTagsList.splice(this.selectRightTagIndex+1, 0,tempItem)
        this.selectRightTagIndex += 1

      },

      isHasTag(item, arr) {
        for ( let i = 0; i <arr.length; i++) {
          if(arr[i].conceptId === item.conceptId) {
            return true;
          }
        }
        return false;
      },
      getStyle(item){       //左侧选中状态
        return this.isHasTag(item, this.selectLeftTagsList)
      },
      getStyle2(item) {
        return this.isHasTag(item, this.selectRightTagsList)
      },
      submitForm(formName) {
        if(!this.form.conceptId) {
          this.warning('请选择术语')
          return
        }
        if(this.rightTagsList.length === 0) {
          this.warning('请添加关联术语')
          return
        }
        this.showDelDialog()
      },
      showDelDialog() {
        const rightTagsList = this.rightTagsList;
        for (let i = 0; i < rightTagsList.length; i++) {
          let item = {};
          item.conceptId = rightTagsList[i].conceptId;
          item.relationId = 17;
          this.nodeList.push(item);
        }
        const param ={
          "conceptId": this.form.conceptId,
          "nodeList": this.nodeList,
          "sonRelationId": 17
        }
        this.showConfirmDialog('是否建立该关联？', () => {
          this.saveDisable = true;  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
          api.addConceptRelation(param).then((res) => {
            if (res.data.code  === '0') {
              this.warning(res.data.msg || '关联成功', 'success','1000')
              setTimeout(() => {
                //返回带搜索条件的首页
                this.$router.push({
                  name:'ConceptRelation',
                  params: Object.assign({}, this.$route.params, {currentPage: 1})
                })
              }, 1000);
            } else {
              this.warning(res.data.msg)
            }
            this.saveDisable = false
          }).catch((err) => {
            this.warning(err);
          })
        });
      },
      showConfirmDialog(msg, resolve) {
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          resolve();
        }).catch(() => {});
      },
      warning(msg, type,time) {
        this.$message({
          showClose: true,
          message: msg,
          type: type || 'warning',
          duration:time || '3000'
        })
      },
    }
  }
    </script>

    <style lang="less">
    @import '../../less/common.less';
    .addConceptRelationBox {
      color: #606266;
      font-size: 14px;
      .topBack {
        top: 0;
      }
      .groupTitle {
        background-color: #fff;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
      }
      .searchInput, .searchName {
        display: inline-block;
        height: 32px;
        line-height: 32px;
        border: 1px solid #a9a9a9;
        margin: 0px 0 0 0;
        padding: 0 5px;
        float: left;
      }
      .isRequired .el-form-item__label::before {
        content: '*';
        color: red;
      }
      .searchName {
        border-left: none;
        cursor: pointer;
        padding: 0 12px;
        font-size: 16px;
      }
      .itemList {
        position: absolute;
        background: #fff;
        width: 162px;
        max-height: 150px;
        border: 1px solid #a9a9a9;
        left: 82px;
        top: 33px;
        z-index: 2;
        overflow-y: auto;
      }
      .diagItem {
        padding: 0 5px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
      }
      .diagItem:hover {
        background: #f5f7fa;
      }
      .addDepartForm {
        background-color: #fff;
        // padding: 20px;
        padding: 20px 20px 0 20px;
        margin: 70px 20px 0px 20px;
        border-bottom: 1px solid #a9a9a9;
      }
      .symptomList {
        background-color: #fff;
        padding: 20px;
        margin: 0px 20px 0px 20px;
        height: 500px;
      }
      .bottomPartLeft {
        width: 32%;
      }
      .symptomPoolTitle {
        height: 40px;
        line-height: 40px;
      }
      .symptomPool {
        width: 100%;
        .el-input__inner {
          border-radius: 0;
        }
      }
      .tagList {
        width: 100%;
        height: 300px;
        border: 1px solid @icssBorder;
        box-sizing: border-box;
        // border-top: none;
      }
      /* .tagList {
        border: 1px solid @icssBorder;
      } */
      .tagPool {
        height: 300px;
        overflow-y: auto;
        border-top: none;
      }
      .tagItem {
        position: relative;
        line-height: 30px;
        cursor: pointer;
        padding: 0 10px;
      }
      .tagName:before {
        content: '['
      }
      .tagName::after {
        content: ']'
      }
      .bottomPartMid {
        width: 8%;
        margin-top: 220px;
        p {
          width: 100%;
          text-align: center;
          span {
            cursor: pointer;
            display: inline-block;
            width: 30px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            border: 1px solid @icssBorder;
            margin-bottom: 15px;
            font-size: 18px;
          }
        }
      }
      .bottomPartRight {
        width: 32%;
        margin-top: 101px;
      }
      .operationPool {
        position: relative;
        width: 100%;
        height: 340px;
        padding: 10px 0;
        overflow-y: auto;
      }
      .btn {
        position: relative;
        background-color: #fff;
        margin: 0px 20px;
        padding: 20px;
        .el-button {
          position: absolute;
          right: 20px;
          top: -20px;
        }
      }
      .assayTitle{
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
    
    </style>