qimall/backend/modules/mall/views/freight/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-district-rule');
ComponentHelper::loadComponentView('com-district-single-rule');
?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" class="box-card" body-style="background-color: #f3f3f3;padding: 10px 0 0;" class="box-card" v-loading="cardLoading">
        <div slot="header">
            <div flex="cross:center box:first">
                <div><span @click="$navigate({r:'mall/freight/rules'})" class="text">运费规则</span>/添加规则</div>
            </div>
        </div>
        <div class="form-body">
            <el-form :model="form" :rules="rules" size="small" ref="form" label-width="120px">
                <el-form-item label="规则名称" prop="name">
                    <el-input size="small" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="计费方式" prop="type">
                    <el-radio name="type" :label="1" v-model="form.type">按重计费</el-radio>
                    <el-radio name="type" :label="2" v-model="form.type">按件计费</el-radio>
                </el-form-item>

                <el-form-item label="按商品计算" prop="compute_type">
                    <el-radio name="type" :label="1" v-model="form.compute_type">按不同商品计算</el-radio>
                    <el-radio name="type" :label="2" v-model="form.compute_type">按同件商品计算</el-radio>
                    <div class="tips-text" v-if="form.compute_type == 1" style="line-height: 24px;">
                        运费规则：首件/重 15元，续件/重 1.5元<br />
                        商品A*1件 = 15元，商品A*2件 = 16.5元<br />
                        商品A*1件 + 商品B*1件 = 30元， 商品A*2件 + 商品B*1件 = 31.5元
                    </div>
                    <div class="tips-text" v-if="form.compute_type == 2" style="line-height: 24px;">
                        运费规则：首件/重 15元，续件/重 1.5元<br />
                        商品A*1件 = 15元，商品A*2件 = 16.5元<br />
                        商品A*1件 + 商品B*1件 = 16.5元， 商品A*2件 + 商品B*1件 = 18元<br />
                        规则：首件 + 续件 + 续件 + 续件……【就算不同商品也是按续件算】<br />
                        注意：若购物车内不同的商品使用的运费模板也不一样，则会根据不同模板来计算
                    </div>
                </el-form-item>

                <el-form-item label="选择地区" prop="type">
                    <el-radio-group name="select_com" v-model="form.select_com" @change="getSelectCom">
                        <el-radio :disabled="form.id ? true : false" :label="0">多选地区</el-radio>
                        <el-radio :disabled="form.id ? true : false" :label="1">单选地区</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="运费规则" prop="rule" required>

                    <div class="el_freight_rules" v-if="form.rule"v-for="(item, index) in form.rule" :key="item.id">
                        <div class="el_freight_rules_header">
                            <div class="el_freight_rules_header_left">
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item>首重/件(克/个):{{item.first}}</el-breadcrumb-item>
                                    <el-breadcrumb-item>首费(元):{{item.firstPrice}}</el-breadcrumb-item>
                                    <el-breadcrumb-item>续重/件(克/个):{{item.second}}</el-breadcrumb-item>
                                    <el-breadcrumb-item>续费(元):{{item.secondPrice}}</el-breadcrumb-item>
                                </el-breadcrumb>
                                <el-breadcrumb separator="/"
                                               v-if="item.is_enable_ladder_condition"
                                               :key="ladder_condition_index"
                                               v-for="(ladder_condition_item, ladder_condition_index) in item.ladder_condition"
                                                style="margin-top: 10px;">
                                    <el-breadcrumb-item>商品累计达到 {{ ladder_condition_item.condition_value }} {{ getTypeTextMap[form.type] }}，运费 {{ ladder_condition_item.money }} 元</el-breadcrumb-item>
                                </el-breadcrumb>
                            </div>
                            <div class="el_freight_rules_header_right">
                                <el-button type="text" @click="editDistrict(item, index)" size="small" circle>
                                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                        <img src="resources/img/mall/edit.png" alt="">
                                    </el-tooltip>
                                </el-button>
                                <el-button style="margin-left: 0" type="text" @click="deleteDetail(index)" size="small"
                                           circle>
                                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                        <img src="resources/img/mall/del.png" alt="">
                                    </el-tooltip>
                                </el-button>
                            </div>
                        </div>
                        <div class="el_freight_rules_region">
                            <div class="region_left_title">区域:</div>
                            <div class="region_right_item">
                                <div class="region_right_item_left"  :class="{region_right_item_left_hide:index!==is_region_show}">
                                    <el-tag type="info" style="margin: 5px;border:0" v-for="(value, key) in item.list">
                                        {{value.name}}
                                    </el-tag>
                                </div>
                                <div class="region_right_item_right"
                                     :class="( index===is_region_show ? 'el-icon-arrow-down' : 'el-icon-arrow-right')"
                                     @click="displayRegionAll(item,index)"></div>
                            </div>
                        </div>
                    </div>
                    <el-button type="text" @click="openDistrict"><i class="el-icon-plus">新增规则</i></el-button>
                </el-form-item>
                <el-button class="button-item" :loading="btnLoading" type="primary" @click="submit('form')" size="small">保存</el-button>
            </el-form>
        </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
        <div style="margin-bottom: 1rem;">
            <el-form :model="rule" ref="rule" label-width="130px" :rules="ruleRules">
                <div flex="dir:left box:mean">
                    <div style="padding: 0 1rem;">
                        <el-form-item prop="first" :label="form.type == 1 ? '首重(克)：' : '首件(个)：'">
                            <el-input @blur="rule.first = Math.abs(parseInt(rule.first))" v-model.number="rule.first" min="0" type="number"></el-input>
                        </el-form-item>
                    </div>
                    <div style="padding: 0 1rem;">
                        <el-form-item prop="firstPrice" label="首费（元）">
                            <el-input @blur="rule.firstPrice = Math.abs(keepTwoDecimalPlaces(rule.firstPrice))" v-model.number="rule.firstPrice" min="0" type="number"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div flex="dir:left box:mean">
                    <div style="padding: 0 1rem;">
                        <el-form-item prop="second" :label="form.type == 1 ? '续重(克)：' : '续件(个)：'">
                            <el-input @blur="rule.second = Math.abs(parseInt(rule.second))"  v-model.number="rule.second" min="0" type="number"></el-input>
                        </el-form-item>
                    </div>
                    <div style="padding: 0 1rem;">
                        <el-form-item prop="secondPrice" label="续费（元）">
                            <el-input @blur="rule.secondPrice = Math.abs(keepTwoDecimalPlaces(rule.secondPrice))" v-model.number="rule.secondPrice" min="0" type="number"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item v-if="form.select_com == 1" prop="list" label="地区选择">
                    <com-district-single-rule :rule="form.rule" ref="editSingle" :not-rule="notChoiceRule" :edit="rule.list" @selected="selectDistrict"
                                  :level="3"></com-district-single-rule>
                </el-form-item>
                <el-form-item label="是否启用阶梯条件">
                    <el-switch v-model="rule.is_enable_ladder_condition"
                               :active-value="1"
                               :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item v-if="rule.is_enable_ladder_condition">
                    <el-table :data="rule.ladder_condition" style="width: 100%">
                        <el-table-column label="阶梯条件" align="center">
                            <template slot-scope="scope">
                                <el-row style="display: flex;align-items: center;">
                                    <el-col :span="8">
                                        商品累计达到
                                    </el-col>
                                    <el-col :span="16">
                                        <el-input size="mini"
                                                  v-model="rule.ladder_condition[scope.$index].condition_value"
                                                  style="float: left;"
                                                  @blur="conditionValueBlur(scope.$index)"
                                                  type="number">
                                            <template slot="append">
                                                {{ getTypeTextMap[form.type] }}
                                            </template>
                                        </el-input>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="运费" align="center">
                            <template slot-scope="scope">
                                <el-input size="mini"
                                          style="width: 250px;"
                                          v-model="rule.ladder_condition[scope.$index].money"
                                          min="0"
                                          @blur="moneyBlur(scope.$index)"
                                          type="number">
                                    <template slot="append">元</template>
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="操作" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="rule.ladder_condition.splice(scope.$index, 1)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" size="mini" style="margin-top: 20px;" @click="addLadderCondition">添加阶梯条件</el-button>
                </el-form-item>
                <el-form-item v-if="form.select_com == 0" prop="list" label="地区选择">
                    <com-district-rule :rule="form.rule" :edit="rule.list" :not-rule="notChoiceRule" @selected="selectDistrict" :dialog-visibles="dialogVisible"
                                         :level="3" ></com-district-rule>
                </el-form-item>
                <div style="text-align: right;margin-top: 1rem;">
                    <el-button type="primary" @click="districtConfirm('rule')">
                        确定选择
                    </el-button>
                </div>
            </el-form>
        </div>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            let min_number = (rule, value, callback) => {
                if (value < 0) {
                    callback(new Error('输入值必须大于0'));
                } else {
                    callback();
                }
            };
            return {
                form: {
                    name: '',
                    type: -1,
                    compute_type: 1,
                    select_com: 0,
                    rule: []
                },
                btnLoading: false,
                is_region_show: true,
                rules: {
                    name: [
                        {
                            required: true,
                            message: '请输入规则名称',
                            trigger: 'blur'
                        }
                    ],
                    rule: [
                        {
                            required: true,
                            message: '请输入运费规则'
                        }
                    ]
                },
                cardLoading: false,
                dialogVisible: false,
                is_add: false,
                title: '新增规则',
                rule: {
                    first: 0,
                    firstPrice: 0,
                    second: 0,
                    secondPrice: 0,
                    list: [],
                    is_enable_ladder_condition: 0,
                    ladder_condition: [],
                },
                notChoiceRule:[],//不能选择id
                ruleRules: {
                    first: [
                        {
                            validator: min_number,
                            trigger: 'blur'
                        },
                        {
                            type: 'number',
                            message: '请输入数字',
                            trigger: 'blur',
                            required: true
                        }
                    ],
                    firstPrice: [
                        {
                            validator: min_number,
                            trigger: 'blur'
                        },
                        {
                            type: 'number',
                            message: '请输入数字',
                            trigger: 'blur',
                            required: true
                        }
                    ],
                    second: [
                        {
                            validator: min_number,
                            trigger: 'blur'
                        },
                        {
                            type: 'number',
                            message: '请输入数字',
                            trigger: 'blur',
                            required: true
                        }
                    ],
                    secondPrice: [
                        {
                            validator: min_number,
                            trigger: 'blur'
                        },
                        {
                            type: 'number',
                            message: '请输入数字',
                            trigger: 'blur',
                            required: true
                        }
                    ],
                    list: [
                        {
                            type: 'array',
                            message: '请选择地区',
                            trigger: 'blur',
                            required: true
                        }
                    ]
                },
                editIndex:-1//当前修改的下标
            }
        },
        mounted: function () {
            if (getQuery('id')) {
                this.getDetail(getQuery('id'));
            } else {
                this.form.type = 1;
            }
        },
        watch: {
            newType(val, oldVal) {
                if (oldVal == -1) {

                } else {
                    this.form.rule.splice(0, this.form.rule.length);
                }
            }
        },
        computed: {
            newType() {
                return this.form.type;
            },
            getTypeTextMap() {
                return {1: 'kg', 2: '件'}
            }
        },
        methods: {
            Cancel() {
                window.history.go(-1)
            },
            getSelectCom(){// 进行单选多选切换时原来的规则清空
                this.form.rule = [];
            },
            submit(formName) {
                this.btnLoading = true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.name = this.form.name.toString()
                        request({
                            params: {
                                r: 'mall/freight/edit',
                                id: getQuery('id')
                            },
                            method: 'post',
                            data: {
                                form:JSON.stringify(this.form)
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'mall/freight/rules',
                                    tab: 'second'
                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                            this.$message.error(e.data.msg);
                        });
                    } else {
                        console.log('error submit!!');
                        this.btnLoading = false;
                        return false;
                    }
                });
            },
            openDistrict() {
                if(this.form.select_com == 1 && this.$refs['editSingle'] !== undefined){
                    this.$refs['editSingle'].backList = []
                }
                let self = this
                self.title = '新增规则';
                self.dialogVisible = true;
                this.getNotRule(null);
                self.rule = {
                    first: 0,
                    firstPrice: 0,
                    second: 0,
                    secondPrice: 0,
                    list: [],
                    is_enable_ladder_condition: 0,
                    ladder_condition: [],
                };
                self.is_add = true;
            },
            editDistrict(row, index) {
                this.title = '编辑规则';
                this.dialogVisible = true;
                this.getNotRule(index);
                this.rule = JSON.parse(JSON.stringify(row));
                this.is_add = false;
                this.editIndex = index;
                if (this.form.select_com == 1) {
                    setTimeout(()=>{
                        this.$refs['editSingle'].backList = this.form.rule[index].list
                    },800)
                }
            },
            getNotRule(index) {// 获取不能选择城市区域id
                //获取其它列表选择的区域id
                if (this.form.rule.length > 0) {
                    let not_choice_rule = [];
                    this.form.rule.forEach(function (item,not_index) {
                        if (index !== null && not_index === index) return false;
                        if (item.list.length>0) {
                            item.list.forEach(function (item_value,item_index) {
                                not_choice_rule.push(item_value.id);
                            })
                        }
                    })
                    this.notChoiceRule = not_choice_rule;
                }
            },
            deleteDetail(index) {
                this.$confirm("删除该运费规则将不可用，是否确定删除？", "提示", {
                    type: "warning"
                }).then((res) => {
                    this.form.rule.splice(index, 1);
                    request({
                        params: {
                            r: 'mall/freight/edit',
                            id: getQuery('id')
                        },
                        method: 'post',
                        data: {
                            form:JSON.stringify(this.form)
                        }
                    }).then(e => {
                        this.btnLoading = false;
                        if (e.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: e.data.msg,
                                duration: 2000,
                                onClose: function () {
                                    window.location.reload();
                                }
                            });
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.$message.error(e.data.msg);
                    });
                }).catch(() => {})
            },
            selectDistrict(e) {
                let list = [];
                for (let i in e) {
                    let obj = {
                        id: e[i].id,
                        name: e[i].name
                    };
                    list.push(obj);
                }
                this.rule.list = list;
            },
            districtConfirm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 验证阶梯条件
                        if (!this.checkLadderCondition()) {
                            return false
                        }
                        
                        if (this.is_add) {
                            this.form.rule.push(this.rule);
                        } else {
                            if(this.editIndex !=-1){
                                this.form.rule.splice(this.editIndex, 1,this.rule);
                            }
                        }
                        this.dialogVisible = false;
                        this.$refs['form'].validate((valid) => {
                            return false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getDetail(id = 0) {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'mall/freight/edit',
                        id: id
                    },
                    method: 'get'
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        self.form = Object.assign(self.form, e.data.data.detail);
                        if (isEmpty(self.form.select_com)) self.form.select_com = 0;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.cardLoading = false;
                });
            },
            displayRegionAll(item, index) {// 点击显示对应全部区域
                this.is_region_show = this.is_region_show !== index ? index :  true;
            },
            keepTwoDecimalPlaces(num) {
                return Math.round(num * 100) / 100;
            },
            addLadderCondition() {
                this.rule.ladder_condition = this.rule.ladder_condition??[]
                this.rule.ladder_condition.push({condition_value: 0, money: 0})
            },
            returnNumberFormatByType(value) {
                let res = 0;

                if (this.form.type == 1) {
                    res = this.keepTwoDecimalPlaces(value)
                } else if (this.form.type == 2) {
                    res = parseInt(value)
                }

                return res
            },
            checkLadderCondition() {
                let uniqueMap = {}

                for (const item of this.rule.ladder_condition) {
                    item.condition_value = this.returnNumberFormatByType(item.condition_value)
                    item.money = this.keepTwoDecimalPlaces(item.money)

                    if (item.condition_value in uniqueMap) {
                        this.$message.error('阶梯条件相同，无法提交');
                        return false
                    }

                    uniqueMap[item.condition_value] = 1
                }
                
                return true
            },
            conditionValueBlur(index) {
                this.rule.ladder_condition[index].condition_value = Math.abs(this.returnNumberFormatByType(this.rule.ladder_condition[index].condition_value))
            },
            moneyBlur(index) {
                this.rule.ladder_condition[index].money = Math.abs(this.keepTwoDecimalPlaces(this.rule.ladder_condition[index].money))
            },
        }
    });
</script>
<style lang="scss">
    .el_freight_rules{
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        transition: .2s;
        min-width: 700px;
        padding: 5px 15px;
        margin-bottom: 15px;
    }
    .el_freight_rules .el_freight_rules_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .el_freight_rules .el_freight_rules_region {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
    .el_freight_rules_region .region_left_title{
        width: 50px;
    }
    .region_right_item_left_hide{
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 3.0em; /* 高度为字体大小的两倍 */
        line-height: 1.5em; /* 行高 */
        height: 3.0em; /* 高度为行高的两倍 */
    }
    .region_right_item{
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .el-icon-arrow-right, .el-icon-arrow-down {
        margin-top: 10px;
        font-size: 15px;
    }
    /*.is-leaf:nth-child(1),.is-leaf:nth-child(2) {
        .cell::before {
            content: "* ";
            color: #f50d1a;
        }
    }*/
    .el-table_1_column_1.is-leaf, .el-table_1_column_2.is-leaf{
        .cell::before {
            content: "* ";
            color: #f50d1a;
        }
    }
</style>