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

<template id="area-level">
    <el-dialog :visible.sync="edit.visible" width="20%" title="修改区域代理等级" center>
        <div v-loading="edit.loading">
            <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"
                                :key="index"
                                :label="item"
                                :value="parseInt(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"
                                    :label="item.name"
                                    :key="item.id"
                                    :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>
            <el-form v-if="config.is_enable_only_dividend == 1" @submit.native.prevent size="small" label-width="120px">
                <el-form-item label="是否参与分红">
                    <label slot="label">是否参与分红
                        <el-tooltip class="item" effect="dark" placement="top-start">
                            <div slot="content">
                                开关开启的情况下该用户即享受分红条件
                            </div>
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <div>
                        <el-switch v-model="is_enable_dividend" :active-value="1"
                                   :inactive-value="0">
                        </el-switch>
                    </div>
                </el-form-item>
                <el-form-item label="商品设置" v-if="config.only_dividend_goods_type == 0 && is_enable_dividend == 1">
                    <com-dialog-select :multiple="true" @selected="onSelectedGoods" title="商品选择">
                        <el-button>选择商品</el-button>
                    </com-dialog-select>
                </el-form-item>
            </el-form>
            <el-table size="mini" border :data="goods" v-if="config.only_dividend_goods_type == 0 && is_enable_dividend == 1">
                <el-table-column label="商品ID" width="100" prop="goods_id" align="center"></el-table-column>
                <el-table-column label="商品信息" align="left">
                    <template slot-scope="scope">
                        <div class="user_img" flex="cross:center">
                            <el-image class="default-avatar" :src="scope.row.cover_pic">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="uer-nickname over1" style="color:#000;">{{scope.row.goods_name}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-popconfirm @confirm="onRemoveGoods(scope.$index)" title="您确定要移除当前商品吗？">
                            <el-button type="danger" size="mini" slot="reference">移除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </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-level', {
        template: '#area-level',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            area: Object,
            config: Object
        },
        data() {
            return {
                edit: {
                    visible: false,
                    level: '',
                    btnLoading: false,
                    list: [],
                    loading: false,
                },

                district: [],
                address: [],
                regional_list: [],
                regional_id: null,
                town_list: [],
                community_list: [],
                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,
                is_enable_dividend: 0,
                goods: [],
                goods_ids: []
            };
        },
        watch: {
            value() {
                if (this.value) {
                    // console.log('this.area='+JSON.stringify(this.area));
                    this.edit.visible = true;
                    this.level = this.area.level;
                    if (this.level == 6) {
                        this.getRegional();
                    }else{
                        this.getDistrict(this.area.level > 4 ? 4 : this.area.level);
                    }
                    switch(this.area.level) {
                        case 1:
                            this.address = [this.area.province_id];
                            break;
                        case 2:
                            this.address = [this.area.province_id,this.area.city_id];
                            break;
						case 3:
							this.address = [this.area.province_id,this.area.city_id,this.area.district_id];
							break;
                        case 4:
                            this.address = [this.area.province_id,this.area.city_id,this.area.district_id];
                            this.getTownList(this.area.district_id);
                            this.town_id = this.area.town_id;
                            break;
                        case 6:
                            this.address = [];
                            this.province_id = 0;
                            this.city_id = 0;
                            this.district_id = 0;
                            this.town_id = '';
                            this.community_id = '';
                            this.regional_id = this.area.regional_id;
                            break;
                        default:
                            this.address = [this.area.province_id,this.area.city_id,this.area.district_id];
                            this.getTownList(this.area.district_id);
                            this.town_id = this.area.town_id;
                            this.getCommunity(this.area.town_id);
                            this.community_id = this.area.community_id;
                    }

                    //  新增
                    this.goods_ids = []
                    this.goods = []
                    this.is_enable_dividend = this.area.is_enable_dividend
                    if (this.area.goods) {
                        for (const goodsKey in this.area.goods) {
                            this.goods_ids.push(this.area.goods[goodsKey].id)
                            this.goods.push({
                                goods_id: this.area.goods[goodsKey].goods_id,
                                goods_name: this.area.goods[goodsKey].goods.goods_name,
                                cover_pic: this.area.goods[goodsKey].goods.cover_pic,
                            });
                        }
                    }
                } else {
                    this.edit.id = '';
                    this.edit.visible = false;
                }
            },
            'edit.visible'() {
                if (!this.edit.visible) {
                    this.editCancel();
                }
            }
        },
        created() {
            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 => {
                });

            },
            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) {
				this.address = [];
				this.town_id = '';
                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 => {
                });
            },
            editCancel() {
                this.$emit('input', false);
            },
            onChangeTown(val) {
                if (this.level > 4) 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 => {
                });
            },
            editSave() {
                if ((!this.address || this.address.length == 0) && this.level != 6) {
                    this.$message.error('请选择地区');
                    return;
                }

                if (this.level == 4) {
                    if (this.town_id == '' || this.town_id == undefined) {
                        this.$message.error('请选择镇');
                        return;
                    }
                }

                if (this.level == 5) {
                    if (this.community_id == '' || this.community_id == undefined) {
                        this.$message.error('请选择小区');
                        return;
                    }
                }

                if (this.level == 6) {
                    if (this.regional_id == '' || this.regional_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;
                }
				this.edit.btnLoading = true;
                request({
                    params: {
                        r: 'area/default/edit'
                    },
                    method: 'post',
                    data: {
                        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,
						level: this.level,
						id: this.area.id,
						user_id:this.area.user_id,
                        is_enable_dividend: this.is_enable_dividend,
                        goods: JSON.stringify(this.goods)
                    }
                }).then(response => {
                    this.edit.btnLoading = false;
                    if (response.data.code == 0) {
                        this.$message.success('修改成功');
                        this.editCancel();
                        this.$emit('success', true);
                        this.goods = []
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.edit.btnLoading = false;
                });
            },
            onSelectedGoods(list) {
                for (let listKey in list) {
                    if (this.goods_ids.indexOf(list[listKey].id) > -1) continue;
                    this.goods_ids.push(list[listKey].id)
                    this.goods.push({
                        goods_id: list[listKey].id,
                        goods_name: list[listKey].goods_name,
                        cover_pic: list[listKey].cover_pic,
                    });
                }
            },
            onRemoveGoods(index) {
                this.goods.splice(index, 1)
            },
            getLevelList() {
                request({
                    params: {
                        r: 'area/default/level-list',
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        this.level_list = e.data.data;
                    }
                }).catch(e => {
                });
            },
        }
    });
</script>