style：设备台账-生产日期/入厂日期不必填、资料上传添加loading

src/components/UploadFile/src/UploadFile.vue

@@ -79,7 +79,7 @@ import { UploadFile } from 'element-plus/es/components/upload/src/upload'
 defineOptions({ name: 'UploadFile' })
 
 const message = useMessage() // 消息弹窗
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'uploading-change'])
 
 const props = defineProps({
   modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
@@ -97,10 +97,32 @@ const uploadRef = ref<UploadInstance>()
 const uploadList = ref<UploadUserFile[]>([])
 const fileList = ref<UploadUserFile[]>([])
 const uploadNumber = ref<number>(0)
+const uploadPendingCount = ref<number>(0)
 const nameMap = ref<Record<string, string>>({})
 
 const { uploadUrl, httpRequest } = useUpload()
 
+const emitUploadingChange = () => {
+  emit('uploading-change', uploadPendingCount.value > 0)
+}
+
+const finalizeUploadBatch = () => {
+  if (uploadList.value.length) {
+    fileList.value.push(...uploadList.value)
+    uploadList.value = []
+    emitUpdateModelValue()
+  }
+  uploadNumber.value = 0
+}
+
+const finishSingleUpload = () => {
+  uploadPendingCount.value = Math.max(uploadPendingCount.value - 1, 0)
+  if (uploadPendingCount.value === 0) {
+    finalizeUploadBatch()
+  }
+  emitUploadingChange()
+}
+
 // 文件上传之前判断
 const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
   if (fileList.value.length >= props.limit) {
@@ -126,6 +148,9 @@ const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
   }
   message.success('正在上传文件，请稍候...')
   uploadNumber.value++
+  uploadPendingCount.value++
+  emitUploadingChange()
+  return true
 }
 // 处理上传的文件发生变化
 // const handleFileChange = (uploadFile: UploadFile): void => {
@@ -153,6 +178,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any, uploadFile): void
   const url = getUrlFromRes(res)
   if (!url) {
     message.error('上传返回数据异常')
+    finishSingleUpload()
     return
   }
   const name = getNameFromRes(res, url)
@@ -165,12 +191,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any, uploadFile): void
     fileList.value.splice(index, 1)
   }
   uploadList.value.push({ name, url })
-  if (uploadList.value.length === uploadNumber.value) {
-    fileList.value.push(...uploadList.value)
-    uploadList.value = []
-    uploadNumber.value = 0
-    emitUpdateModelValue()
-  }
+  finishSingleUpload()
 }
 // 文件数超出提示
 const handleExceed: UploadProps['onExceed'] = (): void => {
@@ -179,6 +200,7 @@ const handleExceed: UploadProps['onExceed'] = (): void => {
 // 上传错误提示
 const excelUploadError: UploadProps['onError'] = (): void => {
   message.error('导入数据失败，请您重新上传！')
+  finishSingleUpload()
 }
 // 删除上传文件
 const handleRemove = (file: UploadFile) => {
@@ -293,6 +315,10 @@ watch(
   (val: string | string[]) => {
     if (!val) {
       fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
+      uploadList.value = []
+      uploadNumber.value = 0
+      uploadPendingCount.value = 0
+      emitUploadingChange()
       return
     }
 

src/views/mes/deviceledger/DeviceLedgerForm.vue

@@ -1,6 +1,13 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="920px">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px" v-loading="formLoading">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+      v-loading="formLoading || fileUploading"
+      element-loading-text="资料上传中，请稍候"
+    >
       <el-row :gutter="16">
         <!-- <el-col :span="24">
           <el-form-item label="资产编号" prop="id">
@@ -116,15 +123,14 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')" prop="productionDate" required>
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')" prop="productionDate">
             <el-date-picker v-model="formData.productionDate" type="date" value-format="YYYY-MM-DD"
               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderProductionDate')" class="!w-full" />
           </el-form-item>
         </el-col>
 
         <el-col :span="8">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate"
-            required>
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate">
             <el-date-picker v-model="formData.factoryEntryDate" type="date" value-format="YYYY-MM-DD"
               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderFactoryEntryDate')" class="!w-full" />
           </el-form-item>
@@ -193,7 +199,12 @@
 
         <el-col :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.fileUrl')" prop="fileUrl">
-            <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="9" />
+            <UploadFile
+              :is-show-tip="false"
+              v-model="formData.fileUrl"
+              :limit="9"
+              @uploading-change="handleFileUploadingChange"
+            />
           </el-form-item>
         </el-col>
         <el-col v-if="formType === 'update'" :span="24">
@@ -219,7 +230,7 @@
       </el-row>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading || fileUploading">{{ t('common.ok') }}</el-button>
       <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
     </template>
   </Dialog>
@@ -377,6 +388,7 @@ const bjSelectedIds = ref<number[]>([])
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const fileUploading = ref(false)
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const deviceList = ref<DeviceVO[]>([]) // 列表
 const list = ref<CriticalComponentVO[]>([])
@@ -500,7 +512,7 @@ const initFormData = () => ({
   remark: undefined,
   componentIds: [] as number[],
   beijianIds: [] as number[],
-  fileUrl: undefined,
+  fileUrl: '',
   qrcodeUrl: undefined,
   templateJson: undefined,
   sort: undefined,
@@ -538,12 +550,14 @@ const formRules = reactive<FormRules>({
   deviceCode: [{ validator: validateDeviceCode, trigger: ['blur', 'change'] }],
   deviceName: [{ required: true, message: t('EquipmentManagement.EquipmentLedger.placeholderDeviceName'), trigger: 'blur' }],
   deviceType: [{ required: true, message: t('EquipmentManagement.EquipmentLedger.placeholderDeviceType'), trigger: 'change' }],
-  ratedCapacity: [{ validator: validateScheduledRequired('额定产能'), trigger: ['blur', 'change'] }],
-  productionDate: [{ required: true, message: t('EquipmentManagement.EquipmentLedger.placeholderProductionDate'), trigger: 'change' }],
-  factoryEntryDate: [{ required: true, message: t('EquipmentManagement.EquipmentLedger.placeholderFactoryEntryDate'), trigger: 'change' }]
+  ratedCapacity: [{ validator: validateScheduledRequired('额定产能'), trigger: ['blur', 'change'] }]
 })
 const formRef = ref() // 表单 Ref
 
+const handleFileUploadingChange = (uploading: boolean) => {
+  fileUploading.value = uploading
+}
+
 watch(
   () => formData.value.isScheduled,
   () => {
@@ -930,6 +944,10 @@ const bjToggleSelection = () => {
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
+  if (fileUploading.value) {
+    message.warning('资料上传中，请等待上传完成后再提交')
+    return
+  }
   // 校验表单
   await formRef.value.validate()
   // 提交请求
@@ -1041,6 +1059,7 @@ const setBJDefaultSelections = () => {
 
 /** 重置表单 */
 const resetForm = () => {
+  fileUploading.value = false
   formData.value = initFormData()
   formRef.value?.resetFields()
 }