完成了文件管理3.0的文件夹ls及mkdir操作
This commit is contained in:
parent
401d5ef394
commit
b9323bc1ad
|
|
@ -19,6 +19,7 @@
|
|||
"core-js": "^3.26.1",
|
||||
"docx-preview": "^0.1.14",
|
||||
"element-ui": "2.13.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"js-base64": "^3.7.3",
|
||||
"js-cookie": "2.2.0",
|
||||
"js-md5": "^0.7.3",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681880316864" class="icon" viewBox="0 0 1181 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7488" xmlns:xlink="http://www.w3.org/1999/xlink" width="230.6640625" height="200"><path d="M624.492308 336.738462a46.523077 46.523077 0 0 0-67.446154 0l-227.938462 219.323076a41.107692 41.107692 0 0 0 0 59.076924 40.615385 40.615385 0 0 0 59.076923 0l160.492308-143.507693v248.861539a42.092308 42.092308 0 1 0 84.184615 0V471.630769L793.353846 615.384615c16.738462 16.984615 50.707692 16.984615 59.076923 0a41.107692 41.107692 0 0 0 0-59.076923z" fill="#040000" p-id="7489"></path><path d="M1063.384615 118.153846h-393.846153a118.646154 118.646154 0 0 1-70.892308-24.615384L504.123077 24.615385a118.646154 118.646154 0 0 0-70.892308-24.615385H118.153846A118.153846 118.153846 0 0 0 0 118.153846v787.692308a118.153846 118.153846 0 0 0 118.153846 118.153846h945.230769a118.153846 118.153846 0 0 0 118.153847-118.153846V236.307692a118.153846 118.153846 0 0 0-118.153847-118.153846z m39.384616 787.692308a39.384615 39.384615 0 0 1-39.384616 39.384615H118.153846a39.384615 39.384615 0 0 1-39.384615-39.384615v-787.692308a39.384615 39.384615 0 0 1 39.384615-39.384615h315.076923a38.892308 38.892308 0 0 1 24.615385 7.876923l93.538461 70.892308A196.923077 196.923077 0 0 0 669.538462 196.923077h393.846153a39.384615 39.384615 0 0 1 39.384616 39.384615z" fill="#040000" p-id="7490"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -62,4 +62,5 @@ div:focus {
|
|||
// main-container global css
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -212,6 +212,29 @@ export const insertExpertInfo = data =>{
|
|||
})
|
||||
}
|
||||
|
||||
export const getFilesDirMeta = data =>{
|
||||
return axios({
|
||||
headers:{
|
||||
"Authorization": localStorage.getItem("systemToken")
|
||||
},
|
||||
url: '/file/getFilesDirMeta',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export const mkdir = data =>{
|
||||
return axios({
|
||||
headers:{
|
||||
"Authorization": localStorage.getItem("systemToken")
|
||||
},
|
||||
url: '/file/mkdir',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 默认全部倒出
|
||||
// 根据需要进行
|
||||
export default {
|
||||
|
|
@ -234,5 +257,7 @@ export default {
|
|||
getExpertInfoByName,
|
||||
getAllRankInfo,
|
||||
insertRankInfo,
|
||||
insertExpertInfo
|
||||
insertExpertInfo,
|
||||
getFilesDirMeta,
|
||||
mkdir
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div @contextmenu.prevent="openMenu($event)" class="app-container">
|
||||
<div v-loading="loading" @contextmenu.prevent="openMenu($event)" class="app-container">
|
||||
|
||||
|
||||
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||
<li >新建目录</li>
|
||||
<li >上传</li>
|
||||
<li >下载</li>
|
||||
<li >删除</li>
|
||||
<li v-show="fileLevel!==0" @click="mkdirDialogVisible=true">新建目录</li>
|
||||
<li v-show="fileLevel!==0 && fileLevel !==1">上传</li>
|
||||
<li v-show="fileLevel!==0 && fileLevel !==1">下载</li>
|
||||
<li v-show="fileLevel!==0 && fileLevel !==1">删除</li>
|
||||
<li >属性</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -17,7 +17,13 @@
|
|||
|
||||
<!--搜索框-->
|
||||
<div class="manageList-header-input">
|
||||
<el-input placeholder="/" style="height: 4px"></el-input>
|
||||
<!-- <div style="display: inline; ">-->
|
||||
<!-- <img src="@/assets/back.svg" style="height: 15px; vertical-align:middle;" />-->
|
||||
<!-- <p style="display: inline; vertical-align: middle; font-size: 12px; line-height: 15px;">上一层级</p>-->
|
||||
<!-- </div>-->
|
||||
<el-button icon="el-icon-arrow-up" @click="back2Up" style="margin-right: 10px" plain ></el-button>
|
||||
|
||||
<el-input :placeholder=path style="height: 40px" disabled></el-input>
|
||||
<!-- 输入框 双向绑定数据 自带清空 -->
|
||||
<el-button style="margin-left: 10px" type="primary" @click="dialogVisible = true">上传文件</el-button>
|
||||
<!-- <el-button style="margin-left: 10px" type="primary" @click="typeDialogVisible = true" plain>添加分类</el-button>-->
|
||||
|
|
@ -84,19 +90,22 @@
|
|||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!--新建文件夹-->
|
||||
<el-dialog
|
||||
title="添加分类"
|
||||
:visible.sync="typeDialogVisible"
|
||||
title="新建文件夹"
|
||||
:visible.sync="mkdirDialogVisible"
|
||||
custom-class="mkdirDialog"
|
||||
|
||||
width="30%"
|
||||
:before-close="typeHandleClose">
|
||||
<el-form label-position="top" label-width="80px" :model="fileType" :rules="rules" style="text-align: left">
|
||||
<el-form-item label="分类名称" prop="typeName">
|
||||
<el-input placeholder="请输入分类名称" v-model="fileType.name"></el-input>
|
||||
<el-form-item label="文件夹名称" prop="typeName">
|
||||
<el-input placeholder="请输入文件夹名称" v-model="mkdirName"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="addTypeSubmit">确 定</el-button>
|
||||
<el-button type="primary" @click="mkdir">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
|
|
@ -115,8 +124,8 @@
|
|||
</el-dialog>
|
||||
|
||||
<!--小网盘-->
|
||||
<div style="display:inline !important; -webkit-user-select: none; user-select: none;">
|
||||
<div class="file" v-for="file in fileList" :key="file.name" >
|
||||
<div style="display:inline !important; -webkit-user-select: none; user-select: none; height: 100%">
|
||||
<div v-show="!loading" class="file" v-for="file in fileList" :key="file.name" @dblclick="clickFileIcon(file)" >
|
||||
<div>
|
||||
<img class="file-svg" :src="getFileTypeIcon(file.directory,file.file,file.name)"/>
|
||||
</div>
|
||||
|
|
@ -180,6 +189,7 @@
|
|||
|
||||
|
||||
<script>
|
||||
import { saveAs } from 'file-saver'
|
||||
import { getList } from '@/api/table'
|
||||
import pageUtils from '@/utils/pageUtils'
|
||||
import { Message } from 'element-ui'
|
||||
|
|
@ -217,73 +227,17 @@ export default {
|
|||
left: 0,
|
||||
|
||||
|
||||
//文件loading
|
||||
loading:true,
|
||||
// 文件目录
|
||||
path:'/',
|
||||
// 文件层级
|
||||
fileLevel:0,
|
||||
//文件列表
|
||||
fileList:[
|
||||
{
|
||||
"name": "图片素材",
|
||||
"size": null,
|
||||
"lastModified": 1681354923825,
|
||||
"directory": true,
|
||||
"file": false
|
||||
},
|
||||
{
|
||||
"name": "学习材料",
|
||||
"size": null,
|
||||
"lastModified": 1681354931585,
|
||||
"directory": true,
|
||||
"file": false
|
||||
},
|
||||
{
|
||||
"name": "采购材料",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": true,
|
||||
"file": false
|
||||
},
|
||||
{
|
||||
"name": "文档.doc",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "幻灯片.pptx",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "破大防.pdf",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "表格.xlsx",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "表格1.xls",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
{
|
||||
"name": "ai文件.ai",
|
||||
"size": null,
|
||||
"lastModified": 1681354912484,
|
||||
"directory": false,
|
||||
"file": true
|
||||
},
|
||||
],
|
||||
|
||||
//新建文件夹名称
|
||||
mkdirName:'新建文件夹',
|
||||
//判断是否已经有showInfo
|
||||
showInfoStatus:false,
|
||||
|
||||
|
|
@ -321,7 +275,7 @@ export default {
|
|||
{ required: true, message: '请上传文件', trigger: 'blur' },
|
||||
],
|
||||
typeName:[
|
||||
{required: true, message: '请输入分类名称', trigger: 'blur' }
|
||||
{required: true, message: '请输入文件夹名称', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -344,7 +298,7 @@ export default {
|
|||
// 上传文件弹窗状态
|
||||
dialogVisible: false,
|
||||
//分类弹窗
|
||||
typeDialogVisible: false,
|
||||
mkdirDialogVisible: false,
|
||||
|
||||
//文件类型列表
|
||||
filesTypeList: null,
|
||||
|
|
@ -363,6 +317,8 @@ export default {
|
|||
methods: {
|
||||
|
||||
openMenu(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var x = e.pageX;
|
||||
var y = e.pageY;
|
||||
this.top = y -20;
|
||||
|
|
@ -455,7 +411,7 @@ export default {
|
|||
|
||||
//关闭添加分类弹窗
|
||||
typeHandleClose(){
|
||||
this.typeDialogVisible = false;
|
||||
this.mkdirDialogVisible = false;
|
||||
this.fileType.name = ""
|
||||
|
||||
},
|
||||
|
|
@ -494,96 +450,12 @@ export default {
|
|||
Message.warning("请上传文件完善信息")
|
||||
}
|
||||
},
|
||||
//添加type按钮执行
|
||||
addTypeSubmit(){
|
||||
if (this.fileType.name != null && this.fileType.name !== '') {
|
||||
//提交
|
||||
this.$api.addType(this.fileType).then((res)=>{
|
||||
console.log(res)
|
||||
if (res.status == 30) {
|
||||
Message.warning(res.msg)
|
||||
}else if (res.status == 0){
|
||||
Message.success("添加成功")
|
||||
this.typeHandleClose()
|
||||
this.getAllType()
|
||||
//使用刷新页面的形式刷新 比较粗暴
|
||||
// this.$router.go(0)
|
||||
// console.log(this.$parent.$parent)
|
||||
this.$parent.$parent.$refs.sidebar.getAllType()
|
||||
|
||||
//刷新页面
|
||||
}else {
|
||||
Message.warning("系统错误请重试")
|
||||
}
|
||||
})
|
||||
}else{
|
||||
Message.warning("请输入文件分类")
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//分类change
|
||||
selectByType(){
|
||||
// console.log(this.searchInfo.type)
|
||||
|
||||
let filesInfo = {
|
||||
filesTypeId : this.$route.params.typeId
|
||||
}
|
||||
this.$api.getFilesInfoByType(filesInfo).then((res)=>{
|
||||
if (res.status == 0) {
|
||||
this.list = res.data
|
||||
this.filesInfo.filesTypeId = this.$route.params.typeId
|
||||
//用于时间格式转换遍历
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
//暂无判空
|
||||
this.list[i].uploadTime = this.$moment(this.list[i].uploadTime).format('YYYY年MM月DD日')
|
||||
|
||||
}
|
||||
|
||||
this.listLoading = false
|
||||
}else {
|
||||
Message.warning("分类显示失败，已显示全部数据")
|
||||
this.getAllFiles()
|
||||
this.listLoading = false
|
||||
}
|
||||
})
|
||||
// console.log("非空非默认状态啊")
|
||||
|
||||
},
|
||||
|
||||
//name search TODO 要改，现在默认搜索全部类别的
|
||||
nameSearch(){
|
||||
if (this.searchInfo.keyWords != null && this.searchInfo.keyWords != '' && this.searchInfo.keyWords != undefined){
|
||||
//have search content
|
||||
let filesInfo = {
|
||||
name : this.searchInfo.keyWords
|
||||
}
|
||||
this.$api.getFilesInfoByName(filesInfo).then((res)=>{
|
||||
if (res.status == 0) {
|
||||
this.list = res.data
|
||||
}else {
|
||||
Message.warning("服务错误")
|
||||
}
|
||||
})
|
||||
}else {
|
||||
// no content 但不会出现 一般 想重置目前只能刷新页面
|
||||
this.selectByType()
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
//获取当前分类名字
|
||||
getFileTypeById(){
|
||||
let fileType = {
|
||||
filesTypeId : this.$route.params.typeId
|
||||
}
|
||||
this.$api.getFileTypeById(fileType).then((res)=>{
|
||||
if (res.status == 0) {
|
||||
this.activeFileType = res.data.name
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
//判断文件类型并返回文件类型图片
|
||||
getFileTypeIcon(directory,file,name){
|
||||
|
|
@ -595,23 +467,101 @@ export default {
|
|||
let nameN = name.split('.')
|
||||
let fileType = nameN[1]
|
||||
|
||||
if (fileType == 'doc' || fileType == 'docx') {
|
||||
return require('@/assets/file_icon/word3.svg')
|
||||
}else if (fileType == 'ppt' || fileType == 'pptx'){
|
||||
return require('@/assets/file_icon/ppt3.svg')
|
||||
}else if (fileType == 'xls' || fileType == "xlsx") {
|
||||
return require('@/assets/file_icon/excel3.svg')
|
||||
}else if (fileType == 'pdf'){
|
||||
return require('@/assets/file_icon/pdf3.svg')
|
||||
}else {
|
||||
return require("@/assets/file_icon/unu.svg")
|
||||
switch(fileType){
|
||||
case 'doc':
|
||||
case 'docx':
|
||||
return require('@/assets/file_icon/word3.svg')
|
||||
case 'ppt':
|
||||
case 'pptx':
|
||||
return require('@/assets/file_icon/ppt3.svg')
|
||||
case 'xls':
|
||||
case 'xlsx':
|
||||
return require('@/assets/file_icon/excel3.svg')
|
||||
case 'pdf':
|
||||
return require('@/assets/file_icon/pdf3.svg')
|
||||
default:
|
||||
return require("@/assets/file_icon/unu.svg")
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
//获取目录下文件
|
||||
getFilesDirMeta(){
|
||||
this.loading = true
|
||||
let path = {
|
||||
path : this.path
|
||||
}
|
||||
this.$api.getFilesDirMeta(path).then((res)=>{
|
||||
|
||||
if (res.status == 0) {
|
||||
this.fileList = res.data
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//点击文件图表 进入下一层目录或打开文件
|
||||
clickFileIcon(file){
|
||||
// 判断是否为文件夹
|
||||
if (file.directory){
|
||||
//是 进入
|
||||
this.path = this.path + file.name + "/"
|
||||
this.getFilesDirMeta()
|
||||
this.fileLevel = this.fileLevel + 1
|
||||
}else {
|
||||
//不是 直接下载
|
||||
|
||||
//第一个是：Blob、File、Url 可以是二进制流、文件、URL的地址。
|
||||
//第二个是：文件的名字
|
||||
//第三个是：可选的object对象
|
||||
|
||||
saveAs("http://"+ window.location.host + "/api/files"+this.path + file.name,file.name)
|
||||
}
|
||||
console.log(file.name)
|
||||
console.log(file.directory)
|
||||
},
|
||||
//返回上一层
|
||||
back2Up(){
|
||||
//先判断是否处于根目录
|
||||
if (this.fileLevel == 0){
|
||||
Message.success("已经是根目录啦")
|
||||
}else {
|
||||
//去除最后一层
|
||||
let str = this.path;
|
||||
let arr = str.split("/");
|
||||
arr.pop();
|
||||
arr.pop();
|
||||
str = arr.join("/") + "/";
|
||||
console.log(str);
|
||||
this.path = str;
|
||||
this.getFilesDirMeta()
|
||||
this.fileLevel = this.fileLevel - 1
|
||||
}
|
||||
},
|
||||
// 新建文件夹
|
||||
mkdir(){
|
||||
let path = {
|
||||
path : this.path + this.mkdirName
|
||||
}
|
||||
|
||||
this.$api.mkdir(path).then((res) =>{
|
||||
if (res.status == 0) {
|
||||
//添加成功
|
||||
this.getFilesDirMeta()
|
||||
this.mkdirDialogVisible = false
|
||||
}else {
|
||||
//添加失败
|
||||
Message.warning("添加文件夹失败，该文件夹可能已经存在~")
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getFileTypeById()
|
||||
|
||||
this.getFilesDirMeta()
|
||||
},
|
||||
watch: {
|
||||
visible(value) {
|
||||
|
|
@ -637,7 +587,11 @@ export default {
|
|||
width: 8rem;
|
||||
}
|
||||
|
||||
|
||||
/deep/ .el-dialog.mkdirDialog{
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
border-radius: 5px;
|
||||
backdrop-filter: saturate(50%) blur(8px);
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -4824,6 +4824,11 @@
|
|||
"loader-utils" "^1.2.3"
|
||||
"schema-utils" "^2.5.0"
|
||||
|
||||
"file-saver@^2.0.5":
|
||||
"integrity" "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
|
||||
"resolved" "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz"
|
||||
"version" "2.0.5"
|
||||
|
||||
"file-uri-to-path@1.0.0":
|
||||
"integrity" "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
|
||||
"resolved" "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue