refactor: refactor useUpload

src/hooks/useUploadFile.ts

@@ -5,6 +5,7 @@ import type { UploadFile, UploadProps, UploadRawFile, UploadInstance } from 'ele
 const useUploadFile = () => {
   const upload = ref<UploadInstance>()
   const fileList = ref<UploadFile[]>([])
+  const percentage = ref<number>(0)
 
   const onExceed: UploadProps['onExceed'] = (fileList) => {
     upload.value?.clearFiles()
@@ -13,10 +14,21 @@ const useUploadFile = () => {
     upload.value?.handleStart(file)
   }
 
+  const setPercentage = (n: number) => {
+    percentage.value = n
+  }
+
+  const onUploadProgress = (event: ProgressEvent) => {
+    setPercentage(Math.min(parseFloat(((((event.loaded / event.total) * 10000) | 0) / 100).toFixed(2)), 99))
+  }
+
   return {
     upload,
     fileList,
     onExceed,
+    percentage,
+    setPercentage,
+    onUploadProgress,
   }
 }
 

src/modules/admin-data/marking/index.vue

@@ -56,18 +56,13 @@ import useVW from '@/hooks/useVW'
 import type { FormGroup, EpFormItem, EpFormRules } from 'global-type'
 import type { ExtractApiParams } from 'api-type'
 
-const { fileList, upload, onExceed } = useUploadFile()
+const { fileList, upload, percentage, setPercentage, onExceed, onUploadProgress } = useUploadFile()
 
 const fileName = computed(() => fileList.value?.[0]?.name)
 
 const { fetch, loading } = useFetch('importMarkingData', { onUploadProgress })
 
 const showProgress = ref(false)
-const percentage = ref<number>(0)
-
-function onUploadProgress(event: ProgressEvent) {
-  percentage.value = Math.min(parseFloat(((((event.loaded / event.total) * 10000) | 0) / 100).toFixed(2)), 99)
-}
 
 const { subjectList, mainQuestionList } = useOptions(['subject', 'question'])
 
@@ -155,12 +150,12 @@ async function onSubmit() {
     if (valid) {
       showProgress.value = true
       await fetch(model)
-      percentage.value = 100
+      setPercentage(100)
       ElMessage.success(`导入成功`)
     }
   } catch (error) {
     showProgress.value = false
-    percentage.value = 0
+    setPercentage(0)
     console.error(error)
   }
 }

src/modules/admin-data/paper/components/rf.vue

@@ -49,16 +49,13 @@ import useVW from '@/hooks/useVW'
 import type { FormGroup, EpFormItem } from 'global-type'
 import type { ExtractApiParams } from 'api-type'
 
-const { fetch: getImportFilePath, result: filePath } = useFetch('getImportFilePath')
+const showProgress = ref(false)
 
-const { fetch, loading } = useFetch('importRfPaper', { onUploadProgress })
+const { fileList, upload, percentage, setPercentage, onExceed, onUploadProgress } = useUploadFile()
 
-const showProgress = ref(false)
-const percentage = ref<number>(0)
+const { fetch: getImportFilePath, result: filePath } = useFetch('getImportFilePath')
 
-function onUploadProgress(event: ProgressEvent) {
-  percentage.value = Math.min(parseFloat(((((event.loaded / event.total) * 10000) | 0) / 100).toFixed(2)), 99)
-}
+const { fetch, loading } = useFetch('importRfPaper', { onUploadProgress })
 
 const model = reactive<ExtractApiParams<'importRfPaper'>>({
   file: void 0,
@@ -83,8 +80,6 @@ const { subjectList, mainQuestionList } = useOptions(['subject', 'question'])
 
 const { formRef, elFormRef, defineColumn, _ } = useForm()
 
-const { fileList, upload, onExceed } = useUploadFile()
-
 const fileName = computed(() => fileList.value?.[0]?.name)
 
 watch(
@@ -159,12 +154,12 @@ async function onSubmit() {
     if (valid) {
       showProgress.value = true
       await fetch(model)
-      percentage.value = 100
+      setPercentage(100)
       ElMessage.success(`导入成功`)
     }
   } catch (error) {
     showProgress.value = false
-    percentage.value = 0
+    setPercentage(0)
     console.error(error)
   }
 }

src/modules/admin-data/paper/components/sample.vue

@@ -49,16 +49,13 @@ import useVW from '@/hooks/useVW'
 import type { FormGroup, EpFormItem } from 'global-type'
 import type { ExtractApiParams } from 'api-type'
 
-const { fetch: getImportFilePath, result: filePath } = useFetch('getImportFilePath')
+const showProgress = ref(false)
 
-const { fetch, loading } = useFetch('importSamplePaper', { onUploadProgress })
+const { fileList, upload, percentage, setPercentage, onExceed, onUploadProgress } = useUploadFile()
 
-const showProgress = ref(false)
-const percentage = ref<number>(0)
+const { fetch: getImportFilePath, result: filePath } = useFetch('getImportFilePath')
 
-function onUploadProgress(event: ProgressEvent) {
-  percentage.value = Math.min(parseFloat(((((event.loaded / event.total) * 10000) | 0) / 100).toFixed(2)), 99)
-}
+const { fetch, loading } = useFetch('importSamplePaper', { onUploadProgress })
 
 const model = reactive<ExtractApiParams<'importSamplePaper'>>({
   file: void 0,
@@ -85,8 +82,6 @@ const { subjectList, mainQuestionList } = useOptions(['subject', 'question'])
 
 const { formRef, elFormRef, defineColumn, _ } = useForm()
 
-const { fileList, upload, onExceed } = useUploadFile()
-
 const fileName = computed(() => fileList.value?.[0]?.name)
 
 watch(
@@ -174,12 +169,12 @@ async function onSubmit() {
     if (valid) {
       showProgress.value = true
       await fetch(model)
-      percentage.value = 100
+      setPercentage(100)
       ElMessage.success(`导入成功`)
     }
   } catch (error) {
     showProgress.value = false
-    percentage.value = 0
+    setPercentage(0)
     console.error(error)
   }
 }

src/modules/admin-data/paper/components/standard.vue

@@ -43,16 +43,13 @@ import useVW from '@/hooks/useVW'
 import type { FormGroup, EpFormItem } from 'global-type'
 import type { ExtractApiParams } from 'api-type'
 
-const { fetch: getImportFilePath, result: filePath } = useFetch('getImportFilePath')
+const showProgress = ref(false)
 
-const { fetch, loading } = useFetch('importMarkStandard', { onUploadProgress })
+const { fileList, upload, percentage, setPercentage, onExceed, onUploadProgress } = useUploadFile()
 
-const showProgress = ref(false)
-const percentage = ref<number>(0)
+const { fetch: getImportFilePath, result: filePath } = useFetch('getImportFilePath')
 
-function onUploadProgress(event: ProgressEvent) {
-  percentage.value = Math.min(parseFloat(((((event.loaded / event.total) * 10000) | 0) / 100).toFixed(2)), 99)
-}
+const { fetch, loading } = useFetch('importMarkStandard', { onUploadProgress })
 
 const model = reactive<ExtractApiParams<'importMarkStandard'>>({
   file: void 0,
@@ -75,8 +72,6 @@ const { subjectList, mainQuestionList } = useOptions(['subject', 'question'])
 
 const { formRef, elFormRef, defineColumn, _ } = useForm()
 
-const { fileList, upload, onExceed } = useUploadFile()
-
 const fileName = computed(() => fileList.value?.[0]?.name)
 
 watch(
@@ -137,12 +132,12 @@ async function onSubmit() {
     if (valid) {
       showProgress.value = true
       await fetch(model)
-      percentage.value = 100
+      setPercentage(100)
       ElMessage.success(`导入成功`)
     }
   } catch (error) {
     showProgress.value = false
-    percentage.value = 0
+    setPercentage(0)
     console.error(error)
   }
 }