廖井涛
7 天以前 a660db06773007b1be690e0674829c00a57aeb7b
north-glass-erp/northglass-erp/src/components/sd/order/UploadPicture.vue
@@ -6,7 +6,9 @@
} 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)
@@ -22,6 +24,8 @@
  orderId:null,
  state:null
})
let imgWidth = ref(null)
let imgHeight = ref(null)
const form = reactive({
  format: 'png'
@@ -38,6 +42,8 @@
    }
    result.value = res.data
    conversionResult.value = res.data.imageBase64
    imgWidth.value = res.data.width
    imgHeight.value = res.data.height
  })
}
@@ -45,7 +51,7 @@
  request.post(`/orderFile/deleteOrderNumberFile/${props.orderId}/${props.rowIndex.orderNumber}`).then(res=>{
    result.value = null
    conversionResult.value = null
    ElMessage.success("删除成功")
    ElMessage.success(t("basicData.msg.deleteSuccess"))
  })
}
@@ -102,27 +108,45 @@
const loadSupportedFormats = async () => {
  try {
    if (fileList.value.length === 0) {
      ElMessage.warning('请先选择要上传的DWG文件')
      ElMessage.warning(t("order.msg.pleaseUploadPicture1"))
      return
    }
    if(imgHeight.value ){
      const regex = /^(0|[1-9]\d{0,2}|1000)$/
      if(!regex.test(imgHeight.value)){
        ElMessage.warning(`height:0~1000`)
        return
      }
    }
    if(imgWidth.value ){
      const regex = /^(0|[1-9]\d{0,2}|1000)$/
      if(!regex.test(imgWidth.value)){
        ElMessage.warning(`width:0~1000`)
        return
      }
    }
    loadingFormats.value = true
    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,
      width:imgWidth.value || 1000,
      height:imgHeight.value || 700,
    }
    request.post(`/orderFile/updateOrderFileByOrderNumber/${props.orderId}/${props.rowIndex.orderNumber}`,data).then(res=>{
      if (res.code === '200') {
@@ -132,7 +156,7 @@
        clearInterval(progressInterval)
        progressPercentage.value = 100
        progressStatus.value = 'success'
        progressText.value = '上传完成!'
        progressText.value = t("order.msg.pleaseUploadPicture4")
        uploadRef.value.clearFiles()
        fileList.value = []
        setTimeout(() => {
@@ -142,32 +166,43 @@
      }
    })
  } catch (error) {
    ElMessage.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) => {
  console.log(file)
  if (!(file.raw.name.toLowerCase().endsWith('.dwg') )) {
  const fileTypeCheckBoole = fileTypeCheck(file)
  if (!(fileTypeCheckBoole )) {
    //ElMessage.error('请选择DWG或DXF格式的文件')
    ElMessage.error('请选择DWG格式的文件')
    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 = () => {
@@ -206,7 +241,7 @@
        <div class="card-header">
          <span class="header-title">
            <el-icon><Document /></el-icon>
            DWG文件上传
            {{$t("order.msg.pleaseUploadPicture9")}}
          </span>
        </div>
@@ -224,17 +259,34 @@
          :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
          <div class="el-upload__tip" style="width: 30%;margin-left: 35%">
            <el-row>
              <el-col :span="12">
                <el-input
                    v-model.number="imgWidth"
                    placeholder="宽"/>
              </el-col>
              <el-col :span="12">
                <el-input
                    v-model.number="imgHeight"
                    placeholder="高"/>
              </el-col>
            </el-row>
          </div>
          <div class="el-upload__tip">
            {{$t("order.msg.pleaseUploadPicture12")}}
          </div>
        </template>
      </el-upload>
@@ -251,7 +303,7 @@
            <template #icon>
              <el-icon><MagicStick /></el-icon>
            </template>
            保存
            {{$t("basicData.save")}}
          </el-button>
          <el-button @click="handleReset"
@@ -260,14 +312,14 @@
            <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"
@@ -280,11 +332,11 @@
      <!-- 转换结果 -->
      <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">
@@ -295,7 +347,7 @@
                    :src="conversionResult"
                    :preview-src-list="[conversionResult]"
                    fit="contain"
                    style="max-height: 600px;"
                    :style="{width: `${imgWidth}px`, height: `${imgHeight}px`}"
                >
<!--                  <template #error>-->
<!--                    <div class="image-slot">-->
@@ -317,7 +369,7 @@
                ><template #icon>
                  <el-icon><Download/></el-icon>
                </template>
                  下载
                  {{$t("order.msg.pleaseUploadPicture16")}}
                </el-button>
                <el-button
                    @click = 'deleteFile'
@@ -325,7 +377,7 @@
                ><template #icon>
                  <el-icon><Delete  /></el-icon>
                </template>
                  删除
                  {{$t("basicData.delete")}}
                </el-button>
              </div>
            </div>
@@ -406,6 +458,7 @@
  margin: 20px 0;
  display: flex;
  justify-content: center;
  overflow: auto;
}
.file-info {