admin-govern/src/views/govern/device/fileService/index.vue

<!-- 文件管理 -->
<template>
    <div class="default-main main" :style="{ height: pageHeight.height }">
        <div class="main_left">
            <DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
        </div>
        <div class="main_right" v-loading="loading">
            <div class="right_nav">
                <div class="menu" v-if="activePathList.length != 0">
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item
                            v-for="(item, index) in activePathList"
                            style="cursor: pointer"
                            :key="index"
                            @click="handleIntoByPath(item)"
                        >
                            <span>{{ outPutPath(item, index) }}</span>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <el-button :icon="Refresh" @click="handleRestartDevice" type="primary" :loading="deviceRestartLoading">
                    装置重启
                </el-button>
            </div>

            <div class="filter" v-if="activePathList.length != 0">
                <el-input
                    style="width: 200px; height: 32px"
                    placeholder="请输入文件或文件夹名称"
                    clearable
                    v-model="filterFileName"
                ></el-input>
                <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
                <el-upload
                    v-if="!progressVisibile && activePath != '/'"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="
                                    (file:any, fileList:any) => {
                                        handleUpload(file, fileList, activePath)
                                    }
                                "
                >
                    <el-button>
                        文件上传
                        <el-icon class="el-icon--right"><Upload /></el-icon>
                    </el-button>
                </el-upload>
                <el-button @click="handleAddNewDir" v-if="activePath != '/'" type="primary" :icon="Plus">
                    新建文件夹
                </el-button>
                <div class="upload_progress" v-if="progressVisibile">
                    {{ fileName }}
                    <el-progress :percentage="30" :indeterminate="true">
                        <el-button text>上传中...</el-button>
                    </el-progress>
                </div>
            </div>
            <div class="list" v-if="dirList.length != 0 && !loading">
                <div class="list_item" v-for="(item, index) in dirList" :key="index">
                    <div class="item_download">
                        <el-button v-if="item?.type == 'file'" size="small" @click="handleDownLoad(item)" circle>
                            <el-icon><Download /></el-icon>
                        </el-button>
                        <el-button
                            v-if="activePath != '/'"
                            type="danger"
                            @click="handleDelDirOrFile(item)"
                            size="small"
                            circle
                        >
                            <el-icon><Delete /></el-icon>
                        </el-button>
                    </div>
                    <img v-if="item?.type == 'dir'" @click="handleIntoDir(item)" src="@/assets/img/wenjianjia.svg" />
                    <img
                        class="img_file"
                        @click="handleIntoDir(item)"
                        v-if="item?.type == 'file'"
                        src="@/assets/img/wenjian.svg"
                    />
                    <!-- <span v-if="!item.type">暂无数据</span> -->
                    <p>
                        {{
                            item &&
                            item?.prjDataPath &&
                            item?.prjDataPath.includes(activePath) &&
                            item?.prjDataPath.length > activePath.length
                                ? item?.prjDataPath.replace(activePath, ' ')
                                : item?.prjDataPath
                        }}
                    </p>
                </div>
            </div>
            <el-empty v-if="dirList.length == 0 || !dirList[0].type" />
        </div>
        <popup ref="fileRef"></popup>
        <el-dialog
            v-model="addDeviceDirOpen"
            :destroy-on-close="true"
            title="新建文件夹目录"
            width="500"
            @closed="close"
        >
            <el-form
                ref="formRef"
                :model="form"
                :rules="{ path: [{ required: true, message: '请输入文件夹路径', trigger: 'blur' }] }"
            >
                <el-form-item label="文件夹路径" prop="path">
                    <el-input v-model="form.path" placeholder="请输入文件夹路径" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="submitDeviceDir">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import { mainHeight } from '@/utils/layout'
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
    getDeviceRootPath,
    getFileServiceFileOrDir,
    downLoadDeviceFile,
    uploadDeviceFile,
    reStartDevice,
    addDeviceDir,
    delDeviceDir
} from '@/api/cs-device-boot/fileService.ts'
import {
    CirclePlus,
    Delete,
    EditPen,
    ArrowLeft,
    ArrowRight,
    Download,
    Upload,
    View,
    Check,
    Plus,
    Refresh,
    Search
} from '@element-plus/icons-vue'
import popup from './popup.vue'
defineOptions({
    name: 'govern/device/fileService'
})
const pageHeight = mainHeight(20)
const loading = ref(false)
//nDid
const nDid = ref<string>('')
// 树节点点击

