文件上传

2024-09-02 18:19:47 +08:00
parent 5183bacc19
commit 40c909ea61
2 changed files with 122 additions and 33 deletions
--- a/src/views/govern/device/fileService/index.vue
+++ b/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-icon @click="handleDownLoad(item)"><Download /></el-icon>
+                        <el-button v-if="item?.type == 'file'" size="small" @click="handleDownLoad(item)" circle>
+                            <el-icon><Download /></el-icon>
                        </el-button>
                    </div>
-                    <img v-if="item?.type == 'dir'" src="@/assets/img/wenjianjia.svg" />
-                    <img class="img_file" v-if="item?.type == 'file'" src="@/assets/img/wenjian.svg" />
+                    <div class="item_upload">
+                        <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 { getDeviceRootPath, getFileServiceFileOrDir, downLoadDeviceFile,uploadDeviceFile } from '@/api/cs-device-boot/fileService.ts'
+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'
@@ -81,11 +120,34 @@ 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
+    if (!row.type || row.type == 'file') return
    loading.value = true
    const obj = {
        nDid: nDid.value,
@@ -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)
@@ -109,15 +172,13 @@ const handleIntoDir = (row: any) => {
 }

 //上传文件
-const uploadFile=(file:any)=>{
-    const obj={
-        id:nDid.value,
-        file:file,
-        filePath:'/'
+const uploadFile = (file: any) => {
+    const obj = {
+        id: nDid.value,
+        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;
--- a/src/views/govern/device/fileService/popup.vue
+++ b/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
-    getFileServiceFileOrDir(obj).then(res => {
+    await getFileServiceFileOrDir(obj).then(res => {
        if (res.code == 'A0000') {
            fileData.value = res.data[0]
            fileData.value.nDid = id
@@ -63,16 +63,18 @@ const handleDownLoad = () => {
        fileCheck: fileData.value.fileCheck
    }
    downLoading.value = true
-    downLoadDeviceFile(obj).then(res => {
-        if (res.code == 'A0000') {
-            window.open(res.data, '_blank')
-            downLoading.value = false
-        }
-    }).catch((e)=>{
-        if(e){
-            downLoading.value=false;
-        }
-    })
+    downLoadDeviceFile(obj)
+        .then(res => {
+            if (res.code == 'A0000') {
+                window.open(res.data, '_blank')
+                downLoading.value = false
+            }
+        })
+        .catch(e => {
+            if (e) {
+                downLoading.value = false
+            }
+        })
 }
 onMounted(() => {})
 onUnmounted(() => {})