qimall/addons/CloudStockTwo/backend/views/components/agent-setting-add.php

<style>
    .agent-setting-add {
        border: 1px solid #EBEEF5;
        padding: 10px;
    }

    .agent-setting-add .bg {
        height: 44px;
        padding: 0 10px;
        background: #f8f8f8;
    }

    .agent-setting-add .del-img {
        height: 20px;
        width: 20px;
        cursor: pointer;
    }

    .agent-setting-add .img-box {
        position: relative;
        height: 100px;
        width: 100px;
        margin-top: 8px;
        border: 1px solid #EBEEF5;
    }

    .agent-setting-add .attr-jt {
        background: #ffffff;
        width: 6px;
        height: 6px;
        border-top: 1px solid rgb(235, 238, 245);
        border-right: 1px solid #EBEEF5;
        transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        position: absolute;
        top: -5px;
    }

    .agent-setting-add .close {
        position: absolute;
        top: -4px;
        right: -4px;
        font-size: 16px;
        cursor: pointer;
    }

    .agent-setting-add .attr-list {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        cursor: move;
    }
    .label {
    	text-align: right;
    }
</style>
<template id="agent-setting-add">
    <div class="agent-setting-add">
        <!-- <el-form ref="ruleForm" label-width="180px" size="small"> -->
            <div v-for="(group, i) in value" :key="i" style="margin-bottom: 16px">
                <!-- <el-form-item label="" prop="is_filter" label-width="0"> -->
                    <div class="bg" style="display:flex;align-items: center;">
                        <span v-if="type == 1" class="label" style="margin-right:10px;">{{ '第' + group.level + '代:' }}</span>
                        <span class="label">{{ text1 }}</span>
                        <!-- <el-input type="text" placeholder="请输入金额" v-model.trim="group.value" size="mini" style="width:150px;margin:0 16px">
                            <template slot="append">{{ append1 }}</template>
                        </el-input> -->
                        <el-select size="small" v-model="group.value" class="select" style="width:150px;margin:0 16px" placeholder="请选择">
                            <el-option :key="item.level" :label="item.name" :value="item.level"
                                   v-for="item in level_list"></el-option>
                        </el-select>
                        <el-radio-group v-model="group.type" style="margin:0 16px">
                            <el-radio :label="0">拿差价</el-radio>
                            <el-radio :label="1">奖励指定金额</el-radio>
                        </el-radio-group>
                        <!-- <span class="label">{{ text2 }}</span> -->
                        <el-input type="text" placeholder="请输入金额" v-model.trim="group.value1" size="mini" style="width:150px;margin:0 16px">
                            <template slot="append">{{ append2 }}</template>
                        </el-input>
                        <el-button @click="deleteAttrGroup(i)" class="bg" style="border: none;">删除</el-button>
                    </div>
                <!-- </el-form-item> -->
            </div>
            <div flex="dir:left cross:center" class="bg" v-if="isAddAttrGroups">
                <el-button @click="addAttrGroup()">添加</el-button>
                <span style="padding-left: 14px;color:#c9c9c9">注：如果需要添加新创建的代理等级，需要先保存该等级才可以进行设置</span>
            </div>
        <!-- </el-form> -->
    </div>
</template>
<script>
    Vue.component('agent-setting-add', {
        template: '#agent-setting-add',
        props: {
            value: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            level_list: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            type: {
                type: Number,
                default:1,
            },
            text1:{
                type:String,
                default:"充值资金金额达到",
            },
            text2:{
                type:String,
                default:"每增加一个，增加底薪",
            },
            append1:{
                type:String,
                default:"元",
            },
            append2:{
                type:String,
                default:"元",
            },
        },
        data() {
            return {
                attrPic: true, //表单图片
                attrPicStatus: -1, //move
                attrGroupMaxCount: 10, //可添加最大数量
                isAddAttrGroups: true, //添加按钮是否显示
                edit: {
                    visible: false,
                    level: '',
                    btnLoading: false,
                    list: [],
                    loading: false,
                }
            };
        },
        watch: {
            'attrPic'(newVal, oldVal) {
                if (!newVal) {
                    this.value[0]['attr_list'].forEach((v) => {
                        v.pic_url = '';
                    })
                }
            },
        },
        mounted(){
            // this.getLevel();
        },
        methods: {
            // makeAttrGroup() {
            //     this.$emit('select', this.value);
            // },


            // 添加表单组
            addAttrGroup() {

            	var obj = {
                    type:0,
                    value:'',
                    value1:'',
                }
                if(this.type == 1){
                    obj.level = this.value.length + 2;
                }
                this.value.push(obj);
                console.log(obj);
                // 限制添加的规格组
                if (this.value.length === this.attrGroupMaxCount) {
                    this.isAddAttrGroups = false;
                }
            },

            // 删除表单组
            deleteAttrGroup(index) {
                this.value.splice(index, 1);
                if (this.value.length < this.attrGroupMaxCount) {
                    this.isAddAttrGroups = true;
                }
                // this.makeAttrGroup();
            },

        }
    });
</script>