qimall/addons/Mch/client/views/setting/freight-edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-district');
ComponentHelper::loadComponentView('com-district-single');
?>
<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 />
                        规则：首件 + 续件 + 续件 + 续件……【注意：就算不同商品也是按续件算】
                    </div>
                </el-form-item>

                <el-form-item label="选择地区" prop="type">
                    <el-radio name="select_com" :disabled="form.id ? true : false" :label="0" v-model="form.select_com">多选地区</el-radio>
                    <el-radio name="select_com" :disabled="form.id ? true : false" :label="1" v-model="form.select_com">单选地区</el-radio>
                </el-form-item>
                <el-form-item label="运费规则" prop="rule" required>
                    <el-card shadow="never" style="margin-bottom: 12px;width: 650px" v-if="form.rule"v-for="(item, index) in form.rule" :key="item.id">
                        <div flex="dir:left box:last">
                            <div>
                                <div>
                                    <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>
                                </div>
                                <div flex="dir:left" style="flex-wrap: wrap">
                                    <div>区域：</div>
                                    <el-tag type="info" style="margin: 5px;border:0" v-for="(value, key) in item.list">
                                        {{value.name}}
                                    </el-tag>
                                </div>
                            </div>
                            <div style="text-align: right">
                                <el-button type="text" @click="editDistrict(item)" 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>
                    </el-card>
                    <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%">
        <div style="margin-bottom: 1rem;">
            <el-form :model="rule" ref="rule" label-width="100px" :rules="ruleRules">
                <div flex="dir:left box:mean">
                    <div style="padding: 0 1rem;">
                        <el-form-item prop="first" :label="form.type == 1 ? '首重(克)：' : '首件(个)：'">
                            <el-input 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 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 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 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="form.rule" ref="editSingle" :edit="rule.list" @selected="selectDistrict"
                                         :level="3"></com-district-single>
                </el-form-item>
                <el-form-item v-if="form.select_com == 0" prop="list" label="地区选择">
                    <com-district :rule="form.rule" :edit="rule.list" @selected="selectDistrict"
                                  :level="3"></com-district>
                </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,
                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: []
                },
                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
                        }
                    ]
                }
            }
        },
        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;
            }
        },
        methods: {
            Cancel() {
                window.history.go(-1)
            },

            submit(formName) {
                this.btnLoading = true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        let rule = JSON.stringify(this.form.rule) 
                        let InitDataPara = {}
                        // 对象深拷贝
                        InitDataPara = JSON.parse(JSON.stringify(this.form))
                        InitDataPara.rule = rule

                        request({
                            params: {
                                r: 'mch/client/setting/freight-edit',
                                id: getQuery('id')
                            },
                            method: 'post',
                            data: {
                                form: InitDataPara
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'mch/client/setting/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;
                self.rule = {
                    first: 0,
                    firstPrice: 0,
                    second: 0,
                    secondPrice: 0,
                    list: []
                };
                self.is_add = true;
            },
            editDistrict(row) {
                this.title = '编辑规则';
                this.dialogVisible = true;
                this.rule = row;
                this.is_add = false;
                if (this.form.select_com == 1) {
                    setTimeout(()=>{
                        this.$refs['editSingle'].backList = this.form.rule[index].list
                    },800)
                }
            },
            deleteDetail(index) {
                this.form.rule.splice(index, 1);
            },
            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.is_add) {
                            this.form.rule.push(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: 'mch/client/setting/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;
                });
            }
        }
    });
</script>