forestry-wx/src/components/ut-picker-area/ut-picker-area.vue

<template>
    <u-popup :show="show" mode="bottom" round="30rpx" closeable @close="close">
        <view class="up-picker-area d-flex flex-cln">
            <!-- 标题 -->
            <view class="area-title">{{ title }}</view>
            <!-- 顶部链路 -->
            <view class="area-breadcrumb">
                <!-- 全国根：selectCodeMax 为空或 000000 时显示 -->
                <template v-if="isNationRoot">
                    <view class="crumb disabled" @click="onClickNationBreadcrumb">全国</view>
                    <view class="sep" v-if="selectedCodes.length">/</view>
                </template>
                <!-- 基础链路（selectCodeMax 的完整链路），仅最后一个可点击以切换到第一页（市级） -->
                <template v-for="(code, idx) in baseChain" :key="'base-' + code">
                    <view class="crumb" :class="idx === baseChain.length - 1 ? '' : 'disabled'" @click="idx === baseChain.length - 1 && onClickBaseBreadcrumb()">
                        {{ getNameByCode(code) }}
                    </view>
                    <view class="sep" v-if="idx < baseChain.length - 1 || selectedCodes.length">/</view>
                </template>

                <!-- 选中链路 -->
                <template v-for="(code, idx) in selectedCodes" :key="'sel-' + code">
                    <view class="crumb" :class="{ active: idx === currentSwiper }" @click="jumpToLevel(idx)">
                        {{ getNameByCode(code) }}
                    </view>
                    <view class="sep" v-if="idx < selectedCodes.length - 1">/</view>
                </template>
            </view>

            <!-- 滑动列区域 -->
            <view class="area-body">
                <swiper :current="currentSwiper" @change="onSwiperChange" class="area-swiper">
                    <template v-for="(parent, colIdx) in columnParents" :key="'col-' + parent">
                        <swiper-item>
                            <scroll-view
                              :id="`sv-${colIdx}`"
                              scroll-y
                              class="area-scroll"
                              :scroll-into-view="scrollIntoViewArr[colIdx]"
                            >
                                <!-- 顶部特殊项：全国（仅全国范围且首列显示） -->
                                <view v-if="isNationRoot && colIdx === 0" class="picker-item" :id="`area-item-0-000000`" @click="onPickNation">
                                    <view class="name" :class="{ selected: currentValue === '000000' }">全国</view>
                                    <up-icon v-if="currentValue === '000000'" name="checkbox-mark" color="#000" size="36rpx" />
                                </view>

                                <!-- 顶部特殊项：选择范围自身（非全国，首列显示），如 云南省 -->
                                <view v-else-if="!isNationRoot && colIdx === 0" class="picker-item" :id="`area-item-0-${canonical6(baseRoot)}`" @click="onPickBaseRoot">
                                    <view class="name" :class="{ selected: currentValue === baseRoot }">{{ getNameByCode(baseRoot) }}</view>
                                    <up-icon v-if="currentValue === baseRoot" name="checkbox-mark" color="#000" size="36rpx" />
                                </view>

                                <!-- 正常子级项 -->
                                <template v-for="item in childrenMap[parent] || []" :key="item.adcdCode">
                                    <view class="picker-item" :id="`area-item-${colIdx}-${canonical6(item.adcdCode)}`" @click="onPick(item, colIdx)">
                                        <view class="name" :class="{ selected: canonical6(selectedCodes[colIdx]) === canonical6(item.adcdCode) }">
                                            {{ item.adcdName }}
                                        </view>
                                        <up-icon v-if="canonical6(selectedCodes[colIdx]) === canonical6(item.adcdCode)" name="checkbox-mark" color="#000" size="36rpx" />
                                    </view>
                                </template>
                            </scroll-view>
                        </swiper-item>
                    </template>
                </swiper>
            </view>

            <!-- 底部操作 -->
            <view class="area-footer">
                <up-button class="btn" @click="close">取消</up-button>
                <up-button class="btn" color="#2A6D52" @click="confirmPick">确定</up-button>
            </view>
        </view>
    </u-popup>
    <up-toast ref="uToastRef" />
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, getCurrentInstance } from 'vue';
import { useClientRequest } from '@/utils/request';

