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

<!-- 离线数据导入 -->
<template>
    <el-dialog v-model="dialogVisible" title="文件列表" width="70%" :destroy-on-close="true" draggable @closed="close">
        <!-- 上传文件列表 -->
        <div class="offline_data">
            <div class="offline_data_btn">
                <el-button :loading="loading" style="margin-left: 10px" type="primary" @click="submitUpload">
                    上传离线数据
                </el-button>
                <el-button type="primary" @click="handleUpload" :loading="loading"
                    :disabled="offLineFileList.length == 0 || disableHandleUpload">
                    开始上传
                </el-button>
                <el-button type="primary" @click="removeAllFile" :loading="loading"
                    :disabled="offLineFileList.length == 0">
                    重置上传文件
                </el-button>
            </div>
            <div :style="tableHeight">
                <vxe-table border auto-resize height="auto" :data="offLineFileList" v-bind="defaultAttribute"
                    :key="updateKey">
                    <vxe-column field="name" align="center" title="文件名"></vxe-column>
                    <vxe-column field="webkitRelativePath" align="center" title="文件地址"></vxe-column>
                    <vxe-column field="status" align="center" title="状态" width="250">
                        <template v-slot:default="scoped">
                            <el-progress v-if="scoped.row.status == 0" :percentage="0">
                                <el-button text>等待上传</el-button>
                            </el-progress>
                            <el-progress v-if="scoped.row.status == -1" :percentage="30" :indeterminate="true">
                                <el-button text>上传中...</el-button>
                            </el-progress>
                            <el-progress v-if="scoped.row.status == 1" status="success" :percentage="100">
                                <el-button text>上传成功</el-button>
                            </el-progress>
                        </template>
                    </vxe-column>
                    <vxe-column title="操作" width="200px">
                        <template v-slot:default="scoped">
                            <el-button link type="danger" @click="removeFile(scoped.row)">移除</el-button>
                        </template>
                    </vxe-column>
                </vxe-table>
            </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 } from 'vue'
import { uploadOffLineDataFile } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
const dialogVisible = ref(false)
const loading = ref(false)
const offLineFileList: any = ref([])
const disableHandleUpload = ref(true)
const tableHeight = mainHeight(550)
//上传离线数据
const submitUpload = (e: any) => {
    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)
    let webkitRelativePathList: any = []
    offLineFileList.value.map((item: any, index: any) => {
        subForm.append(`files[${index}]`, item)
        webkitRelativePathList.push(item.webkitRelativePath)
    })
    subForm.append('paths', webkitRelativePathList.join(','))
    offLineFileList.value.map((item: any) => {
        item.status = -1
    })
    // 操作数据后更新视图
    updateKey.value += 1
    disableHandleUpload.value = true
    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
        }
    }).catch(()=>{
        loading.value = false
        disableHandleUpload.value = false
        offLineFileList.value.map((item: any) => {
                item.status = 0
        })
        updateKey.value += 1
    })
}
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 = () => {
    offLineFileList.value = []
    dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.offline_data {
    width: 100%;

    .offline_data_btn {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}
</style>