2076 lines
63 KiB
Vue
2076 lines
63 KiB
Vue
<template>
|
|
<a-spin size="large" :spinning="loading">
|
|
<div class="page-container family-tree-op">
|
|
<div class="page-header fto-toolbar">
|
|
<div class="fto-search">
|
|
<span class="fto-search-label">族谱编号</span>
|
|
<a-input-search :disabled="isEdit" v-model:value="treeId" class="fto-search-input" placeholder="请输入族谱编号"
|
|
@search="onModalSearch" />
|
|
</div>
|
|
<div class="fto-actions">
|
|
<a-button type="primary" :disabled="isEdit" :icon="h(FileSearchOutlined)"
|
|
@click.prevent="onSearch">查询</a-button>
|
|
<a-button :disabled="isEdit" :icon="h(ClearOutlined)" @click.prevent="onReset">重置</a-button>
|
|
<a-button type="primary" :disabled="isEdit" :icon="h(FileAddOutlined)" @click.prevent="onCreate">新增</a-button>
|
|
</div>
|
|
</div>
|
|
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
|
<!-- 顶部信息卡 -->
|
|
<div class="ft-hero">
|
|
<div class="ft-hero-icon">
|
|
<ApartmentOutlined />
|
|
</div>
|
|
<div class="ft-hero-main">
|
|
<div class="ft-hero-name">
|
|
{{ data.FamilyTree.TreeName || "未填写族谱名称" }}
|
|
</div>
|
|
<div class="ft-hero-meta">
|
|
<span class="ft-chip">
|
|
编号 {{ data.FamilyTree.TreeId || "-" }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 族谱信息 -->
|
|
<div class="ft-card">
|
|
<div class="ft-card-title">族谱信息</div>
|
|
<div class="ft-grid">
|
|
<div class="ft-field">
|
|
<div class="ft-label">
|
|
族谱编号<span class="ft-required">*</span>
|
|
</div>
|
|
<a-input size="large" required :readonly="true" v-model:value="data.FamilyTree.TreeId"
|
|
placeholder="族谱编号" />
|
|
</div>
|
|
<div class="ft-field">
|
|
<div class="ft-label">
|
|
族谱名称<span class="ft-required">*</span>
|
|
</div>
|
|
<a-input size="large" required :readonly="!isEdit" v-model:value="data.FamilyTree.TreeName"
|
|
placeholder="请输入族谱名称" />
|
|
</div>
|
|
<div class="ft-field">
|
|
<div class="ft-label">简介</div>
|
|
<a-input size="large" :readonly="!isEdit" v-model:value="data.FamilyTree.Brief" placeholder="请输入简介" />
|
|
</div>
|
|
<div class="ft-field">
|
|
<div class="ft-label">封面文件名</div>
|
|
<a-input size="large" :readonly="!isEdit" v-model:value="data.FamilyTree.TreeCoverFilename"
|
|
placeholder="请输入封面文件名" />
|
|
</div>
|
|
<div class="ft-field">
|
|
<div class="ft-label">公开</div>
|
|
<a-select size="large" v-model:value="data.FamilyTree.PublicIndc" :disabled="!isEdit" style="width: 100%"
|
|
placeholder="请选择">
|
|
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
<div class="ft-field ft-field-full">
|
|
<div class="ft-label">祖先</div>
|
|
<div class="ft-inline">
|
|
<a-input-group compact class="ft-inline-main" style="display: flex; width: 100%">
|
|
<a-input size="large" :disabled="true" v-model:value="data.FamilyTree.AncestorPersonGenealogyName"
|
|
placeholder="尚未指定祖先" style="flex: 1 1 auto; min-width: 0" />
|
|
<a-button size="large" :disabled="!isCreate" :icon="h(UserAddOutlined)" style="flex: 0 0 auto"
|
|
@click.prevent="onModalPerson">新增祖先</a-button>
|
|
</a-input-group>
|
|
<a-button class="ft-inline-btn" size="large" type="primary" :disabled="!hasData"
|
|
:icon="h(ApartmentOutlined)" @click.prevent="onShowAncestryChart">祖谱系图</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 当前族员 -->
|
|
<div class="ft-card">
|
|
<div class="ft-card-title">当前族员</div>
|
|
<div class="ft-grid">
|
|
<div class="ft-field">
|
|
<div class="ft-label">性别</div>
|
|
<a-select size="large" v-model:value="data.CurrentPerson.FamilyPerson.Gender" :disabled="true"
|
|
placeholder="请选择性别" style="width: 100%">
|
|
<a-select-option v-for="o in genderOptions" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
<div class="ft-field">
|
|
<div class="ft-label">族谱名</div>
|
|
<a-input size="large" :disabled="true" v-model:value="data.CurrentPerson.FamilyPerson.GenealogyName"
|
|
placeholder="请输入族谱名" />
|
|
</div>
|
|
<div class="ft-field">
|
|
<div class="ft-label">常用名</div>
|
|
<a-input size="large" :disabled="true" v-model:value="data.CurrentPerson.FamilyPerson.CommonName"
|
|
placeholder="请输入常用名" />
|
|
</div>
|
|
<div class="ft-field">
|
|
<div class="ft-label">族员</div>
|
|
<a-input-search size="large" :disabled="isEdit" v-model:value="data.CurrentPerson.FamilyPerson.PersonId"
|
|
placeholder="请输入族员" @search="onModalCurrentPerson" />
|
|
</div>
|
|
<div class="ft-field">
|
|
<div class="ft-inline fto-btn-row">
|
|
<a-button class="fto-flex-btn" size="large" type="primary" :disabled="!hasData"
|
|
:icon="h(ApartmentOutlined)" @click.prevent="onShowChart">谱系图</a-button>
|
|
<a-button class="fto-flex-btn" size="large" :disabled="!hasData || isEdit"
|
|
:icon="h(FileProtectOutlined)" @click.prevent="onRequestPermission">申请管理</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 关系维护 -->
|
|
<div class="ft-card">
|
|
<div class="ft-card-title">关系维护</div>
|
|
<a-collapse v-model:activeKey="activeKeyRelations" class="ft-collapse">
|
|
<a-collapse-panel key="1">
|
|
<template #header>
|
|
<span class="fto-panel-title">夫妻关系</span>
|
|
<span class="fto-panel-count">{{ data.CurrentPerson.FamilyTreeSpouseMaps?.length ?? 0 }}</span>
|
|
</template>
|
|
<div class="ft-list">
|
|
<div v-for="(record, index) in data.CurrentPerson
|
|
.FamilyTreeSpouseMaps" :key="record.SpouseId || index" class="ft-item" :class="{
|
|
'ft-item-selected': index === selectedParentIndex,
|
|
'ft-item-collapsed': !isItemOpen(itemKey('sp', record.SpouseId, index)),
|
|
}">
|
|
<div class="ft-item-head" @click="toggleItem(itemKey('sp', record.SpouseId, index))">
|
|
<span class="ft-item-index">{{ index + 1 }}</span>
|
|
<div class="ft-item-title">
|
|
<span class="ft-item-name">
|
|
{{
|
|
(record.SpouseSurname || "") +
|
|
(record.SpouseGenealogyName || "") ||
|
|
record.SpouseCommonName ||
|
|
"未命名配偶"
|
|
}}
|
|
</span>
|
|
<a-tag v-if="record.Gender" class="ft-item-tag">
|
|
{{ getPolicyText(genderOptions, record.Gender) }}
|
|
</a-tag>
|
|
</div>
|
|
<div v-if="isEdit" class="ft-item-actions" @click.stop>
|
|
<UpSquareTwoTone class="ft-action" @click="upParent(index)" />
|
|
<DownSquareTwoTone class="ft-action" @click="downParent(index)" />
|
|
<DeleteOutlined class="ft-action ft-action-delete" @click="deleteParent(record.SpouseId)" />
|
|
</div>
|
|
<RightOutlined class="ft-item-arrow"
|
|
:class="{ 'ft-item-arrow-open': isItemOpen(itemKey('sp', record.SpouseId, index)) }" />
|
|
</div>
|
|
<div v-show="isItemOpen(itemKey('sp', record.SpouseId, index))" class="ft-item-body">
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">结婚日期文本</span>
|
|
<a-input v-if="isEdit" size="large" v-model:value="record.MarryDateText" placeholder="结婚日期文本" />
|
|
<span v-else class="ft-item-text">{{
|
|
record.MarryDateText || "-"
|
|
}}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">结婚日期</span>
|
|
<a-date-picker v-if="isEdit" size="large" style="width: 100%"
|
|
:value="record.MarryDate ? dayjs(record.MarryDate) : null"
|
|
@change="onMarryDateChange(record, $event)" />
|
|
<span v-else class="ft-item-text">{{
|
|
formatDate(record.MarryDate) || "-"
|
|
}}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">离婚日期文本</span>
|
|
<a-input v-if="isEdit" size="large" v-model:value="record.DivorceDateText" placeholder="离婚日期文本" />
|
|
<span v-else class="ft-item-text">{{
|
|
record.DivorceDateText || "-"
|
|
}}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">离婚日期</span>
|
|
<a-date-picker v-if="isEdit" size="large" style="width: 100%" :value="record.DivorceDate ? dayjs(record.DivorceDate) : null
|
|
" @change="onDivorceDateChange(record, $event)" />
|
|
<span v-else class="ft-item-text">{{
|
|
formatDate(record.DivorceDate) || "-"
|
|
}}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">婚配类型</span>
|
|
<a-input v-if="isEdit" size="large" v-model:value="record.MarryType" placeholder="婚配类型" />
|
|
<span v-else class="ft-item-text">{{
|
|
record.MarryType || "-"
|
|
}}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">当前?</span>
|
|
<a-select v-if="isEdit" size="large" style="width: 100%" v-model:value="record.IsCurrent">
|
|
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName
|
|
}}</a-select-option>
|
|
</a-select>
|
|
<span v-else class="ft-item-text">{{
|
|
getPolicyText(yesNoPolicy, record.IsCurrent) || "-"
|
|
}}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">备注</span>
|
|
<a-input v-if="isEdit" size="large" v-model:value="record.Remark" placeholder="备注" />
|
|
<span v-else class="ft-item-text">{{
|
|
record.Remark || "-"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!data.CurrentPerson.FamilyTreeSpouseMaps.length" class="ft-empty">
|
|
暂无夫妻关系
|
|
</div>
|
|
|
|
<a-button v-if="isEdit" class="ft-add-btn" type="dashed" block @click="addSpouse">
|
|
<PlusSquareTwoTone /> 新增夫妻关系
|
|
</a-button>
|
|
</div>
|
|
</a-collapse-panel>
|
|
<a-collapse-panel key="2">
|
|
<template #header>
|
|
<span class="fto-panel-title">孩子关系</span>
|
|
<span class="fto-panel-count">{{ data.CurrentPerson.FamilyTreeChildrenMaps?.length ?? 0 }}</span>
|
|
</template>
|
|
<div class="ft-list">
|
|
<div v-for="(record, index) in data.CurrentPerson
|
|
.FamilyTreeChildrenMaps" :key="record.ChildrenId || index" class="ft-item" :class="{
|
|
'ft-item-selected': index === selectedSonIndex,
|
|
'ft-item-collapsed': !isItemOpen(itemKey('ch', record.ChildrenId, index)),
|
|
}">
|
|
<div class="ft-item-head" @click="toggleItem(itemKey('ch', record.ChildrenId, index))">
|
|
<span class="ft-item-index">{{ index + 1 }}</span>
|
|
<div class="ft-item-title">
|
|
<span class="ft-item-name">
|
|
{{
|
|
(record.ChildrenSurname || "") +
|
|
(record.ChildrenGenealogyName || "") ||
|
|
record.ChildrenCommonName ||
|
|
"未命名孩子"
|
|
}}
|
|
</span>
|
|
<a-tag v-if="record.Gender" class="ft-item-tag">
|
|
{{ getPolicyText(genderOptions, record.Gender) }}
|
|
</a-tag>
|
|
</div>
|
|
<div v-if="isEdit" class="ft-item-actions" @click.stop>
|
|
<UpSquareTwoTone class="ft-action" @click="upSon(index)" />
|
|
<DownSquareTwoTone class="ft-action" @click="downSon(index)" />
|
|
<DeleteOutlined class="ft-action ft-action-delete" @click="deleteSon(record.ChildrenId)" />
|
|
</div>
|
|
<RightOutlined class="ft-item-arrow"
|
|
:class="{ 'ft-item-arrow-open': isItemOpen(itemKey('ch', record.ChildrenId, index)) }" />
|
|
</div>
|
|
<div v-show="isItemOpen(itemKey('ch', record.ChildrenId, index))" class="ft-item-body">
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">父母</span>
|
|
<a-select v-if="isEdit" size="large" style="width: 100%" allow-clear show-search
|
|
:options="spouseOptions" v-model:value="record.SpouseId" placeholder="选择父母" />
|
|
<span v-else class="ft-item-text">{{
|
|
getSpouseName(record.SpouseId) || "-"
|
|
}}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">关系</span>
|
|
<a-select v-if="isEdit" size="large" style="width: 100%" allow-clear show-search
|
|
:options="relationTypeSelectOptions" v-model:value="record.RelationType" placeholder="关系类型" />
|
|
<span v-else class="ft-item-text">{{
|
|
getPolicyText(relationTypeOptions, record.RelationType) ||
|
|
"-"
|
|
}}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">备注</span>
|
|
<a-input v-if="isEdit" size="large" v-model:value="record.Remark" placeholder="备注" />
|
|
<span v-else class="ft-item-text">{{
|
|
record.Remark || "-"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!data.CurrentPerson.FamilyTreeChildrenMaps.length" class="ft-empty">
|
|
暂无孩子关系
|
|
</div>
|
|
|
|
<a-button v-if="isEdit" class="ft-add-btn" type="dashed" block @click="addSon">
|
|
<PlusSquareTwoTone /> 新增孩子关系
|
|
</a-button>
|
|
</div>
|
|
</a-collapse-panel>
|
|
</a-collapse>
|
|
</div>
|
|
<!-- 权限维护 -->
|
|
<div class="ft-card">
|
|
<div class="ft-card-title">权限维护</div>
|
|
<a-collapse v-model:activeKey="activeKeyPermissions" class="ft-collapse">
|
|
<a-collapse-panel key="3">
|
|
<template #header>
|
|
<span class="fto-panel-title">待审核成员名单</span>
|
|
<span class="fto-panel-count">{{ pendingPermissions.length }}</span>
|
|
</template>
|
|
<div class="ft-list">
|
|
<div v-for="(record, index) in pendingPermissions" :key="(record.UserName || '') + '-' + (record.PersonId || index)
|
|
" class="ft-item" :class="{ 'ft-item-collapsed': !isItemOpen(permItemKey('pd', record, index)) }">
|
|
<div class="ft-item-head" @click="toggleItem(permItemKey('pd', record, index))">
|
|
<span class="ft-item-index">{{ index + 1 }}</span>
|
|
<div class="ft-item-title">
|
|
<span class="ft-item-name">
|
|
{{ record.UserLocalName || "未命名成员" }}
|
|
</span>
|
|
</div>
|
|
<div v-if="data.IsManager && !isEdit" class="ft-item-actions" @click.stop>
|
|
<CheckCircleTwoTone class="ft-action" @click="approvePermission(record, 'N')" />
|
|
<CrownOutlined class="ft-action" style="color: #faad14" @click="approvePermission(record, 'Y')" />
|
|
<CloseCircleOutlined class="ft-action ft-action-delete" @click="rejectPermission(record)" />
|
|
</div>
|
|
<RightOutlined class="ft-item-arrow"
|
|
:class="{ 'ft-item-arrow-open': isItemOpen(permItemKey('pd', record, index)) }" />
|
|
</div>
|
|
<div v-show="isItemOpen(permItemKey('pd', record, index))" class="ft-item-body">
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">授权族员节点</span>
|
|
<span class="ft-item-text">{{ record.PersonLocalName || "-" }}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">申请时间</span>
|
|
<span class="ft-item-text">{{ formatDate(record.CreatedDatetime) || "-" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!pendingPermissions.length" class="ft-empty">
|
|
暂无待审核成员
|
|
</div>
|
|
</div>
|
|
</a-collapse-panel>
|
|
<a-collapse-panel key="4">
|
|
<template #header>
|
|
<span class="fto-panel-title">管理名单</span>
|
|
<span class="fto-panel-count">{{ validPermissions.length }}</span>
|
|
</template>
|
|
<div class="ft-list">
|
|
<div v-for="(record, index) in validPermissions" :key="(record.UserName || '') + '-' + (record.PersonId || index)
|
|
" class="ft-item" :class="{ 'ft-item-collapsed': !isItemOpen(permItemKey('vd', record, index)) }">
|
|
<div class="ft-item-head" @click="toggleItem(permItemKey('vd', record, index))">
|
|
<span class="ft-item-index">{{ index + 1 }}</span>
|
|
<div class="ft-item-title">
|
|
<span class="ft-item-name">
|
|
{{ record.UserLocalName || "未命名成员" }}
|
|
</span>
|
|
<a-tag v-if="record.ManagerIndc == 'Y'" class="ft-item-tag">管理员</a-tag>
|
|
</div>
|
|
<div v-if="data.IsManager && !isEdit" class="ft-item-actions" @click.stop>
|
|
<DeleteOutlined class="ft-action ft-action-delete" @click="rejectPermission(record)" />
|
|
</div>
|
|
<RightOutlined class="ft-item-arrow"
|
|
:class="{ 'ft-item-arrow-open': isItemOpen(permItemKey('vd', record, index)) }" />
|
|
</div>
|
|
<div v-show="isItemOpen(permItemKey('vd', record, index))" class="ft-item-body">
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">授权族员节点</span>
|
|
<span class="ft-item-text">{{ record.PersonLocalName || "-" }}</span>
|
|
</div>
|
|
<div class="ft-item-field">
|
|
<span class="ft-item-label">管理员</span>
|
|
<span class="ft-item-text">{{
|
|
getPolicyText(yesNoPolicy, record.ManagerIndc) || "-"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!validPermissions.length" class="ft-empty">
|
|
暂无管理成员
|
|
</div>
|
|
</div>
|
|
</a-collapse-panel>
|
|
</a-collapse>
|
|
</div>
|
|
</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 && data.IsCanAmend" :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 && data.IsCanAmend">删除</a-button>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</a-row>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<dragModal v-model:open="modelOption.isModalTree" 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" title="人员查询" @cancel="handleCance" :fullscreen="width < 640"
|
|
:mask-closable="false" @ok="handleSelectPerson">
|
|
<FamilyPersonEnquiry ref="personEnquiry" @on-row-dblclick="handleSelectPerson"></FamilyPersonEnquiry>
|
|
</dragModal>
|
|
<FamilyTreeChartModal v-model:open="chartVisible" :data="data" :loaded-nodes="loadedNodes" title="谱系图"
|
|
@select-child="onChartSelectChild" />
|
|
<AncestryTreeChartModal v-model:open="ancestryChartVisible" :tree-id="treeId" title="祖谱系图" />
|
|
<FamilyPersonQuickCreateModal v-model:open="quickCreateOpen" :tree-id="treeId" :title="quickCreateTitle"
|
|
@created="onPersonQuickCreated" />
|
|
</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,
|
|
ApartmentOutlined,
|
|
FileProtectOutlined,
|
|
CheckCircleTwoTone,
|
|
CloseCircleOutlined,
|
|
CrownOutlined,
|
|
RightOutlined,
|
|
UserAddOutlined,
|
|
} 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 FamilyPersonQuickCreateModal from "./FamilyPersonQuickCreateModal.vue";
|
|
import FamilyTreeChartModal from "@/components/master/FamilyTreeChartModal.vue";
|
|
import AncestryTreeChartModal from "@/components/master/AncestryTreeChartModal.vue";
|
|
import { FamilyTreeData } from "@/data/auto/familyTreeData";
|
|
import { FamilyTreePermissionUserViewEntity } from "@/data/auto/familyTreePermissionUserViewEntity";
|
|
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 { FamilyPersonDisplayData } from "@/data/auto/familyPersonDisplayData";
|
|
import { BindOption } from "@/data/custom/bindOption";
|
|
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 isCreate = ref<boolean>(false);
|
|
const canAmend = ref<boolean>(false);
|
|
const canDelete = ref<boolean>(false);
|
|
const canCreate = ref<boolean>(false);
|
|
|
|
const showModalType = ref<number>(0);
|
|
const chartVisible = ref<boolean>(false);
|
|
const ancestryChartVisible = ref<boolean>(false);
|
|
|
|
const quickCreateOpen = ref<boolean>(false);
|
|
const quickCreateTitle = ref<string>("");
|
|
const quickCreatePurpose = ref<"spouse" | "child" | "ancestor" | "">("");
|
|
|
|
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);
|
|
|
|
/**
|
|
* 两个折叠区各自维护开合状态（原先三个折叠区共用一个 activeKey，点一个会把别的也带走），默认全部展开：
|
|
* 关系维护（夫妻关系 / 孩子关系）、权限维护（待审核成员名单 / 管理名单）。
|
|
*/
|
|
const activeKeyRelations = ref(["1", "2"]);
|
|
const activeKeyPermissions = ref(["3", "4"]);
|
|
|
|
/**
|
|
* 成员卡片默认只显示标题行（序号 + 姓名 + 性别/标签 + 操作图标），
|
|
* 点标题行或右侧箭头才展开下面的字段内容；这里存的是"已展开"的卡片 key，空数组即全部收起。
|
|
*/
|
|
const openItemKeys = ref<string[]>([]);
|
|
|
|
/** 生成卡片 key：优先用记录自身 Id，取不到时退回下标（与 v-for 的 :key 语义保持一致） */
|
|
const itemKey = (prefix: string, id: unknown, index: number) =>
|
|
`${prefix}-${id || index}`;
|
|
|
|
/** 权限卡片的 key（与 v-for 的 :key 写法一致，避免同一人多次申请时互相串开合状态） */
|
|
const permItemKey = (
|
|
prefix: string,
|
|
record: { UserName?: string | null; PersonId?: string | null },
|
|
index: number,
|
|
) => `${prefix}-${(record.UserName || "") + "-" + (record.PersonId || index)}`;
|
|
|
|
const isItemOpen = (key: string) => openItemKeys.value.includes(key);
|
|
|
|
const toggleItem = (key: string) => {
|
|
const at = openItemKeys.value.indexOf(key);
|
|
if (at >= 0) openItemKeys.value.splice(at, 1);
|
|
else openItemKeys.value.push(key);
|
|
};
|
|
|
|
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();
|
|
}
|
|
isCreate.value = false;
|
|
if (mode.value && mode.value == "create") {
|
|
onCreate();
|
|
isEdit.value = true;
|
|
isCreate.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 onShowChart = () => {
|
|
if (!hasData.value) return;
|
|
chartVisible.value = true;
|
|
};
|
|
|
|
const onShowAncestryChart = () => {
|
|
if (!hasData.value || !treeId.value) return;
|
|
ancestryChartVisible.value = true;
|
|
};
|
|
|
|
// 待审核成员：ValidIndc == 'N'
|
|
const pendingPermissions = computed(() =>
|
|
(data.value.FamilyTreePermissions ?? []).filter(
|
|
(x) => x.ValidIndc == "N",
|
|
),
|
|
);
|
|
|
|
// 管理名单：ValidIndc == 'Y'
|
|
const validPermissions = computed(() =>
|
|
(data.value.FamilyTreePermissions ?? []).filter(
|
|
(x) => x.ValidIndc == "Y",
|
|
),
|
|
);
|
|
|
|
// 申请管理：当前用户申请加入该族谱
|
|
const onRequestPermission = async () => {
|
|
if (!hasData.value || !treeId.value) return;
|
|
|
|
if (!data.value.CurrentPerson?.FamilyPerson?.PersonId) {
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "请先选择当前族员",
|
|
placement: "topRight",
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
loading.value = true;
|
|
await familyTreeService.RequestFamilyTreePermission({
|
|
treeId: treeId.value.trim(),
|
|
currentPersonId: data.value.CurrentPerson.FamilyPerson.PersonId,
|
|
});
|
|
loading.value = false;
|
|
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "申请已提交，等待管理员审核",
|
|
placement: "topRight",
|
|
});
|
|
|
|
await onSearch();
|
|
} catch (error) {
|
|
loading.value = false;
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
// 审核通过：managerIndc 'N' 普通成员 / 'Y' 管理员
|
|
const approvePermission = async (
|
|
record: FamilyTreePermissionUserViewEntity,
|
|
managerIndc: string,
|
|
) => {
|
|
try {
|
|
loading.value = true;
|
|
await familyTreeService.ApproveFamilyTreePermission({
|
|
treeId: treeId.value,
|
|
currentPersonId: record.PersonId,
|
|
userName: record.UserName,
|
|
managerIndc: managerIndc,
|
|
});
|
|
loading.value = false;
|
|
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: managerIndc == "Y" ? "已通过并设为管理员" : "审核通过",
|
|
placement: "topRight",
|
|
});
|
|
|
|
await onSearch();
|
|
} catch (error) {
|
|
loading.value = false;
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
// 拒绝/移除：删除权限记录
|
|
const rejectPermission = async (record: FamilyTreePermissionUserViewEntity) => {
|
|
try {
|
|
loading.value = true;
|
|
await familyTreeService.RejectFamilyTreePermission({
|
|
treeId: treeId.value,
|
|
currentPersonId: record.PersonId,
|
|
userName: record.UserName,
|
|
});
|
|
loading.value = false;
|
|
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "操作成功",
|
|
placement: "topRight",
|
|
});
|
|
|
|
await onSearch();
|
|
} catch (error) {
|
|
loading.value = false;
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
/** 谱系图中已加载的族员节点（personId -> { person, spouses, children }），不清空原 data，只追加 */
|
|
const loadedNodes = ref<Record<string, any>>({});
|
|
|
|
const onChartSelectChild = async (personId: string) => {
|
|
if (!personId || !treeId.value) return;
|
|
if (loadedNodes.value[personId]) return;
|
|
|
|
try {
|
|
loading.value = true;
|
|
const childData = await familyTreeService.FindByCurrentPerson({
|
|
key: treeId.value.trim(),
|
|
personId,
|
|
});
|
|
|
|
if (childData?.CurrentPerson?.FamilyPerson) {
|
|
loadedNodes.value = {
|
|
...loadedNodes.value,
|
|
[personId]: {
|
|
person: childData.CurrentPerson.FamilyPerson,
|
|
spouses: childData.CurrentPerson.FamilyTreeSpouseMaps ?? [],
|
|
children: childData.CurrentPerson.FamilyTreeChildrenMaps ?? [],
|
|
},
|
|
};
|
|
} else {
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "未找到该族员的谱系数据",
|
|
placement: "topRight",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const onSearch = async () => {
|
|
try {
|
|
loading.value = true;
|
|
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;
|
|
|
|
// 无修改权限：强制回到查看模式
|
|
if (!data.value.IsCanAmend && mode.value == "amend") {
|
|
mode.value = "view";
|
|
isEdit.value = false;
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "您没有该族谱的修改权限",
|
|
placement: "topRight",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
loading.value = false;
|
|
console.log(error);
|
|
}
|
|
finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const onReset = () => {
|
|
data.value = new FamilyTreeData();
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
|
|
treeId.value = "";
|
|
hasData.value = false;
|
|
loadedNodes.value = {};
|
|
selectedSonIndex.value = -1;
|
|
selectedParentIndex.value = -1;
|
|
};
|
|
|
|
const onCreate = () => {
|
|
onReset();
|
|
isEdit.value = true;
|
|
isCreate.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) => {
|
|
quickCreatePurpose.value = "spouse";
|
|
quickCreateTitle.value = "新增配偶(创建家族成员)";
|
|
quickCreateOpen.value = true;
|
|
|
|
// 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) => {
|
|
quickCreatePurpose.value = "child";
|
|
quickCreateTitle.value = "新增孩子(创建家族成员)";
|
|
quickCreateOpen.value = true;
|
|
|
|
// 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 = () => {
|
|
quickCreatePurpose.value = "ancestor";
|
|
quickCreateTitle.value = "新增祖先(创建家族成员)";
|
|
quickCreateOpen.value = true;
|
|
};
|
|
|
|
const onModalCurrentPerson = () => {
|
|
// 只查询当前族谱下的族员：传入族谱编号并置为只读
|
|
modelOption.value.initBindOptionsPerson = [];
|
|
let bo: BindOption = new BindOption();
|
|
bo.BindValue = FamilyPersonEntity.DB_TREE_ID;
|
|
bo.Value = treeId.value;
|
|
bo.disabled = true;
|
|
modelOption.value.initBindOptionsPerson.push(bo);
|
|
|
|
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 == 4) {
|
|
data.value.CurrentPerson.FamilyPerson.GenealogyName =
|
|
personEnquiry.value.keys[0].GenealogyName;
|
|
data.value.CurrentPerson.FamilyPerson.PersonId =
|
|
personEnquiry.value.keys[0].PersonId;
|
|
|
|
onSearch();
|
|
}
|
|
|
|
modelOption.value.isModalPerson = false;
|
|
} else {
|
|
notification.info({
|
|
message: "系统提示：",
|
|
description: "请选择一条记录",
|
|
placement: "topRight",
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const onPersonQuickCreated = (person: FamilyPersonDisplayData) => {
|
|
if (!person || !person.PersonId) {
|
|
return;
|
|
}
|
|
|
|
if (quickCreatePurpose.value === "spouse") {
|
|
if (!data.value.CurrentPerson.FamilyTreeSpouseMaps)
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
|
|
const spouse = new FamilyTreeSpouseMapViewEntity();
|
|
spouse.SpouseId = person.PersonId;
|
|
spouse.SpouseSurname = person.Surname;
|
|
spouse.SpouseCommonName = person.CommonName;
|
|
spouse.SpouseGenealogyName = person.GenealogyName;
|
|
spouse.Gender = person.Gender;
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps.push(spouse);
|
|
refreshParentOrderby();
|
|
} else if (quickCreatePurpose.value === "child") {
|
|
if (!data.value.CurrentPerson.FamilyTreeChildrenMaps)
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
|
|
const child = new FamilyTreeChildrenMapViewEntity();
|
|
child.ChildrenId = person.PersonId;
|
|
child.ChildrenSurname = person.Surname;
|
|
child.ChildrenCommonName = person.CommonName;
|
|
child.ChildrenGenealogyName = person.GenealogyName;
|
|
child.Gender = person.Gender;
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps.push(child);
|
|
refreshSonOrderby();
|
|
} else if (quickCreatePurpose.value === "ancestor") {
|
|
data.value.FamilyTree.AncestorPersonId = person.PersonId;
|
|
data.value.FamilyTree.AncestorPersonGenealogyName = person.GenealogyName;
|
|
}
|
|
};
|
|
</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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* ==================== FamilyTree 移动端表单美化 ==================== */
|
|
.page-main.ft-page {
|
|
padding: 12px 12px 96px 12px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* 顶部信息卡 */
|
|
.page-main.ft-page .ft-hero {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid #e8f1ff;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, #f2f8ff 0%, #ffffff 70%);
|
|
box-shadow: 0 2px 10px rgba(22, 119, 255, 0.06);
|
|
}
|
|
|
|
.page-main.ft-page .ft-hero-icon {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 14px;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
|
|
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.28);
|
|
}
|
|
|
|
.page-main.ft-page .ft-hero-main {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-main.ft-page .ft-hero-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
color: #1f2329;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.page-main.ft-page .ft-hero-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.page-main.ft-page .ft-chip {
|
|
display: inline-block;
|
|
padding: 1px 10px;
|
|
border-radius: 10px;
|
|
background: rgba(22, 119, 255, 0.08);
|
|
color: #1677ff;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
/* 分组卡片 */
|
|
.page-main.ft-page .ft-card {
|
|
padding: 12px 14px 14px;
|
|
margin-bottom: 12px;
|
|
border: 1px solid #eef0f4;
|
|
border-radius: 14px;
|
|
background: #fff;
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.page-main.ft-page .ft-card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding-bottom: 10px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1f2329;
|
|
}
|
|
|
|
.page-main.ft-page .ft-card-title::before {
|
|
content: "";
|
|
width: 3px;
|
|
height: 14px;
|
|
border-radius: 2px;
|
|
background: #1677ff;
|
|
}
|
|
|
|
/* 字段栅格：手机单列，宽屏自动多列 */
|
|
.page-main.ft-page .ft-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 10px 16px;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.page-main.ft-page .ft-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.page-main.ft-page .ft-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.page-main.ft-page .ft-field {
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-main.ft-page .ft-field-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.page-main.ft-page .ft-label {
|
|
margin-bottom: 4px;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
color: #646a73;
|
|
}
|
|
|
|
.page-main.ft-page .ft-required {
|
|
margin-left: 2px;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.page-main.ft-page .ft-inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.page-main.ft-page .ft-inline .ft-inline-main {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-main.ft-page .ft-inline .ft-inline-btn {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.page-main.ft-page .ft-full-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 控件外观 */
|
|
.page-main.ft-page .ant-input,
|
|
.page-main.ft-page .ant-input-affix-wrapper,
|
|
.page-main.ft-page .ant-select-selector,
|
|
.page-main.ft-page .ant-picker,
|
|
.page-main.ft-page .ant-input-number {
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
/* 查看态：弱化边框与底色，像纯文本一样易读 */
|
|
.page-main.ft-page.ft-readonly .ant-input,
|
|
.page-main.ft-page.ft-readonly textarea.ant-input,
|
|
.page-main.ft-page.ft-readonly .ant-input-affix-wrapper,
|
|
.page-main.ft-page.ft-readonly .ant-select-selector,
|
|
.page-main.ft-page.ft-readonly .ant-picker {
|
|
border-color: #f0f1f3;
|
|
background: #fafbfc;
|
|
color: #1f2329;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.page-main.ft-page.ft-readonly .ant-input[readonly],
|
|
.page-main.ft-page.ft-readonly .ant-input[disabled] {
|
|
color: #1f2329;
|
|
cursor: default;
|
|
}
|
|
|
|
.page-main.ft-page.ft-readonly .ant-select-disabled .ant-select-selector {
|
|
color: #1f2329;
|
|
}
|
|
|
|
.page-main.ft-page.ft-readonly .ant-select-disabled .ant-select-arrow,
|
|
.page-main.ft-page.ft-readonly .ant-picker-disabled .ant-picker-suffix {
|
|
display: none;
|
|
}
|
|
|
|
/* 关系维护里的折叠面板去边框 */
|
|
.page-main.ft-page .ft-card .ant-collapse {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.page-main.ft-page .ft-card .ant-collapse>.ant-collapse-item {
|
|
border-bottom: 1px solid #eef0f4;
|
|
}
|
|
|
|
.page-main.ft-page .ft-card .ant-collapse>.ant-collapse-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 手机端 */
|
|
@media (max-width: 575px) {
|
|
.page-main.ft-page {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/* 16px 字号可避免 iOS 聚焦输入框时页面被自动放大 */
|
|
.page-main.ft-page .ant-input,
|
|
.page-main.ft-page .ant-input-affix-wrapper,
|
|
.page-main.ft-page .ant-select-selector,
|
|
.page-main.ft-page .ant-select-selection-item,
|
|
.page-main.ft-page .ant-select-selection-placeholder,
|
|
.page-main.ft-page .ant-picker {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-body {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
/* ==================== 关系维护：卡片列表 ==================== */
|
|
.page-main.ft-page .ft-collapse {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.page-main.ft-page .ft-collapse>.ant-collapse-item {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.page-main.ft-page .ft-collapse .ant-collapse-header {
|
|
padding: 8px 0 !important;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1f2329;
|
|
}
|
|
|
|
.page-main.ft-page .ft-collapse .ant-collapse-content-box {
|
|
padding: 0 0 4px 0 !important;
|
|
}
|
|
|
|
.page-main.ft-page .ft-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item {
|
|
overflow: hidden;
|
|
border: 1px solid #eef0f4;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
transition:
|
|
border-color 0.2s,
|
|
box-shadow 0.2s;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-selected {
|
|
border-color: #1677ff;
|
|
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #eef0f4;
|
|
background: #f7f9fc;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-index {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: #e8f1ff;
|
|
color: #1677ff;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-title {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-name {
|
|
overflow: hidden;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #1f2329;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-tag {
|
|
flex: 0 0 auto;
|
|
margin: 0;
|
|
border-radius: 8px;
|
|
border-color: #d6e4ff;
|
|
background: #f0f5ff;
|
|
color: #1677ff;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-actions {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.page-main.ft-page .ft-action {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.page-main.ft-page .ft-action-delete {
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 10px 14px;
|
|
padding: 12px;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.page-main.ft-page .ft-item-body {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.page-main.ft-page .ft-item-body {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-field {
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-size: 12px;
|
|
color: #8a919f;
|
|
}
|
|
|
|
.page-main.ft-page .ft-item-text {
|
|
display: block;
|
|
min-height: 22px;
|
|
font-size: 14px;
|
|
color: #1f2329;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.page-main.ft-page .ft-empty {
|
|
padding: 20px 0;
|
|
border: 1px dashed #e5e8ef;
|
|
border-radius: 12px;
|
|
background: #fafbfc;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #8a919f;
|
|
}
|
|
|
|
.page-main.ft-page .ft-add-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
height: 42px;
|
|
border-radius: 12px;
|
|
border-style: dashed;
|
|
color: #1677ff;
|
|
}
|
|
|
|
/* ==================== 族谱设置：界面美化 ====================
|
|
* 全部规则收在根类 .family-tree-op 下，保证不影响其他 Operation 页面；
|
|
* 需要覆盖 ft-mobile.less 里带 !important 的规则时，靠更长的选择器提高优先级。
|
|
*/
|
|
.family-tree-op {
|
|
--fto-blue: #1677ff;
|
|
--fto-line: #eef1f6;
|
|
--fto-text: #1f2329;
|
|
--fto-sub: #646a73;
|
|
}
|
|
|
|
/* ---------- 顶部工具条 ---------- */
|
|
.family-tree-op .page-header.fto-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px 12px;
|
|
padding: 10px 12px;
|
|
margin: 0 0 12px;
|
|
border: 1px solid #e8f1ff;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 78%);
|
|
box-shadow: 0 2px 10px rgba(22, 119, 255, 0.06);
|
|
}
|
|
|
|
.family-tree-op .fto-search {
|
|
flex: 1 1 300px;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.family-tree-op .fto-search-label {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border-radius: 9px;
|
|
background: rgba(22, 119, 255, 0.1);
|
|
color: var(--fto-blue);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.family-tree-op .fto-search-input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 查询框：外层统一圆角（后缀图标 / 附加按钮两种结构都覆盖） */
|
|
.family-tree-op .page-header .fto-search-input .ant-input,
|
|
.family-tree-op .page-header .fto-search-input .ant-input-affix-wrapper {
|
|
border-radius: 9px !important;
|
|
text-align: left;
|
|
}
|
|
|
|
.family-tree-op .page-header .fto-search-input .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled) {
|
|
border-color: #dbe5f5;
|
|
background: #fff;
|
|
}
|
|
|
|
.family-tree-op .page-header .fto-search-input .ant-input-group>.ant-input {
|
|
border-radius: 9px 0 0 9px !important;
|
|
}
|
|
|
|
.family-tree-op .page-header .fto-search-input .ant-input-group-addon .ant-input-search-button {
|
|
border-radius: 0 9px 9px 0 !important;
|
|
}
|
|
|
|
.family-tree-op .fto-actions {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.family-tree-op .fto-actions .ant-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border-radius: 9px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ---------- 卡片与标题 ---------- */
|
|
.family-tree-op .page-main.ft-page .ft-hero {
|
|
padding: 16px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-hero-name {
|
|
font-size: 19px;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-card {
|
|
padding: 14px 16px 16px;
|
|
border-color: #edf0f5;
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 1px 2px rgba(15, 23, 42, 0.03),
|
|
0 10px 30px -24px rgba(15, 23, 42, 0.45);
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-card-title {
|
|
padding-bottom: 12px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-card-title::before {
|
|
width: 4px;
|
|
height: 15px;
|
|
border-radius: 3px;
|
|
background: linear-gradient(180deg, #1677ff 0%, #69b1ff 100%);
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-label {
|
|
color: #8a919f;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
/* 「祖先」行：两个输入框拼成一个整块，用外层圆角 + 裁切代替方块拼接 */
|
|
.family-tree-op .page-main.ft-page .ft-inline-main.ant-input-group {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-inline-main.ant-input-group .ant-input,
|
|
.family-tree-op .page-main.ft-page .ft-inline-main.ant-input-group .ant-input-affix-wrapper {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* 「祖先」行右侧的「新增祖先」按钮：与左侧输入框拼成一整块，去掉自身圆角，由外层容器统一裁切 */
|
|
.family-tree-op .page-main.ft-page .ft-inline-main.ant-input-group .ant-btn {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* 「当前族员」两个按钮等宽 */
|
|
.family-tree-op .page-main.ft-page .fto-btn-row {
|
|
gap: 10px;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .fto-btn-row .fto-flex-btn {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* ---------- 折叠面板标题 + 数量徽标 ---------- */
|
|
.family-tree-op .page-main.ft-page .ft-collapse .ant-collapse-header {
|
|
align-items: center;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-collapse .ant-collapse-header-text {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.family-tree-op .fto-panel-title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
vertical-align: middle;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.family-tree-op .fto-panel-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
margin-left: 8px;
|
|
padding: 0 7px;
|
|
border-radius: 10px;
|
|
background: #f0f5ff;
|
|
color: var(--fto-blue);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ---------- 关系维护列表卡 ---------- */
|
|
.family-tree-op .page-main.ft-page .ft-item {
|
|
border-color: #edf0f5;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-item-head {
|
|
background: linear-gradient(180deg, #f9fbfe 0%, #f4f7fc 100%);
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-item-index {
|
|
background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
|
|
color: #fff;
|
|
box-shadow: 0 2px 6px rgba(22, 119, 255, 0.3);
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-item-selected {
|
|
border-color: var(--fto-blue);
|
|
box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-action {
|
|
transition:
|
|
transform 0.16s ease,
|
|
opacity 0.16s ease;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-action:hover {
|
|
transform: translateY(-1px);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 卡片默认只显示标题行，点标题行（或右侧箭头）展开/收起字段内容 */
|
|
.family-tree-op .page-main.ft-page .ft-item-head {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-item-head:hover {
|
|
background: #eef4ff;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-item-collapsed .ft-item-head {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-item-arrow {
|
|
flex: 0 0 auto;
|
|
margin-left: 2px;
|
|
color: #98a1b0;
|
|
font-size: 12px;
|
|
transition:
|
|
transform 0.18s ease,
|
|
color 0.18s ease;
|
|
}
|
|
|
|
.family-tree-op .page-main.ft-page .ft-item-arrow-open {
|
|
transform: rotate(90deg);
|
|
color: var(--fto-blue);
|
|
}
|
|
|
|
/* ---------- 底部操作条：不透明白底，避免下方内容透出来 ---------- */
|
|
.family-tree-op .page-footer {
|
|
padding: 10px 16px;
|
|
border-top: 1px solid var(--fto-line);
|
|
background: #ffffff;
|
|
box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, 0.5);
|
|
}
|
|
|
|
.family-tree-op .page-footer .ant-btn {
|
|
height: 38px;
|
|
padding: 0 18px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* ---------- 手机端 ---------- */
|
|
@media (max-width: 575px) {
|
|
.family-tree-op .page-header.fto-toolbar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.family-tree-op .fto-search {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
/* 手机端输入框字号变大后高度会变，让标签跟着撑满，保证与输入框齐平 */
|
|
.family-tree-op .fto-search-label {
|
|
align-self: stretch;
|
|
height: auto;
|
|
}
|
|
|
|
.family-tree-op .fto-actions .ant-btn {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
height: 38px;
|
|
}
|
|
|
|
.family-tree-op .page-footer .ant-btn {
|
|
flex: 1 1 0;
|
|
}
|
|
}
|
|
</style>
|