62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<script setup lang="ts">
|
||
// 多选与批量操作：勾选后工具栏浮出「下载 / 删除」，行为全部走事件
|
||
import { ref } from 'vue'
|
||
import { G3Attachment } from '@g3soft/ui'
|
||
import type { AttachmentItem } from '@g3soft/ui'
|
||
|
||
const files = ref<AttachmentItem[]>([
|
||
{ id: 'a1', name: '设备清单.xlsx', size: 128_000 },
|
||
{ id: 'a2', name: '施工方案.pdf', size: 2_048_000 },
|
||
{ id: 'a3', name: '进度汇报.pptx', size: 640_000 },
|
||
{ id: 'a4', name: '材料验收单.docx', size: 32_000 },
|
||
{ id: 'a5', name: '现场记录.zip', size: 8_192_000 },
|
||
])
|
||
|
||
const selected = ref<AttachmentItem[]>([])
|
||
const lastEvent = ref('')
|
||
|
||
function onSelect(items: AttachmentItem[]) {
|
||
selected.value = items
|
||
}
|
||
|
||
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 = `remove：${items.map((item) => item.name).join('、')}`
|
||
}
|
||
|
||
function onDownload(items: AttachmentItem[]) {
|
||
// 真实项目里在这里调接口拿签名地址再下载
|
||
lastEvent.value = `download：${items.map((item) => item.name).join('、')}`
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<!-- 每页 3 条演示分页；builtin-download 关掉后「下载」只上报事件 -->
|
||
<G3Attachment
|
||
v-model:files="files"
|
||
:height="420"
|
||
:builtin-download="false"
|
||
:show-size-changer="true"
|
||
:page-size="3"
|
||
:page-size-options="[3, 5]"
|
||
@select="onSelect"
|
||
@remove="onRemove"
|
||
@download="onDownload"
|
||
/>
|
||
<p class="hint">
|
||
已选 {{ selected.length }} 个<span v-if="selected.length">：{{ selected.map((item) => item.name).join('、') }}</span>
|
||
<template v-if="lastEvent"> ｜ {{ lastEvent }}</template>
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.hint {
|
||
margin: 8px 0 0;
|
||
color: #8c8c8c;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|