492 lines
18 KiB
Vue
492 lines
18 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">{{fileNum.total}}</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">{{fileNum.pictures}}</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">{{fileNum.audio}}</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">{{fileNum.dbfile}}</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">{{fileNum.video}}</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">{{fileNum.document}}</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;">
|
|
<a-button type="primary" style="margin-left: 8px" @click="clickfile">
|
|
<a-icon type="upload"/>
|
|
文件上传
|
|
</a-button>
|
|
</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>
|
|
<uploadModal ref="modalForm"></uploadModal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import uploadModal from './modules/uploadModal'
|
|
import guaz from '@assets/guaz.png'
|
|
import {createDir,logicDelDir,renameDir,dirtreeList} from '@/api/dirapi'
|
|
import {downloadFile,filePreview,logicDeleteFile,pageList,uoloadFile,countFileNum} from '@/api/fileapi'
|
|
export default {
|
|
name: "fileManage",
|
|
components: {
|
|
uploadModal
|
|
},
|
|
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:"",
|
|
modalTitle:"",
|
|
modelType:"",
|
|
searchFile:{
|
|
"dirId":"",
|
|
"queryCondition":"",
|
|
"pageNum":"",
|
|
"pageSize":"",
|
|
},
|
|
fileNum:{
|
|
document:0,
|
|
pictures:0,
|
|
video:0,
|
|
dbfile:0,
|
|
audio:0,
|
|
total:0
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
this.getDirList();
|
|
this.getcountFileNum();
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
clickfile(){
|
|
if(this.selectId.length <= 0){
|
|
this.$message.warning("必须选择文件上传目录");
|
|
return;
|
|
}
|
|
this.$refs.modalForm.add();
|
|
this.$refs.modalForm.title = "文件上传";
|
|
this.$refs.modalForm.dirId = this.searchFile.dirId;
|
|
},
|
|
getcountFileNum(){
|
|
var that = this;
|
|
countFileNum({}).then((res) => {
|
|
if (res.success) {
|
|
res.result.forEach((item,index)=>{
|
|
that.setcountFileNum(item);
|
|
})
|
|
} else {
|
|
this.$message.warning(res.message);
|
|
}
|
|
});
|
|
},
|
|
setcountFileNum(item){
|
|
switch (item.FILETYPE) {
|
|
case "document":
|
|
this.fileNum.document = item.NUMS
|
|
break;
|
|
case "pictures":
|
|
this.fileNum.pictures = item.NUMS
|
|
break;
|
|
case "video":
|
|
this.fileNum.video = item.NUMS
|
|
break;
|
|
case "dbfile":
|
|
this.fileNum.dbfile = item.NUMS
|
|
break;
|
|
case "audio":
|
|
this.fileNum.audio = item.NUMS
|
|
break;
|
|
case "total":
|
|
this.fileNum.total = item.NUMS
|
|
break;
|
|
}
|
|
},
|
|
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.length <= 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.searchFile.dirId = this.selectId
|
|
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> |