上传离线文件添加上传进度条

src/views/govern/device/control/offLineDataImport/index.vue

@@ -4,22 +4,20 @@
         <!-- 上传文件列表 -->
         <div class="offline_data">
             <div class="offline_data_btn">
-                <el-button type="primary" @click="handleUpload" size="small" :disabled="offLineFileList.length == 0">
+                <el-button
+                    type="primary"
+                    @click="handleUpload"
+                    :loading="loading"
+                    size="small"
+                    :disabled="disableHandleUpload"
+                >
                     开始上传
                 </el-button>
-                <el-button type="primary" @click="removeAllFile" size="small" :disabled="offLineFileList.length == 0">
+                <el-button type="primary" @click="removeAllFile" size="small" :loading="loading" :disabled="offLineFileList.length == 0">
                     清空文件
                 </el-button>
             </div>
             <div class="offline_data_list">
-                <!-- <el-upload
-                    ref="upload"
-                    accept=".zip,.rar,.7z"
-                    action="#"
-                    :auto-upload="false"
-                    :on-change="handleFileChange"
-                > -->
-                <!-- <el-button slot="trigger" size="small" type="primary">选择ZIP文件</el-button> -->
                 <el-button
                     :loading="loading"
                     style="margin-left: 10px"
@@ -29,20 +27,35 @@
                 >
                     上传离线数据
                 </el-button>
-                <!-- </el-upload> -->
                 <div>
-                    <el-table :data="offLineFileList" style="width: 100%" height="280" border stripe>
+                    <el-table :data="offLineFileList" style="width: 100%" height="280" border stripe :key="updateKey">
                         <el-table-column prop="name" label="文件名" align="center"></el-table-column>
                         <el-table-column prop="webkitRelativePath" label="文件地址" align="center"></el-table-column>
-                        <el-table-column prop="status" label="状态" align="center" width="100">
+                        <el-table-column prop="status" label="状态" align="center" width="250">
                             <template #default="{ row }">
-                                {{ row.status == 0 ? '等待上传' : '上传成功' }}
+                                <el-progress v-if="row.status == 0" :percentage="0">
+                                    <el-button text>等待上传</el-button>
+                                </el-progress>
+                                <el-progress v-if="row.status == -1" :percentage="30" :indeterminate="true">
+                                    <el-button text>上传中...</el-button>
+                                </el-progress>
+                                <el-progress v-if="row.status == 1" status="success" :percentage="100">
+                                    <el-button text>上传成功</el-button>
+                                </el-progress>
                             </template>
                         </el-table-column>
                         <el-table-column label="操作" width="100" fixed="right" align="center">
                             <template #default="{ row }">
                                 <!-- <el-button size="small" @click="previewFile(row)">预览</el-button> -->
-                                <el-button size="small" type="danger" text @click="removeFile(row)">移除</el-button>
+                                <el-button
+                                    size="small"
+                                    :disabled="row.status == -1"
+                                    type="danger"
+                                    text
+                                    @click="removeFile(row)"
+                                >
+                                    移除
+                                </el-button>
                             </template>
                         </el-table-column>
                     </el-table>
@@ -58,89 +71,17 @@
     </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue'
 import JSZip from 'jszip'
 import { saveAs } from 'file-saver'
 import { ElMessageBox } from 'element-plus'
 import { uploadOffLineDataFile } from '@/api/cs-device-boot/EquipmentDelivery.ts'
-import { off } from 'process'
 const dialogVisible = ref(false)
-const selectedFile = ref(null)
-
 const loading = ref(false)
 const offLineFileList: any = ref([])
