374 lines
12 KiB
Vue
374 lines
12 KiB
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="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>{{ index > 1 ? item.path.replace(activePathList[1].path, ' '): item.path }}</span> -->
|
|
<span>{{ outPutPath(item, index) }}</span>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</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">搜索</el-button>
|
|
<el-button @click="handleRefresh">重置</el-button>
|
|
<el-upload
|
|
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>
|
|
</div>
|
|
<div class="list" v-if="dirList.length != 0 && !loading">
|
|
<!-- <div class="list_upload">
|
|
<el-upload
|
|
action=""
|
|
:auto-upload="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>
|
|
</div> -->
|
|
<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>
|
|
</div>
|
|
<!-- <div class="item_upload">
|
|
<el-upload
|
|
v-if="item?.type == 'dir'"
|
|
style="display: inline-block"
|
|
action=""
|
|
class="upload-demo"
|
|
:auto-upload="false"
|
|
:on-change="
|
|
(file:any, fileList:any) => {
|
|
handleUpload(file, fileList, item)
|
|
}
|
|
"
|
|
>
|
|
<el-button size="small" circle>
|
|
<el-icon><Upload /></el-icon>
|
|
</el-button>
|
|
</el-upload>
|
|
</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" />
|
|
</div>
|
|
<popup ref="fileRef"></popup>
|
|
</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 { ArrowLeft, ArrowRight, Download, Upload } from '@element-plus/icons-vue'
|
|
import {
|
|
getDeviceRootPath,
|
|
getFileServiceFileOrDir,
|
|
downLoadDeviceFile,
|
|
uploadDeviceFile
|
|
} from '@/api/cs-device-boot/fileService.ts'
|
|
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 activePathList: any = ref([])
|
|
const nodeClick = (e: any) => {
|
|
loading.value = true
|
|
if (e.level == 2) {
|
|
nDid.value = e.ndid
|
|
getDeviceRootPath(nDid.value).then(res => {
|
|
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 })
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
//搜索文件或文件夹
|
|
const filterFileName = ref('')
|
|
const handleSearch = () => {
|
|
let filterList = []
|
|
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
|
|
}
|
|
// 进入文件夹
|
|
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)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
//处理导航栏路径
|
|
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
|
|
})
|
|
}
|
|
|
|
//下载文件
|
|
const fileRef = ref()
|
|
const handleDownLoad = async (row: any) => {
|
|
;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
|
|
}
|
|
//上传文件
|
|
const handleUpload = (e: any, fileList: any, row: any) => {
|
|
console.log(e, fileList, row)
|
|
const obj = {
|
|
id: nDid.value,
|
|
file: e.raw,
|
|
filePath: row|| row.prjDataPath
|
|
}
|
|
uploadDeviceFile(obj).then(res => {
|
|
console.log(res, '上传文件毁掉')
|
|
if (res.code == 'A0000') {
|
|
ElMessage.success(res.message)
|
|
}
|
|
})
|
|
}
|
|
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;
|
|
.menu {
|
|
width: 100%;
|
|
height: 50px;
|
|
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;
|
|
}
|
|
}
|
|
.filter {
|
|
width: 100%;
|
|
height: 30px;
|
|
display: flex;
|
|
margin-top: 10px;
|
|
justify-content: flex-start;
|
|
.el-button {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
overflow-y: auto;
|
|
margin-top: 10px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|