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

<!--注：本组件仅做省市区选择，返回值仅为选中的省市区数组-->
<template id="com-district-rule">
    <div class="com-district">
        <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)"
                                             v-model="item.checked"
                                             :indeterminate="item.isIndeterminate"
                                             :disabled="item.unchecked">
                                    <span style="display: none" class="el-checkbox__label">{{item.name}}</span>
                                </el-checkbox>
                                <span class="el-checkbox__label">{{item.name}}
                                    <span class="el_checkbox_select" v-if="getCheckedSelectNum(item.children, 1) > 0"
                                          v-html="'(已选' + getCheckedSelectNum(item.children, 1) + ')'">
                                    </span>
                                </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)"
                                             v-model="item.checked"
                                             :indeterminate="item.isIndeterminate"
                                             :disabled="item.unchecked">
                                    <span style="display: none" class="el-checkbox__label">{{item.name}}</span>
                                </el-checkbox>
                                <span class="el-checkbox__label">{{item.name}}
                                    <span class="el_checkbox_select" v-if="getCheckedSelectNum(item.children, 2) > 0"
                                          v-html="'(已选' + getCheckedSelectNum(item.children, 2) + ')'">
                                    </span>
                                </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)"
                                             v-model="item.checked"
                                             :indeterminate="item.isIndeterminate"
                                             :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>
                    <!--                                             :checked="editIds.indexOf(item.id) > -1"-->
                    <el-card style="max-height: 400px;overflow-y: auto;margin-right: 20px;" shadow="never"
                             v-if="level == 4 && list[p_index].children[c_index].children[d_index].children && list[p_index].children[c_index].children[d_index].children.length > 0">
                        <template v-for="(item, index) in list[p_index].children[c_index].children[d_index].children">
                            <div class="el-checkbox" @click="t_index = index" style="margin: 0 0 20px;display: block">
                                <el-checkbox @change="pickerChange(item)"
                                             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-rule', {
        template: '#com-district-rule',
        data: function () {
            return {
                p_index: 0,
                c_index: 0,
                d_index: 0,
                t_index: 0,
                districtLoading: false,
                defaultList: [], // 所有省市区
                tempList: [],// 已选择待返回的省市区
                list: [], // 渲染页面使用省市区列表
                isIndeterminateIds: [], //
                editIdsChunk: []
            }
        },
        props: {
            detail: Array, // 传入的所有省市区数组
            edit: Array, // 传入的选中省市区数组
            level: Number, // 展示省市区的级数
            params: Array, // 传出值
            mall_id: Number,
            is_area_limit_town: Number,
            dialogVisibles:Boolean,
            notRule:Array //传入其它不能选择值
        },
        mounted: function () {
            let self = this;
            self.districtLoading = true;
            request({
                params: {
                    r: 'common/region/list',
                    level: this.level,
                    mall_id: this.mall_id,
                    is_area_limit_town: this.is_area_limit_town
                },
                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: {
            // 监听传入的省市区数组
            detail() {
                this.newList();
            },
            edit() {
                this.newList();
            },
            dialogVisibles(newVal) {
                if(newVal){
                    this.resetNewList();
                }
            }
        },
        methods: {
            // 根据传入数据重新获取省市区列表
            newList() {
                if (this.editIdsChunk.length === 0) {
                    this.pushEditIdsChunk(this.edit.map(val => {
                        return val.id
                    }))
                    let defaultList = this.checkList(JSON.parse(JSON.stringify(this.defaultList)), this.edit);
                    let listP = this.setListUnchecked(defaultList, 1);
                    let list = this.setListUnchecked(listP, 0);
                    this.list = JSON.parse(JSON.stringify(list));
                }
            },
            resetNewList() {
                this.editIdsChunk = []
                if (this.editIdsChunk.length === 0) {
                    this.pushEditIdsChunk(this.edit.map(val => {
                        return val.id
                    }))
                    let defaultList = this.checkList(JSON.parse(JSON.stringify(this.defaultList)), this.edit);
                    let listP = this.setListUnchecked(defaultList, 1);
                    let list = this.setListUnchecked(listP, 0);
                    this.list = JSON.parse(JSON.stringify(list));
                    this.selectProvince(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 formDetail != 'undefined') {
                        for (let j in formDetail) {
                            if (typeof formDetail[j].children != 'undefined') {
                                for (let k in formDetail[j].children) {
                                    if (defaultList[i].id == formDetail[j].children[k].id) {
                                        defaultList[i].unchecked = true;
                                        break;
                                    }
                                }
                            } else {
                                if (defaultList[i].id == formDetail[j].id) {
                                    defaultList[i].unchecked = true;
                                    break;
                                }
                            }
                        }
                    }
                    if (this.editIdsChunk.length > 0) {
                        defaultList[i].checked = this.isInEditIdsChunk(defaultList[i].id) > -1
                        defaultList[i].unchecked = false;
                    }

                }
                return defaultList;
            },
            // 重新赋值已经选择的省市区level == 1父级影响子级||level == 0子级影响父级
            setListUnchecked(list, level = 1) {
                if (typeof list == 'undefined') {
                    return list;
                }
                for (let i in list) {
                    if (typeof list[i].children != 'undefined') {
                        if(level == 0) {
                            list[i].children = this.setListUnchecked(list[i].children, 0);
                        }
                        let unchecked = false;
                        let checkCount = 0;
                        let isIndeterminateCount = 0;
                        for (let j in list[i].children) {
                            if (list[i].unchecked && level == 1) {
                                list[i].children[j].unchecked = true;
                            }
                            if (list[i].children[j].unchecked) {
                                unchecked = true;
                            }
                            if (list[i].checked) {
                                list[i].children[j].checked = true;
                            }
                            if(list[i].children[j].checked) {
                                checkCount++;
                            }
                            if(list[i].children[j].isIndeterminate) {
                                isIndeterminateCount++;
                            }
                            if (this.notRule.includes(list[i].children[j].id)){
                                list[i].children[j].unchecked =true;
                            }
                        }
                        if (unchecked && level == 0) {
                            list[i].unchecked = true;
                        }
                        if(list[i].children.length == checkCount) {
                            list[i].checked = true;
                        } else if (checkCount > 0) {
                            list[i].checked = false;
                            list[i].isIndeterminate = true;
                        } else {
                            list[i].checked = false;
                            if(isIndeterminateCount > 0) {
                                list[i].isIndeterminate = true;
                            } else {
                                list[i].isIndeterminate = false;
                            }
                        }
                        if (this.notRule.includes(list[i].id)){
                            list[i].unchecked =true;
                        }

                        if(level == 1) {
                            list[i].children = this.setListUnchecked(list[i].children, 1);
                        }
                    }
                }
                return list;
            },
            // 将当前值的子列表的选中状态与当前值一致
            changeAllList(list, checked) {
                let ids = []
                if (typeof list != 'undefined') {
                    for (let i in list) {
                        if (typeof list[i].children != 'undefined') {
                            list[i].children = this.changeAllList(list[i].children, checked);
                        }
                        list[i].checked = checked;
                        // if (checked && this.editIds.indexOf(list[i].id) === -1) {
                        if (checked && this.isInEditIdsChunk(list[i].id) === -1) {
                            ids.push(list[i].id)
                        }
                        // if (!checked && this.editIds.indexOf(list[i].id) > -1) {
                        if (!checked && this.isInEditIdsChunk(list[i].id) > -1) {
                            // this.editIds.splice(this.editIds.indexOf(list[i].id), 1)
                            this.spliceEditIdsChunk(list[i].id)
                        }
                    }
                    if (ids.length > 0) {
                        this.pushEditIdsChunk(ids)
                    }
                }
                return list;
            },
            // 重置所有省市区的选中状态 返回已选中的省市区
            setTempList(list) {
                let newList = [];
                let checkCount = 0;
                let isIndeterminateCount = 0;

                for (let i in list) {   //  省
                    let iChecked = true
                    let iIsIndeterminate = false
                    if (typeof list[i].children != 'undefined') {   //  市
                        for (let i1 in list[i].children) {
                            let i1Checked = true
                            let i1IsIndeterminate = false
                            if (typeof list[i].children[i1].children != 'undefined') {  //  区
                                for (let i2 in list[i].children[i1].children) {
                                    //  如果第三级被选中，那么就不处理第四级
                                    let i2Checked = true
                                    let i2IsIndeterminate = false
                                    //  全选，部分选，全不选
                                    if (typeof list[i].children[i1].children[i2].children != 'undefined') { //  镇
                                        for (let i3 in list[i].children[i1].children[i2].children) {
                                            if (this.isInEditIdsChunk(list[i].children[i1].children[i2].children[i3].id) > -1) {
                                                newList.push({
                                                    id: list[i].children[i1].children[i2].children[i3].id,
                                                    name: list[i].children[i1].children[i2].children[i3].name
                                                });
                                                i2IsIndeterminate = true
                                                i1IsIndeterminate = true
                                                iIsIndeterminate = true //  有一个为TRUE那么就肯定为TRUE
                                            } else {
                                                i2Checked = false;
                                            }
                                        }
                                    } else {
                                        i2Checked = this.isInEditIdsChunk(list[i].children[i1].children[i2].id) > -1
                                    }
                                    list[i].children[i1].children[i2].checked = i2Checked
                                    list[i].children[i1].children[i2].isIndeterminate = i2Checked ? false : i2IsIndeterminate
                                    if (i2Checked) {
                                        this.pushEditIdsChunk(list[i].children[i1].children[i2].id)
                                        i1IsIndeterminate = true
                                        iIsIndeterminate = true //  有一个为TRUE那么就肯定为TRUE
                                        newList.push({
                                            id: list[i].children[i1].children[i2].id,
                                            name: list[i].children[i1].children[i2].name
                                        });
                                    } else {
                                        i1Checked = false
                                        this.spliceEditIdsChunk(list[i].children[i1].children[i2].id)
                                    }
                                }
                            } else {
                                i1Checked = this.isInEditIdsChunk(list[i].children[i1].id) > -1
                            }
                            list[i].children[i1].checked = i1Checked
                            list[i].children[i1].isIndeterminate = i1Checked ? false : i1IsIndeterminate
                            if (i1Checked) {
                                this.pushEditIdsChunk(list[i].children[i1].id)
                                iIsIndeterminate = true
                                newList.push({
                                    id: list[i].children[i1].id,
                                    name: list[i].children[i1].name
                                });
                            } else {
                                iChecked = false
                                this.spliceEditIdsChunk(list[i].children[i1].id)
                            }
                        }
                    } else {
                        iChecked = this.isInEditIdsChunk(list[i].id) > -1
                    }

                    list[i].checked = iChecked
                    list[i].isIndeterminate = iChecked ? false : iIsIndeterminate
                    if (iChecked) {
                        this.pushEditIdsChunk(list[i].id)
                        newList.push({
                            id: list[i].id,
                            name: list[i].name
                        });
                    } else {
                        this.spliceEditIdsChunk(list[i].id)
                    }
                }

                /*
                for (let i in list) {
                    if (typeof list[i].children != 'undefined') {
                        let childList = this.setTempList(list[i].children);
                        if (childList.isIndeterminateCount > 0) {
                            // list[i].checked = false;
                            // list[i].isIndeterminate = true;
                            // this.setIsIndeterminateIds(list[i].id, true)
                            // isIndeterminateCount++;
                            // newList = newList.concat(childList.newList);
                        } else if (childList.checkCount < list[i].children.length) {
                            // list[i].checked = false;
                            if (childList.checkCount > 0) {
                                // list[i].isIndeterminate = true;
                                // this.setIsIndeterminateIds(list[i].id, true)
                                // isIndeterminateCount++;
                                // newList = newList.concat(childList.newList);
                            } else {
                                // list[i].isIndeterminate = false;
                                // this.setIsIndeterminateIds(list[i].id, false)
                            }
                        } else if(childList.checkCount == list[i].children.length){
                            // console.log('setTempList', list[i].id, list[i].children, childList)
                            // list[i].checked = true;
                            // list[i].isIndeterminate = false;
                            // this.setIsIndeterminateIds(list[i].id, false)
                            // newList = newList.concat(childList.newList);
                        }else {
                            if (list[i].children > 0) {
                                // list[i].checked = true;
                            } else {
                                // list[i].checked = false;
                            }
                            // list[i].isIndeterminate = false;
                            // this.setIsIndeterminateIds(list[i].id, false)
                        }
                    }
                    // if (list[i].checked) {
                    if (this.editIds.indexOf(list[i].id) > -1) {
                    //     checkCount++;
                        // newList.push(list[i]);
                    }
                }*/
                let _ = this
                setTimeout(() => {
                    _.list = list
                }, 5)

                return {
                    newList: newList,
                    checkCount: checkCount,
                    isIndeterminateCount: isIndeterminateCount
                };
            },
            // 向父组件发送消息
            pickerChange(item) {
                if (item.checked) {
                    this.pushEditIdsChunk(item.id)
                } else {
                    this.spliceEditIdsChunk(item.id)
                }
                this.changeAllList(item.children, item.checked);
                let tempList = this.setTempList(this.list);
                this.tempList = tempList.newList;
                this.$forceUpdate()
                this.$emit('selected', this.tempList, this.params);
            },
            // 选择省份
            selectProvince(index) {
                this.p_index = index;
                this.c_index = 0;
                this.d_index = 0;
                this.t_index = 0;
            },
            setIsIndeterminateIds(id, value) {
                let index = this.isIndeterminateIds.indexOf(id)
                if (index === -1 && value) {
                    this.isIndeterminateIds.push(id)
                }
                if (!value && index > -1) {
                    this.isIndeterminateIds.splice(index, 1);
                }
            },
            isInEditIdsChunk(id) {
                let pIndex = this.getModIndex(id)
                let index = -1;
                if (this.editIdsChunk[pIndex] !== undefined) {
                    index = this.editIdsChunk[pIndex].indexOf(id)
                }
                return index
            },
            getModIndex(id) {
                if (isNaN(parseInt(id))) {
                    id = parseInt(id.substring(id.startsWith("__") ? 2 : 1))
                }
                return id % 100
            },
            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()
            },
            spliceEditIdsChunk(id) {
                let pIndex = this.getModIndex(id)
                let index = this.isInEditIdsChunk(id)
                if ('spliceEditIdsChunk', index > -1) {
                    this.editIdsChunk[pIndex].splice(index, 1)
                    let _ = 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>
<style>
    .el-checkbox__label{
        padding-left: 5px!important;
    }
    .el_checkbox_select{
        color: #02A7F0;
    }
</style>