-//上传zip
+const disableHandleUpload = ref(true)
-const handleFileChange = (file: any, fileList: any) => {
+//上传离线数据
-    console.log(fileList, 'fileList555333222')
-    loading.value = true
-    JSZip.loadAsync(file.raw)
-        .then(zip => {
-            console.log(file.raw, '++++++++++++hahhahahabvggeiwtei哈哈')
-            offLineFileList.value = Object.keys(zip.files).map(name => ({ name }))
-            // Object.keys(zip.files).map(entry => {
-            //     console.log(entry, 'entryentryentryentryentry')
-            //     // return zips.file(entry).then((blob: any) => {
-            //         // 创建File对象
-            //         return new File(['file'], entry)
-            //     // })
-            // })
-            // console.log(zip.files, 'zip.fileszip.fileszip.fileszip.files')
-        })
-        .catch(error => {
-            console.error('解压错误:', error)
-            ElMessageBox.alert('解压错误: ' + error.message, '错误', { type: 'error' })
-        })
-        .finally(() => {
-            loading.value = false
-        })
-
-    const reader = new FileReader()
-
-    const zip = new JSZip()
-    reader.onload = e => {
-        console.log(e, '++++++++++++EEeeeEEEEEEEEE')
-        // 加载压缩包内容
-        zip.loadAsync(e.target.result).then(zip => {
-            console.log(e.target.result, '??????????')
-            // 获取压缩包内的文件
-            const files = Object.values(offLineFileList.value)
-                .map((entry: any) => {
-                    if (!entry.dir && entry.name) {
-                        // 将压缩包内的文件转换为Blob对象
-                        return zip
-                            .file(entry.name)
-                            .async('blob')
-                            .then(blob => {
-                                // 创建File对象
-                                return new File([blob], entry.name)
-                            })
-                    }
-                })
-                .filter(Boolean) // 过滤掉文件夹和未定义的文件
-
-            Promise.all(files).then(allFiles => {
-                // 这里你已经拿到了压缩包内所有文件的File对象数组
-                console.log(allFiles)
-            })
-        })
-    }
-
-    // 读取文件内容
-    reader.readAsArrayBuffer(file.raw)
-}
-const uploadChange = e => {
-    const formData = new FormData()
-    const file = e.target['files']
-    for (let i = 0; i < file.length; i++) {
-        formData.append('files', file[i])
-        console.log(file[i])
-        console.log(file[i].webkitRelativePath)
-    }
-    console.log(formData.getAll('files'), '++++++++++++++++')
-}
-const upload = ref()
 const submitUpload = e => {
-    // e.preventDefault()
     const input = document.createElement('input')
     input.type = 'file'
     input.setAttribute('allowdirs', 'true')
@@ -152,80 +93,61 @@ const submitUpload = e => {
     input.click()
     input.onchange = function (e) {
         const formData = new FormData()
-
-        // e.preventDefault()
         const file = e.target['files']
         for (let i = 0; i < file.length; i++) {
             formData.append('files', file[i])
-            console.log(file[i])
-            console.log(file[i].webkitRelativePath)
         }
-        console.log(formData.getAll('files'), '++++++++++++++++')
         offLineFileList.value = formData.getAll('files')
         offLineFileList.value.map((item: any) => {
             item.status = 0
         })
     }
+    disableHandleUpload.value = false
 }
 //清空文件
 const removeAllFile = () => {
     offLineFileList.value = []
+    disableHandleUpload.value = true
 }
 //移除文件
 const removeFile = async (file: any) => {
-    console.log(file, '移除文件指令')
     const delIndex = offLineFileList.value.findIndex((item: any) => {
         return item.webkitRelativePath == file.webkitRelativePath && item.name == file.name
     })
-    console.log(delIndex, '((((((()))))))')
     offLineFileList.value.splice(delIndex, 1)
     return
-    const zip = new JSZip()
-    // 假设有一个zip文件的ArrayBuffer数据
-    const zipBuffer = file
-
-    // 加载ZIP文件
-    // const jszip = await zip.loadAsync(zipBuffer)
-
-    // 删除指定文件
-    // delete jszip.files[file.name]
-
-    // 生成新的ZIP文件
-    const newZipContent = await zip.generateAsync({ type: 'arraybuffer', platform: 'DOS' })
-
-    // 处理新生成的ZIP文件，例如下载或者其他操作
-    // ...
-    // 使用FileSaver库保存新的ZIP文件
-    saveAs(newZipContent, '5555.zip')
 }
 //开始上传
-const handleUpload = async () => {
+const updateKey = ref(0)
-    // return
+const handleUpload = () => {
-    console.log(offLineFileList.value, '000000000')
+    loading.value = true
     const subForm = new FormData()
-    let obj = {
-        devId: deviceId.value, //设备id
-        lineId: lineId.value, //监测点id
-        files: offLineFileList.value, //上传文件集
-        paths: offLineFileList.value //上传文件路径集
-    }
     subForm.append('devId', deviceId.value)
     subForm.append('lineId', lineId.value)
     // subForm.append('files', offLineFileList.value)
     let webkitRelativePathList: any = []
     offLineFileList.value.map((item: any, index: any) => {
-        console.log(item)
         // obj.paths.push(item.webkitRelativePath)
         subForm.append(`files[${index}]`, item)
         // subForm.append(`paths[${index}]`, item.webkitRelativePath)
         webkitRelativePathList.push(item.webkitRelativePath)
     })
-    console.log(subForm.getAll('files'), subForm)
     subForm.append('paths', webkitRelativePathList.join(','))
+    offLineFileList.value.map((item: any) => {
+        item.status = -1
+    })
+    // 操作数据后更新视图
+    updateKey.value += 1
     // return;
-    await uploadOffLineDataFile(subForm).then(res => {
+    uploadOffLineDataFile(subForm).then(res => {
         if (res.code == 'A0000') {
-            console.log(res, '0999999999状态吗')
+            offLineFileList.value.map((item: any) => {
+                item.status = 1
+            })
+            // 操作数据后更新视图
+            updateKey.value += 1
+            loading.value = false
+            disableHandleUpload.value = true
         }
     })
 }
@@ -239,9 +161,6 @@ const open = (devId: any, lineIds: any) => {
 const close = () => {
     dialogVisible.value = false
 }
-onMounted(() => {
-    console.log()
-})
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>