update: 处理弱网环境请求慢异常加载问题

src/views/start/start.vue

@@ -186,7 +186,8 @@
               prop="biz_license_image"
             >
               <el-upload
-                ref="uploadRef"
+              :ref="(el)=>{ el && (uploadRefs.biz_license_image = el) }"
+                v-model:file-list="uploadFiles.biz_license_image"
                 multiple
                 :limit="1"
                 list-type="picture-card"
@@ -225,7 +226,8 @@
                 plain
                 v-if="
                   applyFormData.biz_license_image &&
-                  !applyFormData.biz_license_company
+                  !applyFormData.biz_license_company && 
+                  currentBbatchNo
                 "
                 @click="handleOcrText(currentBbatchNo, 'biz_license_image')"
                 >点击免填营业执照信息</el-button
@@ -360,7 +362,8 @@
               prop="legal_person_id_images"
             >
               <el-upload
-                ref="uploadRef"
+              :ref="(el)=>{ el && (uploadRefs.legal_person_id_images = el) }"
+                v-model:file-list="uploadFiles.legal_person_id_images"
                 :limit="1"
                 list-type="picture-card"
                 :auto-upload="true"
@@ -397,7 +400,8 @@
                 plain
                 v-if="
                   applyFormData.legal_person_id_images &&
-                  !applyFormData.legal_person_id_number
+                  !applyFormData.legal_person_id_number  &&
+                  currentBbatchNo
                 "
                 @click="
                   handleOcrText(currentBbatchNo, 'legal_person_id_images')
@@ -410,7 +414,8 @@
               prop="legal_person_id_images2"
             >
               <el-upload
-                ref="uploadRef"
+              :ref="(el)=>{ el && (uploadRefs.legal_person_id_images2 = el) }"
+                v-model:file-list="uploadFiles.legal_person_id_images2"
                 :limit="1"
                 list-type="picture-card"
                 :auto-upload="true"
@@ -498,7 +503,8 @@
               prop="individual_id_images"
             >
               <el-upload
-                ref="uploadRef"
+              :ref="(el)=>{ el && (uploadRefs.individual_id_images = el) }"
+                v-model:file-list="uploadFiles.individual_id_images"
                 :limit="1"
                 list-type="picture-card"
                 :auto-upload="true"
@@ -537,7 +543,8 @@
               prop="individual_id_images2"
             >
               <el-upload
-                ref="uploadRef"
+              :ref="(el)=>{ el && (uploadRefs.individual_id_images2 = el) }"
+                v-model:file-list="uploadFiles.individual_id_images2"
                 :limit="1"
                 list-type="picture-card"
                 :auto-upload="true"
@@ -634,7 +641,8 @@
           <div class="tit">结算信息</div>
           <el-form-item label="银行卡" prop="bank_image">
             <el-upload
-              ref="uploadRef"
+             :ref="(el)=>{ el && (uploadRefs.bank_image = el) }"
+              v-model:file-list="uploadFiles.bank_image"
               :limit="1"
               list-type="picture-card"
               :auto-upload="true"
@@ -663,7 +671,7 @@
             <el-button
               type="info"
               plain
-              v-if="applyFormData.bank_image && !applyFormData.account_number"
+              v-if="applyFormData.bank_image && !applyFormData.account_number && currentBbatchNo"
               @click="handleOcrText(currentBbatchNo, 'bank_image')"
               >点击免填卡号</el-button
             >
@@ -776,21 +784,27 @@ const loading = ref(false);
 const formRef = ref(null);
 const dialogVisible = ref(false);
 const dialogImageUrl = ref("");
-const bankNameSearchText = ref("");
-const selectedValue = ref([]);
-const value = ref([]);
 const cascaderOptions = ref([]);
 const cascaderOptions2 = ref(processData());
 const cityData2 = ref<CityDataStructure>();
 const cascaderOptions3 = ref();
