<script lang="ts" setup>
|
import type { DmsFilePropertyItem } from './fileProperties';
|
|
import { computed, ref } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { FileTextOutlined } from '@ant-design/icons-vue';
|
|
import {
|
filePropertyDate,
|
filePropertyLifecycle,
|
filePropertyName,
|
filePropertyPreparer,
|
filePropertyReview,
|
filePropertyReviewers,
|
filePropertyVersion,
|
} from './fileProperties';
|
|
const item = ref<DmsFilePropertyItem>();
|
const activeTab = ref('basic');
|
const [registerModal] = useModalInner(init);
|
|
const lifecycle = computed(() => filePropertyLifecycle(item.value?.lifecycleStatus));
|
|
function init(data: { item: DmsFilePropertyItem }) {
|
item.value = data.item;
|
activeTab.value = 'basic';
|
}
|
</script>
|
|
<template>
|
<BasicModal v-bind="$attrs" :footer="null" :min-height="420" title="属性" width="min(980px, calc(100vw - 24px))" destroy-on-close @register="registerModal">
|
<div class="file-properties">
|
<div class="property-heading">
|
<FileTextOutlined />
|
<strong>文件属性</strong>
|
</div>
|
|
<a-tabs v-model:active-key="activeTab" class="property-tabs" type="card">
|
<a-tab-pane key="basic" tab="基本信息">
|
<a-descriptions aria-label="文件属性基本信息" bordered class="property-descriptions" :column="{ xs: 1, sm: 1, md: 2, lg: 3 }" size="middle">
|
<a-descriptions-item label="文件编号">{{ item?.documentNo || '—' }}</a-descriptions-item>
|
<a-descriptions-item label="文件名">{{ filePropertyName(item) }}</a-descriptions-item>
|
<a-descriptions-item label="版本号">{{ filePropertyVersion(item) }}</a-descriptions-item>
|
<a-descriptions-item label="制定人">{{ filePropertyPreparer(item) }}</a-descriptions-item>
|
<a-descriptions-item label="审核人">{{ filePropertyReviewers(item) }}</a-descriptions-item>
|
<a-descriptions-item label="制定日期">{{ filePropertyDate(item?.preparedOn) }}</a-descriptions-item>
|
<a-descriptions-item label="生效时间">{{ filePropertyDate(item?.effectiveFrom) }}</a-descriptions-item>
|
<a-descriptions-item label="回顾周期">{{ filePropertyReview(item) }}</a-descriptions-item>
|
<a-descriptions-item label="过期日期">{{ filePropertyDate(item?.effectiveTo) }}</a-descriptions-item>
|
<a-descriptions-item label="生命周期状态">
|
<a-tag :color="lifecycle.color">{{ lifecycle.label }}</a-tag>
|
</a-descriptions-item>
|
</a-descriptions>
|
</a-tab-pane>
|
|
<a-tab-pane key="related" tab="相关文件">
|
<div class="related-files-placeholder"><jnpf-empty description="暂无相关文件" /></div>
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</BasicModal>
|
</template>
|
|
<style lang="scss" scoped>
|
.file-properties {
|
min-width: 0;
|
padding: 18px 22px 22px;
|
}
|
|
.property-heading {
|
display: flex;
|
gap: 10px;
|
align-items: center;
|
justify-content: center;
|
min-height: 64px;
|
margin-bottom: 8px;
|
color: var(--text-color);
|
background: color-mix(in srgb, var(--primary-color) 14%, var(--component-background));
|
border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color-base1));
|
border-radius: 4px;
|
|
svg {
|
font-size: 22px;
|
color: var(--primary-color);
|
}
|
|
strong {
|
font-size: 20px;
|
font-weight: 600;
|
}
|
}
|
|
.property-tabs :deep(.ant-tabs-nav) {
|
margin-bottom: 0;
|
}
|
|
.property-tabs :deep(.ant-tabs-content-holder) {
|
min-height: 260px;
|
border: 1px solid var(--border-color-base1);
|
border-top: 0;
|
}
|
|
.property-descriptions {
|
padding: 36px 24px;
|
|
:deep(.ant-descriptions-item-label) {
|
font-weight: 500;
|
white-space: nowrap;
|
}
|
|
:deep(.ant-descriptions-item-content) {
|
min-width: 0;
|
overflow-wrap: anywhere;
|
}
|
}
|
|
.related-files-placeholder {
|
display: grid;
|
min-height: 250px;
|
place-items: center;
|
}
|
|
@media (max-width: 640px) {
|
.file-properties {
|
padding: 12px;
|
}
|
|
.property-descriptions {
|
padding: 20px 12px;
|
}
|
|
.property-heading {
|
min-height: 54px;
|
}
|
}
|
</style>
|
