qimall/addons/CloudStock/backend/views/bonus-level/edit.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-select-cat');
ComponentHelper::loadComponentView('com-image');
$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('free-goods-choice', $diyPath);
?>

<div id="app" v-cloak>
    <el-card class="box-card" v-loading="cardLoading" shadow="never" style="border:0;min-width: 1250px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer"
                          @click="$navigate({r:'cloud-stock/level/index'})">
                        分红池等级
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{titleName}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body">
                <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="160px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="等级权重" prop="level">
                            <el-select style="width: 100%" v-model="ruleForm.level" @change="levelChangeFun" placeholder="请选择">
                                <el-option
                                        v-for="item in weights"
                                        :key="item.level"
                                        :label="item.name"
                                        :value="item.level"
                                        :disabled="item.is_can_choose == 0?true:false">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="代理等级">
                            <el-select v-model="ruleForm.cloud_stock_level" multiple placeholder="请选择代理等级">
                                <el-option
                                        v-for="item in cloud_stock_level_list"
                                        :key="item.level"
                                        :label="item.name"
                                        :value="item.level"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="等级名称" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请输入等级名称"  maxlength="10" @change="changeNameFun"></el-input>
                        </el-form-item>
                        <el-form-item label="条件升级">
                            <el-form-item>
                                <el-switch
                                        v-model="ruleForm.upgrade_type_condition"
                                        :active-value="1"
                                        :inactive-value="0"
                                        active-text="开启"
                                        inactive-text="关闭"
                                >
                                </el-switch>
                            </el-form-item>
                            <el-form-item v-if="ruleForm.upgrade_type_condition==1">
                                <el-radio-group v-model="ruleForm.condition_type">
                                    <el-radio :label="1">满足其一条件可升级</el-radio>
                                    <el-radio :label="2">满足所有条件可升级</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item>
                                <div  v-if="ruleForm.upgrade_type_condition==1">
                                    <el-form-item>
                                        <el-col style="width: 1000px;">
                                            <el-checkbox v-model="ruleForm.checked_condition_keys[0]" label="直推"></el-checkbox>
                                            <el-input-number v-model="ruleForm.checked_condition_values[0].value.direct_people"  :min="0" :max="100000" ></el-input-number>&nbsp;位&nbsp;

                                            <el-select style="width: 150px;margin-right: 5px" v-model="ruleForm.checked_condition_values[0].value.direct_level" placeholder="请选择">
                                                <el-option v-for="item in weights" :key="item.level" :label="item.name" :value="item.level" :disabled="false"></el-option>
                                            </el-select>
                                            的代理，且每位直推代理的团队产生
                                            <el-input-number v-model="ruleForm.checked_condition_values[0].value.direct_team_people"  :min="0" :max="100000" ></el-input-number>&nbsp;位&nbsp;
                                            <el-select style="width: 150px;margin-right: 5px" v-model="ruleForm.checked_condition_values[0].value.direct_team_level" placeholder="请选择">
                                                <el-option v-for="item in weights" :key="item.level" :label="item.name" :value="item.level" :disabled="false">
                                                </el-option>
                                            </el-select>的代理

                                        </el-col>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-col>
                                            <el-checkbox v-model="ruleForm.checked_condition_keys[1]" label="团队产生"></el-checkbox>
                                            <el-input-number v-model="ruleForm.checked_condition_values[1].value.team_people"  :min="0" :max="100000" ></el-input-number>&nbsp;位&nbsp;
                                            <el-select style="width: 150px;margin-right: 5px" v-model="ruleForm.checked_condition_values[1].value.team_level" placeholder="请选择">
                                                <el-option v-for="item in weights" :key="item.level" :label="item.name" :value="item.level" :disabled="false">
                                                </el-option>
                                            </el-select>的代理
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-col>
                                            <el-checkbox v-model="ruleForm.checked_condition_keys[2]" label="个人补货">
                                            </el-checkbox>
                                            <el-input-number v-model="ruleForm.checked_condition_values[2].value.self_fill_num"  :min="0" :max="100000" ></el-input-number>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-col>
                                            <el-checkbox v-model="ruleForm.checked_condition_keys[3]" label="团队补货">
                                            </el-checkbox>
                                            <el-input-number v-model="ruleForm.checked_condition_values[3].value.team_fill_num"  :min="0" :max="100000" ></el-input-number>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-col>
                                            <el-checkbox v-model="ruleForm.checked_condition_keys[4]" label="直推"></el-checkbox>
                                            <el-input-number v-model="ruleForm.checked_condition_values[4].value.direct_people"  :min="0" :max="100000" ></el-input-number>&nbsp;位&nbsp;
                                            ，分红池等级为
                                            <el-select style="width: 150px;margin-right: 5px" v-model="ruleForm.checked_condition_values[4].value.direct_level" placeholder="请选择">
                                                <el-option v-for="item in levels" :key="item.level" :label="item.name" :value="item.level" :disabled="false"></el-option>
                                            </el-select>
                                            的代理
                                        </el-col>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="计入分红池商品">
                            <free-goods-choice :multiple="true" @selected="goodsSelect" title="计入分红池池商品">
                                <el-button type="primary" size="small" plain>选择商品</el-button>
                            </free-goods-choice>
                        </el-form-item>

                        <el-form-item prop="goods_setting">
                            <template>
                                <div style="color: #ff4544;">最多可添加99个商品</div>
                                <div>
                                    <div class="outer_box" v-for="(item,key) in ruleForm.goods_setting" >
                                        <div class="goods_box">
                                            <div>
                                                <com-image mode="aspectFill" :src="item.goods.cover_pic"></com-image>
                                            </div>
                                            <div class="goods_desc">
                                                <span class="ellipsis">{{ item.goods.name }}</span>
                                                <span style="display: flex;justify-content: space-between;">
