qimall/addons/Area/backend/views/goods/com-area.php

<template id="com-area">
    <div class="com-area">
        <el-card class="edit-card" shadow="never">
            <!-- <div slot="header" class="clearfix">
                <div class="card-title">区域设置<span class="card-sub-title"></span></div>
            </div> -->

            <el-form :model="form" size="small">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(config,key) in form" :label="commission_type_map[key]" :name="key" :key="key">
                        <el-form-item label="是否开启区域分红" prop="is_enable">
                            <el-switch :active-value="1" :inactive-value="0" v-model="config.is_enable"></el-switch>
                        </el-form-item>
                        <el-row :gutter="16" v-if="config.is_enable == 1">
                            <el-col :span="6">
                                <el-card shadow="always">
                                    <!--团队佣金配置 -->
                                    <div slot="header" class="clearfix">
                                        <span>团队{{commission_type_map[config.commission_type]}}配置</span>
                                    </div>
                                    <el-form-item label="佣金类型" prop="is_percent_team">
                                        <el-radio-group v-model="config.is_percent_team">
                                            <el-radio :label="0" class="grid-content bg-purple">百分比</el-radio>
                                            <el-radio :label="1"
                                                class="grid-content bg-purple">固定{{commission_type_map[config.commission_type]}}</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-col :span="24">
                                            <el-row>
                                                <el-col :span="6">
                                                    <div class="grid-content bg-purple">团队等级</div>
                                                </el-col>
                                                <el-col :span="16">
                                                    <div class="grid-content bg-purple-light">提成比例</div>
                                                </el-col>
                                            </el-row>

                                            <el-row v-for="(item,index) in level_arr.Area" :key="index"
                                                style="margin-bottom:10px" v-if="(store && item.level < 5) || !store">
                                                <el-col :span="6">{{ item.name }}</el-col>

                                                <el-col :span="16">
                                                    <el-input v-model="config.detail[item.level].agent_team_prize"
                                                        placeholder="输入数值" onInput="value=toNumber(value,2)">
                                                        <template slot="append"
                                                            v-if="config.is_percent_team == 0">%</template>
                                                        <template slot="append" v-if="config.is_percent_team == 1">
                                                            <template
                                                                v-if="config.commission_type == 'commission'">元</template>
                                                            <template
                                                                v-if="config.commission_type == 'hi_bei' || config.commission_type == 'hi_value'">枚</template>
                                                            <template
                                                                v-if="config.commission_type == 'score'">{{commission_type_map[config.commission_type]}}</template>
                                                        </template>
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-form-item>
                                </el-card>
                            </el-col>
                            <el-col :span="6">
                                <el-card shadow="always">
                                    <!--平级奖佣金配置 -->
                                    <div slot="header" class="clearfix">
                                        <span>平级奖{{commission_type_map[config.commission_type]}}配置</span>
                                    </div>
                                    <el-form-item label="平级奖类型" prop="is_percent_equal">
                                        <el-radio-group v-model="config.is_percent_equal">
                                            <el-radio :label="0" class="grid-content bg-purple">百分比</el-radio>
                                            <el-radio :label="1"
                                                class="grid-content bg-purple">固定{{commission_type_map[config.commission_type]}}</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-col :span="24">
                                            <el-row>
                                                <el-col :span="6">
                                                    <div class="grid-content bg-purple">团队等级</div>
                                                </el-col>
                                                <el-col :span="16">
                                                    <div class="grid-content bg-purple-light">提成比例</div>
                                                </el-col>
                                            </el-row>

                                            <el-row v-for="(item,index) in level_arr.Area" :key="index"
                                                style="margin-bottom:10px" v-if="(store && item.level < 5) || !store">
                                                <el-col :span="6">{{ item.name }}</el-col>

                                                <el-col :span="16">
                                                    <el-input v-model="config.detail[item.level].agent_equal_prize"
                                                        placeholder="输入数值" onInput="value=toNumber(value,2)">
                                                        <template slot="append"
                                                            v-if="config.is_percent_equal == 0">%</template>
                                                        <template slot="append" v-if="config.is_percent_equal == 1">
                                                            <template
                                                                v-if="config.commission_type == 'commission'">元</template>
                                                            <template
                                                                v-if="config.commission_type == 'hi_bei' || config.commission_type == 'hi_value'">枚</template>
                                                            <template
                                                                v-if="config.commission_type == 'score'">{{commission_type_map[config.commission_type]}}</template>
                                                        </template>
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-form-item>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </el-form>


            </el-form>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-area', {
        template: "#com-area",
        props: {
            level_arr: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            setting: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            commission_type_map: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            store: Boolean,
        },
        data() {
            return {
                activeName: 'commission',
                form: {},
                install: {// 初始化数据
                    is_enable: 0,
                    is_percent_team: 0,
                    is_percent_equal: 0,
                    is_percent_over: 0,
                    is_percent_extra: 0,
                    item_type: 'goods',
                    commission_type: '',
                    detail: {}
                }
            }
        },
        watch: {
            setting: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value)) {
                        this.form = value;
                    }
                }
            },
            level_arr: {
                deep: true,
                immediate: true,
                handler(value) {
                    if (!isEmpty(value)) {
                        let self = this;
                        var data = value.Area;

                        // 初始化赋值
                        for (let name in self.commission_type_map) {
                            let detail = {};
                            var prize = isEmpty(self.form[name]) ? {} : self.form[name].detail;
                            if (data) {
                                Object.keys(data).forEach(function (key) {
                                    var formKey = data[key].level;
                                    Object.assign(detail, {
                                        [formKey]: {
                                            level: data[key].level,
                                            agent_team_prize: !isEmpty(prize[formKey]) ? prize[formKey].agent_team_prize : 0,
                                            agent_equal_prize: !isEmpty(prize[formKey]) ? prize[formKey].agent_equal_prize : 0,
                                            agent_over_prize: !isEmpty(prize[formKey]) ? prize[formKey].agent_over_prize : 0,
                                            agent_extra_prize: !isEmpty(prize[formKey]) ? prize[formKey].agent_extra_prize : 0,
                                        }
                                    });
                                });
                            }

                            self.install = {
                                is_enable: isEmpty(self.form[name]) ? 0 : self.form[name].is_enable,
                                is_percent_team: isEmpty(self.form[name]) ? 0 : self.form[name].is_percent_team,
                                is_percent_equal: isEmpty(self.form[name]) ? 0 : self.form[name].is_percent_equal,
                                is_percent_over: isEmpty(self.form[name]) ? 0 : self.form[name].is_percent_over,
                                is_percent_extra: isEmpty(self.form[name]) ? 0 : self.form[name].is_percent_extra,
                                item_type: isEmpty(self.form[name]) ? 'goods' : self.form[name].item_type,
                                commission_type: name,
                                detail: detail
                            };
                            this.$set(self.form, name, JSON.parse(JSON.stringify(self.install)));
                        }
                    }
                }
            },
            form: {
                deep: true,
                immediate: true,
                handler(value) {
                    this.$emit("change", JSON.stringify(value), "Area");
                }
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        created() {
            console.log('store', this.store)
        }
    });
</script>