platformFront/src/components/icss/AddMedicalName.vue

<template>
  <div>
    <crumbs :title="minTitle" linkTo="/admin/LT-YXSYKWH-YXSYMMWH"></crumbs>
    <div class="contents">
      <div class="content">
        <h3>添加术语：</h3>
        <p class="titl">医学标准术语：</p>
        <table class="deptbox">
          <tr>
            <td class="ind">序号</td>
            <td>标准词<span class="necess">*</span></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:''">
              <!-- <el-input v-model="data.name" placeholder="请输入术语" maxlength="30" size="small" @input.native="handleInput(1)"></el-input> -->
              <!-- 修改时标准词不能修改，修改了会当做新增处理 4-17 -->
              <p v-if="id">{{data.name}}</p>
              <!-- <input v-else type="text" v-model="data.name" placeholder="请输入术语" maxlength="30" @input="handleInput(1)"> -->
              <!-- 4-18 需求变更 -->
              <input v-else type="text" v-model="data.name" placeholder="请输入术语" maxlength="30" @blur="handleBlur(1)">
            </td>
            <td>
              <el-select v-if="!id" v-model="data.type" filterable placeholder="请选择" size="small">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
              <span v-else>{{data.type}}</span>
            </td>
            <td class="desc">
              <!-- <el-input v-model="data.remark" placeholder="请输入术语说明" maxlength="120" size="small" @input="handleRemark"></el-input> -->
              <input v-model="data.remark" placeholder="请输入术语说明" maxlength="120"></input>
            </td>
          </tr>
        </table>
        <p class="titl">同义词：</p>
        <table class="deptbox">
          <tr>
            <td class="ind">序号</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="30" @input="handleInput(2,index)"> -->
              <input type="text" v-model="item.name" placeholder="请输入术语" maxlength="30" @blur="handleBlur(2,index)">
            </td>
            <td>
              <!-- <el-select v-model="item.type" clearable placeholder="请选择">
                <el-option
                  v-for="item in data.typeList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key">
                </el-option>
              </el-select> -->
              {{data.type}}
            </td>
            <td class="desc">
              <!-- <el-input v-model="item.remark" placeholder="请输入术语说明" maxlength="120" size="small" @input="handleRemark(index,item.name)"></el-input> -->
              <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="btn">
          <el-button
            type="primary"
            @click="comfirn"
          >确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import api from '@api/icss.js';
  export default {
    name:'AddMedicalName',
    data(){
      return{
        minTitle:'医学术语命名维护-添加',
        data:{
          name:'',
          type:'',
          remark:'',
          isConcept:1
        },
        typeList:[],
        id:null,
        synonymous:[//同义词
            {
              name:'',
              remark:'',
              isConcept:0
            },
            {
              name:'',
              remark:'',
              isConcept:0
            },
            {
              name:'',
              remark:'',
              isConcept:0
            },
          ],
        colspan:4,
        currentPage:1,
        pageSize:10
      }
    },
    created(){
      this.getTypeList();
      const id = this.$route.params.id;
      if(id){
        this.minTitle = '医学术语命名维护-修改';
        this.id = id;
        this.colspan = 5;
        this.getDetail();
      }
    },
    methods:{
      getDetail(){
        if(this.id){
          api.getMedicalDetail({'conceptId':this.id}).then((res)=>{
            const result = res.data;
            if(result.code == 0){
              this.data = result.data.libName[0];
              this.synonymous = result.data.otherNames;
            }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;
          }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){
        // 不能为纯数字、纯字符、纯数字加字符 4-18
        const pattern = /[^~@#$%^&*_\-+=,，.。:："“？?”；;、!！0-9]/g;
        if(type==1){//标准词输入
          if(!pattern.test(this.data.name)){
            this.$message({
              message:'无法输入纯数字或者纯字符，请输入正确数据！',
              type:'warning'
            });
            this.data.name = '';
          }
        }else{
          if(!pattern.test(this.synonymous[index].name)){
            this.$message({
              message:'无法输入纯数字或者纯字符，请输入正确数据！',
              type:'warning'
            });
            this.synonymous[index].name = '';
          }
        }
      },
      // handleRemark(index,name){
      handleRemark(type,index){
      //说明只能输入中文
        // if(!name){//标准词输入
        /*if(type==1){//标准词输入
          this.data.remark = this.data.remark.replace(/[^\u4e00-\u9fa5]/g,'');
        }else{
          this.synonymous[index].remark = this.synonymous[index].remark.replace(/[^\u4e00-\u9fa5]/g,'');
        }*/
        const pattern = /[^~@#$%/^&*_\-+=,，.。:："“？?”；;、!！0-9]/g;
        if(type==1){//标准词输入
          if(!pattern.test(this.data.remark)){
            this.$message({
              message:'无法输入纯数字或者纯字符，请输入正确数据！',
              type:'warning'
            });
            this.data.remark = '';
          }
        }else{
          if(!pattern.test(this.synonymous[index].remark)){
            this.$message({
              message:'无法输入纯数字或者纯字符，请输入正确数据！',
              type:'warning'
            });
            this.synonymous[index].remark = '';
          }
        }
      },
      addSpan(){
        let singleSpan = {
          name:'',
          remark:'',
          isConcept:0
        }
        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){
        // 只在界面删除数据，待点确认 后参才真正删除
        this.synonymous.splice(index,1);
      },
      comfirn(){  
        if(!this.data.name){
          this.warning('请输入标准词');
          return
        }
        if(!this.data.type){
          this.warning('请选择术语类型');
          return
        }
        // 过滤同义词空数据
        let 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 params = {
          'name':this.data.name,
          'type':this.data.type,
          'detailList':detailList
        }
        api.addMedicalName(params).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.warning(res.data.msg||'操作成功','success');
            this.$router.push({name:'MedicalName'});
          }else{
            this.warning(res.data.msg);
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
   @import "../../less/admin.less";
  .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: 89%;
        height: 30px;
        padding: 0 7px;
        border-radius: 4px;
      }
      .ind{
        width: 55px;
      }
      .desc{
        width: 280px;
      }
    }
    .addSpan{
      text-align: center;
      cursor: pointer;
    } 
  }
  .btn {
    text-align: right;
    margin-top: 20px;
  }
  .necess{
    display: inline-block;
    vertical-align: middle;
    color: red;
    margin-left: 2px;
  }
</style>