文件服务改为列表形式展示

This commit is contained in:
zhujiyan
2024-10-18 13:54:56 +08:00
parent 18017af16b
commit 2c066236bf
2 changed files with 86 additions and 22 deletions

View File

@@ -226,3 +226,7 @@
min-width: 128px;
}
}
.el-collapse-item__content{
padding-bottom: 0;
}

View File

@@ -61,7 +61,68 @@
</el-progress> -->
</div>
</div>
<div class="list" v-if="dirList.length != 0 && !loading">
<!-- 以列表形式展示 -->
<vxe-table
style="margin-top: 10px"
border
auto-resize
max-height="82%"
:data="dirList"
v-bind="defaultAttribute"
>
<vxe-column type="seq" title="序号" width="80"></vxe-column>
<vxe-column field="prjDataPath" align="center" title="名称" #default="{ row }">
<span
style="cursor: pointer; color: #551a8b"
:style="{
'text-decoration': row.type == 'dir' ? 'underline' : 'none',
color: row.type == 'dir' ? '#551a8b' : '#000'
}"
@click="handleIntoDir(row)"
>
{{
row &&
row?.prjDataPath &&
row?.prjDataPath.includes(activePath) &&
row?.prjDataPath.length > activePath.length
? row?.prjDataPath.replace(activePath, ' ').replace('/', ' ')
: row?.prjDataPath.replace('/', ' ')
}}
</span>
</vxe-column>
<vxe-column field="size" align="center" title="大小" #default="{ row }">
<span>
{{ row.size ? row.size + '字节' : '/' }}
</span>
</vxe-column>
<vxe-column field="type" align="center" title="类型" width="120" #default="{ row }">
<span>
{{ row.type == 'dir' ? '文件夹' : row.type == 'file' ? '文件' : '/' }}
</span>
</vxe-column>
<!-- <vxe-column field="startTime" align="center" title="文件时间" width="120" #default="{ row }">
{{ row.startTime ? row.startTime : '/' }}
</vxe-column> -->
<!--<vxe-column field="fileCheck" align="center" title="文件校验码" width="100" #default="{ row }">
{{ row.fileCheck ? row.fileCheck : '/' }}
</vxe-column> -->
<vxe-column title="操作" width="200px">
<template #default="{ row }">
<el-button link size="small" type="danger" @click="handleDelDirOrFile(row)">删除</el-button>
<el-button
v-if="row.type == 'file'"
link
size="small"
type="primary"
@click="handleDownLoad(row)"
>
下载
</el-button>
</template>
</vxe-column>
</vxe-table>
<div class="list" v-if="dirList.length != 0 && !loading" style="display: none">
<div class="list_item" v-for="(item, index) in dirList" :key="index">
<div class="item_download">
<el-button
@@ -144,6 +205,7 @@ import {
addDeviceDir,
delDeviceDir
} from '@/api/cs-device-boot/fileService.ts'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import {
CirclePlus,
Delete,
@@ -264,7 +326,7 @@ const handleRestartDevice = () => {
if (res.code == 'A0000') {
deviceRestartLoading.value = false
ElMessage({ message: res.message, type: 'success', duration: 5000 })
}else{
} else {
deviceRestartLoading.value = false
}
})
@@ -577,7 +639,7 @@ onBeforeUnmount(() => {
.main {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
.main_left {
// width: 280px;
}
@@ -651,9 +713,9 @@ onBeforeUnmount(() => {
}
.list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
// display: flex;
// flex-wrap: wrap;
// align-items: flex-start;
// justify-content: space-between;
overflow-y: auto;
margin-top: 10px;
@@ -661,15 +723,6 @@ onBeforeUnmount(() => {
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%;
@@ -680,11 +733,14 @@ onBeforeUnmount(() => {
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: 6px;
// border-radius: 6px;
cursor: pointer;
position: relative;
z-index: 1001 !important;
width: 100%;
height: 40px;
margin: 0;
border: 1px solid #eee;
.item_download,
.item_upload {
position: absolute;
@@ -694,13 +750,17 @@ onBeforeUnmount(() => {
}
.img_file {
width: 60px;
height: 60px;
// width: 60px;
// height: 60px;
width: 30px;
height: 30px;
}
img {
width: 50px;
height: 50px;
// width: 50px;
// height: 50px;
width: 30px;
height: 30px;
cursor: pointer !important;
}
@@ -711,7 +771,7 @@ onBeforeUnmount(() => {
.list_item:nth-child(4n + 2),
.list_item:nth-child(4n + 3) {
margin: 10px 0.8%;
// margin: 10px 0.8%;
}
}
}