platformFront/src/components/icss/SingleSelect.vue

<template>
    <div class="single-container">
        <el-form>
            <div class="operation-row">
                <el-checkbox-group size="small" v-for="(it,i) in rows" v-if="type!=2&&(focusOn==i||(focusOn==-1&&i==0))" :key="1+i" v-model="rows[i].defaultSelect" @change="emitValues(i,'hasDefault',rows[i].defaultSelect)">
                    <el-checkbox-button  v-if=" !(ascription == 5 && type == 1 || type == 2 || type == 11) " :label="i" :disabled="hasNone==i||hasBan==i|| hasError==i || (hasDefault!=-1&&hasDefault!=i)||focusOn==-1">默认选中</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small" v-for="(it,i) in rows" v-if="type!=1&&(focusOn==i||(focusOn==-1&&i==0))" :key="2+i" v-model="rows[i].isNone" @change="emitValues(i,'hasNone',rows[i].isNone)">
                    <el-checkbox-button  v-if=" !(ascription == 5 && type == 1 || type == 11)" :label="i" :disabled="hasBan==i || hasError==i ||focusOn==-1">同“无”类型</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small" v-for="(it,i) in rows" v-if="type!=1&&(focusOn==i||(focusOn==-1&&i==0))" :key="3+i" v-model="rows[i].isBan" @change="emitValues(i,'hasBan',rows[i].isBan)">
                    <el-checkbox-button v-if=" !(ascription == 5 && type == 1 || type == 11)" :label="i" :disabled="hasNone==i || hasError==i||focusOn==-1">同“伴”类型</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small" v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :key="4+i" v-model="rows[i].isError" @change="emitValues(i,'hasError',rows[i].isError)">
                    <el-checkbox-button v-if="ascription==5 && (type == 1 || type != 11)" :label="i" :disabled="hasDefault==i||hasBan==i ||hasNone==i ||(hasError!=-1&&hasError==i)||focusOn==-1">标记异常选项</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 v-for="(it,i) in rows" :key="i">
                    <el-input v-model="rows[i].name"
                              v-bind:class="{select:focusOn==i}"
                              @focus="selectRow(i)"
                              ref = "inputName"
                              @input="HandleInputName(i, rows[i].name)"
                              @blur="emitValues"></el-input>
                    <el-tag type="info" size="mini" v-if="showTag(it)">{{showTag(it)}}</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;
        .del{
           margin-left: 150px;
        }
        .tip {
          color: #22ccc8;
        }
    }
    .main-area{
        width: 290px;
        margin:20px 150px;
        .el-tag{
            margin-left: 10px;
        }
        .el-col .el-input {
            width: 200px;
            display: inline-block;
            &.select{
                input{
                    border-color: @adminBase;
                }
            }
        }
        
        .el-button{
            width: 200px;
        }
    }
</style>
<script>
  import utils from '@api/utils.js';
  import Vue from 'vue';
    export default {
      props:['type','options','ascription','sexType'],
      data(){
        return {
          maps:{isBan:'同“伴”',isNone:'同“无”',defaultSelect:'默认选中',isError:'异常选项'},
          rows:[{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''}],
          focusOn:-1
        }
      },
      mounted(){
        const {options} = this.$props;
        if(options){
          const arr = options.map((it)=>{
            return {name:it.name,defaultSelect:it.defaultSelect=='1'?true:false,isBan:it.code==1?true:'',isNone:it.code==2?true:'',isError:it.abnormal==1?true:''};
          });
          const arrLen = arr.length;
          if(arrLen < 4) {
            for (let i = 0; i < 4 - arrLen; i++) {
              arr.push({name:'',defaultSelect:'',isBan:'',isNone:'',isError:''})
            }
          }
          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];
          }
        },
        hasDefault:function(){               //是否有选项默认选中
          let index =this.rows.findIndex((it)=>{
            return it.defaultSelect;
          });
          return index;
        },
        hasNone:function(){                 //是否有选项同无
          let index =this.rows.findIndex((it)=>{
            return it.isNone;
          });
          return index;
        },
        hasBan:function(){                  //是否有选项同伴
          let index =this.rows.findIndex((it)=>{
            return it.isBan;
          });
          return index;
        },
        hasError:function(){        //是否为正确选项
          let index =this.rows.findIndex((it)=>{
            return it.isError;
          });
          return index;
        }
      },
      watch: {
        ascription(newVal, preVal) {
            if (newVal != preVal) {
                if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
                    this.rows = [{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''}];
                }
            }
        },
        type(newVal, preVal) {
            if (newVal != preVal) {
                if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
                    this.rows = [{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''}];
                }
            }
        },
        sexType(newVal, preVal) {
            if (newVal != preVal) {
                if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
                    this.rows = [{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''},{name:'',defaultSelect:'',isBan:'',isNone:'',isError:''}];
                }
            }
        },
      },
      methods:{
        addRow(){
          this.rows.push({name:'',defaultSelect:'',isBan:'',isNone:'',isError:''});
        },
        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 = utils.simpleOptionData(this.rows);
          this.$emit('pushValues',items);
        },
        HandleInputName(i, name) {
          if(name.length > 30) {
            Vue.set(this.rows[i], 'name', this.rows[i].name.slice(0, 30))
            this.$refs.inputName[i].currentValue = this.rows[i].name
            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>