//当前目录
const activePath = ref<string>('')
//判断是否是根目录
const isRoot = ref<boolean>(true)
//储存所有点击过的目录
const activePathList: any = ref([])
const nodeClick = (e: any) => {
    loading.value = true
    if (e.level == 2) {
        nDid.value = e.ndid
        getDeviceRootPath(nDid.value)
            .then((res: any) => {
                loading.value = false
                dirList.value = [res.data]
                activePath.value = res.data.prjDataPath
                activePathList.value.map((item: any, index: any) => {
                    if (item.path.indexOf(res.data.prjDataPath) == -1) {
                        activePathList.value.push({ path: activePath.value })
                    }
                })
            })
            .catch(e => {
                loading.value = false
            })
    }
}
//搜索文件或文件夹
const filterFileName = ref('')
const handleSearch = () => {
    let filterList: any = []
    dirList.value = currentDirList.value
    dirList.value.map(item => {
        if (filterFileName.value && item.prjDataPath.includes(filterFileName.value)) {
            filterList.push(item)
        }
    })
    if (filterList.length != 0) {
        dirList.value = filterList
    }
    if (!filterFileName) {
        dirList.value = currentDirList.value
    }
}
//重置搜索
const handleRefresh = () => {
    filterFileName.value = ''
    dirList.value = currentDirList.value
    reloadCurrentMenu('')
}
//装置重启
const deviceRestartLoading = ref<boolean>(false)
const handleRestartDevice = () => {
    deviceRestartLoading.value = true
    reStartDevice({ nDid: nDid.value }).then((res: any) => {
        if (res.code == 'A0000') {
            deviceRestartLoading.value = false
            ElMessage.success(res.message)
        }
    })
}
// 进入文件夹
const dirList = ref([])
// 当前目录数据
const currentDirList = ref([])
const handleIntoDir = (row: any) => {
    if (!row.type || row.type == 'file') return
    loading.value = true
    const obj = {
        nDid: nDid.value,
        name: row.prjDataPath,
        type: row.type
    }
    //当前点击的目录
    activePath.value = row.prjDataPath
    if (activePathList.value.indexOf(obj.name) == -1) {
        activePathList.value.push({ path: obj.name })
    }
    getFileServiceFileOrDir(obj).then(res => {
        dirList.value = res.data
        loading.value = false
        currentDirList.value = res.data
        activePathList.value.map((item: any, index: any) => {
            if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
                activePathList.value.splice(index, 1)
            }
        })
    })
    isRoot.value = false
}

//处理导航栏路径
const outPutPath = (row: any, key: any) => {
    let path = ''
    if (key <= 1) {
        path = row.path
    }
    if (key > 1) {
        if (row.path.includes(activePathList.value[1].path)) {
            path = row.path.replace(activePathList.value[1].path, ' ')
        }
        if (row.path.split('/').length !== 0) {
            path = '/' + row.path.split('/')[row.path.split('/').length - 1]
        }
    }
    return path
}

