ow
This commit is contained in:
itcsx committed
1 parent
57201f2860
commit
554a5a4a2c
19 files changed
+1126
-907
No files matched your search
+1
-1
@@ -3,7 +3,7 @@
|
|||||||
<Project>
|
<Project>
|
||||||
<PropertyGroup>
|
<PropertyGroup>
|
||||||
<_PublishTargetUrl>C:\inetpub\wwwroot\dockwebapi2</_PublishTargetUrl>
|
<_PublishTargetUrl>C:\inetpub\wwwroot\dockwebapi2</_PublishTargetUrl>
|
||||||
<History>True|2026-09-15T12:44:46.6559899Z||;True|2026-09-13T19:02:59.5654245+08:00||;True|2026-09-10T09:14:56.2914193+08:00||;True|2026-09-09T16:40:16.6461154+08:00||;True|2026-09-08T13:55:23.1502435+08:00||;True|2026-09-08T08:04:53.4279263+08:00||;True|2026-09-07T08:48:17.4682304+08:00||;True|2026-09-04T14:39:08.7878670+08:00||;True|2026-09-04T14:35:48.2937877+08:00||;True|2026-09-04T11:45:16.1372876+08:00||;True|2026-09-04T11:42:59.9356436+08:00||;True|2026-09-03T16:05:52.5270232+08:00||;True|2026-09-03T14:52:56.8559144+08:00||;True|2026-09-02T11:08:23.8720038+08:00||;True|2026-09-02T10:58:16.8081797+08:00||;True|2026-08-26T13:34:12.3805892+08:00||;True|2026-08-25T08:31:30.7787234+08:00||;True|2026-08-20T13:10:46.4725468+08:00||;True|2026-08-20T13:10:28.3142576+08:00||;True|2026-08-19T16:10:27.3362887+08:00||;True|2026-08-19T16:01:12.6234971+08:00||;True|2026-08-19T15:42:46.6576265+08:00||;True|2026-08-19T13:39:59.9363522+08:00||;True|2026-08-19T13:36:53.0379313+08:00||;True|2026-08-19T13:31:36.0841398+08:00||;True|2026-08-19T11:44:37.5319626+08:00||;True|2026-08-19T09:36:45.6000047+08:00||;True|2026-08-19T09:34:36.8468631+08:00||;True|2026-08-19T08:35:41.2202300+08:00||;True|2026-08-18T16:20:59.0170916+08:00||;</History>
|
<History>True|2026-09-16T05:56:51.8724546Z||;True|2026-09-15T20:44:46.6559899+08:00||;True|2026-09-13T19:02:59.5654245+08:00||;True|2026-09-10T09:14:56.2914193+08:00||;True|2026-09-09T16:40:16.6461154+08:00||;True|2026-09-08T13:55:23.1502435+08:00||;True|2026-09-08T08:04:53.4279263+08:00||;True|2026-09-07T08:48:17.4682304+08:00||;True|2026-09-04T14:39:08.7878670+08:00||;True|2026-09-04T14:35:48.2937877+08:00||;True|2026-09-04T11:45:16.1372876+08:00||;True|2026-09-04T11:42:59.9356436+08:00||;True|2026-09-03T16:05:52.5270232+08:00||;True|2026-09-03T14:52:56.8559144+08:00||;True|2026-09-02T11:08:23.8720038+08:00||;True|2026-09-02T10:58:16.8081797+08:00||;True|2026-08-26T13:34:12.3805892+08:00||;True|2026-08-25T08:31:30.7787234+08:00||;True|2026-08-20T13:10:46.4725468+08:00||;True|2026-08-20T13:10:28.3142576+08:00||;True|2026-08-19T16:10:27.3362887+08:00||;True|2026-08-19T16:01:12.6234971+08:00||;True|2026-08-19T15:42:46.6576265+08:00||;True|2026-08-19T13:39:59.9363522+08:00||;True|2026-08-19T13:36:53.0379313+08:00||;True|2026-08-19T13:31:36.0841398+08:00||;True|2026-08-19T11:44:37.5319626+08:00||;True|2026-08-19T09:36:45.6000047+08:00||;True|2026-08-19T09:34:36.8468631+08:00||;True|2026-08-19T08:35:41.2202300+08:00||;True|2026-08-18T16:20:59.0170916+08:00||;</History>
|
||||||
<LastFailureDetails />
|
<LastFailureDetails />
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
</Project>
|
</Project>
|
||||||
@@ -37,19 +37,22 @@
|
|||||||
@click.stop="toggleSelect(record)"
|
@click.stop="toggleSelect(record)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- 状态角标：右上角 -->
|
<!-- 状态角标：右上角（加锁/开锁仅目录有意义，文件不显示锁图标） -->
|
||||||
<div class="file-status-badge">
|
<div class="file-status-badge">
|
||||||
|
<template v-if="record.IsDirectoryIndc == 'Y'">
|
||||||
<LockOutlined
|
<LockOutlined
|
||||||
v-if="record.PermissionIndc === 'N'"
|
v-if="record.PermissionIndc === 'N'"
|
||||||
class="badge-lock"
|
class="badge-lock"
|
||||||
/>
|
/>
|
||||||
<template v-if="record.PermissionIndc === 'Y'">
|
<UnlockOutlined
|
||||||
<UnlockOutlined class="badge-unlock" />
|
v-else-if="record.PermissionIndc === 'Y'"
|
||||||
<ShareAltOutlined
|
class="badge-unlock"
|
||||||
v-if="record.FavoriteIndc === 'Y'"
|
|
||||||
class="badge-share"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
<ShareAltOutlined
|
||||||
|
v-if="record.PermissionIndc === 'Y' && record.FavoriteIndc === 'Y'"
|
||||||
|
class="badge-share"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="file-content">
|
<div class="file-content">
|
||||||
<template v-if="record.IsDirectoryIndc == 'Y'">
|
<template v-if="record.IsDirectoryIndc == 'Y'">
|
||||||
@@ -150,17 +153,20 @@
|
|||||||
record.OrgFileName
|
record.OrgFileName
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="list-status-icon">
|
<span class="list-status-icon">
|
||||||
|
<template v-if="record.IsDirectoryIndc == 'Y'">
|
||||||
<LockOutlined
|
<LockOutlined
|
||||||
v-if="record.PermissionIndc === 'N'"
|
v-if="record.PermissionIndc === 'N'"
|
||||||
class="icon-lock"
|
class="icon-lock"
|
||||||
/>
|
/>
|
||||||
<template v-if="record.PermissionIndc === 'Y'">
|
<UnlockOutlined
|
||||||
<UnlockOutlined class="icon-unlock" />
|
v-else-if="record.PermissionIndc === 'Y'"
|
||||||
<ShareAltOutlined
|
class="icon-unlock"
|
||||||
v-if="record.FavoriteIndc === 'Y'"
|
|
||||||
class="icon-share"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
<ShareAltOutlined
|
||||||
|
v-if="record.PermissionIndc === 'Y' && record.FavoriteIndc === 'Y'"
|
||||||
|
class="icon-share"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-size">{{ formatSize(record.FileSize) }}</div>
|
<div class="list-size">{{ formatSize(record.FileSize) }}</div>
|
||||||
|
|||||||
@@ -18,18 +18,12 @@
|
|||||||
<a-row :wrap="false">
|
<a-row :wrap="false">
|
||||||
<!-- 大屏用 4 列占位把操作区推到右侧；中小屏占位列隐藏，内容列占满整行再靠右 -->
|
<!-- 大屏用 4 列占位把操作区推到右侧；中小屏占位列隐藏，内容列占满整行再靠右 -->
|
||||||
<a-col :xs="0" :sm="0" :md="0" :lg="4"></a-col>
|
<a-col :xs="0" :sm="0" :md="0" :lg="4"></a-col>
|
||||||
<a-col
|
<a-col class="sc-toolbar" :xs="24" :sm="24" :md="24" :lg="20">
|
||||||
style="display: flex; justify-content: flex-end; flex-wrap: wrap"
|
|
||||||
:xs="24"
|
|
||||||
:sm="24"
|
|
||||||
:md="24"
|
|
||||||
:lg="20"
|
|
||||||
>
|
|
||||||
<a-input
|
<a-input
|
||||||
flex="none"
|
flex="none"
|
||||||
readonly
|
readonly
|
||||||
value="视图"
|
value="视图"
|
||||||
class="site-input-split"
|
class="site-input-split sc-view-label"
|
||||||
style="
|
style="
|
||||||
width: 80px;
|
width: 80px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@@ -40,7 +34,7 @@
|
|||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<a-select
|
<a-select
|
||||||
style="min-width: 200px"
|
class="sc-view-select"
|
||||||
v-model:value="viewOption.Value"
|
v-model:value="viewOption.Value"
|
||||||
@select="onSelectColumn"
|
@select="onSelectColumn"
|
||||||
>
|
>
|
||||||
@@ -52,11 +46,13 @@
|
|||||||
>
|
>
|
||||||
</a-select>
|
</a-select>
|
||||||
<a-button
|
<a-button
|
||||||
|
class="sc-toolbar-btn"
|
||||||
type="dashed"
|
type="dashed"
|
||||||
:icon="h(SettingTwoTone)"
|
:icon="h(SettingTwoTone)"
|
||||||
@click.prevent="onViewResult"
|
@click.prevent="onViewResult"
|
||||||
></a-button>
|
></a-button>
|
||||||
<a-button
|
<a-button
|
||||||
|
class="sc-toolbar-btn"
|
||||||
type="dashed"
|
type="dashed"
|
||||||
:icon="h(PrinterTwoTone)"
|
:icon="h(PrinterTwoTone)"
|
||||||
@click.prevent="onPrint"
|
@click.prevent="onPrint"
|
||||||
@@ -85,21 +81,33 @@
|
|||||||
v-for="(record, index) in datas"
|
v-for="(record, index) in datas"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="sc-card"
|
class="sc-card"
|
||||||
:class="{ 'sc-card-selected': isSelected(record) }"
|
:class="{
|
||||||
@click="onCardClick($event, record)"
|
'sc-card-selected': isSelected(record),
|
||||||
|
'sc-card-collapsed': !isExpanded(index),
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sc-card-head"
|
||||||
|
@click="onCardHeadClick($event, record, index)"
|
||||||
@dblclick="onCardDblclick($event, record)"
|
@dblclick="onCardDblclick($event, record)"
|
||||||
>
|
>
|
||||||
<div class="sc-card-head">
|
<span class="sc-check" @click.stop="onCardClick($event, record)">
|
||||||
<span class="sc-check">
|
|
||||||
<a-checkbox v-if="isCheckbox" :checked="isSelected(record)" />
|
<a-checkbox v-if="isCheckbox" :checked="isSelected(record)" />
|
||||||
<a-radio v-else :checked="isSelected(record)" />
|
<a-radio v-else :checked="isSelected(record)" />
|
||||||
</span>
|
</span>
|
||||||
<span class="sc-index">{{ getRowIndex(index) }}</span>
|
<span class="sc-index">{{ getRowIndex(index) }}</span>
|
||||||
<span class="sc-title">{{ getTitle(record) }}</span>
|
<span class="sc-title"><slot
|
||||||
|
name="cardTitle"
|
||||||
|
v-bind="{ record: record, index: index }"
|
||||||
|
>{{ getTitle(record) }}</slot></span>
|
||||||
|
<RightOutlined
|
||||||
|
class="sc-arrow"
|
||||||
|
:class="{ 'sc-arrow-open': isExpanded(index) }"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="sc-card-body">
|
<div v-show="isExpanded(index)" class="sc-card-body">
|
||||||
<div
|
<div
|
||||||
v-for="column in getCardColumns(index)"
|
v-for="column in allColumns"
|
||||||
:key="column.dataIndex"
|
:key="column.dataIndex"
|
||||||
class="sc-field"
|
class="sc-field"
|
||||||
>
|
>
|
||||||
@@ -122,21 +130,6 @@
|
|||||||
}}</span></span>
|
}}</span></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="canExpand" class="sc-card-more">
|
|
||||||
<a
|
|
||||||
class="sc-more-btn"
|
|
||||||
@click.stop="toggleExpand(index)"
|
|
||||||
@dblclick.stop="noop"
|
|
||||||
>
|
|
||||||
<span>{{
|
|
||||||
isExpanded(index)
|
|
||||||
? "收起"
|
|
||||||
: `展开全部（共 ${allColumns.length} 项）`
|
|
||||||
}}</span>
|
|
||||||
<UpOutlined v-if="isExpanded(index)" />
|
|
||||||
<DownOutlined v-else />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a-empty v-else class="sc-empty" description="暂无数据" />
|
<a-empty v-else class="sc-empty" description="暂无数据" />
|
||||||
@@ -183,8 +176,7 @@ import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
|
|||||||
import {
|
import {
|
||||||
SettingTwoTone,
|
SettingTwoTone,
|
||||||
PrinterTwoTone,
|
PrinterTwoTone,
|
||||||
UpOutlined,
|
RightOutlined,
|
||||||
DownOutlined,
|
|
||||||
} from "@ant-design/icons-vue";
|
} from "@ant-design/icons-vue";
|
||||||
import columnModal from "./ColumnModal.vue";
|
import columnModal from "./ColumnModal.vue";
|
||||||
import { useWindowSize } from "@vueuse/core";
|
import { useWindowSize } from "@vueuse/core";
|
||||||
@@ -488,15 +480,7 @@ const titleColumns = computed(() => {
|
|||||||
// 卡片主体展示的列：完整展示全部字段列（含用于标题的列），保证不丢列
|
// 卡片主体展示的列：完整展示全部字段列（含用于标题的列），保证不丢列
|
||||||
const allColumns = computed(() => fieldColumns.value);
|
const allColumns = computed(() => fieldColumns.value);
|
||||||
|
|
||||||
// 折叠时展示的字段数量（手机端精简为 3 项，桌面端尽量全展示）
|
// 展开状态（按列表序号记录）：默认全部收起，只显示标题行
|
||||||
const collapsedCount = computed(() => (isSM.value ? 3 : 9));
|
|
||||||
|
|
||||||
// 是否需要"展开/收起"
|
|
||||||
const canExpand = computed(
|
|
||||||
() => allColumns.value.length > collapsedCount.value,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 展开状态（按列表序号记录）
|
|
||||||
const expandedSet = ref<Record<number, boolean>>({});
|
const expandedSet = ref<Record<number, boolean>>({});
|
||||||
|
|
||||||
const isExpanded = (index: number | string) =>
|
const isExpanded = (index: number | string) =>
|
||||||
@@ -510,14 +494,11 @@ const toggleExpand = (index: number | string) => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// 当前卡片需要渲染的列：折叠时取前 N 项，展开时取全部
|
// 点击标题行：仅切换字段明细的展开/收起，不改选中状态
|
||||||
const getCardColumns = (index: number | string) => {
|
const onCardHeadClick = (event: any, record: any, index: number | string) => {
|
||||||
if (!canExpand.value || isExpanded(index)) return allColumns.value;
|
toggleExpand(index);
|
||||||
return allColumns.value.slice(0, collapsedCount.value);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const noop = () => {};
|
|
||||||
|
|
||||||
// 数据变化（查询/分页/排序）后重置展开状态
|
// 数据变化（查询/分页/排序）后重置展开状态
|
||||||
watch(datas, () => {
|
watch(datas, () => {
|
||||||
expandedSet.value = {};
|
expandedSet.value = {};
|
||||||
@@ -644,6 +625,28 @@ const { run } = usePagination(queryData, {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 视图工具条：强制单行，下拉框自适应剩余宽度，按钮不被挤到下一行 */
|
||||||
|
.setting .sc-toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting .sc-toolbar .sc-view-label,
|
||||||
|
.setting .sc-toolbar .sc-view-select,
|
||||||
|
.setting .sc-toolbar .sc-toolbar-btn {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下拉框吃掉中间的剩余宽度，窄屏也不会把按钮顶下去 */
|
||||||
|
.setting .sc-toolbar .sc-view-select {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
width: auto;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
.page-footer {
|
.page-footer {
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
@@ -695,13 +698,40 @@ const { run } = usePagination(queryData, {
|
|||||||
border-bottom: 1px solid #eef0f4;
|
border-bottom: 1px solid #eef0f4;
|
||||||
border-radius: 12px 12px 0 0;
|
border-radius: 12px 12px 0 0;
|
||||||
background: #f7f9fc;
|
background: #f7f9fc;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
/* 标题再长也不外溢，多余部分由标题自身省略 */
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 收起时：标题行独占整卡，隐藏与明细区的分割线 */
|
||||||
|
.sc-card-collapsed .sc-card-head {
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧展开箭头：展开后顺时针旋转 90 度 */
|
||||||
|
.sc-arrow {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-left: 2px;
|
||||||
|
color: #98a1b0;
|
||||||
|
font-size: 12px;
|
||||||
|
transition:
|
||||||
|
transform 0.18s ease,
|
||||||
|
color 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc-arrow-open {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
color: #1677ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 勾选框单独可点：用于精确勾选/取消，不会带开合明细 */
|
||||||
.sc-check {
|
.sc-check {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
pointer-events: none;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sc-index {
|
.sc-index {
|
||||||
@@ -720,8 +750,10 @@ const { run } = usePagination(queryData, {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sc-title {
|
.sc-title {
|
||||||
|
display: block;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -730,6 +762,11 @@ const { run } = usePagination(queryData, {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 标题内的自定义内容（如图标 + 路径）：整段按行内文本参与省略号截断 */
|
||||||
|
.sc-title .anticon {
|
||||||
|
vertical-align: -0.125em;
|
||||||
|
}
|
||||||
|
|
||||||
.sc-card-body {
|
.sc-card-body {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
@@ -780,25 +817,6 @@ const { run } = usePagination(queryData, {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sc-card-more {
|
|
||||||
padding: 0 12px 8px 12px;
|
|
||||||
text-align: right;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sc-more-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #1677ff;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sc-more-btn:hover {
|
|
||||||
color: #4096ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sc-empty {
|
.sc-empty {
|
||||||
padding: 40px 0;
|
padding: 40px 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,7 +9,9 @@
|
|||||||
<button class="ftc-zoom-btn" title="缩小" @click="zoomBy(-ZOOM_STEP)">－</button>
|
<button class="ftc-zoom-btn" title="缩小" @click="zoomBy(-ZOOM_STEP)">－</button>
|
||||||
<button class="ftc-zoom-btn" title="适应画布" @click="fitGraph">⤢</button>
|
<button class="ftc-zoom-btn" title="适应画布" @click="fitGraph">⤢</button>
|
||||||
<button class="ftc-zoom-btn" :title="dirTitle" @click="toggleDirection">{{ layoutDir === "h" ? "⇄" : "⇅" }}</button>
|
<button class="ftc-zoom-btn" :title="dirTitle" @click="toggleDirection">{{ layoutDir === "h" ? "⇄" : "⇅" }}</button>
|
||||||
|
<button v-if="focusedPersonId" class="ftc-zoom-btn ftc-zoom-btn--focus" title="退出聚焦" @click="resetFocus">⨯</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="focusedPersonId" class="ftc-focus-hint">已聚焦：{{ focusedLabel }}（仅分支末端的卡片可双击切换，再次双击同一卡片退出）</div>
|
||||||
</div>
|
</div>
|
||||||
<a-empty v-else-if="!loading" :description="loadError ? `无法展示：${loadError}` : '暂无全族数据'" />
|
<a-empty v-else-if="!loading" :description="loadError ? `无法展示：${loadError}` : '暂无全族数据'" />
|
||||||
|
|
||||||
@@ -114,8 +116,10 @@ const renderCard = (d: any) => {
|
|||||||
? `<div class="ftc-tag" style="color:#13c2c2; background:#13c2c21a;">${nd.expanded ? "点击折叠" : "点击展开"}</div>`
|
? `<div class="ftc-tag" style="color:#13c2c2; background:#13c2c21a;">${nd.expanded ? "点击折叠" : "点击展开"}</div>`
|
||||||
: "";
|
: "";
|
||||||
const clickable = nd.hasChildren ? "ftc-clickable" : "";
|
const clickable = nd.hasChildren ? "ftc-clickable" : "";
|
||||||
|
// 只有「每个分支的最后节点」可以双击聚焦，这里给出可双击的提示（是否响应由双击处理器统一把关）
|
||||||
|
const focusHint = nd.isBranchEnd ? ' title="双击：以该成员为中心查看"' : "";
|
||||||
return `
|
return `
|
||||||
<div class="ftc-card ${clickable}" style="border-top: 3px solid ${theme};">
|
<div class="ftc-card ${clickable}"${focusHint} style="border-top: 3px solid ${theme};">
|
||||||
<div class="ftc-main">
|
<div class="ftc-main">
|
||||||
<div class="ftc-avatar-wrap" style="border-color:${theme};">
|
<div class="ftc-avatar-wrap" style="border-color:${theme};">
|
||||||
<span class="ftc-avatar-ph" style="color:${avatarColor};">${USER_ICON_SVG}</span>${avatar}
|
<span class="ftc-avatar-ph" style="color:${avatarColor};">${USER_ICON_SVG}</span>${avatar}
|
||||||
@@ -399,6 +403,255 @@ const buildHorizontalData = () => {
|
|||||||
return { nodes, edges };
|
return { nodes, edges };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 构建纵向"聚焦"布局图数据（双击卡片进入）。
|
||||||
|
*
|
||||||
|
* 设计（始终按"行 = 世代"摆放，任意两行的占用互不重叠）：
|
||||||
|
* - 中心竖线（x = 0）：从始祖（根）一路到双击的人，直系父子全部对齐在这条竖线上，
|
||||||
|
* 父子之间就是一条竖直短线，最直观、也最不会"看起来断开"
|
||||||
|
* - 中心竖线两侧：每一代"非直系"的子女（本人的兄弟姐妹、叔伯姑姨等）紧贴中心竖线左右交替排开，
|
||||||
|
* 每人只放本人 + 配偶，不再向下展开。于是每一行只占一条窄带：既不会与中心竖线、
|
||||||
|
* 其他世代、双击人的后代相互压盖，整棵树也不会被撑得又宽又散
|
||||||
|
* - 双击人的全部后代：居中排在中心竖线正下方，按与纵向布局相同的"槽位"算法完整展开
|
||||||
|
* - 布局结束后返回内容包围盒，由渲染层缩放到刚好装下、并把双击的卡片摆到视口正中
|
||||||
|
* 仅改变排列方式，卡片内容与样式不变。
|
||||||
|
*/
|
||||||
|
const buildFocusedVerticalData = (focusId: string) => {
|
||||||
|
const nodes: any[] = [];
|
||||||
|
const edges: any[] = [];
|
||||||
|
const placed = new Set<string>();
|
||||||
|
|
||||||
|
if (!focusId || !personMap.has(focusId)) return { nodes, edges, bounds: null };
|
||||||
|
|
||||||
|
const CARD_WIDTH = 220;
|
||||||
|
const CARD_HEIGHT = 120;
|
||||||
|
const SPOUSE_GAP = 24; // 配偶紧贴本人
|
||||||
|
const H_GAP = 40; // 相邻子树水平间隔
|
||||||
|
const AXIS_GAP = 80; // 中心竖线与侧支之间的间隔
|
||||||
|
const Y_STEP = CARD_HEIGHT + 40;
|
||||||
|
|
||||||
|
const personNodeId = (pid: string) => "n-" + pid;
|
||||||
|
const spouseNodeId = (pid: string, i: number) => "s-" + pid + "-" + i;
|
||||||
|
|
||||||
|
const primaryChildrenOf = (pid: string) =>
|
||||||
|
(childrenOf.get(pid) ?? []).filter((c: any) => primaryParentOf(c.id) === pid);
|
||||||
|
|
||||||
|
const spousesOfPerson = (pid: string) =>
|
||||||
|
[...(spousesOf.get(pid) ?? [])].sort((a: any, b: any) => (a.orderby ?? 0) - (b.orderby ?? 0));
|
||||||
|
|
||||||
|
/** 一张卡片 + 右侧配偶占据的总宽度（配偶恒在本人右侧依次紧贴） */
|
||||||
|
const coupleWidth = (pid: string) => CARD_WIDTH + spousesOfPerson(pid).length * (SPOUSE_GAP + CARD_WIDTH);
|
||||||
|
|
||||||
|
/** 在 (x, y) 处创建本人卡片（已创建则跳过），返回节点 id */
|
||||||
|
const createPersonNode = (pid: string, x: number, y: number, isFocusCard: boolean): string => {
|
||||||
|
const nodeId = personNodeId(pid);
|
||||||
|
if (placed.has(pid)) return nodeId;
|
||||||
|
const info = personMap.get(pid) ?? {};
|
||||||
|
nodes.push({
|
||||||
|
id: nodeId,
|
||||||
|
style: { x, y },
|
||||||
|
data: {
|
||||||
|
kind: isFocusCard ? "self" : "member",
|
||||||
|
personId: pid,
|
||||||
|
tag: isFocusCard ? "聚焦" : "族员",
|
||||||
|
name: (info.Surname ?? "") + (info.GenealogyName ?? ""),
|
||||||
|
commonName: info.CommonName,
|
||||||
|
gender: info.Gender,
|
||||||
|
avatarUrl: info.AvatarUrl ?? "",
|
||||||
|
// 聚焦态的展开/切换由"双击卡片重新聚焦"承担，这里不再给出点了没反应的"点击展开"假入口
|
||||||
|
hasChildren: false,
|
||||||
|
expanded: false,
|
||||||
|
loaded: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
placed.add(pid);
|
||||||
|
return nodeId;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 把配偶作为简单卡片贴在本人右侧同一行（不展开配偶自己的后代，
|
||||||
|
* 避免侧支与中心竖线互相压盖）。返回整行最右边缘。
|
||||||
|
*/
|
||||||
|
const placedSpouseIds = new Set<string>();
|
||||||
|
const placeSpouses = (pid: string, personNodeIdRef: string, personX: number, personY: number): number => {
|
||||||
|
let edge = personX + CARD_WIDTH / 2;
|
||||||
|
spousesOfPerson(pid).forEach((sp: any, i: number) => {
|
||||||
|
const nodeId = spouseNodeId(pid, i);
|
||||||
|
if (placedSpouseIds.has(nodeId)) return;
|
||||||
|
placedSpouseIds.add(nodeId);
|
||||||
|
const x = edge + SPOUSE_GAP + CARD_WIDTH / 2;
|
||||||
|
const info = personMap.get(sp.id) ?? {};
|
||||||
|
nodes.push({
|
||||||
|
id: nodeId,
|
||||||
|
style: { x, y: personY },
|
||||||
|
data: {
|
||||||
|
kind: "spouse",
|
||||||
|
personId: sp.id,
|
||||||
|
tag: "配偶",
|
||||||
|
name: sp.name ?? (info.Surname ?? "") + (info.GenealogyName ?? ""),
|
||||||
|
commonName: sp.commonName ?? info.CommonName,
|
||||||
|
gender: sp.gender ?? info.Gender,
|
||||||
|
avatarUrl: info.AvatarUrl ?? "",
|
||||||
|
hasChildren: false,
|
||||||
|
expanded: false,
|
||||||
|
loaded: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
edges.push({ source: personNodeIdRef, target: nodeId, data: { kind: "spouse" } });
|
||||||
|
edge = x + CARD_WIDTH / 2;
|
||||||
|
});
|
||||||
|
return edge;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 父 → 子连线：父卡底部中心 → 两行之间的横向干线 → 子卡顶部中心。
|
||||||
|
* 父子同在中心竖线时两个折点重合，等价于一条竖直短线；
|
||||||
|
* 始终给满两个折点，和纵向布局里已经在用的写法完全一致（空数组会让 G6 走另一条端点推算分支）。
|
||||||
|
*/
|
||||||
|
const parentEdge = (parentNodeId: string, childNodeId: string, parentX: number, childX: number, childRow: number) => {
|
||||||
|
const railY = (childRow - 0.5) * Y_STEP;
|
||||||
|
edges.push({
|
||||||
|
source: parentNodeId,
|
||||||
|
target: childNodeId,
|
||||||
|
data: { kind: "parent", points: [[parentX, railY], [childX, railY]] },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 槽位宽度：本人 + 同行配偶 与 孩子那一整行 取较大者（与纵向布局同一套算法）。
|
||||||
|
* 孩子行一定居中排在本槽位内，所以整棵子树天然不会互相压盖。
|
||||||
|
*/
|
||||||
|
const slotWidth = (pid: string, depth = 0): number => {
|
||||||
|
if (depth > 60) return CARD_WIDTH;
|
||||||
|
const kids = primaryChildrenOf(pid);
|
||||||
|
const self = coupleWidth(pid);
|
||||||
|
if (!kids.length) return self;
|
||||||
|
const kidsWidth =
|
||||||
|
kids.reduce((a: number, c: any) => a + slotWidth(c.id, depth + 1), 0) + H_GAP * (kids.length - 1);
|
||||||
|
return Math.max(self, kidsWidth);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 以"槽位左上角"为基准，完整展开一棵子树（本人 + 右侧配偶 + 全部后代） */
|
||||||
|
const placeExpanded = (
|
||||||
|
pid: string,
|
||||||
|
row: number,
|
||||||
|
left: number,
|
||||||
|
parentNodeId: string | null,
|
||||||
|
parentX: number,
|
||||||
|
depth = 0
|
||||||
|
) => {
|
||||||
|
const width = slotWidth(pid, depth);
|
||||||
|
const selfX = left + CARD_WIDTH / 2;
|
||||||
|
const nodeId = createPersonNode(pid, selfX, row * Y_STEP, false);
|
||||||
|
placeSpouses(pid, nodeId, selfX, row * Y_STEP);
|
||||||
|
if (parentNodeId) parentEdge(parentNodeId, nodeId, parentX, selfX, row);
|
||||||
|
if (depth > 60) return;
|
||||||
|
|
||||||
|
const kids = primaryChildrenOf(pid);
|
||||||
|
if (!kids.length) return;
|
||||||
|
const kidsWidth =
|
||||||
|
kids.reduce((a: number, c: any) => a + slotWidth(c.id, depth + 1), 0) + H_GAP * (kids.length - 1);
|
||||||
|
let cx = left + (width - kidsWidth) / 2;
|
||||||
|
kids.forEach((c: any) => {
|
||||||
|
placeExpanded(c.id, row + 1, cx, nodeId, selfX, depth + 1);
|
||||||
|
cx += slotWidth(c.id, depth + 1) + H_GAP;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 1) 中心竖线：从双击的人沿主亲一路上溯再翻转 → 始祖在最上面，双击的人在竖线最下方
|
||||||
|
const chain: string[] = [];
|
||||||
|
{
|
||||||
|
const seen = new Set<string>();
|
||||||
|
let cur: string = focusId;
|
||||||
|
while (cur && !seen.has(cur)) {
|
||||||
|
seen.add(cur);
|
||||||
|
chain.push(cur);
|
||||||
|
cur = primaryParentOf(cur);
|
||||||
|
}
|
||||||
|
chain.reverse();
|
||||||
|
}
|
||||||
|
const focusRow = chain.length - 1;
|
||||||
|
|
||||||
|
// 2) 中心竖线：直系父子全部对齐在 x = 0，父子之间就是一条竖直短线
|
||||||
|
let axisRight = CARD_WIDTH / 2;
|
||||||
|
let prevSpineNodeId: string | null = null;
|
||||||
|
chain.forEach((pid, r) => {
|
||||||
|
const nodeId = createPersonNode(pid, 0, r * Y_STEP, r === focusRow);
|
||||||
|
axisRight = Math.max(axisRight, placeSpouses(pid, nodeId, 0, r * Y_STEP));
|
||||||
|
if (prevSpineNodeId) parentEdge(prevSpineNodeId, nodeId, 0, 0, r);
|
||||||
|
prevSpineNodeId = nodeId;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3) 每一代「非直系」的子女（本人的兄弟姐妹、叔伯姑姨等）：紧贴中心竖线左右交替排开，
|
||||||
|
// 每人只放本人 + 配偶，不向下展开。于是每一行只占一条窄带，彼此不会压盖，
|
||||||
|
// 中心竖线也始终清晰；想看某位旁支的后代，双击他重新聚焦即可。
|
||||||
|
// 左侧从卡片左边缘起算（竖线左边只有配偶之外的空位），右侧从整行最右边缘起算。
|
||||||
|
const sideRight = axisRight + AXIS_GAP;
|
||||||
|
const sideLeft = -(CARD_WIDTH / 2 + AXIS_GAP);
|
||||||
|
for (let r = 0; r < chain.length - 1; r++) {
|
||||||
|
const parentPid = chain[r];
|
||||||
|
const downPid = chain[r + 1];
|
||||||
|
const sideKids = primaryChildrenOf(parentPid).filter((c: any) => c.id !== downPid);
|
||||||
|
if (sideKids.length === 0) continue;
|
||||||
|
|
||||||
|
const parentNodeId = personNodeId(parentPid);
|
||||||
|
const childRow = r + 1;
|
||||||
|
const rightKids: any[] = [];
|
||||||
|
const leftKids: any[] = [];
|
||||||
|
// 兄弟按顺序交替分到两侧，先从右侧开始（离中心最近的排在最前）
|
||||||
|
sideKids.forEach((c: any, i: number) => (i % 2 === 0 ? rightKids : leftKids).push(c));
|
||||||
|
|
||||||
|
let edge = sideRight;
|
||||||
|
rightKids.forEach((c: any) => {
|
||||||
|
const selfX = edge + CARD_WIDTH / 2;
|
||||||
|
const nodeId = createPersonNode(c.id, selfX, childRow * Y_STEP, false);
|
||||||
|
parentEdge(parentNodeId, nodeId, 0, selfX, childRow);
|
||||||
|
edge = Math.max(placeSpouses(c.id, nodeId, selfX, childRow * Y_STEP), selfX + CARD_WIDTH / 2) + H_GAP;
|
||||||
|
});
|
||||||
|
|
||||||
|
edge = sideLeft;
|
||||||
|
leftKids.forEach((c: any) => {
|
||||||
|
const selfX = edge - coupleWidth(c.id) + CARD_WIDTH / 2;
|
||||||
|
const nodeId = createPersonNode(c.id, selfX, childRow * Y_STEP, false);
|
||||||
|
parentEdge(parentNodeId, nodeId, 0, selfX, childRow);
|
||||||
|
placeSpouses(c.id, nodeId, selfX, childRow * Y_STEP);
|
||||||
|
edge = selfX - CARD_WIDTH / 2 - H_GAP;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4) 双击人的全部后代：居中排在中心竖线正下方，完整展开
|
||||||
|
const focusKids = primaryChildrenOf(focusId);
|
||||||
|
if (focusKids.length > 0) {
|
||||||
|
const focusNodeId = personNodeId(focusId);
|
||||||
|
const widths = focusKids.map((c: any) => slotWidth(c.id));
|
||||||
|
const total = widths.reduce((a: number, w: number) => a + w, 0) + H_GAP * (focusKids.length - 1);
|
||||||
|
let cx = -total / 2;
|
||||||
|
focusKids.forEach((c: any, i: number) => {
|
||||||
|
placeExpanded(c.id, focusRow + 1, cx, focusNodeId, 0);
|
||||||
|
cx += widths[i] + H_GAP;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 5) 内容包围盒：交给渲染层"缩放到刚好装下 + 把双击的卡片摆到视口正中"。
|
||||||
|
// 不要再往图里塞占位节点做左右配平 —— G6 取值是 options.node.type || datum.type，
|
||||||
|
// 图级 node.type 为真值时 datum 上的 type 会被短路，占位会被当成 html 卡片原样渲染出来，
|
||||||
|
// 既凭空多出一张没有任何连线的卡片，又把包围盒撑歪、导致另一侧被裁掉像"连了断线"。
|
||||||
|
let minX = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
nodes.forEach((n: any) => {
|
||||||
|
const x = n.style.x as number;
|
||||||
|
const y = n.style.y as number;
|
||||||
|
minX = Math.min(minX, x - CARD_WIDTH / 2);
|
||||||
|
maxX = Math.max(maxX, x + CARD_WIDTH / 2);
|
||||||
|
minY = Math.min(minY, y - CARD_HEIGHT / 2);
|
||||||
|
maxY = Math.max(maxY, y + CARD_HEIGHT / 2);
|
||||||
|
});
|
||||||
|
|
||||||
|
return { nodes, edges, bounds: nodes.length ? { minX, maxX, minY, maxY } : null };
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 构建纵向布局图数据：本人与配偶同行并排，孩子排在下一行并居中于各自父节点。
|
* 构建纵向布局图数据：本人与配偶同行并排，孩子排在下一行并居中于各自父节点。
|
||||||
* 仅改变排列方式，卡片内容与样式不变。
|
* 仅改变排列方式，卡片内容与样式不变。
|
||||||
@@ -609,15 +862,55 @@ const buildVerticalData = () => {
|
|||||||
/** 布局方向：h=横向（深度向右），v=纵向（深度向下） */
|
/** 布局方向：h=横向（深度向右），v=纵向（深度向下） */
|
||||||
const layoutDir = ref<"h" | "v">("h");
|
const layoutDir = ref<"h" | "v">("h");
|
||||||
|
|
||||||
/** 按当前方向构建图数据 */
|
/** 双击卡片后聚焦到该成员；非空时使用聚焦布局。聚焦模式仅在纵向有效 */
|
||||||
const buildGraphData = () => (layoutDir.value === "v" ? buildVerticalData() : buildHorizontalData());
|
const focusedPersonId = ref<string>("");
|
||||||
|
|
||||||
|
/** 按当前方向构建图数据（纵向 + 已聚焦 → 走聚焦布局） */
|
||||||
|
const buildGraphData = () => {
|
||||||
|
if (layoutDir.value === "v" && focusedPersonId.value && personMap.has(focusedPersonId.value)) {
|
||||||
|
return buildFocusedVerticalData(focusedPersonId.value);
|
||||||
|
}
|
||||||
|
return layoutDir.value === "v" ? buildVerticalData() : buildHorizontalData();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 聚焦 / 取消聚焦；非空时若当前是横向，自动切到纵向 */
|
||||||
|
const setFocus = (pid: string) => {
|
||||||
|
if (focusedPersonId.value === pid) {
|
||||||
|
focusedPersonId.value = "";
|
||||||
|
} else {
|
||||||
|
focusedPersonId.value = pid;
|
||||||
|
if (layoutDir.value !== "v") layoutDir.value = "v";
|
||||||
|
}
|
||||||
|
initGraph();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 显式退出聚焦 */
|
||||||
|
const resetFocus = () => {
|
||||||
|
if (!focusedPersonId.value) return;
|
||||||
|
focusedPersonId.value = "";
|
||||||
|
initGraph();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 聚焦人姓名（用于顶部提示） */
|
||||||
|
const focusedLabel = computed(() => {
|
||||||
|
const pid = focusedPersonId.value;
|
||||||
|
if (!pid) return "";
|
||||||
|
const info = personMap.get(pid);
|
||||||
|
if (!info) return pid;
|
||||||
|
return (info.Surname ?? "") + (info.GenealogyName ?? "");
|
||||||
|
});
|
||||||
|
|
||||||
/** 方向按钮提示（按钮上的箭头表示当前方向） */
|
/** 方向按钮提示（按钮上的箭头表示当前方向） */
|
||||||
const dirTitle = computed(() => (layoutDir.value === "h" ? "当前横向排列，点击切换为纵向" : "当前纵向排列，点击切换为横向"));
|
const dirTitle = computed(() => (layoutDir.value === "h" ? "当前横向排列，点击切换为纵向" : "当前纵向排列，点击切换为横向"));
|
||||||
|
|
||||||
/** 横向 / 纵向排列切换 */
|
/** 横向 / 纵向排列切换：聚焦模式仅在纵向有效，切到横向时清掉 */
|
||||||
const toggleDirection = () => {
|
const toggleDirection = () => {
|
||||||
layoutDir.value = layoutDir.value === "h" ? "v" : "h";
|
if (layoutDir.value === "v") {
|
||||||
|
layoutDir.value = "h";
|
||||||
|
} else {
|
||||||
|
layoutDir.value = "v";
|
||||||
|
}
|
||||||
|
if (layoutDir.value === "h" && focusedPersonId.value) focusedPersonId.value = "";
|
||||||
initGraph();
|
initGraph();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -627,19 +920,60 @@ let graph: any = null;
|
|||||||
/** 卡片最小显示比例：世代过多时 fitView 会把整图缩得很小，卡片将看不清，低于该比例时放大 */
|
/** 卡片最小显示比例：世代过多时 fitView 会把整图缩得很小，卡片将看不清，低于该比例时放大 */
|
||||||
const MIN_ZOOM = 0.4;
|
const MIN_ZOOM = 0.4;
|
||||||
|
|
||||||
|
/** 画布允许的最小比例：聚焦时需要缩得比 MIN_ZOOM 更小才能把整幅图放进视口，否则会被裁掉像连线断了 */
|
||||||
|
const GRAPH_MIN_ZOOM = 0.05;
|
||||||
|
|
||||||
/** 缩放按钮单次增量 */
|
/** 缩放按钮单次增量 */
|
||||||
const ZOOM_STEP = 0.1;
|
const ZOOM_STEP = 0.1;
|
||||||
|
|
||||||
|
/** 聚焦布局的内容包围盒，供"适应画布"按钮复用 */
|
||||||
|
let focusBounds: { minX: number; maxX: number; minY: number; maxY: number } | null = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前图中「分支末端」的卡片：节点 id -> 该卡片代表的人员 id。
|
||||||
|
* 判定标准是"当前图上没有任何向下连线"，也就是每个分支的最后节点；
|
||||||
|
* 配偶之间是横向连线、不算子节点，计算时必须排除，否则已婚者会被误判成非末端。
|
||||||
|
* 只有这些卡片允许双击聚焦。
|
||||||
|
*/
|
||||||
|
let branchEndCards = new Map<string, string>();
|
||||||
|
|
||||||
|
/** 双击 / 双击识别时间窗（毫秒）。G6 在触屏上不发 node:dblclick，改用两次 click 之间的间隔识别 */
|
||||||
|
const DBLCLICK_MS = 300;
|
||||||
|
/** 节点最近一次单击时间戳（毫秒），用于在 node:click 里识别"双击/双击" */
|
||||||
|
let lastClickByNode = new Map<string, number>();
|
||||||
|
|
||||||
/** 单击按钮放大/缩小一点点（按增量叠加并限制在 zoomRange 内） */
|
/** 单击按钮放大/缩小一点点（按增量叠加并限制在 zoomRange 内） */
|
||||||
const zoomBy = (delta: number) => {
|
const zoomBy = (delta: number) => {
|
||||||
if (!graph) return;
|
if (!graph) return;
|
||||||
const next = graph.getZoom() + delta;
|
const next = graph.getZoom() + delta;
|
||||||
graph.zoomTo(Math.min(Math.max(next, MIN_ZOOM), 10));
|
graph.zoomTo(Math.min(Math.max(next, GRAPH_MIN_ZOOM), 10));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 聚焦态的视口：先"缩放到整幅图刚好装下"，再把双击的卡片平移到视口正中。
|
||||||
|
* 不依赖 autoFit —— autoFit / fitCenter 只保证整幅图的包围盒居中，一旦某一侧更宽，
|
||||||
|
* 另一侧就会被挤出视口，看起来既像"双击的卡片没居中"，又像有一侧的父子连线"掉了"。
|
||||||
|
*/
|
||||||
|
const focusViewport = async () => {
|
||||||
|
if (!graph || !focusBounds || !focusedPersonId.value) return;
|
||||||
|
const size = typeof graph.getSize === "function" ? graph.getSize() : [0, 0];
|
||||||
|
const [vw, vh] = Array.isArray(size) ? size : [0, 0];
|
||||||
|
const MARGIN = 40;
|
||||||
|
const bw = Math.max(focusBounds.maxX - focusBounds.minX, 1);
|
||||||
|
const bh = Math.max(focusBounds.maxY - focusBounds.minY, 1);
|
||||||
|
const fit = Math.min((vw - MARGIN * 2) / bw, (vh - MARGIN * 2) / bh, 1);
|
||||||
|
const scale = Number.isFinite(fit) && fit > 0 ? Math.max(fit, GRAPH_MIN_ZOOM) : 1;
|
||||||
|
await graph.zoomTo(scale);
|
||||||
|
await graph.focusElement("n-" + focusedPersonId.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 还原为适配整个画布（缩到最小比例以下的需重新居中，否则整图可能落在视口之外） */
|
/** 还原为适配整个画布（缩到最小比例以下的需重新居中，否则整图可能落在视口之外） */
|
||||||
const fitGraph = async () => {
|
const fitGraph = async () => {
|
||||||
if (!graph) return;
|
if (!graph) return;
|
||||||
|
if (focusedPersonId.value && focusBounds) {
|
||||||
|
await focusViewport();
|
||||||
|
return;
|
||||||
|
}
|
||||||
await graph.fitView();
|
await graph.fitView();
|
||||||
if (graph.getZoom() < MIN_ZOOM) {
|
if (graph.getZoom() < MIN_ZOOM) {
|
||||||
await graph.zoomTo(MIN_ZOOM);
|
await graph.zoomTo(MIN_ZOOM);
|
||||||
@@ -654,20 +988,44 @@ const destroyGraph = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** 并发调用 initGraph 时（例如单击展开 + 双击聚焦接连触发），只保留最新一次的结果，避免错位 */
|
||||||
|
let initToken = 0;
|
||||||
const initGraph = async () => {
|
const initGraph = async () => {
|
||||||
|
const token = ++initToken;
|
||||||
destroyGraph();
|
destroyGraph();
|
||||||
await nextTick();
|
await nextTick();
|
||||||
await new Promise((r) => requestAnimationFrame(r));
|
await new Promise((r) => requestAnimationFrame(r));
|
||||||
if (!containerRef.value) return;
|
if (token !== initToken || !containerRef.value) return;
|
||||||
|
|
||||||
const { nodes, edges } = buildGraphData();
|
const graphData: any = buildGraphData();
|
||||||
if (!nodes.length) return;
|
const nodes: any[] = graphData.nodes ?? [];
|
||||||
|
const edges: any[] = graphData.edges ?? [];
|
||||||
|
focusBounds = graphData.bounds ?? null;
|
||||||
|
|
||||||
|
// 标出「每个分支的最后节点」：当前图上没有任何向下连线（子边）的人员卡片。
|
||||||
|
// 配偶之间是横向连线，不算子节点，必须排除，否则已婚者会被误判成非末端。
|
||||||
|
const nodeIdsWithChild = new Set<string>();
|
||||||
|
edges.forEach((e: any) => {
|
||||||
|
if (e?.data?.kind === "spouse") return;
|
||||||
|
nodeIdsWithChild.add(e.source);
|
||||||
|
});
|
||||||
|
branchEndCards = new Map<string, string>();
|
||||||
|
lastClickByNode.clear();
|
||||||
|
nodes.forEach((n: any) => {
|
||||||
|
const nd = n?.data ?? {};
|
||||||
|
if (nd.kind === "spouse" || !nd.personId || nodeIdsWithChild.has(n.id)) return;
|
||||||
|
branchEndCards.set(n.id, nd.personId);
|
||||||
|
// 供卡片渲染出"可双击"的提示（是否真的响应仍由双击处理器统一把关）
|
||||||
|
nd.isBranchEnd = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (token !== initToken || !nodes.length) return;
|
||||||
|
|
||||||
graph = new Graph({
|
graph = new Graph({
|
||||||
container: containerRef.value,
|
container: containerRef.value,
|
||||||
// 内容小于视口时不缩放（卡片保持原始大小），内容溢出时才适配
|
// 内容小于视口时不缩放（卡片保持原始大小），内容溢出时才适配
|
||||||
autoFit: { type: "view", options: { when: "overflow", direction: "both" } },
|
autoFit: { type: "view", options: { when: "overflow", direction: "both" } },
|
||||||
zoomRange: [MIN_ZOOM, 10],
|
zoomRange: [GRAPH_MIN_ZOOM, 10],
|
||||||
data: { nodes, edges },
|
data: { nodes, edges },
|
||||||
node: {
|
node: {
|
||||||
type: "html",
|
type: "html",
|
||||||
@@ -700,15 +1058,42 @@ const initGraph = async () => {
|
|||||||
});
|
});
|
||||||
graph.on("node:click", (event: any) => {
|
graph.on("node:click", (event: any) => {
|
||||||
const id = event.target?.id ?? event.item?.getID?.();
|
const id = event.target?.id ?? event.item?.getID?.();
|
||||||
if (typeof id !== "string" || !id.startsWith("n-")) return;
|
if (typeof id !== "string") return;
|
||||||
|
const now = Date.now();
|
||||||
|
const last = lastClickByNode.get(id) ?? 0;
|
||||||
|
lastClickByNode.set(id, now);
|
||||||
|
|
||||||
|
// 300ms 内同一节点再次点击 → 触发聚焦（取代原不可靠的 node:dblclick，手机触屏不发 dblclick）
|
||||||
|
if (now - last <= DBLCLICK_MS) {
|
||||||
|
// 重置时间戳，防止三连击再次误触发
|
||||||
|
lastClickByNode.set(id, 0);
|
||||||
|
// 只允许「每个分支的最后节点」双击聚焦；已聚焦的那张卡片可双击退出聚焦
|
||||||
|
const personId =
|
||||||
|
branchEndCards.get(id) ??
|
||||||
|
(id === "n-" + focusedPersonId.value ? focusedPersonId.value : "");
|
||||||
|
if (personId) setFocus(personId);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单击：聚焦态不再切换展开态；非聚焦态且有孩子时延后展开，给双击检测留窗口（避免双击时先展开再聚焦的闪烁）
|
||||||
|
if (focusedPersonId.value) return;
|
||||||
|
if (!id.startsWith("n-")) return;
|
||||||
const personId = id.slice(2);
|
const personId = id.slice(2);
|
||||||
const children = childrenOf.get(personId) ?? [];
|
const children = childrenOf.get(personId) ?? [];
|
||||||
if (children.length === 0) return;
|
if (children.length === 0) return;
|
||||||
|
setTimeout(() => {
|
||||||
|
// 期间已被新的点击覆盖（即被识别为双击）→ 不再展开
|
||||||
|
if ((lastClickByNode.get(id) ?? 0) !== now) return;
|
||||||
toggleExpanded(personId);
|
toggleExpanded(personId);
|
||||||
|
}, DBLCLICK_MS);
|
||||||
});
|
});
|
||||||
await graph.render();
|
await graph.render();
|
||||||
|
if (token !== initToken) return;
|
||||||
|
if (focusedPersonId.value && focusBounds) {
|
||||||
|
// 聚焦态：整幅图缩放到刚好装下，并把双击的卡片摆到视口正中
|
||||||
|
await focusViewport();
|
||||||
|
} else if (graph.getZoom() < MIN_ZOOM) {
|
||||||
// 世代过多导致 fitView 缩得太小时，放大到最小显示比例并重新居中，保证卡片可见可读
|
// 世代过多导致 fitView 缩得太小时，放大到最小显示比例并重新居中，保证卡片可见可读
|
||||||
if (graph.getZoom() < MIN_ZOOM) {
|
|
||||||
await graph.zoomTo(MIN_ZOOM);
|
await graph.zoomTo(MIN_ZOOM);
|
||||||
if (typeof graph.fitCenter === "function") await graph.fitCenter();
|
if (typeof graph.fitCenter === "function") await graph.fitCenter();
|
||||||
}
|
}
|
||||||
@@ -772,12 +1157,22 @@ const loadTree = async () => {
|
|||||||
watch(visibleModel, async (v) => {
|
watch(visibleModel, async (v) => {
|
||||||
if (v) {
|
if (v) {
|
||||||
data.value = null;
|
data.value = null;
|
||||||
|
focusedPersonId.value = ""; // 重新打开时清掉上次的聚焦
|
||||||
await loadTree();
|
await loadTree();
|
||||||
} else {
|
} else {
|
||||||
|
focusedPersonId.value = "";
|
||||||
destroyGraph();
|
destroyGraph();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// treeId 变化时也清掉聚焦，避免指向已不在当前数据中的 personId
|
||||||
|
watch(
|
||||||
|
() => props.treeId,
|
||||||
|
() => {
|
||||||
|
focusedPersonId.value = "";
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
onBeforeUnmount(() => destroyGraph());
|
onBeforeUnmount(() => destroyGraph());
|
||||||
|
|
||||||
const onCancel = () => {
|
const onCancel = () => {
|
||||||
@@ -835,6 +1230,32 @@ const onCancel = () => {
|
|||||||
border-color: #1890ff;
|
border-color: #1890ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 退出聚焦按钮：显眼一些 */
|
||||||
|
.ftc-zoom-btn--focus {
|
||||||
|
color: #fa541c;
|
||||||
|
border-color: #fa541c;
|
||||||
|
}
|
||||||
|
.ftc-zoom-btn--focus:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: #fa541c;
|
||||||
|
border-color: #fa541c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 聚焦状态提示 */
|
||||||
|
.ftc-focus-hint {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 12px;
|
||||||
|
z-index: 20;
|
||||||
|
padding: 4px 10px;
|
||||||
|
background: rgba(250, 84, 28, 0.08);
|
||||||
|
color: #fa541c;
|
||||||
|
border: 1px solid rgba(250, 84, 28, 0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* G6 HTML 节点卡片样式（与谱系图一致，使用独立前缀避免污染全局） */
|
/* G6 HTML 节点卡片样式（与谱系图一致，使用独立前缀避免污染全局） */
|
||||||
.ftc-card {
|
.ftc-card {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
import "@/styles/main.css";
|
import "@/styles/main.css";
|
||||||
|
import "@/styles/ft-shell.less";
|
||||||
|
import "@/styles/ft-mobile.less";
|
||||||
import "animate.css";
|
import "animate.css";
|
||||||
import "animate.css/animate.compat.css";
|
import "animate.css/animate.compat.css";
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,74 @@
|
|||||||
|
/* ==================== Operation 页面：桌面/通用外壳（与 FamilyTreeOperation 保持一致） ====================
|
||||||
|
* 使用方式：模板里写
|
||||||
|
* <div class="page-container"> ... <div class="page-header"> ... </div>
|
||||||
|
* <div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||||
|
* ... <div class="ft-card"> ... </div> ...
|
||||||
|
* </div>
|
||||||
|
* <div class="page-footer"> ... </div>
|
||||||
|
* </div>
|
||||||
|
* 仅放置“非 ft-*”的容器层规则；卡片、栅格、列表、详情、控件外观等由 ft-mobile.less 提供。
|
||||||
|
*/
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部工具栏 */
|
||||||
|
.page-header {
|
||||||
|
padding-top: 4px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
padding-right: 12px;
|
||||||
|
padding-left: 0;
|
||||||
|
border-bottom: 1px solid silver;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部搜索框：左侧贴边、无圆角 */
|
||||||
|
.page-header .ant-input-search .ant-input {
|
||||||
|
border-radius: 0;
|
||||||
|
border-left: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主内容区（不带 ft-page 时是桌面布局；带 ft-page 时由 ft-mobile.less 提供 12/12/96/12 的移动端内边距） */
|
||||||
|
.page-main {
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-top: 24px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
padding-right: 32px;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部固定操作栏 */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格行高亮：成员/子级选中等场景，与 FamilyTreeOperation 保持一致 */
|
||||||
|
.son-row-selected td,
|
||||||
|
.parent-row-selected td {
|
||||||
|
border-top: 2px solid #1677ff !important;
|
||||||
|
border-bottom: 2px solid #1677ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.son-row-selected td:first-child,
|
||||||
|
.parent-row-selected td:first-child {
|
||||||
|
border-left: 2px solid #1677ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.son-row-selected td:last-child,
|
||||||
|
.parent-row-selected td:last-child {
|
||||||
|
border-right: 2px solid #1677ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.son-row-selected > td,
|
||||||
|
.parent-row-selected > td {
|
||||||
|
background-color: #e6f4ff !important;
|
||||||
|
}
|
||||||
@@ -1,24 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
<searchCard @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||||
@on-select-change="onSelectChange">
|
@on-select-change="onSelectChange">
|
||||||
<template #control>
|
<template #cardTitle="{ record }">
|
||||||
|
{{ record.FamilyLocalName }}
|
||||||
|
<span style="margin-left: 6px"><FolderOutlined style="margin-right: 2px" />{{ getSharePath(record) }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #bodyCell="{ column, record, index }">
|
<template #bodyCell="{ column, record, index }">
|
||||||
|
<template v-if="column.dataIndex === FamilyFolderFavoriteViewEntity.TOP_FOLDER_LOCAL_NAME">
|
||||||
|
<FolderOutlined style="margin-right: 2px" /><span>{{ getSharePath(record) }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #footer>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
</search>
|
</searchCard>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||||
import { BindOption } from "@/data/custom/bindOption";
|
import { BindOption } from "@/data/custom/bindOption";
|
||||||
import { SelectOption } from "@/data/auto/selectOption";
|
import { SelectOption } from "@/data/auto/selectOption";
|
||||||
import search from "@/components/basic/Search.vue";
|
import searchCard from "@/components/basic/SearchCard.vue";
|
||||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
|
||||||
|
|
||||||
import { FamilyGroupResultData } from "@/data/auto/familyGroupResultData";
|
import { FamilyGroupResultData } from "@/data/auto/familyGroupResultData";
|
||||||
import { FamilyFolderFavoriteViewEntity } from "@/data/auto/familyFolderFavoriteViewEntity";
|
import { FamilyFolderFavoriteViewEntity } from "@/data/auto/familyFolderFavoriteViewEntity";
|
||||||
@@ -41,6 +40,14 @@ import { title } from "process";
|
|||||||
import { enquiryMethodKey, searchCriteriaManagerKey, masterOperationToEnquiryMethodKey, MasterOperationToEnquiryModelOption, layoutProviderMethodKey } from "@/injections";
|
import { enquiryMethodKey, searchCriteriaManagerKey, masterOperationToEnquiryMethodKey, MasterOperationToEnquiryModelOption, layoutProviderMethodKey } from "@/injections";
|
||||||
import { useOrderedChildren } from "@/hooks/use-ordered-children";
|
import { useOrderedChildren } from "@/hooks/use-ordered-children";
|
||||||
import { SearchCriteriaContext } from "@/injections";
|
import { SearchCriteriaContext } from "@/injections";
|
||||||
|
import {
|
||||||
|
HomeOutlined,
|
||||||
|
ArrowLeftOutlined,
|
||||||
|
ReloadOutlined,
|
||||||
|
LaptopOutlined,
|
||||||
|
FolderOutlined,
|
||||||
|
SearchOutlined,
|
||||||
|
} from "@ant-design/icons-vue";
|
||||||
//page from-----------------------------------------------------------------------------------------------------------------------------------
|
//page from-----------------------------------------------------------------------------------------------------------------------------------
|
||||||
//================inject================
|
//================inject================
|
||||||
//报表名称
|
//报表名称
|
||||||
@@ -64,6 +71,15 @@ const canCreate = ref<boolean>(false);
|
|||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
|
//共享路径展示：上级目录与当前目录同名时只显示一次，避免出现"ddd>ddd"
|
||||||
|
const getSharePath = (record: any) => {
|
||||||
|
const top = record.TopFolderLocalName;
|
||||||
|
const folder = record.FolderLocalName;
|
||||||
|
if (!folder || folder === top) return top || '-';
|
||||||
|
if (!top) return folder;
|
||||||
|
return `${top}>${folder}`;
|
||||||
|
};
|
||||||
|
|
||||||
const columns = ref([
|
const columns = ref([
|
||||||
{
|
{
|
||||||
title: '序号',
|
title: '序号',
|
||||||
|
|||||||
@@ -899,43 +899,3 @@ const handleSelectUser = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.less";
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
padding-right: 12px;
|
|
||||||
border-bottom: 1px solid silver;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -38,84 +38,84 @@
|
|||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-main" :class="{ 'fp-readonly': !isEdit }" :style="{ height: resultH }">
|
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||||
<!-- 顶部：头像 / 姓名 / 编号 -->
|
<!-- 顶部：头像 / 姓名 / 编号 -->
|
||||||
<div class="fp-hero">
|
<div class="ft-hero">
|
||||||
<FileUpload class="fp-hero-upload" accept="image/*" file-path="FamilyPersonAvatar"
|
<FileUpload class="ft-hero-upload" accept="image/*" file-path="FamilyPersonAvatar"
|
||||||
:disabled="!isEdit || avatarUploading" @start="onAvatarUploadStart" @progress="onAvatarUploadProgress"
|
:disabled="!isEdit || avatarUploading" @start="onAvatarUploadStart" @progress="onAvatarUploadProgress"
|
||||||
@success="onAvatarUploadSuccess" @error="onAvatarUploadError">
|
@success="onAvatarUploadSuccess" @error="onAvatarUploadError">
|
||||||
<div class="fp-hero-avatar-wrap" :class="{ 'is-editing': isEdit }">
|
<div class="ft-hero-avatar-wrap" :class="{ 'is-editing': isEdit }">
|
||||||
<a-avatar class="fp-hero-avatar" :size="72" :src="avatarSrc">
|
<a-avatar class="ft-hero-avatar" :size="72" :src="avatarSrc">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<UserOutlined />
|
<UserOutlined />
|
||||||
</template>
|
</template>
|
||||||
</a-avatar>
|
</a-avatar>
|
||||||
<div v-if="isEdit" class="fp-hero-avatar-mask">
|
<div v-if="isEdit" class="ft-hero-avatar-mask">
|
||||||
<span v-if="avatarUploading">{{ avatarUploadPercent }}%</span>
|
<span v-if="avatarUploading">{{ avatarUploadPercent }}%</span>
|
||||||
<CameraOutlined v-else />
|
<CameraOutlined v-else />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FileUpload>
|
</FileUpload>
|
||||||
<div class="fp-hero-main">
|
<div class="ft-hero-main">
|
||||||
<div class="fp-hero-name">
|
<div class="ft-hero-name">
|
||||||
{{
|
{{
|
||||||
(data.FamilyPerson.Surname || "") +
|
(data.FamilyPerson.Surname || "") +
|
||||||
(data.FamilyPerson.GenealogyName || "") || "未填写姓名"
|
(data.FamilyPerson.GenealogyName || "") || "未填写姓名"
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-hero-meta">
|
<div class="ft-hero-meta">
|
||||||
<span class="fp-chip">编号 {{ data.FamilyPerson.PersonId || "-" }}</span>
|
<span class="ft-chip">编号 {{ data.FamilyPerson.PersonId || "-" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-hero-meta">
|
<div class="ft-hero-meta">
|
||||||
<span class="fp-chip">族谱编号 {{ data.FamilyPerson.TreeId || "-" }}</span>
|
<span class="ft-chip">族谱编号 {{ data.FamilyPerson.TreeId || "-" }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a-button v-if="
|
<a-button v-if="
|
||||||
isEdit &&
|
isEdit &&
|
||||||
(data.FamilyPerson.AvatarUrl || data.FamilyPerson.AvatarFilename)
|
(data.FamilyPerson.AvatarUrl || data.FamilyPerson.AvatarFilename)
|
||||||
" class="fp-hero-clear" type="text" size="small" @click.prevent="onClearAvatar">清除头像</a-button>
|
" class="ft-hero-clear" type="text" size="small" @click.prevent="onClearAvatar">清除头像</a-button>
|
||||||
</div>
|
</div>
|
||||||
<!-- 基本资料 -->
|
<!-- 基本资料 -->
|
||||||
<div class="fp-card">
|
<div class="ft-card">
|
||||||
<div class="fp-card-title">基本资料</div>
|
<div class="ft-card-title">基本资料</div>
|
||||||
<div class="fp-grid">
|
<div class="ft-grid">
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">姓氏<span class="fp-required">*</span></div>
|
<div class="ft-label">姓氏<span class="ft-required">*</span></div>
|
||||||
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Surname"
|
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Surname"
|
||||||
placeholder="请输入姓氏" />
|
placeholder="请输入姓氏" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">谱名<span class="fp-required">*</span></div>
|
<div class="ft-label">谱名<span class="ft-required">*</span></div>
|
||||||
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.GenealogyName"
|
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.GenealogyName"
|
||||||
placeholder="请输入谱名" />
|
placeholder="请输入谱名" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">常用名</div>
|
<div class="ft-label">常用名</div>
|
||||||
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.CommonName"
|
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.CommonName"
|
||||||
placeholder="请输入常用名" />
|
placeholder="请输入常用名" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">别名</div>
|
<div class="ft-label">别名</div>
|
||||||
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Alias"
|
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Alias"
|
||||||
placeholder="请输入别名" />
|
placeholder="请输入别名" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">字</div>
|
<div class="ft-label">字</div>
|
||||||
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Zi"
|
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Zi"
|
||||||
placeholder="请输入字" />
|
placeholder="请输入字" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">号</div>
|
<div class="ft-label">号</div>
|
||||||
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Hao"
|
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Hao"
|
||||||
placeholder="请输入号" />
|
placeholder="请输入号" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">行第</div>
|
<div class="ft-label">行第</div>
|
||||||
<a-input size="large" :maxlength="32" :readonly="!isEdit" v-model:value="data.FamilyPerson.BirthOrder"
|
<a-input size="large" :maxlength="32" :readonly="!isEdit" v-model:value="data.FamilyPerson.BirthOrder"
|
||||||
placeholder="如：三" />
|
placeholder="如：三" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">性别</div>
|
<div class="ft-label">性别</div>
|
||||||
<a-select size="large" v-model:value="data.FamilyPerson.Gender" :disabled="!isEdit" style="width: 100%"
|
<a-select size="large" v-model:value="data.FamilyPerson.Gender" :disabled="!isEdit" style="width: 100%"
|
||||||
placeholder="请选择性别" :options="genderSelectOptions">
|
placeholder="请选择性别" :options="genderSelectOptions">
|
||||||
</a-select>
|
</a-select>
|
||||||
@@ -123,84 +123,84 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 家庭与学业 -->
|
<!-- 家庭与学业 -->
|
||||||
<div v-if="!readonlyBasicOnly" class="fp-card">
|
<div v-if="!readonlyBasicOnly" class="ft-card">
|
||||||
<div class="fp-card-title">家庭与学业</div>
|
<div class="ft-card-title">家庭与学业</div>
|
||||||
<div class="fp-grid">
|
<div class="ft-grid">
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">婚姻</div>
|
<div class="ft-label">婚姻</div>
|
||||||
<a-select size="large" v-model:value="data.FamilyPerson.MaritalStatus" :disabled="!isEdit"
|
<a-select size="large" v-model:value="data.FamilyPerson.MaritalStatus" :disabled="!isEdit"
|
||||||
style="width: 100%" placeholder="请选择">
|
style="width: 100%" placeholder="请选择">
|
||||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">父亲姓名</div>
|
<div class="ft-label">父亲姓名</div>
|
||||||
<a-input size="large" :maxlength="50" :readonly="!isEdit" v-model:value="data.FamilyPerson.FatherId"
|
<a-input size="large" :maxlength="50" :readonly="!isEdit" v-model:value="data.FamilyPerson.FatherId"
|
||||||
placeholder="请输入父亲姓名" />
|
placeholder="请输入父亲姓名" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">母亲姓名</div>
|
<div class="ft-label">母亲姓名</div>
|
||||||
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.MotherName"
|
<a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.MotherName"
|
||||||
placeholder="请输入母亲姓名" />
|
placeholder="请输入母亲姓名" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">学校</div>
|
<div class="ft-label">学校</div>
|
||||||
<a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.School"
|
<a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.School"
|
||||||
placeholder="请输入毕业学校" />
|
placeholder="请输入毕业学校" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">专业</div>
|
<div class="ft-label">专业</div>
|
||||||
<a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Major"
|
<a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Major"
|
||||||
placeholder="请输入所学专业" />
|
placeholder="请输入所学专业" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">学历</div>
|
<div class="ft-label">学历</div>
|
||||||
<a-input size="large" :maxlength="128" :readonly="!isEdit" v-model:value="data.FamilyPerson.Education"
|
<a-input size="large" :maxlength="128" :readonly="!isEdit" v-model:value="data.FamilyPerson.Education"
|
||||||
placeholder="请输入学历" />
|
placeholder="请输入学历" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">毕业</div>
|
<div class="ft-label">毕业</div>
|
||||||
<a-select size="large" v-model:value="data.FamilyPerson.GraduationStatus" :disabled="!isEdit"
|
<a-select size="large" v-model:value="data.FamilyPerson.GraduationStatus" :disabled="!isEdit"
|
||||||
style="width: 100%" placeholder="请选择">
|
style="width: 100%" placeholder="请选择">
|
||||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">职务</div>
|
<div class="ft-label">职务</div>
|
||||||
<a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Duty"
|
<a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Duty"
|
||||||
placeholder="请输入职务" />
|
placeholder="请输入职务" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 任职与状态 -->
|
<!-- 任职与状态 -->
|
||||||
<div v-if="!readonlyBasicOnly" class="fp-card">
|
<div v-if="!readonlyBasicOnly" class="ft-card">
|
||||||
<div class="fp-card-title">任职与状态</div>
|
<div class="ft-card-title">任职与状态</div>
|
||||||
<div class="fp-grid">
|
<div class="ft-grid">
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">头衔</div>
|
<div class="ft-label">头衔</div>
|
||||||
<a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Title"
|
<a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Title"
|
||||||
placeholder="请输入头衔" />
|
placeholder="请输入头衔" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">公开</div>
|
<div class="ft-label">公开</div>
|
||||||
<a-select size="large" v-model:value="data.FamilyPerson.Privacy" :disabled="!isEdit" style="width: 100%"
|
<a-select size="large" v-model:value="data.FamilyPerson.Privacy" :disabled="!isEdit" style="width: 100%"
|
||||||
placeholder="请选择">
|
placeholder="请选择">
|
||||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">状态</div>
|
<div class="ft-label">状态</div>
|
||||||
<a-select size="large" v-model:value="data.FamilyPerson.LiveStatus" :disabled="!isEdit"
|
<a-select size="large" v-model:value="data.FamilyPerson.LiveStatus" :disabled="!isEdit"
|
||||||
style="width: 100%" placeholder="请选择">
|
style="width: 100%" placeholder="请选择">
|
||||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">绑定用户ID</div>
|
<div class="ft-label">绑定用户ID</div>
|
||||||
<div class="fp-inline">
|
<div class="ft-inline">
|
||||||
<a-input class="fp-inline-main" size="large" :maxlength="50" :readonly="!isEdit"
|
<a-input class="ft-inline-main" size="large" :maxlength="50" :readonly="!isEdit"
|
||||||
v-model:value="data.FamilyPerson.BindUserId" placeholder="请输入用户ID" />
|
v-model:value="data.FamilyPerson.BindUserId" placeholder="请输入用户ID" />
|
||||||
<a-button class="fp-inline-btn" size="large" type="primary" ghost
|
<a-button class="ft-inline-btn" size="large" type="primary" ghost
|
||||||
:disabled="data.FamilyPerson.IsBindUser === 'Y'" @click.prevent="
|
:disabled="data.FamilyPerson.IsBindUser === 'Y'" @click.prevent="
|
||||||
data.FamilyPerson.IsBindUser =
|
data.FamilyPerson.IsBindUser =
|
||||||
data.FamilyPerson.IsBindUser === 'Y' ? 'N' : 'Y'
|
data.FamilyPerson.IsBindUser === 'Y' ? 'N' : 'Y'
|
||||||
@@ -211,31 +211,31 @@
|
|||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">生于</div>
|
<div class="ft-label">生于</div>
|
||||||
<div class="fp-inline">
|
<div class="ft-inline">
|
||||||
<a-input class="fp-inline-main" size="large" :maxlength="128" :readonly="!isEdit"
|
<a-input class="ft-inline-main" size="large" :maxlength="128" :readonly="!isEdit"
|
||||||
v-model:value="data.FamilyPerson.BirthText" placeholder="如：乙丑年正月初一" />
|
v-model:value="data.FamilyPerson.BirthText" placeholder="如：乙丑年正月初一" />
|
||||||
<a-date-picker class="fp-inline-date" size="large" :disabled="!isEdit" v-model:value="birthDate"
|
<a-date-picker class="ft-inline-date" size="large" :disabled="!isEdit" v-model:value="birthDate"
|
||||||
placeholder="选择日期" />
|
placeholder="选择日期" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">离世</div>
|
<div class="ft-label">离世</div>
|
||||||
<div class="fp-inline">
|
<div class="ft-inline">
|
||||||
<a-input class="fp-inline-main" size="large" :maxlength="128" :readonly="!isEdit"
|
<a-input class="ft-inline-main" size="large" :maxlength="128" :readonly="!isEdit"
|
||||||
v-model:value="data.FamilyPerson.DeathText" placeholder="如：戊辰年八月十五" />
|
v-model:value="data.FamilyPerson.DeathText" placeholder="如：戊辰年八月十五" />
|
||||||
<a-date-picker class="fp-inline-date" size="large" :disabled="!isEdit" v-model:value="deathDate"
|
<a-date-picker class="ft-inline-date" size="large" :disabled="!isEdit" v-model:value="deathDate"
|
||||||
placeholder="选择日期" />
|
placeholder="选择日期" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 生平简介 -->
|
<!-- 生平简介 -->
|
||||||
<div v-if="!readonlyBasicOnly" class="fp-card">
|
<div v-if="!readonlyBasicOnly" class="ft-card">
|
||||||
<div class="fp-card-title">生平简介</div>
|
<div class="ft-card-title">生平简介</div>
|
||||||
<div class="fp-field">
|
<div class="ft-field">
|
||||||
<div class="fp-label">简介</div>
|
<div class="ft-label">简介</div>
|
||||||
<a-textarea size="large" :auto-size="{ minRows: 4, maxRows: 8 }" :maxlength="3000" :readonly="!isEdit"
|
<a-textarea size="large" :auto-size="{ minRows: 4, maxRows: 8 }" :maxlength="3000" :readonly="!isEdit"
|
||||||
v-model:value="data.FamilyPerson.Introduction" placeholder="请输入生平简介" />
|
v-model:value="data.FamilyPerson.Introduction" placeholder="请输入生平简介" />
|
||||||
</div>
|
</div>
|
||||||
@@ -648,62 +648,26 @@ const handleSelect = async () => {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.page-container {
|
/* ==================== 头像上传遮罩（FamilyPerson 独有） ==================== */
|
||||||
margin-right: 0px;
|
.ft-hero-avatar {
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
padding-right: 12px;
|
|
||||||
border-bottom: 1px solid silver;
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header :deep(.ant-input-search .ant-input) {
|
|
||||||
border-radius: 0;
|
|
||||||
border-left: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main {
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 12px 12px 96px 12px;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==================== 顶部信息卡 ==================== */
|
|
||||||
.page-main .fp-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 .fp-hero-avatar {
|
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
border: 2px solid #fff;
|
border: 2px solid #fff;
|
||||||
background: #1677ff;
|
background: #1677ff;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main .fp-hero-upload {
|
.ft-hero-upload {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main .fp-hero-avatar-wrap {
|
.ft-hero-avatar-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main .fp-hero-avatar-mask {
|
.ft-hero-avatar-mask {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -716,194 +680,20 @@ const handleSelect = async () => {
|
|||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main .fp-hero-avatar-wrap.is-editing:hover .fp-hero-avatar-mask {
|
.ft-hero-avatar-wrap.is-editing:hover .ft-hero-avatar-mask {
|
||||||
background: rgba(0, 0, 0, 0.55);
|
background: rgba(0, 0, 0, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main .fp-hero-main {
|
/* 清除头像按钮 */
|
||||||
flex: 1 1 auto;
|
.ft-hero-clear {
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-hero-name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.35;
|
|
||||||
color: #1f2329;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-hero-meta {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 6px;
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-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 .fp-hero-clear {
|
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
color: #ff4d4f;
|
color: #ff4d4f;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==================== 分组卡片 ==================== */
|
/* 日期框在 ft-inline 中限制最大宽度，避免两端日期横向撑爆 */
|
||||||
.page-main .fp-card {
|
.ft-inline .ft-inline-date {
|
||||||
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 .fp-card-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1f2329;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-card-title::before {
|
|
||||||
content: "";
|
|
||||||
width: 3px;
|
|
||||||
height: 14px;
|
|
||||||
border-radius: 2px;
|
|
||||||
background: #1677ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============ 字段栅格：手机单列，宽屏自动多列 ============ */
|
|
||||||
.page-main .fp-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr);
|
|
||||||
gap: 10px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
|
||||||
.page-main .fp-grid {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.page-main .fp-grid {
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-field {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-label {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 20px;
|
|
||||||
color: #646a73;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-required {
|
|
||||||
margin-left: 2px;
|
|
||||||
color: #ff4d4f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-inline {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-inline .fp-inline-main {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main .fp-inline .fp-inline-date {
|
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
max-width: 48%;
|
max-width: 48%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main .fp-inline .fp-inline-btn {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==================== 控件外观 ==================== */
|
|
||||||
.page-main :deep(.ant-input),
|
|
||||||
.page-main :deep(.ant-input-affix-wrapper),
|
|
||||||
.page-main :deep(.ant-select-selector),
|
|
||||||
.page-main :deep(.ant-picker),
|
|
||||||
.page-main :deep(.ant-input-number) {
|
|
||||||
border-radius: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 查看态：弱化边框与底色，像纯文本一样易读 */
|
|
||||||
.page-main.fp-readonly :deep(.ant-input),
|
|
||||||
.page-main.fp-readonly :deep(textarea.ant-input),
|
|
||||||
.page-main.fp-readonly :deep(.ant-input-affix-wrapper),
|
|
||||||
.page-main.fp-readonly :deep(.ant-select-selector),
|
|
||||||
.page-main.fp-readonly :deep(.ant-picker) {
|
|
||||||
border-color: #f0f1f3;
|
|
||||||
background: #fafbfc;
|
|
||||||
color: #1f2329;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main.fp-readonly :deep(.ant-input[readonly]),
|
|
||||||
.page-main.fp-readonly :deep(.ant-input[disabled]) {
|
|
||||||
color: #1f2329;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main.fp-readonly :deep(.ant-select-disabled .ant-select-selector) {
|
|
||||||
color: #1f2329;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-main.fp-readonly :deep(.ant-select-disabled .ant-select-arrow),
|
|
||||||
.page-main.fp-readonly :deep(.ant-picker-disabled .ant-picker-suffix) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============ 底部操作栏（与 FamilyTreeOperation 保持一致） ============ */
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==================== 手机端 ==================== */
|
|
||||||
@media (max-width: 575px) {
|
|
||||||
.page-main {
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 16px 字号可避免 iOS 聚焦输入框时页面被自动放大 */
|
|
||||||
.page-main :deep(.ant-input),
|
|
||||||
.page-main :deep(.ant-input-affix-wrapper),
|
|
||||||
.page-main :deep(.ant-select-selector),
|
|
||||||
.page-main :deep(.ant-select-selection-item),
|
|
||||||
.page-main :deep(.ant-select-selection-placeholder),
|
|
||||||
.page-main :deep(.ant-picker) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,37 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-spin size="large" :spinning="loading">
|
<a-spin size="large" :spinning="loading">
|
||||||
<div class="page-container">
|
<div class="page-container family-tree-op">
|
||||||
<div class="page-header">
|
<div class="page-header fto-toolbar">
|
||||||
<a-row :gutter="[16, 8]">
|
<div class="fto-search">
|
||||||
<a-col :lg="8" :sm="24">
|
<span class="fto-search-label">族谱编号</span>
|
||||||
<a-row :wrap="false">
|
<a-input-search :disabled="isEdit" v-model:value="treeId" class="fto-search-input" placeholder="请输入族谱编号"
|
||||||
<a-col flex="none">
|
@search="onModalSearch" />
|
||||||
<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>
|
</div>
|
||||||
</a-col>
|
<div class="fto-actions">
|
||||||
<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)"
|
<a-button type="primary" :disabled="isEdit" :icon="h(FileSearchOutlined)"
|
||||||
@click.prevent="onSearch">查询</a-button>
|
@click.prevent="onSearch">查询</a-button>
|
||||||
<a-button type="primary" :disabled="isEdit" :icon="h(ClearOutlined)"
|
<a-button :disabled="isEdit" :icon="h(ClearOutlined)" @click.prevent="onReset">重置</a-button>
|
||||||
@click.prevent="onReset">重置</a-button>
|
|
||||||
<a-button type="primary" :disabled="isEdit" :icon="h(FileAddOutlined)"
|
<a-button type="primary" :disabled="isEdit" :icon="h(FileAddOutlined)"
|
||||||
@click.prevent="onCreate">新增</a-button>
|
@click.prevent="onCreate">新增</a-button>
|
||||||
</a-space>
|
</div>
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
<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-label">祖先</div>
|
||||||
<div class="ft-inline">
|
<div class="ft-inline">
|
||||||
<a-input-group compact class="ft-inline-main" style="display: flex; width: 100%">
|
<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%" />
|
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" />
|
v-model:value="data.FamilyTree.AncestorPersonId" @search="onModalPerson" />
|
||||||
</a-input-group>
|
</a-input-group>
|
||||||
<a-button class="ft-inline-btn" size="large" type="primary" :disabled="!hasData"
|
<a-button class="ft-inline-btn" size="large" type="primary" :disabled="!hasData"
|
||||||
@@ -127,10 +109,10 @@
|
|||||||
placeholder="请输入族员" @search="onModalCurrentPerson" />
|
placeholder="请输入族员" @search="onModalCurrentPerson" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ft-field">
|
<div class="ft-field">
|
||||||
<div class="ft-inline">
|
<div class="ft-inline fto-btn-row">
|
||||||
<a-button class="ft-full-btn" size="large" type="primary" :disabled="!hasData"
|
<a-button class="fto-flex-btn" size="large" type="primary" :disabled="!hasData"
|
||||||
:icon="h(ApartmentOutlined)" @click.prevent="onShowChart">谱系图</a-button>
|
: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>
|
:icon="h(FileProtectOutlined)" @click.prevent="onRequestPermission">申请管理</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -139,13 +121,19 @@
|
|||||||
<!-- 关系维护 -->
|
<!-- 关系维护 -->
|
||||||
<div class="ft-card">
|
<div class="ft-card">
|
||||||
<div class="ft-card-title">关系维护</div>
|
<div class="ft-card-title">关系维护</div>
|
||||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
<a-collapse v-model:activeKey="activeKeyRelations" class="ft-collapse">
|
||||||
<a-collapse-panel key="1" header="夫妻关系">
|
<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 class="ft-list">
|
||||||
<div v-for="(record, index) in data.CurrentPerson
|
<div v-for="(record, index) in data.CurrentPerson
|
||||||
.FamilyTreeSpouseMaps" :key="record.SpouseId || index" class="ft-item"
|
.FamilyTreeSpouseMaps" :key="record.SpouseId || index" class="ft-item" :class="{
|
||||||
:class="{ 'ft-item-selected': index === selectedParentIndex }">
|
'ft-item-selected': index === selectedParentIndex,
|
||||||
<div class="ft-item-head">
|
'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>
|
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||||
<div class="ft-item-title">
|
<div class="ft-item-title">
|
||||||
<span class="ft-item-name">
|
<span class="ft-item-name">
|
||||||
@@ -160,13 +148,15 @@
|
|||||||
{{ getPolicyText(genderOptions, record.Gender) }}
|
{{ getPolicyText(genderOptions, record.Gender) }}
|
||||||
</a-tag>
|
</a-tag>
|
||||||
</div>
|
</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)" />
|
<UpSquareTwoTone class="ft-action" @click="upParent(index)" />
|
||||||
<DownSquareTwoTone class="ft-action" @click="downParent(index)" />
|
<DownSquareTwoTone class="ft-action" @click="downParent(index)" />
|
||||||
<DeleteOutlined class="ft-action ft-action-delete" @click="deleteParent(record.SpouseId)" />
|
<DeleteOutlined class="ft-action ft-action-delete" @click="deleteParent(record.SpouseId)" />
|
||||||
</div>
|
</div>
|
||||||
|
<RightOutlined class="ft-item-arrow"
|
||||||
|
:class="{ 'ft-item-arrow-open': isItemOpen(itemKey('sp', record.SpouseId, index)) }" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ft-item-body">
|
<div v-show="isItemOpen(itemKey('sp', record.SpouseId, index))" class="ft-item-body">
|
||||||
<div class="ft-item-field">
|
<div class="ft-item-field">
|
||||||
<span class="ft-item-label">结婚日期文本</span>
|
<span class="ft-item-label">结婚日期文本</span>
|
||||||
<a-input v-if="isEdit" size="large" v-model:value="record.MarryDateText" placeholder="结婚日期文本" />
|
<a-input v-if="isEdit" size="large" v-model:value="record.MarryDateText" placeholder="结婚日期文本" />
|
||||||
@@ -234,12 +224,18 @@
|
|||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
</a-collapse-panel>
|
</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 class="ft-list">
|
||||||
<div v-for="(record, index) in data.CurrentPerson
|
<div v-for="(record, index) in data.CurrentPerson
|
||||||
.FamilyTreeChildrenMaps" :key="record.ChildrenId || index" class="ft-item"
|
.FamilyTreeChildrenMaps" :key="record.ChildrenId || index" class="ft-item" :class="{
|
||||||
:class="{ 'ft-item-selected': index === selectedSonIndex }">
|
'ft-item-selected': index === selectedSonIndex,
|
||||||
<div class="ft-item-head">
|
'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>
|
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||||
<div class="ft-item-title">
|
<div class="ft-item-title">
|
||||||
<span class="ft-item-name">
|
<span class="ft-item-name">
|
||||||
@@ -254,13 +250,15 @@
|
|||||||
{{ getPolicyText(genderOptions, record.Gender) }}
|
{{ getPolicyText(genderOptions, record.Gender) }}
|
||||||
</a-tag>
|
</a-tag>
|
||||||
</div>
|
</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)" />
|
<UpSquareTwoTone class="ft-action" @click="upSon(index)" />
|
||||||
<DownSquareTwoTone class="ft-action" @click="downSon(index)" />
|
<DownSquareTwoTone class="ft-action" @click="downSon(index)" />
|
||||||
<DeleteOutlined class="ft-action ft-action-delete" @click="deleteSon(record.ChildrenId)" />
|
<DeleteOutlined class="ft-action ft-action-delete" @click="deleteSon(record.ChildrenId)" />
|
||||||
</div>
|
</div>
|
||||||
|
<RightOutlined class="ft-item-arrow"
|
||||||
|
:class="{ 'ft-item-arrow-open': isItemOpen(itemKey('ch', record.ChildrenId, index)) }" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ft-item-body">
|
<div v-show="isItemOpen(itemKey('ch', record.ChildrenId, index))" class="ft-item-body">
|
||||||
<div class="ft-item-field">
|
<div class="ft-item-field">
|
||||||
<span class="ft-item-label">父母</span>
|
<span class="ft-item-label">父母</span>
|
||||||
<a-select v-if="isEdit" size="large" style="width: 100%" allow-clear show-search
|
<a-select v-if="isEdit" size="large" style="width: 100%" allow-clear show-search
|
||||||
@@ -299,27 +297,34 @@
|
|||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
</a-collapse>
|
</a-collapse>
|
||||||
</div>
|
</div>
|
||||||
<!-- 待审核成员名单 -->
|
<!-- 权限维护 -->
|
||||||
<div class="ft-card">
|
<div class="ft-card">
|
||||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
<div class="ft-card-title">权限维护</div>
|
||||||
<a-collapse-panel key="3" header="待审核成员名单">
|
<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 class="ft-list">
|
||||||
<div v-for="(record, index) in pendingPermissions" :key="(record.UserName || '') + '-' + (record.PersonId || index)
|
<div v-for="(record, index) in pendingPermissions" :key="(record.UserName || '') + '-' + (record.PersonId || index)
|
||||||
" class="ft-item">
|
" class="ft-item" :class="{ 'ft-item-collapsed': !isItemOpen(permItemKey('pd', record, index)) }">
|
||||||
<div class="ft-item-head">
|
<div class="ft-item-head" @click="toggleItem(permItemKey('pd', record, index))">
|
||||||
<span class="ft-item-index">{{ index + 1 }}</span>
|
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||||
<div class="ft-item-title">
|
<div class="ft-item-title">
|
||||||
<span class="ft-item-name">
|
<span class="ft-item-name">
|
||||||
{{ record.UserLocalName || "未命名成员" }}
|
{{ record.UserLocalName || "未命名成员" }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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')" />
|
<CheckCircleTwoTone class="ft-action" @click="approvePermission(record, 'N')" />
|
||||||
<CrownOutlined class="ft-action" style="color: #faad14" @click="approvePermission(record, 'Y')" />
|
<CrownOutlined class="ft-action" style="color: #faad14" @click="approvePermission(record, 'Y')" />
|
||||||
<CloseCircleOutlined class="ft-action ft-action-delete" @click="rejectPermission(record)" />
|
<CloseCircleOutlined class="ft-action ft-action-delete" @click="rejectPermission(record)" />
|
||||||
</div>
|
</div>
|
||||||
|
<RightOutlined class="ft-item-arrow"
|
||||||
|
:class="{ 'ft-item-arrow-open': isItemOpen(permItemKey('pd', record, index)) }" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ft-item-body">
|
<div v-show="isItemOpen(permItemKey('pd', record, index))" class="ft-item-body">
|
||||||
<div class="ft-item-field">
|
<div class="ft-item-field">
|
||||||
<span class="ft-item-label">授权族员节点</span>
|
<span class="ft-item-label">授权族员节点</span>
|
||||||
<span class="ft-item-text">{{ record.PersonLocalName || "-" }}</span>
|
<span class="ft-item-text">{{ record.PersonLocalName || "-" }}</span>
|
||||||
@@ -335,16 +340,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
</a-collapse>
|
<a-collapse-panel key="4">
|
||||||
</div>
|
<template #header>
|
||||||
<!-- 管理名单 -->
|
<span class="fto-panel-title">管理名单</span>
|
||||||
<div class="ft-card">
|
<span class="fto-panel-count">{{ validPermissions.length }}</span>
|
||||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
</template>
|
||||||
<a-collapse-panel key="4" header="管理名单">
|
|
||||||
<div class="ft-list">
|
<div class="ft-list">
|
||||||
<div v-for="(record, index) in validPermissions" :key="(record.UserName || '') + '-' + (record.PersonId || index)
|
<div v-for="(record, index) in validPermissions" :key="(record.UserName || '') + '-' + (record.PersonId || index)
|
||||||
" class="ft-item">
|
" class="ft-item" :class="{ 'ft-item-collapsed': !isItemOpen(permItemKey('vd', record, index)) }">
|
||||||
<div class="ft-item-head">
|
<div class="ft-item-head" @click="toggleItem(permItemKey('vd', record, index))">
|
||||||
<span class="ft-item-index">{{ index + 1 }}</span>
|
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||||
<div class="ft-item-title">
|
<div class="ft-item-title">
|
||||||
<span class="ft-item-name">
|
<span class="ft-item-name">
|
||||||
@@ -352,11 +356,13 @@
|
|||||||
</span>
|
</span>
|
||||||
<a-tag v-if="record.ManagerIndc == 'Y'" class="ft-item-tag">管理员</a-tag>
|
<a-tag v-if="record.ManagerIndc == 'Y'" class="ft-item-tag">管理员</a-tag>
|
||||||
</div>
|
</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)" />
|
<DeleteOutlined class="ft-action ft-action-delete" @click="rejectPermission(record)" />
|
||||||
</div>
|
</div>
|
||||||
|
<RightOutlined class="ft-item-arrow"
|
||||||
|
:class="{ 'ft-item-arrow-open': isItemOpen(permItemKey('vd', record, index)) }" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ft-item-body">
|
<div v-show="isItemOpen(permItemKey('vd', record, index))" class="ft-item-body">
|
||||||
<div class="ft-item-field">
|
<div class="ft-item-field">
|
||||||
<span class="ft-item-label">授权族员节点</span>
|
<span class="ft-item-label">授权族员节点</span>
|
||||||
<span class="ft-item-text">{{ record.PersonLocalName || "-" }}</span>
|
<span class="ft-item-text">{{ record.PersonLocalName || "-" }}</span>
|
||||||
@@ -456,6 +462,7 @@ import {
|
|||||||
CheckCircleTwoTone,
|
CheckCircleTwoTone,
|
||||||
CloseCircleOutlined,
|
CloseCircleOutlined,
|
||||||
CrownOutlined,
|
CrownOutlined,
|
||||||
|
RightOutlined,
|
||||||
} from "@ant-design/icons-vue";
|
} from "@ant-design/icons-vue";
|
||||||
import {
|
import {
|
||||||
PermissionContext,
|
PermissionContext,
|
||||||
@@ -541,7 +548,37 @@ interface PersonEnquiry {
|
|||||||
const enquiry = ref<TreeEnquiry | null>(null);
|
const enquiry = ref<TreeEnquiry | null>(null);
|
||||||
const personEnquiry = ref<PersonEnquiry | 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([
|
const columnParents = ref([
|
||||||
{
|
{
|
||||||
@@ -1752,4 +1789,298 @@ const onPersonQuickCreated = (person: FamilyPersonDisplayData) => {
|
|||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
color: #1677ff;
|
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>
|
</style>
|
||||||
@@ -338,7 +338,7 @@ interface DmsFileEnquiry {
|
|||||||
|
|
||||||
const dmsFileEnquiry = ref<DmsFileEnquiry | null>(null)
|
const dmsFileEnquiry = ref<DmsFileEnquiry | null>(null)
|
||||||
|
|
||||||
const activeKey = ref(['1', '2']);
|
const activeKey = ref(['2', '3']);
|
||||||
|
|
||||||
const columnDtls = ref([
|
const columnDtls = ref([
|
||||||
{
|
{
|
||||||
@@ -743,48 +743,3 @@ const columnFamilyGroups = ref([
|
|||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.less";
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
margin-right: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
padding-right: 12px;
|
|
||||||
border-bottom: 1px solid silver;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-collapse-content-box {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -464,7 +464,7 @@ interface FamilyGroupEnquiry {
|
|||||||
|
|
||||||
const groupEnquiry = ref<FamilyGroupEnquiry | null>(null);
|
const groupEnquiry = ref<FamilyGroupEnquiry | null>(null);
|
||||||
|
|
||||||
const activeKey = ref(["1", "2"]);
|
const activeKey = ref(["2", "3"]);
|
||||||
|
|
||||||
const columnDtls = ref([
|
const columnDtls = ref([
|
||||||
{
|
{
|
||||||
@@ -760,43 +760,3 @@ const columnFamilyGroups = ref([
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.less";
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
padding-right: 12px;
|
|
||||||
border-bottom: 1px solid silver;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -312,7 +312,7 @@ interface DmsFileEnquiry {
|
|||||||
|
|
||||||
const dmsFileEnquiry = ref<DmsFileEnquiry | null>(null)
|
const dmsFileEnquiry = ref<DmsFileEnquiry | null>(null)
|
||||||
|
|
||||||
const activeKey = ref(['1', '2']);
|
const activeKey = ref(['2', '3']);
|
||||||
|
|
||||||
const columnDtls = ref([
|
const columnDtls = ref([
|
||||||
{
|
{
|
||||||
@@ -718,48 +718,3 @@ const columnFamilyGroups = ref([
|
|||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.less";
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
margin-right: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
padding-right: 12px;
|
|
||||||
border-bottom: 1px solid silver;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-collapse-content-box {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -590,45 +590,3 @@ const onViewUserOperation = ((userName: string) => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -662,62 +662,3 @@ const handleSelectPermission = (async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -826,48 +826,7 @@ const onViewPermissionOperation = ((permissionName: string) => {
|
|||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less" scoped>
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 权限明细：查看/新增/修改/删除 四个操作无论屏幕大小都保持在同一行 */
|
/* 权限明细：查看/新增/修改/删除 四个操作无论屏幕大小都保持在同一行 */
|
||||||
.page-main.ft-page .ft-item-body .ft-perm-actions {
|
.page-main.ft-page .ft-item-body .ft-perm-actions {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
|
|||||||
@@ -217,7 +217,6 @@ interface MasterEnquiry {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const enquiry = ref<MasterEnquiry | null>(null)
|
const enquiry = ref<MasterEnquiry | null>(null)
|
||||||
const activeKey = ref(['1']);
|
|
||||||
|
|
||||||
//================provide================
|
//================provide================
|
||||||
const modelOption = ref<OperationToEnquiryModelOption>(new OperationToEnquiryModelOption());
|
const modelOption = ref<OperationToEnquiryModelOption>(new OperationToEnquiryModelOption());
|
||||||
@@ -399,45 +398,3 @@ const handleSelect = (async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -445,45 +445,3 @@ const handleSelect = (async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -218,7 +218,7 @@ interface ActorEnquiry {
|
|||||||
const enquiry = ref<UserEnquiry | null>(null)
|
const enquiry = ref<UserEnquiry | null>(null)
|
||||||
const actorEnquiry = ref<ActorEnquiry | null>(null)
|
const actorEnquiry = ref<ActorEnquiry | null>(null)
|
||||||
|
|
||||||
const activeKey = ref(['1', '2']);
|
const activeKey = ref(['1']);
|
||||||
|
|
||||||
const columnActors = ref([
|
const columnActors = ref([
|
||||||
{
|
{
|
||||||
@@ -461,45 +461,3 @@ const onViewActorOperation = ((actorName: string) => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
|
||||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
|
||||||
@import "../../styles/ft-mobile.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in new issue
Block a user