| | |
| | | <div class="label">数据上传</div> |
| | | <div class="upload-container"> |
| | | <el-upload |
| | | ref="uploadRef" |
| | | :auto-upload="false" |
| | | :limit="1" |
| | | :on-change="handleFileChange" |
| | | :on-remove="handleFileRemove" |
| | | :before-upload="beforeFileUpload" |
| | | :file-list="fileList" |
| | | accept=".zip,.rar,.7z,.tar,.gz" |
| | | class="upload-demo" |
| | | > |
| | | :http-request="handleHttpRequest" |
| | | :limit="3" |
| | | :on-success="handleUploadSuccess" |
| | | :on-error="handleUploadError" |
| | | :on-remove="handleFileRemove" |
| | | :before-upload="beforeFileUpload" |
| | | :file-list="fileList" |
| | | accept=".zip,.rar,.7z,.tar,.gz" |
| | | class="upload-demo" |
| | | > |
| | | <template #trigger> |
| | | <el-button type="primary">选择文件</el-button> |
| | | </template> |
| | | <template #tip> |
| | | <div class="el-upload__tip">请上传压缩文件 (.zip/.rar/.7z/.tar/.gz)</div> |
| | | <div class="el-upload__tip">支持上传 (.zip/.rar/.7z/.tar/.gz)格式文件</div> |
| | | </template> |
| | | </el-upload> |
| | | <el-button type="success" :disabled="!selectedFile" @click="handleUpload" style="margin-top: 10px"> |
| | | 上传文件 |
| | | </el-button> |
| | | |
| | | <!-- 已上传文件列表 --> |
| | | <div v-if="uploadedFiles.length > 0" class="uploaded-files"> |
| | | <h4>已上传文件:</h4> |
| | | <div v-for="(file, index) in uploadedFiles" :key="index" class="file-item"> |
| | | <span>{{ file.originalName }}</span> |
| | | <el-button type="text" @click="viewFile(file)" style="margin-left: 10px">查看</el-button> |
| | | <el-button type="text" @click="downloadFile(file)" style="margin-left: 5px">下载</el-button> |
| | | </div> |
| | | </div> |
| | | <!-- <div v-if="uploadedFiles.length > 0" class="uploaded-files">--> |
| | | <!-- <h4>已上传文件:</h4>--> |
| | | <!-- <div v-for="(file, index) in uploadedFiles" :key="index" class="file-item">--> |
| | | <!-- <span>{{ file.originalName }}</span>--> |
| | | <!-- <el-button type="text" @click="viewFile(file)" style="margin-left: 10px">查看</el-button>--> |
| | | <!-- <el-button type="text" @click="downloadFile(file)" style="margin-left: 5px">下载</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | </div> |
| | | <div v-if="detailDemandStatus === '2'"> |
| | |
| | | const demandId = ref('') |
| | | const visible = defineModel() // 弹框显隐 |
| | | const formData = ref({}) // 表单数据 |
| | | const uploadRef = ref() // 上传组件引用 |
| | | const selectedFile = ref(null) // 选择的文件 |
| | | const fileList = ref([]) // 上传文件列表 |
| | | const uploadedFiles = ref([]) // 已上传文件列表 |
| | | const uploadLoading = ref(false) // 上传加载状态 |
| | | const responseData = ref([]) |
| | | const responseData = ref(null) |
| | | // 自定义上传请求函数 |
| | | const handleHttpRequest = async (options) => { |
| | | try { |
| | | // 创建FormData对象 |
| | | const formData = new FormData() |
| | | formData.append('file', options.file) |
| | | |
| | | // 调用导入的API函数 |
| | | const response = await putFileAttachApi(formData) |
| | | console.log('response',response) |
| | | if (response.data && response.data.success) { |
| | | // 调用上传成功的回调 |
| | | options.onSuccess(response) |
| | | } else { |
| | | // 调用上传失败的回调 |
| | | options.onError(new Error(response.data?.msg || '文件上传失败')) |
| | | } |
| | | } catch (error) { |
| | | // 调用上传失败的回调 |
| | | options.onError(error) |
| | | console.error('文件上传失败:', error) |
| | | } |
| | | } |
| | | // 拒绝申请弹框控制 |
| | | const rejectionDialogVisible = ref(false) // 拒绝申请弹框显隐 |
| | | const tableData = ref([]) // 附件表格数据 |
| | | // 文件选择变化 |
| | | const handleFileChange = (file, fileList) => { |
| | | if (fileList.length > 0) { |
| | | selectedFile.value = file.raw |
| | | } else { |
| | | selectedFile.value = null |
| | | } |
| | | } |
| | | |
| | | // 文件移除 |
| | | const handleFileRemove = () => { |
| | | selectedFile.value = null |
| | | const handleFileRemove = (file, fileList) => { |
| | | // 从已上传文件列表中移除对应文件 |
| | | if (file.response && file.response.attachId) { |
| | | uploadedFiles.value = uploadedFiles.value.filter(item => item.attachId !== file.response.attachId) |
| | | } |
| | | // 清空响应数据 |
| | | if (responseData.value && responseData.value.attachId === file.response?.attachId) { |
| | | responseData.value = null |
| | | } |
| | | } |
| | | |
| | | // 上传前验证 |
| | |
| | | return true |
| | | } |
| | | |
| | | // 处理文件上传 |
| | | const handleUpload = async () => { |
| | | if (!selectedFile.value) { |
| | | ElMessage.warning('请先选择文件') |
| | | return |
| | | } |
| | | // 上传成功处理函数 |
| | | const handleUploadSuccess = (response, file, fileList) => { |
| | | // 添加更严格的检查,确保response不是undefined |
| | | if (response && response?.data && response?.data?.success) { |
| | | const fileData = response.data.data |
| | | console.log('成功数据', fileData) |
| | | responseData.value = fileData |
| | | // 添加到已上传文件列表 |
| | | uploadedFiles.value.push({ |
| | | name: fileData.name, |
| | | originalName: fileData.originalName, |
| | | link: fileData.link, |
| | | attachId: fileData.attachId, |
| | | }) |
| | | |
| | | // 再次验证文件类型 |
| | | if (!beforeFileUpload(selectedFile.value)) { |
| | | return |
| | | } |
| | | ElMessage.success('文件上传成功!') |
| | | } |
| | | } |
| | | |
| | | try { |
| | | uploadLoading.value = true |
| | | |
| | | // 创建FormData对象 |
| | | const formData = new FormData() |
| | | formData.append('file', selectedFile.value) |
| | | |
| | | // 调用上传接口 |
| | | const response = await putFileAttachApi(formData) |
| | | |
| | | if (response.data && response.data.success) { |
| | | const fileData = response.data.data |
| | | console.log('成功数据', fileData) |
| | | responseData.value = fileData |
| | | // 添加到已上传文件列表 |
| | | uploadedFiles.value.push({ |
| | | name: fileData.name, |
| | | originalName: fileData.originalName, |
| | | link: fileData.link, |
| | | attachId: fileData.attachId, |
| | | }) |
| | | |
| | | ElMessage.success('文件上传成功!') |
| | | |
| | | // 清空上传列表 |
| | | uploadRef.value.clearFiles() |
| | | selectedFile.value = null |
| | | |
| | | // 这里可以将附件ID保存到表单数据中,供后续提交使用 |
| | | // formData.value.attachmentId = fileData.attachId |
| | | } else { |
| | | ElMessage.error(response.data?.msg || '文件上传失败') |
| | | } |
| | | } catch (error) { |
| | | console.error('文件上传失败:', error) |
| | | ElMessage.error('文件上传失败,请重试') |
| | | } finally { |
| | | uploadLoading.value = false |
| | | } |
| | | // 上传失败处理函数 |
| | | const handleUploadError = (error, file, fileList) => { |
| | | ElMessage.error(error?.message || '文件上传失败,请重试') |
| | | } |
| | | |
| | | // 查看文件 |
| | |
| | | |
| | | // 拒绝申请 |
| | | const rejectTheApplication = () => { |
| | | if (responseData.value.length === 0) { |
| | | if (!responseData.value) { |
| | | return ElMessage.warning('请上传数据') |
| | | } |
| | | // 打开拒绝申请弹框 |
| | |
| | | } |
| | | // 审核通过 |
| | | const approvedByTheReview = () => { |
| | | if (responseData.value.length === 0) { |
| | | if (!responseData.value) { |
| | | return ElMessage.warning('请上传数据') |
| | | } |
| | | const id = [responseData.value.attachId] |