修改导卡进度定时器问题

src/components/upload/index.vue

@@ -128,6 +128,7 @@ watchEffect(() => {
   } else {
     fileList.value = [];
   }
+
 })
 
 onMounted(() => {

src/views/order/BuyCard/detaile.vue

@@ -75,10 +75,10 @@
     <!-- 分配卡号 -->
     <a-modal v-model:visible="showCard" :title="$t('order.AllocationCardNumber')"
         @cancel="closeModal(showCard, FormDataList)" @before-ok="showCard = false" :okText="$t('form.Confirm')"
-        :cancelText="$t('form.Cancel')">
+        :cancelText="$t('form.Cancel')" unmount-on-close>
         <div style="display: flex;justify-content: space-between;">
             <div>
-                <Upload listType="" minx="1" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false">
+                <Upload listType="" minx="1" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false" v-if="showCard">
                 </Upload>
                 <span style="color: #ccc;margin-top: 10px;display: inline-block;">请上传.xlsx文件</span>
             </div>
@@ -111,6 +111,7 @@ const props = defineProps({
 const modelValue = toRef(props, 'modelValue')
 const FormDataList = toRef(props, 'FormDataList')
 const emit = defineEmits(['update:modelValue', 'submit'])
+
 const state = ref({
     tariffForm: {},
     showCard: false,
@@ -119,102 +120,131 @@ const state = ref({
     res3: [],
     userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
     show: false,
-    schedule: 0,// 进度
+    schedule: 0, // 进度
     ids: null
 })
+
 const { tariffForm, showCard, res1, res2, res3, userType, show, schedule, ids } = toRefs(state.value)
-const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' }, { title: t('order.CardStatus'), dataIndex: 'status' }, { title: t('order.CreationTime'), dataIndex: 'createdAt' }
+const columnsDetail = [
+    { title: 'ICCID', dataIndex: 'iccid' },
+    { title: t('order.CardStatus'), dataIndex: 'status' },
+    { title: t('order.CreationTime'), dataIndex: 'createdAt' }
 ]
+
 const dataDetail = ref([])
-// 定时器ID
 let timer;
 
-// 分配卡号
-const customRequest = (options) => {
+// 分配卡号并开始进度监控
+const customRequest = async (options) => {
     const formData = new FormData();
-    formData.append('file', options.fileItem.file);  // 这里将文件添加到 FormDataList 中
+    formData.append('file', options.fileItem.file); // 文件
     formData.append('orderId', FormDataList.value.id);
-    DistributionCard(formData).then(res => {
-        if (res.code == 200) {
-            Message.success(res.message)
-            showCard.value = false
-            CardProgress()
-        }
-    })
-}
 
-const cancel = () => {
-    emit('update:modelValue', false)
+    const res = await DistributionCard(formData);
+    if (res.code === 200) {
+        Message.success(res.message);
+        showCard.value = false;
+        
+        const progressRes = await GuideCardProgress({ id: FormDataList.value.id });
+        handleProgressResponse(progressRes);
+    }
 }
 
-const closeModal = () => {
-    showCard.value = false
-}
+// 关闭弹窗
+const cancel = () => emit('update:modelValue', false);
+const closeModal = () => showCard.value = false;
 
+// 监听 FormDataList 的变化
 watch(() => FormDataList.value, val => {
-    if (Object.keys(val).length === 0) return
-    ids.value = val.id
-    AcquireOrdertariff({ id: val.trafficId }).then(res => {
-        tariffForm.value = res.data
-        tariffForm.value.billingcycleName = res1.value.filter(val => val.value == res.data.billingCycle)[0]?.label;
-        tariffForm.value.billingMethodName = res2.value.filter(val => val.value == res.data.billingMethod)[0]?.label;
-        tariffForm.value.TariffInfomr = res.data.trafficBilling + '/' + res.data.trafficBillingType
-        tariffForm.value.pricingName = tariffForm.value.pricing !== '' ? tariffForm.value.pricing + '/' + res3.value.filter(val => val.value == res.data.currency)[0]?.label : '';
-    })
-    ReturntheOrderCard({ id: val.id }).then(res => {
-        dataDetail.value = (res.data || []).map(res => ({ ...res, status: res.status == 1 ? t('order.normal') : t('order.unsubscribe') }))
-    })
-}, { immediate: true })
+    if (Object.keys(val).length === 0) return;
+
+    ids.value = val.id;
+    fetchTariffData(val.trafficId);
+    fetchOrderCardData(val.id);
+}, { immediate: true });
 
-const DownloadSampleFile = () => {
-    // 下载示例文件
-    downloadFile(['ICCID'], [['8968099000011939']])
+// 下载示例文件
+const DownloadSampleFile = () => downloadFile(['ICCID'], [['8968099000011939']]);
+
+// 获取和处理订单资费数据
+const fetchTariffData = async (trafficId) => {
+    const res = await AcquireOrdertariff({ id: trafficId });
+    tariffForm.value = res.data;
+    tariffForm.value.billingcycleName = res1.value.find(item => item.value === res.data.billingCycle)?.label;
+    tariffForm.value.billingMethodName = res2.value.find(item => item.value === res.data.billingMethod)?.label;
+    tariffForm.value.TariffInfomr = `${res.data.trafficBilling}/${res.data.trafficBillingType}`;
+    tariffForm.value.pricingName = res.data.pricing ? `${res.data.pricing}/${res3.value.find(item => item.value === res.data.currency)?.label}` : '';
 }
 
-// 导卡进度
-const CardProgress = async () => {
-    let res = await GuideCardProgress({ id: FormDataList.value.id })
-    if (res.code === 200) {
-        show.value = res.data !== 0 && res.data !== 100;
-        if (res.data !== 100) {
-            schedule.value = res.data;
-            clearSchedule(schedule.value)
-        }else if(res.data==0){
-            
+// 获取和处理订单卡信息
+const fetchOrderCardData = async (orderId) => {
+    const res = await ReturntheOrderCard({ id: orderId });
+    dataDetail.value = res.data?.map(item => ({
+        ...item, status: item.status === 1 ? t('order.normal') : t('order.unsubscribe')
+    })) || [];
+}
+
+// 处理导卡进度响应
+const handleProgressResponse = (progressRes) => {
+    if (progressRes.code === 200) {
+        show.value = progressRes.data !== 0 && progressRes.data !== 100;
+        schedule.value = progressRes.data;
+        if (progressRes.data === 100) {
+            clearInterval(timer);
+            getICCIDDetaile();
+        } else {
+            startProgressMonitor(progressRes.data);
         }
     }
 }
+
+// 启动定时器监控导卡进度
+function startProgressMonitor(initialProgress) {
+    if (timer) clearInterval(timer);
+
+    timer = setInterval(async () => {
+        const progressRes = await GuideCardProgress({ id: FormDataList.value.id });
+        if (progressRes.code === 200) {
+            show.value = progressRes.data !== 0 && progressRes.data !== 100;
+            if (progressRes.data === 100) {
+                clearInterval(timer);
+                getICCIDDetaile();
+            }
+            schedule.value = progressRes.data;
+        }
+    }, 5000); // 每10秒检查一次
+}
+
+// 获取 ICCID 详情
+const getICCIDDetaile = () => {
+    ReturntheOrderCard({ id: ids.value }).then(res => {
+        dataDetail.value = res.data?.map(item => ({
+            ...item, status: item.status === 1 ? t('order.normal') : t('order.unsubscribe')
+        })) || [];
+    });
+}
+
 // 监听导卡进度
-watch(() => modelValue.value, val => {
+watch(() => modelValue.value, (val) => {
     if (val) {
-        CardProgress()
+        CardProgress();
     } else {
         clearInterval(timer);
     }
-}, { immediate: true })
+}, { immediate: true });
 
-
-function clearSchedule(val) {
-    if (timer) {
-        clearInterval(timer);
-    }
-    timer = setInterval(() => {
-        CardProgress();
-        if (val === 100) {
-            clearInterval(timer);
-            ReturntheOrderCard({ id: ids.value }).then(res => {
-                dataDetail.value = (res.data || []).map(res => ({ ...res, status: res.status == 1 ? t('order.normal') : t('order.unsubscribe') }))
-            })
-        }
-    }, 10000);
+// 卡进度检查
+const CardProgress = async () => {
+    const res = await GuideCardProgress({ id: FormDataList.value.id });
+    handleProgressResponse(res);
 }
 
-
 onMounted(async () => {
-    res1.value = await Getdictionary('Billingcycle')
-    res2.value = await Getdictionary('billingMethod')
-    res3.value = await Getdictionary('currencyType')
-})
+    res1.value = await Getdictionary('Billingcycle');
+    res2.value = await Getdictionary('billingMethod');
+    res3.value = await Getdictionary('currencyType');
+});
+
 </script>
 <style scoped lang="less">
 .progress {