From b7426e2384b85e92ec1b59061bdada9b4f5c69ec Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 23 四月 2025 16:12:40 +0800
Subject: [PATCH] feat: 接口
---
src/components/commonView/FourStreamsBatchMaterialFileDialog.vue | 169 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 169 insertions(+), 0 deletions(-)
diff --git a/src/components/commonView/FourStreamsBatchMaterialFileDialog.vue b/src/components/commonView/FourStreamsBatchMaterialFileDialog.vue
new file mode 100644
index 0000000..972bc35
--- /dev/null
+++ b/src/components/commonView/FourStreamsBatchMaterialFileDialog.vue
@@ -0,0 +1,169 @@
+<template>
+ <ProDialog
+ title="鏂囦欢鍒楄〃"
+ v-model="visible"
+ destroy-on-close
+ draggable
+ width="35%"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ :top="'22vh'"
+ >
+ <ProDialogTableWrapper :height="400">
+ <ProTableQueryFilterBar :show-reset-btn="false">
+ <template #query>
+ <QueryFilterItem>
+ <span class="query-label">{{ name }}</span>
+ </QueryFilterItem>
+ </template>
+ <template #btn>
+ <el-button type="primary" @click="handleBatchDownload">鎵归噺涓嬭浇</el-button>
+ </template>
+ </ProTableQueryFilterBar>
+ <ProTableV2
+ :tableData="fileList"
+ :columns="columns"
+ :operationBtns="operationBtns"
+ show-column-check
+ ref="proTable"
+ >
+ <template #extension="{ row }">
+ <img :src="getExtensionIconByUrl(row.url)" alt="" style="margin: 0 auto" />
+ </template>
+ <template #size="{ row }">
+ {{ formatFileSize(row.size) }}
+ </template>
+ </ProTableV2>
+ </ProDialogTableWrapper>
+ </ProDialog>
+</template>
+
+<script setup lang="ts">
+import {
+ ProDialog,
+ ProTableQueryFilterBar,
+ QueryFilterItem,
+ UploadUserFile,
+ ProDialogTableWrapper,
+ ProTableV2,
+ defineColumns,
+ defineOperationBtns,
+ bolePreview,
+ getExtensionIconByUrl,
+} from '@bole-core/components';
+import { format, downloadFileByUrl, formatFileSize } from '@/utils';
+import { downloadWithZip, Message, isFileCanPreview } from '@bole-core/core';
+
+defineOptions({
+ name: 'FourStreamsBatchMaterialFileDialog',
+});
+
+type Props = {
+ name?: string;
+ zipName?: string;
+ showDeleteBtn?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ showDeleteBtn: true,
+});
+
+const visible = defineModel<boolean>('visible');
+const fileList = defineModel<UploadUserFile[]>('fileList');
+
+const proTable = ref<InstanceType<typeof ProTableV2>>();
+
+const columns = defineColumns([
+ {
+ id: '1',
+ enCode: 'extension',
+ name: '鏂囦欢绫诲瀷',
+ },
+ {
+ id: '2',
+ enCode: 'name',
+ name: '鏂囦欢鍚嶇О',
+ },
+]);
+
+const operationBtns = defineOperationBtns([
+ // {
+ // data: {
+ // enCode: 'detailBtn',
+ // name: '鏌ョ湅',
+ // },
+ // emits: {
+ // onClick: (row) => handlePreview(row),
+ // },
+ // extraProps: {
+ // hide: (row: UploadUserFile) => !isFileCanPreview(row.path),
+ // },
+ // },
+ {
+ data: {
+ enCode: 'downloadBtn',
+ name: '鏌ョ湅',
+ },
+ emits: {
+ onClick: (row) => handleDownload(row),
+ },
+ },
+ {
+ data: {
+ enCode: 'delBtn',
+ name: '鍒犻櫎',
+ },
+ props: {
+ type: 'danger',
+ },
+ emits: {
+ onClick: (row) => handleDelete(row),
+ },
+ extraProps: {
+ hide: (row) => !props.showDeleteBtn,
+ },
+ },
+]);
+
+async function handleDelete(row: UploadUserFile) {
+ try {
+ await Message.deleteMessage();
+ fileList.value = fileList.value.filter((item) => item.uid !== row.uid);
+ } catch (error) {}
+}
+
+function handleDownload(row: UploadUserFile) {
+ downloadFileByUrl(row.url);
+}
+
+function handlePreview(row: UploadUserFile) {
+ bolePreview({
+ fileUrl: row.url,
+ });
+}
+
+function handleBatchDownload() {
+ if (fileList.value.length) {
+ const res: UploadUserFile[] = proTable.value.innerTableRef.getSelectionRows();
+ if (res.length > 0) {
+ downloadWithZip(
+ res.map((item) => ({ data: item.url })),
+ props.zipName
+ );
+ } else {
+ Message.errorMessage('鏈�夋嫨鏁版嵁');
+ }
+ } else {
+ Message.errorMessage('鏆傛棤鏁版嵁');
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.query-label {
+ font-size: 16px;
+ line-height: 40px;
+}
+</style>
--
Gitblit v1.9.1