qimall/addons/DoubleCopy/backend/views/pool/level-edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
?>

<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:'double-copy/pool/level'})">等级</span>
                </el-breadcrumb-item>

                <el-breadcrumb-item>编辑等级</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body" style="padding: 20px 45% 0 10px">
            <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 v-model="ruleForm.level" placeholder="请选择" style=" width: 260px;" @change="loadLevelList">
                                <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="请输入等级名称" type="text" maxlength="20" show-word-limit style=" width: 260px;"></el-input>
                        </el-form-item>

                        <el-form-item label="所需一二市场总业绩">
                            <el-input v-model.number="ruleForm.achievement" type="text" style=" width: 260px;">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="单个市场业绩">
                            <el-input v-model.number="ruleForm.single_market" type="text" style=" width: 260px;">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="计入分红池商品">
                            <com-dialog-select :multiple="true" @selected="goodsSelect" title="计入分红池商品">
                                <el-button type="primary" size="small" plain>选择商品</el-button>
                            </com-dialog-select>
                        </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: 80px;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="状态">
                            <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                        </el-form-item>
                        <el-form-item label="额外分红池">
                            <label slot="label">额外分红池
                                <el-tooltip class="item" effect="dark" content="开启当前开关并选择其中等级可获得被选择等级的分红池奖励" placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                            <el-switch v-model="ruleForm.is_enable_extra_pool" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
                            <el-checkbox-group v-if="ruleForm.is_enable_extra_pool == 1"
                                    v-model="ruleForm.extra_pool_level">
                                <el-checkbox v-for="(item, index) in levelList" :label="item.level" :key="item.level">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </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,
                showConditionMsg: false,
                conditionMsg: '',
                //权重列表
                weights: [],
                ruleForm: {
                    level: '',	//当前选中等级
                    name: '',
                    achievement: 0,
                    single_market: 0,
                    status: 1,
                    goods_setting: [],
                    is_enable_extra_pool: '',
                    extra_pool_level: []
                },
                rules: {
                    level: [
                        {required: true, message: '请选择等级', trigger: 'change'},
                    ],
                    name: [
                        {required: true, message: '请输入等级名称', trigger: 'change'},
                    ],
                },
                btnLoading: false,
                cardLoading: false,
                levelList: []
            };
        },
        mounted() {
            this.loadData();
        },
        methods: {
            // 获取显示的值
            loadData() {
                this.cardLoading = true;
                request({
                    params: {
                        r: 'double-copy/pool/level-edit',
                        id: getQuery('id')
                    },
                }).then(e => {
                    this.cardLoading = false;
                    if (e.data.code == 0) {
                        if (e.data.data.detail) {
                            Object.assign(this.ruleForm, e.data.data.detail)
                            this.origin_level = this.ruleForm.level;
                            this.loadLevelList(this.ruleForm.level)
                        }
                        this.weights = e.data.data.weights;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            loadLevelList(level) {
                request({
                    params: {
                        r: 'double-copy/pool/level-list',
                        level: level
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.levelList = e.data.data
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            //提交表单
            submitForm(formName) {
                let self = this;
                if (isEmpty(self.ruleForm.goods_setting)) {
                    self.$message.error('请添加计入分红池商品');
                    return;
                }

                self.showConditionMsg = false;
                self.ruleForm.goods_setting.forEach(function (item, index) {
                    if (item.money <= 0) {
                        self.showConditionMsg = true;
                        self.conditionMsg = '商品：“'+item.goods.name+'” 请输入计入分红池金额';
                        return;
                    }
                })
                if (self.showConditionMsg) {
                    this.$message.error(self.conditionMsg);
                    return
                }

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'double-copy/pool/level-edit'
                            },
                            method: 'post',
                            data: {
                                form: self.ruleForm,
                            }
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                navigateTo({
                                    r: 'double-copy/pool/level'
                                })
                            } 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;
                    }
                });
            },
            //选择商品
            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].id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_setting.push({
                            goods_id: param[j].id,
                            goods: {
                                id: param[j].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);
            },
        }
    });
</script>
<style>
    .outer_box {
        margin: 13px 0px;
        display: flex;
    }
    .goods_box {
        width: 50%;
        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>