type MaybeStringNumber = string | number;
interface AreaItem {
    adcdCode: string;
    adcdName: string;
}

interface ConfirmPayload {
    value: string;
    name: string;
    fullNames: string;
    fullName: string;
}

interface UtPickerAreaProps {
    modelValue?: MaybeStringNumber;
    show?: boolean;
    title?: string;
    maxLevel?: number;
    selectCodeMax?: string;
    selectedCodes?: string[];
}

const props = withDefaults(defineProps<UtPickerAreaProps>(), {
    modelValue: '',
    show: false,
    title: '选择区域',
    maxLevel: 3,
    selectCodeMax: '',
    selectedCodes: () => [] as string[],
});

const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void;
    (e: 'update:show', value: boolean): void;
    (e: 'confirm', payload: ConfirmPayload): void;
    (e: 'update:selectedCodes', value: string[]): void;
}>();

const uToastRef = ref<{ show: (opts: any) => void } | null>(null);

const close = () => emits('update:show', false);

// ---------------- 工具与状态 ----------------
// 统一为字符串，不再强制 6 位；全国仍使用 '000000'
const normalize6 = (code: MaybeStringNumber): string => String(code ?? '');
// 修复：全国返回空串用于层级与前缀判断，子级都视为全国的后代
const trim00Pairs = (code: MaybeStringNumber): string => {
    const s = normalize6(code);
    if (s === '000000') return '';
    if (s.length <= 6) {
        let t = s;
        while (t.endsWith('00')) t = t.slice(0, -2);
        return t;
    }
    // 6 位之后不做去 00 处理，直接保留扩展位（如 9/12 位）
    let first6 = s.slice(0, 6);
    while (first6.endsWith('00')) first6 = first6.slice(0, -2);
    return first6 + s.slice(6);
};
// 层级：0 全国；<=6 位时按 2 位一层；>6 位时 9/12 位按 3 位一层
const codeLevel = (code: MaybeStringNumber): number => {
    const t = trim00Pairs(code);
    if (!t) return 0;
    if (t.length <= 6) return Math.floor(t.length / 2);
    return 3 + Math.ceil((t.length - 6) / 3);
};
const isDescendant = (code: MaybeStringNumber, root: MaybeStringNumber): boolean => {
    const p = trim00Pairs(root);
    const c = trim00Pairs(code);
    return c.startsWith(p); // p=='' 时，任何 c 都成立（全国范围）
};

// 生成用于 nameMap 的最小 6 位标准键：
// - 全国固定 '000000'
// - <=6 位：去掉末尾 00 对后右补齐到 6 位
// - >6 位：取前 6 位，再按上述规则去 00 后补齐到 6 位
const nameKey = (code: MaybeStringNumber): string => {
    const s = String(code ?? '');
    if (!s || s === '000000') return '000000';
    const base6 = s.length <= 6 ? s : s.slice(0, 6);
    let t = base6;
    while (t.endsWith('00') && t.length >= 2) t = t.slice(0, -2);
    return t.padEnd(6, '0');
};
// 规范化用于比较和锚点：
// - 全国返回 '000000'
// - <=6 位：去尾部 00 对后右补齐至 6 位
// - >6 位：保持原始完整码
const canonical6 = (code: MaybeStringNumber): string => {
    const s = String(code ?? '');
    if (!s) return '';
    if (s === '000000') return '000000';
    if (s.length <= 6) {
        let t = s;
        while (t.endsWith('00')) t = t.slice(0, -2);
        return t.padEnd(6, '0');
    }
    return s;
};
const chainFromRoot = (code: MaybeStringNumber): string[] => {
    const s = normalize6(code);
    if (!s || s === '000000') return [];
    const list: string[] = [];
    // 省/市/区：统一输出为“最少6位”，少于补0，多余去掉末尾00（canonical6 内处理）
    for (let i = 2; i <= Math.min(6, s.length); i += 2) {
        list.push(canonical6(s.slice(0, i)));
    }
    // 扩展层级：9/12 位，保持真实长度；其 6 位基底已按 canonical6 规范化
    if (s.length > 6) {
        const base6 = canonical6(s).slice(0, 6);
        for (let j = 9; j <= s.length; j += 3) {
            list.push(base6 + s.slice(6, j));
        }
    }
    return list;
};

