platformFront/src/components/icss/AddSimilarName.vue

<template>
  <div>
    <crumbs :title="minTitle" linkTo="/admin/LT-YXSJWH-BMWH"></crumbs>
    <div class="contents">
      <div class="content" @click="close">
        <h3>选择标签</h3>
        <p :class="['ename',{'name':flag}]">{{name}}</p>
        <div v-if="!flag" class="searchBox">
          <input type="text" name="" v-model="searchStr" class="name">
          <span class="search" @click.stop="search">搜索</span>
          <ul v-if="showFlag">
            <!-- <li v-for="it in searchDatas" :key="it.id" @click="choose(it)" :title="it.tagName.length>10?it.tagName+'（'+it.typeName+'）':''">{{it.tagName+'（'+it.typeName+'）'}}</li> -->
            <li v-for="it in searchDatas" :key="it.id" @click="choose(it)" :title="(it.tagName+'（'+typeList[it.type]+'）').length>10?it.tagName+'（'+typeList[it.type]+'）':''">{{it.tagName+'（'+typeList[it.type]+'）'}}</li>
          </ul>
        </div>   
        <span></span>
        <h3>添加别名</h3>
        <p class="subtitle">本体添加：</p>
        <table class="deptbox">
          <tr>
            <td>本体</td>
            <td>拼音</td>
          </tr>
          <tr v-if="flag" v-for="item in selfName">
           <!-- 本体名字不能修改 3-15  与标签名联动可修改 3-28-->
            <td>
              <input type="text" name="" v-model="item.retrievalName" maxlength="30" @input="handleInput">
              <!-- <p>{{item.retrievalName}}</p> -->
            </td>
            <td>
              <input type="text" name="" v-model="item.retrievalSpell" maxlength="30" @input="handlePinyin">
            </td>
          </tr>
          <tr v-if="!flag" v-for="(i,index) in selfEmpty">
            <td>
              <!-- <input type="text" name="" v-model="selfEmpty[index].retrievalName" maxlength="30" @input="handleInput"> -->
              <p>{{i.retrievalName}}</p>
            </td>
            <td><input type="text" name="" v-model="i.retrievalSpell" maxlength="30" @input="handlePinyin"></td>
          </tr>
        </table>
        <p class="subtitle">别名添加：</p>
        <table class="deptbox">
          <tr>
            <td>别名</td>
            <td>拼音</td>
          </tr>
          <tr v-if="retrievalNames.length>0" v-for="it in retrievalNames">
            <td><input type="text" name="" v-model="it.retrievalName" maxlength="30" @input="handleInput"></td>
            <td><input type="text" name="" v-model="it.retrievalSpell" maxlength="30" @input="handlePinyin"></td>
          </tr>
          <tr v-for="(i,index) in retrievalEmpty">
            <td><input type="text" name="" v-model="retrievalEmpty[index].retrievalName" maxlength="30" @input="handleInput" @blur="handleBlur(index,2)"></td>
            <td><input type="text" name="" v-model="retrievalEmpty[index].retrievalSpell" maxlength="30" @input="handlePinyin"></td>
          </tr>
          <tr @click="addSpan(2)">
            <td colspan="2" class="addSpan">+</td>
          </tr>
        </table>
        <p class="subtitle">子项添加：</p>
        <table class="deptbox">
          <tr>
            <td>子项</td>
            <td>拼音</td>
          </tr>
          <tr v-if="retrievalSonNames.length>0" v-for="v in retrievalSonNames">
            <td><input type="text" name="" v-model="v.retrievalName" maxlength="30" @input="handleInput"></td>
            <td><input type="text" name="" v-model="v.retrievalSpell" maxlength="30" @input="handlePinyin"></td>
          </tr>
          <tr v-for="(k,index) in sonEmpty">
            <td><input type="text" name="" v-model="sonEmpty[index].retrievalName" maxlength="30" @input="handleInput" @blur="handleBlur(index,3)"></td>
            <td><input type="text" name="" v-model="sonEmpty[index].retrievalSpell" maxlength="30" @input="handlePinyin"></td>
          </tr>
          <tr @click="addSpan(3)">
            <td colspan="2" class="addSpan">+</td>
          </tr>
        </table>
        <div class="btn">
          <el-button
            type="primary"
            @click="comfirn"
          >确 定</el-button>
        </div>
      </div>
    </div>   
  </div>
