u

code/g3soft-libs/docs/examples/attachment/select.vue

@@ -0,0 +1,61 @@
+<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>