qimall/addons/Area/backend/views/default/components/area-edit.php

<template id="area-edit">
    <el-dialog :visible.sync="edit.visible" width="20%" title="添加区域代理" center>
        <div>
            <el-form @submit.native.prevent size="small" label-width="120px">
                <el-form-item label="用户昵称">
                    <el-autocomplete size="small" v-model="edit.nickname" value-key="nickname"
                                     @keyup.enter.native="keyUp"
                                     :fetch-suggestions="querySearchAsync" placeholder="请输入用户昵称/id/手机号"
                                     @select="areaClick"></el-autocomplete>
                </el-form-item>
				
				<el-form-item label="用户真实姓名">
				   <el-input style="width: 200px;" v-model.trim="realname" placeholder="请输入用户真实姓名"></el-input>
				</el-form-item>
				
				<el-form-item label="用户手机号码">
				   <el-input style="width: 200px;" v-model.trim="mobile" type="text" placeholder="请输入用户手机号码"></el-input>
				</el-form-item>
            </el-form>
			
            <el-form @submit.native.prevent size="small" label-width="120px">
                <el-form-item  label="等级">
                    <el-select v-model="level" placeholder="请选择区域代理等级" @change="levelChange">
                        <el-option
                                v-for="(item, index) in level_list"
                                v-if="index > 0"
                                :label="item"
                                :key="index"
                                :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-form @submit.native.prevent size="small" label-width="120px" v-if="level == 6">
                <el-form-item label="大区">
                    <el-select v-model="regional_id" placeholder="请选择大区">
                        <el-option
                                v-for="item in regional_list"
                                :label="item.regional_name"
                                :key="item.id"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template v-else-if="level>0">
                <el-form @submit.native.prevent size="small" label-width="120px">
                    <el-form-item label="省市区" prop="address">
                        <el-cascader
                                @change="addressChange"
                                :options="district"
                                :props="props"
                                v-model="address">
                        </el-cascader>
                    </el-form-item>
                </el-form>
                <el-form @submit.native.prevent size="small" label-width="120px" v-if="level > 3">
                    <el-form-item label="镇">
                        <el-select v-model="town_id" placeholder="请选择镇" @change="onChangeTown">
                            <el-option
                                    v-for="item in town_list"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form @submit.native.prevent size="small" label-width="120px" v-if="level > 4">
                    <el-form-item label="小区">
                        <el-select v-model="community_id" placeholder="请选择小区">
                            <el-option
                                    v-for="item in community_list"
                                    :label="item.community_name"
                                    :key="item.id"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editCancel" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="edit.btnLoading" style="margin-bottom: 10px;" size="small"
                       @click="editSave">保存</el-button>
        </span>
    </el-dialog>
