<template>
|
<div>
|
<div class="file-header-menu" :class="'file-type-' + fileType">
|
<div>
|
<a-button-group v-if="(!selectedFiles.length || !isBatchOperation) && fileType === 0">
|
<!-- <a-button type="primary"> <a-icon type="left" />后退</a-button>
|
<a-button type="primary"> 前进<a-icon type="right" /> </a-button> -->
|
<a-dropdown v-if="uploadP">
|
<a-menu slot="overlay" @click="handleMenuClick">
|
<a-menu-item key=1> <a-icon type="file" />上传文件 </a-menu-item>
|
<a-menu-item key=2> <a-icon type="folder" />上传文件夹 </a-menu-item>
|
<a-menu-item key=3> <a-icon type="dropbox" />拖拽上传 </a-menu-item>
|
</a-menu>
|
<a-button type="primary"> <a-icon type="upload" /> 上传 <a-icon type="down" /></a-button>
|
</a-dropdown>
|
<a-button type="primary" v-if="createP" @click="handleAddFloder"><a-icon type="folder-add" />新建文件夹</a-button>
|
</a-button-group>
|
<a-button-group v-if="isBatchOperation">
|
<a-button type="primary" v-if="selectedFiles.length && haveManagePerm"
|
@click="handleBatchDeleteBtnClick"><a-icon type="delete" />批量删除</a-button>
|
<a-button type="primary" v-if="selectedFiles.length && fileType !== 6 && haveManagePerm"
|
@click="handleBatchMoveBtnClick"><a-icon type="drag" />批量移动</a-button>
|
<a-button type="primary" v-if="selectedFiles.length && fileType !== 6 && haveManagePerm"
|
@click="handleBatchCopyBtnClick"><a-icon type="copy" />批量复制</a-button>
|
<a-button type="primary" v-if="selectedFiles.length && fileType !== 6 && haveDownloadPerm"
|
@click="handleBatchDownloadBtnClick"><a-icon type="download" />批量下载</a-button>
|
<!-- <a-button type="primary" v-if="selectedFiles.length && fileType !== 6 && fileType !== 8 && haveManagePerm
|
" @click="handleBatchShareBtnClick"><a-icon type="share-alt" />批量分享</a-button> -->
|
</a-button-group>
|
</div>
|
<div class="right_menu">
|
|
<a-input-search v-if="fileType === 0 || fileType === 10" placeholder="input search text" v-model="searchString"
|
style="width: 200px" @search="onSearch" />
|
|
<a-icon type="check-square" :class="isBatchOperation ? 'active' : ''"
|
:title="isBatchOperation ? '取消批量操作' : '批量操作'" v-if="fileModel === 1 && fileType !== 8"
|
@click="handleBatchOperationChange()" />
|
|
<a-icon type="reload" title="刷新" @click="handleFileReload" />
|
<a-divider type="vertical" />
|
<a-icon type="unordered-list" class="model-icon" :class="{ active: fileGroupLable === 0 }" title="列表模式"
|
@click="handleFileDisplayModelChange(0)" />
|
|
<a-icon type="appstore" class="model-icon" :class="{ active: fileGroupLable === 1 }" title="网格模式"
|
@click="handleFileDisplayModelChange(1)" />
|
<a-divider type="vertical" />
|
<a-icon type="setting" />
|
<!--
|
<a-icon type="info-circle" /> -->
|
|
|
|
</div>
|
|
</div>
|
<div class="file-site">
|
<div style="height: 50px">
|
<span style="width: 75px; display: inline-block;">当前位置：</span>
|
</div>
|
<div style=" overflow: hidden;">
|
|
<a-breadcrumb>
|
|
<!-- <a-breadcrumb-item @click.native="handlerClick(-1)"> -->
|
<!-- <a-icon :type="fileType===6 ? 'delete' : fileType===8 ? 'share-alt' : 'home'" />
|
<a> {{fileType===6?'回收站':fileType===8?'我的分享':'全部文件'}}</a></a-breadcrumb-item> -->
|
<!-- <a-icon type="home" />
|
<a> {{'全部文件'}}</a></a-breadcrumb-item> -->
|
<a-breadcrumb-item v-for="(bread, index) in breadCrumbList" :key="bread"
|
@click.native="handlerClick(index)"><a>{{ index == 0 ? "全部文件" : bread }}</a></a-breadcrumb-item>
|
</a-breadcrumb>
|
</div>
|
</div>
|
<AddFolderDialog ref="addFolder" @searchFileList="handleFileReload"></AddFolderDialog>
|
<!-- 多选文件下载，页面隐藏 -->
|
<a target="_blank" :href="batchDownloadLink" ref="batchDownloadRef"></a>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getAction
|
} from '@/api/manage'
|
import { mixin } from '@/utils/mixin.js'
|
import AddFolderDialog from '@/views/document/components/dialog/addFolder/Dialog'
|
export default {
|
name: 'operationMenu',
|
components: { AddFolderDialog },
|
props: {
|
filePath: {
|
type: String,
|
default: ''
|
},
|
treekeys: {
|
type: String,
|
default: ''
|
},
|
},
|
mixins: [mixin],
|
data() {
|
return {
|
pathArr: [],
|
keyArr: [],
|
fileGroupLable: 0, // 文件展示模式
|
searchString: "",
|
}
|
},
|
methods: {
|
onSearch() {
|
console.log("FileSearchString::::", this.searchString);
|
if (this.searchString && this.searchString.length > 1) {
|
this.$emit("searchFileList", this.searchString)
|
} else {
|
this.$message.warning("请输入至少2个字符进行搜索")
|
}
|
},
|
// 面包屑点击事件
|
handlerClick(index) {
|
//this.searchString = ''
|
console.log("dddddddddddddeeeeeeeeeeee", this.treekeys + "))))))" + index);
|
console.log(this.keyArr);
|
console.log(this.pathArr);
|
//let clickKey = this.treekeys.substring(0,(2*index+3));
|
this.pathArr.length = (index + 1)
|
this.keyArr.length = (index + 1)
|
let clickKey = this.keyArr.join("-")
|
let newfilePath = index === 0 ? "/" : this.pathArr.join("/")
|
this.$emit('clickBreadcrumb', newfilePath, clickKey)
|
|
},
|
/**
|
* 文件查看模式切换
|
* @param {number} label 0 列表 1 网格 2 时间线
|
*/
|
handleFileDisplayModelChange(label) {
|
this.fileGroupLable = label
|
|
this.$store.commit('changeFileModel', label)
|
//this.handleSearchInputChange(this.searchFile.fileName)
|
|
},
|
/**
|
* 网格模式下，批量操作状态切换
|
*/
|
handleBatchOperationChange() {
|
this.$store.commit('changeIsBatchOperation', !this.isBatchOperation)
|
console.log("isbatch:::", this.isBatchOperation);
|
},
|
// 上传按钮下拉菜单点击事件
|
handleMenuClick(menu) {
|
let uploadWay = menu.key
|
console.log("上传按钮点击 key::", menu.key);
|
this.$openBox.uploadFile({
|
params: this.uploadFileParams,
|
uploadWay,
|
serviceEl: this,
|
callType: 1 // callType 调用此服务的方式：1 - 顶部栏，2 - 右键菜单
|
})
|
},
|
handleBatchDeleteBtnClick() {
|
this.$openDialog
|
.deleteFile({
|
isBatchOperation: true,
|
fileInfo: this.selectedFiles,
|
deleteMode: this.fileType === 6 ? 2 : 1 // 删除模式：1-删除到回收站 2-彻底删除
|
})
|
.then((res) => {
|
if (res === 'confirm') {
|
this.handleFileReload()
|
//this.$store.dispatch('showStorage')
|
}
|
})
|
},
|
handleBatchMoveBtnClick() {
|
if (this.selectedFiles.length > 0) {
|
this.$openDialog
|
.moveFile({
|
isBatchOperation: true,
|
fileInfo: this.selectedFiles
|
})
|
.then((res) => {
|
if (res === 'confirm') {
|
this.handleFileReload()
|
}
|
})
|
} else {
|
this.$message.warning('请先勾选文件')
|
}
|
},
|
handleBatchCopyBtnClick() {
|
if (this.selectedFiles.length > 0) {
|
this.$openDialog
|
.copyFile({
|
isBatchOperation: true,
|
fileInfo: this.selectedFiles
|
})
|
.then((res) => {
|
if (res === 'confirm') {
|
this.handleFileReload()
|
}
|
})
|
} else {
|
this.$message.warning('请先勾选文件')
|
}
|
},
|
async handleBatchDownloadBtnClick() {
|
//this.$refs['batchDownloadRef'].click()
|
let size = await this.getDirSize()
|
console.log("size::" + size);
|
let extend = "zip"
|
if (size == null) {
|
this.$message.error("下载失败！")
|
return false
|
}
|
if (size > this.flow - this.surplusFlow) {
|
this.$message.error("剩余下载限额不足，文件大小为：" + this.$file.calculateFileSize(size))
|
return false;
|
}
|
let link = document.createElement('a')
|
link.download = Date.now() + ".zip";
|
link.href = this.batchDownloadLink;
|
link.style.display = 'none'
|
document.body.appendChild(link)
|
link.click()
|
document.body.removeChild(link)
|
//downloadFile(this.batchDownloadLink,Date.now() + ".zip",null)
|
// let binaryData = [];
|
// downFile(this.batchDownloadLink).then(res => {
|
// let a = document.createElement('a');
|
|
// binaryData.push(res)
|
// a.href = window.URL.createObjectURL(new Blob(binaryData));
|
|
// document.body.appendChild(a); // 修复firefox中无法触发click
|
// a.click();
|
// URL.revokeObjectURL(a.href);
|
// document.body.removeChild(a);
|
// })
|
this.$store.commit('changeSurplusFlow', this.surplusFlow + size)
|
},
|
handleBatchShareBtnClick() {
|
|
},
|
handleAddFloder() {
|
console.log("》》》》》点击新建文件夹按钮》》》》》");
|
//this.$refs.addFolder.visible = true;
|
this.$openDialog
|
.addFolder({
|
filePath: this.filePath || '/'
|
})
|
.then((res) => {
|
console.log("RRRRREEEEESSSSS:::", res);
|
if (res === 'confirm') {
|
this.handleFileReload()
|
}
|
})
|
|
},
|
// searchFileList() {
|
// this.$emit('searchFileList')
|
|
// },
|
// 点击刷新按钮和新建文件夹重新加载目录树和文件列表
|
handleFileReload() {
|
this.$emit('reloadPathTree', this.searchString)
|
},
|
getDirSize() {
|
return new Promise(resolve => {
|
let params = {
|
"userFileIds": this.selectedFiles
|
.map((item) => item.pathId)
|
.join(','),
|
}
|
getAction('/document/getBatchFileSize', params).then(res => {
|
console.log("getSize::", res);
|
if (res.success) {
|
resolve(res.result)
|
} else {
|
resolve()
|
}
|
|
})
|
|
|
})
|
}
|
|
|
},
|
computed: {
|
// 是否可新增
|
createP() {
|
//console.log("文件夹ID:::"+store.state.fileList.pathId)
|
return this.$store.getters.create
|
},
|
// 是否可上传文件
|
uploadP() {
|
//console.log("文件夹ID:::"+store.state.fileList.pathId)
|
return this.$store.getters.upload && this.$store.state.fileList.pathId != 1
|
},
|
// 下载权限文件id集合
|
downloadPrem() {
|
return this.$store.getters.downloadPrem
|
},
|
// 管理权限文件id集合
|
managePrem() {
|
return this.$store.getters.managePrem
|
},
|
// 所选文件的下载权限情况
|
haveDownloadPerm() {
|
if (this.selectedFiles.length <= 0) {
|
return false;
|
}
|
var flag = true;
|
this.selectedFiles.forEach(element => {
|
if (!this.downloadPrem.includes(element.pathId)) {
|
flag = false;
|
}
|
});
|
return flag;
|
},
|
// 所选文件的管理权限情况
|
haveManagePerm() {
|
if (this.selectedFiles.length <= 0) {
|
return false;
|
}
|
var flag = true;
|
this.selectedFiles.forEach(element => {
|
if (!this.managePrem.includes(element.pathId)) {
|
flag = false;
|
}
|
});
|
return flag;
|
|
},
|
token() {
|
return this.$store.getters.token
|
},
|
flow() {
|
return this.$store.getters.flow
|
},
|
surplusFlow() {
|
return this.$store.getters.surplusFlow
|
},
|
breadCrumbList() {
|
console.log("bcst:::", this.filePath);
|
this.pathArr = this.filePath.split('/')
|
console.log("bcstArr:::", this.pathArr);
|
//this.pathArr.shift()
|
console.log("thiskeys", this.treekeys);
|
if (this.treekeys != "") {
|
this.keyArr = this.treekeys.split('-')
|
//this.keyArr.shift()
|
}
|
//this.keyArr = this.treekeys==""?[]:
|
|
return this.pathArr
|
},
|
// 上传文件组件参数
|
uploadFileParams() {
|
return {
|
filePath: this.filePath,
|
isDir: 0
|
}
|
},
|
// 文件查看模式 0 列表模式 1 网格模式
|
fileModel() {
|
return this.$store.getters.fileModel
|
},
|
// 图标大小
|
gridSize: {
|
get() {
|
return this.$store.getters.gridSize
|
},
|
set(val) {
|
this.$store.commit('changeGridSize', val)
|
}
|
},
|
// 被选中的文件列表
|
selectedFiles() {
|
return this.$store.state.fileList.selectedFiles
|
},
|
// 是否批量操作
|
isBatchOperation() {
|
return this.$store.state.fileList.isBatchOperation
|
},
|
// 文件类型
|
fileType() {
|
return this.$store.getters.fileType
|
},
|
// 批量下载文件链接
|
batchDownloadLink() {
|
return `${window._CONFIG['domianURL']
|
}/fileTransfer/batchDownloadFile?userFileIds=${this.selectedFiles
|
.map((item) => item.pathId)
|
.join(',')}&userToken=${this.token}`
|
}
|
},
|
watch: {
|
|
},
|
mounted() {
|
this.fileGroupLable = this.fileModel
|
},
|
|
}
|
</script>
|
|
<style lang="less">
|
.operation-menu-wrapper.file-type-6 {
|
margin: 8px 0;
|
justify-content: flex-end;
|
}
|
|
.file-header-menu {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.right_menu {
|
font-size: 18px;
|
|
}
|
|
.file-site {
|
display: flex;
|
align-items: center;
|
}
|
|
.model-icon {
|
cursor: pointer
|
}
|
|
.model-icon.active {
|
color: #409EFF
|
}
|
</style>
|
