qimall/addons/WriteOff/backend/views/level/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-select-cat');
?>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="cardLoading" shadow="never" style="border:0;min-width: 1400px;" 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:'write-off/level/index'})">
                        核销员等级
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>编辑等级</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="等级权重" prop="level">
                            <el-select style="width: 100%" v-model="ruleForm.level" placeholder="请选择">
                                <el-option v-for="item in weights" :key="item.level" :label="item.name" :value="item.level" :disabled="item.disabled && item.level!=origin_level">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="等级名称" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请输入等级名称"></el-input>
                        </el-form-item>

                        <el-form-item label="核销阶梯式奖励设置" prop="is_enable_write_off_reward">
                            <el-switch v-model="ruleForm.is_enable_write_off_reward" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        <template v-if="ruleForm.is_enable_write_off_reward">
                        	<el-form-item label="奖励比例" prop="status">
                                <el-form-item v-for="(item,index) in ruleForm.write_off_reward_proportion" :key='index' class="coupon-item" style="display: flex;align-items: center;">
                                	<span>{{'第'+(index+1)+'次'}}</span>
                                    <el-input type="number" :min="0" :max="100" class="member-money" v-model="item.money" placeholder="" style="width: 300px;margin-left: 10px;">
                                        <template slot="append">元/次</template>
                                    </el-input>
                                    <el-button v-if="ruleForm.write_off_reward_proportion.length>1" size="mini" type="danger"
                                               icon="el-icon-close" circle
                                               @click="delWriteOffItem(index)"></el-button>
                                </el-form-item>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-if="ruleForm.write_off_reward_proportion && ruleForm.write_off_reward_proportion.length<36" style="margin-bottom: 10px;" type="primary" size="small" @click="addWriteOffItem">添加奖励区间
                                </el-button>
                            </el-form-item>
                        </template>
                        <el-form-item label="核销限制" prop="is_enable_promote_limit">
                            <el-switch v-model="ruleForm.is_enable_promote_limit" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>

                        <el-form-item label="每天核销次数" prop="promote_time" v-if="ruleForm.is_enable_promote_limit == 1">
                            <el-input v-model.number="ruleForm.promote_time" type="number">
                                <template slot="append">次</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="促销奖励设置" prop="is_enable_promote_reward">
                            <el-switch v-model="ruleForm.is_enable_promote_reward" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>

                        <el-form-item label="促销奖励比例" prop="extra_prize" v-if="ruleForm.is_enable_promote_reward == 1">
                            <el-input v-model.number="ruleForm.promote_reward_prize" type="number">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="促销业绩阶梯奖励设置" prop="is_enable_promote_reward_achievement">
                            <el-switch v-model="ruleForm.is_enable_promote_reward_achievement" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        <template v-if="ruleForm.is_enable_promote_reward_achievement==1">
                        	<el-form-item label="奖励比例" prop="status">
                                <el-form-item v-for="(item,index) in ruleForm.promote_achievement_reward_proportion" :key='index' class="coupon-item" style="display: flex;align-items: center;">
                                	<span>业绩达到</span>
                                    <el-input type="number" :min="0" class="member-money" v-model="item.money_start" placeholder="" style="width: 200px;">
                                        <template slot="append">元</template>
                                    </el-input>
                                    <span>~</span>
                                    <el-input type="number" :min="0" class="member-money" v-model="item.money_end" placeholder="" style="width: 200px;">
                                        <template slot="append">元</template>
                                    </el-input>
                                    <span>奖励</span>
                                    <el-input type="number" :min="0" :max="100" class="member-money" v-model="item.proportion" placeholder="" style="width: 200px;">
                                        <template slot="append">%</template>
                                    </el-input>
                                    <el-button v-if="ruleForm.promote_achievement_reward_proportion.length>1" size="mini" type="danger"
                                               icon="el-icon-close" circle
                                               @click="delItem(index)"></el-button>
                                </el-form-item>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-if="ruleForm.promote_achievement_reward_proportion && ruleForm.promote_achievement_reward_proportion.length<36" style="margin-bottom: 10px;" type="primary" size="small" @click="addCouponItem">添加奖励区间
                                </el-button>
                            </el-form-item>
                        </template>
                        <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="submitForm('ruleForm')" size="small">保存
        </el-button>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                origin_level: 0,
                msg: 1,
                options: [], //会员等级列表
                level: 0,
                form: {
                    type: [],
                },
                showConditionMsg: false,
                conditionMsg: '',
                weights: [],
                levels: [],
                ruleForm: {
                    id: '',
                    level: '', //当前选中等级
                    name: '',
                    status: 1,
                    is_enable_write_off_reward: 0,
                    write_off_reward_proportion : [
                        {
                            money : 0,
                        },
                    ],
                    is_enable_promote_reward: 0,
                    promote_reward_prize:0,
                    is_enable_promote_reward_achievement:0,
                    promote_achievement_reward_proportion : [
                        {
                            money_start : 0,
                            money_end : 0,
                            proportion : 0,
                        },
                    ],
                    is_enable_promote_limit:0,
                    promote_time:0,
                },
                rules: {
                    level: [{
                        required: true,
                        message: '请选择等级',
                        trigger: 'change'
                    }, ],
                    name: [{
                        required: true,
                        message: '请输入等级名称',
                        trigger: 'change'
                    }, ],
                },
                btnLoading: false,
                cardLoading: false,
                formLabelWidth: '150px',
            };
        },
        mounted() {
            this.loadData();
        },
        methods: {
            // 2.1 提交表单编辑
            submitForm(formName) {
                let self = this;
                self.showConditionMsg = false;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'write-off/level/edit'
                            },
                            method: 'post',
                            data: {
                                form: self.ruleForm,
                            }
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'write-off/level/index'
                                })
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 获取显示的值
            loadData() {
                this.cardLoading = true;
                request({
                    params: {
                        r: 'write-off/level/edit',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    this.cardLoading = false;
                    if (e.data.code == 0) {
                        if (e.data.data.detail) {
                            let detail = e.data.data.detail
                            Object.assign(this.ruleForm, detail)
                            this.origin_level = this.ruleForm.level;
                        }
                        this.weights = e.data.data.weights;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            // 0.1 点击添加奖励比例
            addWriteOffItem(){
                let flag = true;
                // this.ruleForm.write_off_reward_proportion.forEach((item, index)=>{
                //     if(index>0 && this.ruleForm.write_off_reward_proportion[index-1].money*1>=item.money*1){
                //         this.$message.error('团队业绩金额设置只能递增');
                //         flag = false
                //         return
                //     }
                // })
                if(!flag) return
                let write_off_reward_proportion = JSON.parse(JSON.stringify(this.ruleForm.write_off_reward_proportion));
                let item = {money : 0};
                write_off_reward_proportion.push(item);
                this.ruleForm.write_off_reward_proportion = write_off_reward_proportion;
            },
            // 点击删除某一item
            delWriteOffItem(index){
                let write_off_reward_proportion = JSON.parse(JSON.stringify(this.ruleForm.write_off_reward_proportion));
                write_off_reward_proportion.splice(index, 1);
                this.ruleForm.write_off_reward_proportion = write_off_reward_proportion;
            },
            // 0.1 点击添加奖励比例
            addCouponItem(){
                let flag = true;
                this.ruleForm.promote_achievement_reward_proportion.forEach((item, index)=>{
                    if(index>0 && this.ruleForm.promote_achievement_reward_proportion[index-1].money_start*1>=item.money_start*1){
                        this.$message.error('团队业绩金额设置只能递增');
                        flag = false
                        return
                    }
                    if(index>0 && this.ruleForm.promote_achievement_reward_proportion[index-1].money_end*1>=item.money_end*1){
                        this.$message.error('团队业绩奖励比例设置只能递增');
                        flag = false
                        return
                    }
                })
                if(!flag) return
                let promote_achievement_reward_proportion = JSON.parse(JSON.stringify(this.ruleForm.promote_achievement_reward_proportion));
                let item = {money_start : 0,money_end : 0,proportion : 0,};
                promote_achievement_reward_proportion.push(item);
                this.ruleForm.promote_achievement_reward_proportion = promote_achievement_reward_proportion;
            },
            // 点击删除某一item
            delItem(index){
                let promote_achievement_reward_proportion = JSON.parse(JSON.stringify(this.ruleForm.promote_achievement_reward_proportion));
                promote_achievement_reward_proportion.splice(index, 1);
                this.ruleForm.promote_achievement_reward_proportion = promote_achievement_reward_proportion;
            },
        }
    });
</script>

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

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

    .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;
    }


    .el-checkbox-group .el-col {
        margin-bottom: 10px;
    }

    .condition_common {
        display: flex;
        align-items: center;
    }

    .condition_common_five {
        display: flex;
    }
</style>