|
| 1 | +<!-- |
| 2 | + * @Author: Copyright(c) 2020 Suwings |
| 3 | + * @Date: 2021-05-08 11:53:54 |
| 4 | + * @LastEditTime: 2021-07-14 15:25:18 |
| 5 | + * @Description: |
| 6 | +--> |
| 7 | + |
| 8 | +<template> |
| 9 | + <Panel> |
| 10 | + <template #title>文件管理</template> |
| 11 | + <template #default> |
| 12 | + <div class="instance-table-warpper"> |
| 13 | + <div> |
| 14 | + <el-button size="small" type="success"> <i class="el-icon-plus"></i> 上传文件 </el-button> |
| 15 | + <el-button size="small" type="primary"> <i class="el-icon-refresh"></i> 刷新 </el-button> |
| 16 | + </div> |
| 17 | + <div> |
| 18 | + <el-button size="small" type="primary"> |
| 19 | + <i class="el-icon-video-play"></i> 压缩 |
| 20 | + </el-button> |
| 21 | + <el-button size="small" type="primary"> |
| 22 | + <i class="el-icon-video-pause"></i> 解压 |
| 23 | + </el-button> |
| 24 | + <el-button size="small" type="primary"> |
| 25 | + <i class="el-icon-video-pause"></i> 移动 |
| 26 | + </el-button> |
| 27 | + <el-button size="small" type="danger"> <i class="el-icon-delete"></i> 删除 </el-button> |
| 28 | + </div> |
| 29 | + </div> |
| 30 | + |
| 31 | + <p>当前目录: {{ this.currentDir }}</p> |
| 32 | + |
| 33 | + <el-table |
| 34 | + :data="files" |
| 35 | + stripe |
| 36 | + style="width: 100%" |
| 37 | + size="mini" |
| 38 | + ref="multipleTable" |
| 39 | + @selection-change="selectionChange" |
| 40 | + > |
| 41 | + <el-table-column type="selection" width="55"> </el-table-column> |
| 42 | + <el-table-column prop="name" label="文件命令" min-width="240"> |
| 43 | + <template #default="scope"> |
| 44 | + <div |
| 45 | + v-if="scope.row.type == 0" |
| 46 | + class="filemanager-item-dir" |
| 47 | + @click="toDir(scope.row.name)" |
| 48 | + > |
| 49 | + <i class="el-icon-folder"></i> |
| 50 | + <span>{{ scope.row.name }}</span> |
| 51 | + </div> |
| 52 | + <div v-if="scope.row.type == 1" class="filemanager-item-file"> |
| 53 | + <i class="el-icon-tickets"></i> |
| 54 | + <span>{{ scope.row.name }}</span> |
| 55 | + </div> |
| 56 | + </template> |
| 57 | + </el-table-column> |
| 58 | + <el-table-column prop="typeText" label="文件类型" width="120"></el-table-column> |
| 59 | + <el-table-column prop="size" label="文件大小" width="140"></el-table-column> |
| 60 | + <el-table-column prop="timeText" label="最后修改" width="160"></el-table-column> |
| 61 | + <el-table-column label="操作" style="text-align: center" width="180"> |
| 62 | + <template #default="scope"> |
| 63 | + <el-button size="mini" :disabled="scope.row.type != 1"> 编辑 </el-button> |
| 64 | + </template> |
| 65 | + </el-table-column> |
| 66 | + </el-table> |
| 67 | + </template> |
| 68 | + </Panel> |
| 69 | +</template> |
| 70 | + |
| 71 | +<script> |
| 72 | +import Panel from "../../components/Panel"; |
| 73 | +import axios from "axios"; |
| 74 | +import { API_FILE_URL } from "../service/common"; |
| 75 | +import path from "path"; |
| 76 | +// import qs from "qs"; |
| 77 | +
|
| 78 | +export default { |
| 79 | + data() { |
| 80 | + return { |
| 81 | + serviceUuid: this.$route.params.serviceUuid, |
| 82 | + instanceUuid: this.$route.params.instanceUuid, |
| 83 | + multipleSelection: [], |
| 84 | + files: [], |
| 85 | + currentDir: "./" |
| 86 | + }; |
| 87 | + }, |
| 88 | + async mounted() { |
| 89 | + await this.render(); |
| 90 | + }, |
| 91 | + unmounted() {}, |
| 92 | + methods: { |
| 93 | + async refresh() { |
| 94 | + await this.render(); |
| 95 | + this.$message({ message: "已刷新", type: "success" }); |
| 96 | + }, |
| 97 | + async render() { |
| 98 | + await this.cd("."); |
| 99 | + const result = await this.list(); |
| 100 | + console.log("响应:", result.data.data); |
| 101 | + }, |
| 102 | +
|
| 103 | + // 进入某目录 |
| 104 | + async toDir(name) { |
| 105 | + try { |
| 106 | + let p = "."; |
| 107 | + if (name == "返回上层") p = path.normalize(path.join(this.currentDir, "../")); |
| 108 | + else p = path.normalize(path.join(this.currentDir, name)); |
| 109 | + await this.cd(p); |
| 110 | + await this.list(); |
| 111 | + } catch (error) { |
| 112 | + this.$message({ message: "错误，无法查看此目录或文件", type: "error" }); |
| 113 | + } |
| 114 | + }, |
| 115 | +
|
| 116 | + // 目录 CD 功能 |
| 117 | + async cd(cwd = ".") { |
| 118 | + const res = await axios.get(`${API_FILE_URL}/cd/${this.serviceUuid}/`, { |
| 119 | + params: { |
| 120 | + uuid: this.instanceUuid, |
| 121 | + cd: cwd |
| 122 | + } |
| 123 | + }); |
| 124 | + this.currentDir = path.normalize(cwd); |
| 125 | + console.log("cd", res, cwd); |
| 126 | + }, |
| 127 | + // 目录 List 功能 |
| 128 | + async list() { |
| 129 | + const res = await axios.get(`${API_FILE_URL}/list/${this.serviceUuid}/`, { |
| 130 | + params: { |
| 131 | + uuid: this.instanceUuid |
| 132 | + } |
| 133 | + }); |
| 134 | + this.tableFilter(res.data.data); |
| 135 | + }, |
| 136 | +
|
| 137 | + // 表格数据处理 |
| 138 | + tableFilter(filesData) { |
| 139 | + this.files = []; |
| 140 | + // 存放返回上层目录 |
| 141 | + this.files.push({ |
| 142 | + name: "返回上层", |
| 143 | + type: 0, |
| 144 | + size: 0, |
| 145 | + typeText: "目录", |
| 146 | + timeText: "--" |
| 147 | + }); |
| 148 | +
|
| 149 | + for (const iterator of filesData) { |
| 150 | + const typeText = iterator.type == 1 ? "文件" : "目录"; |
| 151 | + const timeText = |
| 152 | + new Date(iterator.time).toLocaleDateString() + |
| 153 | + " " + |
| 154 | + new Date(iterator.time).toLocaleTimeString(); |
| 155 | + this.files.push({ |
| 156 | + name: iterator.name, |
| 157 | + type: iterator.type, |
| 158 | + size: iterator.size, |
| 159 | + typeText: typeText, |
| 160 | + timeText: timeText |
| 161 | + }); |
| 162 | + } |
| 163 | + }, |
| 164 | +
|
| 165 | + // 表格多选函数 |
| 166 | + selectionChange(v) { |
| 167 | + this.multipleSelection = v; |
| 168 | + } |
| 169 | + }, |
| 170 | + components: { Panel } |
| 171 | +}; |
| 172 | +</script> |
| 173 | + |
| 174 | +<style> |
| 175 | +.filemanager-item-dir { |
| 176 | + font-size: 14px; |
| 177 | + text-decoration: underline; |
| 178 | + cursor: pointer; |
| 179 | +} |
| 180 | +.filemanager-item-file { |
| 181 | + font-size: 14px; |
| 182 | +} |
| 183 | +.filemanager-item-dir span { |
| 184 | + margin-left: 4px; |
| 185 | +} |
| 186 | +.filemanager-item-file span { |
| 187 | + margin-left: 4px; |
| 188 | +} |
| 189 | +</style> |
0 commit comments