文件上传

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

@@ -17,15 +17,49 @@
                     </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>
+            </div>
             <div class="list">
-                <div class="list_item" v-for="(item, index) in dirList" :key="index" @click="handleIntoDir(item)">
+                <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" circle>
+                        <el-button v-if="item?.type == 'file'" size="small" @click="handleDownLoad(item)" circle>
-                            <el-icon @click="handleDownLoad(item)"><Download /></el-icon>
+                            <el-icon><Download /></el-icon>
                         </el-button>
                     </div>
-                    <img v-if="item?.type == 'dir'" src="@/assets/img/wenjianjia.svg" />
+                    <div class="item_upload">
-                    <img class="img_file" v-if="item?.type == 'file'" src="@/assets/img/wenjian.svg" />
+                        <el-upload
+                            v-if="item?.type == 'dir'"
+                            style="display: inline-block"
+                            action=""
+                            class="upload-demo"
+                            :show-file-list="true"
+                            :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>
                         {{
@@ -49,8 +83,13 @@ 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 } from '@element-plus/icons-vue'
+import { ArrowLeft, ArrowRight, Download, Upload } from '@element-plus/icons-vue'
-import { getDeviceRootPath, getFileServiceFileOrDir, downLoadDeviceFile,uploadDeviceFile } from '@/api/cs-device-boot/fileService.ts'
+import {
+    getDeviceRootPath,
+    getFileServiceFileOrDir,
+    downLoadDeviceFile,
+    uploadDeviceFile
+} from '@/api/cs-device-boot/fileService.ts'
 import popup from './popup.vue'
 defineOptions({
     name: 'govern/device/fileService'
@@ -81,9 +120,32 @@ const nodeClick = (e: any) => {
         })
     }
 }
-
+//搜索文件或文件夹
+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
@@ -100,6 +162,7 @@ const handleIntoDir = (row: any) => {
     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)
@@ -115,9 +178,7 @@ const uploadFile=(file:any)=>{
         file: file,
         filePath: '/'
     }
-    uploadDeviceFile().then((res)=>{
+    uploadDeviceFile().then(res => {})
-
-    })
 }
 
 //根据面包屑导航切换
@@ -141,7 +202,22 @@ const handleIntoByPath = async (val: any) => {
 //下载文件
 const fileRef = ref()
 const handleDownLoad = async (row: any) => {
-    await fileRef.value && fileRef.value.open(row, nDid.value)
+    ;(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.prjDataPath
+    }
+    uploadDeviceFile(obj).then(res => {
+        console.log(res, '上传文件毁掉')
+        if (res.code == 'A0000') {
+            ElMessage.success(res.message)
+        }
+    })
 }
 watch(
     () => activePathList.value,
@@ -191,12 +267,22 @@ watch(
                 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: 20px;
+            margin-top: 10px;
             height: 100%;
             padding-bottom: 200px;
             z-index: 100;
@@ -214,7 +300,8 @@ watch(
                 cursor: pointer;
                 position: relative;
                 z-index: 1001 !important;
-                .item_download {
+                .item_download,
+                .item_upload {
                     position: absolute;
                     top: 10px;
                     right: 10px;

src/views/govern/device/fileService/popup.vue

@@ -39,15 +39,15 @@ const handleClose = () => {
 }
 //文件信息
 const fileData: any = ref({})
-const open = (row: any, id: any) => {
+const open = async (row: any, id: any) => {
     dialogVisible.value = true
+    loading.value = true
     const obj = {
         nDid: id,
         name: row.prjDataPath,
         type: row.type
     }
-    loading.value = true
+    await getFileServiceFileOrDir(obj).then(res => {
-    getFileServiceFileOrDir(obj).then(res => {
         if (res.code == 'A0000') {
             fileData.value = res.data[0]
             fileData.value.nDid = id
@@ -63,14 +63,16 @@ const handleDownLoad = () => {
         fileCheck: fileData.value.fileCheck
     }
     downLoading.value = true
-    downLoadDeviceFile(obj).then(res => {
+    downLoadDeviceFile(obj)
+        .then(res => {
             if (res.code == 'A0000') {
                 window.open(res.data, '_blank')
                 downLoading.value = false
             }
-    }).catch((e)=>{
+        })
+        .catch(e => {
             if (e) {
-            downLoading.value=false;
+                downLoading.value = false
             }
         })
 }