| | |
| | | import { ref, reactive, onMounted } from 'vue' |
| | | import { |
| | | Document, UploadFilled, MagicStick, RefreshLeft, |
| | | Download, Plus, Picture, Refresh |
| | | Download, Plus, Picture, Refresh, Delete |
| | | } from '@element-plus/icons-vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import request from "@/utils/requestByFile" |
| | |
| | | const conversionResult = ref(null) |
| | | const supportedFormats = ref(['png', 'jpg', 'jpeg', 'bmp']) |
| | | const loadingFormats = ref(false) |
| | | let result = ref(null) |
| | | let props = defineProps({ |
| | | rowIndex:null, |
| | | orderId:null |
| | |
| | | }) |
| | | |
| | | onMounted(() => { |
| | | //loadSupportedFormats() |
| | | getFileList() |
| | | }) |
| | | |
| | | const getFileList = async () => { |
| | | request.post(`/orderFile/getOrderNumberFile/${props.orderId}/${props.rowIndex.orderNumber}`).then(res=>{ |
| | | if(res.data===null){ |
| | | return |
| | | } |
| | | result.value = res.data |
| | | conversionResult.value = res.data.imageBase64 |
| | | }) |
| | | } |
| | | |
| | | const deleteFile = async () => { |
| | | request.post(`/orderFile/deleteOrderNumberFile/${props.orderId}/${props.rowIndex.orderNumber}`).then(res=>{ |
| | | result.value = null |
| | | conversionResult.value = null |
| | | ElMessage.success("删除成功") |
| | | }) |
| | | } |
| | | |
| | | const downloadFile = () => { |
| | | try { |
| | | // 移除字符串中的方括号和空格 |
| | | const cleanString = result.value.fileData.replace(/[\[\]\s]/g, ''); |
| | | |
| | | // 如果字符串为空,返回空的Uint8Array |
| | | if (!cleanString) { |
| | | return new Uint8Array(); |
| | | } |
| | | |
| | | // 分割字符串并转换为数字数组 |
| | | const byteStrings = cleanString.split(','); |
| | | const bytes = byteStrings.map(byteStr => { |
| | | // 将字符串转换为数字(处理负数) |
| | | let value = parseInt(byteStr, 10); |
| | | |
| | | // Java字节是有符号的(-128到127),需要转换为无符号(0到255) |
| | | if (value < 0) { |
| | | value = 256 + value; |
| | | } |
| | | |
| | | return value; |
| | | }); |
| | | |
| | | const uint8Array = Uint8Array(bytes); |
| | | const file = File([uint8Array], 'a.dwg', { type:'application/x-dwg' }) |
| | | downloadFile(file); |
| | | } catch (error) { |
| | | console.error('解析Java字节数组字符串时出错:', error); |
| | | throw new Error('无效的Java字节数组格式'); |
| | | } |
| | | } |
| | | |
| | | |
| | | const loadSupportedFormats = async () => { |
| | |
| | | } |
| | | request.post(`/orderFile/updateOrderFileByOrderNumber/${props.orderId}/${props.rowIndex.orderNumber}`,data).then(res=>{ |
| | | if (res.code === '200') { |
| | | conversionResult.value = res.data |
| | | result.value = res.data |
| | | conversionResult.value = res.data.imageBase64 |
| | | uploadRef.value.clearFiles() |
| | | clearInterval(progressInterval) |
| | | progressPercentage.value = 100 |
| | |
| | | } |
| | | }) |
| | | } catch (error) { |
| | | console.error('保存失败:', error) |
| | | ElMessage.error('上传失败') |
| | | } finally { |
| | | loadingFormats.value = false |
| | | } |
| | |
| | | |
| | | |
| | | const handleFileChange = (file) => { |
| | | console.log(file.type) |
| | | if (!(file.raw.name.toLowerCase().endsWith('.dwg') || file.raw.name.toLowerCase().endsWith('.dxf'))) { |
| | | ElMessage.error('请选择DWG或DXF格式的文件') |
| | | uploadRef.value.clearFiles() |
| | |
| | | |
| | | const handleFileRemove = () => { |
| | | conversionResult.value = null |
| | | result.value = null |
| | | uploadRef.value.clearFiles() |
| | | } |
| | | |
| | | /*const handleConvert = async () => { |
| | | if (fileList.value.length === 0) { |
| | | ElMessage.warning('请先选择要上传的DWG文件') |
| | | return |
| | | } |
| | | |
| | | if (!form.format) { |
| | | ElMessage.warning('请选择输出格式') |
| | | return |
| | | } |
| | | |
| | | try { |
| | | converting.value = true |
| | | progressPercentage.value = 0 |
| | | progressStatus.value = '' |
| | | progressText.value = '准备转换...' |
| | | |
| | | // 模拟进度更新 |
| | | const progressInterval = setInterval(() => { |
| | | if (progressPercentage.value < 80) { |
| | | progressPercentage.value += 10 |
| | | progressText.value = `转换中... ${progressPercentage.value}%` |
| | | } |
| | | }, 500) |
| | | |
| | | const file = fileList.value[0].raw |
| | | //const response = await cadApi.convertDwgToImage(file, form.format) |
| | | const response = null |
| | | clearInterval(progressInterval) |
| | | progressPercentage.value = 100 |
| | | progressStatus.value = 'success' |
| | | progressText.value = '转换完成!' |
| | | |
| | | conversionResult.value = response.data |
| | | |
| | | ElMessage.success('文件转换成功!') |
| | | |
| | | } catch (error) { |
| | | progressStatus.value = 'exception' |
| | | progressText.value = '转换失败' |
| | | console.error('转换失败:', error) |
| | | } finally { |
| | | converting.value = false |
| | | } |
| | | }*/ |
| | | |
| | | const handleDownload = () => { |
| | | if (!conversionResult.value) return |
| | | |
| | | const link = document.createElement('a') |
| | | link.href = conversionResult.value.imageData |
| | | link.download = conversionResult.value.fileName |
| | | document.body.appendChild(link) |
| | | link.click() |
| | | document.body.removeChild(link) |
| | | |
| | | ElMessage.success('文件下载开始') |
| | | } |
| | | |
| | | const handleNewConversion = () => { |
| | | ElMessageBox.confirm('是否开始新的文件上传?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }).then(() => { |
| | | handleReset() |
| | | ElMessage.success('已重置,可以开始新的上传') |
| | | }) |
| | | } |
| | | |
| | | const handleReset = () => { |
| | | uploadRef.value.clearFiles() |
| | |
| | | progressStatus.value = '' |
| | | progressText.value = '' |
| | | form.format = 'png' |
| | | result.value = null |
| | | } |
| | | |
| | | const formatFileSize = (bytes) => { |
| | |
| | | <el-icon><Document /></el-icon> |
| | | DWG文件上传 |
| | | </span> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <!-- 文件上传区域 --> |
| | | <el-upload |
| | | v-if="!conversionResult" |
| | | ref="uploadRef" |
| | | class="upload-demo" |
| | | drag |
| | |
| | | </el-upload> |
| | | |
| | | <!-- 上传选项 --> |
| | | <div class="conversion-options"> |
| | | <div v-if="!conversionResult" class="conversion-options"> |
| | | |
| | | <div class="action-buttons"> |
| | | <el-button |
| | |
| | | > |
| | | <template #extra> |
| | | <div class="result-content"> |
| | | |
| | | <!-- 图片预览 --> |
| | | <div class="image-preview"> |
| | | <el-image |
| | |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | </el-image> |
| | | |
| | | </div> |
| | | |
| | | |
| | | |
| | | <!-- 操作按钮 --> |
| | | <!-- <div class="result-actions"> |
| | | <div class="result-actions"> |
| | | <el-button |
| | | @click='downloadFile' |
| | | type="primary" |
| | | @click="handleDownload" |
| | | :icon="Download" |
| | | > |
| | | 下载图片 |
| | | ><template #icon> |
| | | <el-icon><Download/></el-icon> |
| | | </template> |
| | | 下载 |
| | | </el-button> |
| | | <el-button |
| | | @click="handleNewConversion" |
| | | :icon="Plus" |
| | | > |
| | | 新的上传 |
| | | @click = 'deleteFile' |
| | | ><template #icon> |
| | | <el-icon><Delete /></el-icon> |
| | | </template> |
| | | 删除 |
| | | </el-button> |
| | | </div>--> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </el-result> |