itcsx/Docker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ow

Browse Source
This commit is contained in:
itcsx committed 2026-09-16 15:02:36 +08:00
1 parent 57201f2860
commit 554a5a4a2c
19 files changed
+1150 -931
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WebVue/src/views/master/FamilyTreeOperation.vue
+399 -68
View File
@@ -1,37 +1,19 @@
<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 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 }">
<!-- 顶部信息卡 -->
@@ -89,9 +71,9 @@
<div class="ft-label">祖先</div>
<div class="ft-inline">
<a-input-group compact class="ft-inline-main" style="display: flex; width: 100%">
<a-input :disabled="true" v-model:value="data.FamilyTree.AncestorPersonGenealogyName"
<a-input size="large" :disabled="true" v-model:value="data.FamilyTree.AncestorPersonGenealogyName"
placeholder="族谱名" style="width: 50%" />
<a-input-search required :disabled="!isCreate" style="width: 50%"
<a-input-search size="large" required :disabled="!isCreate" style="width: 50%"
v-model:value="data.FamilyTree.AncestorPersonId" @search="onModalPerson" />
</a-input-group>
<a-button class="ft-inline-btn" size="large" type="primary" :disabled="!hasData"
@@ -127,10 +109,10 @@
placeholder="请输入族员" @search="onModalCurrentPerson" />
</div>
<div class="ft-field">
<div class="ft-inline">
<a-button class="ft-full-btn" size="large" type="primary" :disabled="!hasData"
<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="ft-inline-btn" size="large" type="primary" :disabled="!hasData"
<a-button class="fto-flex-btn" size="large" :disabled="!hasData || isEdit"
:icon="h(FileProtectOutlined)" @click.prevent="onRequestPermission">申请管理</a-button>
</div>
</div>
@@ -139,13 +121,19 @@
<!-- 关系维护 -->
<div class="ft-card">
<div class="ft-card-title">关系维护</div>
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
<a-collapse-panel key="1" header="夫妻关系">
<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 }">
<div class="ft-item-head">
.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">
@@ -160,13 +148,15 @@
{{ getPolicyText(genderOptions, record.Gender) }}
</a-tag>
</div>
<div v-if="isEdit" class="ft-item-actions">
<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 class="ft-item-body">
<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="结婚日期文本" />
@@ -234,12 +224,18 @@
</a-button>
</div>
</a-collapse-panel>
<a-collapse-panel key="2" header="孩子关系">
<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 }">
<div class="ft-item-head">
.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">
@@ -254,13 +250,15 @@
{{ getPolicyText(genderOptions, record.Gender) }}
</a-tag>
</div>
<div v-if="isEdit" class="ft-item-actions">
<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 class="ft-item-body">
<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
@@ -299,27 +297,34 @@
</a-collapse-panel>
</a-collapse>
</div>
<!-- 待审核成员名单 -->
<!-- 权限维护 -->
<div class="ft-card">
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
<a-collapse-panel key="3" header="待审核成员名单">
<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">
<div class="ft-item-head">
" 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">
<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 class="ft-item-body">
<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>
@@ -335,16 +340,15 @@
</div>
</div>
</a-collapse-panel>
</a-collapse>
</div>
<!-- 管理名单 -->
<div class="ft-card">
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
<a-collapse-panel key="4" header="管理名单">
<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">
<div class="ft-item-head">
" 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">
@@ -352,11 +356,13 @@
</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">
<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 class="ft-item-body">
<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>
@@ -456,6 +462,7 @@ import {
CheckCircleTwoTone,
CloseCircleOutlined,
CrownOutlined,
RightOutlined,
} from "@ant-design/icons-vue";
import {
PermissionContext,
@@ -541,7 +548,37 @@ interface PersonEnquiry {
const enquiry = ref<TreeEnquiry | null>(null);
const personEnquiry = ref<PersonEnquiry | null>(null);
const activeKey = ref(["1", "2"]);
/**
* 两个折叠区各自维护开合状态（原先三个折叠区共用一个 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([
{
@@ -1752,4 +1789,298 @@ const onPersonQuickCreated = (person: FamilyPersonDisplayData) => {
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-search .ant-input-affix-wrapper {
border-left: 0;
}
/* 「当前族员」两个按钮等宽 */
.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: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
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>