|
|
|
|
@ -1,23 +1,107 @@
@@ -1,23 +1,107 @@
|
|
|
|
|
<template> |
|
|
|
|
<div class="filemange_container"> |
|
|
|
|
<div class="mkdirm"> |
|
|
|
|
<el-button type="primary" @click="dirbox = true">创建目录</el-button> |
|
|
|
|
<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="form"> |
|
|
|
|
<el-form :model="dirform"> |
|
|
|
|
<el-form-item label="目录名称" :label-width="formLabelWidth"> |
|
|
|
|
<el-input v-model="form.name" autocomplete="off"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="父级目录" :label-width="formLabelWidth"> |
|
|
|
|
<el-select v-model="form.region" placeholder="请选择父级目录"> |
|
|
|
|
<el-option label="区域一" value="shanghai"></el-option> |
|
|
|
|
<el-option label="区域二" value="beijing"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
<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="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> |
|
|
|
|
@ -26,32 +110,323 @@
@@ -26,32 +110,323 @@
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
//import { mapGetters } from 'vuex' |
|
|
|
|
import { 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, |
|
|
|
|
form: { |
|
|
|
|
name: '', |
|
|
|
|
region: '', |
|
|
|
|
date1: '', |
|
|
|
|
date2: '', |
|
|
|
|
delivery: false, |
|
|
|
|
type: [], |
|
|
|
|
resource: '', |
|
|
|
|
desc: '' |
|
|
|
|
dirform: { |
|
|
|
|
dir: '', |
|
|
|
|
parent: '' |
|
|
|
|
}, |
|
|
|
|
formLabelWidth: '', |
|
|
|
|
|
|
|
|
|
//删除目录数据 |
|
|
|
|
rmdirform: { |
|
|
|
|
dir: '', |
|
|
|
|
parent: '' |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 重命名文件数据 |
|
|
|
|
renamebox: false, |
|
|
|
|
filesuffix:false, |
|
|
|
|
renamefileform: { |
|
|
|
|
from: '', |
|
|
|
|
to: '', |
|
|
|
|
parent: '' |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 移动目录或者文件数据 |
|
|
|
|
movebox: false, |
|
|
|
|
movefileform: { |
|
|
|
|
from: '', |
|
|
|
|
to: '' |
|
|
|
|
}, |
|
|
|
|
formLabelWidth: '120px' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
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 => { |
|
|
|
|
if (error.response) { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
|
|
|
|
} else if (error.request) { |
|
|
|
|
thiss.$message({showClose: true,message: error,type: 'error'}); |
|
|
|
|
} else { |
|
|
|
|
thiss.$message({showClose: true,message: error.message, type: '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); |
|
|
|
|
if (error.response) { |
|
|
|
|
thiss.mkdirloadings = false; |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
|
|
|
|
} else if (error.request) { |
|
|
|
|
thiss.$message({showClose: true,message: error,type: 'error'}); |
|
|
|
|
} else { |
|
|
|
|
thiss.$message({showClose: true,message: error.message, type: '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 => { |
|
|
|
|
if (error.response) { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
|
|
|
|
} else if (error.request) { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
|
|
|
|
} else { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: '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; |
|
|
|
|
if (error.response) { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
|
|
|
|
} else if (error.request) { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
|
|
|
|
} else { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: '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; |
|
|
|
|
if (error.response) { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
|
|
|
|
} else if (error.request) { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: 'error'}); |
|
|
|
|
} else { |
|
|
|
|
thiss.$message({showClose: true,message: error.response.data.err,type: '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" scoped> |
|
|
|
|
.mkdirm{text-align:center;margin:20% 0 0 0;} |
|
|
|
|
<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> |
|
|
|
|
|
wen
2 years ago