weicw
c81e24c977
- 详情弹窗改为「申报表 / 上传材料」两个页签，按模块配置分组渲染字段 - 明细数组（团队成员、指导老师、评审成员、团员记录、成果归档等）渲染为表格 - 新增附件解析工具与只读附件列表组件，兼容单地址、JSON 数组、对象数组 - 未来学术之星展示经费/中期/结题/成果归档材料，挑战杯拉取 gxmu_tzbcy_material - 未在配置中声明的字段兜底进「其他信息」，避免数据遗漏
121 lines
2.3 KiB
Vue
121 lines
2.3 KiB
Vue
<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>
|