</template>
<script>
    Vue.component('area-edit', {
        template: '#area-edit',
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                edit: {
                    visible: false,
                    keyword: '',
                    nickname: '',
                    id: '',
                    btnLoading: false,
                },
                district: [],
                address: [],
                regional_list: [],
                town_list: [],
                community_list: [],
                regional_id: null,
                province_id: 0,
                city_id: 0,
                district_id: 0,
                town_id: '',
                community_id: '',
                props: {
                    value: 'id',
                    label: 'name',
                    children: 'list',
                },
                level_list: {
                    1: '省代',
                    2: '市代',
                    3: '区代',
                    4: '镇代',
                    5: '小区代',
                    6: '大区代',
                },
                level: null,
				mobile:'',
				realname:'',
            }
        },
        watch: {
            value() {
                if (this.value) {
                    this.edit.visible = true;
                } else {
                    this.edit.id = '';
                    this.edit.nickname = '';
                    this.edit.keyword = '';
                    this.edit.visible = false;
                }
            },
            'edit.visible'() {
                if (!this.edit.visible) {
                    this.editCancel();
                }
            }
        },
        created() {
            this.getDistrict(1);
            this.getLevelList()
        },
        methods: {
            addressChange(e) {
				
                this.town_list = []
                this.town_id = '';


                if (e.length == 3) {
                    this.getTownList(e[2]);
                }
            },
            getTownList(district_id) {
                request({
                    params: {
                        r: 'area/default/get-town-list',
                        district_id: district_id
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.town_list = e.data.data.list;
                        if (JSON.stringify(this.town_list) == '[]' && (this.level == 4 || this.level == 5)) {
                            this.level = ''
                            this.$message.error('该区域无法选择该等级代理, 请重新选择');
                        }
                    }
                }).catch(e => {
                });

            },
            onChangeTown(val) {
                this.getCommunity(val)
            },
            getCommunity(town_id) {
                request({
                    params: {
                        r: 'area/community/list',
                        town_id: town_id
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.community_list = e.data.data;
                    }
                }).catch(e => {
                });
            },
            getRegional() {
                request({
                    params: {
                        r: 'area/regional/index',
                        is_select: 1
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.regional_list = e.data.data;
                    }
                }).catch(e => { console.log(e) });
            },
            levelChange(e) {
				// console.log('e=='+e)
                if (e == 6) {
                    this.getRegional();
                }else{
                    if (e >= 4) e = 4   //  如果选择的是小区代，那么就需要处理了
                    this.getDistrict(e);
                }
            },
            // 获取省市区列表
            getDistrict(level) {
                if (level) {
                    level1 = level;
                } else{
                    level1 = 1;
                }
                request({
                    params: {
                        r: 'area/default/district',
                        level: level1
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.district = e.data.data.district;
                    }
                }).catch(e => {
                });
            },
            querySearchAsync(queryString, cb) {
                this.edit.keyword = queryString;
                this.get_user(cb);
            },
            get_user(cb) {
                request({
                    params: {
                        r: 'area/default/search-user',
                        keyword: this.edit.keyword
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        cb(res.data.data.list)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            areaClick(row) {
				//console.log('选择了用户row='+JSON.stringify(row))
                this.edit.id = row.id
                if (row.mobile != '') this.mobile = row.mobile
            },

            editCancel() {
                this.$emit('input', false);
                navigateTo({
                    r: 'area/default/index',
                })
            },
            editSave() {
				if(!this.edit.id){
					return this.$message.error("请选择用户");
				}
				if(!this.realname){
					return this.$message.error("请输入用户真实姓名");
				}
				if(!this.mobile || (this.mobile + '').length != 11){
					return this.$message.error("请输入正确手机号码");
				}
				if(!this.level){
					return this.$message.error("请选择等级");
				}
                if (this.level == 6 && (this.regional_id == null || this.regional_id == '')) {
                    return this.$message.error("请选择大区");
                }
				if(!this.address && this.level != 6){
					return this.$message.error("请选择省市区");
				}
				
                
                if (this.level > 3 && this.level != 6) {
                    if (this.town_id == '' || this.town_id == undefined) {
                        this.$message.error('请选择镇');
                        return;
                    }
                }
                if (this.level > 4 && this.level != 6) {
                    if (this.community_id == '' || this.community_id == undefined) {
                        this.$message.error('请选择小区');
                        return;
                    }
                }
                this.address.push(parseInt(this.town_id));
                this.address.push(parseInt(this.community_id));
                if (this.level == 1) {
                    this.province_id = this.address[0];
                    this.city_id = 0;
                    this.district_id = 0;
                    this.town_id = 0;
                    this.community_id = 0;
                    this.regional_id = 0;
                }
                if (this.level == 2) {
                    this.province_id = this.address[0];
                    this.city_id = this.address[1];
                    this.district_id = 0;
                    this.town_id = 0;
                    this.community_id = 0;
                    this.regional_id = 0;
                }
                if (this.level == 3) {
                    this.province_id = this.address[0];
                    this.city_id = this.address[1];
                    this.district_id = this.address[2];
                    this.town_id = 0;
                    this.community_id = 0;
                    this.regional_id = 0;
                }
                if (this.level == 4) {
                    this.province_id = this.address[0];
                    this.city_id = this.address[1];
                    this.district_id = this.address[2];
                    this.town_id = this.address[3];
                    this.community_id = 0;
                    this.regional_id = 0;
                }
                if (this.level == 5) {
                    this.province_id = this.address[0];
                    this.city_id = this.address[1];
                    this.district_id = this.address[2];
                    this.town_id = this.address[3];
                    this.community_id = this.address[4];
                    this.regional_id = 0;
                }
                if (this.level == 6) {
                    this.province_id = 0;
                    this.city_id = 0;
                    this.district_id = 0;
                    this.town_id = 0;
                    this.community_id = 0;
                }
				
				// console.log('提交前的参数user_id='+this.edit.id)
				// console.log('提交前的参数province_id='+this.province_id)
				// console.log('提交前的参数city_id='+this.city_id)
				// console.log('提交前的参数district_id='+this.district_id)
				// console.log('提交前的参数town_id='+this.town_id)
				// console.log('提交前的参数level='+this.level)
			
				this.edit.btnLoading = true;
                let _data = {
                    /*  id: this.edit.id, */
                    user_id: this.edit.id,
                    level: this.level,
                    province_id: this.province_id,
                    city_id: this.city_id,
                    district_id: this.district_id,
                    town_id: this.town_id,
                    community_id: this.community_id,
                    regional_id: this.regional_id,
                    mobile:this.mobile,
                    realname:this.realname
                }
                request({
                    params: {
                        r: 'area/default/edit',
                    },
                    method: 'post',
                    data: _data
                }).then(response => {
                    this.edit.btnLoading = false;
                    if (response.data.code == 0) {
                        this.$message.success('添加成功');
                        this.editCancel();
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.edit.btnLoading = false;
                });
            },
            keyUp() {
                console.log('key up')
            },
            getLevelList() {
                request({
                    params: {
                        r: 'area/default/level-list',
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.level_list = e.data.data;
                    }
                }).catch(e => {
                });
            }
        }
    });
</script>