qimall/backend/views/components/common/com-district-single.php

<!--注：本组件仅做省市区选择，返回值仅为选中的省市区数组-->
<template id="com-district-single">
    <div class="com-district-single">
        <el-card v-loading="districtLoading" shadow="never" body-style="padding:0" style="border:0;min-height: 100px;">
            <div flex="dir:left box:mean">
                <template v-if="list.length > 0">
                    <el-card style="max-height: 400px;overflow-y: auto;margin-right: 20px;" shadow="never">
                        <template v-for="(item, index) in list">
                            <div class="el-checkbox" style="margin: 0 0 20px;display: block"
                                 @click="selectProvince(index)">
                                <el-checkbox @change="pickerChange(item, index)" v-model="item.checked" :disabled="item.unchecked">
                                    <span style="display: none" class="el-checkbox__label">{{item.name}}</span>
                                </el-checkbox>
                                <span class="el-checkbox__label">{{item.name}}</span>
                            </div>
                        </template>
                    </el-card>
                    <el-card style="max-height: 400px;overflow-y: auto;margin-right: 20px;" shadow="never"
                         v-if="list[p_index].children && list[p_index].children.length > 0">
                        <template v-for="(item, index) in list[p_index].children">
                            <div class="el-checkbox" @click="c_index = index" style="margin: 0 0 20px;display: block">
                                <el-checkbox @change="pickerChange(item, index)" v-model="item.checked" :disabled="item.unchecked">
                                    <span style="display: none" class="el-checkbox__label">{{item.name}}</span>
                                </el-checkbox>
                                <span class="el-checkbox__label">{{item.name}}</span>
                            </div>
                        </template>
                    </el-card>
                    <el-card style="max-height: 400px;overflow-y: auto;margin-right: 20px;" shadow="never"
                         v-if="list[p_index].children[c_index].children && list[p_index].children[c_index].children.length > 0">
                        <template v-for="(item, index) in list[p_index].children[c_index].children">
                            <div class="el-checkbox" @click="d_index = index" style="margin: 0 0 20px;display: block">
                                <el-checkbox @change="pickerChange(item, index)" v-model="item.checked" :disabled="item.unchecked">
                                    <span style="display: none" class="el-checkbox__label">{{item.name}}</span>
                                </el-checkbox>
                                <span class="el-checkbox__label">{{item.name}}</span>
                            </div>
                        </template>
                    </el-card>
                </template>
            </div>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-district-single', {
        template: '#com-district-single',
        data: function () {
            return {
                p_index: 0,
                c_index: 0,
                d_index: 0,
                districtLoading: false,
                defaultList: [], // 所有省市区
                tempList: [],// 已选择待返回的省市区
                list: [], // 渲染页面使用省市区列表
                backList: [] // 返回的列表
            }
        },
        props: {
            detail: Array, // 传入的所有省市区数组
            edit: Array, // 传入的选中省市区数组
            level: Number, // 展示省市区的级数
            params: Array,// 传出值
        },
        mounted: function () {
            let self = this;
            self.districtLoading = true;
            request({
                params: {
                    r: 'common/region/list',
                    level: this.level
                },
                method: 'get'
            }).then(function (e) {
                self.districtLoading = false;
                if (e.data.code == 0) {
                    self.defaultList = e.data.data.list;
                    self.newList();
                } else {
                    self.$message.error(e.data.msg);
                }
            }).catch(function (e) {
                self.districtLoading = false;
            });
        },
        watch: {
            edit() {
                this.setList();
            }
        },
        methods: {
            // 根据传入数据重新获取省市区列表
            newList() {
                let defaultList = this.checkList(this.defaultList, this.detail, this.edit);
                this.list = JSON.parse(JSON.stringify(defaultList));
            },

            // 判断哪些省市区已经选择
            checkList(defaultList, formDetail, edit) {
                if (typeof defaultList == 'undefined') {
                    return [];
                }
                for (let i in defaultList) {
                    defaultList[i].checked = false;
                    defaultList[i].unchecked = false;
                    defaultList[i].isIndeterminate = false;
                    if (typeof defaultList[i].children != 'undefined') {
                        defaultList[i].children = this.checkList(defaultList[i].children, formDetail, edit);
                    }
                    if (typeof edit != 'undefined') {
                        for (let j in edit) {
                            if (defaultList[i].id == edit[j].id) {
                                defaultList[i].checked = true;
                                defaultList[i].unchecked = false;
                                break;
                            }
                        }
                    }
                }
                return defaultList;
            },
            setList(list, item) {
                if (typeof list != 'undefined') {
                    for (let i in list) {
                        if (list[i].id == item.id) {
                            list[i].checked = item.checked
                            break;
                        }
                        if (typeof list[i].children != 'undefined') {
                            this.setList(list[i].children, item);
                        }
                    }
                    return list;
                } else {
                    this.newList();
                }
            },
            // 向父组件发送消息
            pickerChange(item, index) {
                this.checkSelectItem(item);
                let tempList = this.setList(this.list, item)
                this.list = JSON.parse(JSON.stringify(tempList));
                this.$emit('selected', this.backList, this.params);
            },
            checkSelectItem(item) {
                if (item.checked == true) {
                    this.backList.push({
                        'id': item.id,
                        'name': item.name,
                    });
                } else {
                    for(let i in this.backList) {
                        if (this.backList[i].id == item.id) {
                            this.backList.splice(i, 1)
                        }
                    }
                }
            },
            // 选择省份
            selectProvince(index) {
                this.p_index = index;
                this.c_index = 0;
                this.d_index = 0;
            }
        }
    });
</script>