// 根（选择范围）与基础链路
const baseRoot = computed(() => {
    const c = normalize6(props.selectCodeMax || '');
    // 空值或显式全国，统一为 '000000'
    if (!c || c === '000000') return '000000';
    return trim00Pairs(c);
});
const baseChain = computed(() => {
    // 完整显示 selectCodeMax 的链路（不包含全国 '000000'）
    return chainFromRoot(baseRoot.value);
});
const isNationRoot = computed(() => baseRoot.value === '000000');

// 缓存：父code -> 子数组
const childrenMap = ref<Record<string, AreaItem[] | undefined>>({});
// 新增：进行中请求去重缓存（父code -> Promise）
const pendingMap = ref<Record<string, Promise<AreaItem[]> | undefined>>({});
// 名称缓存：code -> name
const nameMap = ref<Record<string, string>>({ '000000': '全国' });

// 选中链路（不包含 baseRoot），例如 baseRoot=省，选中市/区... 这里存 [市, 区, ...]
const selectedCodes = ref<string[]>(props?.selectedCodes || []);
const currentValue = ref<string>(''); // 当前选中最终 code

// 计算列：每列的父节点仅为“下一列的父节点”，避免最后一级再多出一列
const columnParents = computed<string[]>(() => {
    const parents: string[] = [];
    const baseL = codeLevel(baseRoot.value); // baseRoot 的绝对层级（全国=0，省=1，市=2...）
    const maxCols = Math.max(0, props.maxLevel - baseL); // 允许渲染的最大列数（例如全国根且 maxLevel=3 -> 3 列：省/市/区）
    if (maxCols <= 0) return parents;

    // 第 0 列父节点固定为 baseRoot（展示 baseRoot 的子级）
    parents.push(baseRoot.value);

    // 后续列的父节点是“上一列选中的 code”，最多渲染到 maxCols 数量；没有选中则不再渲染，避免空列
    for (let k = 1; k < maxCols; k++) {
        const parentCode = selectedCodes.value[k - 1];
        if (!parentCode) break; // 未选择上一列时，不渲染后续空列
        parents.push(parentCode);
    }
    return parents;
});

// 当前 swiper 索引（指向当前操作的列）
const currentSwiper = ref<number>(0);

// ---------------- 异步数据获取（带缓存 + 去重） ----------------
const getChildren = async (parentCode: string): Promise<AreaItem[]> => {
    const key = normalize6(parentCode);
    // 命中结果缓存
    if (childrenMap.value[key]) return childrenMap.value[key] as AreaItem[];
    // 命中请求去重缓存
    if (pendingMap.value[key]) return pendingMap.value[key] as Promise<AreaItem[]>;

    const p = (async () => {
        const res: any = await useClientRequest.get('/app/adcd/listChildrenByCode', {
            adcdCode: key,
            leval: 1,
            pageSize: 1000,
        });
        if (res?.code === 200) {
            const rows: AreaItem[] = (res.rows || []).map((x: any) => ({
                // 不再截断为 6 位，保留完整 code
                adcdCode: nameKey(x.adcdCode),
                adcdName: x.adcdName,
            }));
            childrenMap.value[key] = rows; // 写入结果缓存
            rows.forEach((r) => {
                // 名称缓存：精确键必存；仅当长度<=6时，才缓存到最少6位标准键，避免覆盖区县名称
                nameMap.value[r.adcdCode] = r.adcdName;
                nameMap.value[nameKey(r.adcdCode)] = r.adcdName;
            });
            delete pendingMap.value[key]; // 清除进行中缓存
            return rows;
        }
        childrenMap.value[key] = [];
        delete pendingMap.value[key];
        return [];
    })();

    pendingMap.value[key] = p;
    return p;
};

