|
|
@@ -0,0 +1,363 @@
|
|
|
+<template>
|
|
|
+ <el-row :gutter="8" class='mt-10'>
|
|
|
+ <el-col :span="4">
|
|
|
+ <basic-container style='min-height: 720px;padding-left: 0'>
|
|
|
+ <div class='full-width flex flex-center flex-justify-between'>
|
|
|
+ <span class='bold'>文件柜分类</span>
|
|
|
+ <el-button type='primary' @click='addFolder'>新 增</el-button>
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+ <div class='flex flex-col flex-justify-start flex-align-start padding' style='min-height: 900px'>
|
|
|
+ <span class=' full-width' v-for='(item,index) in folders' :key='item.id'>
|
|
|
+ <div class='item full-width flex flex-col pointer' :class='active === index ? "item-selected":"" '
|
|
|
+ @click='changeFolder(index)'>
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <basic-container class="grid-content bg-purple">
|
|
|
+ <div class='flex flex-center flex-justify-between'>
|
|
|
+ <div class='flex flex-center'>
|
|
|
+ <base-button class="ml-20 " icon="Plus" title="上传文件"
|
|
|
+ @click="show = true"/>
|
|
|
+ <base-button class="ml-20 " icon="Back" title="返回上一层"
|
|
|
+ v-if='currentFolder && currentFolder.parentId !== 0'
|
|
|
+ @click="backFolder"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class='flex flex-center'>
|
|
|
+ <base-button class="ml-20 " icon="Plus" title="授权"
|
|
|
+ @click="authorShow = true"/>
|
|
|
+ <base-button class="ml-20 " icon="Plus" title="新建文件夹"
|
|
|
+ @click="addSubFolder"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <basic-curd
|
|
|
+ :option="option"
|
|
|
+ :data="data"
|
|
|
+ @row-view='rowDetail'
|
|
|
+ @row-del="rowDel"
|
|
|
+ ></basic-curd>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ <!-- dialog-->
|
|
|
+ <el-dialog v-model='show' title='上传文件'>
|
|
|
+ <div>
|
|
|
+ <el-upload
|
|
|
+ drag
|
|
|
+ :action="action"
|
|
|
+ multiple
|
|
|
+ accept='.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.ppt,pptx'
|
|
|
+ show-file-list
|
|
|
+ :on-success='uploadSuccess'
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload">
|
|
|
+ <upload-filled/>
|
|
|
+ </el-icon>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 拖拽或者 <em>点击上传文件</em>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <el-divider/>
|
|
|
+ <div class='flex flex-justify-end'>
|
|
|
+ <el-button @click='show = false'>取 消</el-button>
|
|
|
+ <el-button type='primary' @click='saveFile'>确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-image-viewer
|
|
|
+ v-if='showImage'
|
|
|
+ :url-list="imgList"
|
|
|
+ @close='showImage = false'
|
|
|
+ />
|
|
|
+ <el-dialog v-model='authorShow' title='批量授权'>
|
|
|
+ <authorize :list='data' :folder-id='currentFolder.id' :extra='{type:2}' @close='authorShow = false'/>
|
|
|
+ </el-dialog>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BasicContainer from '@/components/basic-container/main.vue'
|
|
|
+import baseButton from '@/components/base-button.vue'
|
|
|
+import basicCurd from '@/components/basic-curd/index.vue'
|
|
|
+import api from '@/api'
|
|
|
+import authorize from '@/views/home/component/authorize.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'index',
|
|
|
+ components: { BasicContainer, baseButton, basicCurd, authorize },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ authorShow: false,
|
|
|
+ showImage: false,
|
|
|
+ imgList: [],
|
|
|
+ folders: [],
|
|
|
+ show: false,
|
|
|
+ active: 0,
|
|
|
+ form: {},
|
|
|
+ data: [],
|
|
|
+ action: api.uploadPath,
|
|
|
+ option: {
|
|
|
+ align: 'center',
|
|
|
+ menuAlign: 'center',
|
|
|
+ menuWidth: 380,
|
|
|
+ size: 'mini',
|
|
|
+ addBtn: false,
|
|
|
+ viewBtn: true,
|
|
|
+ editBtn: false,
|
|
|
+ refreshBtn: false,
|
|
|
+ columnBtn: false,
|
|
|
+ labelWidth: 140,
|
|
|
+ border: true,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '文件/文件夹名称',
|
|
|
+ prop: 'title'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '更新/上传时间',
|
|
|
+ prop: 'updateTime'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '文件',
|
|
|
+ prop: 'updateTime'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ currentFolder: null,
|
|
|
+ lastParentFolder: [],
|
|
|
+ page: {
|
|
|
+ size: 10,
|
|
|
+ current: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ fileList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.list()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ list () {
|
|
|
+ this.$api.company.list({ current: 1, size: 100, parentId: '' }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.folders = res.data.records
|
|
|
+ if (this.folders.length > 0 && this.currentFolder !== null) {
|
|
|
+ this.currentFolder = this.folders[0]
|
|
|
+ }
|
|
|
+ this.onLoad()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addFolder () {
|
|
|
+ this.$prompt('请输入分类名称', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消'
|
|
|
+ }).then(({ value }) => {
|
|
|
+ this.$api.company.submint({ title: value }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(res.msg)
|
|
|
+ this.list()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeFolder (index) {
|
|
|
+ this.active = index
|
|
|
+ this.currentFolder = this.folders[index]
|
|
|
+ this.page.current = 1
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+ onLoad () {
|
|
|
+ const data = { parentId: this.currentFolder.id }
|
|
|
+ this.$api.company.list(Object.assign(data, this.page)).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.data = res.data.records
|
|
|
+ this.page.total = res.data.total
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rowSave (row, done, loading) {
|
|
|
+ const data = {
|
|
|
+ projectInfoId: this.info.id
|
|
|
+ }
|
|
|
+ this.$api.projects.meeting.save(Object.assign(row, data)).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ done(row)
|
|
|
+ this.onLoad()
|
|
|
+ }, error => {
|
|
|
+ window.console.log(error)
|
|
|
+ loading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rowUpdate (row, index, done, loading) {
|
|
|
+ const data = {
|
|
|
+ projectInfoId: this.info.id
|
|
|
+ }
|
|
|
+ this.$api.projects.meeting.update(Object.assign(row, data)).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(res.msg)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ done(row)
|
|
|
+ this.onLoad()
|
|
|
+ }, error => {
|
|
|
+ window.console.log(error)
|
|
|
+ loading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rowDetail (row, index) {
|
|
|
+ if (row.type === 1) {
|
|
|
+ this.imgList = [row.url]
|
|
|
+ this.showImage = true
|
|
|
+ } else if (row.type === 2) {
|
|
|
+ const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: row.fileId } })
|
|
|
+ window.open(routeData.href, '_blank')
|
|
|
+ } else {
|
|
|
+ this.lastParentFolder = this.lastParentFolder.filter(sub => sub.id !== this.currentFolder.id)
|
|
|
+ this.lastParentFolder.push(this.currentFolder)
|
|
|
+ this.currentFolder = row
|
|
|
+ this.onLoad()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rowDel (row, index, done) {
|
|
|
+ console.log(row, index, done)
|
|
|
+ this.$confirm('确定将选择数据删除?', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ return this.$api.company.removeList({ ids: row.id })
|
|
|
+ }).then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '操作成功!'
|
|
|
+ })
|
|
|
+ // 数据回调进行刷新
|
|
|
+ this.onLoad()
|
|
|
+ }).catch(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploadSuccess (res, file, files) {
|
|
|
+ this.fileList = files.map(sub => sub.response.data)
|
|
|
+ },
|
|
|
+ saveFile () {
|
|
|
+ if (this.fileList.length === 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.fileList.forEach(sub => {
|
|
|
+ if (['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'].includes(sub.suffix)) {
|
|
|
+ // save Library
|
|
|
+ const data = {
|
|
|
+ title: sub.originalFileName,
|
|
|
+ fileId: sub.id,
|
|
|
+ suffix: sub.suffix,
|
|
|
+ volume: sub.volume,
|
|
|
+ url: sub.filePath,
|
|
|
+ category: 4,
|
|
|
+ content: '',
|
|
|
+ parentId: this.currentFolder.id
|
|
|
+ }
|
|
|
+ this.$api.common.submit(data).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.addFile(this.currentFolder.id, sub, 1)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.addFile(this.currentFolder.id, sub, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 保存文件
|
|
|
+ * @param parentId
|
|
|
+ * @param item
|
|
|
+ * @param type 1 图片 2 文件夹
|
|
|
+ */
|
|
|
+ addFile (parentId, item, type) {
|
|
|
+ const data = {
|
|
|
+ title: item.originalFileName,
|
|
|
+ parentId,
|
|
|
+ fileId: item.id,
|
|
|
+ suffix: item.suffix,
|
|
|
+ volume: item.volume,
|
|
|
+ url: item.filePath,
|
|
|
+ type
|
|
|
+ }
|
|
|
+ this.$api.company.submint(data).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.show = false
|
|
|
+ this.onLoad()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addSubFolder () {
|
|
|
+ this.$prompt('请输入文件夹名称', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消'
|
|
|
+ }).then(({ value }) => {
|
|
|
+ const data = { parentId: this.currentFolder.id, title: value, type: 2 }
|
|
|
+ this.$api.company.submint(data).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(res.msg)
|
|
|
+ this.onLoad()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ backFolder () {
|
|
|
+ this.currentFolder = this.lastParentFolder[this.lastParentFolder.length - 1]
|
|
|
+ this.lastParentFolder = this.lastParentFolder.filter(sub => sub.id !== this.currentFolder.id)
|
|
|
+ this.onLoad()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.item {
|
|
|
+ padding: 10px 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ text-align: left;
|
|
|
+ background-color: #E4E4E4;
|
|
|
+}
|
|
|
+
|
|
|
+.item:hover {
|
|
|
+ background-color: #AB7630;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.item-selected {
|
|
|
+ background-color: #AB7630;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.icon {
|
|
|
+ width: 80px;
|
|
|
+ height: 66px;
|
|
|
+}
|
|
|
+</style>
|