<!--                                                <span>￥{{ item.goods.price }}</span>-->
                                            </span>
                                            </div>
                                            <div>
                                                <el-button style="margin-top: 10px;" plain size="small" @click="deleteGoods(key)"><i class="el-icon-delete"></i> 删除</el-button>
                                            </div>
                                        </div>

                                        <div style="border-radius: 0 10px 10px 0; border: 1px solid #dcdfe6; padding: 0 20px; border-left: 0px;">
                                            <div style="margin-left: 10px;">
                                                是否百分比：
                                                <el-radio-group v-model="item.is_percent">
                                                    <el-radio :label="0">否</el-radio>
                                                    <el-radio :label="1">是</el-radio>
                                                </el-radio-group>
                                            </div>

                                            <div style="display: flex;align-items:center;">
                                                <div style="width: 120px;text-align: right"><span style="color: red;">*</span>分红池金额：</div>
                                                <el-input v-model="item.money" type="text" style=" width: 150px;" onkeyup="value=toNumber(value,2)">
                                                    <template v-if="item.is_percent == 0" slot="append">元</template>
                                                    <template v-if="item.is_percent == 1" slot="append">%</template>
                                                </el-input>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-form-item>
                        <el-form-item label="是否启用" prop="status">
                            <el-switch
                                    v-model="ruleForm.status"
                                    :active-value="1"
                                    :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
		<el-button class="button-item" :loading="btnLoading" type="primary" @click="saveFun"
		           size="small">保存
		</el-button>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
				titleName:'添加分红池等级',
                msg: 1,
                options: [],//会员等级列表
                enable_level_list:[], //可用等级列表
                level: 0,
                form: {
                    type: [],
                },
                checked_condition_keys: [],
                showConditionMsg: false,
                conditionMsg: '',
                weights: [],//等级权重列表
                cloud_stock_agent_level_list:[],
                ruleForm: {
					id:'',
                    level: '',//权重 1 2 3等
                    cloud_stock_level: '',//权重 1 2 3等
                    name: '',
                    status: 1,
                    condition_type: 1,//1=满足其一可升级 2=满足所有条件可升级
                    upgrade_type_condition: 0,//条件升级
                    checked_condition_keys: [false,false,false,false],
                    goods_setting:[],
					checked_condition_values:[//条件升级的数据upgradeData
						{"key":"0","value":{"direct_people":"","direct_level":""}},
						{"key":"1","value":{"team_people":"","team_level":""}},
						{"key":"2","value":{"self_fill_num":""}},
						{"key":"3","value":{"team_fill_num":""}},
                        {"key":"4","value":{"direct_people":"","direct_level":""}},
                    ],
                },
                rules: {
                    level: [
                        {required: true, message: '请选择分红池等级', trigger: 'change'},
                    ],
                    name: [
                        {required: true, message: '请输入分红池等级名称', trigger: 'change'},
                    ],
                    detail: [
                        {required: true, message: '等级说明不能为空', trigger: 'change'},
                    ],
                },
                btnLoading: false,
                cardLoading: false,
				checkList:[],
				conditionNum:'',//条件2 分红池权重指定满足的人数
				getWeightsLevel:'', //编辑的时候传进来的level
				levels:[],
				levels_temp:[],
                cloud_stock_level_list:[],
            };
        },
        mounted() {
			if (getQuery('id')) {
				this.titleName="编辑分红池等级";
				this.getWeightsLevel = getQuery('level');
			    this.loadData();//请求详情的数据
			}else{
                this.getLevelList();//获取等级列表
            }
			this.getWeights();//获取权重列表
			this.getCloudStockLevelList();//获取等级列表
        },
        methods: {
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    if (this.ruleForm.goods_setting.length >= 99) {
                        this.$message.error('指定商品不能大于99个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.goods_setting) {
                        if (this.ruleForm.goods_setting[i].goods_id == param[j].goods_id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_setting.push({
                            goods_id: param[j].goods_id,
                            goods: {
                                id: param[j].goods_id,
                                name: param[j].goods_name,
                                cover_pic: param[j].cover_pic,
                                price: param[j].price,
                            },
                            is_percent: 0,
                            money: 0,
                        });
                    }
                }
            },
            //删除商品
            deleteGoods(index) {
                this.ruleForm.goods_setting.splice(index, 1);
            },
            getWeights(){
				let that = this;
				request({
				    params: {
				        r: 'cloud-stock/bonus-level/get-can-choose-level-list',
				        level:this.getWeightsLevel
				    },
				    method: 'get',
				}).then(e => {
					if(e.data.code == 0){
						that.weights = e.data.data;
					}else{
						that.$message.error(e.data.msg);
					}
				}).catch(e => {
				    console.log(e);
				});
			},
            close(e) {
                this.visible = false;
            },
			levelChangeFun(e){
                this.changeLevelS(e)
			},
            changeNameFun(e){
                if (getQuery('id')) {
                    return false;
                }
                let self = this;
                var level = self.ruleForm.level;
                if(level){
                    self.levels.push({"level":level,"name":e})
                }
            },
            changeLevelS(level){
                if (getQuery('id')) {
                    return false;
                }
                let self = this
                let newLevels = [];
                this.levels_temp.forEach(function (item,index){
                    if(item.level<=level){
                        newLevels.push(item)
                    }
                })
                self.levels = newLevels;
            },
			saveFun(){

				if(this.ruleForm.level == ''){
					return this.$message.error('请选择分红池等级权重');
				}
				if(this.ruleForm.name == ''){
					return this.$message.error('请输入分红池等级名称');
				}
				if(this.ruleForm.upgrade_type_condition == 1){//勾选了条件升级
					if(!this.ruleForm.checked_condition_keys.length){//为空数组 没有勾选任何一个条件
						return this.$message.error('请勾选升级条件');
					}
					if(this.ruleForm.condition_type == 1 && this.ruleForm.checked_condition_keys.length == 0){//选择了满足其一条件
						return this.$message.error('请填写其中一个升级条件');
					}
				}
				let submitObj={};//提交给后台的对象
				submitObj.level = this.ruleForm.level;
				submitObj.cloud_stock_level = this.ruleForm.cloud_stock_level;
				submitObj.name = this.ruleForm.name;
				submitObj.checked_condition_keys = JSON.stringify(this.ruleForm.checked_condition_keys);
				submitObj.condition_type = this.ruleForm.condition_type;
				submitObj.checked_condition_values =JSON.stringify(this.ruleForm.checked_condition_values);
				submitObj.upgrade_type_condition = this.ruleForm.upgrade_type_condition;
				submitObj.detail = this.ruleForm.detail;
				submitObj.status = this.ruleForm.status;
				submitObj.goods_setting = this.ruleForm.goods_setting;
                if(getQuery('id')){
					submitObj.id = this.ruleForm.id
				}
				this.btnLoading = true;
				request({
				    params: {
				        r: 'cloud-stock/bonus-level/edit'
				    },
				    method: 'post',
				    data:submitObj
				}).then(e => {
				    this.btnLoading = false;
				    if (e.data.code == 0) {
						 this.$message.success('保存成功');
				       navigateTo({
				            r: 'cloud-stock/bonus-level/index'
				        })
				    } else {
				        this.$message.error(e.data.msg);
				    }
				}).catch(e => {
				    this.$message.error(e.data.msg);
				    this.btnLoading = false;
				});

			},
            loadData() {//请求详情的数据
                this.cardLoading = true;
                request({
                    params: {
                        r: 'cloud-stock/bonus-level/edit',//'plugin/stock/mall/level/edit',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    this.cardLoading = false;
                    if (e.data.code == 0) {
						let data = e.data.data;
						this.ruleForm.id = data.id;
						this.ruleForm.level = data.level;
						this.ruleForm.cloud_stock_level = data.cloud_stock_level;
						this.ruleForm.name = data.name;
						this.ruleForm.status = data.status;
                        this.ruleForm.goods_setting = data.goods_setting;
                        this.ruleForm.checked_condition_keys = data.checked_condition_keys;
                        this.ruleForm.checked_condition_values = data.checked_condition_values;
						this.ruleForm.upgrade_type_condition = data.upgrade_type_condition;
						this.ruleForm.condition_type = data.condition_type;
						this.levels = data.levels;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },

			getLevelList(){//获取分红池等级下级等级列表
				request({
				    params: {
				        r: 'cloud-stock/bonus-level/get-level-list',
                        level:this.ruleForm.level,
				    },
				    method: 'get',
				}).then(e => {
					if(e.data.code == 0){
						this.levels = e.data.data;
						this.levels_temp = e.data.data;
					}else{
						this.$message.error(e.data.msg);
					}
				}).catch(e => {
				    console.log(e);
				});
			},
			getCloudStockLevelList(){
				request({
				    params: {
				        r: 'cloud-stock/bonus-level/get-cloud-stock-level-list',
				    },
				    method: 'get',
				}).then(e => {
					if(e.data.code == 0){
						this.cloud_stock_level_list = e.data.data.cloud_stock_level_list;
					}else{
						this.$message.error(e.data.msg);
					}
				}).catch(e => {
				    console.log(e);
				});
			},
        }
    });
</script>

<style>
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 20%;
        min-width: 900px;
    }

    .form-body .el-form-item {
        padding-right: 25%;
        min-width: 850px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

    .button-item {
        padding: 9px 25px;
    }

    .check-group {
        font-size: 14px !important;
    }

    .check-group .el-col {
        display: flex;
    }

    .check-group .el-input {
        margin: 0 5px;
    }

    .check-group .el-col .el-checkbox {
        display: flex;
        align-items: center;
    }

    .check-group .el-col .el-input {
        width: 100px;
    }

    .check-group .el-col .el-input .el-input__inner {
        height: 30px;
        width: 100px;
    }

    .el-checkbox-group .el-col {
        margin-bottom: 10px;
    }
    .outer_box {
        margin: 13px 0px;
        display: flex;
    }
    .goods_box {
        width: 80%;
        border: 1px solid #dcdfe6;
        border-radius: 10px 0 0 10px;
        padding: 10px;
        display: flex;
    }

    .ellipsis {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .goods_desc {
        line-height: 22px;
        width: 50%;
        margin-left: 10px;
    }
    .goods_desc span {
        display: inline-block;
    }
</style>