platformFront/src/components/knowledgeExtra/DiagBaseGroup.vue

<template>
    <div class="sub-groups">
        <div class="group-items">
        <!--<el-form ref="form" class="add-new-form" label-width="140px" :model="data" :rules="rules">-->
            <DiagBaseItem v-for="(rules,i) in data.klDiagnoseDetail"
                           ref="group"
                           :groupData="rules"
                           :ind="i"
                           :inx="inx"
                           :parInx="parInx"
                           :hideDel="isLast&&len===1"
                           :baseTypes="diagTypeList"
                           @changeVal="handleInput"
                           @delRule="delRule"></DiagBaseItem>
            <div class="inner-oper">
                <span>新增基础依据：</span>
                <span class="add-btn" @click="addRule"><img src="../../images/add.png" alt="新增基础依据"></span>
            </div>
            <el-form-item label="符合条件的数量：" :prop="'klDiagnoseTypeVO.'+parInx+'.groupVO.'+inx+'.fitNo'" class="diag-num">
                <el-select v-model="data.fitNo"
                           placeholder="请选择"
                           size="small">
                    <el-option
                            v-for="item in numArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </div>
        <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>
        <!--</el-form>-->
    </div>
</template>
<script>
    import DiagBaseItem from './DiagBaseItem.vue';
    import util from '../../api/utils.js'
    export default {
        name:'DiagBaseGroup',
        props:['data','inx','isLast','diagTypeList','parInx'],
        data(){
            return {
            }
        },
        computed:{
            len:function(){
                return util.delNullObj(this.data.klDiagnoseDetail).length;
            },
            numArr:function(){
                let arr=[];
                for(let i=0;i<this.len;i++){
                    arr.push({id:i+1,name:i+1});
                }
                return arr;
            },
        },
        methods:{
            handleInput(val,i){
                if(val){
                    this.data[i]=val;
                }
            },
            setRules(){
                this.$emit('setRules');
            },
            addRule(){
                let temp={
                    "basConceptId": '',
                    "basDescription": "",
                    "basLename": "",
                    "basLibName": "",
                    "basLibType": null,
                    "basType": '',
                    "eqOperator": "",
                    "eqUnit": "",
                    "eqValue": "",
                    "maxOperator": "",
                    "maxUnit": "",
                    "maxVal": "",
                    "minOperator": "",
                    "minUnit": "",
                    "minVal": "",
                    "dataType":"",
                };
                this.data.klDiagnoseDetail.push(temp);
                this.$emit("setRules");
            },
            delRule(i){
                if(this.len===1){
                    this.$emit("delGroup",this.inx);
                    this.$emit("setRules");
                    return;
                }
                this.data.klDiagnoseDetail.splice(i,1,null);
                this.$emit("setRules");
                //符合条件数量列表同步变化
                //if(this.numArr.length){
                this.data.fitNo='';
                //}
            },
            addGroup(){
                this.$emit("addGroup",this.inx);
            },
            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:{
            DiagBaseItem
        }
    }
</script>
<style lang="less" scoped>
    .sub-groups{
    }
    .group-items{
        padding:10px 20px;
        margin: 10px 20px;
        background: #E3EAF4;
        border:1px #ccc dashed;
    }
    .diag-num{
        background: #fff;
        padding: 10px 0;
        /*border-bottom: 1px solid #E6E6E6;*/
    }
    .inner-oper{
        background: #fff;
        padding: 10px 0 10px 21px;
        .add-btn {
            cursor: pointer;
            img {
                vertical-align: middle;
            }
        }
    }
    .group-oper{
        /*text-align: center;*/
        padding: 8px 0 8px 205px;;
        border-top: 4px solid #F5F5F5;
        background: #fff;
        margin: 0 20px;
        .el-button{
            margin-right: 60px;
        }
    }
    .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>