|
|
|
<template>
|
|
|
|
<div class="filemange_container" v-loading="subloading" element-loading-text="数据加载中...">
|
|
|
|
<div class="use_button">
|
|
|
|
<el-button type="primary" icon="el-icon-edit" @click="dirbox = true">创建目录</el-button>
|
|
|
|
<!-- <el-button type="primary" icon="el-icon-edit" @click="rmdirm">删除目录</el-button>
|
|
|
|
<el-button type="primary" icon="el-icon-edit">重命名</el-button> -->
|
|
|
|
</div>
|
|
|
|
<div v-on:click="fileTableMClick">
|
|
|
|
<!-- 子目录数据列表 如果不需要显示空数据提示,可以用css隐藏-->
|
|
|
|
<el-table
|
|
|
|
:data="dirdata"
|
|
|
|
empty-text="暂无子目录数据"
|
|
|
|
border
|
|
|
|
style="width: 100%" class="filesmd verleft">
|
|
|
|
<!-- <el-table-column
|
|
|
|
align="center"
|
|
|
|
prop="date"
|
|
|
|
label="时间"
|
|
|
|
width="auto">
|
|
|
|
</el-table-column> -->
|
|
|
|
<el-table-column
|
|
|
|
align="left"
|
|
|
|
prop="name"
|
|
|
|
label="名称">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
align="left"
|
|
|
|
label="类型"
|
|
|
|
width="auto">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<div class="type_file_click">
|
|
|
|
<el-tooltip content="进入子目录" placement="bottom-start" effect="light">
|
|
|
|
<a :href="'#/filemange/subfile?id='+scope.row.id">
|
|
|
|
<!-- <el-button type="warning" icon="el-icon-notebook-1">{{scope.row.name}}</el-button> -->
|
|
|
|
<img src="../../common/img/file.png" alt="图片"/>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
align="center"
|
|
|
|
label="操作"
|
|
|
|
width="auto">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<div class="file_caozuo">
|
|
|
|
<el-button size="mini" :filenames="scope.row.name" mark="rename">重命名</el-button>
|
|
|
|
<!-- <el-button size="mini">下载</el-button> -->
|
|
|
|
</div>
|
|
|
|
<div class="file_caozuo2">
|
|
|
|
<el-button size="mini" :realpath="scope.row.frealpath" mark="movefiledir">移动</el-button>
|
|
|
|
<el-button size="mini" mark="dirdelete" :filenames="scope.row.name" type="danger">删除</el-button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</div>
|
|
|
|
<!-- 创建目录弹框 -->
|
|
|
|
<el-dialog title="创建目录" :visible.sync="dirbox">
|
|
|
|
<el-form :model="dirform">
|
|
|
|
<el-form-item label="目录名称" :label-width="formLabelWidth">
|
|
|
|
<el-input v-model="dirform.dir" autocomplete="off"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click="dirbox = false">取 消</el-button>
|
|
|
|
<el-button type="primary" @click="mkdirs" :loading="mkdirloadings">确 定</el-button>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
<!-- 重新命名弹框 -->
|
|
|
|
<el-dialog title="重命名" :visible.sync="renamebox">
|
|
|
|
<el-form :model="renamefileform">
|
|
|
|
<el-form-item label="新名称" :label-width="formLabelWidth">
|
|
|
|
<el-input v-model="renamefileform.to" autocomplete="off">
|
|
|
|
<template v-if="filesuffix" slot="append">{{filesuffix}}</template>
|
|
|
|
</el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click="renamebox = false">取 消</el-button>
|
|
|
|
<el-button type="primary" @click="renameFileDir" :loading="mkdirloadings">确 定</el-button>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
<!-- 移动目录弹框 -->
|
|
|
|
<el-dialog title="目录移动弹出框" :visible.sync="movebox">
|
|
|
|
<el-form :model="movefileform">
|
|
|
|
<el-form-item label="当前位置" :label-width="formLabelWidth">
|
|
|
|
<el-input v-model="movefileform.from" autocomplete="off">
|
|
|
|
|
|
|
|
</el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="目标位置(请参考当前位置的格式填写目标位置,需要带上当前的文件名称)" :label-width="formLabelWidth">
|
|
|
|
<el-input v-model="movefileform.to" autocomplete="off"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click="movebox = false">取 消</el-button>
|
|
|
|
<el-button type="primary" @click="moveFileDir" :loading="mkdirloadings">确 定</el-button>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
//import { mapGetters } from 'vuex'
|
|
|
|
import {requesterr, mirlist, mkdir, rmdirs, deletefile, renamefile, movefiledir} from '@/api/user'
|
|
|
|
import EventBus from '@/utils/EventBus.js'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
|
|
// 实例还没挂载
|
|
|
|
created() {
|
|
|
|
this.getFileData();
|
|
|
|
//console.log(this.imgurl);
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
// 当前目录子目录数据
|
|
|
|
dirdata: [],
|
|
|
|
|
|
|
|
subloading: false, //切换目录loading
|
|
|
|
mkdirloadings: false, //创建目录loading
|
|
|
|
// 创建目录弹出框数据
|
|
|
|
dirbox: false,
|
|
|
|
dirform: {
|
|
|
|
dir: '',
|
|
|
|
parent: ''
|
|
|
|
},
|
|
|
|
formLabelWidth: '',
|
|
|
|
|
|
|
|
//删除目录数据
|
|
|
|
rmdirform: {
|
|
|
|
dir: '',
|
|
|
|
parent: ''
|
|
|
|
},
|
|
|
|
|
|
|
|
// 重命名文件数据
|
|
|
|
renamebox: false,
|
|
|
|
filesuffix:false,
|
|
|
|
renamefileform: {
|
|
|
|
from: '',
|
|
|
|
to: '',
|
|
|
|
parent: ''
|
|
|
|
},
|
|
|
|
|
|
|
|
// 移动目录或者文件数据
|
|
|
|
movebox: false,
|
|
|
|
movefileform: {
|
|
|
|
from: '',
|
|
|
|
to: ''
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
getFileData() {
|
|
|
|
|
|
|
|
let thiss = this;
|
|
|
|
this.subloading = true;
|
|
|
|
mirlist().then(response => {
|
|
|
|
let datamain = response.data;
|
|
|
|
//console.log(maindata);
|
|
|
|
this.dirdata = []
|
|
|
|
if (datamain.code == 1) {
|
|
|
|
let maindata = datamain.data.menus;
|
|
|
|
//console.log(maindata.directories.length);
|
|
|
|
if (maindata) {
|
|
|
|
this.dirdata = this.forObjectData(maindata);
|
|
|
|
}
|
|
|
|
|
|
|
|
// this.dirform.parent = maindata.realpath; //获取当前目录的位置 创建目录
|
|
|
|
// this.rmdirform.parent = maindata.realpath; //获取当前目录的位置 删除目录
|
|
|
|
// this.renamefileform.parent = maindata.realpath; //获取当前目录的位置 重命名
|
|
|
|
// this.movefileform.from = maindata.realpath; // 移动目录
|
|
|
|
//console.log(this.movefileform.from);
|
|
|
|
}
|
|
|
|
this.subloading = false;
|
|
|
|
}).catch(error => {
|
|
|
|
requesterr(this, error);
|
|
|
|
this.subloading = false;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
forObjectData(objectd) {
|
|
|
|
let newObject = null, arrObjs = [];
|
|
|
|
|
|
|
|
Object.keys(objectd).forEach(item => {
|
|
|
|
let names = null;
|
|
|
|
if (objectd[item].filename) {
|
|
|
|
names = objectd[item].filename+'.'+objectd[item].extension;
|
|
|
|
}
|
|
|
|
newObject = {
|
|
|
|
suffix:objectd[item].extension || '',
|
|
|
|
image: objectd[item].path,
|
|
|
|
name: names || objectd[item].directory,
|
|
|
|
id: objectd[item].id,
|
|
|
|
frealpath: objectd[item].realpath || objectd[item].directory
|
|
|
|
}
|
|
|
|
|
|
|
|
arrObjs.push(newObject);
|
|
|
|
});
|
|
|
|
|
|
|
|
return arrObjs;
|
|
|
|
console.log(arrObjs);
|
|
|
|
},
|
|
|
|
|
|
|
|
// 创建目录
|
|
|
|
mkdirs() {
|
|
|
|
let thiss = this;
|
|
|
|
if (!this.dirform.dir) {
|
|
|
|
thiss.$message({showClose: true,message: '目录名不能为空',type: 'error'});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
//console.log(this.dirform);
|
|
|
|
this.mkdirloadings = true;
|
|
|
|
mkdir(this.dirform).then(response => {
|
|
|
|
let datamain = response.data;
|
|
|
|
if (datamain.code == 1) {
|
|
|
|
|
|
|
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
|
|
|
|
//EventBus.$emit('menuopemdsc'); //触发菜单栏刷新
|
|
|
|
this.getFileData();
|
|
|
|
|
|
|
|
this.dirform.dir = '';
|
|
|
|
thiss.$message({showClose: true,message: datamain.msg, type: 'success'});
|
|
|
|
//this.subloading = false;
|
|
|
|
} else {
|
|
|
|
thiss.$message({showClose: true,message: datamain.err, type: 'error'});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.mkdirloadings = false;
|
|
|
|
this.dirbox = false;
|
|
|
|
}).catch(error => {
|
|
|
|
//console.log(0);
|
|
|
|
this.mkdirloadings = false;
|
|
|
|
requesterr(this, error);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 删除目录
|
|
|
|
rmdirm() {
|
|
|
|
let thiss = this;
|
|
|
|
this.subloading = true;
|
|
|
|
//console.log(this.rmdirform);
|
|
|
|
rmdirs(this.rmdirform).then(response => {
|
|
|
|
let datamain = response.data;
|
|
|
|
let maindata = datamain.data.dirTree;
|
|
|
|
if (datamain.code == 1) {
|
|
|
|
|
|
|
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
|
|
|
|
this.getFileData();
|
|
|
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'});
|
|
|
|
//this.subloading = false;
|
|
|
|
} else {
|
|
|
|
thiss.$message({showClose: true,message: datamain.err,type: 'error'});
|
|
|
|
}
|
|
|
|
this.subloading = false;
|
|
|
|
//this.dirbox = false;
|
|
|
|
}).catch(error => {
|
|
|
|
requesterr(this, error);
|
|
|
|
this.subloading = false;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 移动目录或者文件
|
|
|
|
moveFileDir() {
|
|
|
|
if (!this.movefileform.to || !this.movefileform.from) {
|
|
|
|
this.$message({showClose: true,message: '不能为空',type: 'error'});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let thiss = this;
|
|
|
|
this.subloading = true;
|
|
|
|
//console.log(this.rmfileform);
|
|
|
|
movefiledir(this.movefileform).then(response => {
|
|
|
|
let datamain = response.data;
|
|
|
|
if (datamain.code == 1) {
|
|
|
|
console.log(66666);
|
|
|
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
|
|
|
|
this.getFileData();
|
|
|
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'});
|
|
|
|
//this.subloading = false;
|
|
|
|
} else {
|
|
|
|
thiss.$message({showClose: true,message: datamain.err,type: 'error'});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.subloading = false;
|
|
|
|
|
|
|
|
this.movebox = false;
|
|
|
|
}).catch(error => {
|
|
|
|
this.subloading = false;
|
|
|
|
requesterr(this, error);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 重命名文件和目录
|
|
|
|
renameFileDir() {
|
|
|
|
if (!this.renamefileform.to) {
|
|
|
|
this.$message({showClose: true,message: '新名称不能为空',type: 'error'});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.filesuffix) {
|
|
|
|
this.renamefileform.to += this.filesuffix;
|
|
|
|
}
|
|
|
|
let thiss = this;
|
|
|
|
this.subloading = true;
|
|
|
|
//console.log(this.rmfileform);
|
|
|
|
renamefile(this.renamefileform).then(response => {
|
|
|
|
let datamain = response.data;
|
|
|
|
if (datamain.code == 1) {
|
|
|
|
|
|
|
|
EventBus.$emit('mkdirSuccess'); //触发菜单栏刷新
|
|
|
|
this.getFileData();
|
|
|
|
thiss.$message({showClose: true,message: datamain.msg,type: 'success'});
|
|
|
|
//this.subloading = false;
|
|
|
|
} else {
|
|
|
|
thiss.$message({showClose: true,message: datamain.err,type: 'error'});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.subloading = false;
|
|
|
|
|
|
|
|
this.renamebox = false;
|
|
|
|
}).catch(error => {
|
|
|
|
this.subloading = false;
|
|
|
|
requesterr(this, error);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// table块事件监听
|
|
|
|
fileTableMClick(e) {
|
|
|
|
let dangQian = e.target, labelname = dangQian.tagName.toLowerCase(), chufazhe = e.currentTarget; //currentTarget得到调用当前函数的元素
|
|
|
|
let getbutton = dangQian, objmark = null;
|
|
|
|
if (labelname == 'span') {
|
|
|
|
//console.log(dangQian.parentNode);
|
|
|
|
getbutton = dangQian.parentNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
objmark = getbutton.getAttribute('mark');
|
|
|
|
|
|
|
|
// 点击删除目录
|
|
|
|
if (objmark == 'dirdelete') {
|
|
|
|
this.rmdirform.dir = getbutton.getAttribute('filenames');
|
|
|
|
this.rmdirm();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 点击重命名文件和目录
|
|
|
|
if (objmark == 'rename') {
|
|
|
|
this.renamefileform.from = getbutton.getAttribute('filenames');
|
|
|
|
this.filesuffix = getbutton.getAttribute('suffixs');
|
|
|
|
this.renamefileform.to = '';
|
|
|
|
this.renamebox = true;
|
|
|
|
//this.renameFileDir();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 点击移动目录或文件
|
|
|
|
if (objmark == 'movefiledir') {
|
|
|
|
//this.movefileform.from = getbutton.getAttribute('filenames');
|
|
|
|
this.movefileform.from = getbutton.getAttribute('realpath');
|
|
|
|
this.movefileform.to = '';
|
|
|
|
this.movebox = true;
|
|
|
|
//this.renameFileDir();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
//console.log(dangQian);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
|
|
.filemange_container{
|
|
|
|
padding:26px 5% 47px 5%;
|
|
|
|
.block{margin:0 0 28px 0;}
|
|
|
|
.sou_bottom{margin-left:10px;}
|
|
|
|
.use_button{margin:15px 0 16px 0;}
|
|
|
|
// .use_button>button{margin:0 10px 10px 0;}
|
|
|
|
.file_caozuo2>button{margin-top:6px;}
|
|
|
|
.el-table td{padding:9px 0}
|
|
|
|
.folder_bottom a{margin:0 6px;}
|
|
|
|
.el-table__body-wrapper img{width:100px;height:71px;}
|
|
|
|
.el-drawer__body{text-align:center;padding:0 10% 20px 10%;}
|
|
|
|
.request_main{text-align:center;margin:12px 0;}
|
|
|
|
.addimgtext{line-height:25px;display:inline-block;color:#8c939d;vertical-align: middle;}
|
|
|
|
.el-upload--picture-card i{vertical-align:middle;}
|
|
|
|
.type_file_click img{width:64px;height:48px;}
|
|
|
|
.type_file_click a{display:block;}
|
|
|
|
// .el-table .is-center{text-align:left;}
|
|
|
|
}
|
|
|
|
</style>
|