入库附件信息上传失败文件提示

mes-ui/mes-ui-admin-vue3/src/views/heli/storage/StorageForm.vue

@@ -9,7 +9,7 @@
       <img src="/src/assets/imgs/status/statuszf.png" v-else-if="formData.status == 3" alt="" />
       <span v-else></span>
     </div>
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading" >
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
       <!--  基础信息   -->
       <el-card class="hl-card-info">
         <template #header>
@@ -28,8 +28,7 @@
               <el-col :span="24">
                 <el-form-item prop="stockInType" label="入库类型">
                   <el-select v-model="formData.stockInType" clearable style="width: 100%" @change="handleStockType" v-bind:disabled="ctrView || ctrSave">
-                    <el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_STORAGE_IN_TYPE)" :key="dict.value"
+                    <el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_STORAGE_IN_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value" />
-                      :label="dict.label" :value="dict.value" />
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -40,8 +39,7 @@
               <el-col :span="24">
                 <el-form-item prop="industry" label="单据状态">
                   <el-select v-model="formData.status" placeholder="下拉选择" clearable class="!w-700px" disabled>
-                    <el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_STORAGE_STATUS)" :key="dict.value"
+                    <el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_STORAGE_STATUS)" :key="dict.value" :label="dict.label" :value="dict.value" />
-                      :label="dict.label" :value="dict.value" />
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -59,8 +57,7 @@
               <el-col :span="24">
                 <el-form-item label="单据日期" prop="createTime">
                   <!-- {{ formatDate(formData.createTime, 'YYYY-MM-DD HH:mm:ss') }} -->
-                  <el-date-picker v-model="formData.createTime" value-format="x" placeholder="单据日期" disabled
+                  <el-date-picker v-model="formData.createTime" value-format="x" placeholder="单据日期" disabled class="!w-400px" />
-                    class="!w-400px" />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -94,17 +91,14 @@
               <el-col>
                 <el-button class="hl-addbutton" type="primary" size="large" @click="onAddItem" v-bind:disabled="ctrView || ctrSave">新增</el-button>
               </el-col>
-              <el-form ref="matSubFormRef" :model="formData.matItemDOList" :rules="subFormRules"
+              <el-form ref="matSubFormRef" :model="formData.matItemDOList" :rules="subFormRules" v-loading="subFormLoading" label-width="0">
-                v-loading="subFormLoading" label-width="0">
                 <el-table :data="formData.matItemDOList" class="hl-table">
                   <el-table-column prop="cid" label="序号" min-width="80" align="center" fixed />
                   <el-table-column prop="matId" min-width="140" align="center">
                     <template #header> <span class="hl-table_header">*</span> 物料编码 </template>
                     <template #default="scope">
                       <el-form-item :prop="`${scope.$index}.matId`" :rules="subFormRules.matId" class="mb-0px!">
-                        <el-select v-model="scope.row.matId" placeholder="物料编码" :remote-method="remoteMatCodeSearch" v-bind:disabled="ctrView || ctrSave"
+                        <el-select v-model="scope.row.matId" placeholder="物料编码" :remote-method="remoteMatCodeSearch" v-bind:disabled="ctrView || ctrSave" remote-show-suffix remote clearable reserve-keyword filterable :loading="matSelectLoading" @change="(val) => handleMatCode(scope, val)" class="!w-180px">
-                          remote-show-suffix remote clearable reserve-keyword filterable :loading="matSelectLoading"
-                          @change="(val) => handleMatCode(scope, val)" class="!w-180px">
                           <el-option v-for="item in matList" :key="item.id" :label="item.code" :value="item.id" />
                         </el-select>
                       </el-form-item>
@@ -113,16 +107,14 @@
                   <el-table-column prop="matName" label="物料名称" min-width="120" align="center" />
                   <el-table-column prop="matType" label="物料类型" align="center" min-width="120">
                     <template #default="scope">
-                      <dict-tag :type="DICT_TYPE.HELI_MATERIAL_TYPE" :value="scope.row.matType"
+                      <dict-tag :type="DICT_TYPE.HELI_MATERIAL_TYPE" :value="scope.row.matType" v-if="scope.row.matType ? true : false" />
-                        v-if="scope.row.matType ? true : false" />
                     </template>
                   </el-table-column>
                   <el-table-column prop="matSpec" label="规格/型号" align="center" min-width="120" />
 
                   <el-table-column prop="matUnit" label="系统单位" align="center" min-width="120">
                     <template #default="scope">
