platformFront/src/components/preTreat/PubSelect.vue

<template>
    <div class="single-container">
        <el-form>
            <div class="operation-row">
                <el-checkbox-group size="small">
                    <el-checkbox-button :label="0" @change="handlePlaceholder(0)">文字输入框占位符</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small">
                    <el-checkbox-button :label="0" @change="handlePlaceholder(1)">数字输入框占位符</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small" v-if="type==2">
                    <el-checkbox-button :label="0" @change="handleExclu">互斥项</el-checkbox-button>
                </el-checkbox-group>
                <el-button type="danger" size="small" class="del" @click="delRow">删除</el-button>

            </div>
            <div class="main-area" v-if="type!=3">
                <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,'name')"
                                  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,'description')"
                                  ref = "inputDesc"
                                  @input="HandleInputName(i, rows[i].description)"
                                  @blur="emitValues"></el-input>
                     </div>
                    <el-tag v-if="it.exclusion" type="info" size="mini">互斥项</el-tag>
                </el-col>
                <el-button @click="addRow">+</el-button>
            </div>
            <div class="main-area" v-if="type==3">
                <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,'name')"
                                  ref = "inputName"
                                  @input="HandleInputName(i, rows[i].name,true)"
                                  @blur="emitValues"></el-input>
                    </div>
                    <el-tag v-if="it.exclusion" type="info" size="mini">互斥项</el-tag>
                </el-col>
                <el-button @click="addRow" class="little">+</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: 80%;
        min-width: 400px;
        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: calc(50% - 30px);
            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;
    &.little{
         width: calc(50% - 30px);
     }
    }
    }
</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 {
        rows:[...initRows],
        focusOn:-1,         //聚焦的行index
        focusName:'name',        //是否聚焦医生界面输入框
      }
    },
    mounted(){
      const {options} = this.$props;
      if(options){
        const arr = options.filter((it)=>{
          return it.name;
        });
        this.rows = arr;
        const items = utils.simpleOptionData(this.rows);
        this.$emit('pushValues',items);
      }else{
        this.initData();
      }
    },
    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) {        //永远检测不到，因为归属修改时类型被清空，本组件被销毁
        this.rows = [...utils.getInitRow(initRow,4)];
      },*/
      type() {
        this.initData();
      },
      sexType() {
        this.initData();
      },
    },
    methods:{
      initData(){
        this.rows = [...utils.getInitRow(initRow,4)];
      },
      addRow(){
        this.rows.push(Object.assign({},initRow,{orderNo:this.rows.length}));
      },
      selectRow(index,name){
        this.focusOn = index;
        this.focusName = name;
      },
      handlePlaceholder(type){          //占位符类型，type=0文本输入框，type=1数字输入框
        const i = this.focusOn;
        if(i==-1){
          this.$message({
            message: '请先选中要操作的行',
            type: 'warning',
            showClose: true,
          });
          return ;
        }
        const maps = {0:'${input_输入}',1:'${number_输入}'};
        const key = this.focusName;
        this.rows[i][key] = this.rows[i][key]+maps[type];
        //this.rows[i].description = this.rows[i].description+maps[type];
      },
      handleExclu(){
        const i = this.focusOn;
        if(i==-1){
          this.$message({
            message: '请先选中要操作的行',
            type: 'warning',
            showClose: true,
          });
          return ;
        }
        this.rows.map((it,x)=>{
          if(x===i){
            it.exclusion = 1;
          }else{
            it.exclusion = 0;
          }
        });
      },
      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) {
        const pureName=name.replace(/(\$\{number_\S*?\})|(\$\{input_\S*?\})/g,'');
        //console.log(pureName);
        if(pureName.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>