chenlu
8 小时以前 33dbc6a161554f3a897f9e9273feb4f2c1b47381
north-glass-erp/northglass-erp/src/components/sd/order/UploadPicture.vue
@@ -2,11 +2,13 @@
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"
import {useI18n} from "vue-i18n";
const { t } = useI18n()
const uploadRef = ref()
const fileList = ref([])
const converting = ref(false)
@@ -16,9 +18,11 @@
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
  orderId:null,
  state:null
})
const form = reactive({
@@ -26,15 +30,81 @@
})
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(t("basicData.msg.deleteSuccess"))
  })
}
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文件')
      ElMessage.warning(t("order.msg.pleaseUploadPicture1"))
      return
    }
    loadingFormats.value = true
@@ -42,28 +112,29 @@
    converting.value = true
    progressPercentage.value = 0
    progressStatus.value = ''
    progressText.value = '准备上传...'
    progressText.value = t("order.msg.pleaseUploadPicture2")
    // 模拟进度更新
    const progressInterval = setInterval(() => {
      if (progressPercentage.value < 80) {
        progressPercentage.value += 10
        progressText.value = `上传中... ${progressPercentage.value}%`
        progressText.value = t("order.msg.pleaseUploadPicture3")+progressPercentage.value+'%'
      }
    }, 500)
    const data ={
      file:fileList.value[0].raw
      file:fileList.value[0].raw,
      name:fileList.value[0].raw.name
    }
    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
        progressStatus.value = 'success'
        progressText.value = '上传完成!'
        progressText.value = t("order.msg.pleaseUploadPicture4")
        uploadRef.value.clearFiles()
        fileList.value = []
        setTimeout(() => {
@@ -73,106 +144,54 @@
      }
    })
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error(t("order.msg.pleaseUploadPicture5"))
  } finally {
    loadingFormats.value = false
  }
}
const fileTypeCheck = (file) => {
  const fileName = file.raw.name.toLowerCase();
  switch (true) {
    case /\.dwg$/.test(fileName):
    case /\.png$/.test(fileName):
    case /\.jpg$/.test(fileName):
      return true;
    default:
      return false;
  }
};
const handleFileChange = (file) => {
  if (!(file.raw.name.toLowerCase().endsWith('.dwg') || file.raw.name.toLowerCase().endsWith('.dxf'))) {
    ElMessage.error('请选择DWG或DXF格式的文件')
  const fileTypeCheckBoole = fileTypeCheck(file)
  if (!(fileTypeCheckBoole )) {
    //ElMessage.error('请选择DWG或DXF格式的文件')
    ElMessage.error(t("order.msg.pleaseUploadPicture6"))
    uploadRef.value.clearFiles()
    return
  }
  if (file.raw.size > 50 * 1024 * 1024) {
    ElMessage.error('文件大小不能超过50MB')
    ElMessage.error(t("order.msg.pleaseUploadPicture7"))
    uploadRef.value.clearFiles()
    return
  }
  fileList.value = [file]
  ElMessage.success(`已选择文件: ${file.name}`)
  ElMessage.success(t("order.msg.pleaseUploadPicture8")+file.name)
}
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()
@@ -182,6 +201,7 @@
  progressStatus.value = ''
  progressText.value = ''
  form.format = 'png'
  result.value = null
}
const formatFileSize = (bytes) => {
@@ -199,13 +219,15 @@
        <div class="card-header">
          <span class="header-title">
            <el-icon><Document /></el-icon>
            DWG文件上传
            {{$t("order.msg.pleaseUploadPicture9")}}
          </span>
        </div>
      </template>
      <!-- 文件上传区域 -->
      <el-upload
          v-if="!conversionResult"
          ref="uploadRef"
          class="upload-demo"
          drag
@@ -215,49 +237,49 @@
          :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>
          {{$t("order.msg.pleaseUploadPicture10")}} <em>{{$t("order.msg.pleaseUploadPicture11")}}</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            仅支持 .dwg 格式文件,且文件大小不超过50MB
            {{$t("order.msg.pleaseUploadPicture12")}}
          </div>
        </template>
      </el-upload>
      <!-- 上传选项 -->
      <div  class="conversion-options">
      <div v-if="!conversionResult"  class="conversion-options">
        <div class="action-buttons">
          <el-button
              type="primary"
              :loading="converting"
              @click="loadSupportedFormats"
              :disabled="!form.format"
              :disabled="!form.format || props.state !== 1 || converting"
          >
            <template #icon>
              <el-icon><MagicStick /></el-icon>
            </template>
            保存
            {{$t("basicData.save")}}
          </el-button>
          <el-button @click="handleReset"
                     :loading="converting">
                     :loading="converting"
                     :disabled="props.state !== 1 || converting">
            <template #icon>
              <el-icon><RefreshLeft /></el-icon>
            </template>
            重置
            {{$t("craft.reset")}}
          </el-button>
        </div>
      </div>
      <!-- 转换进度 -->
      <div v-if="converting" class="conversion-progress">
        <el-divider content-position="left">上传进度</el-divider>
        <el-divider content-position="left">{{$t("order.msg.pleaseUploadPicture13")}}</el-divider>
        <el-progress
            :percentage="progressPercentage"
            :status="progressStatus"
@@ -270,14 +292,15 @@
      <!-- 转换结果 -->
      <div v-if="conversionResult" class="conversion-result">
        <el-divider content-position="left">上传结果</el-divider>
        <el-divider content-position="left">{{$t("order.msg.pleaseUploadPicture14")}}</el-divider>
        <el-result
            icon="success"
            :sub-title="`文件已成功转格式`"
            :sub-title='t("order.msg.pleaseUploadPicture15")'
        >
          <template #extra>
            <div class="result-content">
              <!-- 图片预览 -->
              <div class="image-preview">
                <el-image
@@ -293,26 +316,30 @@
<!--                    </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>
                  {{$t("order.msg.pleaseUploadPicture16")}}
                </el-button>
                <el-button
                    @click="handleNewConversion"
                    :icon="Plus"
                >
                  新的上传
                    @click = 'deleteFile'
                    :disabled="props.state !== 1"
                ><template #icon>
                  <el-icon><Delete  /></el-icon>
                </template>
                  {{$t("basicData.delete")}}
                </el-button>
              </div>-->
              </div>
            </div>
          </template>
        </el-result>