-                      <dict-tag :type="DICT_TYPE.HELI_MATERIAL_UNIT" :value="scope.row.matUnit"
+                      <dict-tag :type="DICT_TYPE.HELI_MATERIAL_UNIT" :value="scope.row.matUnit" v-if="scope.row.matUnit ? true : false" />
-                        v-if="scope.row.matUnit ? true : false" />
                     </template>
                   </el-table-column>
                   <el-table-column prop="rgId" align="center" min-width="120">
@@ -140,8 +132,7 @@
                     <template #default="scope">
                       <el-form-item :prop="`${scope.$index}.pnId`" :rules="subFormRules.pnId" class="mb-0px!">
                         <el-select v-model="scope.row.pnId" placeholder="" style="width: 100%" v-bind:disabled="ctrView || ctrSave">
-                          <el-option v-for="dict in scope.row.pnlist" :key="dict.id" :label="dict.pn_name"
+                          <el-option v-for="dict in scope.row.pnlist" :key="dict.id" :label="dict.pn_name" :value="dict.id" />
-                            :value="dict.id" />
                         </el-select>
                       </el-form-item>
                     </template>
@@ -149,21 +140,20 @@
                   <el-table-column prop="storageOkQty" align="center" min-width="120">
                     <template #header> <span class="hl-table_header">*</span> 入库数量 </template>
                     <template #default="scope">
-                      <el-form-item :prop="`${scope.$index}.storageOkQty`" :rules="subFormRules.storageOkQty"
+                      <el-form-item :prop="`${scope.$index}.storageOkQty`" :rules="subFormRules.storageOkQty" class="mb-0px!">
-                        class="mb-0px!">
+                        <el-input v-model="scope.row.storageOkQty" v-bind:disabled="ctrView || ctrSave" />
-                        <el-input v-model="scope.row.storageOkQty" v-bind:disabled="ctrView || ctrSave"/>
                       </el-form-item>
                     </template>
                   </el-table-column>
                   <el-table-column prop="lotNo" label="批次号" align="center" min-width="120" v-if="false">
                     <template #default="scope">
-                      <el-input v-model="scope.row.lotNo" v-bind:disabled="ctrView || ctrSave"/>
+                      <el-input v-model="scope.row.lotNo" v-bind:disabled="ctrView || ctrSave" />
                     </template>
                   </el-table-column>
 
                   <el-table-column prop="projectNo" label="子项目编号" align="center" min-width="120">
                     <template #default="scope">
-                      <el-input v-model="scope.row.projectNo" v-bind:disabled="ctrView || ctrSave"/>
+                      <el-input v-model="scope.row.projectNo" v-bind:disabled="ctrView || ctrSave" />
                     </template>
                   </el-table-column>
                   <el-table-column prop="description" label="备注" align="center" min-width="180">
@@ -193,12 +183,10 @@
           <el-col>
             <el-card class="hl-incard">
               <el-col>
-                <el-upload ref="matUploadRef" :file-list="matUploadFiles" multiple :limit="10" :action="uploadUrl"
+                <el-upload ref="matUploadRef" :file-list="matUploadFiles" multiple :limit="10" :action="uploadUrl" :headers="{
-                  :headers="{
                     Authorization: 'Bearer ' + getAccessToken(),
                     'tenant-id': getTenantId()
-                  }" name="files" :show-file-list="false" :auto-upload="false" :data="matUploadData"
+                  }" name="files" :show-file-list="false" :auto-upload="false" :data="matUploadData" :on-change="matUploadChange" :on-error="UpError" class="upload-file-uploader">
-                  :on-change="matUploadChange" class="upload-file-uploader">
                   <el-button type="primary" v-bind:disabled="ctrView || ctrSave">
                     <Icon icon="ep:upload-filled" />上传
                   </el-button>
@@ -215,12 +203,10 @@
 
                 <el-table-column label="操作" align="center">
                   <template #default="scope">
-                    <el-button link type="danger" size="small" v-bind:disabled="ctrView || ctrDelete"
+                    <el-button link type="danger" size="small" v-bind:disabled="ctrView || ctrDelete" @click="handleDeleteAttachment(scope.$index, scope.row.businessFileType)">
-                      @click="handleDeleteAttachment(scope.$index, scope.row.businessFileType)" >
                       删除
                     </el-button>
-                    <el-button link type="primary" size="small" v-bind:disabled="ctrView || ctrDelete"
+                    <el-button link type="primary" size="small" v-bind:disabled="ctrView || ctrDelete" @click="downloadAttachment(scope.row.name, scope.row.url)">
-                      @click="downloadAttachment(scope.row.name, scope.row.url)">
                       下载
                     </el-button>
                   </template>
