hemall.terabimsoft.com.cn/plugins/yz-supply/views/admin/cloud/dispatch-info.blade.php

@extends('layouts.base')
@section('title', '编辑配送模板')
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-crumbs">
                <a @click="goParent">配送模板</a> > 配送方式设置
            </div>
            <div class="vue-main">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">配送方式设置</div>
                </div>
                <div class="vue-main-form">
                    <el-form ref="form" :model="form" :rules="rules" label-width="15%">

                        <el-form-item label="请选择中台供应链" prop="middleground_configuration_id">
                            <el-select v-model="middleground_configuration_id" placeholder="请选择供应链" clearable remote filterable >
                                <el-option   :disabled="id != 0" v-for="item in middleground_configuration" :key="item.id" :label="item.title" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="配送方式名称" prop="dispatch_name">
                            <el-input v-model="form.dispatch_name" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="计算方式" prop="calculate_type">
                            <el-radio v-model.number="form.calculate_type" :label="0">按重量计费</el-radio>
                            <el-radio v-model.number="form.calculate_type" :label="1">按件计费</el-radio>
                        </el-form-item>
                        <el-form-item label="配送区域" prop="explain_content">
                            <table class="el-table" style="width:90%">
                                <tr style="border-bottom:1px solid #EBEEF5">
                                    <th style="width:40%">运送到</th>
                                    <th>[[form.calculate_type==1?'首件(个)':'首重(克)']]</th>
                                    <th>[[form.calculate_type==1?'运费(元)':'首费(元)']]</th>
                                    <th>[[form.calculate_type==1?'续件(个)':'续重(克)']]</th>
                                    <th>续费(元)</th>
                                    <th style="width:80px">操作</th>
                                </tr>

                                <tr  v-for="(item,index) in data" :key="index">
                                    <td>
                                        <!-- <div style="font-size:12px;font-weight:600;line-height:18px;margin-right: 15px">
                                            <span v-for="(item1,index1) in item.areas" :key="index1">[[item1]];</span>
                                        </div> -->
                                        <div style="font-size:12px;font-weight:600;line-height:18px;margin-right: 15px">
                                            [[item.areas]]
                                        </div>

                                        <el-button size="small" @click="openVisible('data',index)">选择区域</el-button>
                                    </td>
                                    <td>
                                        <el-input v-model="item.first_weight" style="width:80%"></el-input>
                                    </td>
                                    <td>
                                        <el-input v-model="item.first_weight_price" style="width:80%"></el-input>
                                    </td>
                                    <td>
                                        <el-input v-model="item.another_weight" style="width:80%"></el-input>
                                    </td>
                                    <td>
                                        <el-input v-model="item.another_weight_price" style="width:80%"></el-input>
                                    </td>
                                    <td>
                                    <el-link  :underline="false" @click="delList('data',index)" class="vue-assist-color"> 删除</el-link>
                                    </td>
                                </tr>
                                
                            </table>
                            <el-button type="primary" plain icon="el-icon-plus" size="small" @click="addList">新增配送区域</el-button>
                            <div class="tip" v-if="form.calculate_type==1">根据件数来计算运费，当物品不足《首件数量》时，按照《首件费用》计算，超过部分按照《续件数量》和《续件费用》乘积来计算</div>
                            <div class="tip" v-else>根据重量来计算运费，当物品不足《首重重量》时，按照《首重费用》计算，超过部分按照《续重重量》和《续重费用》乘积来计算</div>
                        </el-form-item>

                    </el-form>
                </div>
            </div>
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">保存设置</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
            <el-dialog title="请选择地区" :visible.sync="centerDialogVisible" center v-if="chooseIndex!=-1&&showVisible" :before-close="beforeClose">
                <el-tree
                        v-loading="loading"
                        :props="props"
                        node-key="id"
                        :default-checked-keys="chooseItem.area_ids"
                        :default-expanded-keys="chooseItem.province_ids"
                        show-checkbox
                        lazy
                        @check-change="checkAreas"
                        ref="addressTree"
                        :data="treeData"
                        :load="loadNode"
                        style="height:500px;overflow:auto"
                >
                </el-tree>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="beforeClose">取 消</el-button>
                    <el-button type="primary" @click="saveAreas">确 定</el-button>
                </span>

            </el-dialog>



        </div>
    </div>
    <script>

        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',

            data() {

                let id = {!! $id?:0 !!};
                let middleground_configuration_id = {!! $middleground_configuration_id?:0 !!}

                return{

                    id:id,
                    submit_link:'',
                    data:[],//按重量计费-区域数据
                    middleground_configuration:[],
                    middleground_configuration_id:middleground_configuration_id,
                    form:{
                        calculate_type:0,
                    },
                    chooseIndex:-1,
                    chooseName:'weight',
                    chooseItem:{},
                    chooseAreas:[],
                    chooseAreaIds:[],
                    chooseProvinceIds:[],
                    centerDialogVisible:false,
                    showVisible:false,
                    props: {
                        label: 'areaname',
                        children: 'children',
                        isLeaf: 'isLeaf'
                    },
                    loading: false,
                    treeData: [],
                    rules:{
                        dispatch_name:{ required: true, message: '请输入配送方式名称'}
                    },
                }
            },

            created() {


            },
            mounted() {


                if(!this.id) {
                    this.getMiddlegroundConfiguration(1);
                    this.submit_link = '{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-dispatch.add') !!}';
                }
                else {
                    this.getMiddlegroundConfiguration(2);
                    this.submit_link = '{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-dispatch.edit') !!}';
                }

            },
            methods: {
                getMiddlegroundConfiguration(type){
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.middleground-configuration.get-middleground-configurations') !!}').then(function (response) {
                        if (response.data.result) {
                            this.middleground_configuration = response.data.data;
                            if(type == 1){
                                this.middleground_configuration_id = this.middleground_configuration[0].id;
                            }else{
                                this.getData();
                            }
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                        loading.close();
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                        loading.close();
                    })
                },
                getData() {
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-dispatch.find-express-template') !!}', {'id':this.id,'middleground_configuration_id':this.middleground_configuration_id}).then(function (response) {
                            if (response.data.result){

                                this.form = {
                                    ...response.data.data.data,
                                };

                                for(var i in response.data.data.data.items) {

                                    this.data.push(response.data.data.data.items[i])
                                }

                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },
                goParent() {
                    window.location.href = `{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-dispatch.index') !!}`;
                },
                submitForm(formName) {
                    this.form.middleground_configuration_id = this.middleground_configuration_id;

                    let json = this.form;

                    json.data = this.data;

                    let json1 = {
                        dispatch:json
                    }
                    if(this.id) {
                        json1.id = this.id
                    }
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post(this.submit_link,json1).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.goBack();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {

                            return false;
                        }
                    });
                },
                addList() {
                    this.data.push(
                        {areas:"",area_ids:"",province_ids:[],first_piece:this.form.first_piece,first_piece_price:this.form.first_piece_price,another_piece:this.form.another_piece,another_piece_price:this.form.another_piece_price}
                    )
                },
                delList(name,index) {
                    if(name == "data") {
                        this.data.splice(index,1);
                    }
                },
                handleClose(area) {
                    this.form.areas.splice(this.form.areas.indexOf(area), 1);
                },
                openVisible(name,index) {
                    this.centerDialogVisible = true;
                    this.showVisible = true;
                    this.chooseName = name;
                    this.chooseIndex = index;
                    this.chooseItem = {};
                    this.chooseItem = JSON.parse(JSON.stringify(this.data[index]));
                    this.chooseItem.area_ids = this.data[index].area_ids.split(";");
                    this.chooseItem.area_ids.forEach((item,index) => {
                        this.chooseItem.area_ids[index] = Number(item)
                    });
                    this.chooseItem.areas = this.data[index].areas.split(";");
                },
                loadNode(node, resolve) {
                    this.loading = true;
                    if (!node.data.id) {
                        //省份
                        node.data.id = 0;
                        // getRegion
{{--                        {!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-dispatch.index') !!}--}}
{{--                            !! yzWebUrl('area.list', ['parent_id'=> 0]) !!}--}}
                        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-dispatch.get-region') !!}",{'parent_id':0,'middleground_configuration_id':this.middleground_configuration_id}).then(response => {
                            response.data.data.forEach(function (province) {
                                province.isLeaf = false;
                            });

                            // response.data.data.splice(-3,3) //因为中台没有后三个 保持与中台一致

                            resolve(response.data.data);

                            this.loading = false;
                        }, response => {

                        });
                    } else {
                        //城市
                        this.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.cloud.cloud-dispatch.get-region') !!}",{'parent_id':node.data.id,'middleground_configuration_id':this.middleground_configuration_id}).then(response => {
                            //城市没有子节点
                            response.data.data.forEach(function (city) {
                                city.isLeaf = true;
                            })
                            resolve(response.data.data);
                            // 载入数据后,刷新已选中
                            this.loading = false;
                        }, response => {

                        });
                    }
                },
                checkAreas(node,checked,children) {
                    if(node.isLeaf){
                        return;
                    }
                    if(checked){
                        if(!this.chooseItem.province_ids) {
                            this.chooseItem.province_ids = [];
                        }
                        this.chooseItem.province_ids.push(node.id)
                    }
                },
                saveAreas() {
                    let areas = [];
                    let area_ids = [];
                    let province_ids = [];
                    this.$refs.addressTree.getCheckedNodes().forEach(function (node) {
                        if (node.level == 1) {
                            province_ids.push(node.id);
                        } else if (node.level == 2) {
                            area_ids.push(node.id);
                            areas.push(node.areaname)
                        }
                    });
                    this.$refs.addressTree.getHalfCheckedNodes().forEach(function (node) {
                        if (node.level == 1) {
                            province_ids.push(node.id);
                        }

                    });
                    this.data[this.chooseIndex].area_ids = area_ids.join(";");
                    this.data[this.chooseIndex].areas = areas.join(";");
                    this.data[this.chooseIndex].province_ids = province_ids;

                    this.centerDialogVisible = false
                    this.showVisible = false;


                },
                beforeClose() {
                    this.centerDialogVisible = false;
                    this.showVisible = false;
                },
                goBack() {
                    history.go(-1)
                },
            },
        })

    </script>
@endsection