<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import {
|
Document, UploadFilled, MagicStick, RefreshLeft,
|
Download, Plus, Picture, Refresh, Delete
|
} from '@element-plus/icons-vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import request from "@/utils/requestByFile"
|
|
const uploadRef = ref()
|
const fileList = ref([])
|
const converting = ref(false)
|
const progressPercentage = ref(0)
|
const progressStatus = ref('')
|
const progressText = ref('')
|
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
|
})
|
|
const form = reactive({
|
format: 'png'
|
})
|
|
onMounted(() => {
|
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 = new Uint8Array(bytes);
|
const file = new File([uint8Array], `${props.orderId}-${props.rowIndex.orderNumber}.dwg`, { type:'application/x-dwg' })
|
|
const url = URL.createObjectURL(file);
|
// 创建下载链接
|
const a = document.createElement('a');
|
a.href = url;
|
a.download = file.name;
|
a.style.display = 'none';
|
|
// 添加到DOM并触发点击
|
document.body.appendChild(a);
|
a.click();
|
|
// 清理资源
|
setTimeout(() => {
|
document.body.removeChild(a);
|
URL.revokeObjectURL(url);
|
}, 100);
|
} catch (error) {
|
console.error('解析Java字节数组字符串时出错:', error);
|
throw new Error('无效的Java字节数组格式');
|
}
|
}
|
|
|
const loadSupportedFormats = async () => {
|
try {
|
if (fileList.value.length === 0) {
|
ElMessage.warning('请先选择要上传的DWG文件')
|
return
|
}
|
loadingFormats.value = true
|
|
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 data ={
|
file:fileList.value[0].raw
|
}
|
request.post(`/orderFile/updateOrderFileByOrderNumber/${props.orderId}/${props.rowIndex.orderNumber}`,data).then(res=>{
|
if (res.code === '200') {
|
result.value = res.data
|
conversionResult.value = res.data.imageBase64
|
uploadRef.value.clearFiles()
|
clearInterval(progressInterval)
|
progressPercentage.value = 100
|
progressStatus.value = 'success'
|
progressText.value = '上传完成!'
|
uploadRef.value.clearFiles()
|
fileList.value = []
|
setTimeout(() => {
|
|
converting.value = false
|
},2000)
|
}
|
})
|
} catch (error) {
|
ElMessage.error('上传失败')
|
} finally {
|
loadingFormats.value = false
|
}
|
}
|
|
|
|
|
|
const handleFileChange = (file) => {
|
console.log(file)
|
if (!(file.raw.name.toLowerCase().endsWith('.dwg') )) {
|
//ElMessage.error('请选择DWG或DXF格式的文件')
|
ElMessage.error('请选择DWG格式的文件')
|
uploadRef.value.clearFiles()
|
return
|
}
|
|
if (file.raw.size > 50 * 1024 * 1024) {
|
ElMessage.error('文件大小不能超过50MB')
|
uploadRef.value.clearFiles()
|
return
|
}
|
fileList.value = [file]
|
ElMessage.success(`已选择文件: ${file.name}`)
|
}
|
|
const handleFileRemove = () => {
|
conversionResult.value = null
|
result.value = null
|
uploadRef.value.clearFiles()
|
}
|
|
|
|
|
|
const handleReset = () => {
|
uploadRef.value.clearFiles()
|
fileList.value = []
|
conversionResult.value = null
|
progressPercentage.value = 0
|
progressStatus.value = ''
|
progressText.value = ''
|
form.format = 'png'
|
result.value = null
|
}
|
|
const formatFileSize = (bytes) => {
|
if (bytes === 0) return '0 Bytes'
|
const k = 1024
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
}
|
</script>
|
<template>
|
<div class="file-upload-container">
|
<el-card class="upload-card" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span class="header-title">
|
<el-icon><Document /></el-icon>
|
DWG文件上传
|
</span>
|
|
</div>
|
</template>
|
|
<!-- 文件上传区域 -->
|
<el-upload
|
v-if="!conversionResult"
|
ref="uploadRef"
|
class="upload-demo"
|
drag
|
action=""
|
:auto-upload="false"
|
:on-change="handleFileChange"
|
:on-remove="handleFileRemove"
|
:file-list="fileList"
|
:limit="1"
|
:accept="'.dwg' || '.dxf' "
|
:disabled="converting"
|
>
|
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
|
<div class="el-upload__text">
|
拖拽DWG文件到此处或 <em>点击选择文件</em>
|
</div>
|
<template #tip>
|
<div class="el-upload__tip">
|
仅支持 .dwg 格式文件，且文件大小不超过50MB
|
</div>
|
</template>
|
</el-upload>
|
|
<!-- 上传选项 -->
|
<div v-if="!conversionResult" class="conversion-options">
|
|
<div class="action-buttons">
|
<el-button
|
type="primary"
|
:loading="converting"
|
@click="loadSupportedFormats"
|
:disabled="!form.format"
|
>
|
<template #icon>
|
<el-icon><MagicStick /></el-icon>
|
</template>
|
保存
|
</el-button>
|
|
<el-button @click="handleReset"
|
:loading="converting">
|
<template #icon>
|
<el-icon><RefreshLeft /></el-icon>
|
</template>
|
重置
|
</el-button>
|
</div>
|
</div>
|
|
<!-- 转换进度 -->
|
<div v-if="converting" class="conversion-progress">
|
<el-divider content-position="left">上传进度</el-divider>
|
<el-progress
|
:percentage="progressPercentage"
|
:status="progressStatus"
|
:stroke-width="8"
|
/>
|
<div class="progress-text">
|
{{ progressText }}
|
</div>
|
</div>
|
|
<!-- 转换结果 -->
|
<div v-if="conversionResult" class="conversion-result">
|
<el-divider content-position="left">上传结果</el-divider>
|
|
<el-result
|
icon="success"
|
:sub-title="`文件已成功转格式`"
|
>
|
<template #extra>
|
<div class="result-content">
|
|
<!-- 图片预览 -->
|
<div class="image-preview">
|
<el-image
|
:src="conversionResult"
|
:preview-src-list="[conversionResult]"
|
fit="contain"
|
style="max-height: 600px;"
|
>
|
<!-- <template #error>-->
|
<!-- <div class="image-slot">-->
|
<!-- <el-icon><Picture /></el-icon>-->
|
<!-- <div>图片加载失败</div>-->
|
<!-- </div>-->
|
<!-- </template>-->
|
</el-image>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
<div class="result-actions">
|
<el-button
|
@click='downloadFile'
|
type="primary"
|
><template #icon>
|
<el-icon><Download/></el-icon>
|
</template>
|
下载
|
</el-button>
|
<el-button
|
@click = 'deleteFile'
|
><template #icon>
|
<el-icon><Delete /></el-icon>
|
</template>
|
删除
|
</el-button>
|
</div>
|
</div>
|
</template>
|
</el-result>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
|
|
<style scoped>
|
.file-upload-container {
|
max-width: 800px;
|
margin: 0 auto;
|
padding: 20px;
|
}
|
|
.upload-card {
|
min-height: 600px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.header-title {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: 18px;
|
font-weight: bold;
|
}
|
|
:deep(.upload-demo) {
|
width: 100%;
|
}
|
|
:deep(.el-upload-dragger) {
|
width: 100%;
|
padding: 40px;
|
}
|
|
.conversion-options {
|
margin-top: 20px;
|
}
|
|
.action-buttons {
|
display: flex;
|
gap: 12px;
|
justify-content: center;
|
margin-top: 20px;
|
}
|
|
.conversion-progress {
|
margin-top: 20px;
|
}
|
|
.progress-text {
|
text-align: center;
|
margin-top: 8px;
|
color: #666;
|
font-size: 14px;
|
}
|
|
.conversion-result {
|
margin-top: 20px;
|
}
|
|
.result-content {
|
text-align: center;
|
}
|
|
.image-preview {
|
margin: 20px 0;
|
display: flex;
|
justify-content: center;
|
}
|
|
.file-info {
|
margin: 20px 0;
|
max-width: 400px;
|
margin-left: auto;
|
margin-right: auto;
|
}
|
|
.result-actions {
|
display: flex;
|
gap: 12px;
|
justify-content: center;
|
margin-top: 20px;
|
}
|
|
.image-slot {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 200px;
|
color: #909399;
|
}
|
|
.image-slot .el-icon {
|
font-size: 48px;
|
margin-bottom: 16px;
|
}
|
</style>
|
