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

<!--注：本组件仅做省市区选择，返回值仅为选中的省市区数组-->
<template id="com-district-single-rule">
    <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-rule', {
        template: '#com-district-single-rule',
        data: function () {
            return {
                p_index: 0,
                c_index: 0,
                d_index: 0,
                districtLoading: false,
                defaultList: [], // 所有省市区
                tempList: [],// 已选择待返回的省市区
                list: [], // 渲染页面使用省市区列表
                backList: [], // 返回的列表
                editIdsChunk: []
            }
        },
        props: {
            detail: Array, // 传入的所有省市区数组
            edit: Array, // 传入的选中省市区数组
            level: Number, // 展示省市区的级数
            params: Array,// 传出值
            notRule: 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));
                this.list = this.setSelectedList(this.list, 0)
            },

            // 判断哪些省市区已经选择
            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;
            },
            setSelectedList(list, level = 1) {// 设置选中不能再选值
                if (typeof list == 'undefined') {
                    return list;
                }

                for (let i in list) {
                    if (typeof list[i].children == 'undefined') {
                        continue;
                    }
                    if (level === 0) {
                        list[i].children = this.setSelectedList(list[i].children, 0)
                    }
                    for (let j in list[i].children) {
                        if (this.notRule.includes(list[i].children[j].id)) {
                            list[i].children[j].unchecked = true;
                        }
                    }
                    if (this.notRule.includes(list[i].id)) {
                        list[i].unchecked = true;
                    }
                    list[i].children = this.setSelectedList(list[i].children, 1);
                }
                return list;
            },
            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;
            },
            pushEditIdsChunk(id) {
                let ids = []
                if (typeof id !== 'object') {
                    ids.push(id)
                } else {
                    ids = id
                }
                for (let i in ids) {
                    let pIndex = this.getModIndex(ids[i])
                    if (this.editIdsChunk[pIndex] === undefined) {
                        this.editIdsChunk[pIndex] = []
                    }
                    //  是否已经存在 不然会重复
                    if (this.editIdsChunk[pIndex].indexOf(ids[i]) === -1) {
                        this.editIdsChunk[pIndex].push(ids[i])
                    }
                }
                this.$forceUpdate()
            },
            getCheckedSelectNum(list, level = 1) {// 获取选中对应个数
                let checkedItemsCount = 0;
                if (!Array.isArray(list)) {
                    throw new Error('List must be an array.');
                }
                if (level === 1) {
                    list.forEach(item => {
                        if (Array.isArray(item.children) && item.children.length > 0) {
                            const hasCheckedChildren = item.children.some(child => child.checked);
                            if (hasCheckedChildren) {
                                checkedItemsCount++;
                            }
                        }
                    });
                } else {
                    list.forEach(item => {
                        if (item.checked) {
                            checkedItemsCount++;
                        }
                    });
                }
                return checkedItemsCount;
            }
        }
    });
</script>