platformFront/src/components/icss/SingleSelect.vue

<template>
    <div class="single-container">
        <el-form :model="form">
            <div class="operation-row">
                <el-checkbox-group size="small" v-model="form.defaultCheckeds" @change="emitValues">
                    <el-checkbox-button v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :label="i">默认选中</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small" v-model="form.sameToNones" @change="emitValues">
                    <el-checkbox-button v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :label="i">同“无”类型</el-checkbox-button>
                </el-checkbox-group>
                <el-checkbox-group size="small" v-model="form.sameToBans" @change="emitValues">
                    <el-checkbox-button v-for="(it,i) in rows" v-if="focusOn==i||(focusOn==-1&&i==0)" :label="i">同“伴”类型</el-checkbox-button>
                </el-checkbox-group>
                <el-button type="danger" size="small" class="del" @click="delRow">删除</el-button>
            </div>
            <div class="main-area">
                <el-input v-for="(it,i) in rows"
                          v-model="form.options[i]"
                          v-bind:class="{select:focusOn==i}"
                          @focus="selectRow(i)"
                          @blur="emitValues"></el-input>
                <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: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;
        }
    }
    .main-area{
        width: 200px;
        margin:20px 150px;
        .el-input {
            width: 200px;
            display: block;
            &.select{
                input{
                    border-color: @adminBase;
                }
            }
        }
        .el-button{
            width: 200px;
        }
    }
</style>
<script>
    import utils from '@api/utils';
    export default {
      props:['type'],
      data(){
        return {
          form:{
            options:[],
            defaultCheckeds:[],
            sameToNones:[],
            sameToBans:[]
          },
          rows:[{},{},{},{}],
          focusOn:-1
        }
      },
      /*watch:{
        defaultChecked:function(next){
          if(this.focusOn==-1){
            this.defaultChecked = false;
            this.$message({
              message: '请先选择要操作的行',
              type: 'warning'
            });
            return;
          }
          this.form.defaultChecked=next?this.focusOn:-1;console.log(this.form)
          this.emitValues();
        },
        sameToNone:function(next){
          if(this.focusOn==-1){
            this.sameToNone = false;
            this.$message({
              message: '请先选择要操作的行',
              type: 'warning'
            });
            return;
          }
          this.form.sameToNone=next?this.focusOn:-1;
          this.emitValues();
        },
        sameToBan:function(next){
          if(this.focusOn==-1){
            this.sameToBan = false;
            this.$message({
              message: '请先选择要操作的行',
              type: 'warning'
            });
            return;
          }
          this.form.sameToBan=next?this.focusOn:-1;
          this.emitValues();
        }
      },*/
      methods:{
        setValues(name){
          if(this.focusOn==-1){
            this[name] = false;
            this.$message({
              message: '请先选择要操作的行',
              type: 'warning'
            });
            return;
          }
          this.form[name]=this[name]?this.focusOn:-1;
          this.emitValues();
        },
        addRow(){
          this.rows.push({});
        },
        selectRow(index){
          this.focusOn = index;

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