<template>
|
<div>
|
<ProTableV2
|
:tableData="list"
|
:columns="columns"
|
:autoHeight="false"
|
:operationBtns="columnsProps.operationBtns"
|
:operationColumnWidth="240"
|
:showTableColumnSetting="false"
|
>
|
<template #operationBtn-uploadBtn="{ data, row }">
|
<BlFileUpload
|
v-model:file-url="row.listFiles"
|
multiple
|
:limit="99"
|
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="currentFourStreamsMaterialFileTableItem.fileTypeName"
|
v-model:fileList="currentFourStreamsMaterialFileTableItem.listFiles"
|
:showDeleteBtn="showDeleteBtn"
|
:yearMonth="date"
|
:onDelete="(file) => handleDialogDelete(currentFourStreamsMaterialFileTableItem, file)"
|
/>
|
</div>
|
</template>
|
|
<script setup lang="ts" generic="T">
|
import { FourStreamsMaterialFileTableProps } from './types';
|
import {
|
ProTableV2,
|
defineColumns,
|
defineOperationBtns,
|
BlFileUpload,
|
bolePreview,
|
useDialog,
|
UploadUserFile,
|
} 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 { CustomerApplyFileTypeListItem } from './utils';
|
|
defineOptions({
|
name: 'FourStreamsMaterialFileTable',
|
});
|
|
const props = withDefaults(defineProps<FourStreamsMaterialFileTableProps>(), {
|
showUploadBtn: true,
|
showCheckBtn: true,
|
showDownloadBtn: true,
|
showDeleteBtn: true,
|
downloadBtnText: '下载',
|
});
|
|
const list = defineModel<CustomerApplyFileTypeListItem[]>('list');
|
|
const columns = defineColumns([
|
{
|
id: '1',
|
enCode: 'fileTypeName',
|
name: '材料名称',
|
},
|
]);
|
|
const columnsProps = useDefineColumns({
|
operationBtns: [
|
{
|
data: {
|
enCode: 'uploadBtn',
|
name: '上传',
|
},
|
extraProps: {
|
hide: (row: CustomerApplyFileTypeListItem) => {
|
return !props.showUploadBtn;
|
// 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: CustomerApplyFileTypeListItem) => {
|
if (!props.showCheckBtn) return true;
|
let fileList = row?.listFiles?.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: CustomerApplyFileTypeListItem) => {
|
return (
|
!props.showDownloadBtn ||
|
!row?.listFiles?.filter?.((item) => item.status === 'success')?.length
|
);
|
},
|
},
|
},
|
{
|
data: {
|
enCode: 'delBtn',
|
name: '删除',
|
},
|
props: {
|
type: 'danger',
|
},
|
emits: {
|
onClick: (row) => handleDelete(row),
|
},
|
extraProps: {
|
hide: (row: CustomerApplyFileTypeListItem) => {
|
if (!props.showDeleteBtn) return true;
|
let fileList = row?.listFiles?.filter?.((item) => item.status === 'success');
|
return !fileList?.length;
|
},
|
},
|
},
|
],
|
});
|
|
async function handleDelete(row: CustomerApplyFileTypeListItem) {
|
try {
|
if (row.listFiles.length > 1) {
|
currentFourStreamsMaterialFileTableItem.value = row;
|
await nextTick();
|
dialogState.dialogVisible = true;
|
} else {
|
await Message.deleteMessage();
|
if (props.onDelete) {
|
await props.onDelete(row, row.listFiles[0].id);
|
}
|
row.listFiles = [];
|
}
|
} catch (error) {}
|
}
|
|
async function handleDialogDelete(
|
row: CustomerApplyFileTypeListItem,
|
listFile: API.CustomerUploadMonthApplyFileTypeDto & UploadUserFile
|
) {
|
if (props.onDelete) {
|
await props.onDelete(row, listFile.id);
|
}
|
}
|
|
const currentFourStreamsMaterialFileTableItem = ref<CustomerApplyFileTypeListItem>({
|
fileSearchTypeId: '',
|
fileTypeName: '',
|
lastUpdateTime: '',
|
listFiles: [],
|
});
|
const { dialogProps, dialogState } = useDialog();
|
|
async function handlePreview(row: CustomerApplyFileTypeListItem) {
|
if (row.listFiles.length > 1) {
|
currentFourStreamsMaterialFileTableItem.value = row;
|
await nextTick();
|
dialogState.dialogVisible = true;
|
} else {
|
bolePreview({
|
fileUrl: row.listFiles[0].url,
|
});
|
}
|
}
|
|
async function handleBatchDownload(row: CustomerApplyFileTypeListItem) {
|
const successFileList = row.listFiles.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>
|
