platformFront/src/components/icss/AddMedicalName.vue

<template>
  <div>
    <crumbs :title="minTitle"
            :param="$route.params"
            linkTo="MedicalName"></crumbs>
    <div class="contents">
      <div class="content">
        <h3>添加术语：</h3>
        <p class="titl">医学标准术语：</p>
        <table class="deptbox" v-if="id == ''">
          <tr>
            <td class="ind">序号</td>
            <td>标准词<span class="necess">*</span></td>
            <td>拼音</td>
            <td>类型<span class="necess">*</span></td>
            <td class="desc">说明</td>
          </tr>
          <tr>
            <td class="ind">1</td>
            <td :title="data.name&&data.name.length>9?data.name:''">
              <!-- 修改时标准词不能修改，修改了会当做新增处理 4-17 -->
              <p v-if="id">{{data.name}}</p>
              <!-- 4-18 需求变更 -->
              <input v-else type="text" v-model="data.name" placeholder="请输入术语" maxlength="50" @blur="handleBlur(1)">
            </td>
            <td>
              <input type="text" v-model="data.spell" placeholder="请输入拼音" maxlength="50"  @input="handlePinyin">
            </td>
            <td>
              <!-- <el-select v-if="!id" v-model="data.type" filterable placeholder="请选择" size="small" @change="selectType">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select> -->
              <template v-if="!id">
                <el-select v-model="data.type" filterable clearable placeholder="请选择" size="small" @change="selectType">
                  <el-option-group
                    v-for="group in options"
                    :key="group.label">
                    <el-option
                      v-for="item in group.options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-option-group>
                </el-select>
              </template>
              <span v-else>{{data.type}}</span>
            </td>
            <td class="desc">
              <input v-model="data.remark" placeholder="请输入术语说明" maxlength="120"></input>
            </td>
          </tr>
        </table>
        <div class="deptboxChange" v-else>
          <table class="deptbox deptboxTable">
            <tr>
              <td class="ind">序号</td>
              <td>术语</td>
              <td>拼音</td>
              <td>类型</td>
              <td class="desc">说明</td>
              <td class="descs">术语性质</td>
              <td v-if="id">操作</td>
            </tr>
            <tr v-for="(item,index) in allwords">
              <td class="ind">{{index+1}}</td>
              <td :title="item.name&&item.name.length>9?item.name:''">
                <!-- 使用原生input，输入限制 -->
                <!-- <el-input v-model="item.name" placeholder="请输入术语" maxlength="30" size="small" @input.native="handleInput(2,index)"></el-input> -->
                <input type="text" v-model="item.name" :title="item.name" placeholder="请输入术语" maxlength="50" @blur="handleBlur(2,index,99)" >
              </td>
              <!-- <td v-if="!item.isEdit">
                {{item.spell}}
              </td>
              <td v-else> -->
              <td>
                <input type="text" v-model="item.spell" placeholder="请输入拼音" maxlength="50"  @input="handlePinyin" class="spell">
              </td>
              <td>
                <!-- {{data.type}} -->
                <template v-if="index==0&&copy">
                  <el-select v-model="data.type" filterable placeholder="请选择" size="small" @change="selectType">
                    <el-option-group
                      v-for="group in options"
                      :key="group.label">
                      <el-option
                        v-for="item in group.options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </template>
                <span v-else>{{data.type}}</span>
              </td>
              <td class="desc">
                <input v-model="item.remark" placeholder="请输入术语说明" maxlength="120"></input>
              </td>
              <td class="desc">
                {{item.isConcept == 1?"标准词":"同义词"}}
              </td>
              <td v-if="id">
                <span class="displayColor" v-if="item.isConcept == 1">删除</span>
                <span @click="deleLine(index,55)" class="delete" v-else>删除</span>
              </td>
            </tr>
            <tr @click="addSpan(55)">
              <td colspan="7" class="addSpan">+</td>
            </tr>
          </table>
          <div class="actionDo">
            <!-- <div class="btnWrap"> -->
              <!-- <el-button type="primary" size="mini" v-if="show" @click="comfirn(14)">确认修改</el-button> -->
              <!-- <el-button plain size="mini" v-if="show" @click="toggleShow(1)">放弃修改</el-button>
              <el-button plain size="mini" @click="toggleShow(2)" v-if="!show">修改标准词</el-button> -->
            <!-- </div> -->
            <div class="radioWrap" v-if="show">
              <el-radio-group v-model="radioVal" size="mini">
                <el-radio v-for="(item,index) in allwords" :label="index" :disabled="index == 0">选为标准词</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <p class="titl" v-if="id == ''">同义词：</p>
        <table class="deptbox" v-if="id == ''">
          <tr>
            <td class="ind">序号</td>
            <td>术语</td>
            <td>拼音</td>
            <td>类型</td>
            <td class="desc">说明</td>
            <td v-if="id">操作</td>
          </tr>
          <tr v-for="(item,index) in synonymous">
            <td class="ind">{{index+1}}</td>
            <td :title="item.name&&item.name.length>9?item.name:''">
              <!-- 使用原生input，输入限制 -->
              <!-- <el-input v-model="item.name" placeholder="请输入术语" maxlength="30" size="small" @input.native="handleInput(2,index)"></el-input> -->
              <input type="text" v-model="item.name" placeholder="请输入术语" maxlength="50" @blur="handleBlur(2,index)">
            </td>
            <td>
              <input type="text" v-model="item.spell" placeholder="请输入拼音" maxlength="50"  @input="handlePinyin">
            </td>
            <td>
              {{data.type}}
            </td>
            <td class="desc">
              <input v-model="item.remark" placeholder="请输入术语说明" maxlength="120"></input>
            </td>
            <td v-if="id">
              <span @click="deleLine(index)" class="delete">删除</span>
            </td>
          </tr>
          <tr @click="addSpan">
            <td :colspan="colspan" class="addSpan">+</td>
          </tr>
        </table>
        <div class="moreInfo" v-if="showMore==1">
          <p>更多信息：</p>
          <el-form>
            <el-form-item label="性别：">
                <el-select v-model="sexType">
                    <el-option v-for="(it,i) in sex" :label="it.name" :value="it.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄：" class="ages">
                <el-input
                  v-model.number="minAge"
                  type="number"
                  @input="inputAge">
                </el-input>
                <span class="ageLine">~</span>
                <el-input
                v-model.number="maxAge"
                type="number"
                @input="inputAge"
              ></el-input>
            </el-form-item>
          </el-form> 
        </div>
        <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';
import pinyin from '../../js/Convert_Pinyin.js';
  export default {
    name:'AddMedicalName',
    data(){
      return{
        minTitle:'医学术语命名维护-添加',
        data:{
          name:'',
          type:'',
          remark:'',
          isConcept:1,
          spell:''
        },
        radioVal:'',
        typeList:[],
        id:'',
        synonymous:[],//同义词
        singleword:[],
        allwords:[],//标准词和同义词
        colspan:5,
        colspans:6,
        currentPage:1,
        pageSize:10,
        show:false,
        tmpSynonymous:[],
        sexType:'通用',
        maxAge:200,
        minAge:0,
        showMore:'',
        sex:[
          {
            name:'通用',
            value:3
          },
          {
            name:'男',
            value:1
          },
          {
            name:'女',
            value:2
          }
        ],
        unfit:false, //点确认时是否弹提示,
        saveDisable: false,  //保存按钮禁止点击
        options:[],
        copy:null
      }
    },
    created(){
      this.getTypeList();
      const id = this.$route.params.id || '';
      const copy = this.$route.params.copy || '';
      this.copy = copy;
      if(id){
        this.minTitle = copy?'医学术语命名维护-复制':'医学术语命名维护-修改';
        this.id = id;
        this.colspan = 5;
        this.getDetail(id);
      }
    },
    watch:{
      radioVal(newVal,preVal){
        if(newVal && newVal != preVal){
          this.changeState(newVal);
        }
      }
    },
    methods:{
      changeState(val){
        let tmpAllwords = JSON.parse(JSON.stringify(this.synonymous));
        for(let i = 0;i < tmpAllwords.length;i++){
          if(i+1 == val){
            tmpAllwords[i].isConcept = 1
            tmpAllwords[i].type = this.data.type
          }else{
            tmpAllwords[i].isConcept = 0
          }
        }
        this.tmpSynonymous = tmpAllwords
        this.synonymous = tmpAllwords
      },
      toggleShow(num){
        let tmpShow = this.show
        this.show = !tmpShow
        if(num == 1){
          this.changeState(-1)
          this.radioVal = ''
        }
      },
      getDetail(ids){
        if(ids){
          api.getMedicalDetail({'conceptId':ids}).then((res)=>{
            const result = res.data;
            if(result.code == 0){
              this.data = result.data.libName[0];
              this.singleword = result.data.libName;
              this.synonymous = result.data.otherNames;
              this.allwords = (result.data.libName).concat(result.data.otherNames);
              this.showMore = result.data.isHasCommon;
              this.maxAge = result.data.maxAge;
              this.minAge = result.data.minAge;
              // this.sexType = result.data.sexType;
              let sexType = result.data.sexType;
              this.sex.map((v,i)=>{
                if(v.value==sexType){
                  this.sexType = v.name;
                }
              })
            }else{
              this.$message({
                message:result.msg,
                type:'warning'
              });
            }
          })
        }  
      },
      getTypeList(){
        api.allKnowledgeType({'name':''}).then((res)=>{
          const data = res.data;
          if(data.code==0){
            // this.typeList = data.data.records;
            this.typeList = data.data;
            // 类型改成平铺
            if(data.data.length>0){
              const total = data.data.length;
              const average = parseInt(total/3);
              const mod = total%3; //余数
              const firstGroup = data.data.slice(0,average);
              let secGroup = [];
              let thirdGroup = [];
              if(mod == 2){
                secGroup = data.data.slice(average,average*2+1);
                thirdGroup = data.data.slice(average*2+1,total);
              }else{
                secGroup = data.data.slice(average,average*2);
                thirdGroup = data.data.slice(average*2,total);
              }
              this.options.push({label:1,options:firstGroup},{label:2,options:secGroup},{label:3,options:thirdGroup});
            }
          }else{
            this.$message({
              message:data.msg,
              type:'warning'
            });
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      // handleInput(index,name){
     /* handleInput(type,index){
        // 可输入内容：字母、数字、汉字、特殊字符：%  ——  其余不可输入；
        // if(!name){//标准词输入
        if(type==1){//标准词输入
          this.data.name = this.data.name.replace(/[^%0-9a-zA-Z\u4e00-\u9fa5]/g,'');
        }else{
          this.synonymous[index].name = this.synonymous[index].name.replace(/[^%0-9a-zA-Z\u4e00-\u9fa5]/g,'');
        }
      },*/
      handleBlur(type,index,flg){
        // 不能为纯数字、纯字符、纯数字加字符 4-18
        // const pattern = /[^~@#$%^&*_\-+=,，.。:："“？?”；;、!！0-9]/g;
        // 需求更改：不能为纯数字，其余均可输入 5-20
        const pattern = /[^0-9]/g;
        if(type==1){//标准词输入
          if(this.data.name && !pattern.test(this.data.name)){
            this.$message({
              // message:'无法输入纯数字或者纯字符，请输入正确数据！',
              message:'无法输入纯数字，请输入正确数据！',
              type:'warning'
            });
            // this.data.name = '';
            this.unfit = true;
          }else{
            let data = this.data;
            data.spell = pinyin.getCamelChars(data.name);
            this.unfit = false;
          }
        }else if(type==2){
          // 修改时术语名称、拼音和类型均不能修改
          if(flg == 99){
              // if(this.synonymous[index-1].name && !pattern.test(this.synonymous[index-1].name)){
              if(this.allwords[index].name && !pattern.test(this.allwords[index].name)){
              this.$message({
                message:'无法输入纯数字，请输入正确数据！',
                type:'warning'
              });
              // this.synonymous[index-1].name = '';
              this.unfit = true;
            }else{
              // let current = this.synonymous[index-1];
              let current = this.allwords[index];
              current.spell = pinyin.getCamelChars(current.name);
              this.unfit = false;
            }
          }else{
            if(this.synonymous[index].name && !pattern.test(this.synonymous[index].name)){
              this.$message({
                message:'无法输入纯数字，请输入正确数据！',
                type:'warning'
              });
              // this.synonymous[index].name = '';
              this.unfit = true;
            }else{
              let current = this.synonymous[index];
              current.spell = pinyin.getCamelChars(current.name);
              this.unfit = false;
            }
          }
        }
      },
      handlePinyin(e){//只能输入英文
        e.target.value = e.target.value.replace(/[^a-zA-Z]/g,'');
      },
      addSpan(type){
        let singleSpan = {
          name:'',
          remark:'',
          isConcept:0,
          isEdit:true,
          spell:null
        }
        if(type == 55){
          this.allwords.push(singleSpan);
          this.synonymous.push(singleSpan);
        }else{
          this.synonymous.push(singleSpan);
        }
      },
      warning(msg,type){
        this.$message({
          showClose: true,
          message:msg,
          type:type||'warning'
        })
      },
      showConfirmDialog(msg,resolve){
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          resolve();
        }).catch(() => {});
      },
      deleLine(index,type){
        // 只在界面删除数据，待点确认 后参才真正删除
        if(type == 55){
          this.synonymous.splice(index-1,1);
          this.allwords.splice(index,1);
        }else{
          this.synonymous.splice(index,1);
        }
      },
      comfirn(flg){  
        if(!this.data.name){
          this.warning('请输入标准词');
          return
        }
        if(!this.data.type && !this.unfit){
          this.warning('请选择术语类型');
          return
        }
        // 处于修改标准词状态且没有选中，不能保存
        if(this.show && !this.radioVal){
          this.warning('请先选择标准词');
          return
        }
        // 年龄为必填项--2019-6-5需求
        if(this.showMore == 1){
          if(!this.minAge && this.minAge != 0 || !this.maxAge){
            this.warning('年龄不能为空，区间为0-200');
            return
          }
          if(this.minAge < 0 || this.minAge > 200 || this.maxAge < 0 || this.maxAge > 200){
            this.warning('年龄必须是0-200');
            return
          }
        }
        
        // 过滤同义词空数据
        let realData=[];
        if(this.id){//修改用暂存的列表
          realData = this.synonymous.filter((item)=>{
            return item.name;
          })
          let tmpArr = []
          for(let k = 0;k < realData.length;k++){
            if(realData[k].isConcept == 1){
              let tmpdata = JSON.parse(JSON.stringify(this.data))
              tmpArr.push(realData[k])
              realData.splice(k,1)
              tmpdata.isConcept = 0
              realData.push(tmpdata)
              this.data = tmpArr[0]
            }
          }
        }else{
          realData = this.synonymous.filter((item)=>{
            return item.name;
          })
        }
        
        let detailList = [];
        detailList[0] = this.data;
        for(let i=0; i<realData.length; i++){
          realData[i].type = this.data.type;
          detailList.push(realData[i]);
        }
        // 校验是否有名称全为数字
        const pattern = /[^0-9]/g;
        for(let d=0; d<detailList.length; d++){
          let dname = detailList[d].name;
          // if(detailList[d].name && !pattern.test(detailList[d].name)){
          if(dname && !dname.match(pattern)){
            if(!this.unfit){//避免和失焦事件同事弹出
              this.$message({
                message:'无法输入纯数字，请输入正确数据！',
                type:'warning'
              });
            }
            this.unfit = false;
            return false;
            break
          }
        }
        
        let params;
        if(this.showMore==1){
          // 下拉文字转code
          let sexCode;
          this.sex.map((v,i)=>{
            if(v.name==this.sexType){
              sexCode = v.value;
            }
          })
          params = {
            'name':this.data.name,
            'type':this.data.type,
            'detailList':detailList,
            'conceptId':this.copy?'':this.id,//复制当新增，把id置空
            'sexType':sexCode,
            'maxAge':this.maxAge,
            'minAge':this.minAge
          }
        }else{
          params = {
            'name':this.data.name,
            'type':this.data.type,
            'detailList':detailList,
            'conceptId':this.copy?'':this.id
          }
        }
        this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
        api.addMedicalName(params).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.warning(res.data.msg||'操作成功','success');
            //返回带搜索条件的首页
            this.$router.push({name:'MedicalName',params:Object.assign({},this.$route.params,{currentPage:1})});
            /*if(flg == 14){
              this.getDetail(this.id)
              this.radioVal = ''
              this.show = false
            }else{
              this.$router.push({name:'MedicalName'});
            }*/
          }else{
            this.warning(res.data.msg);
          }
          this.saveDisable = false
        })
      },
      inputAge(){
        // console.log("输入年龄")
      },
      selectType(e){
        this.typeList.map((v,i)=>{
          if(v.name==e){
            this.showMore = v.isHasCommon;
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
   @import "../../less/admin.less";
   /deep/ .radioWrap .el-radio {
     display: block;
     height: 41px;
     line-height: 41px;
     text-align: right;
     margin-left: 0;
   }
   // 饿了么分组下拉
    .el-scrollbar{
     .el-select-dropdown__list{
       .el-select-group__wrap{
        min-width: 160px !important;
        display: inline-block !important;
        vertical-align: top !important;
      }
    }
   }
   .el-select-group__wrap::after{
    background:#fff !important;
   } 
   .displayColor {
     color: #ccc;
     cursor:not-allowed;
   }
   .delete {
     cursor: pointer;
   }
  .content{
    background: #fff;
    padding: 20px 20px 30px;
    color: #545455;
  }
  .titl{
    margin: 25px 0 10px;
  }
  .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;
        border: 1px solid #ccc;
        width: 100%;
        height: 30px;
        padding: 0 7px;
        box-sizing: border-box;
        border-radius: 4px;
      }
      .ind{
        width: 55px;
      }
      .desc{
        width: 280px;
      }
      .descs{
        width: 50px;
      }
    }
    .addSpan{
      text-align: center;
      cursor: pointer;
    } 
  }
  .deptboxTable {
    width: 100%;
  }
  .deptboxChange {
    padding-right: 210px;
    position: relative;
  }
  .actionDo {
    width: 200px;
    position: absolute;
    top: 1px;
    right: 0;
    .btnWrap {
      height: 30px;
    }
  }
  .btn {
    text-align: right;
    margin-top: 20px;
  }
  .necess{
    display: inline-block;
    vertical-align: middle;
    color: red;
    margin-left: 2px;
  }
  .moreInfo{
    border-top: 1px solid #c0c4cc ;
    margin-top: 45px;
    p{
      margin:15px 0;
    }
  }
  .spell{
    text-align: center;
  }
  /deep/.ages{
    margin-top: 20px;
    .el-input {
       display: inline-block;
       width: auto;
       .el-input__inner {
         width: 60px;
         padding: 0 5px;
         text-align: center;
       }
       .el-input__inner::-webkit-outer-spin-button,
       .el-input__inner::-webkit-inner-spin-button {
         -webkit-appearance: none;
       }
       .el-input__inner[type="number"] {
         -moz-appearance: textfield;
       }
     }
     .ageLine{
      display: inline-block;
      margin: 0 35px;
     }
   }
</style>