ow

uniapp/youjiala/src/components/family-tree-chart/family-tree-chart.vue

@@ -0,0 +1,578 @@
+<script setup lang="ts">
+/**
+ * 族谱图（原生递归树容器）：全平台不依赖 @antv/g6，用 scroll-view + 递归 family-tree-node 绘制。
+ *
+ * 一个组件承载两种数据源（对齐旧 WebVue 的两张 G6 图）：
+ * - mode="sub"（谱系图）：根 = 当前族员（props.root.CurrentPerson），子树按需懒加载——
+ *   点未加载的子女 emit("select-child")，页面拉完写进 props.loadedNodes 再回来展开；
+ * - mode="full"（祖谱系图）：组件内部 FindAllByTreeId 拉全族三张表（人员/夫妻/亲子）拍平索引，
+ *   从始祖向下渲染；同一孩子挂多个父时只在「承嗣/主承担」父下展开，其余父仅显示引用卡（对齐旧图）。
+ *
+ * 展开态、性别/关系文案、头像查表都集中在这里，node 只经 inject 的 api 取用（见 types.ts）。
+ */
+import type { LoadedTreeNode } from "./types";
+import type { FamilyTreeChildrenMapViewEntity } from "@/data/auto/familyTreeChildrenMapViewEntity";
+import type { FamilyTreeData } from "@/data/auto/familyTreeData";
+import type { FamilyTreeSpouseMapViewEntity } from "@/data/auto/familyTreeSpouseMapViewEntity";
+import { useLocale } from "uview-pro";
+import { computed, provide, ref, watch } from "vue";
+import { usePolicyOptions } from "@/composables/usePolicyOptions";
+import familyTreeService from "@/service/master/familyTreeService";
+import { FAMILY_TREE_CHART_API } from "./types";
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    /** sub=当前族员子树（懒加载）；full=祖谱全树 */
+    mode: { type: String as () => "sub" | "full", default: "sub" },
+    treeId: { type: String, default: "" },
+    /** sub 模式数据源：当前族员所在族谱 */
+    root: { type: Object as () => FamilyTreeData | null, default: null },
+    /** sub 模式已展开加载的族员（personId -> 子树） */
+    loadedNodes: { type: Object as () => Record<string, LoadedTreeNode>, default: () => ({}) },
+    title: { type: String, default: "" },
+});
+
+const emit = defineEmits<{
+    (e: "update:visible", value: boolean): void;
+    (e: "select-child", personId: string): void;
+    (e: "pick-person", personId: string): void;
+}>();
+
+const { t } = useLocale();
+const { getPolicyText } = usePolicyOptions();
+
+/** 展开状态：personId -> 是否展开（子树/全树共用） */
+const expanded = ref<Record<string, boolean>>({});
+const loading = ref(false);
+
+// ===== 全树模式：FindAllByTreeId 拍平出的索引 =====
+interface FullIndex {
+    rootId: string;
+    personMap: Map<string, any>;
+    spousesOf: Map<string, any[]>;
+    childrenOf: Map<string, any[]>;
+    parentsOf: Map<string, { parentId: string; relation?: string }[]>;
+    /** 当前族人 PersonId（FindAllByTreeId 的 CurrentPerson） */
+    currentId: string;
+    /** 主系链：父 PersonId -> 该父子女中位于「祖→当前族人」链上的那一个，排序时置顶（旧图主系居首同款） */
+    lineageChildOf: Map<string, string>;
+}
+const fullIndex = ref<FullIndex | null>(null);
+
+/** 承祧 / 入嗣 / 收养类关系：孩子过继到该父名下，由其承担后代世系（对齐旧图） */
+const ADOPTIVE_RELATIONS = ["C", "E", "F", "G", "H", "I", "J", "K", "L"];
+
+function isMale(gender?: string): boolean {
+    if (!gender) {
+        return true;
+    }
+    const label = getPolicyText("GenderPolicy", gender).toLowerCase();
+    return label.includes("男") || label.includes("male") || gender === "M" || gender === "1";
+}
+
+function childTag(relationType?: string): string {
+    return relationType ? getPolicyText("RelationTypePolicy", relationType) || "子女" : "子女";
+}
+
+function byOrder(a: { Orderby?: number }, b: { Orderby?: number }): number {
+    return (a.Orderby ?? 0) - (b.Orderby ?? 0);
+}
+
+/** 全族头像查表：sub 用 root.CurrentPerson.FamilyTreePersons + loadedNodes；full 用 personMap */
+function getAvatar(personId: string): string {
+    const subPersons = (props.root?.CurrentPerson?.FamilyTreePersons ?? []) as any[];
+    const hit = subPersons.find(p => p?.PersonId === personId);
+    if (hit?.AvatarUrl) {
+        return hit.AvatarUrl;
+    }
+    const loaded = props.loadedNodes[personId];
+    if (loaded?.person?.AvatarUrl) {
+        return loaded.person.AvatarUrl;
+    }
+    const full = fullIndex.value?.personMap.get(personId);
+    return full?.AvatarUrl ?? "";
+}
+
+/** 性别查表：关系视图里的 Gender 是拥有者（丈夫/父亲）本人的字段，配偶/子女必须回查族人档案拿真实性别 */
+function getGender(personId: string): string {
+    const subPersons = (props.root?.CurrentPerson?.FamilyTreePersons ?? []) as any[];
+    const hit = subPersons.find(p => p?.PersonId === personId);
+    if (hit?.Gender) {
+        return hit.Gender;
+    }
+    const loaded = props.loadedNodes[personId];
+    if (loaded?.person?.Gender) {
+        return loaded.person.Gender;
+    }
+    return fullIndex.value?.personMap.get(personId)?.Gender ?? "";
+}
+
+const rootPersonId = computed(() => {
+    if (props.mode === "full") {
+        return fullIndex.value?.rootId ?? "";
+    }
+    return props.root?.CurrentPerson?.FamilyPerson?.PersonId ?? "";
+});
+
+const hasRoot = computed(() => Boolean(rootPersonId.value) && describe(rootPersonId.value) !== null);
+
+/** 把一份「人 + 配偶 + 子女」原始记录归一化成 ResolvedNode（sub：来自 CurrentPerson/loadedNodes） */
+function resolveSubNode(personId: string, record: { person: any; spouses: FamilyTreeSpouseMapViewEntity[]; children: FamilyTreeChildrenMapViewEntity[] }, isRoot: boolean) {
+    const p = record.person;
+    const self = {
+        personId,
+        name: `${p.Surname ?? ""}${p.GenealogyName ?? ""}`,
+        commonName: p.CommonName ?? "",
+        gender: p.Gender ?? "",
+        avatarUrl: p.AvatarUrl ?? getAvatar(personId),
+        tag: isRoot ? "本人" : "族员",
+    };
+    const spouses = [...record.spouses].sort(byOrder).map((s: any) => ({
+        personId: s.SpouseId,
+        name: `${s.SpouseSurname ?? ""}${s.SpouseGenealogyName ?? ""}`,
+        commonName: s.SpouseCommonName ?? "",
+        gender: getGender(s.SpouseId),
+        avatarUrl: getAvatar(s.SpouseId),
+        tag: "配偶",
+    }));
+    const children = [...record.children].sort(byOrder).map((c: any) => {
+        const childId = c.ChildrenId;
+        const loaded = childId === rootPersonId.value || Boolean(props.loadedNodes[childId]);
+        return {
+            personId: childId,
+            card: {
+                personId: childId,
+                name: `${c.ChildrenSurname ?? ""}${c.ChildrenGenealogyName ?? ""}`,
+                commonName: c.ChildrenCommonName ?? "",
+                gender: getGender(childId),
+                avatarUrl: getAvatar(childId),
+                tag: childTag(c.RelationType),
+            },
+            loaded,
+            expandable: loaded,
+        };
+    });
+    return { self, spouses, children, loaded: true };
+}
+
+/** 全树节点归一化：索引数据恒已加载，expandable 由「主承担父」判定 */
+function resolveFullNode(personId: string): any | null {
+    const index = fullIndex.value;
+    if (!index) {
+        return null;
+    }
+    const info = index.personMap.get(personId);
+    if (!info) {
+        return null;
+    }
+    const isRoot = personId === index.rootId;
+    const self = {
+        personId,
+        name: `${info.Surname ?? ""}${info.GenealogyName ?? ""}`,
+        commonName: info.CommonName ?? "",
+        gender: info.Gender ?? "",
+        avatarUrl: getAvatar(personId),
+        tag: isRoot ? "始祖" : "族员",
+    };
+    const spouses = [...(index.spousesOf.get(personId) ?? [])].sort(byOrder).map((s: any) => ({
+        personId: s.id,
+        name: s.name,
+        commonName: s.commonName ?? "",
+        gender: s.gender || index.personMap.get(s.id)?.Gender || "",
+        avatarUrl: getAvatar(s.id),
+        tag: "配偶",
+    }));
+    // 主系置顶：链向当前族人的那个子女排第 1，其余兄弟依原始顺序跟在后
+    const spineId = index.lineageChildOf.get(personId);
+    const children = [...(index.childrenOf.get(personId) ?? [])].sort((a: any, b: any) => {
+        if (spineId && a.id === spineId && b.id !== spineId) {
+            return -1;
+        }
+        if (spineId && b.id === spineId && a.id !== spineId) {
+            return 1;
+        }
+        return byOrder(a, b);
+    }).map((c: any) => {
+        const primary = primaryParentOf(c.id);
+        return {
+            personId: c.id,
+            card: {
+                personId: c.id,
+                name: c.name,
+                commonName: c.commonName ?? "",
+                gender: c.gender || index.personMap.get(c.id)?.Gender || "",
+                avatarUrl: getAvatar(c.id),
+                tag: childTag(c.relation),
+            },
+            loaded: true,
+            expandable: primary === personId,
+        };
+    });
+    return { self, spouses, children, loaded: true };
+}
+
+function primaryParentOf(personId: string): string {
+    const parents = fullIndex.value?.parentsOf.get(personId) ?? [];
+    if (parents.length === 0) {
+        return "";
+    }
+    const adopted = parents.find(p => ADOPTIVE_RELATIONS.includes(p.relation ?? ""));
+    return (adopted ?? parents[0]).parentId;
+}
+
+/** 供 node 调用：按模式解析某人；无法解析返回 null */
+function describe(personId: string) {
+    if (!personId) {
+        return null;
+    }
+    if (props.mode === "full") {
+        return resolveFullNode(personId);
+    }
+    if (personId === rootPersonId.value) {
+        const cp = props.root?.CurrentPerson;
+        if (!cp?.FamilyPerson) {
+            return null;
+        }
+        return resolveSubNode(personId, {
+            person: cp.FamilyPerson,
+            spouses: cp.FamilyTreeSpouseMaps ?? [],
+            children: cp.FamilyTreeChildrenMaps ?? [],
+        }, true);
+    }
+    const loaded = props.loadedNodes[personId];
+    if (loaded) {
+        return resolveSubNode(personId, loaded, false);
+    }
+    return null;
+}
+
+function toggle(personId: string): void {
+    expanded.value = { ...expanded.value, [personId]: !expanded.value[personId] };
+}
+
+// ===== 缩放与布局方向（弹窗右上控制条）=====
+const ZOOM_MIN = 0.5;
+const ZOOM_MAX = 2;
+const ZOOM_STEP = 0.1;
+const zoom = ref(1);
+// 默认纵向：世代向下推进、主系居首列（⇅ 可切回横向阶梯）
+const vertical = ref(true);
+const zoomLabel = computed(() => `${Math.round(zoom.value * 100)}%`);
+
+function clampZoom(value: number): number {
+    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value * 10) / 10));
+}
+
+function zoomIn(): void {
+    zoom.value = clampZoom(zoom.value + ZOOM_STEP);
+}
+
+function zoomOut(): void {
+    zoom.value = clampZoom(zoom.value - ZOOM_STEP);
+}
+
+function toggleDirection(): void {
+    vertical.value = !vertical.value;
+}
+
+function requestLoad(personId: string): void {
+    emit("select-child", personId);
+}
+
+function requestPick(personId: string): void {
+    emit("pick-person", personId);
+}
+
+provide(FAMILY_TREE_CHART_API, {
+    describe,
+    expanded,
+    toggle,
+    requestLoad,
+    requestPick,
+    isMale,
+    vertical,
+});
+
+/** 全树：从 FamilyTreeData 拍平三张索引表（照抄旧 buildIndex 的字段映射） */
+function buildFullIndex(resp: FamilyTreeData): FullIndex {
+    const personMap = new Map<string, any>();
+    const spousesOf = new Map<string, any[]>();
+    const childrenOf = new Map<string, any[]>();
+    const parentsOf = new Map<string, { parentId: string; relation?: string }[]>();
+    const cp = resp?.CurrentPerson;
+
+    (cp?.FamilyTreePersons ?? []).forEach((p: any) => {
+        if (p?.PersonId) {
+            personMap.set(p.PersonId, { ...p });
+        }
+    });
+    const ancestor = cp?.FamilyPerson;
+    if (ancestor?.PersonId && !personMap.has(ancestor.PersonId)) {
+        personMap.set(ancestor.PersonId, { ...ancestor });
+    }
+
+    const pushSpouse = (ownerId: string, entry: any) => {
+        if (!ownerId) {
+            return;
+        }
+        const list = spousesOf.get(ownerId) ?? [];
+        if (!list.some(x => x.id === entry.id)) {
+            list.push(entry);
+            spousesOf.set(ownerId, list);
+        }
+    };
+    (cp?.FamilyTreeSpouseMaps ?? []).forEach((s: any) => {
+        pushSpouse(s.PersonId, {
+            id: s.SpouseId,
+            name: `${s.SpouseSurname ?? ""}${s.SpouseGenealogyName ?? ""}`,
+            commonName: s.SpouseCommonName,
+            // 不取 s.Gender：那是拥有者本人的性别，配偶真实性别由 personMap 回查（见 resolveFullNode）
+            gender: undefined,
+            orderby: s.Orderby,
+        });
+        pushSpouse(s.SpouseId, {
+            id: s.PersonId,
+            name: `${s.Surname ?? ""}${s.GenealogyName ?? ""}`,
+            commonName: s.CommonName,
+            gender: undefined,
+            orderby: s.Orderby,
+        });
+    });
+
+    (cp?.FamilyTreeChildrenMaps ?? []).forEach((c: any) => {
+        const list = childrenOf.get(c.PersonId) ?? [];
+        if (!list.some(x => x.id === c.ChildrenId)) {
+            list.push({
+                id: c.ChildrenId,
+                name: `${c.ChildrenSurname ?? ""}${c.ChildrenGenealogyName ?? ""}`,
+                commonName: c.ChildrenCommonName,
+                // 同上：c.Gender 是父亲的性别，子女真实性别由 personMap 回查
+                gender: undefined,
+                relation: c.RelationType,
+                orderby: c.Orderby,
+            });
+            childrenOf.set(c.PersonId, list);
+            const parentList = parentsOf.get(c.ChildrenId) ?? [];
+            parentList.push({ parentId: c.PersonId, relation: c.RelationType });
+            parentsOf.set(c.ChildrenId, parentList);
+        }
+    });
+
+    const rootId = ancestor?.PersonId || resp?.FamilyTree?.AncestorPersonId || "";
+
+    // 主系链：从当前族人逐级向上到始祖，记下每一环「父 -> 链上子」，渲染时把该子排到子女首位。
+    // 锚点优先用页面当前选中族人（props.root，如切到表妹）；FindAllByTreeId 的 CurrentPerson 是登录者本人，仅作兜底
+    const currentId = props.root?.CurrentPerson?.FamilyPerson?.PersonId || cp?.FamilyPerson?.PersonId || "";
+    const lineageChildOf = new Map<string, string>();
+    const visited = new Set<string>();
+    let cursor = currentId;
+    while (cursor && !visited.has(cursor)) {
+        visited.add(cursor);
+        const parentId = (parentsOf.get(cursor) ?? [])[0]?.parentId ?? "";
+        if (!parentId) {
+            break;
+        }
+        lineageChildOf.set(parentId, cursor);
+        cursor = parentId;
+    }
+    return { rootId, personMap, spousesOf, childrenOf, parentsOf, currentId, lineageChildOf };
+}
+
+async function loadFull(): Promise<void> {
+    const treeId = props.treeId.trim();
+    if (!treeId) {
+        fullIndex.value = null;
+        return;
+    }
+    try {
+        loading.value = true;
+        const resp = await familyTreeService.FindAllByTreeId(treeId);
+        if (resp?.CurrentPerson) {
+            fullIndex.value = buildFullIndex(resp);
+        }
+        else {
+            fullIndex.value = null;
+        }
+    }
+    catch (error) {
+        console.error(error);
+        fullIndex.value = null;
+    }
+    finally {
+        loading.value = false;
+    }
+}
+
+/** 弹窗打开：重置展开态到根节点；full 默认全树展开（旧祖谱系图同款），sub 仅展开根待懒加载 */
+watch(
+    () => props.visible,
+    (on) => {
+        if (!on) {
+            return;
+        }
+        expanded.value = {};
+        if (props.mode === "full") {
+            loadFull().then(() => {
+                const next: Record<string, boolean> = {};
+                if (rootPersonId.value) {
+                    next[rootPersonId.value] = true;
+                }
+                // 所有有子女的族员一律展开；非主承担父由 node 的 expandable 门控，不会重复渲染子树
+                fullIndex.value?.childrenOf.forEach((_list: any[], parentId: string) => {
+                    next[parentId] = true;
+                });
+                expanded.value = next;
+            });
+        }
+        else if (rootPersonId.value) {
+            expanded.value = { [rootPersonId.value]: true };
+        }
+    },
+);
+
+/** sub 模式：新加载的族员自动展开，方便直接看其子树（对齐旧图 watch loadedNodes） */
+watch(
+    () => Object.keys(props.loadedNodes),
+    (ids) => {
+        if (!props.visible || props.mode !== "sub") {
+            return;
+        }
+        const next = { ...expanded.value };
+        for (const id of ids) {
+            next[id] = true;
+        }
+        expanded.value = next;
+    },
+);
+
+function close(): void {
+    emit("update:visible", false);
+}
+</script>
+
+<template>
+    <u-popup :model-value="props.visible" mode="bottom" round="0" :safe-area-inset-bottom="true" @close="close">
+        <view class="ftc">
+            <view class="ftc__bar">
+                <text class="ftc__title">
+                    {{ props.title || t('FamilyTreePage.pedigreeChart') }}
+                </text>
+                <u-icon name="close" size="40" color="#8f959e" @click="close" />
+            </view>
+            <!-- 悬浮控制条：放大/缩小/百分比复位/横纵布局切换（对齐旧图 G6 工具钮） -->
+            <view class="ftc__ctrl">
+                <view class="ftc__ctrl-btn" @tap="zoomIn">
+                    <text class="ftc__ctrl-glyph">＋</text>
+                </view>
+                <view class="ftc__ctrl-btn ftc__ctrl-btn--label" @tap="zoom = 1">
+                    <text class="ftc__ctrl-label">{{ zoomLabel }}</text>
+                </view>
+                <view class="ftc__ctrl-btn" @tap="zoomOut">
+                    <text class="ftc__ctrl-glyph">－</text>
+                </view>
+                <view class="ftc__ctrl-btn" @tap="toggleDirection">
+                    <text class="ftc__ctrl-glyph">⇅</text>
+                </view>
+            </view>
+            <scroll-view class="ftc__scroll" scroll-x scroll-y :show-scrollbar="true">
+                <view v-if="hasRoot" class="ftc__tree" :style="{ zoom }">
+                    <family-tree-node :person-id="rootPersonId" :preview="null" :expandable="true" :depth="0" />
+                </view>
+                <view v-else class="ftc__empty">
+                    <text>{{ loading ? t('AdminPage.loadingTip') : t('FamilyTreePage.chartEmpty') }}</text>
+                </view>
+            </scroll-view>
+        </view>
+    </u-popup>
+</template>
+
+<style lang="scss" scoped>
+.ftc {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    /* 默认满屏：bottom 弹窗内容撞满视口，顶部预留安全区 */
+    height: 100vh;
+    background-color: #f5f6f8;
+}
+
+.ftc__bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(28rpx + env(safe-area-inset-top)) 32rpx 28rpx;
+    background-color: #ffffff;
+    border-bottom: 2rpx solid #f2f3f5;
+}
+
+.ftc__title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #1f2329;
+}
+
+/* 悬浮控制条：右侧竖排，白底圆角轻阴影 */
+.ftc__ctrl {
+    position: absolute;
+    top: calc(120rpx + env(safe-area-inset-top));
+    right: 24rpx;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: 16rpx;
+    background: #ffffff;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+}
+
+.ftc__ctrl-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 88rpx;
+    height: 76rpx;
+    border-bottom: 2rpx solid #f2f3f5;
+}
+
+.ftc__ctrl-btn--label {
+    border-bottom-color: #f2f3f5;
+}
+
+.ftc__ctrl-glyph {
+    font-size: 34rpx;
+    color: #1f2329;
+}
+
+.ftc__ctrl-label {
+    font-size: 24rpx;
+    color: #646a73;
+}
+
+.ftc__scroll {
+    flex: 1;
+    min-height: 0;
+    white-space: nowrap;
+}
+
+.ftc__tree {
+    display: inline-block;
+    box-sizing: border-box;
+
+    /* 按内容实际宽度撑开：inline-block 默认被可用宽度封顶，超出部分只溢出不扩滚动区，
+       scroll-x 必须靠 max-content 拿到真实宽度才能横向滚起来；窄于容器时由 min-width 撑满 */
+    width: max-content;
+    min-width: 100%;
+    padding: 24rpx;
+}
+
+.ftc__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320rpx;
+    font-size: 26rpx;
+    color: #8f959e;
+}
+</style>