59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<script setup lang="ts">
|
||
// 弹窗用法：业务自己用 G3Modal 包一层，附件组件并不知道「弹窗」的存在
|
||
import { ref } from 'vue'
|
||
import { G3Attachment, G3Button, G3Modal } from '@g3soft/ui'
|
||
import type { AttachmentItem, AttachmentUploadContext } from '@g3soft/ui'
|
||
|
||
const open = ref(false)
|
||
|
||
// 从空列表开始：正好看到空态投放区 → 入队（底栏变"脏"）→ 上传的完整过程
|
||
const files = ref<AttachmentItem[]>([])
|
||
|
||
const lastEvent = ref('')
|
||
|
||
function onUpload(incoming: File[], context: AttachmentUploadContext) {
|
||
files.value = [
|
||
...files.value,
|
||
...incoming.map((file, index) => ({
|
||
id: `local-${Date.now()}-${index}`,
|
||
name: file.name,
|
||
size: file.size,
|
||
categoryId: context.categoryId,
|
||
url: URL.createObjectURL(file),
|
||
})),
|
||
]
|
||
lastEvent.value = `已加入 ${incoming.length} 个文件`
|
||
}
|
||
|
||
function onRemove(items: AttachmentItem[]) {
|
||
const removed = new Set(items.map((item) => item.id))
|
||
files.value = files.value.filter((file) => !removed.has(file.id))
|
||
lastEvent.value = `已删除 ${items.length} 个文件`
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<G3Button @click="open = true">打开附件管理</G3Button>
|
||
<p class="hint">{{ lastEvent }}</p>
|
||
|
||
<!-- 弹窗高度用 vh，附件组件再按 100% 撑满；不给 categories 就只有列表一栏 -->
|
||
<G3Modal v-model:open="open" title="附件管理" width="80%" :fullscreen="false">
|
||
<G3Attachment
|
||
v-model:files="files"
|
||
height="60vh"
|
||
@upload="onUpload"
|
||
@remove="onRemove"
|
||
/>
|
||
</G3Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.hint {
|
||
margin: 8px 0 0;
|
||
color: #8c8c8c;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|