mhsnet
8 months ago
parent
153ca38516
commit
07926bf2ca
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<el-dialog title="移动到" :close-on-click-modal="false" :visible.sync="visible"
|
||||
class="JNPF-dialog JNPF-dialog_center JNPF-dialog-tree" lock-scroll width='450px'>
|
||||
<el-tree :data="treeData" :props="defaultProps" default-expand-all highlight-current
|
||||
ref="treeBox" :expand-on-click-node="false" @node-click="handleNodeClick"
|
||||
class="JNPF-common-el-tree" node-key="id">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FolderTree, MoveTo } from '@/api/extend/document'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
id: '',
|
||||
toId: '',
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'fullName'
|
||||
},
|
||||
treeData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id, parentId) {
|
||||
if (!id) return
|
||||
this.id = id
|
||||
this.toId = parentId != '0' ? parentId : "-1"
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
FolderTree(id).then(res => {
|
||||
this.treeData = res.data.list
|
||||
this.$nextTick(() => {
|
||||
this.$refs.treeBox.setCurrentKey(this.toId);
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (this.toId == data.id) return
|
||||
this.toId = data.id
|
||||
},
|
||||
dataFormSubmit() {
|
||||
let toId = this.toId == '-1' ? '0' : this.toId
|
||||
MoveTo(this.id, toId).then((res) => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refresh')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<el-dialog v-bind="$attrs" :close-on-click-modal="false" :modal-append-to-body="false"
|
||||
v-on="$listeners" @open="onOpen" fullscreen lock-scroll class="JNPF-full-dialog" append-to-body
|
||||
:show-close="false" :modal="false">
|
||||
<div class="JNPF-full-dialog-header">
|
||||
<div class="header-title">
|
||||
<p class="header-txt">{{title}}</p>
|
||||
</div>
|
||||
<div class="options">
|
||||
<el-form>
|
||||
<el-button @click="goBack()" :disabled="false">{{$t('common.cancelButton')}}</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<iframe width="100%" height="100%" :src="url" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PreviewFile } from '@/api/common'
|
||||
export default {
|
||||
props: ['file'],
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
url: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
onOpen() {
|
||||
this.title = '文档预览 - ' + this.file.name
|
||||
this.url = ''
|
||||
let query = {
|
||||
fileName: this.file.fileId,
|
||||
fileDownloadUrl: this.file.url
|
||||
}
|
||||
PreviewFile(query).then(res => {
|
||||
if (res.data) {
|
||||
this.url = res.data + '&token=' + this.$store.getters.token
|
||||
} else {
|
||||
this.$message.warning('文件不存在')
|
||||
this.goBack()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<el-dialog title="共享文件" :close-on-click-modal="false" :visible.sync="visible"
|
||||
class="JNPF-dialog JNPF-dialog_center transfer-dialog" lock-scroll width='800px'>
|
||||
<userTransfer v-model="checkedKeys" ref="userTransfer" multiple />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ShareCreate, ShareUserList } from '@/api/extend/document'
|
||||
import userTransfer from '@/components/JNPF-userTransfer'
|
||||
export default {
|
||||
components: { userTransfer },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
documentId: '',
|
||||
treeData: [],
|
||||
checkedKeys: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
if (!id) return
|
||||
this.documentId = id
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.userTransfer && (this.$refs.userTransfer.allLoading = true)
|
||||
ShareUserList(this.documentId).then(res => {
|
||||
let list = res.data.list.map(o => o.shareUserId)
|
||||
this.checkedKeys = list.length ? list : []
|
||||
this.$refs.userTransfer && this.$refs.userTransfer.init()
|
||||
})
|
||||
})
|
||||
},
|
||||
dataFormSubmit() {
|
||||
if (!this.checkedKeys.length) {
|
||||
this.$message({
|
||||
message: '请选择共享人员',
|
||||
type: 'error',
|
||||
duration: 1000,
|
||||
})
|
||||
return
|
||||
}
|
||||
ShareCreate(this.documentId, this.checkedKeys.join(',')).then(res => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refresh')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div id="document-file-uploader">
|
||||
<uploader ref="uploader" :options="options" :autoStart="false" @file-added="onFileAdded"
|
||||
@file-success="onFileSuccess" @file-progress="onFileProgress" @file-error="onFileError"
|
||||
class="uploader-app" @complete="onComplete" :file-status-text="statusText">
|
||||
<uploader-unsupport></uploader-unsupport>
|
||||
<uploader-btn id="file-uploader-btn" ref="uploadBtn">选择文件</uploader-btn>
|
||||
<uploader-list v-show="panelShow">
|
||||
<div class="file-panel" slot-scope="{fileList}">
|
||||
<div class="file-title">
|
||||
<p class="title">上传文件列表</p>
|
||||
<div class="operate">
|
||||
<i class="el-icon-close" @click="close"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="file-list">
|
||||
<li v-for="file in fileList" :key="file.id">
|
||||
<uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true">
|
||||
<template slot-scope="props">
|
||||
<FileItem :file="props.file" :list="props.list" />
|
||||
</template>
|
||||
</uploader-file>
|
||||
</li>
|
||||
<el-empty description="暂无待上传文件" :image-size="120" v-if="!fileList.length">
|
||||
</el-empty>
|
||||
</ul>
|
||||
</div>
|
||||
</uploader-list>
|
||||
</uploader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadMixin from '@/components/Jnpf/Upload/vue-simple-uploader/mixin'
|
||||
import { documentMerge } from '@/api/extend/document'
|
||||
|
||||
export default {
|
||||
props: ['parentId'],
|
||||
mixins: [uploadMixin],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handelSuccess(file) {
|
||||
const form = new FormData()
|
||||
form.append('identifier', file.uniqueIdentifier)
|
||||
form.append('fileName', file.name)
|
||||
form.append('fileSize', file.size)
|
||||
form.append('fileType', file.getType())
|
||||
form.append('extension', file.getExtension())
|
||||
form.append('parentId', this.parentId)
|
||||
documentMerge(form).then(res => {
|
||||
// 自定义完成状态
|
||||
this.$set(file, 'customCompleted', true)
|
||||
this.$emit('fileSuccess', res.data)
|
||||
})
|
||||
},
|
||||
onComplete() {
|
||||
this.uploader.cancel();
|
||||
this.panelShow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#document-file-uploader {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
.uploader-app {
|
||||
width: 600px;
|
||||
}
|
||||
.el-empty {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.file-panel {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
.file-title {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
|
||||
.operate {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
.el-icon-close {
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.file-list {
|
||||
position: relative;
|
||||
height: 240px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
> li {
|
||||
background-color: #fff;
|
||||
}
|
||||
>>> .uploader-file {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
.uploader-file-info {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>>> .uploader-file-icon {
|
||||
&:before {
|
||||
content: '' !important;
|
||||
}
|
||||
}
|
||||
|
||||
>>> .uploader-file-actions > span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏上传按钮 */
|
||||
#file-uploader-btn {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<div class="app-container Document-container nohead">
|
||||
<el-tabs tab-position="left" style="height:100%" v-model="activeTab">
|
||||
<el-tab-pane name="allPanel">
|
||||
<span slot="label"><i class="icon-ym icon-ym-extend-folder-open"></i>全部文档</span>
|
||||
<div class="main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item v-if="levelList.length>1">
|
||||
<a @click="jump(levelList[levelList.length-2],levelList.length-2)">返回上一级</a>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-for="(item,i) in levelList" :key="i">
|
||||
<span v-if="i+1>=levelList.length">{{item.fullName}}</span>
|
||||
<a v-else @click="jump(item,i)">{{item.fullName}}</a>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="keyword" placeholder="请输入关键词查询" clearable
|
||||
@keyup.enter.native="search()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<div class="JNPF-common-search-box-right">
|
||||
<el-button @click="addFolder()">新建文件夹</el-button>
|
||||
<el-button type="primary" icon="el-icon-upload2" @click="uploadFile()">上传文件
|
||||
</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
<JNPF-table v-loading="listLoading" :data="list" empty-text="该文件夹为空" size="mini">
|
||||
<el-table-column prop="fullName" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.type">
|
||||
<i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
|
||||
{{scope.row.fullName}}
|
||||
</span>
|
||||
<span class='cursor-pointer' v-else @click="openFolder(scope.row)">
|
||||
<i class='icon-ym icon-ym-extend-folder text-warning' />
|
||||
{{scope.row.fullName}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isShare" label="" width="35">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.type && scope.row.isShare" title='共享文件'><i
|
||||
class="icon-ym icon-ym-extend-thumbs-up i-default"></i></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fileSize" label="大小" width="90">
|
||||
<template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="creatorTime" label="创建日期" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column label="操作" fixed="right" width="150" align="reght">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handlepreview(scope.row)" :disabled="scope.row.isPreview==null">预览 </el-button>
|
||||
<el-button size="mini" type="text" @click="handleDownLoad(scope.row.id)"
|
||||
:disabled="!scope.row.type">下载</el-button>
|
||||
<el-dropdown>
|
||||
<el-button type="text" size="mini">
|
||||
{{$t('common.moreBtn')}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item size="mini" type="text" class="JNPF-table-delBtn"
|
||||
@click.native="handleDel(scope.$index,scope.row.id)">删除</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="shareFolder(scope.row.id)" v-if="scope.row.type">
|
||||
共享
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="getFolder(scope.row.id)">重命名
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="moveTo(scope.row.id,scope.row.parentId)">
|
||||
移动到
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="shareoutPanel">
|
||||
<span slot="label"><i class="icon-ym icon-ym-extend-thumbs-up"></i>我的共享</span>
|
||||
<div class="main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>我的共享</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="文件名">
|
||||
<el-input v-model="keyword" placeholder="搜索我的文件" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<JNPF-table v-loading="listLoading" :data="list" empty-text="该文件夹为空" size="mini">
|
||||
<el-table-column prop="fullName" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
|
||||
{{scope.row.fullName}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fileSize" label="大小" width="90">
|
||||
<template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="shareTime" label="共享日期" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column label="操作" fixed="right" width="70">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" class="JNPF-table-delBtn"
|
||||
@click="unshare(scope.$index,scope.row.id)">取消共享</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="sharetomePanel">
|
||||
<span slot="label"><i class="icon-ym icon-ym-extend-share"></i>共享给我</span>
|
||||
<div class="main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>共享给我</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="文件名">
|
||||
<el-input v-model="keyword" placeholder="搜索我的文件" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<JNPF-table v-loading="listLoading" :data="list" empty-text="该文件夹为空" size="mini">
|
||||
<el-table-column prop="fullName" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
|
||||
{{scope.row.fullName}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fileSize" label="大小" width="90">
|
||||
<template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="shareTime" label="共享日期" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column prop="creatorUserId" label="共享人员" width="120" />
|
||||
<el-table-column label="操作" fixed="right" width="50">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="handleDownLoad(scope.row.id)">下载
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="trashPanel">
|
||||
<span slot="label"><i class="icon-ym icon-ym-extend-trash"></i>回收站</span>
|
||||
<div class="main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>回收站</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="文件名">
|
||||
<el-input v-model="keyword" placeholder="搜索我的文件" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<JNPF-table v-loading="listLoading" :data="list" empty-text="该文件夹为空" size="mini">
|
||||
<el-table-column prop="fullName" label="文件名">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.type">
|
||||
<i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
|
||||
{{scope.row.fullName}}
|
||||
</span>
|
||||
<span v-else>
|
||||
<i class='icon-ym icon-ym-extend-folder text-warning' />
|
||||
{{scope.row.fullName}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fileSize" label="大小" width="90">
|
||||
<template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deleteTime" label="删除日期" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column label="操作" fixed="right" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="recovery(scope.$index,scope.row.id)">
|
||||
还原</el-button>
|
||||
<el-button size="mini" type="text" class="JNPF-table-delBtn"
|
||||
@click="trashDel(scope.$index,scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<userBox v-if="userBoxVisible" ref="userBox" @refresh="initData" />
|
||||
<folderTree v-if="folderTreeVisible" ref="folderTree" @refresh="initData" />
|
||||
<fileUploader ref="fileUploader" :parentId="parentId" @fileSuccess="fileSuccess" />
|
||||
<Preview :visible.sync="previewVisible" :file="activeFile" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AllList, Create, Delete, Download, DocumentInfo, ShareCancel, ShareOutList, ShareTomeList, TrashDelete, TrashList, TrashRecovery, Update } from '@/api/extend/document'
|
||||
import userBox from './UserBox'
|
||||
import folderTree from './FolderTree'
|
||||
import FileUploader from './fileUploader'
|
||||
import Preview from "./Preview";
|
||||
|
||||
export default {
|
||||
name: 'extend-document',
|
||||
components: { userBox, folderTree, FileUploader, Preview },
|
||||
data() {
|
||||
return {
|
||||
userBoxVisible: false,
|
||||
folderTreeVisible: false,
|
||||
detailVisible: false,
|
||||
activeTab: 'allPanel',
|
||||
keyword: '',
|
||||
parentId: '0',
|
||||
listLoading: true,
|
||||
previewVisible: false,
|
||||
list: [],
|
||||
levelList: [{
|
||||
id: '0',
|
||||
fullName: '全部文档'
|
||||
}],
|
||||
activeFile:{
|
||||
fileId: '',
|
||||
name: '',
|
||||
url: '',
|
||||
fileVersionId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeTab(val) {
|
||||
if (val === 'allPanel') {
|
||||
this.levelList = [{
|
||||
id: "0",
|
||||
fullName: '全部文档'
|
||||
}]
|
||||
this.parentId = "0"
|
||||
}
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.list = []
|
||||
this.keyword = ''
|
||||
this.initData()
|
||||
},
|
||||
initData() {
|
||||
this.listLoading = true
|
||||
let data = { keyword: this.keyword }
|
||||
if (this.activeTab === 'allPanel') {
|
||||
data = { ...data, parentId: this.parentId }
|
||||
AllList(data).then(res => {
|
||||
this.list = res.data.list
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
if (this.activeTab === 'shareoutPanel') {
|
||||
ShareOutList(data).then(res => {
|
||||
this.list = res.data.list
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
if (this.activeTab === 'sharetomePanel') {
|
||||
ShareTomeList(data).then(res => {
|
||||
this.list = res.data.list
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
if (this.activeTab === 'trashPanel') {
|
||||
TrashList(data).then(res => {
|
||||
this.list = res.data.list
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
search() {
|
||||
this.initData()
|
||||
},
|
||||
handleDel(index, id) {
|
||||
this.$confirm('您确定要把所选文件放入回收站, 是否继续?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
Delete(id).then(res => {
|
||||
this.list.splice(index, 1);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
});
|
||||
})
|
||||
}).catch(() => { });
|
||||
},
|
||||
unshare(index, id) {
|
||||
this.$confirm('您确定要取消共享, 是否继续?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
ShareCancel(id).then(res => {
|
||||
this.list.splice(index, 1);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
});
|
||||
})
|
||||
}).catch(() => { });
|
||||
},
|
||||
recovery(index, id) {
|
||||
this.$confirm('您确定要还原选中的文件?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
TrashRecovery(id).then(res => {
|
||||
this.list.splice(index, 1);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
});
|
||||
})
|
||||
}).catch(() => { });
|
||||
},
|
||||
trashDel(index, id) {
|
||||
this.$confirm('文件删除后将无法恢复，您确定要彻底删除所选文件吗?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
TrashDelete(id).then(res => {
|
||||
this.list.splice(index, 1);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
});
|
||||
})
|
||||
}).catch(() => { });
|
||||
},
|
||||
moveTo(id, parentId) {
|
||||
this.folderTreeVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.folderTree.init(id, parentId)
|
||||
})
|
||||
},
|
||||
shareFolder(id) {
|
||||
this.userBoxVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.userBox.init(id)
|
||||
})
|
||||
},
|
||||
getFolder(id) {
|
||||
DocumentInfo(id).then(res => {
|
||||
this.addFolder(res.data)
|
||||
})
|
||||
},
|
||||
// 新建文件夹
|
||||
addFolder(info) {
|
||||
let inputValue = ""
|
||||
if (info) { inputValue = info.fullName }
|
||||
let title = info ? (info.type ? '重命名文件' : '重命名文件夹') : '新建文件夹'
|
||||
this.$prompt('', title, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPlaceholder: '输入名称',
|
||||
inputErrorMessage: '请正确输入文件夹名称',
|
||||
inputValue: inputValue,
|
||||
// inputPattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
|
||||
closeOnClickModal: false
|
||||
}).then(({ value }) => {
|
||||
let data = {
|
||||
type: info && info.type ? info.type : "0",
|
||||
parentId: this.parentId,
|
||||
fullName: value
|
||||
}
|
||||
if (info && info.id) {
|
||||
Object.assign(data, { id: info.id })
|
||||
Update(data).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
});
|
||||
this.initData()
|
||||
})
|
||||
} else {
|
||||
Create(data).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
});
|
||||
this.initData()
|
||||
})
|
||||
}
|
||||
}).catch(() => { });
|
||||
},
|
||||
uploadFile() {
|
||||
this.$refs.fileUploader && this.$refs.fileUploader.openUploader()
|
||||
},
|
||||
fileSuccess() {
|
||||
this.reset()
|
||||
},
|
||||
//预览文件
|
||||
handlepreview(row) {
|
||||
this.activeFile.name = row.fullName;
|
||||
this.activeFile.fileId = row.filePath;
|
||||
this.activeFile.fileVersionId = null;
|
||||
this.activeFile.url = row.uploaderUrl;
|
||||
this.previewVisible = true;
|
||||
},
|
||||
// 下载文件
|
||||
handleDownLoad(id) {
|
||||
Download(id).then(res => {
|
||||
this.jnpf.downloadFile(res.data.url, res.data.name)
|
||||
})
|
||||
},
|
||||
// 打开文件夹
|
||||
openFolder(item) {
|
||||
this.parentId = item.id
|
||||
this.levelList.push(item)
|
||||
this.reset()
|
||||
},
|
||||
jump(item, i) {
|
||||
this.parentId = item.id
|
||||
this.reset()
|
||||
this.levelList = this.levelList.slice(0, i + 1)
|
||||
},
|
||||
toFileExt(ext) {
|
||||
if (ext) ext = ext.replace('.', '')
|
||||
if (ext == "doc" || ext == "docx") {
|
||||
return "icon-ym-file-word";
|
||||
}
|
||||
if (ext == "xls" || ext == "xlsx") {
|
||||
return "icon-ym-file-excel";
|
||||
}
|
||||
if (ext == "ppt" || ext == "pptx") {
|
||||
return "icon-ym-file-ppt";
|
||||
}
|
||||
if (ext == "rar" || ext == "zip") {
|
||||
return "icon-ym-file-zip";
|
||||
}
|
||||
if (ext == "txt" || ext == "log") {
|
||||
return "icon-ym-file-text";
|
||||
}
|
||||
if (ext == "html" || ext == "cs" || ext == "xml") {
|
||||
return "icon-ym-file-code";
|
||||
}
|
||||
if (ext == "gif" || ext == "jpg" || ext == "jpeg" || ext == "bmp" || ext == "png") {
|
||||
return "icon-ym-file-image1";
|
||||
}
|
||||
if (ext == "pdf") {
|
||||
return "icon-ym-file-pdf";
|
||||
}
|
||||
if (ext == "mp3") {
|
||||
return "icon-ym-file-audio";
|
||||
}
|
||||
if (ext == "mp4") {
|
||||
return "icon-ym-file-movie";
|
||||
}
|
||||
return "icon-ym-file-blank";
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.Document-container {
|
||||
position: relative;
|
||||
.JNPF-common-search-box {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.JNPF-common-head {
|
||||
padding: 14px 0 10px;
|
||||
}
|
||||
>>> .el-tabs__item {
|
||||
text-align: left !important;
|
||||
width: 160px;
|
||||
.icon-ym {
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
>>> .el-tabs__content {
|
||||
height: 100%;
|
||||
.el-tab-pane {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
height: 100%;
|
||||
.icon-ym {
|
||||
font-size: 14px;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="JNPF-preview-main">
|
||||
<div class="JNPF-common-page-header">
|
||||
<el-page-header @back="goBack" :content="title" />
|
||||
<div class="options">
|
||||
<el-button @click="goBack()">{{$t('common.cancelButton')}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<iframe width="100%" height="100%" :src="url" frameborder="0"></iframe>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { filePreviewServer } from '@/utils/define'
|
||||
import { PreviewFile } from '@/api/extend/documentPreview'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
url: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$emit('close')
|
||||
},
|
||||
init(id, name, type) {
|
||||
let Base64 = require('js-base64').Base64;
|
||||
this.url = ''
|
||||
if (!id) return this.goBack()
|
||||
this.title = '文档预览 - ' + name
|
||||
PreviewFile(id, type).then(res => {
|
||||
if (res.data) {
|
||||
if (type === 'localPreview') {
|
||||
this.url = `${filePreviewServer}/onlinePreview?url=` + encodeURIComponent(Base64.encode(res.data)) + '&token=' + this.$store.getters.token
|
||||
return
|
||||
}
|
||||
this.url = res.data
|
||||
} else {
|
||||
this.$message.warning('文件不存在')
|
||||
this.goBack()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue