ow

WebVue/src/hooks/useLocalePolicy.ts

@@ -0,0 +1,58 @@
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
+import i18n from "@/locales";
+import { SelectOption } from "@/data/auto/selectOption";
+
+/**
+ * 基于应用启动时已合并到 i18n 的 locale 数据（main.ts -> mergeDbLocaleMessages），
+ * 提供策略组下拉选项，避免再次调用服务器。
+ * 映射规则与后端 LocaleService.FindSelectOption 保持一致：
+ *   BindValue = Name, DisplayName = Value
+ * 顺序为 i18n 中 locale 表的合并顺序（对应 locale 表 order_by 的插入顺序）。
+ */
+export const useLocalePolicy = () => {
+  const getPolicyOptions = (groupName: string, blank = true): SelectOption[] => {
+    const locale = ((i18n.global.locale as any)?.value ?? "zh-cn") as string;
+    const messages = (i18n.global.messages as any)?.value ?? {};
+    const group: Record<string, unknown> = messages[locale]?.[groupName] ?? {};
+
+    const options: SelectOption[] = [];
+    if (blank) options.push(new SelectOption());
+
+    Object.entries(group).forEach(([key, value]) => {
+      const option = new SelectOption();
+      option.BindValue = key;
+      option.DisplayName = String(value);
+      options.push(option);
+    });
+    return options;
+  };
+
+  const getPolicyOptionsComputed = (
+    groupName: string,
+    blank = true
+  ): ComputedRef<SelectOption[]> => computed(() => getPolicyOptions(groupName, blank));
+
+  /**
+   * 可直接绑定 <a-select :options> 的选项结构（label/value）
+   */
+  const getPolicySelectOptions = (groupName: string, blank = true): { label: string; value: string }[] => {
+    return getPolicyOptions(groupName, blank).map((o) => ({
+      label: o.DisplayName,
+      value: o.BindValue,
+    }));
+  };
+
+  const getPolicySelectOptionsComputed = (
+    groupName: string,
+    blank = true
+  ): ComputedRef<{ label: string; value: string }[]> =>
+    computed(() => getPolicySelectOptions(groupName, blank));
+
+  return {
+    getPolicyOptions,
+    getPolicyOptionsComputed,
+    getPolicySelectOptions,
+    getPolicySelectOptionsComputed,
+  };
+};

WebVue/src/injections/security/operation-to-enquiry.ts

@@ -9,6 +9,8 @@ export class OperationToEnquiryModelOption {
   public isModalPermissionDependent?: boolean = false;
   public isModalMaster?: boolean = false;
   public isModalFunction?: boolean = false;
+  public isModalTree?: boolean = false; //家谱树查询
+  public isModalPerson?: boolean = false; //族员人员查询
   public initBindOptionsUser?: BindOption[] = []; //初始化查询条件的值
   public initBindOptionsGroup?: BindOption[] = [];
   public initBindOptionsActor?: BindOption[] = [];
@@ -16,6 +18,8 @@ export class OperationToEnquiryModelOption {
   public initBindOptionsPermission?: BindOption[] = [];
   public initBindOptionsMaster?: BindOption[] = [];
   public initBindOptionsFunction?: BindOption[] = [];
+  public initBindOptionsTree?: BindOption[] = [];
+  public initBindOptionsPerson?: BindOption[] = [];
   public selectionTypeGroup?: string = "radio"; //记录单选还是多选
   public selectionTypeUser?: string = "radio";
   public selectionTypeActor?: string = "radio";
@@ -23,6 +27,8 @@ export class OperationToEnquiryModelOption {
   public selectionTypePermission?: string = "radio";
   public selectionTypeMaster?: string = "radio";
   public selectionTypeFunction?: string = "radio";
+  public selectionTypeTree?: string = "radio";
+  public selectionTypePerson?: string = "radio";
 }
 
 //子组件调用父组件的方法==================

WebVue/src/service/master/familyTreeService.ts

@@ -16,6 +16,16 @@ class FamilyTreeService{
                         )
                         };
                         
+                        async FindByCurrentPerson(data: any) {
+                        return request<FamilyTreeData>(
+                                {
+                                url: "/FamilyTree/FindByCurrentPerson",
+                                method: "post",
+                                data,
+                                }
+                        )
+                        };
+                        
                         async FindBySearchCriteria(data: FamilyTreeSearchCriteria) {
                         return request<FamilyTreeResultData>(
                                 {

WebVue/src/service/security/localeService.ts

@@ -1,6 +1,7 @@
 
 import { request } from "@/utils/request";
         import type { LocaleEntity } from "@/data/auto/localeEntity";
+        import type { SelectOption } from "@/data/auto/selectOption";
         import type { LocaleSearchCriteria } from "@/data/auto/localeSearchCriteria";
         import type { LocaleResultData } from "@/data/auto/localeResultData";
         import type { LocaleEntityKey } from "@/data/auto/localeEntityKey";
@@ -17,6 +18,16 @@ class LocaleService{
                         )
                         };
                         
+                        async FindSelectOption(data: any) {
+                        return request<SelectOption[]>(
+                                {
+                                url: "/Locale/FindSelectOption",
+                                method: "post",
+                                data,
+                                }
+                        )
+                        };
+                        
                         async FindBySearchCriteria(data: LocaleSearchCriteria) {
                         return request<LocaleResultData>(
                                 {

WebVue/src/views/master/FamilyPersonEnquiry.vue

@@ -63,9 +63,9 @@ import { enquiryMethodKey, searchCriteriaManagerKey, operationToEnquiryMethodKey
 const actorOperationMethod = inject(operationToEnquiryMethodKey);
 const modelOption = actorOperationMethod?.getOperationToEnquiryModelOption() as OperationToEnquiryModelOption;
 
-const isModal = ref(modelOption ? modelOption.isModalPermission : false);
-const selectionType = ref(modelOption ? modelOption.selectionTypePermission : 'checkbox');
-const initBindOptions = ref((modelOption ? modelOption.initBindOptionsPermission : []) as BindOption[]);
+const isModal = ref(modelOption ? modelOption.isModalPerson : false);
+const selectionType = ref(modelOption ? modelOption.selectionTypePerson : 'checkbox');
+const initBindOptions = ref((modelOption ? modelOption.initBindOptionsPerson : []) as BindOption[]);
 
 //报表名称(layout)
 const layoutProviderMethod = inject(layoutProviderMethodKey);

WebVue/src/views/master/FamilyPersonOperation.vue

@@ -105,12 +105,8 @@
                       v-model:value="data.FamilyPerson.Gender"
                       :disabled="!isEdit"
                       style="width: 100%"
+                      :options="genderSelectOptions"
                     >
-                      <a-select-option
-                        v-for="o in yesNoPolicy"
-                        :value="o.BindValue"
-                        >{{ o.DisplayName }}</a-select-option
-                      >
                     </a-select>
                   </a-col>
                 </a-row>
@@ -594,7 +590,7 @@
       </div>
     </div>
     <dragModal
-      v-model:open="modelOption.isModalPermission"
+      v-model:open="modelOption.isModalPerson"
       width="80%"
       title="人员查询"
       :mask-closable="false"
@@ -635,6 +631,7 @@ import FamilyPersonEnquiry from "./FamilyPersonEnquiry.vue";
 import { FamilyPersonData } from "@/data/auto/familyPersonData";
 import FamilyPersonService from "@/service/master/familyPersonService";
 import { useYesNoPolicy } from "@/hooks/useYesNoPolicy";
+import { useLocalePolicy } from "@/hooks/useLocalePolicy";
 import { SelectOption } from "@/data/auto/selectOption";
 import { useWindowSize } from "@vueuse/core";
 import { FamilyPersonEntity } from "@/data/auto/familyPersonEntity";
@@ -667,6 +664,8 @@ const data = ref<FamilyPersonData>(new FamilyPersonData());
 const hasData = ref<boolean>(false);
 
 const yesNoPolicy = ref<SelectOption[]>([]);
+const { getPolicySelectOptionsComputed } = useLocalePolicy();
+const genderSelectOptions = getPolicySelectOptionsComputed('GenderPolicy');
 const birthDate = ref<Dayjs | null>(null);
 const deathDate = ref<Dayjs | null>(null);
 const resultH = ref("");
@@ -688,9 +687,9 @@ const enquiry = ref<FamilyPersonEnquiry | null>(null);
 const modelOption = ref<OperationToEnquiryModelOption>(
   new OperationToEnquiryModelOption(),
 );
-modelOption.value.isModalPermission = false;
-modelOption.value.selectionTypePermission = "radio";
-modelOption.value.initBindOptionsPermission = [];
+modelOption.value.isModalPerson = false;
+modelOption.value.selectionTypePerson = "radio";
+modelOption.value.initBindOptionsPerson = [];
 
 const getOperationToEnquiryModelOption = () => {
   return modelOption.value;
@@ -732,8 +731,8 @@ const computResultTableHeight = () => {
 };
 
 const onModalSearch = () => {
-  modelOption.value.isModalPermission = true;
-  modelOption.value.selectionTypePermission = "radio";
+  modelOption.value.isModalPerson = true;
+  modelOption.value.selectionTypePerson = "radio";
   showModalType.value = 0;
 };
 
@@ -848,7 +847,7 @@ const handleSelect = async () => {
 
         onSearch();
       }
-      modelOption.value.isModalPermission = false;
+      modelOption.value.isModalPerson = false;
     } else {
       notification.info({
         message: "系统提示：",

WebVue/src/views/master/FamilyTreeEnquiry.vue

@@ -0,0 +1,345 @@
+<template>
+    <search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
+        :is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
+        @on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
+        <template #control>
+            <a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
+                @click.prevent="onCreate">新增</a-button>
+        </template>
+        <template #bodyCell="{ column, record, index }">
+            <template v-if="column.dataIndex === FamilyTreeViewEntity.PUBLIC_INDC">
+                <template v-if="record.PublicIndc == 'Y'">
+                    <span>是</span>
+                </template>
+                <template v-else> <span>否</span></template>
+            </template>
+        </template>
+        <template #footer>
+            <div v-if="!isModal" class="page-footer">
+                <a-row :gutter="24">
+                    <a-col :lg="24" :sm="24">
+                        <a-row :gutter="[16, 8]">
+                            <a-space>
+                                <a-button type="primary" v-if="canView" :icon="h(FileTextOutlined)"
+                                    :disabled="!(keys && keys.length ==1)" @click.prevent="onView">查看</a-button>
+                                <a-button type="primary" v-if="canAmend" :icon="h(EditOutlined)"
+                                    :disabled="!(keys && keys.length ==1)" @click.prevent="onAmend">修改</a-button>
+                                <a-popconfirm title="确定是否删除这条记录?" ok-text="是" cancel-text="否" @confirm="onDelete">
+                                    <a-button type="primary" danger :icon="h(DeleteOutlined)" v-if="canDelete"
+                                        :disabled="!(keys && keys.length > 0)">删除</a-button>
+                                </a-popconfirm>
+                            </a-space>
+                        </a-row>
+                    </a-col>
+                </a-row>
+            </div>
+        </template>
+    </search>
+</template>
+<script setup lang="ts">
+import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
+import { BindOption } from "@/data/custom/bindOption";
+import { SelectOption } from "@/data/auto/selectOption";
+import search from "@/components/basic/Search.vue";
+import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
+
+import { FamilyTreeResultData } from "@/data/auto/familyTreeResultData";
+import { FamilyTreeViewEntity } from "@/data/auto/familyTreeViewEntity";
+import { SearchFilter } from "@/data/auto/searchFilter"
+import familyTreeService from "@/service/master/familyTreeService";
+import { useYesNoPolicy } from "@/hooks/useYesNoPolicy"
+import { FamilyTreeSearchCriteria } from "@/data/auto/familyTreeSearchCriteria";
+import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
+import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
+import { useRoute, useRouter } from "vue-router";
+
+import { useBindOption } from "@/hooks/useBindOption";
+import { SearchFilterOperatorPolicy } from "@/data/custom/searchFilterOperatorPolicy"
+import { SearchFilterTypePolicy } from "@/data/custom/searchFilterTypePolicy"
+import { notification } from "ant-design-vue";
+import { GridColumnInfo } from "@/data/auto/gridColumnInfo"
+import { useGridColumnInfo } from "@/hooks/gridColumnInfo"
+import { title } from "process";
+import { enquiryMethodKey, searchCriteriaManagerKey, operationToEnquiryMethodKey, OperationToEnquiryModelOption, layoutProviderMethodKey } from "@/injections";
+import { useOrderedChildren } from "@/hooks/use-ordered-children";
+import { SearchCriteriaContext } from "@/injections";
+//page from-----------------------------------------------------------------------------------------------------------------------------------
+//================inject================
+//报表名称(layout)
+const layoutProviderMethod = inject(layoutProviderMethodKey);
+
+const actorOperationMethod = inject(operationToEnquiryMethodKey);
+const modelOption = actorOperationMethod?.getOperationToEnquiryModelOption() as OperationToEnquiryModelOption;
+
+const isModal = ref(modelOption ? modelOption.isModalTree : false);
+const selectionType = modelOption ? modelOption.selectionTypeTree : 'checkbox';
+const initBindOptions = ref((modelOption ? modelOption.initBindOptionsTree : []) as BindOption[]);
+
+//================inject================
+
+const emit = defineEmits(['onRowDblclick']);
+
+const loading = ref<boolean>(false);
+const canView = ref<boolean>(false);
+const canAmend = ref<boolean>(false);
+const canDelete = ref<boolean>(false);
+const canCreate = ref<boolean>(false);
+const route = useRoute();
+const router = useRouter();
+
+const columns = ref([
+    {
+        title: '序号',
+        dataIndex: 'index',
+        width: '5%',
+        align: 'center',
+        fixed: 'left',
+        sequence: 0,
+        hidden: 'N',
+        format: ''
+    },
+    {
+        title: "树名称",
+        dataIndex: FamilyTreeViewEntity.TREE_NAME,
+        sorter: true,
+        width: '15%',
+        sequence: 1,
+        hidden: 'N'
+    },
+    {
+        title: "简介",
+        dataIndex: FamilyTreeViewEntity.BRIEF,
+        sorter: true,
+        width: '15%',
+        sequence: 2,
+        hidden: 'N'
+    },
+    {
+        title: "公开?",
+        dataIndex: FamilyTreeViewEntity.PUBLIC_INDC,
+        sorter: true,
+        width: '5%',
+        sequence: 4,
+        hidden: 'N'
+    },
+    {
+        title: "祖先姓氏",
+        dataIndex: FamilyTreeViewEntity.SURNAME,
+        sorter: true,
+        width: '20%',
+        sequence: 2,
+        hidden: 'N'
+    },
+    {
+        title: "祖先谱名",
+        dataIndex: FamilyTreeViewEntity.GENEALOGY_NAME,
+        sorter: true,
+        width: '20%',
+        sequence: 2,
+        hidden: 'N'
+    },
+]);
+
+
+const viewOption = {
+    Value: 'default',
+    SelectOptions: [{ BindValue: 'default', DisplayName: "默认" }],
+    Columns: [{ BindValue: 'default', BindColumn: columns }]
+};
+
+const bindOptions = ref<BindOption[]>([]);
+const datas = ref<FamilyTreeViewEntity[]>([]);
+const pagingParams = ref<PagingParams>({ pageSize: 20, page: 1 });
+const result = ref<SearchCriteriaResultData>(new SearchCriteriaResultData());
+
+const data = ref<FamilyTreeResultData>(new FamilyTreeResultData());
+
+const isSearched = ref<boolean>(false);
+const currentSearchCriteria = ref<FamilyTreeSearchCriteria>(new FamilyTreeSearchCriteria());
+
+const keys = ref<FamilyTreeViewEntity[]>([]);
+
+const {
+    children: items,
+    addChild: addItem,
+    removeChild: removeItem,
+} = useOrderedChildren<SearchCriteriaContext>();
+
+//================provide================
+//初始化查询条件UI
+provide(enquiryMethodKey, {
+    getLayoutSetting: () => { return { controlLeft: 16, controlRight: 8, space: true, soltLeft: 24, soltRight: 24 }; },
+    getBindOptions: () => { return unref(bindOptions); },
+    getViewOption: () => { return unref(viewOption); },
+    getDatas: () => { return datas; },
+});
+
+provide(
+    searchCriteriaManagerKey,
+    reactive({
+        items,
+        addItem,
+        removeItem,
+    })
+);
+//================provide================
+
+defineExpose({
+    keys,
+    initBindOptions,
+})
+
+onMounted(() => {
+    let pContext: PermissionContext = usePermissionContext();
+    canView.value = pContext.canView(route.meta.permission as string);
+    canAmend.value = pContext.canAmend(route.meta.permission as string);
+    canDelete.value = pContext.canDelete(route.meta.permission as string);
+    canCreate.value = pContext.canCreate(route.meta.permission as string);
+    initBindOption();
+    onSearch();
+})
+
+const onSelectChange = ((selected: FamilyTreeViewEntity[]) => {
+    keys.value = selected;
+})
+
+const onRowDblclick = ((e: any, record: FamilyTreeViewEntity) => {
+    if (isModal.value) {
+        emit('onRowDblclick', record);
+    }
+    else {
+        router.push({ name: "FamilyTreeOperation", params: { id: record.TreeId, mode: 'view' } });
+    }
+})
+
+const onReset = (() => {
+    keys.value = [];
+    result.value.Total = 0;
+})
+
+const onView = (() => {
+    if (keys.value.length == 0) return;
+    router.push({ name: "FamilyTreeOperation", params: { id: keys.value[0].TreeId, mode: 'view' } });
+})
+
+const onCreate = (() => {
+    router.push({ name: "FamilyTreeOperation", params: { id: '', mode: 'create' } });
+})
+
+const onAmend = (() => {
+    if (keys.value.length == 0) return;
+    router.push({ name: "FamilyTreeOperation", params: { id: keys.value[0].TreeId, mode: 'amend' } });
+})
+
+const onDelete = (async () => {
+
+    for (let i = 0; i < keys.value.length; i++) {
+        await familyTreeService.Delete(keys.value[i].TreeId);
+    }
+
+    notification.info({
+        message: '系统提示：',
+        description: '记录删除成功',
+        placement: "topRight",
+    });
+    onReload();
+})
+
+const setBindOptionValue = ((bindValue: string, value: string, value1: string, values: string[], disabled: boolean) => {
+    let bindOption: BindOption = bindOptions.value.filter(x => x.BindValue == bindValue)[0];
+    if (!bindOption) return;
+    bindOption.Value = value;
+    bindOption.Value1 = value1;
+    bindOption.Values = values;
+    bindOption.disabled = disabled;
+})
+
+
+
+//初始化查询条件
+const initBindOption = (async () => {
+    let ubo = useBindOption();
+    let bindOption: BindOption = ubo.getBindOption(FamilyTreeViewEntity.DB_TREE_NAME, '树名称', SearchFilterTypePolicy.TEXT, SearchFilterOperatorPolicy.CONTAIN);
+    bindOptions.value.push(bindOption);
+    bindOption = ubo.getBindOption(FamilyTreeViewEntity.DB_BRIEF, '简介', SearchFilterTypePolicy.TEXT, SearchFilterOperatorPolicy.CN_CONTAIN);
+    bindOption.lg = 10;
+    bindOptions.value.push(bindOption);
+    let rps: SelectOption[] = await useYesNoPolicy().getSelectOption(true);
+    bindOption = ubo.getBindSelectOption(FamilyTreeViewEntity.DB_PUBLIC_INDC, '公开?', SearchFilterTypePolicy.SINGLE_SELECTION, SearchFilterOperatorPolicy.SINGLE, rps);
+    bindOptions.value.push(bindOption);
+
+    initBindOptions.value.forEach(element => {
+        setBindOptionValue(element.BindValue, element.Value, element.Value1, element.Values, element.disabled);
+    });
+})
+
+//table from-----------------------------------------------------------------------------------------------------------------------------------
+
+result.value.Page = pagingParams.value.page ?? 1;
+result.value.Limit = pagingParams.value.pageSize;
+
+const onSubmit = (async (filters: SearchFilter[]) => {
+
+    let c: FamilyTreeSearchCriteria = new FamilyTreeSearchCriteria();
+
+    isSearched.value = true;
+    c.Filter = filters;
+    c.limit = pagingParams.value.pageSize;
+    c.page = pagingParams.value.page ?? 1;
+    c.GridColumns = [];
+    currentSearchCriteria.value = c;
+    await findBySearchCriteria(c);
+})
+
+const onSearch = (async () => {
+    onSubmit(items.value[0].getFilter());
+})
+
+
+const onPrint = (async () => {
+    let c: FamilyTreeSearchCriteria = new FamilyTreeSearchCriteria();
+    c.Filter = items.value[0].getFilter();
+
+    c.limit = pagingParams.value.pageSize;
+    c.page = pagingParams.value.page ?? 1;
+    c.GridColumns = useGridColumnInfo().getGridColumnInfo(unref(columns));
+    c.ReportName = layoutProviderMethod?.getLayoutProvider().layoutTitle!;
+    try {
+        // familyTreeService 暂无打印方法
+    } catch (error) {
+        console.log(error);
+    }
+
+})
+
+const findBySearchCriteria = (async (c: FamilyTreeSearchCriteria) => {
+    data.value = await familyTreeService.FindBySearchCriteria(c);
+    result.value.Total = data.value.Total;
+    result.value.Page = data.value.Page;
+    result.value.Limit = data.value.Limit;
+    datas.value = data.value.Datas;
+})
+
+const onPagination = (async (params: PagingParams) => {
+
+    if (!isSearched.value) return;
+    let c: FamilyTreeSearchCriteria = new FamilyTreeSearchCriteria();
+
+    c.Filter = items.value[0].getFilter();
+
+    c.limit = params.pageSize;
+    c.page = params.page ?? 1;
+    if (params.sortField)
+        c.orderby = params.sortField!;
+    if (params.sortOrder)
+        c.orderbytag = params.sortOrder?.toString().substring(0, 4)!;
+    c.GridColumns = [];
+    currentSearchCriteria.value = c;
+    await findBySearchCriteria(c);
+});
+
+const onReload = (async () => {
+    await findBySearchCriteria(unref(currentSearchCriteria));
+})
+//table end-----------------------------------------------------------------------------------------------------------------------------------
+</script>

WebVue/src/views/master/FamilyTreeOperation.vue

@@ -0,0 +1,984 @@
+<template>
+    <a-spin size="large" :spinning="loading">
+        <div class="page-container">
+            <div class="page-header">
+                <a-row :gutter="[16, 8]">
+                    <a-col :lg="8" :sm="24">
+                        <a-row :wrap="false">
+                            <a-col flex="none">
+                                <div style="padding: 0 "><a-input flex="none" readonly value="族谱编号"
+                                        class="site-input-split" style="width: 160px;border-radius:0; border-top-left-radius: 5pt 5pt;
+                                    border-bottom-left-radius: 5pt 5pt;
+                                 pointer-events: none" /></div>
+                            </a-col>
+                            <a-col flex="auto">
+                                <a-input-search :disabled="isEdit" v-model:value="treeId" flex="auto"
+                                    @search="onModalSearch" />
+                            </a-col>
+                        </a-row>
+                    </a-col>
+                    <a-col :lg="12" :sm="24">
+                        <a-space>
+                            <a-button type="primary" :disabled="isEdit" :icon="h(FileSearchOutlined)"
+                                @click.prevent="onSearch">查询</a-button>
+                            <a-button type="primary" :disabled="isEdit" :icon="h(ClearOutlined)"
+                                @click.prevent="onReset">重置</a-button>
+                            <a-button type="primary" :disabled="isEdit" :icon="h(FileAddOutlined)"
+                                @click.prevent="onCreate">新增</a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </div>
+            <div class="page-main" :style="{ height: resultH }">
+                <a-row :gutter="[16, 8]">
+                    <a-col :lg="8" :sm="24">
+                        <a-row :wrap="false" align="middle">
+                            <a-col :lg="6" :sm="6" style="min-width: 80px;">
+                                <span>族谱编号:</span>
+                            </a-col>
+                            <a-col :lg="18" :sm="18" style="min-width: 300px;">
+                                <a-input required :readonly="true"
+                                    v-model:value="data.FamilyTree.TreeId" />
+                            </a-col>
+                        </a-row>
+                    </a-col>
+                    <a-col :lg="{ span: 8, offset: 2 }" :sm="24">
+                        <a-row :wrap="false" align="middle">
+                            <a-col :lg="6" :sm="6" style="min-width: 80px;">
+                                <span>族谱名称:</span>
+                            </a-col>
+                            <a-col :lg="18" :sm="18" style="min-width: 300px;">
+                                <a-input required :readonly="!isEdit"
+                                    v-model:value="data.FamilyTree.TreeName" />
+                            </a-col>
+                        </a-row>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="[16, 8]" style="margin-top: 8px;">
+                    <a-col :lg="8" :sm="24">
+                        <a-row :wrap="false" align="middle">
+                            <a-col :lg="6" :sm="6" style="min-width: 80px;">
+                                <span>简介:</span>
+                            </a-col>
+                            <a-col :lg="18" :sm="18" style="min-width: 300px;">
+                                <a-input :readonly="!isEdit" v-model:value="data.FamilyTree.Brief" />
+                            </a-col>
+                        </a-row>
+                    </a-col>
+                    <a-col :lg="{ span: 8, offset: 2 }" :sm="24">
+                        <a-row :wrap="false" align="middle">
+                            <a-col :lg="6" :sm="6" style="min-width: 80px;">
+                                <span>封面文件名:</span>
+                            </a-col>
+                            <a-col :lg="18" :sm="18" style="min-width: 300px;">
+                                <a-input :readonly="!isEdit" v-model:value="data.FamilyTree.TreeCoverFilename"
+                                    flex="auto" />
+                            </a-col>
+                        </a-row>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="[16, 8]" style="margin-top: 8px;">
+                    <a-col :lg="8" :sm="24">   
+                        <a-row :wrap="false" align="middle">
+                            <a-col :lg="6" :sm="6" style="min-width: 80px;">
+                                <span>祖先:</span>
+                            </a-col>
+                            <a-col :lg="18" :sm="18" style="min-width: 300px;">
+                                <a-input-group compact style="display: flex; width: 100%;">
+                                    <a-input :disabled="true"
+                                        v-model:value="data.FamilyTree.AncestorPersonGenealogyName" placeholder="族谱名"
+                                        style="width: 50%;" />
+                                    <a-input-search required :disabled="!isEdit" style="width: 50%;"
+                                        v-model:value="data.FamilyTree.AncestorPersonId"
+                                        @search="onModalPerson" />
+                                </a-input-group>
+                            </a-col>
+                        </a-row>
+                    </a-col>
+                    <a-col :lg="{ span: 8, offset: 2 }" :sm="24">
+                     
+                        <a-row :wrap="false" align="middle">
+                            <a-col :lg="6" :sm="6" style="min-width: 80px;">
+                                <span>公开?</span>
+                            </a-col>
+                            <a-col :lg="18" :sm="18" style="min-width: 300px;">
+                                <a-select v-model:value="data.FamilyTree.PublicIndc" :disabled="!isEdit"
+                                    style="width: 100%;min-width:124px;">
+                                    <a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
+                                        o.DisplayName }}</a-select-option>
+                                </a-select>
+                            </a-col>
+                        </a-row>
+                    </a-col>
+                </a-row>
+                <a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
+                </a-divider>
+                <a-row :gutter="[16, 8]">
+                    <a-col :lg="8" :sm="24">
+                        <a-row :wrap="false">
+                            <a-col flex="auto">
+                                <a-input-group compact style="display: flex; width: 100%;">
+                                    <a-input readonly value="当前族员" class="site-input-split"
+                                        style="width: 160px; pointer-events: none;" />
+                                    <a-input :disabled="!isEdit"
+                                        v-model:value="data.CurrentPerson.FamilyPerson.GenealogyName" placeholder="族谱名"
+                                        style="flex: 1; min-width: 0;" />
+                                    <a-input-search style="flex: 1; min-width: 0;"
+                                        v-model:value="data.CurrentPerson.FamilyPerson.PersonId"
+                                        @search="onModalCurrentPerson" />
+                                </a-input-group>
+                            </a-col>
+                        </a-row>
+                    </a-col>
+                </a-row>
+                  <a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
+                </a-divider>
+                <a-collapse v-model:activeKey="activeKey">
+                    <a-collapse-panel key="1" header="夫妻关系">
+                        <a-table bordered :data-source="data.CurrentPerson.FamilyTreeSpouseMaps"
+                            :columns="columnParents" :row-class-name="rowParentClassName" :pagination="false"
+                            :scroll="{ x: 1200, y: 600 }">
+                            <template #bodyCell="datas">
+                                <template v-if="datas.column.dataIndex === 'index'">
+                                    <span>{{ datas.index + 1 }}</span>
+                                </template>
+                                <template
+                                    v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.GENDER">
+                                    <span>{{ getPolicyText(genderOptions, datas.record.Gender) }}</span>
+                                </template>
+                                <template
+                                    v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.MARRY_DATE_TEXT">
+                                    <a-input v-if="isEdit" size="small" style="width: 100%"
+                                        v-model:value="datas.record.MarryDateText" placeholder="结婚日期文本" />
+                                    <span v-else>{{ datas.record.MarryDateText }}</span>
+                                </template>
+                                <template
+                                    v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.MARRY_DATE">
+                                    <a-date-picker v-if="isEdit" size="small" style="width: 100%"
+                                        :value="datas.record.MarryDate ? dayjs(datas.record.MarryDate) : null"
+                                        @change="onMarryDateChange(datas.record, $event)" />
+                                    <span v-else>{{ formatDate(datas.record.MarryDate) }}</span>
+                                </template>
+                                <template
+                                    v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.DIVORCE_DATE_TEXT">
+                                    <a-input v-if="isEdit" size="small" style="width: 100%"
+                                        v-model:value="datas.record.DivorceDateText" placeholder="离婚日期文本" />
+                                    <span v-else>{{ datas.record.DivorceDateText }}</span>
+                                </template>
+                                <template
+                                    v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.DIVORCE_DATE">
+                                    <a-date-picker v-if="isEdit" size="small" style="width: 100%"
+                                        :value="datas.record.DivorceDate ? dayjs(datas.record.DivorceDate) : null"
+                                        @change="onDivorceDateChange(datas.record, $event)" />
+                                    <span v-else>{{ formatDate(datas.record.DivorceDate) }}</span>
+                                </template>
+                                <template
+                                    v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.MARRY_TYPE">
+                                    <a-input v-if="isEdit" size="small" style="width: 100%"
+                                        v-model:value="datas.record.MarryType" placeholder="婚配类型" />
+                                    <span v-else>{{ datas.record.MarryType }}</span>
+                                </template>
+                                <template
+                                    v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.IS_CURRENT">
+                                    <a-select v-if="isEdit" size="small" style="width: 100%"
+                                        v-model:value="datas.record.IsCurrent">
+                                        <a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
+                                            o.DisplayName }}</a-select-option>
+                                    </a-select>
+                                    <span v-else>{{ getPolicyText(yesNoPolicy, datas.record.IsCurrent) }}</span>
+                                </template>
+                                <template v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.REMARK">
+                                    <a-input v-if="isEdit" size="small" style="width: 100%"
+                                        v-model:value="datas.record.Remark" placeholder="备注" />
+                                    <span v-else>{{ datas.record.Remark }}</span>
+                                </template>
+                                <template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
+                                    <UpSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }"
+                                        @click="upParent(datas.index)" />
+                                    <DownSquareTwoTone
+                                        :style="{ fontSize: '24px', color: '#08c', marginLeft: '20px', marginRight: '20px' }"
+                                        @click="downParent(datas.index)" />
+                                    <DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
+                                        @click="deleteParent(datas.record.SpouseId)" />
+                                </template>
+                            </template>
+                        </a-table>
+                        <template #extra
+                            v-if="isEdit">
+                            <PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addSpouse" />
+                        </template>
+                    </a-collapse-panel>
+                    <a-collapse-panel key="2" header="孩子关系">
+                        <a-table bordered :data-source="data.CurrentPerson.FamilyTreeChildrenMaps"
+                            :columns="columnSons" :row-class-name="rowSonClassName" :pagination="false"
+                            :scroll="{ x: 950, y: 600 }">
+                            <template #bodyCell="datas">
+                                <template v-if="datas.column.dataIndex === 'index'">
+                                    <span>{{ datas.index + 1 }}</span>
+                                </template>
+                                <template v-else-if="datas.column.dataIndex === FamilyTreeChildrenMapViewEntity.GENDER">
+                                    <span>{{ getPolicyText(genderOptions, datas.record.Gender) }}</span>
+                                </template>
+                                <template v-else-if="datas.column.dataIndex === FamilyTreeChildrenMapViewEntity.SPOUSE_ID">
+                                    <a-select v-if="isEdit" size="small" style="width: 100%" allow-clear
+                                        show-search :options="spouseOptions" v-model:value="datas.record.SpouseId"
+                                        placeholder="选择父母" />
+                                    <span v-else>{{ getSpouseName(datas.record.SpouseId) }}</span>
+                                </template>
+                                <template
+                                    v-else-if="datas.column.dataIndex === FamilyTreeChildrenMapViewEntity.RELATION_TYPE">
+                                    <a-select v-if="isEdit" size="small" style="width: 100%" allow-clear
+                                        show-search :options="relationTypeSelectOptions"
+                                        v-model:value="datas.record.RelationType" placeholder="关系类型" />
+                                    <span v-else>{{ getPolicyText(relationTypeOptions, datas.record.RelationType) }}</span>
+                                </template>
+                                <template v-else-if="datas.column.dataIndex === FamilyTreeChildrenMapViewEntity.REMARK">
+                                    <a-input v-if="isEdit" size="small" style="width: 100%"
+                                        v-model:value="datas.record.Remark" placeholder="备注" />
+                                    <span v-else>{{ datas.record.Remark }}</span>
+                                </template>
+                                <template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
+                                    <UpSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }"
+                                        @click="upSon(datas.index)" />
+                                    <DownSquareTwoTone
+                                        :style="{ fontSize: '24px', color: '#08c', marginLeft: '20px', marginRight: '20px' }"
+                                        @click="downSon(datas.index)" />
+                                    <DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
+                                        @click="deleteSon(datas.record.ChildrenId)" />
+                                </template>
+                            </template>
+                        </a-table>
+                        <template #extra v-if="isEdit">
+                            <PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addSon" />
+                        </template>
+                    </a-collapse-panel>
+                </a-collapse>
+            </div>
+            <div class="page-footer">
+                <div style="">
+                    <a-row :gutter="24">
+                        <a-col :lg="24" :sm="24">
+                            <div>
+                                <a-row v-if="isEdit" :gutter="[16, 8]">
+                                    <a-space>
+                                        <a-popconfirm v-if="data.FamilyTree.CreatedBy" title="确定是否取消修改?"
+                                            ok-text="是" cancel-text="否" @confirm="onCancel">
+                                            <a-button type="primary" ghost :icon="h(UndoOutlined)">取消</a-button>
+                                        </a-popconfirm>
+                                        <a-button v-if="!data.FamilyTree.CreatedBy" type="primary" ghost
+                                            :icon="h(UndoOutlined)" @click.prevent="onCancel">取消</a-button>
+                                        <a-button type="primary" ghost :icon="h(SaveOutlined)"
+                                            @click.prevent="onSave">保存</a-button>
+                                    </a-space>
+                                </a-row>
+                                <a-row v-else :gutter="[16, 8]">
+                                    <a-space>
+                                        <a-button type="primary" v-if="canAmend" :icon="h(EditOutlined)"
+                                            :disabled="!hasData" @click.prevent="onAmend">修改</a-button>
+                                        <a-popconfirm :disabled="!hasData" title="确定是否删除这条记录?" ok-text="是"
+                                            cancel-text="否" @confirm="onDelete">
+                                            <a-button type="primary" danger :icon="h(DeleteOutlined)"
+                                                :disabled="!hasData" v-if="canDelete">删除</a-button>
+                                        </a-popconfirm>
+                                    </a-space>
+                                </a-row>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <dragModal v-model:open="modelOption.isModalTree" width="80%" title="族谱查询" @cancel="handleCance"
+            :fullscreen="width < 640" :mask-closable="false" @ok="handleSelect">
+            <FamilyTreeEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></FamilyTreeEnquiry>
+        </dragModal>
+        <dragModal v-model:open="modelOption.isModalPerson" width="80%" title="人员查询" @cancel="handleCance"
+            :fullscreen="width < 640" :mask-closable="false" @ok="handleSelectPerson">
+            <FamilyPersonEnquiry ref="personEnquiry"
+                @on-row-dblclick="handleSelectPerson"></FamilyPersonEnquiry>
+        </dragModal>
+    </a-spin>
+</template>
+<script lang="ts" setup>
+import { ref, unref, onBeforeMount, inject, provide, h, onMounted, computed } from "vue";
+import { notification } from "ant-design-vue";
+import { useRoute, useRouter } from 'vue-router'
+import dayjs from "dayjs";
+import type { Dayjs } from "dayjs";
+import { DeleteOutlined, EditOutlined, ClearOutlined, FileSearchOutlined, FileAddOutlined, UndoOutlined, SaveOutlined, PlusSquareTwoTone, DownSquareTwoTone, UpSquareTwoTone } from "@ant-design/icons-vue";
+import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
+import dragModal from "@/components/basic/DragModal.vue"
+import FamilyTreeEnquiry from "./FamilyTreeEnquiry.vue";
+import FamilyPersonEnquiry from "./FamilyPersonEnquiry.vue";
+import { FamilyTreeData } from "@/data/auto/familyTreeData";
+import { FamilyTreeSpouseMapViewEntity } from "@/data/auto/familyTreeSpouseMapViewEntity";
+import { FamilyTreeChildrenMapViewEntity } from "@/data/auto/familyTreeChildrenMapViewEntity";
+import familyTreeService from "@/service/master/familyTreeService";
+import { useYesNoPolicy } from "@/hooks/useYesNoPolicy"
+import { useLocalePolicy } from "@/hooks/useLocalePolicy"
+import { SelectOption } from "@/data/auto/selectOption";
+import { useWindowSize } from '@vueuse/core'
+import { FamilyTreeViewEntity } from "@/data/auto/familyTreeViewEntity";
+import { FamilyPersonEntity } from "@/data/auto/familyPersonEntity";
+import { operationToEnquiryMethodKey, OperationToEnquiryModelOption } from "@/injections"
+
+//================inject================
+const loading = ref<boolean>(false);
+//================inject================
+
+const { width, height } = useWindowSize()
+
+const route = useRoute();
+const router = useRouter();
+
+const treeId = ref<string>(route.params.id as string)
+const mode = ref<string>(route.params.mode as string)
+
+const isEdit = ref<boolean>(false);
+const canAmend = ref<boolean>(false);
+const canDelete = ref<boolean>(false);
+const canCreate = ref<boolean>(false);
+
+const showModalType = ref<number>(0);
+
+const data = ref<FamilyTreeData>(new FamilyTreeData());
+const hasData = ref<boolean>(false);
+
+const yesNoPolicy = ref<SelectOption[]>([]);
+const resultH = ref('');
+const oldTreeId = ref<string>(treeId.value);
+
+
+interface TreeEnquiry {
+    keys: FamilyTreeViewEntity[],
+    setBindOptionValue(bindValue: string, value: string, value1: string, values: string[]): void,
+}
+
+
+interface PersonEnquiry {
+    keys: FamilyPersonEntity[],
+    setBindOptionValue(bindValue: string, value: string, value1: string, values: string[]): void,
+}
+
+const enquiry = ref<TreeEnquiry | null>(null)
+const personEnquiry = ref<PersonEnquiry | null>(null)
+
+const activeKey = ref(['1', '2']);
+
+const columnParents = ref([
+    {
+        title: '序号',
+        dataIndex: 'index',
+        width: '8%',
+        align: 'center',
+        fixed: 'left',
+        sequence: 0,
+        hidden: 'N',
+        format: ''
+    },
+    {
+        title: "配偶姓氏",
+        dataIndex: FamilyTreeSpouseMapViewEntity.SPOUSE_SURNAME,
+        width: '10%',
+        sequence: 1,
+        hidden: 'N'
+    },
+    {
+        title: "配偶谱名",
+        dataIndex: FamilyTreeSpouseMapViewEntity.SPOUSE_GENEALOGY_NAME,
+        width: '10%',
+        sequence: 2,
+        hidden: 'N'
+    },
+    {
+        title: "性别",
+        dataIndex: FamilyTreeSpouseMapViewEntity.GENDER,
+        width: '8%',
+        sequence: 3,
+        hidden: 'N'
+    },
+    {
+        title: "结婚日期文本",
+        dataIndex: FamilyTreeSpouseMapViewEntity.MARRY_DATE_TEXT,
+        width: '11%',
+        sequence: 4,
+        hidden: 'N'
+    },
+    {
+        title: "结婚日期",
+        dataIndex: FamilyTreeSpouseMapViewEntity.MARRY_DATE,
+        width: '11%',
+        sequence: 5,
+        hidden: 'N'
+    },
+    {
+        title: "离婚日期文本",
+        dataIndex: FamilyTreeSpouseMapViewEntity.DIVORCE_DATE_TEXT,
+        width: '11%',
+        sequence: 6,
+        hidden: 'N'
+    },
+    {
+        title: "离婚日期",
+        dataIndex: FamilyTreeSpouseMapViewEntity.DIVORCE_DATE,
+        width: '11%',
+        sequence: 7,
+        hidden: 'N'
+    },
+    {
+        title: "婚配类型",
+        dataIndex: FamilyTreeSpouseMapViewEntity.MARRY_TYPE,
+        width: '8%',
+        sequence: 8,
+        hidden: 'N'
+    },
+    {
+        title: "当前?",
+        dataIndex: FamilyTreeSpouseMapViewEntity.IS_CURRENT,
+        width: '8%',
+        sequence: 9,
+        hidden: 'N'
+    },
+    {
+        title: "备注",
+        dataIndex: FamilyTreeSpouseMapViewEntity.REMARK,
+        width: '11%',
+        sequence: 10,
+        hidden: 'N'
+    },
+    {
+        title: "",
+        dataIndex: 'operation',
+        width: '12%',
+        sequence: 11,
+        hidden: 'N'
+    }
+]);
+
+const columnSons = ref([
+    {
+        title: '序号',
+        dataIndex: 'index',
+        width: '8%',
+        align: 'center',
+        fixed: 'left',
+        sequence: 0,
+        hidden: 'N',
+        format: ''
+    },
+    {
+        title: "姓氏",
+        dataIndex: FamilyTreeChildrenMapViewEntity.CHILDREN_SURNAME,
+        width: '10%',
+        sequence: 1,
+        hidden: 'N'
+    },
+    {
+        title: "谱名",
+        dataIndex: FamilyTreeChildrenMapViewEntity.CHILDREN_GENEALOGY_NAME,
+        width: '10%',
+        sequence: 2,
+        hidden: 'N'
+    },
+    {
+        title: "性别",
+        dataIndex: FamilyTreeChildrenMapViewEntity.GENDER,
+        width: '8%',
+        sequence: 3,
+        hidden: 'N'
+    },
+    {
+        title: "父母",
+        dataIndex: FamilyTreeChildrenMapViewEntity.SPOUSE_ID,
+        width: '14%',
+        sequence: 4,
+        hidden: 'N'
+    },
+    {
+        title: "关系",
+        dataIndex: FamilyTreeChildrenMapViewEntity.RELATION_TYPE,
+        width: '12%',
+        sequence: 5,
+        hidden: 'N'
+    },
+    {
+        title: "备注",
+        dataIndex: FamilyTreeChildrenMapViewEntity.REMARK,
+        width: '14%',
+        sequence: 6,
+        hidden: 'N'
+    },
+    {
+        title: "",
+        dataIndex: 'operation',
+        width: '12%',
+        sequence: 7,
+        hidden: 'N'
+    }
+]);
+//================provide================
+const modelOption = ref<OperationToEnquiryModelOption>(new OperationToEnquiryModelOption());
+modelOption.value.isModalTree = false;
+modelOption.value.isModalPerson = false;
+
+modelOption.value.selectionTypeTree = 'radio';
+modelOption.value.selectionTypePerson = 'radio';
+
+modelOption.value.initBindOptionsTree = [];
+modelOption.value.initBindOptionsPerson = [];
+
+
+const getOperationToEnquiryModelOption = () => {
+    return modelOption.value
+}
+provide(
+    operationToEnquiryMethodKey,
+    {
+        getOperationToEnquiryModelOption,
+    }
+);
+//================provide================
+
+onBeforeMount(async () => {
+    yesNoPolicy.value = await useYesNoPolicy().getSelectOption(false);
+})
+
+onMounted(() => {
+    let pContext: PermissionContext = usePermissionContext();
+    canAmend.value = pContext.canAmend(route.meta.permission as string);
+    canDelete.value = pContext.canDelete(route.meta.permission as string);
+    canCreate.value = pContext.canCreate(route.meta.permission as string);
+    computResultTableHeight();
+
+    if (treeId.value && treeId.value.trim().length > 0) {
+        onSearch();
+    }
+    if (mode.value && mode.value == 'create') {
+        onCreate();
+        isEdit.value = true;
+    }
+    else if (mode.value && mode.value == 'amend') {
+        isEdit.value = true;
+    }
+})
+
+const computResultTableHeight = () => {
+    if (width.value > 640) {
+        resultH.value = 'calc(100vh -  220px )';
+    }
+    else {
+        resultH.value = 'calc(100vh -  250px )';
+    }
+}
+
+const onModalSearch = (() => {
+    modelOption.value.isModalTree = true;
+    modelOption.value.selectionTypeTree = 'radio';
+
+    showModalType.value = 0;
+})
+
+
+const onSearch = (async () => {
+
+    if (!treeId.value || treeId.value.trim().length == 0) {
+        notification.info({
+            message: '系统提示：',
+            description: '请输入族谱编号',
+            placement: "topRight",
+        });
+        hasData.value = false;
+        return;
+    }
+
+    data.value = await familyTreeService.FindByCurrentPerson({
+        key: treeId.value.trim(),
+        personId: data.value.CurrentPerson.FamilyPerson.PersonId,
+    });
+
+    if (data.value.FamilyTree == null) {
+        notification.info({
+            message: '系统提示：',
+            description: '记录不存在',
+            placement: "topRight",
+        });
+        data.value = new FamilyTreeData();
+        hasData.value = false;
+        return;
+    }
+
+    hasData.value = true;
+})
+
+const onReset = (() => {
+    data.value = new FamilyTreeData();
+    data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
+    data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
+    treeId.value = '';
+    hasData.value = false;
+    selectedSonIndex.value = -1;
+    selectedParentIndex.value = -1;
+})
+
+const onCreate = (() => {
+    onReset();
+    isEdit.value = true;
+})
+
+const onAmend = (() => {
+    isEdit.value = true;
+    oldTreeId.value = unref(data.value.FamilyTree.TreeId);
+})
+
+const onSave = (async () => {
+
+    try {
+        loading.value = true;
+
+        if (!data.value.CurrentPerson.FamilyTreeSpouseMaps) data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
+        if (!data.value.CurrentPerson.FamilyTreeChildrenMaps) data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
+
+        if (data.value.FamilyTree?.CreatedBy)
+            data.value = await familyTreeService.Update(data.value);
+        else {
+            data.value = await familyTreeService.Insert(data.value);
+        }
+
+        treeId.value = data.value.FamilyTree.TreeId;
+
+        loading.value = false;
+        hasData.value = true;
+        isEdit.value = false;
+        selectedSonIndex.value = -1;
+        selectedParentIndex.value = -1;
+
+    } catch (error) {
+        loading.value = false;
+        console.log(error);
+    }
+
+})
+
+const onCancel = (() => {
+    onReset();
+    if (oldTreeId.value && oldTreeId.value.length > 0) {
+        treeId.value = oldTreeId.value;
+        onSearch();
+    }
+    isEdit.value = false;
+})
+
+const onDelete = (async () => {
+    try {
+        loading.value = true;
+
+        await familyTreeService.Delete(data.value.FamilyTree.TreeId);
+
+        onReset();
+        loading.value = false;
+
+    } catch (error) {
+        loading.value = false;
+        console.log(error);
+    }
+})
+
+const handleCance = (async () => {
+
+})
+
+const addSpouse = (event: MouseEvent) => {
+    modelOption.value.isModalPerson = true;
+    modelOption.value.selectionTypePerson = 'radio';
+    showModalType.value = 1;
+
+    // If you don't want click extra trigger collapse, you can prevent this:
+    event.stopPropagation();
+};
+
+const deleteParent = (key: string) => {
+    data.value.CurrentPerson.FamilyTreeSpouseMaps = data.value.CurrentPerson.FamilyTreeSpouseMaps.filter(item => item.SpouseId !== key);
+};
+
+const formatDate = (value?: Date | null) => {
+    return value ? dayjs(value).format('YYYY-MM-DD') : '';
+};
+
+const onMarryDateChange = (record: FamilyTreeSpouseMapViewEntity, date: Dayjs | null) => {
+    record.MarryDate = date ? date.toDate() : null!;
+    record.MarryDateText = date ? date.format('YYYY-MM-DD') : '';
+};
+
+const onDivorceDateChange = (record: FamilyTreeSpouseMapViewEntity, date: Dayjs | null) => {
+    record.DivorceDate = date ? date.toDate() : null!;
+    record.DivorceDateText = date ? date.format('YYYY-MM-DD') : '';
+};
+
+const getPolicyText = (options: SelectOption[], value?: string | null) => {
+    const o = options.find(x => x.BindValue === value);
+    return o ? o.DisplayName : value;
+};
+
+const selectedParentIndex = ref<number>(-1);
+
+const rowParentClassName = (record: FamilyTreeSpouseMapViewEntity, index: number) => {
+    return index === selectedParentIndex.value ? 'parent-row-selected' : '';
+};
+
+const upParent = (index: number) => {
+    if (index > 0) {
+        const item = data.value.CurrentPerson.FamilyTreeSpouseMaps.splice(index, 1)[0];
+        data.value.CurrentPerson.FamilyTreeSpouseMaps.splice(index - 1, 0, item);
+        selectedParentIndex.value = index - 1;
+        refreshParentOrderby();
+    }
+};
+
+const downParent = (index: number) => {
+    if (index < data.value.CurrentPerson.FamilyTreeSpouseMaps.length) {
+        const item = data.value.CurrentPerson.FamilyTreeSpouseMaps.splice(index, 1)[0];
+        data.value.CurrentPerson.FamilyTreeSpouseMaps.splice(index + 1, 0, item);
+        selectedParentIndex.value = index + 1;
+
+        refreshParentOrderby();
+    }
+};
+
+const refreshParentOrderby = () => {
+    data.value.CurrentPerson.FamilyTreeSpouseMaps.forEach((item, idx) => {
+        item.Orderby = idx + 1;
+    });
+};
+
+const addSon = (event: MouseEvent) => {
+    modelOption.value.isModalPerson = true;
+    modelOption.value.selectionTypePerson = 'checkbox';
+
+    showModalType.value = 2;
+
+    // If you don't want click extra trigger collapse, you can prevent this:
+    event.stopPropagation();
+};
+
+const selectedSonIndex = ref<number>(-1);
+
+const rowSonClassName = (record: FamilyTreeChildrenMapViewEntity, index: number) => {
+    return index === selectedSonIndex.value ? 'son-row-selected' : '';
+};
+
+const upSon = (index: number) => {
+    if (index > 0) {
+        const item = data.value.CurrentPerson.FamilyTreeChildrenMaps.splice(index, 1)[0];
+        data.value.CurrentPerson.FamilyTreeChildrenMaps.splice(index - 1, 0, item);
+        selectedSonIndex.value = index - 1;
+        refreshSonOrderby();
+    }
+};
+
+const downSon = (index: number) => {
+    if (index < data.value.CurrentPerson.FamilyTreeChildrenMaps.length) {
+        const item = data.value.CurrentPerson.FamilyTreeChildrenMaps.splice(index, 1)[0];
+        data.value.CurrentPerson.FamilyTreeChildrenMaps.splice(index + 1, 0, item);
+        selectedSonIndex.value = index + 1;
+
+        refreshSonOrderby();
+    }
+};
+
+const refreshSonOrderby = () => {
+  data.value.CurrentPerson.FamilyTreeChildrenMaps.forEach((item, idx) => {
+    item.Orderby = idx + 1; // orderby从1开始，也可以用 idx
+  });
+};
+
+const deleteSon = (key: string) => {
+    data.value.CurrentPerson.FamilyTreeChildrenMaps = data.value.CurrentPerson.FamilyTreeChildrenMaps.filter(item => item.ChildrenId !== key);
+};
+
+const { getPolicyOptionsComputed, getPolicySelectOptionsComputed } = useLocalePolicy();
+const relationTypeOptions = getPolicyOptionsComputed('RelationTypePolicy');
+const relationTypeSelectOptions = getPolicySelectOptionsComputed('RelationTypePolicy');
+const genderOptions = getPolicyOptionsComputed('GenderPolicy');
+
+const spouseOptions = computed(() => {
+    return (data.value.CurrentPerson.FamilyTreeSpouseMaps || []).map(s => ({
+        label: (s.SpouseSurname || '') + (s.SpouseGenealogyName || ''),
+        value: s.SpouseId,
+    }));
+});
+
+const getSpouseName = (spouseId?: string) => {
+    if (!spouseId) return '';
+    const s = (data.value.CurrentPerson.FamilyTreeSpouseMaps || []).find(x => x.SpouseId === spouseId);
+    return s ? (s.SpouseSurname || '') + (s.SpouseGenealogyName || '') : spouseId;
+};
+
+const handleSelect = (async () => {
+    if (enquiry.value) {
+        if (enquiry.value.keys.length > 0) {
+            //查询弹出
+            if (showModalType.value == 0) {
+                treeId.value = enquiry.value.keys[0].TreeId;
+                data.value = new FamilyTreeData();
+                data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
+                data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
+
+                onSearch();
+            }
+
+            modelOption.value.isModalTree = false;
+        }
+        else {
+            notification.info({
+                message: '系统提示：',
+                description: '请选择一条记录',
+                placement: "topRight",
+            });
+        }
+    }
+})
+
+const onModalPerson = (() => {
+    modelOption.value.isModalPerson = true;
+    modelOption.value.selectionTypePerson = 'radio';
+    showModalType.value = 3;
+})
+
+const onModalCurrentPerson = (() => {
+    modelOption.value.isModalPerson = true;
+    modelOption.value.selectionTypePerson = 'radio';
+    showModalType.value = 4;
+})
+
+const handleSelectPerson = (async () => {
+    if (personEnquiry.value) {
+        if (personEnquiry.value.keys.length > 0) {
+            //祖先人员选择
+            if (showModalType.value == 3) {
+                data.value.FamilyTree.AncestorPersonId = personEnquiry.value.keys[0].PersonId;
+                data.value.FamilyTree.AncestorPersonGenealogyName = personEnquiry.value.keys[0].GenealogyName;
+            }
+            //当前族员选择
+            else if (showModalType.value == 4) {
+                data.value.CurrentPerson.FamilyPerson.GenealogyName = personEnquiry.value.keys[0].GenealogyName;
+                data.value.CurrentPerson.FamilyPerson.PersonId = personEnquiry.value.keys[0].PersonId;
+
+                onSearch();
+            }
+            //添加夫妻关系
+            else if (showModalType.value == 1) {
+                if (!data.value.CurrentPerson.FamilyTreeSpouseMaps) data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
+                let spouse: FamilyTreeSpouseMapViewEntity = new FamilyTreeSpouseMapViewEntity();
+                spouse.SpouseId = personEnquiry.value.keys[0].PersonId;
+                spouse.SpouseSurname = personEnquiry.value.keys[0].Surname;
+                spouse.SpouseCommonName = personEnquiry.value.keys[0].CommonName;
+                spouse.SpouseGenealogyName = personEnquiry.value.keys[0].GenealogyName;
+
+                data.value.CurrentPerson.FamilyTreeSpouseMaps.push(spouse);
+            }
+            //添加孩子关系
+            else if (showModalType.value == 2) {
+                if (!data.value.CurrentPerson.FamilyTreeChildrenMaps) data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
+                personEnquiry.value.keys.forEach(element => {
+                    let child: FamilyTreeChildrenMapViewEntity = new FamilyTreeChildrenMapViewEntity();
+                    child.ChildrenId = element.PersonId;
+                    child.ChildrenSurname = element.Surname;
+                    child.ChildrenCommonName = element.CommonName;
+                    child.ChildrenGenealogyName = element.GenealogyName;
+
+                    data.value.CurrentPerson.FamilyTreeChildrenMaps.push(child);
+                });
+            }
+
+            modelOption.value.isModalPerson = false;
+        }
+        else {
+            notification.info({
+                message: '系统提示：',
+                description: '请选择一条记录',
+                placement: "topRight",
+            });
+        }
+    }
+})
+
+</script>
+<style lang="less">
+.page-container {
+    margin-right: 0px;
+
+}
+
+.page-header {
+    padding-top: 4px;
+    padding-bottom: 8px;
+    padding-right: 12px;
+    border-bottom: 1px solid silver;
+    margin-left: 6px;
+}
+
+.page-header .ant-input-search .ant-input {
+    border-radius: 0;
+    border-left: 0;
+    text-align: left
+}
+
+.page-main {
+    overflow-y: auto;
+    padding-top: 24px;
+    padding-bottom: 4px;
+    padding-right: 32px;
+    padding-left: 12px;
+}
+
+.ant-input-search .ant-input {
+    border-radius: 0;
+    border-left: 0;
+    text-align: left
+}
+
+.page-footer {
+    z-index: 999;
+    padding-left: 8px;
+    padding-right: 18px;
+    padding-top: 8px;
+    width: 100%;
+    position: fixed;
+    bottom: 8px;
+    border-top: 1px solid silver;
+}
+
+.son-row-selected td {
+    border-top: 2px solid #1677ff !important;
+    border-bottom: 2px solid #1677ff !important;
+}
+
+.son-row-selected td:first-child {
+    border-left: 2px solid #1677ff !important;
+}
+
+.son-row-selected td:last-child {
+    border-right: 2px solid #1677ff !important;
+}
+
+.son-row-selected > td {
+    background-color: #e6f4ff !important;
+}
+
+.parent-row-selected td {
+    border-top: 2px solid #1677ff !important;
+    border-bottom: 2px solid #1677ff !important;
+}
+
+.parent-row-selected td:first-child {
+    border-left: 2px solid #1677ff !important;
+}
+
+.parent-row-selected td:last-child {
+    border-right: 2px solid #1677ff !important;
+}
+
+.parent-row-selected > td {
+    background-color: #e6f4ff !important;
+}
+</style>