491 lines
13 KiB
Vue
491 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<div class="filecontent">
|
|
<div class="flodContent">
|
|
<div class="linese"></div>
|
|
<div class="siderHeader echartsTitle">
|
|
<div class="ecicon"></div>
|
|
文件目录
|
|
</div>
|
|
<a-dropdown :trigger="['contextmenu']">
|
|
<a-directory-tree
|
|
:tree-data="treeData"
|
|
v-model:expandedKeys="expandedKeys"
|
|
class="teeediv"
|
|
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 class="linese"></div>
|
|
</div>
|
|
<div class="righttop">
|
|
<div class="linese"></div>
|
|
<a-row class="quarter-div">
|
|
<a-col :span="10">
|
|
<img src="~@/assets/img/文件总数.png" />
|
|
</a-col>
|
|
<a-col :span="14">
|
|
<div class="datanum">{{ fileNum.total }}</div>
|
|
<div>文件总数</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row class="quarter-div">
|
|
<a-col :span="10">
|
|
<img src="~@/assets/img/图片.png" />
|
|
</a-col>
|
|
<a-col :span="14">
|
|
<div class="datanum">{{ fileNum.pictures }}</div>
|
|
<div>图片</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row class="quarter-div">
|
|
<a-col :span="10">
|
|
<img src="~@/assets/img/音频.png" />
|
|
</a-col>
|
|
<a-col :span="14">
|
|
<div class="datanum">{{ fileNum.audio }}</div>
|
|
<div>音频</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row class="quarter-div">
|
|
<a-col :span="10">
|
|
<img src="~@/assets/img/数据库.png" />
|
|
</a-col>
|
|
<a-col :span="14">
|
|
<div class="datanum">{{ fileNum.dbfile }}</div>
|
|
<div>数据库文件</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row class="quarter-div">
|
|
<a-col :span="10">
|
|
<img src="~@/assets/img/视频.png" />
|
|
</a-col>
|
|
<a-col :span="14">
|
|
<div class="datanum">{{ fileNum.video }}</div>
|
|
<div>视频</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row class="quarter-div" style="margin-right: 0">
|
|
<a-col :span="10">
|
|
<img src="~@/assets/img/文档.png" />
|
|
</a-col>
|
|
<a-col :span="14">
|
|
<div class="datanum">{{ fileNum.document }}</div>
|
|
<div>文档</div>
|
|
</a-col>
|
|
</a-row>
|
|
<div class="linese" style="float: left"></div>
|
|
<div class="linese" style="float: left"></div>
|
|
|
|
<div class="search">
|
|
<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 class="rtable">
|
|
<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>
|
|
<div class="linese"></div>
|
|
</div>
|
|
</div>
|
|
<a-modal v-model="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
|
|
}
|
|
console.log('dirid=' + this.searchFile.dirId)
|
|
this.$refs.modalForm.title = '文件上传'
|
|
this.$refs.modalForm.dirId = this.searchFile.dirId
|
|
this.$refs.modalForm.add()
|
|
},
|
|
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>
|
|
.menu {
|
|
background: #ffffff !important;
|
|
}
|
|
.filecontent {
|
|
height: calc(100vh - 48px);
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.flodContent {
|
|
height: calc(100vh - 240px);
|
|
overflow-y: auto;
|
|
width: 300px;
|
|
float: left;
|
|
margin-right: 20px;
|
|
}
|
|
.siderHeader {
|
|
font-size: 18px;
|
|
}
|
|
.teeediv {
|
|
height: calc(100vh - 320px);
|
|
background: rgb(17, 42, 64);
|
|
}
|
|
|
|
.righttop {
|
|
width: calc(100vw - 400px);
|
|
height: calc(100vh - 240px);
|
|
float: left;
|
|
}
|
|
.righttop .search{
|
|
/* height: 40px; */
|
|
}
|
|
|
|
.quarter-div {
|
|
width: calc(16.6vw - 86px);
|
|
height: 130px;
|
|
float: left;
|
|
margin-right: 20px;
|
|
border: 2px solid rgb(11, 72, 98);
|
|
color: #fff;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.quarter-div .ant-col-10 {
|
|
text-align: center;
|
|
}
|
|
.quarter-div .ant-col-10 {
|
|
text-align: center;
|
|
}
|
|
.quarter-div div {
|
|
text-align: left;
|
|
line-height: 30px;
|
|
}
|
|
.quarter-div .datanum {
|
|
font-size: 26px;
|
|
}
|
|
.rtable {
|
|
height: calc(100vh - 525px);
|
|
margin-top: 15px;
|
|
}
|
|
</style> |