</template>
<script type="text/javascript">
  import api from '@api/icss.js';
  import pinyin from '../../js/Convert_Pinyin.js'
  export default{
    name:'AddSimilarName',
    data(){
      return{
        selfName:[], //本体
        retrievalNames:[],  //别名 
        retrievalSonNames:[],  //子项
        id:null,
        name:"",
        minTitle:"别名维护-添加别名",
        toast:'',
        flag:false, //添加修改的标识,true-修改
        selfEmpty:[ //本体 新增
          {
            questionName: '',
            questionId:'',
            retrievalName:'',
            retrievalSpell:'',
            retrievalType:1
          }
        ],
        retrievalEmpty:[ //别名新增
          {
            questionName:'',
            questionId:'',
            retrievalName:'',
            retrievalSpell:'',
            retrievalType:2
          }
        ],
        sonEmpty:[ //子项新增
          {
            questionName:'',
            questionId:'',
            retrievalName:'',
            retrievalSpell:'',
            retrievalType:3
          }
        ],
        searchDatas:[],
        searchStr:'',
        showFlag:false,
        typeList:[]
      }
    },
    created(){
      const id = this.$route.params.id;
      const optionList = this.$route.params.optionList;//归属类型
      if(id){
        this.id = id;
        this.name = this.$route.params.name;
        this.selfEmpty[0].questionId = this.retrievalEmpty[0].questionId = this.sonEmpty[0].questionId = this.$route.params.id;
        this.selfEmpty[0].questionName = this.retrievalEmpty[0].questionName = this.sonEmpty[0].questionName = this.$route.params.name;
        this.flag = true;
        this.minTitle = "别名维护-修改别名";
        this.getDetail();
      }
      if(optionList.length>0){
        for(let i=0; i<optionList.length; i++){
          this.typeList[+optionList[i].val] = optionList[i].name;
        }
      }
    },
    methods:{
      getDetail(){
        const param = {'questionId':this.id,'questionName':this.name}
        api.similarNameDetl(param).then((res)=>{
          let result = res.data;
          if(result.code==0){
            const data = result.data;
            for(let i in data){
              if(i==1){
                this.selfName = data[i];
              }else if(i==2){
                this.retrievalNames = data[i];
              }else if(i==3){
                this.retrievalSonNames = data[i];
              }
            }
          }else{
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },
      addSpan(type){
        let emptySpan = {
          questionName:this.name,
          questionId:this.id,
          retrievalName:'',
          retrievalSpell:'',
          retrievalType:type
        }
        if(type == 2){
          this.retrievalEmpty.push(emptySpan);
        }else if(type == 3){
          this.sonEmpty.push(emptySpan);
        }
      },
      comfirn(){
        const {selfName,selfEmpty,retrievalNames,retrievalEmpty,retrievalSonNames,sonEmpty} = this;
        let dataList = [];
        if(this.flag){ //修改
          if(!selfName[0].retrievalSpell){
            this.$message({
              message:"本体拼音不能为空",
              type:'warning'
            });
            return
          }
          dataList = selfName.concat(retrievalNames,retrievalEmpty,retrievalSonNames,sonEmpty);
          this.toast = "修改成功";
        }else{
          if(!selfEmpty[0].retrievalSpell){
            this.$message({
              message:"本体拼音不能为空",
              type:'warning'
            });
            return
          }
          dataList = selfEmpty.concat(retrievalNames,retrievalEmpty,retrievalSonNames,sonEmpty);
          this.toast = "添加成功";
        }
        // 过滤掉空数据
        let filterData = dataList.filter((item)=>{
          return item.retrievalName||item.retrievalSpell;
        })
        
        let emptyData = filterData.filter((item)=>{
          return !item.retrievalName|| !item.retrievalSpell;
        })
        if(emptyData&&emptyData.length>0){//判断是否有未填项
          this.$message({
            message:'标签名和拼音不能为空',
            type:'warning'
          });
          return
        }
        const params = {
          'itemList':filterData,
          'questionId':this.id,
          'questionName':this.name
        }
        api.addSimilarName(params).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.$message({
              message: this.toast,
              type: 'success',
            });
            this.$router.push({path:'LT-YXSJWH-BMWH'});
          }else{
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },
      search(){
        const param = {
          'tagName':this.searchStr,
          'notTagType':[8,10,11],
          'notControlType':[99]
        }
        api.searchLable(param).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.searchDatas = result.data;
            if(result.data&&result.data.length>0){
              this.showFlag = true;
            }
          }else{
            // console.log(result.msg);
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },
      choose(item){
        console.log(item);
        this.name = item.tagName;
        this.id = item.id;
        this.showFlag = false;
        this.searchStr = "";
        this.selfEmpty[0].retrievalName = this.name;
        this.selfEmpty[0].retrievalSpell = pinyin.getCamelChars(this.name);
        // console.log("标签拼音:",pinyin.getCamelChars(this.name));
      },
      close(){
        this.showFlag = false;
        // this.searchStr = "";
      },
      handleInput(e){//名字只能输入中文、英文和数字
        e.target.value = e.target.value.replace(/[^0-9a-zA-Z\u4e00-\u9fa5]/g,'');
      },
      handlePinyin(e){//只能输入英文
        e.target.value = e.target.value.replace(/[^a-zA-Z]/g,'');
      },
      handleBlur(index,flag){
        if(flag==2){//别名
          let current = this.retrievalEmpty[index];
          current.retrievalSpell = pinyin.getCamelChars(current.retrievalName);
        }else if(flag==3){//子项
          let sonCurrent = this.sonEmpty[index];
          sonCurrent.retrievalSpell = pinyin.getCamelChars(sonCurrent.retrievalName);
        }  
      }
    },
    watch:{
      name:function(newVal,oldVal){
        this.selfEmpty[0].questionName = this.retrievalEmpty[0].questionName = this.sonEmpty[0].questionName = newVal;
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../../less/admin.less";
  .content{
    background: #fff;
    padding: 20px 20px 30px;
    color: #545455;
  }
  .name{
    width: 221px;
    height: 30px;
    margin:20px 0 30px 0;
    padding-left: 7px;
  }
  .search{
    display: inline-block;
    width: 55px;
    height: 32px;
    border-left: 1px solid #ccc;
    position: relative;
    left: -57px;
    vertical-align: middle;
    line-height: 32px;
    bottom: 1px;
    text-align: center;
    cursor: default;
    background: #fff;
  }
  h3{
    font-size: 16px;
  }
  .subtitle{
    // font-size: 12px;
    margin: 21px 0 10px 0;
  }
  .deptbox{
    // width: 100%;
    background: #fff;
    padding: 20px 10px 30px;
    font-size: 14px;
    text-align: left;
    border-collapse: collapse;
    >tr{
      height: 30px;
      td{
        width: 111px;
        border: 1px solid #666;
        padding-left: 7px;
      }
      input{
        border:none;
        width: 100%;
      }
    }
    .addSpan{
      text-align: center;
      cursor: pointer;
    } 
  }
  .btn {
    text-align: right;
  }
  .ename{
    height: 20px;
    margin-top: 10px;
  }
  .searchBox{
    position: relative;
    ul{
      width: 175px;
      position: absolute;
      top: 55px;
      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{
        background: #f5f7fa;
      }
    }
  }
</style>