<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';
|
import { CustomerApplyFileTypeListItem, EnterpriseApplyFileUtils } from './utils';
|
import { FourStreamsExtraMaterialFileSearchType, SearchType } from '@/constants';
|
|
defineOptions({
|
name: 'FourStreamsBatchMaterialFileDialog',
|
});
|
|
type Props = {
|
name?: string;
|
zipName?: string;
|
showDeleteBtn?: boolean;
|
showMaterialExtraFileDeleteBtn?: boolean;
|
fileSearchTypeId?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
showDeleteBtn: true,
|
showMaterialExtraFileDeleteBtn: false,
|
});
|
|
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: API.CustomerUploadMonthApplyFileTypeDto) => {
|
if (EnterpriseApplyFileUtils.isApplyUploadExtraFileSearchTypeId(props.fileSearchTypeId)) {
|
return !props.showMaterialExtraFileDeleteBtn;
|
} else {
|
return !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}?${new Date().getTime()}` })),
|
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>
|
