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

<!-- 离线数据导入 -->
<template>
    <el-dialog v-model="dialogVisible" title="文件列表" width="70%" draggable>
        <!-- 上传文件列表 -->
        <div class="offline_data">
            <div class="offline_data_btn">
                <el-button
                    type="primary"
                    @click="handleUpload"
                    :loading="loading"
                    size="small"
                    :disabled="offLineFileList.length == 0 || disableHandleUpload"
                >
                    开始上传
                </el-button>
                <el-button
                    type="primary"
                    @click="removeAllFile"
                    size="small"
                    :loading="loading"
                    :disabled="offLineFileList.length == 0"
                >
                    清空文件
                </el-button>
            </div>
            <div class="offline_data_list">
                <el-button
                    :loading="loading"
                    style="margin-left: 10px"
                    size="small"
                    type="primary"
                    @click="submitUpload"
                >
                    上传离线数据
                </el-button>
                <div>
                    <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="250">
                            <template #default="{ row }">
                                <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"
                                    :disabled="row.status == -1"
                                    type="danger"
                                    text
                                    @click="removeFile(row)"
                                >
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <!-- <el-button type="primary" @click="close">提交</el-button> -->
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
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'
const dialogVisible = ref(false)
const loading = ref(false)
const offLineFileList: any = ref([])
const disableHandleUpload = ref(true)
//上传离线数据
const submitUpload = e => {
    const input = document.createElement('input')
    input.type = 'file'
    input.setAttribute('allowdirs', 'true')
    input.setAttribute('directory', 'true')
    input.setAttribute('webkitdirectory', 'true')
    input.multiple = true
    document.querySelector('body').appendChild(input)
    // todo 这里增加了input标签，可以给它删掉
    input.click()
    input.onchange = function (e) {
        const formData = new FormData()
        const file = e.target['files']
        for (let i = 0; i < file.length; i++) {
            formData.append('files', file[i])
        }
        offLineFileList.value = formData.getAll('files')
        offLineFileList.value.map((item: any) => {
            item.status = 0
        })
        disableHandleUpload.value = false
    }
}
//清空文件
const removeAllFile = () => {
    offLineFileList.value = []
}
//移除文件
const removeFile = async (file: any) => {
    const delIndex = offLineFileList.value.findIndex((item: any) => {
        return item.webkitRelativePath == file.webkitRelativePath && item.name == file.name
    })
    offLineFileList.value.splice(delIndex, 1)
    return
}
//开始上传
const updateKey = ref(0)
const handleUpload = () => {
    loading.value = true
    const subForm = new FormData()
    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) => {
        // obj.paths.push(item.webkitRelativePath)
        subForm.append(`files[${index}]`, item)
        // subForm.append(`paths[${index}]`, item.webkitRelativePath)
        webkitRelativePathList.push(item.webkitRelativePath)
    })
    subForm.append('paths', webkitRelativePathList.join(','))
    offLineFileList.value.map((item: any) => {
        item.status = -1
    })
    // 操作数据后更新视图
    updateKey.value += 1
    disableHandleUpload.value = true
    // return;
    uploadOffLineDataFile(subForm).then(res => {
        if (res.code == 'A0000') {
            offLineFileList.value.map((item: any) => {
                item.status = 1
            })
            // 操作数据后更新视图
            updateKey.value += 1
            loading.value = false
            disableHandleUpload.value = true
        }
    })
}
const deviceId: any = ref()
const lineId: any = ref()
const open = (devId: any, lineIds: any) => {
    deviceId.value = devId
    lineId.value = lineIds
    dialogVisible.value = true
}
const close = () => {
    dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.offline_data {
    width: 100%;
    height: 400px;
    .offline_data_btn {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .offline_data_list {
        width: 100%;
        height: 300px;
    }
}
</style>