修复地址联动组件，回显数据时，部分列显示异常的问题

Tevin

2024-07-20 0512e645421178bc01612f4a1766127b66edc032

 forms/chinaArea/CChinaArea.vue

@@ -37,8 +37,6 @@
import { $locations } from '@components/forms/chinaArea/ChinaLocations';
import './cChinaArea.scss';

const { getRegionNames, getRegionCodes } = $locations;

export default {
    name: 'CChinaArea',
    components: {
@@ -63,7 +61,7 @@
    },
    data() {
        return {
            loading: false,
            loading: true,
            range: [],
            current: [],
        };
@@ -87,120 +85,129 @@
                    return;
                }
            }
            const locationTree = $locations.getLocationTree(this.level);
            const curVal = this.itemRes.formData[this.itemRes.name];
            const range = [
                locationTree,
                locationTree[0].children,
                locationTree[0].children[0].children,
            ];
            const current = [0, 0, 0];
            if (this.level === 4) {
                range[3] = locationTree[0].children[0].children[0].children;
                current[3] = '';
            }
            // 有值
            if (curVal && curVal.length > 0) {
                // 省
                if (curVal[0]) {
                    const proviceIndex = locationTree.findIndex(
                        provice => provice.value === curVal[0]
                    );
                    if (proviceIndex >= 0) {
                        range[1] = locationTree[proviceIndex].children;
                        range[2] = locationTree[proviceIndex].children[0].children;
                        current[0] = proviceIndex;
                        // 市
                        if (curVal[1]) {
                            const cityIndex = range[1].findIndex(
                                city => city.value === curVal[1]
            $locations.getLocationTree(this.level, locationTree => {
                const curVal = this.itemRes.formData[this.itemRes.name];
                const range2 = (locationTree[0] || {}).children || [];
                const range3 = (range2[0] || {}).children || [];
                const range = [locationTree, range2, range3];
                const current = [0, 0, 0];
                if (this.level === 4) {
                    const range4 = (range3[0] || {}).children || [];
                    range[3] = range4;
                    current[3] = '';
                }
                // 有值
                if (curVal && curVal.length > 0) {
                    $locations.getRegionCodes(curVal, codes => {
                        // 省
                        if (codes[0]) {
                            const proviceIndex = locationTree.findIndex(
                                provice => provice.value === codes[0],
                            );
                            if (cityIndex >= 0) {
                                range[2] = range[1][cityIndex].children;
                                current[1] = cityIndex;
                            }
                            // 区
                            if (curVal[2]) {
                                const distIndex = range[2].findIndex(
                                    dist => dist.value === curVal[2]
                                );
                                if (distIndex >= 0) {
                                    current[2] = distIndex;
                                }
                                // 街
                                if (this.level === 4 && curVal[3]) {
                                    const streetIndex = range[3].findIndex(
                                        street => street.value === curVal[3]
                            if (proviceIndex >= 0) {
                                range[1] = locationTree[proviceIndex].children;
                                range[2] =
                                    locationTree[proviceIndex].children[0].children;
                                current[0] = proviceIndex;
                                // 市
                                if (codes[1]) {
                                    const cityIndex = range[1].findIndex(
                                        city => city.value === codes[1],
                                    );
                                    if (streetIndex >= 0) {
                                        current[3] = streetIndex;
                                    if (cityIndex >= 0) {
                                        range[2] = range[1][cityIndex].children;
                                        current[1] = cityIndex;
                                    }
                                    // 区
                                    if (codes[2]) {
                                        const distIndex = range[2].findIndex(
                                            dist => dist.value === codes[2],
                                        );
                                        if (distIndex >= 0) {
                                            current[2] = distIndex;
                                        }
                                        // 街
                                        if (this.level === 4) {
                                            range[3] =
                                                range[2][current[2]].children || [];
                                            const streetIndex = range[3].findIndex(
                                                street => street.value === codes[3],
                                            );
                                            if (streetIndex >= 0) {
                                                current[3] = streetIndex;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    });
                }
            }
            this.range = range;
            this.current = current;
                this.range = range;
                setTimeout(() => {
                    this.current = current;
                }, 100);
            });
        },
        updateColumns(roll) {
            const locationTree = $locations.getLocationTree(this.level);
            // 第一列滚动
            if (roll.column === 0) {
                const cities = locationTree[roll.value].children;
                this.range = [this.range[0], cities, cities[0].children];
                this.current = [roll.value, 0, 0];
                if (this.level === 4) {
                    const range3 = (cities[0].children[0] || {}).children || [];
                    this.range.splice(3, 1, range3);
                    this.current.splice(3, 1, '');
            $locations.getLocationTree(this.level, locationTree => {
                // 第一列滚动
                if (roll.column === 0) {
                    const cities = locationTree[roll.value].children;
                    this.range = [this.range[0], cities, cities[0].children];
                    this.current = [roll.value, 0, 0];
                    if (this.level === 4) {
                        const range3 = (cities[0].children[0] || {}).children || [];
                        this.range.splice(3, 1, range3);
                        this.current.splice(3, 1, '');
                    }
                }
            }
            // 第二列滚动
            else if (roll.column === 1) {
                const dists = locationTree[this.current[0]].children[roll.value].children;
                this.range = [this.range[0], this.range[1], dists];
                this.current = [this.current[0], roll.value, 0];
                if (this.level === 4) {
                    const range3 = dists[0].children || [];
                    this.range.splice(3, 1, range3);
                    this.current.splice(3, 1, '');
                // 第二列滚动
                else if (roll.column === 1) {
                    const dists =
                        locationTree[this.current[0]].children[roll.value].children;
                    this.range = [this.range[0], this.range[1], dists];
                    this.current = [this.current[0], roll.value, 0];
                    if (this.level === 4) {
                        const range3 = dists[0].children || [];
                        this.range.splice(3, 1, range3);
                        this.current.splice(3, 1, '');
                    }
                }
            }
            // 第三列滚动
            else if (roll.column === 2) {
                this.current.splice(2, 1, roll.value);
                if (this.level === 4) {
                    const streets =
                        locationTree[this.current[0]].children[this.current[1]].children[
                            roll.value
                        ].children || [];
                    this.range.splice(3, 1, streets);
                    this.current.splice(3, 1, '');
                // 第三列滚动
                else if (roll.column === 2) {
                    this.current.splice(2, 1, roll.value);
                    if (this.level === 4) {
                        const streets =
                            locationTree[this.current[0]].children[this.current[1]]
                                .children[roll.value].children || [];
                        this.range.splice(3, 1, streets);
                        this.current.splice(3, 1, '');
                    }
                }
            }
            // 第四列滚动
            else if (roll.column === 3) {
                this.current.splice(3, 1, roll.value);
            }
                // 第四列滚动
                else if (roll.column === 3) {
                    this.current.splice(3, 1, roll.value);
                }
            });
        },
        handleChange(detail) {
            const locationTree = $locations.getLocationTree(this.level);
            const names = [];
            const provice = locationTree[detail[0]];
            names[0] = provice.label;
            const city = provice.children[detail[1]] || {};
            names[1] = city.label;
            const dist = city.children[detail[2]] || {};
            names[2] = dist.label;
            if (this.level === 4) {
                const street = (dist.children || [])[detail[3]] || {};
                if (street.value) {
                    names[3] = street.label;
            $locations.getLocationTree(this.level, locationTree => {
                const names = [];
                const provice = locationTree[detail[0]];
                names[0] = provice.label;
                const city = provice.children[detail[1]] || {};
                names[1] = city.label;
                const dist = city.children[detail[2]] || {};
                names[2] = dist.label;
                if (this.level === 4) {
                    const street = (dist.children || [])[detail[3]] || {};
                    if (street.value) {
                        names[3] = street.label;
                    }
                }
            }
            this.itemRes.onChange(names);
                this.itemRes.onChange(names);
            });
        },
        _getGeoLocation() {
            this.loading = true;
@@ -217,14 +224,21 @@
                            return;
                        }
                        const address = result.addressComponents;
                        const codes = getRegionCodes([
                        const regions = [
                            address.province.replace(/省|市|自治区|特别行政区/g, ''),
                            address.city,
                            address.district,
                        ]);
                        if (codes && codes.length > 0) {
                            this.itemRes.onChange(codes);
                        ];
                        if (this.level === 4) {
                            regions.push(address.street);
                        }
                        $locations.getRegionCodes(regions, codes => {
                            if (codes && codes.length > 0) {
                                $locations.getRegionNames(codes, names => {
                                    this.itemRes.onChange(names);
                                });
                            }
                        });
                        this.loading = false;
                    });
                },
@@ -235,6 +249,7 @@
    },
    mounted() {
        $locations.onReady(() => {
            this.loading = false;
            this.handleOpen();
            // 开启自动定位时，延迟 0.1 秒后发起定位
            if (this.autoGeo) {