hemall.terabimsoft.com.cn/plugins/commission/views/widget/profit/distribution.js

define({
    name: "distribution",
    template: `
  <div>
    <el-form ref="form" label-width="15%">
        <div id="vue_head">
            <div class="base_set">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">分销设置</div>
                </div>
                <el-divider></el-divider>
                <div class="vue-main-form">
                    <el-form-item label="开启分销">
                        <el-radio v-model="is_open_commission" :label="0">关闭</el-radio>
                        <el-radio v-model="is_open_commission" :label="1">开启</el-radio>
                        <div class="help-block">如果不开启分销，则不产生分销佣金</div>
                    </el-form-item>
                    <el-form-item label="独立规则">
                        <el-switch v-model="has_rule_commission" :active-value="1" :inactive-value="0"></el-switch>
                        <span>启用独立佣金比例</span>
                        <div class="help-block">启用独立佣金设置，此商品拥有独自的佣金比例,不受分销商等级比例及默认设置限制</div>
                    </el-form-item>
                    <el-form-item prop="defaultRatio" v-show="has_rule_commission">
                        <el-row :gutter="15" class="gutter">
                            <el-col :span="3">
                                <div class="grid-content bg-purple">等级名称</div>
                            </el-col>
                            <el-col :span="7" v-for="(title, index) in headerList" :key="index">
                                <div class="grid-content bg-purple">{{title}}</div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="gutter" v-for="(level, index) in levelList" :key="index">
                            <el-col :span="3">
                                <div class="grid-content bg-purple">{{level.levelName}}</div>
                            </el-col>
                            <el-col :span="7" class="flex-col" v-if="headerList.length >= 1">
                                <el-input placeholder="请输入百分比" v-model="level.first_level_rate" maxlength="10" size="small "  oninput="if(value<0)value=''" type="number">
                                    <template slot="append">% 固定</template>
                                </el-input>
                                <el-input placeholder="请输入金额" v-model="level.first_level_pay" maxlength="10" size="small "  oninput="if(value<0)value=''" type="number">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-col>

                            <el-col :span="7" class="flex-col" v-if="headerList.length >= 2">
                                <el-input placeholder="请输入百分比" v-model="level.second_level_rate" maxlength="10" size="small "  oninput="if(value<0)value=''" type="number">
                                    <template slot="append">% 固定</template>
                                </el-input>
                                <el-input placeholder="请输入金额" v-model="level.second_level_pay" maxlength="10" size="small "  oninput="if(value<0)value=''" type="number">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-col>

                            <el-col :span="7" class="flex-col" v-if="headerList.length >= 3">
                                <el-input placeholder="请输入百分比" v-model="level.third_level_rate" maxlength="10" size="small "  oninput="if(value<0)value=''" type="number">
                                    <template slot="append">% 固定</template>
                                </el-input>
                                <el-input placeholder="请输入金额" v-model="level.third_level_pay" maxlength="10" size="small "  oninput="if(value<0)value=''" type="number">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-col>
                        </el-row>

                        <div class="help-block">如果比例为空或等于0，则使用固定规则，如果都为空或等于0则无分销佣金</div>
                    </el-form-item>
                    <el-divider></el-divider>
                </div>
            </div>
        </div>
    </el-form>
</div>
    `,
    style: `
    .help-block{
        font-size:12px;
    }
    .location{
        display:flex;
        justify-content:flex-end;
    }
    .gutter{
        text-align:center;
    }
    .flex-col{
        display:flex;
        margin-top:5px;
    }
    `,
    props: {
        form: {
          type: Object,
          default() {
            return {}
          }
        }
    },
    data(){
      return {
        is_open_commission: 0,
        has_rule_commission: 0,
        maxLevel: '',
        headerList: [],
        levelList: [],
      }
    },
    mounted() {
        this.maxLevel = this.form.setLevel ? this.form.setLevel : 0;
        // 数据为空时会返回空数组
        if (this.form.item && !Array.isArray(this.form.item)) {
            this.is_open_commission = this.form.item.is_commission ? this.form.item.is_commission : 0;
            this.has_rule_commission = this.form.item.has_commission ? this.form.item.has_commission : 0;
        }
        this.setLevelList(this.maxLevel, this.form.levels);
    },
    methods: {
        setLevelList (max_level=0, levelData) {
            let levels = [];
            let headerList = [];
            let maxLevel = parseInt(max_level);
            switch (maxLevel) {
                case 1:
                    headerList.push("一级分销");
                    break;
                case 2:
                    headerList.push("一级分销", "二级分销");
                    break;
                case 3:
                    headerList.push("一级分销", "二级分销", "三级分销");
                    break;
            
                default:
                    break;
            }
            levelData.forEach((item, index) => {
                let level = {
                    levelName: item.name,
                    levelKey: item.fromName
                };
                if (headerList.length >= 1) {
                    level.first_level_rate = item.first_level_rate;
                    level.first_level_pay = item.first_level_pay;
                } 
                if(headerList.length >= 2) {
                    level.second_level_rate = item.second_level_rate;
                    level.second_level_pay = item.second_level_pay;
                }
                if (headerList.length == 3) {
                    level.third_level_rate = item.third_level_rate;
                    level.third_level_pay = item.third_level_pay;
                }
                levels[index] = level;
            })
            this.headerList = headerList;
            this.levelList = levels;
            // 将数组从首位默认值， 移到末尾
            this.levelList.push(this.levelList.shift())
        },
        filterList (list = []) {
            let ruleArr = {};
            list.forEach((item) => {
                ruleArr[item.levelKey] = item;
            })
            return ruleArr;
        },
        validate () {
            return {
                is_commission: this.is_open_commission,
                has_commission: this.has_rule_commission,
                rule: this.filterList(this.levelList)
            }
        },
    },
  })