@@ -303,6 +289,7 @@ import * as PnApi from '@/api/heli/pn'
 import { deleteFile, downloadFile, getFilePage } from '@/api/infra/file'
 import download from '@/utils/download'
 import * as UserApi from '@/api/system/user'
+import { log } from 'console'
 
 const reload = inject('reload')
 
@@ -353,8 +340,6 @@ const subFormRules = reactive({
 
 // 提交、作废按钮数据状态提交
 const handleStatus = async (num) => {
-
- 
   // 校验表单
   await formRef.value.validate()
   if (formData.value.matItemDOList.length === 0) {
@@ -368,7 +353,7 @@ const handleStatus = async (num) => {
     return
   }
   // 提示用户是否保存入库信息
-  await message.confirm('确认'+(num==2?'提交':'作废')+'入库信息?')
+  await message.confirm('确认' + (num == 2 ? '提交' : '作废') + '入库信息?')
   formData.value.status = num
 
   //保存表单数据
@@ -387,7 +372,7 @@ const handleStatus = async (num) => {
   message.success(t('common.updateSuccess'))
 
   query.id = formData.value.id
-  query.type= 'update'
+  query.type = 'update'
   reload()
 }
 
@@ -405,6 +390,7 @@ const handleStockType = async (typeid) => {
 const uploadUrl = ref(import.meta.env.VITE_UPLOAD_BATCH_URL)
 const matUploadRef = ref()
 const matUploadFiles = ref<UploadUserFile[]>([])
+const failedAttachments = ref<UploadUserFile[]>([])
 const matUploadData = ref({
   businessType: 'STORAGE',
   businessId: formData.value.id,
@@ -415,21 +401,56 @@ const matUploadChange = (file, files) => {
   refreshAttachments(files, 'MATERIAL')
 }
 
+const failedAttachmentsName = ref()
+const UpError = (err, file, fileList) => {
+  // 当有上传错误时
+  if (err) {
+    // 将失败的附件添加到failedAttachments.value数组中
+    failedAttachments.value.push(file)
+    // console.log(failedAttachments.value);
+    failedAttachmentsName.value = failedAttachments.value.map((value) => value.name)
+  }
+}
+
+const openerror = () => {
+  setTimeout(() => {
+    // 弹出错误信息提示框
+    ElMessageBox.alert(
+      // 使用错误信息作为提示内容
+      `文件名为：${failedAttachmentsName.value}的上传失败`,
+      `文件格式不正确或网络问题 请您稍微再试`,
+      {
+        dangerouslyUseHTMLString: false, // 由于我们不是使用HTML字符串，所以这里设置为false
+        confirmButtonText: '知道了',
+        center: true
+      }
+    )
+  }, 1000)
+}
+
 const refreshAttachments = (files, type) => {
-  formData.value.attachments = formData.value.attachments.filter((value, index, array) => {
+  formData.value.attachments = formData.value.attachments.filter((value) => value.id)
-    return value.id
+
-  })
+  // 避免重复添加
-  for (let i = 0; i < files.length; i++) {
+  const newFiles = files.filter(
-    let file = files[i]
+    (file) => !formData.value.attachments.some((att) => att.name === file.name)
+  )
+
+  for (let i = 0; i < newFiles.length; i++) {
+    let file = newFiles[i]
     file.businessFileType = type
     file.createTime = new Date()
     formData.value.attachments.push(file)
   }
+
   // 排序
-  formData.value.attachments.sort((v1, v2) => {
+  formData.value.attachments.sort((v1, v2) => v1.createTime - v2.createTime)
-    return v1.createTime - v2.createTime > 0
+}
-  })
+
+const open = () => {
+  failedAttachmentsName.value = []
 }
+
 // 删除附件
 const handleDeleteAttachment = async (index, type) => {
   const deletedAttachments = formData.value.attachments.splice(index, 1)
@@ -487,14 +508,13 @@ const saveFormData = async () => {
     }
     await initStatus(formData.value.status)
     //formData.value = await StorageApi.getStorage(formData.value.id)
+
     message.success(t(commonResult))
   } finally {
     formLoading.value = false
   }
 }
 const submitForm = async () => {
-
-   
   // 校验表单
   await formRef.value.validate()
 
@@ -518,8 +538,9 @@ const submitForm = async () => {
   query.id = formData.value.id
   query.type = 'update'
   //页面重新加载
-    reload()
+  openerror()
 
+  reload()
 }
 
 var matCount = 1
@@ -563,7 +584,7 @@ const handleWh = async (wid) => {
   //-------------------库区全数据
   // 获得库区列表
   const dataRgList = await RgApi.getSimpList()
-  rgList.value = dataRgList.filter( rg => rg.wh_id == wid)
+  rgList.value = dataRgList.filter((rg) => rg.wh_id == wid)
 
   formData.value.matItemDOList.forEach((item) => {
     item.rgId = ''
@@ -575,7 +596,7 @@ const handleRg = async (scope) => {
   //-------------------库位全数据
   const dataPnList = await PnApi.getSimpList()
   scope.row.pnid = ''
-  scope.row.pnlist = dataPnList.filter( pn => pn.rg_id == scope.row.rgId)
+  scope.row.pnlist = dataPnList.filter((pn) => pn.rg_id == scope.row.rgId)
   //-------------------
 }
 
@@ -598,7 +619,7 @@ const remoteMatCodeSearch = async (code) => {
 // 选中物料编码时，列表中数据
 const handleMatCode = async (scope, matid) => {
   if (matid) {
-    const matVo = matSimpList.value.find( (item) => item.id == scope.row.matId)
+    const matVo = matSimpList.value.find((item) => item.id == scope.row.matId)
     scope.row.matId = matVo.id
     scope.row.matName = matVo.name
     scope.row.matCode = matVo.code
@@ -624,15 +645,15 @@ const btnSave = ref(true)
 const btnCancel = ref(false)
 
 // 根据页面动作和数据状态控制按钮输入框信息
-const initStatus = async (status) =>{
+const initStatus = async (status) => {
-  switch(status){
+  switch (status) {
     case 1:
       ctrView.value = false
       ctrSave.value = false
       ctrCancel.value = true
       ctrDelete.value = false
 
-      btnSave.value= true
+      btnSave.value = true
       btnCancel.value = false
       break
     case 2:
@@ -640,7 +661,7 @@ const initStatus = async (status) =>{
       ctrSave.value = true
       ctrCancel.value = false
       ctrDelete.value = true
-      btnSave.value= false
+      btnSave.value = false
       btnCancel.value = true
       break
     case 3:
@@ -648,20 +669,20 @@ const initStatus = async (status) =>{
       ctrSave.value = true
       ctrCancel.value = true
       ctrDelete.value = true
-      btnSave.value= false
+      btnSave.value = false
       btnCancel.value = false
       break
     default:
       break
   }
   // 查看页面时可操作控件禁用
-  if(query.type === 'review'){
+  if (query.type === 'review') {
     ctrView.value = true
     ctrSave.value = true
     ctrCancel.value = true
     ctrDelete.value = true
 
-      btnSave.value= false
+    btnSave.value = false
     btnCancel.value = false
   }
 }
@@ -669,7 +690,6 @@ const userList = ref<UserApi.UserVO[]>([]) // 用户列表
 const matSimpList = ref([]) // 物料基本信息列表
 /** 初始化 **/
 onMounted(async () => {
-
   // 页面标题展示
   dialogTitle.value = query.type === 'review' ? '查看' : t('action.' + query.type)
 
@@ -691,11 +711,11 @@ onMounted(async () => {
 
     // 获得库区列表
     const dataRgList = await RgApi.getSimpList()
-    rgList.value = dataRgList.filter( rg => rg.wh_id == formData.value.whId)
+    rgList.value = dataRgList.filter((rg) => rg.wh_id == formData.value.whId)
 
     // 获得库区列表
     const dataPnList = await PnApi.getSimpList()
-    pnList.value = dataPnList.filter( pn => pn.wh_id == formData.value.whId)
+    pnList.value = dataPnList.filter((pn) => pn.wh_id == formData.value.whId)
 
     // 获取库存物料列表信息
     const queryParamsMat = reactive({
@@ -709,7 +729,7 @@ onMounted(async () => {
     formData.value.matItemDOList.forEach((item) => {
       item.cid = matCount
       item.matId = matSimpList.value.find((record) => record.id === item.matId)?.id
-      item.matCode = matSimpList.value.find( (record) => record.id === item.matId)?.code
+      item.matCode = matSimpList.value.find((record) => record.id === item.matId)?.code
       item.matName = matSimpList.value.find((record) => record.id === item.matId)?.name
       item.matSpec = matSimpList.value.find((record) => record.id === item.matId)?.spec
       item.matType = matSimpList.value.find((record) => record.id === item.matId)?.material_type