// 确保能显示 baseChain 的名称：逐级拉取上级的子级来命名
const ensureBaseNames = async () => {
    // 若 baseChain 为空无需处理
    if (!baseChain.value.length) return;
    // 第一层名称来自全国的子级
    await getChildren('000000');
    // 逐级往下，确保每一层的 name 显示
    for (let i = 0; i < baseChain.value.length; i++) {
        const parent = i === 0 ? '000000' : baseChain.value[i - 1];
        await getChildren(parent);
    }
};

// 获取名称
const getNameByCode = (code: string | number): string => {
    const c = normalize6(code);
    if (c === '000000') return '全国';
    // 先查精确键
    let val = nameMap.value[c];
    if (val) return val;
    // 对长度<=6的code再查最少6位标准键，避免用>6位的名称覆盖6位层级
    if (c.length <= 6) {
        const k6 = nameKey(c);
        val = nameMap.value[k6];
        if (val) return val;
    }
    // 即时回退：在已加载的 childrenMap 中查找匹配项并缓存
    for (const rows of Object.values(childrenMap.value)) {
        if (!rows) continue;
        const found = rows.find((r) => r.adcdCode === c);
        if (found) {
            nameMap.value[c] = found.adcdName;
            if (String(found.adcdCode).length <= 6) {
                nameMap.value[nameKey(found.adcdCode)] = found.adcdName;
            }
            return found.adcdName;
        }
    }
    return '';
};

// ---------------- 回显与列构造 ----------------
const toast = (msg: string) => {
    uToastRef.value?.show({ message: msg, type: 'error' });
};

// 将传入值回显为 selectedCodes（不含 baseRoot）
const applyModelValue = async (val: MaybeStringNumber): Promise<void> => {
    const v = normalize6(val);
    // 确保基础链路名称已就绪，避免回显时中文缺失
    await ensureBaseNames();
    if (!v) {
        selectedCodes.value = [];
        currentValue.value = '';
        currentSwiper.value = Math.min(columnParents.value.length - 1, 0);
        return;
    }
    if (v === '000000') {
        selectedCodes.value = [];
        currentValue.value = '000000';
        await ensureColumnsData();
        currentSwiper.value = 0;
        scrollToAllSelected();
        return;
    }
    // 新增：等于 baseRoot 自身时
    if (v === baseRoot.value) {
        selectedCodes.value = [];
        currentValue.value = baseRoot.value;
        await ensureColumnsData();
        currentSwiper.value = 0;
        scrollToAllSelected();
        return;
    }
    // 必须在选择范围内
    if (!isDescendant(v, baseRoot.value)) {
        toast('不在选择范围内');
        selectedCodes.value = [];
        currentValue.value = '';
        currentSwiper.value = 0;
        return;
    }
    const full = chainFromRoot(v);
    const base = baseChain.value;
    const baseL = codeLevel(baseRoot.value);
    const maxCols = Math.max(0, props.maxLevel - baseL);
    const picked = full.slice(base.length, base.length + maxCols);

    
    selectedCodes.value = picked;
    currentValue.value = picked.length ? picked[picked.length - 1] : baseRoot.value;
    await ensureColumnsData();
    currentSwiper.value = Math.max(0, Math.min(selectedCodes.value.length - 1, columnParents.value.length - 1));
    scrollToAllSelected();
};

// 确保每一列的 children 数据已拉取
const ensureColumnsData = async (): Promise<void> => {
    for (const parent of columnParents.value) {
        await getChildren(parent);
    }
};

// ---------------- 交互 ----------------
const onSwiperChange = (e: any) => {
    const idx = e?.detail?.current ?? 0;
    const maxIdx = Math.max(0, columnParents.value.length - 1);
    currentSwiper.value = Math.min(idx, maxIdx);
};

// 跳到链路的某一级进行重新选择
const jumpToLevel = (idx: number) => {
    // 只能跳选中链路，且 idx 为选中链路下标（不包含 baseChain）
    currentSwiper.value = idx;
};

// 选择某列的一项（到达最后一级时自动确认）
const onPick = async (item: AreaItem, colIdx: number) => {
    const code = canonical6(item.adcdCode);
    if (!isDescendant(code, baseRoot.value)) {
        return toast('不在选择范围内');
    }
    // 特判：误点到全国（正常不会走到这，因为全国走 onPickNation）
    if (code === '000000' && isNationRoot.value && colIdx === 0) {
        return onPickNation();
    }

    selectedCodes.value = [...selectedCodes.value.slice(0, colIdx), code];
    currentValue.value = code;

    // 是否达到允许的最后一列（相对 baseRoot 的列数）
    const baseL = codeLevel(baseRoot.value);
    const maxCols = Math.max(0, props.maxLevel - baseL);
    const reachedFinalColumn = (colIdx + 1) >= maxCols;
    if (reachedFinalColumn) {
        scrollToAllSelected();
        confirmPick();
        return;
    }

    await getChildren(code);
    const nextChildren = childrenMap.value[code] || [];
    currentSwiper.value = nextChildren.length ? colIdx + 1 : colIdx;
    scrollToAllSelected();
};

// 选全国
const onPickNation = (): void => {
    if (!isNationRoot.value) return;
    selectedCodes.value = [];
    currentValue.value = '000000';
    currentSwiper.value = 0;
    scrollToAllSelected();
};

// 选“选择范围自身”（非全国时的顶部项，如：云南省）
const onPickBaseRoot = async (): Promise<void> => {
    if (isNationRoot.value) return; // 全国时不走这里
    // 将当前值选为 baseRoot，自身级别
    selectedCodes.value = [];
    currentValue.value = baseRoot.value;
    currentSwiper.value = 0;

    // 若允许的列数仅 1（选择范围本身即最终列），直接确认
    const baseL = codeLevel(baseRoot.value);
    const maxCols = Math.max(0, props.maxLevel - baseL);
    if (maxCols <= 1) {
        scrollToAllSelected();
        confirmPick();
        return;
    }

    // 否则保持在第1列，滚动到该项
    await ensureColumnsData();
    scrollToAllSelected();
};

// 组装完整名称：包含基础链路与已选链路（全国仅返回“全国”）
const buildFullName = (): string => {
  if (currentValue.value === '000000') return '全国';
  const baseNames = baseChain.value.map((code) => getNameByCode(code));
  // 若当前值是 baseRoot 自身（选择范围自身），则不重复追加 selectedCodes
  const selNames = selectedCodes.value.map((code) => getNameByCode(code));
  return [...baseNames, ...selNames].filter(Boolean).join('');
};

const confirmPick = (): void => {
    if (!currentValue.value && isNationRoot.value) currentValue.value = '000000';

    const codeList = selectedCodes.value.slice();
    const nameList = codeList.map((i) => getNameByCode(i));
    const fullName = buildFullName();

    emits('update:modelValue', currentValue.value);
    emits('confirm', {
        value: currentValue.value,
        name: getNameByCode(currentValue.value),
        fullNames: nameList.join(''),
        fullName // 新增：完整地址名称
    });
    emits('update:selectedCodes', codeList);
    close();
};

// ---------------- 滚动（H5 兼容）----------------
// 选中项锚点
const scrollIntoViewArr = ref<string[]>([]);
const instance = getCurrentInstance();
const proxy = instance && instance.proxy;

const refreshScrollArrays = (): void => {
    const len = columnParents.value.length;
    // 初始化长度匹配列数
    if (scrollIntoViewArr.value.length !== len) {
        scrollIntoViewArr.value = Array(len).fill('');
    }
};

// 仅用锚点滚动
const updateScrollIntoView = (): void => {
    refreshScrollArrays();
    scrollIntoViewArr.value = scrollIntoViewArr.value.map(() => '');
    nextTick(() => {
        scrollIntoViewArr.value = columnParents.value.map((_, i) => {
            if (i === 0 && isNationRoot.value && currentValue.value === '000000') return 'area-item-0-000000';
            if (i === 0 && !isNationRoot.value && currentValue.value === baseRoot.value) return `area-item-0-${canonical6(baseRoot.value)}`;
            const code = selectedCodes.value[i];
            return code ? `area-item-${i}-${canonical6(code)}` : '';
        });
    });
};

