platformFront/src/components/preTreat/PubSelect.vue

<template>
    <div class="single-container">
        <el-form>
            <div class="operation-row">
                <el-checkbox-group size="small"  v-if="type==2">
                    <el-checkbox-button :label="0">文字输入框占位符</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small"  v-if="type==2">
                    <el-checkbox-button :label="0">数字输入框占位符</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small" v-if="type==1&&ascription!=1">
                    <el-checkbox-button :label="0">互斥项</el-checkbox-button>
                </el-checkbox-group>
                <span v-if="type == 11" class="tip">可输入中文全角括号"（）", 当作可输入内容的占位符</span>
                <el-button type="danger" size="small" class="del" @click="delRow">删除</el-button>

            </div>
            <div class="main-area">
                <el-col class="col-title">
                    <span><i>*</i>填写单医生界面展示标准内容</span>
                    <span>填写单医生界面展示通俗内容</span>
                </el-col>
                <el-col v-for="(it,i) in rows" :key="i">
                    <div class="inps">
                        <el-input v-model="rows[i].name"
                                  v-bind:class="{select:focusOn==i}"
                                  @focus="selectRow(i)"
                                  ref = "inputName"
                                  @input="HandleInputName(i, rows[i].name,true)"
                                  @blur="emitValues"></el-input>
                        <el-input v-model="rows[i].description"
                                  v-bind:class="{select:focusOn==i}"
                                  @focus="selectRow(i)"
                                  ref = "inputDesc"
                                  @input="HandleInputName(i, rows[i].description)"
                                  @blur="emitValues"></el-input>
                     </div>
                    <el-tag v-if="it.isExclu" type="info" size="mini" @click="">互斥项</el-tag>
                </el-col>
                <el-button @click="addRow">+</el-button>
            </div>
        </el-form>
    </div>
</template>
<style lang="less">
    @import "../../less/common.less";
    .el-checkbox-button--small .el-checkbox-button__inner{
        font-size: 14px;
    }
    .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner{
        border-color: @disableColor;
        border-left-color: @disableColor;
        color: @disableColor;
    }
    .el-checkbox-button:last-child .el-checkbox-button__inner{
        border-radius: 3px;
        border-color: @adminBase;
        color: @adminBase;
        margin-right: 15px;
    }
    .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{
        background-color:@adminBase;
        border-left-color:@adminBase;
        color:#fff;
    }
    .el-checkbox-group{
        display: inline-block;
    }
    .operation-row{
        margin-left:150px;
        text-align: right;
    .del{
        margin-left: 150px;
    }
    .tip {
        color: #22ccc8;
    }
    }
    .main-area{
        width: 420px;
        margin:20px 150px;
    .inps{
        display: inline-block;
        width: calc(100% - 60px);
    }
    .el-tag{
        margin-left: 10px;
    }
    .col-title{
        margin-bottom:10px;
        span{
            display: inline-block;
            width: 210px;
            font-size:12px;
            i{
                color: #f56c6c;
                margin-right: 3px;
            }
        }
    }
    .el-col .el-input {
        width: 50%;
        display: inline-block;
        .el-input__inner{
            border-radius: 0;
        }
        &.select{
        input{
            border-color: @adminBase;
        }
      }
    }

    .el-button{
        width: calc(100% - 60px);
        border-radius: 0;
    }
    }
</style>
<script>
  import utils from '@api/utils.js';
  import Vue from 'vue';

  //单行数据
  const initRow = {orderNo:0,name:'',description:'',exclusion:0};
  const initRows = utils.getInitRow(initRow,4);
  export default {
    props:['type','options','ascription','sexType'],
    data(){
      return {
        //maps:{isBan:'同“伴”',isNone:'同“无”',defaultSelect:'默认选中',isError:'异常选项'},
        rows:[...initRows],
        focusOn:-1,         //聚焦的行index
      }
    },
    mounted(){
      const {options} = this.$props;
      if(options){
        const arr = options.map((it)=>{
          return {name:it.name,description:'',isExclu:false};
        });
        const arrLen = arr.length;
        if(arrLen < 4) {
          for (let i = 0; i < 4 - arrLen; i++) {
            arr.push(utils.getInitRow(initRow,1))
          }
        }
        this.rows = arr;
        const items = utils.simpleOptionData(this.rows);
        this.$emit('pushValues',items);
      }
    },
    computed:{
      showTag:function(){
        return function(it){
          let name = Object.keys(this.maps).find((item)=>{
            return it[item];
          });
          return this.maps[name];
        }
      },
    },
    watch: {
      ascription(newVal, preVal) {
        if (newVal != preVal) {
          if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
            this.rows = [...initRows];
          }
        }
      },
      type(newVal, preVal) {
        if (newVal != preVal) {
          if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
            this.rows = [...initRows];
          }
        }
      },
      sexType(newVal, preVal) {
        if (newVal != preVal) {
          if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
            this.rows = [...initRows];
          }
        }
      },
    },
    methods:{
      addRow(){
        this.rows.push(utils.getInitRow(initRow,1));
      },
      selectRow(index){
        this.focusOn = index;

      },
      emitValues(i,type,flag){
        if(typeof i =='number'&&this.focusOn == -1){
          this.$message({
            message: '请先选择要操作的行',
            type: 'warning',
            showClose: true,
          });
          return;
        }
        const items = this.rows;
        this.$emit('pushValues',items);
      },
      HandleInputName(i, name, isName) {
        if(name.length > 30) {
          if(isName){
            Vue.set(this.rows[i], 'name', this.rows[i].name.slice(0, 30));
            this.$refs.inputName[i].currentValue = this.rows[i].name;
          }else{
            Vue.set(this.rows[i], 'description', this.rows[i].description.slice(0, 30));
            this.$refs.inputDesc[i].currentValue = this.rows[i].description;
          }

          this.$message({
            message: '最多输入30个字',
            type: 'warning',
            showClose: true,
          });
          return;
        }

      },
      delRow(){
        if(this.focusOn==-1){
          this.$message({
            message: '请先选择要删除的行',
            type: 'warning',
            showClose: true,
          });
          return;
        }
        this.$alert('确定要删除该行吗？', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          this.rows.splice(this.focusOn,1);
          this.focusOn = -1;
          this.emitValues();
        }).catch(() => {});
      }
    }
  }
</script>