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

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" 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>设置升级条件</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="table-body">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" @close="handleClose('ruleForm')">
                <el-form-item label="升级条件" :label-width="formLabelWidth" prop="level">
                    <template>
                        <el-checkbox-group v-model="ruleForm.checked_condition_keys" class="check-group">
                            <div class="checkbox-item" v-for="item in upgrade_condition">
                                <el-checkbox :label="item.id" v-model="item.id" border size="medium">{{ item.content }}</el-checkbox>
                            </div>
                        </el-checkbox-group>
                    </template>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postAdd('ruleForm')">确 定</el-button>
            </div>
        </div>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeName: "1",
                tableData: [],
                rules: {},
                upgrade_condition: [],
                ruleForm: {
                    checked_condition_keys: [1, 2]
                },
                formLabelWidth: '150px',
            }
        },
        created() {
            this.getList();
        },
        methods: {
            postAdd(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$request({
                            method: "post",
                            params: {
                                r: 'operation-center/level/condition',
                            },
                            data: this.ruleForm
                        }).then(e => {
                            if (e.data.code == 0) {
                                this.$message({
                                    message: e.data.msg,
                                    type: 'success'
                                });
                                navigateTo({
                                    r: 'operation-center/level/index',
                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        })
                    }
                })
            },
            getList() {
                this.$request({
                    params: {
                        r: 'operation-center/level/condition',
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.upgrade_condition = e.data.data.upgrade_condition;
                        this.ruleForm.checked_condition_keys = e.data.data.checked_condition_keys
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            goodsSelect() {

            },
            picUrl(e) {
                if (e.length) {
                    this.ruleForm.pic_url = e[0].url;
                    this.$refs.ruleForm.validateField('pic_url');
                }
            },
        },
    });
</script>

<style>
    .checkbox-item+.checkbox-item {
        margin-top: 20px;
    }
</style>