349 lines
10 KiB
Vue
349 lines
10 KiB
Vue
<template>
|
|
<el-container class="mainHeaderNoPadding">
|
|
<el-header class="docsHeaderMain">
|
|
<el-row class="docsRow">
|
|
<el-col :span="20">
|
|
<div class="docsHeader">
|
|
<div class="arrowBox">
|
|
<div class="item leftArrow" :class="routerList.length>1?'leftShow':''" @click="prev"><el-icon><el-icon-ArrowLeftBold/></el-icon></div>
|
|
<div class="item rightArrow leftShow" @click="upSearch"><el-icon><el-icon-RefreshLeft/></el-icon></div>
|
|
</div>
|
|
<div class="breadcrumb">
|
|
<el-breadcrumb separator-icon="el-icon-ArrowRight">
|
|
<template v-for="item in routerList" :key="item">
|
|
<el-breadcrumb-item class="item" @click="linkRouter(item)">{{item.name}}</el-breadcrumb-item>
|
|
</template>
|
|
</el-breadcrumb>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-input type="text" :size="size" v-model="params.keyword" prefix-icon="el-icon-Search" @input="upSearch" placeholder="搜索"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-header>
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-dropdown placement="bottom-start">
|
|
<el-button type="primary" :size="size" style="margin-right: 12px;">新建文档 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="add" icon="sc-icon-CreateFolder">创建文件夹</el-dropdown-item>
|
|
<el-dropdown-item @click="addShare" icon="sc-icon-CreateShare">创建共享文件夹</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<el-dropdown placement="bottom-start">
|
|
<el-button type="primary" plain :size="size" style="margin-right: 12px;">上传 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="uploadFile" icon="sc-icon-Upload">上传附件</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<el-dropdown placement="bottom-start">
|
|
<el-button type="primary" plain :size="size" style="margin-right: 12px;">操作 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="batch_del" icon="sc-icon-Delete">删除</el-dropdown-item>
|
|
<el-dropdown-item @click="table_edit('edit')" icon="sc-icon-Edit">重命名</el-dropdown-item>
|
|
<el-dropdown-item @click="share_edit('edit')" icon="sc-icon-ShareBtn">共享</el-dropdown-item>
|
|
<el-dropdown-item @click="move_file" icon="sc-icon-ShareBtn">移动文件｜文件夹</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
<div class="right-panel">
|
|
<scExportList :size="size" @updateShow="exportChangeShow" :exportList="exportList" :show="exportShow" type="14">
|
|
<el-button :size="size" icon="sc-icon-Download" :disabled="exportShow" @click="exportData">下载</el-button>
|
|
</scExportList>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" @selection-change="selectionChange" :params="params" :size="size" border docsSort remoteSort stripe :rowChild="false">
|
|
<el-table-column type="selection" align="center" width="40"></el-table-column>
|
|
<sc-table-column label="序号" align="center" type="index"></sc-table-column>
|
|
<template #name="scope">
|
|
<div class="nameBox" @click="openFolder(scope.row)" v-if="scope.row.type == 'folder'">
|
|
<el-icon size="large"><sc-icon-Folder/></el-icon>
|
|
<div class="text">{{scope.row.name}}</div>
|
|
</div>
|
|
<div class="nameBox" v-else>
|
|
<fileType :fileType="scope.row.file_suffix" />
|
|
<div class="text">{{scope.row.client_file_name}}</div>
|
|
</div>
|
|
</template>
|
|
<template #size="scope">
|
|
<span v-if="scope.row.type == 'folder'"></span>
|
|
<span v-else>{{scope.row.file_size}}</span>
|
|
</template>
|
|
<template #type="scope">
|
|
<span v-if="scope.row.type == 'folder'">文件夹</span>
|
|
<span v-else>
|
|
{{scope.row.file_suffix}}文件
|
|
</span>
|
|
</template>
|
|
<template #is_share="scope">
|
|
{{scope.row.is_share?'是':'否'}}
|
|
</template>
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
|
|
<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
|
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
|
|
<shareSave v-if="dialog.shareSave" ref="shareSave" @success="handleSaveSuccess" @closed="dialog.shareSave=false"></shareSave>
|
|
<moveFile v-if="dialog.move" ref="moveSave" @success="handleSaveSuccess" @addFolder="moveAdd" @closed="dialog.move=false"></moveFile>
|
|
</template>
|
|
|
|
<script>
|
|
import saveDialog from './save'
|
|
import uploadFile from './uploadFile'
|
|
import shareSave from './shareSave'
|
|
import moveFile from './moveFile'
|
|
import fileType from './fileType'
|
|
|
|
export default {
|
|
name: 'document',
|
|
components: {
|
|
saveDialog,
|
|
uploadFile,
|
|
shareSave,
|
|
moveFile,
|
|
fileType
|
|
},
|
|
data() {
|
|
return {
|
|
size:'small',
|
|
routerList: this.$store.state.global.docsRouter,
|
|
|
|
exportShow:false,
|
|
exportList:[],
|
|
|
|
dialog: {
|
|
save: false,
|
|
shareSave: false,
|
|
move:false,
|
|
},
|
|
list:{
|
|
apiObj: this.$API.docs.manager.list,
|
|
column:[]
|
|
},
|
|
selection: [],
|
|
|
|
params: {
|
|
keyword: "",
|
|
folder_id:"",
|
|
name:"",
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
linkRouter(item){
|
|
let list = this.filterDataByItem(item,this.$TOOL.objCopy(this.routerList));
|
|
this.routerList = list;
|
|
this.$store.commit("SET_docs_router", list);
|
|
|
|
this.params.folder_id = item.id;
|
|
this.$refs.table.upData(this.params);
|
|
},
|
|
filterDataByItem(item, arr) {
|
|
const index = arr.findIndex((obj) => obj.id === item.id && obj.name === item.name);
|
|
return arr.slice(0, index + 1);
|
|
},
|
|
//移动创建文件夹
|
|
moveAdd(params){
|
|
this.dialog.save = true
|
|
this.$nextTick(() => {
|
|
let data = {
|
|
folder_id:params && params.id?params.id:''
|
|
}
|
|
this.$refs.saveDialog.open('add').setData(data)
|
|
})
|
|
},
|
|
//添加
|
|
add(){
|
|
this.dialog.save = true
|
|
this.$nextTick(() => {
|
|
this.$refs.saveDialog.open('add').setData(this.params)
|
|
})
|
|
},
|
|
addShare(){
|
|
this.dialog.shareSave = true
|
|
this.$nextTick(() => {
|
|
this.$refs.shareSave.open('add').setData(this.params)
|
|
})
|
|
},
|
|
share_edit(){
|
|
let data = this.$TOOL.objCopy(this.params);
|
|
let folderList = {
|
|
ids:[],
|
|
file_type:'folder'
|
|
};
|
|
let fileList = {
|
|
ids:[],
|
|
file_type:'file'
|
|
};
|
|
|
|
this.selection.forEach(item=>{
|
|
if(item.type == 'folder'){
|
|
folderList.ids.push(item.id)
|
|
}
|
|
if(item.type == 'file'){
|
|
fileList.ids.push(item.id)
|
|
}
|
|
})
|
|
data.share = [folderList,fileList];
|
|
this.dialog.shareSave = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.shareSave.open('edit').setData(data)
|
|
})
|
|
},
|
|
//编辑
|
|
table_edit(){
|
|
if(this.selection.length!=1){
|
|
this.$message.warning('有且只能有单条数据编辑');
|
|
return
|
|
}
|
|
let row = this.selection[0];
|
|
this.dialog.save = true
|
|
this.$nextTick(() => {
|
|
if(row.type == 'file'){
|
|
this.$refs.saveDialog.open('rename').setData(row)
|
|
}else{
|
|
this.$refs.saveDialog.open('edit').setData(row)
|
|
}
|
|
})
|
|
},
|
|
// 上传附件
|
|
uploadFile(){
|
|
this.$nextTick(()=>{
|
|
this.$refs.uploadFile.importFile(this.params);
|
|
})
|
|
},
|
|
//批量删除
|
|
async batch_del(){
|
|
const isFolder = this.selection.some(em=>em.type == "folder");
|
|
const isFile = this.selection.some(em=>em.type == "file");
|
|
|
|
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
const loading = this.$loading();
|
|
let folderList = this.selection.filter(em=>em.type!='file');
|
|
let fileList = this.selection.filter(em=>em.type=='file');
|
|
|
|
let res = {};
|
|
if(isFolder){
|
|
const params = {ids: folderList.map(em => em.id)};
|
|
res = await this.$API.docs.manager.deleteFolder.post(params);
|
|
}
|
|
if(isFile){
|
|
const params = {ids: fileList.map(em => em.id)};
|
|
res = await this.$API.docs.manager.deleteFile.post(params);
|
|
}
|
|
if (res.code == 200) {
|
|
this.$refs.table.refresh();
|
|
this.$message.success("删除成功");
|
|
}
|
|
loading.close();
|
|
}).catch(() => {
|
|
|
|
})
|
|
},
|
|
//表格选择后回调事件
|
|
selectionChange(selection){
|
|
this.selection = selection;
|
|
},
|
|
prev(){
|
|
if(this.routerList.length < 2){
|
|
return
|
|
}
|
|
this.routerList.splice(this.routerList.length-1,1);
|
|
this.$store.commit("SET_docs_router", this.routerList);
|
|
|
|
this.params.folder_id = this.routerList[this.routerList.length-1].id;
|
|
this.$refs.table.upData(this.params);
|
|
},
|
|
//搜索
|
|
upSearch(){
|
|
this.$refs.table.upData(this.params);
|
|
},
|
|
|
|
//本地更新数据
|
|
handleSaveSuccess(data, mode){
|
|
if(mode=='add'){
|
|
if(this.$refs.moveSave && this.$refs.moveSave.visible){
|
|
this.$nextTick(()=>{
|
|
this.$refs.moveSave.node = "";
|
|
this.$refs.moveSave.getData();
|
|
})
|
|
}
|
|
}
|
|
this.$refs.table.refresh()
|
|
},
|
|
|
|
uploadFileSuccess(){
|
|
this.$refs.table.refresh();
|
|
},
|
|
// 打开文件夹
|
|
openFolder(row){
|
|
let arrList = this.routerList;
|
|
let params = {
|
|
name:row.name,
|
|
id:row.id
|
|
}
|
|
arrList.push(params);
|
|
this.$store.commit("SET_docs_router", arrList);
|
|
|
|
this.params.folder_id = row.id;
|
|
this.$refs.table.upData(this.params);
|
|
},
|
|
// 导出下载
|
|
exportChangeShow(params){
|
|
if(params.type == 14){
|
|
this.exportShow = params.data.length>0? true:false;
|
|
}
|
|
},
|
|
async exportData() {
|
|
const isFolder = this.selection.some(em=>em.type == "folder");
|
|
if(isFolder){
|
|
this.$message.warning('只能下载文件');
|
|
return
|
|
}
|
|
let params = this.selection.map(em=>em.id);
|
|
const res = await this.$API.docs.manager.export.post({file_ids:params});
|
|
if(res.code == 200){
|
|
this.exportList = res.data;
|
|
this.$message.success('操作成功，马上导出');
|
|
}
|
|
},
|
|
// 移动文件
|
|
move_file(){
|
|
if(this.selection.length<1){
|
|
this.$message.warning('请选择想要移动的文件、文件夹');
|
|
return
|
|
}
|
|
|
|
this.dialog.move = true
|
|
this.$nextTick(() => {
|
|
this.$refs.moveSave.open('move').setData(this.selection)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nameBox{
|
|
display: flex;align-items: center;
|
|
cursor: pointer;
|
|
.el-icon{
|
|
margin-right: 8px;
|
|
}
|
|
.text{
|
|
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|