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

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-select-cat');
ComponentHelper::loadComponentView('com-dialog-select');
?>
<div id="app" v-cloak>
    <el-card v-loading="cardLoading" style="border:0; min-width: 800px;" shadow="never" 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:'operation-center/level/index'})">
                        等级列表
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ getTitle() }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form :model="ruleForm" ref="elForm" label-width="150px" style="position: relative" size="small" :rules="rules">
            <el-row>
                <el-col :span="24">
                    <div class="form-body">
                        <el-col :span="24">
                            <!-- 等级名称 -->
                            <el-form-item label="等级名称" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入等级名称"></el-input>
                            </el-form-item>

                            <!-- 权重 -->
                            <el-form-item label="等级权重" prop="level">
                                <el-select style="width: 100%" v-model="ruleForm.level" placeholder="请选择" :disabled="levelDisabled()">
                                    <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="commission1_type">
                                <el-radio-group v-model="ruleForm.commission1_type">
                                    <el-radio :label="item.type" v-for="item in commissionType">
                                        {{ item.name }}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <!-- 直推佣金数量 -->
                            <el-form-item label="直推佣金数量" prop="commission1_value">
                                <el-input v-model="ruleForm.commission1_value" placeholder="请输入一级佣金数量">
                                    <template slot="append" v-if="ruleForm.commission1_type == 1">%</template>
                                    <template slot="append" v-if="ruleForm.commission1_type == 2">元</template>
                                </el-input>
                            </el-form-item>

                            <!-- 间推佣金类型 -->
                            <el-form-item label="间推佣金类型" prop="commission2_type">
                                <el-radio-group v-model="ruleForm.commission2_type">
                                    <el-radio :label="item.type" v-for="item in commissionType">
                                        {{ item.name }}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <!-- 间推佣金数量 -->
                            <el-form-item label="间推佣金数量" prop="commission2_value">
                                <el-input v-model="ruleForm.commission2_value" placeholder="请输入二级佣金数量">
                                    <template slot="append" v-if="ruleForm.commission2_type == 1">%</template>
                                    <template slot="append" v-if="ruleForm.commission2_type == 2">元</template>
                                </el-input>
                            </el-form-item>

                            <!-- 是否启用自动升级 -->
                            <template v-if="ruleForm.level > 1">
                                <el-form-item label="是否启用自动升级" prop="is_auto_upgrade">
                                    <el-switch v-model="ruleForm.is_auto_upgrade" :active-value="1" :inactive-value="0">
                                    </el-switch>
                                    <div class="tips-text" style="line-height: 24px;">
                                        自动升级仅对于拥有等级的才能进行升级
                                    </div>
                                </el-form-item>

                                <!-- tpl -->
                                <template v-if="ruleForm.is_auto_upgrade == 1">
                                    <el-form-item label="购买商品升级" prop="upgrade_type_goods">
                                        <el-switch v-model="ruleForm.upgrade_type_goods" :active-value="1" :inactive-value="0">
                                        </el-switch>
                                    </el-form-item>
                                    <el-form-item label="" prop="buy_goods_type">
                                        <el-radio-group v-model="ruleForm.buy_goods_type">
                                            <el-radio :label="0">
                                                订单完成
                                            </el-radio>
                                            <el-radio :label="1">
                                                支付完成
                                            </el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="" prop="goods_type">
                                        <el-radio-group v-model="ruleForm.goods_type">
                                            <el-radio :label="1">
                                                任意商品
                                            </el-radio>
                                            <el-radio :label="2">
                                                指定商品
                                            </el-radio>
                                        </el-radio-group>
                                    </el-form-item>

                                    <el-form-item label="" v-if="ruleForm.goods_type == 2">
                                        <com-dialog-select :multiple="true" title="商品选择" @selected="goodsSelect">
                                            <el-button size="small">添加商品</el-button>
                                        </com-dialog-select>
                                        <template v-if="ruleForm.goods_list.length > 0">
                                            <div style="color: #ff4544;">最多可添加20个商品</div>
                                            <div style="max-height: 300px;overflow-y: auto">
                                                <el-table :data="ruleForm.goods_list" :show-header="false" border>
                                                    <el-table-column label="">
                                                        <template slot-scope="scope">
                                                            <div flex>
                                                                <div style="padding-right: 10px;flex-grow: 0">
                                                                    <img :src="scope.row.cover_pic" style="width: 50px; height: 50px; display: block;">
                                                                </div>
                                                                <div style="flex-grow: 1;">
                                                                    <com-ellipsis :line="2">{{ scope.row.name }}</com-ellipsis>
                                                                </div>
                                                                <div style="flex-grow: 0;">
                                                                    <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                                            <img src="resources/img/mall/del.png" alt="">
                                                                        </el-tooltip>
                                                                    </el-button>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </template>
                                    </el-form-item>
                                </template>
                            </template>

                            <!-- 描述 -->
                            <el-form-item label="等级描述" prop="explain">
                                <el-input v-model="ruleForm.explain" type="textarea"></el-input>
                            </el-form-item>

                            <!-- 启用 -->
                            <el-form-item label="是否启用" prop="status">
                                <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" onInput="value=toNumber(value,2)">
                                </el-switch>
                            </el-form-item>
                        </el-col>

                        <div></div>
                        <el-col :span="24">
                            <el-form-item size="large">
                                <el-button type="primary" size="small" :loading="submitLoading" @click="submitForm">提交</el-button>
                                <!-- <el-button size="small" @click="resetForm">重置</el-button> -->
                            </el-form-item>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: 0,
                loading: false,
                submitLoading: false,
                cardLoading: false,
                commissionType: [{
                        type: 1,
                        name: '百分比',
                    },
                    {
                        type: 2,
                        name: '固定值',
                    },
                ],
                weights: [],
                ruleForm: {
                    level: '', // 当前选中等级
                    name: '',
                    commission1_type: 1,
                    commission1_value: '',
                    commission2_type: 1,
                    commission2_value: '',
                    status: 1,
                    condition_type: 1,
                    buy_goods_type: 0,
                    is_auto_upgrade: 0,
                    goods_type: 1,
                    upgrade_type_condition: 0,
                    upgrade_type_goods: 0,
                    indicators_num: 0,
                    explain: '',
                    goods_ids: [],
                    checked_condition_keys: [], // 对应条件的key
                    goods_list: [],
                },
                rules: {
                    name: [{
                        required: true,
                        message: '等级名称不能为空',
                    }],
                    status: [{
                        required: true,
                        message: '状态不能为空',
                    }],
                    level: [{
                        required: true,
                        message: '权重不能为空',
                    }],
                    commission1_value: [{
                        required: true,
                        message: '佣金不能为空',
                    }],
                    commission2_value: [{
                        required: true,
                        message: '佣金不能为空',
                    }],
                },
                goodsCatsDialogVisible: false,
                currentGoodsCats: [],
                formLabelWidth: '150px',
            }
        },
        computed: {},
        watch: {},
        created() {
            getQuery('id') && (this.id = getQuery('id'))
            this.getLevelData()
        },
        mounted() {},
        methods: {
            submitForm() {
                let self = this;
                self.showConditionMsg = false;
                if (self.ruleForm.upgrade_type_goods == 1) {
                    if (self.ruleForm.goods_type == 2 && self.ruleForm.goods_list.length == 0) { //选中的checkBox
                        self.$message.error('请选择升级商品');
                        return;
                    }
                }
                // if (self.ruleForm.upgrade_type_condition == 1 && self.ruleForm.is_auto_upgrade == 1) { //选中升级条件
                //     if (self.ruleForm.checked_condition_keys.length == 0) { //选中的checkBox
                //         self.$message.error('请完善升级条件');
                //         return;
                //     }
                //     let checked_condition_values = self.ruleForm.checked_condition_values;
                //     self.ruleForm.checked_condition_keys.forEach(function(item, index) {
                //         for (i in self.ruleForm.checked_condition_values[index].value) {
                //             if (!self.ruleForm.checked_condition_values[index].value[i]) {
                //                 self.conditionMsg = '请完善条件：' + (parseInt(index) + 1);
                //                 return false;
                //             }
                //         }
                //     })
                //     if (self.showConditionMsg) {
                //         this.$message.error(self.conditionMsg);
                //         return
                //     }
                //     if (this.ruleForm.checked_condition_keys.length > 0) {
                //         if (this.ruleForm.condition_type == 0) {
                //             this.$message.error('请选择条件升级的方式升级类型');
                //             return;
                //         }
                //     }
                // }
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        let params = {
                            r: 'operation-center/level/edit',
                        }
                        this.id && Object.assign(params, {
                            id: this.id
                        })

                        request({
                            params: params,
                            method: 'post',
                            data: this.ruleForm,
                        }).then(e => {
                            this.submitLoading = false
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg)
                                setTimeout(() => {
                                    navigateTo({
                                        r: 'operation-center/level/index',
                                    });
                                }, 1500)
                            } else {
                                this.$message.error(e.data.msg)
                            }
                        })
                    }
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
            getLevelData() {
                this.cardLoading = true
                request({
                    params: {
                        r: 'operation-center/level/edit',
                        id: this.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)
                    }
                })
            },
            getTitle() {
                return this.id ? '编辑等级' : '添加等级'
            },
            onChangGoodsCat(val) {
                this.$set(this.ruleForm.checked_condition_values[this.currentGoodsCatsIndex].value, this.currentGoodsCatsName, JSON.stringify(val))
            },
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    if (this.ruleForm.goods_ids.length >= 20) {
                        this.$message.error('指定商品不能大于20个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.goods_ids) {
                        if (this.ruleForm.goods_ids[i] == param[j].id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_ids.push(param[j].id);
                        this.ruleForm.goods_list.push({
                            id: param[j].id,
                            name: param[j].goods_name,
                            cover_pic: param[j].cover_pic,
                        });
                    }
                }
            },
            deleteGoods(index) {
                this.ruleForm.goods_list.splice(index, 1);
                this.ruleForm.goods_ids.splice(index, 1);
            },
            setCondition() {
                navigateTo({
                    r: 'operation-center/level/condition',
                });
            },
            levelDisabled() {
                return this.id ? true : false
            },
        }
    })
</script>

<style>
    .form-body {
        padding-bottom: 5px;
        display: flex;
        flex-direction: column;
    }

    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .title-line {
        width: 4px;
        height: 20px;
        background-color: #1479F0;
        margin-right: 10px;
    }

    .padding-top {
        margin-bottom: 10px;
    }

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

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

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