feat(gxmu): 审核列表「查看数据」按申报表分组展示并新增上传材料页签
- 详情弹窗改为「申报表 / 上传材料」两个页签,按模块配置分组渲染字段 - 明细数组(团队成员、指导老师、评审成员、团员记录、成果归档等)渲染为表格 - 新增附件解析工具与只读附件列表组件,兼容单地址、JSON 数组、对象数组 - 未来学术之星展示经费/中期/结题/成果归档材料,挑战杯拉取 gxmu_tzbcy_material - 未在配置中声明的字段兜底进「其他信息」,避免数据遗漏
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="attachment-list">
|
||||
<a-empty
|
||||
v-if="!files.length"
|
||||
:description="emptyText"
|
||||
class="attachment-empty"
|
||||
/>
|
||||
<div
|
||||
v-for="(file, index) in files"
|
||||
:key="`${file.url}-${index}`"
|
||||
class="attachment-item"
|
||||
>
|
||||
<a-image
|
||||
v-if="isImageFile(file.url)"
|
||||
:src="file.url"
|
||||
:width="96"
|
||||
:height="96"
|
||||
class="attachment-image"
|
||||
/>
|
||||
<div class="attachment-body">
|
||||
<a
|
||||
:href="file.url"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="attachment-name"
|
||||
:title="file.name"
|
||||
>
|
||||
{{ file.name }}
|
||||
</a>
|
||||
<span class="attachment-tip">点击可预览</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import {
|
||||
isImageFile,
|
||||
parseAttachments,
|
||||
type AttachmentFile
|
||||
} from '@/views/gxmu/utils/attachment';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 原始附件字段值
|
||||
value?: unknown;
|
||||
// 已解析好的文件列表(优先使用)
|
||||
files?: AttachmentFile[];
|
||||
emptyText?: string;
|
||||
}>(),
|
||||
{
|
||||
value: undefined,
|
||||
files: undefined,
|
||||
emptyText: '暂无材料'
|
||||
}
|
||||
);
|
||||
|
||||
const files = computed<AttachmentFile[]>(() => {
|
||||
if (props.files) {
|
||||
return props.files;
|
||||
}
|
||||
return parseAttachments(props.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'GxmuAttachmentList'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.attachment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #eef1f6;
|
||||
border-radius: 8px;
|
||||
background: #fbfcfe;
|
||||
}
|
||||
|
||||
.attachment-image {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.attachment-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.attachment-name {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
color: #1677ff;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.attachment-tip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.attachment-empty {
|
||||
margin: 12px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user