//根据面包屑导航切换
const handleIntoByPath = async (val: any) => {
    const obj = {
        nDid: nDid.value,
        name: val.path,
        type: 'dir'
    }
    activePath.value = val.path
    loading.value = true
    getFileServiceFileOrDir(obj).then(res => {
        dirList.value = res.data
        activePathList.value.map((item: any, index: any) => {
            if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
                activePathList.value.splice(index, 1)
            }
        })
        loading.value = false
    })
    isRoot.value = false
}
const form = ref({
    path: ''
})
//新建文件夹弹框flag
const addDeviceDirOpen = ref<boolean>(false)
const close = () => {
    addDeviceDirOpen.value = false
}
//打开新建文件夹弹框
const handleAddNewDir = () => {
    form.value.path = ''
    addDeviceDirOpen.value = true
}
const formRef = ref()
//重新加载当前页面菜单
const reloadCurrentMenu = (msg: string) => {
    getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' }).then((resp: any) => {
        if (resp.code == 'A0000') {
            dirList.value = resp.data
            currentDirList.value = resp.data
            activePathList.value.map((item: any, index: any) => {
                if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
                    activePathList.value.splice(index, 1)
                }
            })
            loading.value = false
            if (!msg) return
            ElMessage.success(msg)
        }
    })
}
//新建文件夹
const submitDeviceDir = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            let obj = {
                nDid: nDid.value,
                path:
                    activePath.value == '/'
                        ? activePath.value + form.value.path
                        : activePath.value + '/' + form.value.path
            }
            loading.value = true
            addDeviceDir(obj).then((res: any) => {
                if (res.code == 'A0000') {
                    reloadCurrentMenu(res.message)
                    // ElMessage.success(res.message)
                    addDeviceDirOpen.value = false
                }
            })
        }
    })
}
//删除文件夹或文件
const handleDelDirOrFile = (row: any) => {
    loading.value = true
    delDeviceDir({ nDid: nDid.value, path: row.prjDataPath }).then((res: any) => {
        if (res.code == 'A0000') {
            reloadCurrentMenu(res.message)
            // ElMessage.success(res.message)
        }
    })
}

//下载文件
const fileRef = ref()
const handleDownLoad = async (row: any) => {
    ;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
}
//上传文件
const progressVisibile = ref<boolean>(false)
const fileName = ref<string>('')
const handleUpload = (e: any, fileList: any, row: any) => {
    // loading.value=true
    fileName.value = e.name
    const obj = {
        id: nDid.value,
        file: e.raw,
        filePath: row || row.prjDataPath
    }
    progressVisibile.value = true
    uploadDeviceFile(obj).then((res: any) => {
        if (res.code == 'A0000') {
            reloadCurrentMenu(res.message)
            progressVisibile.value = false
        }
    })
}
watch(
    () => activePathList.value,
    async (val, oldVal) => {
        if (val) {
            val.map((item: any, index: any) => {
                if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
                    val.splice(index, 1)
                }
            })
        }
    },
    {
        immediate: true,
        deep: true
    }
)
</script>

<style lang="scss">
.main {
    display: flex;
    justify-content: space-between;
    .main_left {
        // width: 280px;
    }
    .main_right {
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 10px;
        //margin-left: 10px;
        border: 1px solid #eee;
        .right_nav {
            width: 100%;
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .menu {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: flex-start;
                overflow-x: auto;
                align-items: center;
                background-color: var(--el-color-primary);
                border-radius: 4px;
                span {
                    font-size: 14px;
                    font-weight: 800;
                    padding: 0 5px;
                    color: #fff;
                    cursor: pointer;
                }
            }
            .el-button {
                margin: 0 10px;
            }
        }

        .filter {
            width: 100%;
            height: 30px;
            display: flex;
            margin-top: 10px;
            justify-content: flex-start;
            .el-button {
                margin-left: 10px;
            }
            .upload_progress {
                flex: 1;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-left: 10px;
                .el-progress {
                    width: 300px;
                    margin-left: 10px;
                }
            }
        }
        .list {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            // justify-content: space-between;
            overflow-y: auto;
            margin-top: 10px;
            max-height: 100%;
            padding-bottom: 200px;
            z-index: 100;
            position: relative;
            .list_upload {
                position: absolute;
                width: 100px;
                height: 40px;
                right: 20px;
                top: 10px;
            }
            .list_item {
                flex: none;
                width: 23.3%;
                height: 100px;
                border: 1px solid var(--el-color-primary);
                margin: 10px 0.5%;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                z-index: 1001 !important;
                .item_download,
                .item_upload {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    z-index: 2001;
                }
                .img_file {
                    width: 60px;
                    height: 60px;
                }
                img {
                    width: 50px;
                    height: 50px;
                    cursor: pointer !important;
                }
                p {
                    margin-top: 10px;
                }
            }
            .list_item:nth-child(4n + 2),
            .list_item:nth-child(4n + 3) {
                margin: 10px 0.8%;
            }
        }
    }
}
.el-form {
    padding: 20px 10px;
    box-sizing: border-box;
}
</style>