467 lines
17 KiB
Vue
467 lines
17 KiB
Vue
<template>
|
|
<div class="pageBackground">
|
|
<div class="breadHeader">文件管理/列表</div>
|
|
<div class="filecontent">
|
|
<a-layout>
|
|
<a-layout-sider>
|
|
<div class="siderHeader">文件目录</div>
|
|
<div class="flodContent">
|
|
<a-dropdown :trigger="['contextmenu']">
|
|
<a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys"
|
|
v-model:selectedKeys="selectedKeys" @select="changeSelect">
|
|
<a-tree-node v-for="itemNode in treeData" :key="itemNode.id"
|
|
:title="itemNode.title" :value="itemNode">
|
|
</a-tree-node>
|
|
</a-directory-tree>
|
|
<template #overlay>
|
|
<a-menu class="menu" @click="menuClick">
|
|
<a-menu-item key="1">添加</a-menu-item>
|
|
<a-menu-item key="2">重命名</a-menu-item>
|
|
<a-menu-item key="3">删除</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
|
|
|
|
</div>
|
|
</a-layout-sider>
|
|
<a-layout-content>
|
|
<div class="main">
|
|
<div class="quarter-div">
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: center;">
|
|
<img style="margin-top: 10px;" :src="guaz" />
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div style="margin-top: 14px">598</div>
|
|
<div>文件总数</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div class="quarter-div">
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: center;">
|
|
<img style="margin-top: 10px;" :src="guaz" />
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div style="margin-top: 14px">20</div>
|
|
<div>图片</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div class="quarter-div">
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: center;">
|
|
<img style="margin-top: 10px;" :src="guaz" />
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div style="margin-top: 14px">45</div>
|
|
<div>音频</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div class="quarter-div">
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: center;">
|
|
<img style="margin-top: 10px;" :src="guaz" />
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div style="margin-top: 14px">98</div>
|
|
<div>数据库文件</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div class="quarter-div">
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: center;">
|
|
<img style="margin-top: 10px;" :src="guaz" />
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div style="margin-top: 14px">112</div>
|
|
<div>视频</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div class="quarter-div">
|
|
<a-row>
|
|
<a-col :span="12" style="text-align: center;">
|
|
<img style="margin-top: 10px;" :src="guaz" />
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div style="margin-top: 14px">36</div>
|
|
<div>文档</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 20px;">
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-form layout="inline">
|
|
<a-form-item>
|
|
<a-input placeholder="请输入" v-model="searchFile.queryCondition"></a-input>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-button type="primary" icon="search" style="margin-left: 21px" @click="searchgetFileList">查询</a-button>
|
|
<a-button type="primary" icon="reload" style="margin-left: 8px" @click="reloadFileList">重置</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-col>
|
|
<a-col :span="12" style="text-align: right;">
|
|
<input
|
|
type="file"
|
|
@change="getUpFileData" style="display:none;" id="file">
|
|
<a-button type="primary" style="margin-left: 8px" @click="clickfile">
|
|
<a-icon type="upload"/>
|
|
文件上传
|
|
</a-button>
|
|
</input>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div style="margin-top: 15px">
|
|
<a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" class="fileTable"
|
|
:dataSource="dataSource" :pagination="searchFileTable" :loading="loading"
|
|
@change="handleTableChange">
|
|
<span slot="action" slot-scope="text, record">
|
|
<a @click="download(record,$event)">下载</a> <a @click="viewFile(record,$event)">预览</a> <a @click="DeleteFile(record,$event)">删除</a>
|
|
</span>
|
|
</a-table>
|
|
</div>
|
|
</a-layout-content>
|
|
</a-layout>
|
|
</div>
|
|
<a-modal v-model:open="isopen" :title="modalTitle" ok-text="确认" cancel-text="取消" @ok="hideModal">
|
|
<a-input placeholder="请输入" v-model="dirName" style="color: #000000 !important"></a-input>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import guaz from '@assets/guaz.png'
|
|
import {createDir,logicDelDir,renameDir,dirtreeList} from '@/api/dirapi'
|
|
import {downloadFile,filePreview,logicDeleteFile,pageList,uoloadFile} from '@/api/fileapi'
|
|
export default {
|
|
name: "fileManage",
|
|
data() {
|
|
return {
|
|
dirName:"",
|
|
guaz,
|
|
expandedKeys: [],
|
|
selectedKeys: [],
|
|
treeData: [
|
|
],
|
|
isopen:false,
|
|
columns: [
|
|
{
|
|
title: "序号",
|
|
width: 70,
|
|
customRender: (text, record, index) => `${index + 1}`,
|
|
},
|
|
{
|
|
title: '文件名称',
|
|
align: "center",
|
|
dataIndex: 'fileName',
|
|
width: 120,
|
|
sorter: true
|
|
},
|
|
{
|
|
title: '文件后缀',
|
|
align: "center",
|
|
width: 100,
|
|
dataIndex: 'fileSuffix',
|
|
},
|
|
{
|
|
title: '文件大小',
|
|
align: "center",
|
|
width: 120,
|
|
dataIndex: 'fileSize'
|
|
},
|
|
|
|
{
|
|
title: '文件类型',
|
|
align: "center",
|
|
width: 80,
|
|
dataIndex: 'fileTypeName'
|
|
},
|
|
{
|
|
title: '创建人',
|
|
align: "center",
|
|
width: 100,
|
|
dataIndex: 'createByName'
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
scopedSlots: { customRender: 'action' },
|
|
align: "center",
|
|
width: 170
|
|
}
|
|
|
|
],
|
|
/* 分页参数 */
|
|
searchFileTable: {
|
|
current: 1,
|
|
pageSize: 10,
|
|
pageSizeOptions: ['5', '10', '20','50','100'],
|
|
showTotal: (total, range) => {
|
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
},
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
total: 0
|
|
},
|
|
dataSource: [],
|
|
loading: false,
|
|
selectedRowKeys: [],
|
|
selectId:"0",
|
|
modalTitle:"",
|
|
modelType:"",
|
|
searchFile:{
|
|
"dirId":"",
|
|
"queryCondition":"",
|
|
"pageNum":"",
|
|
"pageSize":"",
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
this.getDirList();
|
|
},
|
|
computed: {
|
|
uploadAction() {
|
|
return window._CONFIG['domianURL'] + "/file/uoloadFile";
|
|
},
|
|
},
|
|
methods: {
|
|
clickfile(){
|
|
document.getElementById("file").click();
|
|
},
|
|
getUpFileData(e){
|
|
if(this.selectId == "0"){
|
|
this.$message.warning("必须选择查询目录");
|
|
return;
|
|
}
|
|
let formData = new FormData()
|
|
const file = e.target.files[0];
|
|
formData.append('dirId', this.selectId);
|
|
formData.append('fileShare', false);
|
|
formData.append("fileName",document.getElementById("file").files[0].name);
|
|
formData.append("fileSuffix",'.'+(document.getElementById("file").files[0].name.split('.').slice(-1)[0]));
|
|
formData.append("fileSize",(document.getElementById("file").files[0].size/1024).toFixed(2));
|
|
formData.append("md5Value",Date.now());
|
|
formData.append("shareTotal","0");
|
|
formData.append("shareIndex","0");
|
|
formData.append("currShareM5","0");
|
|
formData.append("file",e.target.files[0]);
|
|
uoloadFile(formData).then((res) => {
|
|
if (res.success) {
|
|
this.searchgetFileList();
|
|
}
|
|
this.$message.warning(res.message);
|
|
})
|
|
},
|
|
download(item){
|
|
let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
|
|
window.open(apiBaseUrl+"/file/downloadFile?fileId="+item.id);
|
|
},
|
|
viewFile(item){
|
|
filePreview({fileId:item.id}).then((res) => {
|
|
if (res.success) {
|
|
window.open("http://"+res.result,"_blank");
|
|
} else {
|
|
this.$message.warning(res.message);
|
|
}
|
|
});
|
|
},
|
|
DeleteFile(item){
|
|
var that = this;
|
|
that.$confirm({
|
|
title: "确认删除",
|
|
content: "是否删除选中文件?",
|
|
onOk: function () {
|
|
logicDeleteFile({id:item.id}).then((res) => {
|
|
that.$message.warning(res.message);
|
|
that.searchgetFileList();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
onSelectChange(selectedRowKeys, selectedRows) {
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
},
|
|
handleTableChange() {
|
|
|
|
},
|
|
reloadFileList(){
|
|
this.searchFile.queryCondition = "";
|
|
this.searchFile.pageNum = 1;
|
|
this.searchFile.pageSize = 10;
|
|
this.getFileList();
|
|
},
|
|
searchgetFileList(){
|
|
this.searchFile.dirId = this.selectId;
|
|
this.searchFile.pageNum = this.searchFileTable.current;
|
|
this.searchFile.pageSize = this.searchFileTable.pageSize;
|
|
this.getFileList();
|
|
},
|
|
getFileList(){
|
|
if(this.selectId == "0"){
|
|
this.$message.warning("必须选择查询目录");
|
|
return;
|
|
}
|
|
pageList(this.searchFile).then((res) => {
|
|
if (res.success) {
|
|
this.dataSource = res.result.rows
|
|
this.searchFileTable.total = res.result.total
|
|
} else {
|
|
this.$message.warning(res.message);
|
|
}
|
|
});
|
|
},
|
|
hideModal(){
|
|
this.isopen =false;
|
|
switch(this.modelType) {
|
|
case "create":
|
|
createDir({pid:this.selectId,dirName:this.dirName}).then((res) => {
|
|
if (res.success) {
|
|
this.treeData = res.result
|
|
this.getDirList();
|
|
} else {
|
|
this.$message.warning(res.message);
|
|
}
|
|
});
|
|
break;
|
|
case "rename":
|
|
renameDir({id:this.selectId,dirName:this.dirName}).then((res) => {
|
|
if (res.success) {
|
|
this.treeData = res.result
|
|
this.getDirList();
|
|
} else {
|
|
this.$message.warning(res.message);
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
},
|
|
getDirList(){
|
|
dirtreeList({dirName:""}).then((res) => {
|
|
if (res.success) {
|
|
this.treeData = res.result
|
|
} else {
|
|
this.$message.warning(res.message);
|
|
}
|
|
});
|
|
},
|
|
menuClick(value){
|
|
switch(value.key) {
|
|
case "1":
|
|
this.createDir();
|
|
break;
|
|
case "2":
|
|
this.renameDir();
|
|
break;
|
|
case "3":
|
|
this.logicDelDir();
|
|
break;
|
|
}
|
|
},
|
|
createDir(){
|
|
this.modalTitle = "添加节点";
|
|
this.isopen =true;
|
|
this.modelType = "create";
|
|
this.dirName="";
|
|
},
|
|
logicDelDir(){
|
|
var that = this;
|
|
this.$confirm({
|
|
title: "确认删除",
|
|
content: "是否删除选中目录?",
|
|
onOk: function () {
|
|
logicDelDir({id:that.selectId}).then((res) => {
|
|
that.$message.warning(res.message);
|
|
that.getDirList();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
renameDir(){
|
|
this.modalTitle = "重命名节点";
|
|
this.isopen =true;
|
|
this.modelType = "rename";
|
|
this.dirName="";
|
|
},
|
|
changeSelect(selectedKeys,e){
|
|
this.selectId = e.node.dataRef.id
|
|
this.searchgetFileList();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pageBackground {
|
|
background: #dee3ee;
|
|
height: 100vh;
|
|
font-size: 23px;
|
|
}
|
|
|
|
.breadHeader {
|
|
height: 40px;
|
|
background: #FFFFFF;
|
|
line-height: 40px;
|
|
font-size: 18px;
|
|
color: #a3a8bb;
|
|
padding: 0 100px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.menu{
|
|
background: #ffffff !important;
|
|
}
|
|
.filecontent {
|
|
height: calc(100vh - 48px);
|
|
padding: 20px 30px;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.siderHeader {
|
|
height: 50px;
|
|
color: #212224;
|
|
line-height: 50px;
|
|
font-size: 20px;
|
|
background: #ebf0ff;
|
|
text-align: center;
|
|
}
|
|
|
|
.flodContent {
|
|
height: calc(100vh - 230px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
height: 100px;
|
|
/* position: absolute; */
|
|
}
|
|
|
|
.quarter-div {
|
|
width: 15%;
|
|
height: 100px;
|
|
float: left;
|
|
margin-right: 26px;
|
|
background: #edf2ff;
|
|
border: 1px solid #d3e5fd;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/deep/ .ant-layout-sider {
|
|
background: #f6f8ff !important;
|
|
border: 1px solid #dfe4f3;
|
|
border-radius: 10px;
|
|
height: calc(100vh - 180px);
|
|
min-width: 200px !important;
|
|
margin-left: 0px;
|
|
margin-right: 50px;
|
|
}
|
|
</style> |