From 6bac509f8e6efc205d9f37a84c9b019ec828467a Mon Sep 17 00:00:00 2001 From: wupengfei <834520024@qq.com> Date: 星期三, 07 五月 2025 14:22:26 +0800 Subject: [PATCH] feat: 接口 --- src/components/commonView/FourStreamsMaterialFileTableV2.vue | 206 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 206 insertions(+), 0 deletions(-) diff --git a/src/components/commonView/FourStreamsMaterialFileTableV2.vue b/src/components/commonView/FourStreamsMaterialFileTableV2.vue new file mode 100644 index 0000000..eff3fc1 --- /dev/null +++ b/src/components/commonView/FourStreamsMaterialFileTableV2.vue @@ -0,0 +1,206 @@ +<template> + <div> + <ProTableV2 + :tableData="list" + :columns="columns" + :autoHeight="false" + :operationBtns="columnsProps.operationBtns" + :operationColumnWidth="240" + :showTableColumnSetting="false" + > + <template #fileBusinessType="{ row }"> + {{ BusinessTypeEnumText[row.fileBusinessType] }} + </template> + <template #operationBtn-uploadBtn="{ data, row }"> + <BlFileUpload + v-model:file-url="row.fileList" + multiple + :limit="1" + ref="uploadRef" + :showTip="false" + :show-file-list="false" + class="pro-table-operation-btn upload-style-btn" + > + <el-button text type="primary" class="pro-table-operation-btn">涓婁紶</el-button> + </BlFileUpload> + </template> + </ProTableV2> + <FourStreamsBatchMaterialFileDialog + v-bind="dialogProps" + :name="''" + :zipName="`${BusinessTypeEnumText[currentFourStreamsMaterialFileTableItem.fileBusinessType as any]}`" + v-model:fileList="currentFourStreamsMaterialFileTableItem.fileList" + :showDeleteBtn="showDeleteBtn" + /> + </div> +</template> + +<script setup lang="ts" generic="T"> +import { FourStreamsMaterialFileTableProps, BaseMaterialFileTableItem } from './types'; +import { + ProTableV2, + defineColumns, + defineOperationBtns, + BlFileUpload, + bolePreview, + useDialog, +} from '@bole-core/components'; +import { downloadFileByUrl } from '@/utils'; +import { Message, isFileCanPreview, downloadWithZip } from '@bole-core/core'; +import { useDefineColumns } from '@/hooks'; +import FourStreamsBatchMaterialFileDialog from './FourStreamsBatchMaterialFileDialog.vue'; +import { FourStreamsMaterialFileBusinessTypeEnumText } from '@/constants'; + +defineOptions({ + name: 'FourStreamsMaterialFileTableV2', +}); + +type Props = FourStreamsMaterialFileTableProps & { + BusinessTypeEnumText: { [key: number]: string }; +}; + +const props = withDefaults(defineProps<Props>(), { + showUploadBtn: true, + showCheckBtn: true, + showDownloadBtn: true, + showDeleteBtn: true, + downloadBtnText: '涓嬭浇', + BusinessTypeEnumText: () => FourStreamsMaterialFileBusinessTypeEnumText, +}); + +const list = defineModel<BaseMaterialFileTableItem<T>[]>('list'); + +const columns = defineColumns([ + { + id: '1', + enCode: 'fileBusinessType', + name: '鏉愭枡鍚嶇О', + }, +]); + +const columnsProps = useDefineColumns({ + operationBtns: [ + { + data: { + enCode: 'uploadBtn', + name: '涓婁紶', + }, + extraProps: { + hide: (row: BaseMaterialFileTableItem<T>) => { + if (!props.showUploadBtn) return true; + let fileList = row?.fileList?.filter?.((item) => item.status === 'success'); + return fileList?.length > 0; + }, + }, + }, + { + data: { + enCode: 'detailBtn', + name: '鏌ョ湅', + }, + emits: { + onClick: (row) => handlePreview(row), + }, + extraProps: { + hide: (row: BaseMaterialFileTableItem<T>) => { + if (!props.showCheckBtn) return true; + let fileList = row?.fileList?.filter?.((item) => item.status === 'success'); + if (!fileList?.length) { + return true; + } else { + if (fileList.length > 1) { + return false; + } else { + return !isFileCanPreview(fileList[0].path); + } + } + }, + }, + }, + { + data: { + enCode: 'downloadBtn', + name: props.downloadBtnText, + }, + emits: { + onClick: (row) => handleBatchDownload(row), + }, + extraProps: { + hide: (row: BaseMaterialFileTableItem<T>) => { + return ( + !props.showDownloadBtn || + !row?.fileList?.filter?.((item) => item.status === 'success')?.length + ); + }, + }, + }, + { + data: { + enCode: 'delBtn', + name: '鍒犻櫎', + }, + props: { + type: 'danger', + }, + emits: { + onClick: (row) => handleDelete(row), + }, + extraProps: { + hide: (row: BaseMaterialFileTableItem<T>) => { + if (!props.showDeleteBtn) return true; + let fileList = row?.fileList?.filter?.((item) => item.status === 'success'); + return !fileList?.length; + }, + }, + }, + ], +}); + +async function handleDelete(row: BaseMaterialFileTableItem<T>) { + try { + await Message.deleteMessage(); + row.fileList = []; + } catch (error) {} +} + +const currentFourStreamsMaterialFileTableItem = ref<BaseMaterialFileTableItem<T>>({ + fileBusinessType: 0 as any, + fileList: [], +}); +const { dialogProps, dialogState } = useDialog(); + +async function handlePreview(row: BaseMaterialFileTableItem<T>) { + if (row.fileList.length > 1) { + currentFourStreamsMaterialFileTableItem.value = row; + await nextTick(); + dialogState.dialogVisible = true; + } else { + bolePreview({ + fileUrl: row.fileList[0].url, + }); + } +} + +async function handleBatchDownload(row: BaseMaterialFileTableItem<T>) { + const successFileList = row.fileList.filter((item) => item.status === 'success'); + if (successFileList.length === 0) { + Message.errorMessage('娌℃湁鍙笅杞界殑鏂囦欢'); + return; + } + if (successFileList.length === 1) { + downloadFileByUrl(successFileList[0].url); + } else { + // downloadWithZip( + // successFileList.map((item) => ({ data: item.url })), + // `${props.BusinessTypeEnumText[row.fileBusinessType as any]}` + // ); + currentFourStreamsMaterialFileTableItem.value = row; + await nextTick(); + dialogState.dialogVisible = true; + } +} +</script> + +<style lang="scss" scoped> +@use '@/style/common.scss' as *; +</style> -- Gitblit v1.9.1