hemall.terabimsoft.com.cn/plugins/address-mgmt/views/manage/create-form.blade.php

@extends('layouts.base')

@section('content')
    <div class="w1200 m0a">
        <!-- 新增加右侧顶部三级菜单 -->
        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="#">添加地址</a></li>
            </ul>
        </div>
        <div id="app">
            <div class="panel panel-default">
                <div class="panel panel-body">
                    <el-form :model="form_data" :rules="rules" ref="form_data" label-width="20%">
                        <el-form-item label="地址级别" prop="level">
                            {{--<el-radio-group v-model="form_data.level">--}}
                                {{--<el-radio label="3">区级</el-radio>--}}
                                {{--<el-radio label="4">街道级</el-radio>--}}
                            {{--</el-radio-group>--}}
                            <div>
                                <el-radio-group v-model="form_data.level"  prop="level">
                                    <el-radio-button label="3">区级</el-radio-button>
                                    <el-radio-button label="4">街道级</el-radio-button>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="地址归属区域" v-loading="all_loading">
                            <el-select v-model="address.province" filterable placeholder="请选择省" clearable style="width:20%" @change="changeProvince()" value-key="id">
                                <el-option v-for="item in province_list" :key="item.id" :label="item.areaname" :value="item"></el-option>
                            </el-select>
                            <el-select v-model="address.city" filterable  placeholder="请选择市" clearable style="width:20%" value-key="id" @change="changeCity()">
                                <el-option v-for="item in city_list" :key="item.id" :label="item.areaname" :value="item"></el-option>
                            </el-select>
                            <el-select v-if="form_data.level == 4" filterable v-model="address.district" placeholder="请选择区" clearable style="width:20%" value-key="id">
                                <el-option v-for="item in district_list" :key="item.id" :label="item.areaname" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="地址名称" prop="name">
                            <el-input style="width: 50%" v-model="form_data.name"></el-input>
                        </el-form-item>

                        <el-form-item label="行政编码" prop="new_id">
                            <div>
                                <el-input type="number" style="width: 50%"
                                          :placeholder="form_data.level == 3 ? '请输入6位数的区级行政编码' : '请输入9位数街道级行政编码'"
                                          v-model="form_data.new_id">
                                    {{--<template slot="prepend"></template>--}}
                                </el-input>
                            </div>
                            {{--<el-input type="number" style="width: 50%" v-model="form_data.new_id" placeholder="请输入国家行政区划编码"></el-input>--}}
                            <div style="color: red" class="tip">添加区级个数必须是6位，街道级个数必须是9位</div>
                            <div class="tip">位数代表含义： 第一、二位表示省级，第三、四位表示地市级，第五、六位表示县区级;<br/>第七至九位表示乡、镇（街道办事处）</div>
                            <div class="tip">不清楚的可前往以下页面查看百度地图行政区划adcode映射表</div>
                            <el-link type="primary" target="_blank" href="https://lbsyun.baidu.com/index.php?title=open/dev-res">
                                查询区划号
                            </el-link>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="success" round @click="submitForm('form_data')">提交</el-button>
                            <el-button round @click="backtrack()">返回</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            data() {
                return{
                    all_loading:false,
                    province_list:[],//省
                    city_list:[],//市
                    district_list:[],//区域
                    street_list:[],//街道
                    address : {
                        city: "",
                        city_id: 0,
                        district: "",
                        district_id: 0,
                        province: "",
                        province_id: 0,
                        street: "",
                        street_id: 0,
                    },

                    form_data:{
                        name:'',
                        level: 3,
                        parent_address:{},
                        new_id:'',
                    },

                    rules:{
                        name:[
                            { required: true, message: '请输入地址名称', trigger: 'blur' },
                            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                        ],
                        level:[
                            { required: true, message: '请选择添加地址类型', trigger: 'blur' },
                        ],
                        new_id:[
                            { required: true, message: '请填写行政区划编码', trigger: 'blur' },
                        ],
                    },
                }
            },
            created() {
                this.getProvince();
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.validateAddress()) {
                                this.confirm();
                            }
                        } else {
                            return false;
                        }
                    });
                },
                confirm() {
                    this.$confirm('后续如删除添加的地址可能对部分功能造成影响，确认添加吗？', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定',
                        type: 'warning'}).then(() => {
                        this.$message({type: 'success', message: '添加中,成功则跳转...'});
                        this.createAddress();
                    }).catch(() => {
                        this.$message({type: 'info', message: '取消提交'});
                    });
                },
                validateAddress() {
                    if(this.address.province.id) {
                        this.form_data.parent_address.province = this.address.province;
                    } else {
                        this.$message.warning('请选择添加地址的省级');
                        return false;
                    }
                    if(this.address.city.id) {
                        this.form_data.parent_address.city = this.address.city;
                    } else {
                        this.$message.warning('请选择添加地址的市级');
                        return false;
                    }
                    if(this.address.district.id) {
                        this.form_data.parent_address.district = this.address.district;
                    } else {
                        if (this.form_data.level == 4) {
                            this.$message.warning('请选择添加地址的区级');
                            return false;
                        }
                    }

                    return true;
                },
                createAddress() {
                    var that = this;

                    console.log(that.form_data);
                    that.$http.post("{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.create') !!}", {address:that.form_data}).then(response => {
                        console.log(response);
                        if(response.data.result==1){
                            that.backtrack();
                        } else{
                            that.$message.error(response.data.msg);
                        }
                    }),function(res){
                        console.log(res);
                        that.$message.error(response.data.msg);
                    };
                },
                backtrack() {
                    window.location.href='{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.index') !!}';
                },
                // 获取省份信息
                getProvince() {
                    var that = this;
                    that.all_loading = true;
                    that.$http.get("{!! yzWebFullUrl('plugin.address-mgmt.admin.select.get-address',['type' => 'province']) !!}",).then(response => {
                        console.log(response);
                    if(response.data.result==1){
                        this.province_list = response.data.data;
                    } else{
                        that.$message.error(response.data);
                        that.all_loading = false;
                    }
                    that.all_loading = false;
                }),function(res){
                        console.log(res);
                        that.all_loading = false;
                    };
                },

                // 省份改变
                changeProvince(parentid) {
                    var that = this;
                    if(!parentid) {
                        parentid = that.address.province.id;
                        that.address.city_id = 0;
                        that.address.city = '';
                        that.address.district_id = 0;
                        that.address.district = '';
                        that.address.street_id = 0;
                        that.address.street = '';
                    }
                    that.all_loading = true;
                    that.$http.get("{!! yzWebFullUrl('plugin.address-mgmt.admin.select.get-address',['type' => 'city','parentid' => '']) !!}"+parentid).then(response => {
                        console.log(response);
                    if(response.data.result==1){
                        this.city_list = response.data.data;
                    } else{
                        // that.$message.error(response.data);
                    }
                    that.all_loading = false;
                }),function (res) {
                        console.log(res);
                        that.all_loading = false;
                    };
                },
                // 城市改变
                changeCity(parentid) {
                    var that = this;
                    if(this.form_data.level == 4) {
                        if(!parentid) {
                            parentid = that.address.city.id;
                            that.address.district_id = 0;
                            that.address.district = '';
                            that.address.street_id = 0;
                            that.address.street = '';
                        }
                        that.all_loading = true;
                        that.$http.get("{!! yzWebFullUrl('plugin.address-mgmt.admin.select.get-address',['type' => 'district','parentid' => '']) !!}"+parentid).then(response => {
                            if(response.data.result==1) {
                            that.district_list = response.data.data;
                        } else {
                            //that.$message.error(response.data);
                        }
                        that.all_loading = false;
                    }), function(res){
                            console.log(res);
                            that.all_loading = false;};
                    }

                },
                // 区域改变
                changeDistrict(parentid) {
                    var that = this;
                    if(this.form_data.level == 4) {
                        if(!parentid) {
                            parentid = that.address.district.id;
                            that.address.street_id = 0;
                            that.address.street = '';
                        }
                        that.all_loading = true;
                        that.$http.get("{!! yzWebFullUrl('plugin.address-mgmt.admin.select.get-address',['type' => 'street','parentid' => '']) !!}"+parentid).then(response => {
                            if(response.data.result==1){
                            that.street_list = response.data.data;
                        } else{
                            // that.$message.error(response.data);
                        }
                        that.all_loading = false;
                    }),function(res){
                            console.log(res);
                            that.all_loading = false;
                        };
                    }
                },
            },
        })

    </script>
@endsection('content')