From 2c066236bf2b0e2a346a4352d485d7334f25884a Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Fri, 18 Oct 2024 13:54:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=9C=8D=E5=8A=A1=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E5=88=97=E8=A1=A8=E5=BD=A2=E5=BC=8F=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/element.scss                       |   4 +
 src/views/govern/device/fileService/index.vue | 104 ++++++++++++++----
 2 files changed, 86 insertions(+), 22 deletions(-)

diff --git a/src/styles/element.scss b/src/styles/element.scss
index 0a4e7cb..899baf6 100644
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -226,3 +226,7 @@
         min-width: 128px;
     }
 }
+
+.el-collapse-item__content{
+    padding-bottom: 0;
+}
diff --git a/src/views/govern/device/fileService/index.vue b/src/views/govern/device/fileService/index.vue
index 99cc80f..cd78a3f 100644
--- a/src/views/govern/device/fileService/index.vue
+++ b/src/views/govern/device/fileService/index.vue
@@ -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%;
             }
         }
     }