platformFront/src/components/knowledgeExtra/SubRulesGroup.vue

<template>
    <div class="sub-groups" v-if="data">
        <SubConditions v-for="(rules,i) in data"
                       ref="group"
                       :groupData="rules"
                       :isLast="data.length===1"
                       :ind="i"
                       :showAdd="data.length<maxNum"
                       :baseTypes="baseTypes"
                       :firstPlace="firstPlace"
                       :disabled="i===0&&disable"
                       @changeVal="handleInput"
                       @addRule="addRule"
                       @delRule="delRule"></SubConditions>
        <div class="group-oper">
            <el-button size="small" @click="addGroup">+新增分组</el-button>
            <el-button :disabled="isLast" size="small" type="danger" plain @click="delGroup">-删除分组</el-button>
        </div>
    </div>
</template>
<script>
    import SubConditions from './SubConditions.vue';
    export default {
        name:'SubRulesGroup',
        props:['data','inx','isLast','baseTypes','maxNum','firstPlace'],
        data(){
            return {
            }
        },
        computed:{
          'disable':function(){
              return Object.keys(this.firstPlace||{}).length>0;
          }
        },
        methods:{
            handleInput(val,i){
                this.data[i]=val;
            },
            addRule(){
                let temp={
                    subDescription:'',
                    subConceptId:'',
                    subType:'',
                    subLenName:'',
                    subLenCode:'',
                    subLibName:'',
                    subMaxOperator:'',
                    subMaxUnit:'',
                    subMaxValue:'',
                    subMinOperator:'',
                    subMinUnit:'',
                    subMinValue:'',
                    subEqValue:'',
                    dataType:'',
                };
                this.data.push(temp);
            },
            delRule(i){
                if(i===0&&this.data.length===1){
                    this.$emit("delGroup",this.inx);
                    return;
                }
                this.data.splice(i,1);
            },
            addGroup(){
                this.$emit("addGroup");
            },
            delGroup(){
               this.$emit("delGroup",this.inx);
            },
            warning(msg,type){
                this.$message({
                    showClose: true,
                    message:msg,
                    type:type||'warning'
                })
            },
            showConfirmDialog(msg,resolve){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    resolve();
                }).catch(() => {
                    this.warning("删除失败，请重试！")
                });
            },
        },
        components:{
            SubConditions
        }
    }
</script>
<style lang="less" scoped>
    .sub-groups{
        background: #F5F5F5;
        padding: 20px;
    }
    .group-oper{
        text-align: center;
        padding: 11px 0;
        border-top: 4px solid #F5F5F5;
        background: #fff;
    }
    .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
        color: #fbc4c4;
        border-color:#fbc4c4;
    }
    .el-button--danger.is-plain{
        background: none;
        &.is-disabled{
            color: #f9a7a7;
            background-color: #fef0f0;
            border-color: #fde2e2;
        }
    }
</style>