Skip to content

Y
yd-csf-front
Commit 330ef011 by Sweet Zhang
Options

字段增加，大文件切片上传

parent cda44161
Showing with 457 additions and 205 deletions
package.json
...@@ -21,17 +21,19 @@ ...@@ -21,17 +21,19 @@
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@vueup/vue-quill": "1.2.0", "@vueup/vue-quill": "1.2.0",
"@vueuse/core": "13.3.0", "@vueuse/core": "13.3.0",
"ali-oss": "^6.23.0",
"axios": "1.9.0", "axios": "1.9.0",
"clipboard": "2.0.11", "clipboard": "2.0.11",
"dayjs": "^1.11.18", "dayjs": "^1.11.18",
"echarts": "5.6.0", "echarts": "5.6.0",
"element-plus": "^2.9.9", "element-plus": "^2.13.5",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"fuse.js": "6.6.2", "fuse.js": "6.6.2",
"js-beautify": "1.14.11", "js-beautify": "1.14.11",
"js-cookie": "3.0.5", "js-cookie": "3.0.5",
"jsencrypt": "3.3.2", "jsencrypt": "3.3.2",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"p-limit": "^7.3.0",
"pinia": "3.0.2", "pinia": "3.0.2",
"spark-md5": "^3.0.2", "spark-md5": "^3.0.2",
"splitpanes": "^4.0.4", "splitpanes": "^4.0.4",
......
src/api/common.js
...@@ -221,3 +221,19 @@ export function insuranceReconciliationCompany(data) { ...@@ -221,3 +221,19 @@ export function insuranceReconciliationCompany(data) {
method: 'post' method: 'post'
}) })
} }
// 获取STS凭证
export function getStstoken(projectBizId) {
return request({
url: `/oss/api/sts/sts-token?projectBizId=${projectBizId}`,
method: 'get'
})
}
// 大文件分片上传接口
export function batchSaveFiles(data) {
return request({
url: '/oss/api/sts/batch/save/files',
data: data,
method: 'post'
})
}
src/components/LargeFileUploader/index.vue
<template> <template>
<div class="upload-container"> <div class="big-file-uploader">
<h2>多文件分片上传 (Vue3 + Element Plus)</h2> <!--
关键修改：
<el-card shadow="hover"> 1. 添加 ref="uploadRef" 以便直接访问内部文件列表
<el-upload 2. 监听 @change 获取原生文件
ref="uploadRef" -->
class="multi-uploader" <el-upload
action="#" ref="uploadRef"
:auto-upload="false" class="upload-demo"
multiple drag
:limit="10" multiple
:on-change="handleFileChange" :auto-upload="false"
:on-remove="handleRemove" :on-change="handleFileSelect"
:file-list="fileList" :file-list="uiFileList"
:disabled="isUploading"
:limit="100"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖拽文件到此处 或 <em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">
支持大文件切片上传，最大并发数：{{ uploadConcurrency }}
</div>
</template>
</el-upload>
<!-- 控制栏 -->
<div class="control-bar" v-if="fileList.length > 0">
<el-button
type="primary"
@click="startUpload"
:disabled="isUploading || !hasPendingFiles"
:loading="isUploading"
size="default"
>
{{ isUploading ? '正在上传...' : '开始上传' }}
</el-button>
<el-button @click="clearList" :disabled="isUploading" size="default">
清空列表
</el-button>
<div class="stats">
共 {{ fileList.length }} 个文件 |
成功: <span class="text-success">{{ successCount }}</span> |
失败: <span class="text-danger">{{ failCount }}</span>
</div>
</div>
<!-- 文件列表 -->
<div class="file-list-container">
<div
v-for="(item, index) in fileList"
:key="item.uid"
class="file-item"
:class="{ 'is-error': item.status === 'fail' }"
> >
<template #trigger> <div class="file-info">
<el-button type="primary">选择文件</el-button> <el-icon class="file-icon"><document /></el-icon>
</template> <div class="file-meta">
<div class="file-name" :title="item.name">{{ item.name }}</div>
<!-- 自定义文件列表项 --> <div class="file-size">{{ formatSize(item.size) }}</div>
<template #file="{ file }">
<div class="el-upload-list__item-custom">
<div class="file-info">
<el-icon><Document /></el-icon>
<span class="file-name">{{ file.name }}</span>
<span class="file-size">{{ formatSize(file.size) }}</span>
</div>
<!-- 状态与进度区域 -->
<div class="file-action-area">
<!-- 等待上传状态 -->
<div v-if="getTaskStatus(file.uid)?.status === 'idle' || !getTaskStatus(file.uid)" class="status-wait">
<el-tag size="small">待上传</el-tag>
<el-button link type="primary" @click="startSingleUpload(file)">开始</el-button>
</div>
<!-- 进行中/暂停/合并状态 -->
<div v-else-if="['checking', 'uploading', 'merging', 'paused'].includes(getTaskStatus(file.uid)?.status)" class="status-progress">
<el-progress
:percentage="getTaskStatus(file.uid)?.progress || 0"
:status="getTaskStatus(file.uid)?.status === 'paused' ? 'exception' : undefined"
:format="(percent) => getTaskStatus(file.uid)?.message || `${percent}%`"
/>
<div class="btn-group">
<el-button
v-if="getTaskStatus(file.uid)?.status !== 'paused'"
link type="warning"
@click="handlePause(file.uid)"
>暂停</el-button>
<el-button
v-else
link type="success"
@click="handleResume(file.uid)"
>继续</el-button>
<el-button link type="danger" @click="handleCancel(file.uid)">取消</el-button>
</div>
</div>
<!-- 成功状态 -->
<div v-else-if="getTaskStatus(file.uid)?.status === 'success'" class="status-success">
<el-tag type="success" effect="plain">完成</el-tag>
<span class="success-text">✓ {{ getTaskStatus(file.uid)?.message }}</span>
</div>
<!-- 失败状态 -->
<div v-else-if="getTaskStatus(file.uid)?.status === 'error'" class="status-error">
<el-tag type="danger" effect="plain">失败</el-tag>
<span class="error-text">{{ getTaskStatus(file.uid)?.message }}</span>
<el-button link type="primary" @click="startSingleUpload(file)">重试</el-button>
</div>
</div>
</div> </div>
</template> </div>
</el-upload>
<div class="progress-wrapper">
<el-progress
:percentage="item.progress"
:status="getProgressStatus(item.status)"
:stroke-width="16"
>
<template v-if="item.status === 'uploading'">
<span class="speed-text">{{ item.speed }}</span>
</template>
<template v-else-if="item.status === 'success'">
<el-icon><check /></el-icon>
</template>
<template v-else-if="item.status === 'fail'">
<el-icon><close /></el-icon>
</template>
</el-progress>
</div>
<div class="global-actions" v-if="fileList.length > 0"> <div class="action-area">
<el-button type="success" @click="startAllUploads" :disabled="isUploadingAny">全部开始</el-button> <el-tag :type="getStatusType(item.status)" size="small">
<el-button type="info" @click="clearAll">清空列表</el-button> {{ statusMap[item.status] }}
</el-tag>
<el-button
v-if="item.status === 'fail'"
link
type="primary"
size="small"
@click="retryUpload(item)"
>
重试
</el-button>
<el-button
v-if="item.status === 'waiting'"
link
type="danger"
size="small"
@click="removeFile(item)"
>
移除
</el-button>
</div>
</div> </div>
</el-card> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive } from 'vue'; import { ref, computed, nextTick } from 'vue';
import { Document } from '@element-plus/icons-vue'; import {
UploadFilled,
Document,
Check,
Close
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { useMultiFileUpload } from '@/composables/useMultiFileUpload'; import OSS from 'ali-oss';
import pLimit from 'p-limit';
// 请确保路径正确
import { getStstoken, batchSaveFiles } from '@/api/common';
const props = defineProps({
tenantBizId: { type: String, required: true,default: '' },
projectBizId: { type: String, required: true, default: '' },
objectBizId: { type: String, required: true, default: '' },
objectType: { type: String, default: '' },
objectTableName: { type: String, default: '' },
objectName: { type: String, default: '' },
uploadConcurrency: { type: Number, default: 3 },
partSize: { type: Number, default: 1 * 1024 * 1024 },
});
const uploadRef = ref(null); const uploadRef = ref(null);
const fileList = ref([]); // Element Plus 管理的文件列表 const fileList = ref([]);
const uiFileList = ref([]);
const isUploading = ref(false);
const ossClient = ref(null);
const statusMap = {
waiting: '等待上传',
uploading: '上传中',
success: '成功',
fail: '失败',
};
const hasPendingFiles = computed(() => {
return fileList.value.some(f => f.status === 'waiting' || f.status === 'fail');
});
// 引入我们的逻辑钩子 const successCount = computed(() => fileList.value.filter(f => f.status === 'success').length);
const { startUpload, pauseFile, resumeFile, cancelFile, getTaskStatus } = useMultiFileUpload(); const failCount = computed(() => fileList.value.filter(f => f.status === 'fail').length);
// 格式化大小
const formatSize = (bytes) => { const formatSize = (bytes) => {
if (!bytes) return ''; if (!bytes) return '0 B';
const k = 1024; const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB']; const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k)); const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}; };
// 当用户选择文件时 const getProgressStatus = (status) => {
const handleFileChange = (uploadFile, uploadFiles) => { if (status === 'success') return 'success';
fileList.value = uploadFiles; if (status === 'fail') return 'exception';
// 初始化状态为 idle (实际上 useMultiFileUpload 会在 start 时初始化) return undefined;
}; };
// 移除文件 const getStatusType = (status) => {
const handleRemove = (uploadFile, uploadFiles) => { const map = { waiting: 'info', uploading: 'warning', success: 'success', fail: 'danger' };
fileList.value = uploadFiles; return map[status] || 'info';
cancelFile(uploadFile.uid); // 如果正在传，先取消
}; };
// 单个开始上传 // 【优化】处理文件选择（增加关闭再打开时的去重清理）
const startSingleUpload = (file) => { const handleFileSelect = (rawFile, uploadFiles) => {
// 这里的 file 是 element-plus 的 UploadFile 对象，raw 才是原生 File 对象 // 如果是重新选择文件，建议先检查是否需要清理“失败”或“成功”的旧状态，视业务需求而定
if (!file.raw) return; // 这里保持原有逻辑，但增强了对 raw 对象的获取
const filesToProcess = Array.isArray(rawFile) ? rawFile : [rawFile];
// 定义回调，用于强制刷新视图（虽然 uploadTasks 是响应式的，但有时 EL 的 slot 更新不及时，可加 forceUpdate 逻辑，此处依赖响应式） filesToProcess.forEach(file => {
const updateCallback = (uid, status, progress, msg) => { let nativeFile = null;
// 如果需要更激进的 UI 更新，可以在这里操作 fileList 中的对应项
// 但通常响应式对象足够 // 优先从 file.raw 获取
}; if (file.raw && (file.raw instanceof File || file.raw instanceof Blob)) {
nativeFile = file.raw;
} else if (file instanceof File || file instanceof Blob) {
nativeFile = file;
} else {
// 尝试从 uploadRef 中找回原生对象（防止 element-plus 包装丢失）
if (uploadRef.value && uploadRef.value.files) {
const found = uploadRef.value.files.find(f => f.name === file.name && f.size === file.size);
if (found && found.raw) {
nativeFile = found.raw;
}
}
}
startUpload(file.raw, updateCallback); if (!nativeFile) {
}; console.warn('Skipping invalid file:', file.name);
return;
}
// 【关键去重逻辑】
// 如果列表中已存在同名同大小的文件，且状态不是 success（允许重新上传成功的？通常不允许），则跳过
// 如果你的需求是：关闭弹窗再打开，之前的列表应该被清空。请确保在弹窗关闭事件 (@close) 中调用了 clearList()
const exists = fileList.value.some(
f => f.name === nativeFile.name && f.size === nativeFile.size && f.status !== 'success'
);
if (!exists) {
const uid = nativeFile.uid || Date.now() + Math.random();
const newItem = {
uid,
name: nativeFile.name,
size: nativeFile.size,
raw: nativeFile,
status: 'waiting',
progress: 0,
speed: '0 KB/s',
url: '',
startTime: 0,
};
// 全部开始 (简单实现：遍历所有未成功的文件) fileList.value.push(newItem);
const startAllUploads = () => {
fileList.value.forEach(file => { // 同步到 uiFileList，确保 el-upload 显示
const status = getTaskStatus(file.uid)?.status; // 注意：不要直接 push 到 uploadRef.value.files，而是更新绑定的 uiFileList
if (!status || status === 'error' || status === 'idle' || status === 'paused') { const uiExists = uiFileList.value.some(f => f.uid === uid);
// 如果是 paused，调用 resume 逻辑可能需要特殊处理，这里简化为重新触发 start (我们的 logic 支持断点) if (!uiExists) {
if (status === 'paused') { uiFileList.value.push({
resumeFile(file.uid); uid,
} else { name: nativeFile.name,
startSingleUpload(file); size: nativeFile.size,
status: 'ready',
raw: nativeFile
});
} }
} }
}); });
}; };
const handlePause = (uid) => pauseFile(uid); // 【修复】移除单个文件方法
const handleResume = (uid) => resumeFile(uid); const removeFile = (item) => {
const handleCancel = (uid) => { if (isUploading.value && item.status === 'uploading') {
cancelFile(uid); ElMessage.warning('文件正在上传，无法移除');
// 从列表中移除视觉上的文件（可选，看需求是保留记录还是直接删掉） return;
// fileList.value = fileList.value.filter(f => f.uid !== uid); }
// 1. 从逻辑列表移除
fileList.value = fileList.value.filter(f => f.uid !== item.uid);
// 2. 从 UI 列表移除
uiFileList.value = uiFileList.value.filter(f => f.uid !== item.uid);
// 3. 同步清除 el-upload 内部对应的文件记录
if (uploadRef.value) {
// el-upload 的 clearFiles 通常清空所有，若要移除单个，可以直接操作 its internal files 数组
// 但最简单可靠的方法是：既然我们控制了 uiFileList，让 el-upload 依赖 uiFileList 即可
// 如果 UI 没刷新，可以强制触发一次 update
const uploadInstance = uploadRef.value;
if (uploadInstance.files) {
uploadInstance.files = uploadInstance.files.filter(f => f.uid !== item.uid);
}
}
}; };
// 【修复】清空列表方法
const clearList = () => {
if (isUploading.value) {
ElMessage.warning('上传进行中，无法清空');
return;
}
const clearAll = () => { // 1. 清空内部逻辑列表
fileList.value = []; fileList.value = [];
// 清理内部状态逻辑略
// 2. 清空 UI 绑定列表
uiFileList.value = [];
// 3. 【关键】调用 Element Plus 组件实例的方法清除内部状态
if (uploadRef.value) {
uploadRef.value.clearFiles();
}
// 4. 如果是在弹窗中使用，且关闭弹窗时调用此方法，确保父组件也能感知变化（如果需要）
// emit('update:modelValue', []); // 如果有双向绑定
}; };
const isUploadingAny = computed(() => { const initOssClient = async () => {
return fileList.value.some(f => { try {
const s = getTaskStatus(f.uid)?.status; const res = await getStstoken(props.projectBizId);
return s === 'uploading' || s === 'checking' || s === 'merging'; if (res.code !== 200 && res.data?.code !== 200) {
}); throw new Error(res.msg || res.data?.msg || '获取 STS 凭证失败');
}); }
</script>
<style scoped> const data = res.data || res;
.upload-container { const rawData = data.data || data;
max-width: 800px; const { region, accessKeyId, accessKeySecret, stsToken, bucket, endpoint } = rawData;
margin: 20px auto;
}
.el-upload-list__item-custom { if (!accessKeyId || !bucket) throw new Error('STS 凭证信息不完整');
display: flex;
flex-direction: column;
padding: 10px;
border-bottom: 1px solid #ebeef5;
transition: background-color 0.2s;
}
.el-upload-list__item-custom:hover { let ossEndpoint = endpoint;
background-color: #f5f7fa; if (!ossEndpoint) ossEndpoint = `oss-${region}.aliyuncs.com`;
}
.file-info { ossClient.value = new OSS({
display: flex; region,
align-items: center; accessKeyId,
margin-bottom: 8px; accessKeySecret,
} stsToken,
bucket,
endpoint: ossEndpoint,
secure: true,
timeout: 60000,
});
return ossClient.value;
} catch (error) {
console.error('Init OSS Error:', error);
throw error;
}
};
.file-info .el-icon { const uploadSingleFile = async (item) => {
margin-right: 8px; // 【核心修复】再次校验 raw 是否为原生 File
color: #409eff; const file = item.raw;
font-size: 20px;
} if (!(file instanceof File) && !(file instanceof Blob)) {
console.error('Invalid file object for upload:', file);
throw new Error('文件对象无效，必须是 File 或 Blob 类型');
}
.file-name { const objectName = `uploads/${props.projectBizId}/${Date.now()}_${item.uid}_${file.name}`;
font-weight: bold;
color: #606266; item.status = 'uploading';
flex: 1; item.startTime = Date.now();
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 10px;
}
.file-size { try {
font-size: 12px; const client = ossClient.value;
color: #909399;
} await client.multipartUpload(objectName, file, {
parallel: 4,
partSize: props.partSize,
progress: (p) => {
item.progress = Math.floor(p * 100);
const duration = (Date.now() - item.startTime) / 1000;
if (duration > 0 && p > 0) {
const speed = (file.size * p) / duration;
item.speed = `${formatSize(speed)}/s`;
}
},
});
.file-action-area { item.status = 'success';
display: flex; item.progress = 100;
align-items: center; item.speed = '-';
justify-content: space-between;
} // const endpoint = client.options.endpoint.replace(/^https?:\/\//, '');
const endpoint = client.options.endpoint.host;
item.url = `https://${client.options.bucket}.${endpoint}/${objectName}`;
.status-wait, .status-success, .status-error { return {
display: flex; fileName: item.name,
align-items: center; fileSize: item.size,
gap: 10px; fileUrl: item.url,
width: 100%; };
} } catch (error) {
console.error(`Upload failed: ${item.name}`, error);
item.status = 'fail';
item.speed = '-';
return null;
}
};
.status-progress { const startUpload = async () => {
width: 100%; if (!hasPendingFiles.value) return;
display: flex; isUploading.value = true;
align-items: center; const successResults = [];
gap: 15px;
}
.status-progress .el-progress { try {
flex: 1; await initOssClient();
} const pendingItems = fileList.value.filter(f => f.status === 'waiting' || f.status === 'fail');
.btn-group { if (pendingItems.length === 0) return;
display: flex;
gap: 5px; const limit = pLimit(props.uploadConcurrency);
} const tasks = pendingItems.map(item => limit(() => uploadSingleFile(item)));
const results = await Promise.all(tasks);
results.forEach(res => { if (res) successResults.push(res); });
if (successResults.length > 0) {
const payload = {
tenantBizId: props.tenantBizId,
projectBizId: props.projectBizId,
objectBizId: props.objectBizId,
objectType: props.objectType,
objectTableName: props.objectTableName,
objectName: props.objectName,
apiOssFileDtoList: successResults,
};
await batchSaveFiles(payload);
ElMessage.success(`上传完成！成功 ${successResults.length} 个文件`);
} else {
ElMessage.error('所有文件上传均失败');
}
} catch (globalError) {
console.error('Global Upload Error:', globalError);
ElMessage.error(`上传初始化失败: ${globalError.message}`);
} finally {
isUploading.value = false;
}
};
const retryUpload = async (item) => {
if (isUploading.value) return;
item.status = 'uploading';
item.progress = 0;
try {
if (!ossClient.value) await initOssClient();
await uploadSingleFile(item);
if (item.status === 'success') ElMessage.success(`${item.name} 重试成功`);
} catch (e) { /* ignored */ }
};
.global-actions { // 暴露方法给父组件调用
margin-top: 20px; defineExpose({
text-align: right; clearList,
border-top: 1px solid #eee; startUpload, // 如果父组件需要主动触发上传也可以暴露
padding-top: 15px; fileList // 如果需要访问文件列表也可以暴露
});
</script>
<style scoped>
/* 样式保持不变 */
.big-file-uploader { width: 100%; max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.control-bar { display: flex; align-items: center; gap: 15px; margin: 20px 0; padding: 15px; background: #f5f7fa; border-radius: 8px; }
.stats { margin-left: auto; font-size: 14px; color: #606266; }
.text-success { color: #67c23a; font-weight: bold; }
.text-danger { color: #f56c6c; font-weight: bold; }
.file-list-container { display: flex; flex-direction: column; gap: 12px; }
.file-item { display: grid; grid-template-columns: 250px 1fr 120px; align-items: center; gap: 20px; padding: 15px; border: 1px solid #ebeef5; border-radius: 6px; background: #fff; transition: all 0.3s; }
.file-item.is-error { border-color: #fde2e2; background-color: #fef0f0; }
.file-info { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.file-icon { font-size: 24px; color: #409eff; flex-shrink: 0; }
.file-meta { display: flex; flex-direction: column; overflow: hidden; }
.file-name { font-size: 14px; color: #303133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.file-size { font-size: 12px; color: #909399; margin-top: 2px; }
.progress-wrapper { width: 100%; }
.speed-text { font-size: 12px; color: #909399; }
.action-area { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
@media (max-width: 600px) {
.file-item { grid-template-columns: 1fr; gap: 10px; }
.action-area { flex-direction: row; justify-content: space-between; align-items: center; }
.control-bar { flex-direction: column; align-items: stretch; }
.stats { margin-left: 0; margin-top: 10px; }
} }
</style> </style>
\ No newline at end of file
src/views/sign/underwritingMain/policyDetail.vue
...@@ -192,10 +192,17 @@ ...@@ -192,10 +192,17 @@
:showAction="true" :showAction="true"
:showClose="true" :showClose="true"
@close="((fileUploadDialogFlag = false), (files = ''))" @close="((fileUploadDialogFlag = false), (files = ''))"
@confirm="((fileUploadDialogFlag = false), (files = ''))" @confirm="handleDialogClose"
> >
<!-- <FileUploader/> --> <FileUploader
<FileUpload :tenant-biz-id="userStore.projectInfo.tenantBizId"
:project-biz-id="userStore.projectInfo.projectBizId"
:object-biz-id="props.policyBizId"
:object-type="'DOCUMENT'"
:upload-concurrency="3"
ref="uploaderRef"
/>
<!-- <FileUpload
v-model="files" v-model="files"
:data="{ obiectTableName: 'policy_follow', objectBizId: props.policyBizId }" :data="{ obiectTableName: 'policy_follow', objectBizId: props.policyBizId }"
:file-type="['xlsx', 'xls', 'doc', 'docx', 'pdf', 'txt', 'jpg', 'jpeg', 'png', 'gif']" :file-type="['xlsx', 'xls', 'doc', 'docx', 'pdf', 'txt', 'jpg', 'jpeg', 'png', 'gif']"
...@@ -204,7 +211,7 @@ ...@@ -204,7 +211,7 @@
:fileSize="15" :fileSize="15"
:name="'files'" :name="'files'"
@uploadEnd="handleUploadEnd" @uploadEnd="handleUploadEnd"
/> /> -->
</CommonDialog> </CommonDialog>
</div> </div>
</template> </template>
...@@ -266,7 +273,17 @@ const props = defineProps({ ...@@ -266,7 +273,17 @@ const props = defineProps({
default: '' default: ''
} }
}) })
const uploaderRef = ref(null);
// 【关键】当弹窗关闭时，强制清空上传组件列表
const handleDialogClose = () => {
if (uploaderRef.value) {
// 调用子组件暴露的清空方法
// 你需要在子组件中使用 defineExpose 暴露 clearList 方法
uploaderRef.value.clearList();
fileUploadDialogFlag.value = false
getAttachmentListDetail(props.policyBizId)
}
};
const emit = defineEmits(['update:modelValue', 'submit', 'cancel', 'saveRow']) const emit = defineEmits(['update:modelValue', 'submit', 'cancel', 'saveRow'])
const introducerTableData = ref([]) const introducerTableData = ref([])
...@@ -896,7 +913,7 @@ const attachmentTableColumns = ref([ ...@@ -896,7 +913,7 @@ const attachmentTableColumns = ref([
prop: 'originalName', prop: 'originalName',
label: '文件名', label: '文件名',
sortable: true, sortable: true,
width: '150', width: '300',
formatter: row => row.originalName || '-' formatter: row => row.originalName || '-'
}, },
{ {
...@@ -910,8 +927,8 @@ const attachmentTableColumns = ref([ ...@@ -910,8 +927,8 @@ const attachmentTableColumns = ref([
prop: 'createTime', prop: 'createTime',
label: '上传时间', label: '上传时间',
sortable: true, sortable: true,
width: '150', width: '200',
formatter: row => row.createTime || '-' formatter: row => formatToDateTime(row.createTime || '-')
}, },
{ {
prop: 'creatorName', prop: 'creatorName',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment