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

<!-- 离线数据导入 -->
<template>
    <!-- <el-dialog v-model.trim="dialogVisible" title="文件列表" width="70%" :destroy-on-close="true" draggable @closed="close"> -->
    <!-- 上传文件列表 -->
    <div class=" ">
        <!-- <div class="offline_data_btn">
                <el-button :loading="loading" style="margin-left: 10px" type="primary" @click="submitUpload">
                    上传离线数据
                </el-button>
          
                <el-button type="primary" @click="removeAllFile" :loading="loading"
                    :disabled="offLineFileList.length == 0">
                    重置上传文件
                </el-button>
                <el-button type="primary" @click="handleUpload" :loading="loading"
                    :disabled="offLineFileList.length == 0 || disableHandleUpload">
                    开始上传
                </el-button>
            </div> -->
        <TableHeader ref="refheader" :showSearch="false">

            <template #operation>
                <el-button :loading="loading" style="margin-left: 10px" type="primary" @click="submitUpload">
                    上传离线数据
                </el-button>

                <el-button type="primary" @click="removeAllFile" :loading="loading"
                    :disabled="offLineFileList.length == 0">
                    重置上传文件
                </el-button>
                <el-button type="primary" @click="handleUpload" :loading="loading"
                    :disabled="offLineFileList.length == 0 || disableHandleUpload">
                    开始上传
                </el-button>
                <el-button :icon="Back" @click="go(-1)">返回</el-button>
            </template>

        </TableHeader>
        <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="300">
                    <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 type="primary" @click="handleUpload" :loading="loading"
                    :disabled="offLineFileList.length == 0 || disableHandleUpload">
                    开始上传
                </el-button>
            </div>
        </template> -->
    <!-- </el-dialog> -->
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TableHeader from '@/components/table/header/index.vue'
import { uploadOffLineDataFile } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { Back } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout'
import { useRouter, useRoute } from 'vue-router'
const { go } = useRouter() // 路由
const routes = useRoute()
const dialogVisible = ref(false)
const loading = ref(false)
const offLineFileList: any = ref([])
const disableHandleUpload = ref(true)
const tableHeight = mainHeight(85)
//上传离线数据
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', routes.query.deviceId)
    subForm.append('lineId', routes.query.lineId)
    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;
    }
}

// .device {
//     height: calc(100vh - 130px);
// }</style>