<template >
|
<a-layout class="list-container" v-loading="loading">
|
|
<a-layout-content class="file-list-content" @click.native.right="handleClickRight" @dragenter="handleDragEnter"
|
@dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
|
<FileTable ref="fileTable" :fileList="fileList" :searchStr="searchStr" v-if="fileModel === 0"
|
@fileClick="handlerFileClick" @fileDbclick="handlerFileDbclick" @reloadPathTree="reloadPathTree"
|
@refreshFavorite="refreshFavorite" @click.native.right="handleClickRight">
|
</FileTable>
|
<FileGrid :fileList="fileList" :searchStr="searchStr" v-if="fileModel === 1" @fileClick="handlerFileClick"
|
@reloadPathTree="reloadPathTree" @fileDbclick="handlerFileDbclick" @refreshFavorite="refreshFavorite"
|
@click.native.right="handleClickRight" @fileDragStart="handleDragStart">
|
</FileGrid>
|
|
</a-layout-content>
|
<a-layout-footer class="file-list-footer">
|
<div>共 {{ fileNum }} 个项目</div>
|
|
<div>剩余下载限额：
|
<a-progress style="width:120px" :percent="percent" :show-info="false" />
|
{{ $file.calculateFileSize(flow - surplusFlow) }}/{{ $file.calculateFileSize(flow) }}
|
</div>
|
</a-layout-footer>
|
<a-modal v-model="compareModal" mask :maskClosable="false" title="Basic Modal" @ok="handleOk" @cancel="handleOk"
|
@close="handleOk" width="1100px">
|
<!-- <p v-for="(item, index) in compareList" :key="index">{{ item.fileName }}</p> -->
|
<a-table :columns="columns" :data-source="compareList" bordered size="small">
|
<!-- <template slot="name" slot-scope="text">
|
<a>{{ text }}</a>
|
</template> -->
|
|
</a-table>
|
|
</a-modal>
|
</a-layout>
|
</template>
|
|
<script>
|
import {
|
getAction,
|
postAction
|
} from '@/api/manage';
|
import {
|
fileSuffixCodeModeMap,
|
markdownFileType,
|
officeFileType
|
} from '@/utils/libs/map.js';
|
import FileGrid from './FileGrid.vue';
|
import FileTable from './FileTable.vue';
|
export default {
|
name: "fileList",
|
props: ['filePath'],
|
components: { FileTable, FileGrid },
|
data() {
|
return {
|
fileSuffixCodeModeMap,
|
markdownFileType,
|
officeFileType,
|
loading: false,
|
searchStr: '',
|
fileList: [],
|
selectedFile: undefined,
|
url: {
|
list: '/document/listFile',
|
search: "/document/searchFile",
|
recoveryList: '/recoveryfile/list',
|
},
|
visible: false,
|
columns: [
|
{
|
title: '文件',
|
dataIndex: 'fileName',
|
},
|
{
|
title: '原大小',
|
dataIndex: 'fileSize',
|
},
|
{
|
title: '服务器大小',
|
dataIndex: 'comFileSize',
|
},
|
{
|
title: '原MD5',
|
dataIndex: 'identifier',
|
},
|
|
{
|
title: '服务器MD5',
|
dataIndex: 'comIdentifier',
|
},
|
]
|
}
|
},
|
methods: {
|
// 树形目录节点点击事件，根据目录名加载文件列表
|
loadPathFile(path, pathId) {
|
this.loading = true
|
this.$store.commit('changeFileType', 0)
|
console.log("path：：：", path);
|
getAction(this.url.list, { "path": path, "pathId": pathId }).then(res => {
|
this.loading = false
|
console.log("result:::", res.result);
|
this.fileList = res.result ? res.result : [];
|
this.$store.commit('changeDownloadPrem', res.downloadPrem)
|
this.$store.commit('changeManagePrem', res.managePrem)
|
this.$store.commit('changeCreateFlag', res.create)
|
this.$store.commit('changeUploadFlag', res.upload)
|
|
// 清空多选
|
this.selectedFileList([])
|
})
|
},
|
// 搜索文件
|
searchFileList(str) {
|
this.searchStr = str
|
console.log("search:File:::", this.searchStr);
|
this.loading = true
|
this.$store.commit('changeFileType', 10)
|
getAction(this.url.search, { "name": str }).then(res => {
|
this.loading = false
|
console.log("result:::", res.result);
|
this.fileList = res.result ? res.result : [];
|
this.$store.commit('changeDownloadPrem', res.downloadPrem)
|
this.$store.commit('changeManagePrem', res.managePrem)
|
// 清空多选
|
this.selectedFileList([])
|
|
})
|
},
|
//加载回收站列表
|
loadRecoveryFile() {
|
this.loading = true
|
this.$store.commit('changeFileType', 6)
|
postAction(this.url.recoveryList, null).then(res => {
|
this.loading = false
|
console.log("recovery:result:::", res.result);
|
this.fileList = res.result ? res.result : [];
|
this.fileList.forEach((item, index) => {
|
item.updateTime = item.deleteTime
|
})
|
console.log(`output->res.result`, this.fileList)
|
this.$store.commit('changeManagePrem', res.managePrem)
|
})
|
},
|
// 加载分享文件列表
|
loadShareFile() {
|
// this.loading = true
|
this.$store.commit('changeFileType', 8)
|
// postAction(this.url.recoveryList,null).then(res => {
|
// this.loading = false
|
// console.log("recovery:result:::", res.result);
|
// this.fileList = res.result?res.result:[];
|
// })
|
this.fileList = []
|
},
|
// 转发列表中文件点击 事件
|
handlerFileClick(row) {
|
|
|
},
|
|
handlerFileDbclick(row) {
|
console.log(`output->"双击事件"`, row)
|
this.selectedFile = row
|
if (row.isDir == 1 && this.fileType != 6) {
|
this.$emit('fileClick', row)
|
}
|
if (row.isDir == 0) {
|
// if (this.onlineEditBtnShow) {
|
// if (this.officeFileType.includes(row.extendName)) {
|
// // office 编辑页面
|
// this.$file.getFileOnlineEditPathByOffice(row)
|
// } else if (this.markdownFileType.includes(row.extendName)) {
|
// // markdown 编辑浮层
|
// this.$openBox.markdownPreview({
|
// fileInfo: row,
|
// editable: true
|
// })
|
// } else {
|
// // 代码编辑对话框
|
// this.$openBox.codePreview({ fileInfo: row, isEdit: true })
|
// }
|
// } else if (this.seeBtnShow) {
|
// this.$file.handleFileNameClick(this.selectedFile, 0, [this.selectedFile])
|
// }
|
}
|
},
|
/**
|
* 文件展示区域的空白处右键事件
|
* @param {Document} event 右键事件对象
|
*/
|
handleClickRight(event) {
|
event.preventDefault()
|
// 只有在全部页面才可以进行以下操作
|
this.$openBox
|
.contextMenu({
|
selectedFile: undefined,
|
domEvent: event,
|
serviceEl: this
|
})
|
.then((res) => {
|
if (res === 'confirm') {
|
this.reloadPathTree()
|
//this.$store.dispatch('showStorage') // 刷新存储容量
|
}
|
})
|
},
|
reloadPathTree() {
|
console.log("reloadPathTree:::调用");
|
this.$emit('reloadPathTree', this.searchStr) // 刷新文件列表
|
},
|
refreshFavorite() {
|
this.$emit('refreshFavorite') // 刷新收藏夹
|
},
|
// 清空多选项
|
selectedFileList(newValue) {
|
if (this.fileModel === 0) {
|
this.$refs.fileTable.rowSelection.selectedRowKeys = []
|
}
|
console.log("new value:::", newValue);
|
this.$store.commit('changeSelectedFiles', newValue)
|
this.$store.commit('changeIsBatchOperation', newValue.length !== 0)
|
},
|
handleDragEnter(event) {
|
event.preventDefault();
|
// Add visual feedback or styles when element is dragged over
|
// event.target.classList.add("drag-over");
|
},
|
handleDragOver(event) {
|
event.preventDefault();
|
// Necessary to allow drop event to fire
|
},
|
handleDragLeave(event) {
|
// Remove visual feedback or styles when element is dragged out
|
// event.target.classList.remove("drag-over");
|
},
|
handleDrop(event) {
|
event.preventDefault();
|
console.log(`output->event.target`, event.target)
|
// Remove visual feedback or styles when element is dropped
|
// event.target.classList.remove("drag-over");
|
|
// Handle the dropped data
|
// const droppedData = event.dataTransfer.getData("text/plain");
|
console.log("Dropped data:", localStorage.getItem("dragFile"));
|
console.log(`output->`, this.$store.getters.filePath)
|
|
let isBatch = localStorage.getItem("isBatch")
|
// 本地其它标签页面可以获取文件id
|
let filePathId = localStorage.getItem("dragFile")
|
|
// 当前标签页可以获取，有值说明在当前页面，不复制
|
let sessionFilePathId = sessionStorage.getItem("dragFile")
|
console.log(`output->111111111111`, filePathId && (!sessionFilePathId || filePathId !== sessionFilePathId))
|
console.log(`output->111111111112`, filePathId)
|
console.log(`output->111111111113`, sessionFilePathId)
|
// console.log(`output->isBatch`, isBatch)
|
localStorage.removeItem("isBatch")
|
localStorage.removeItem("dragFile")
|
sessionStorage.removeItem("dragFile")
|
if (filePathId && (!sessionFilePathId || filePathId !== sessionFilePathId)) {
|
|
|
|
if (isBatch) {
|
let data = {
|
filePath: this.$store.getters.filePath,
|
files: filePathId
|
}
|
this.loading = true
|
postAction('/document/batchcopyfile', data)
|
.then((res) => {
|
this.loading = false
|
|
if (res.success) {
|
this.$message.success('复制成功')
|
this.reloadPathTree()
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
} else {
|
let data = {
|
filePath: this.$store.getters.filePath,
|
userFileId: JSON.parse(filePathId)
|
}
|
console.log(`output->dgdata`, data)
|
this.loading = true
|
postAction('/document/copyfile', data)
|
.then((res) => {
|
this.loading = false
|
if (res.success) {
|
this.$message.success('复制成功')
|
|
this.reloadPathTree()
|
} else {
|
this.$message.error(res.message)
|
}
|
localStorage.removeItem("dragFile")
|
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
}
|
|
|
}
|
|
},
|
handleDragStart(item) {
|
console.log(`output->dragitem`, item)
|
|
|
|
localStorage.setItem("dragFile", JSON.stringify(item))
|
sessionStorage.setItem("dragFile", JSON.stringify(item))
|
|
|
|
|
},
|
showModal() {
|
this.$store.commit('changeCompareModal', true);
|
},
|
handleOk(e) {
|
|
e.preventDefault();
|
this.$store.commit('changeCompareModal', false);
|
this.$store.commit('clearCompareList', []);
|
},
|
|
|
},
|
computed: {
|
// 是否批量操作
|
isBatchOperation() {
|
return this.$store.state.fileList.isBatchOperation
|
},
|
// 文件查看模式 0列表模式 1网格模式 2 时间线模式
|
fileModel() {
|
return this.$store.getters.fileModel
|
},
|
fileNum() {
|
return this.fileList ? this.fileList.length : 0
|
},
|
fileType() {
|
return this.$store.getters.fileType
|
},
|
flow() {
|
return this.$store.getters.flow
|
},
|
compareModal() {
|
return this.$store.getters.compareModal
|
},
|
compareList() {
|
return this.$store.getters.compareList
|
},
|
|
surplusFlow() {
|
return this.$store.getters.surplusFlow
|
},
|
percent() {
|
return ((this.flow - this.surplusFlow) / this.flow) * 100
|
},
|
// 下载权限文件id集合
|
downloadPrem() {
|
return this.$store.getters.downloadPrem
|
},
|
// 查看按钮是否显示
|
seeBtnShow() {
|
return (this.fileType !== 6 && this.downloadPrem.includes(this.selectedFile.pathId)) || this.fileType === 8
|
},
|
// 在线编辑按钮是否显示
|
onlineEditBtnShow() {
|
return (
|
![6, 8].includes(this.fileType) &&
|
(this.officeFileType.includes(this.selectedFile.extendName) ||
|
this.markdownFileType.includes(this.selectedFile.extendName) ||
|
this.fileSuffixCodeModeMap.has(this.selectedFile.extendName))
|
) && this.downloadPrem.includes(this.selectedFile.pathId)
|
},
|
}
|
}
|
</script >
|
|
<style lang="less" scoped>
|
.list-container {
|
height: calc(100vh - 225px);
|
|
.file-list-content {
|
background-color: white;
|
overflow: auto;
|
}
|
|
.file-list-footer {
|
display: flex;
|
justify-content: space-between;
|
background-color: white;
|
height: 40px !important;
|
padding: 0 30px !important;
|
border-top: 1px solid rgb(211, 211, 211);
|
line-height: 39px;
|
box-shadow: 0px 0px 20px 0px #e3e3e3;
|
z-index: 19;
|
}
|
}
|
</style>
|