-//hover触发选择
-const cascaderProps = ref({
-  value: "value",
-  label: "label",
-  children: "children",
-  expandTrigger: "hover" as const,
-});
 const bankList2 = ref([]);
+const uploadRefs = ref({
+  biz_license_image: null,
+  individual_id_images: null,
+  individual_id_images2: null,
+  legal_person_id_images: null,
+  legal_person_id_images2: null,
+  bank_image: null,
+});
+const uploadFiles = reactive({
+  biz_license_image: [],
+  individual_id_images: [],
+  individual_id_images2: [],
+  legal_person_id_images: [],
+  legal_person_id_images2: [],
+  bank_image: [],
+});
 
 let orcTimeout = 0;
 let currentFile = ref(null);
@@ -861,15 +875,15 @@ const applyFormData = reactive({
 });
 const optionsPermitType = [
   {
-    value2: "1",
+    value2: 1,
     label: "无需特殊资质",
   },
   {
-    value2: "2",
+    value2: 2,
     label: "需许可证资质",
   },
   {
-    value2: "3",
+    value2: 3,
     label: "需特许证件资质",
   },
 ];
@@ -1348,13 +1362,24 @@ const handlePictureCardPreview = (uploadFile) => {
   dialogVisible.value = true;
 };
 
-const getBatchNo = async (file, type) => {
+const getBatchNo = async (file, type, field) => {
   loading.value = true;
+  currentBbatchNo.value = "";
   const rsp = await batchNoApi(file, type).then((res) => {
-    return res;
-  });
     loading.value = false;
-  if (rsp.status == 200) {
+    return res;
+  }).catch(()=> {
+        loading.value = false;
+        const _uploadRef = uploadRefs.value[field]
+        if(_uploadRef){
+          _uploadRef.clearFiles()
+          uploadFiles[field] = []
+           cleanFile(field)
+        }
+        ElMessage.error('网络异常，请重试！')
+      });
+
+  if (rsp?.code==0 && rsp?.status == 200) {
     return rsp?.data;
   } else {
     return null;
@@ -1371,7 +1396,9 @@ const getOcrText = async (batchNo, type) => {
     clearTimeout(orcTimeout);
 
     orcTimeout = setTimeout(async () => {
-      const imgOcrRes = await imgOcrResultApi(formData);
+      const imgOcrRes = await imgOcrResultApi(formData).finally(()=> {
+        loading.value = false;
+      });
 
       formData = null;
       clearTimeout(orcTimeout);
@@ -1381,6 +1408,7 @@ const getOcrText = async (batchNo, type) => {
       } else {
         resolve(imgOcrRes?.data);
       }
+
       loading.value = false;
     }, 2000);
   });
@@ -1471,6 +1499,15 @@ const handleOcrText = async (batchNo, imgType) => {
   (formRef.value as any).validate();
 };
 
+const cleanFile = (field)=>{
+  if (field === "license_image") {
+        applyFormData[field]=[];
+      } else {
+        applyFormData[field] = "";
+      }
+      currentFile.value = null;
+}
+
 const handleUploadSuccess = async (response, file, fileList, field) => {
   if (response && response.status === 200 && response.code === 0) {
     if (response.data && response.data.url) {
@@ -1481,37 +1518,38 @@ const handleUploadSuccess = async (response, file, fileList, field) => {
       } else {
         applyFormData[field] = file.url;
       }
-      loading.value = false;
+
       currentFile.value = file.raw;
+      loading.value = false;
 
       switch (field) {
         case "biz_license_image":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.BUSINESS_LICENCE);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.BUSINESS_LICENCE, field);
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "legal_person_id_images":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_FRONT);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_FRONT, field);
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "legal_person_id_images2":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND, field);
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "individual_id_images":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_FRONT);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_FRONT, field);
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "individual_id_images2":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND, field);
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "bank_image":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.BANK_CARD);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.BANK_CARD, field);
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;