From 37bb2aac6fe2d856f06ff447d26163422c56024a Mon Sep 17 00:00:00 2001
From: guoyujie <guoyujie@ng.com>
Date: 星期一, 10 十一月 2025 11:22:19 +0800
Subject: [PATCH] 提交 文件上传代码
---
north-glass-erp/northglass-erp/src/components/sd/order/UploadPicture.vue | 443 +++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 410 insertions(+), 33 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/components/sd/order/UploadPicture.vue b/north-glass-erp/northglass-erp/src/components/sd/order/UploadPicture.vue
index dac7efb..36e5585 100644
--- a/north-glass-erp/northglass-erp/src/components/sd/order/UploadPicture.vue
+++ b/north-glass-erp/northglass-erp/src/components/sd/order/UploadPicture.vue
@@ -1,46 +1,423 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { UploadProps, UploadUserFile } from 'element-plus'
-const fileList = ref<UploadUserFile[]>([])
-const upload = ref()
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import {
+ Document, UploadFilled, MagicStick, RefreshLeft,
+ Download, Plus, Picture, Refresh
+} from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import request from "@/utils/requestByFile"
-const emits = defineEmits(['getUploadPicture'])
+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 props = defineProps({
+ rowIndex:null,
+ orderId:null
+})
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
- console.log(uploadFile, uploadFiles)
+const form = reactive({
+ format: 'png'
+})
+
+onMounted(() => {
+ //loadSupportedFormats()
+})
+
+
+
+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') {
+ conversionResult.value = res.data
+ 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) {
+ console.error('淇濆瓨澶辫触:', error)
+ } finally {
+ loadingFormats.value = false
+ }
}
-const handlePreview: UploadProps['onPreview'] = (file) => {
- console.log(file)
-}
-const handleChange = (uploadFile, uploadFiles) => {
- emits('getUploadPicture', uploadFile.name,uploadFile)
- upload.value.clearFiles()
+
+
+
+
+const handleFileChange = (file) => {
+ if (!(file.raw.name.toLowerCase().endsWith('.dwg') || file.raw.name.toLowerCase().endsWith('.dxf'))) {
+ ElMessage.error('璇烽�夋嫨DWG鎴朌XF鏍煎紡鐨勬枃浠�')
+ 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
+ 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()
+ fileList.value = []
+ conversionResult.value = null
+ progressPercentage.value = 0
+ progressStatus.value = ''
+ progressText.value = ''
+ form.format = 'png'
+}
+
+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>
- <el-upload
- v-model:file-list="fileList"
- ref="upload"
- class="upload-demo"
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
- :on-preview="handlePreview"
- :on-remove="handleRemove"
- :on-change="handleChange"
- list-type="picture"
- :auto-upload="false"
- >
- <el-button type="primary">Click to upload</el-button>
- <template #tip>
- <div class="el-upload__tip">
- DWG files with a size less than 10M
+ <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
+ 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 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>
- </template>
- </el-upload>
+
+ <!-- 杞崲杩涘害 -->
+ <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
+ type="primary"
+ @click="handleDownload"
+ :icon="Download"
+ >
+ 涓嬭浇鍥剧墖
+ </el-button>
+ <el-button
+ @click="handleNewConversion"
+ :icon="Plus"
+ >
+ 鏂扮殑涓婁紶
+ </el-button>
+ </div>-->
+ </div>
+ </template>
+ </el-result>
+ </div>
+ </el-card>
+ </div>
</template>
-<style scoped>
+
+<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>
\ No newline at end of file
--
Gitblit v1.8.0