const scrollToAllSelected = (): void => {
    updateScrollIntoView();
};

// ---------------- 监听与初始化 ----------------
const rebuildByInputs = async (): Promise<void> => {
    await ensureBaseNames();
    await ensureColumnsData();
    await applyModelValue(String(props.modelValue || ''));
};

watch(
    () => [props.selectCodeMax, props.maxLevel],
    async () => {
        // 变更范围或层级，重建链路与列
        selectedCodes.value = [];
        currentValue.value = '';
        currentSwiper.value = 0;
        await rebuildByInputs();
    },
    { immediate: true }
);

watch(
    () => props.modelValue,
    async (nv) => {
        await applyModelValue(String(nv || ''));
    }
);

// 每次列父集合变化时，刷新列数据并滚动
watch(
    () => columnParents.value.slice(),
    async () => {
        await ensureColumnsData();
        // 定位到当前列并滚动选中项
        currentSwiper.value = Math.max(0, Math.min(currentSwiper.value, columnParents.value.length - 1));
        scrollToAllSelected();
    }
);

// 点击顶部“全国”：切到省级并滚动到省级区域
const onClickNationBreadcrumb = async (): Promise<void> => {
    if (!isNationRoot.value) return;
    // 确保省级数据已加载
    await getChildren('000000');

    // 切到第 0 列（省级）
    currentSwiper.value = 0;

    // 保证滚动数组长度正确
    refreshScrollArrays();

    // 有已选省则对齐该省；否则滚到顶部
    nextTick(() => {
        const first = selectedCodes.value[0];
        scrollIntoViewArr.value.splice(0, 1, first ? `area-item-0-${canonical6(first)}` : '');
    });
};

// 点击顶部“选择范围自身”（如云南省）：切到第0列（市级）并滚动到已选市；未选则回到顶部
const onClickBaseBreadcrumb = async (): Promise<void> => {
    if (isNationRoot.value) return; // 全国时不走这里
    await getChildren(baseRoot.value); // 确保市级数据已加载
    currentSwiper.value = 0; // 切到第0列（展示 baseRoot 的子级：市）
    refreshScrollArrays();
    nextTick(() => {
        const selCity = selectedCodes.value[0]; // 若已有选中的市
        scrollIntoViewArr.value.splice(0, 1, selCity ? `area-item-0-${canonical6(selCity)}` : '');
    });
};
</script>

<style scoped lang="scss">
.up-picker-area {
    height: 70vh; /* 高度 70vh */
    display: flex;
    flex-direction: column;
    background: #fff;
}

.area-title {
    padding: 20rpx 24rpx;
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    color: #000;
    border-bottom: 1px solid #f2f2f2;
}

.area-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 16rpx 24rpx;
    gap: 8rpx;
    border-bottom: 1px solid #f2f2f2;

    .crumb {
        font-size: 28rpx;
        color: #333;
        padding: 8rpx 12rpx;
        border-radius: 8rpx;

        &.active {
            font-weight: 700;
            color: #000;
        }

        &.disabled {
            color: #999;
        }
    }

    .sep {
        color: #bbb;
        padding: 0 8rpx;
    }
}

.area-body {
    flex: 1;
    overflow: hidden;
}

.area-swiper {
    height: 100%;
}

.area-scroll {
    height: 100%;
    /* 移除 will-change 与像素滚动相关样式，仅保留稳定布局 */
}


.picker-item {
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 1px solid #f5f5f5;

    .name {
        flex: 1;
        font-size: 30rpx;
        color: #333;

        &.selected {
            font-weight: 700;
            color: #000; /* 选中项黑色加粗 */
        }
    }
}

.area-footer {
    display: flex;
    gap: 20rpx;
    padding: 20rpx 24rpx;
    border-top: 1px solid #f2f2f2;
    background: #fff;

    .btn {
        flex: 1;
    }
}
</style>