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>标准词</td>
            <td>类型</td>
            <td class="desc">说明</td>
          </tr>
          <tr>
            <td class="ind">1</td>
            <td>
              <el-input v-model="data.name" placeholder="请输入术语" maxlength="30"></el-input>
            </td>
            <td>
              <el-select v-model="data.type" clearable placeholder="请选择">
                <el-option
                  v-for="item in data.typeList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key">
                </el-option>
              </el-select>
            </td>
            <td class="desc">
              <el-input v-model="data.mark" placeholder="请输入术语说明" maxlength="120"></el-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>
              <el-input v-model="item.term" placeholder="请输入术语" maxlength="30"></el-input>
            </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>
            </td>
            <td class="desc">
              <el-input v-model="item.mark" placeholder="请输入术语说明" maxlength="120"></el-input>
            </td>
            <td v-if="id">
              <span @click="deleLine(index)">删除</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">
  export default {
    name:'AddMedicalName',
    data(){
      return{
        minTitle:'医学术语命名维护-添加',
        data:{
          name:'',
          type:'',
          mark:'', 
          type:'',
          typeList:[
            {
              name:'类型1',
              id:1,
              key:1
            },
            {
              name:'类型2',
              id:2,
              key:2
            },
            {
              name:'类型3',
              id:3,
              key:3
            },
          ]
        },
        id:null,
        synonymous:[//同义词
            {
              term:'',
              id:1,
              type:'',
              mark:''
            },
            {
              term:'',
              id:2,
              type:'',
              mark:''
            },
            {
              term:'',
              id:3,
              type:'',
              mark:''
            },
          ],
        colspan:4
      }
    },
    created(){
      const info = this.$route.params.info;
      if(info){
        this.minTitle = '医学术语命名维护-修改';
        this.id = info.id;
        this.colspan = 5;
      }
    },
    methods:{
      handleInput(){//限制输入类型

      },
      addSpan(){
        // let index = this.synIndex;
        // index++
        let singleSpan = {
          // index:index,
          term:'',
          id:null,
          type:'',
          mark:''
        }
        this.synonymous.push(singleSpan);
        // this.synIndex = index;
      },
      deleLine(index){
        this.synonymous.splice(index,1);
        console.log(123,index,this.synonymous);
      },
      comfirn(){

      }
    }
  }
</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;
        width: 100%;
      }
      .ind{
        width: 55px;
      }
      .desc{
        width: 280px;
      }
    }
    .addSpan{
      text-align: center;
      cursor: pointer;
    } 
  }
  .btn {
    text-align: right;
    margin-top: 20px;
  }
</style>