realty/virgo.wzfrontend/console/src/views/work/datacenter/project.vue

<template>
	<div class="datacenter-project  hui-flex hui-content">
		<div class="work-document-title">
			<el-button type="primary" size="medium" v-if="parentId !== -1" @click="$refs.upload.reloadUpload()">
				<i class="iconfont huifont-shangchuan"></i>上传
			</el-button>
			<el-button type="info" size="medium" @click="insertFolder">
				<i class="el-icon-folder-add"></i>
				新增文件夹
			</el-button>
			<el-button type="info" size="medium" @click="setDialog = true">
				<i class="el-icon-setting"></i>
				设置
			</el-button>
			<el-button type="info" size="medium" @click="messageVisible = true">
				<i class="el-icon-bell"></i>
				审核
			</el-button>
			<data-upload ref="upload" v-show="false" :parentId="parentId" type="project" @reload="init"></data-upload>
		</div>
		<div class="work-document-breadcrumb">
			<div v-if="parentId!==-1" class="breadcrumb-back" @click="$router.back(-1)">
				<span>返回上一级</span>
			</div>
			<div class="breadcrumb-line" v-if="parentId!==-1"></div>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item v-if="folderList.length === 0">全部文件</el-breadcrumb-item>
				<el-breadcrumb-item v-else :to="{ path: $router.path }">全部文件</el-breadcrumb-item>
				<el-breadcrumb-item v-for="(item,index) in folderList" :to="returnPath(index)"
					:key="item.id">{{item.name}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="hui-flex-box hui-table">
			<el-table :data="tableData" row-key="id" height="100%" border @row-click="clickRow">
				<el-table-column prop="name" label="文件夹名称">
					<template slot-scope="scope">
						<div class="work-document-name">
							<svg-icon v-if="scope.row.directory" name="dir" width="24" height="20"></svg-icon>
							<svg-icon v-else :name="iconName(scope.row.name)" width="24" height="20"></svg-icon>
							<span>{{scope.row.name}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200">
					<template slot-scope="scope">
						<div class="hui-table-operation" @click.stop="()=>{}">
							<span class="table-operation" @click.stop="setPermission(scope.row)">
								权限
							</span>
							<span class="table-operation" v-if="!scope.row.directory" @click.stop="download(scope.row)">
								下载
							</span>
							<span class="table-operation"
								v-if="!scope.row.directory && isPreview(iconName(scope.row.name)).isPreview"
								@click.stop="preview(scope.row,isPreview(iconName(scope.row.name)).type)">
								预览
							</span>
							<span class="table-operation" v-if="scope.row.directory"
								@click.stop="updateFolder(scope.row)">
								重命名
							</span>
							<span class="table-operation" @click.stop="deleteItem(scope.row)">
								删除
							</span>
						</div>
					</template>
				</el-table-column>
				<template slot="empty">
					<empty description="暂无数据"></empty>
				</template>
			</el-table>
		</div>
		<el-dialog title="设置" :visible.sync="dialogVisible" :append-to-body="true">
			<set-permission v-if="dialogVisible" @callback="callBack" :detail="detail"></set-permission>
		</el-dialog>
		<el-dialog :title="isUpdate?'编辑文件夹':'新建文件夹'" :visible.sync="formDialog" width="900px" :append-to-body="true">
			<folder-form v-if="formDialog" @callback="callBack" :parentId="parentId" :detail="detail"
				:isUpdate="isUpdate" type="project">
			</folder-form>
		</el-dialog>
		<el-dialog title="设置审核人" :visible.sync="setDialog" width="900px" :append-to-body="true">
			<set-approve v-if="setDialog" @callback="callBack" :type="1" title="设置审核人"></set-approve>
		</el-dialog>
		<el-dialog title="审核列表" :visible.sync="messageVisible" width="80%" :append-to-body="true">
			<message v-if="messageVisible" :option="{messageType:5,dataTypes:'1,2,3'}"></message>
		</el-dialog>
		<el-dialog title="预览" :visible.sync="fileVisible" width="900px" :append-to-body="true">
			<video v-if="previewType === 'video' && iframeSrc && fileVisible" :src="iframeSrc" width="100%"
				height="100%" style="background: #000;" controls>
			</video>
			<iframe v-if="previewType === 'pdf' && iframeSrc && fileVisible" :src="iframeSrc" frameborder="0"
				width="100%" height="100%">
			</iframe>
			<preview-excel v-if="previewType === 'excel' && iframeSrc && fileVisible" :loadUrl="iframeSrc">
			</preview-excel>
			<previewPPT v-if="previewType === 'ppt' && iframeSrc && fileVisible" :loadUrl="iframeSrc"></previewPPT>
		</el-dialog>
		<image-viewer v-if="isShow" :url-list="[imageUrl]" :on-close="()=>isShow = false"></image-viewer>
	</div>
</template>

<script>
	import {
		generateFileNodeProject,
		getProjectDirList,
		downloadFile,
		deleteProjectDir,
		deleteProjectFile,
		getProjectDirListByids,
		getSetApprove
	} from '@/httpApi/datacenter'
	import {
		projectPermission,
		downloadFileDom
	} from '@/uitls/datacenter'
	import setPermission from '@/components/datacenter/setPermission'
	import dataUpload from '@/components/datacenter/dataUpload'
	import folderForm from '@/components/datacenter/folderForm'
	import setApprove from '@/components/datacenter/setApprove'
	import message from '@/components/message/message'
	import imageViewer from 'element-ui/packages/image/src/image-viewer.vue';
	import previewExcel from '@/components/datacenter/previewExcel.vue'
	import previewPPT from '@/components/datacenter/previewPPT.vue'
	export default {
		data() {
			return {
				tableData: [],
				parentId: -1,
				dialogVisible: false,
				formDialog: false,
				isUpdate: false,
				detail: {},
				folderList: [],
				setDialog: false,
				messageVisible: false,
				iframeSrc: '',
				fileVisible: false,
				isShow: false,
				imageUrl: '',
				previewType: ''
			}
		},
		created() {
			this.init();
		},
		components: {
			setPermission,
			dataUpload,
			folderForm,
			setApprove,
			message,
			imageViewer,
			previewExcel,
			previewPPT
		},
		methods: {
			init() {
				if (this.$route.query.path) {
					let data = this.$route.query.path.split('/');
					this.parentId = data[data.length - 1];
					this.projectDirList();
					getProjectDirListByids(data).then(res => {
						if (res.state) {
							this.folderList = res.data;
						}
					})
				} else {
					this.folderList = [];
					this.parentId = -1;
					this.initProjectDir();
				}
			},
			initProjectDir() {
				generateFileNodeProject(this.$store.getters.project.id).then(res => {
					if (res.state) {
						this.tableData = res.data.sort((a, b) => b.directory - a.directory);
					}
				});
			},
			projectDirList() {
				getProjectDirList(this.parentId).then(res => {
					if (res.state) {
						this.tableData = res.data.sort((a, b) => b.directory - a.directory);
					}
				});
			},
			clickRow(data) {
				if (!data.directory) return;
				projectPermission({
					id: data.id,
					oldPermission: data.permissions,
					type: 'access',
					name: data.name,
					folderList: this.folderList
				}, () => {
					let path = this.$route.query.path;
					this.$router.push({
						path: this.$router.path,
						query: {
							path: !path ? String(data.id) : (path + '/' + data.id)
						}
					})
				});
			},
			returnPath(index) {
				if (index === (this.folderList.length - 1)) return ''
				let data = this.folderList.slice(0, (index + 1)).map(res => res.id);
				return {
					path: this.$router.path,
					query: {
						path: data.join('/')
					}
				}
			},
			download(data) {
				projectPermission({
					id: data.id,
					oldPermission: data.permissions || '1',
					type: 'fileDownload',
					name: data.name,
					folderList: this.folderList
				}, () => {
					downloadFile(0, data.id).then(res => {
						let fileName = data.name;
						downloadFileDom(res, fileName);
					});
				});
			},
			preview(data, type) {
				projectPermission({
					id: data.id,
					oldPermission: data.permissions || '1',
					type: 'fileView',
					name: data.name,
					folderList: this.folderList
				}, () => {
					this.previewFile(data, type);
				});
			},
			isPreview(filename) {
				let type = '',
					isPreview = false,
					imageBox = ['jpg', 'jpeg', 'png', 'gif', 'webp'],
					officeBox = ['docx', 'doc', 'xlsx', 'pptx'],
					videoBox = ['mp4', 'webm', 'ogg'];
				if (imageBox.filter(node => node === filename).length > 0) {
					type = 'image';
					isPreview = true;
				} else if (filename === 'pdf') {
					type = 'pdf';
					isPreview = true;
				} else if (officeBox.filter(node => node === filename).length > 0) {
					type = filename;
					isPreview = true;
				} else if (videoBox.filter(node => node === filename).length > 0) {
					type = 'video';
					isPreview = true;
				}
				return {
					isPreview: isPreview,
					type: type
				}
			},
			insertFolder() {
				this.isUpdate = false;
				this.formDialog = true;
			},
			callBack(type) {
				this.dialogVisible = false;
				this.formDialog = false;
				this.setDialog = false;
				if (type === 'init') this.init();
			},
			setPermission(data) {
				this.detail = data;
				this.dialogVisible = true;
			},
			updateFolder(data) {
				this.detail = data;
				this.isUpdate = true;
				this.formDialog = true;
			},
			deleteItem(data) {
				projectPermission({
					id: data.id,
					oldPermission: data.permissions || '1',
					type: data.directory ? 'delete' : 'fileDelete',
					name: data.name,
					folderList: this.folderList
				}, () => {
					data.directory ? deleteProjectDir(data.id).then(this.successFunc) : deleteProjectFile(data.id)
						.then(this.successFunc);
				});
			},
			successFunc(res) {
				if (res.state) {
					this.$message.success('操作成功');
					this.init();
				}
			},
			iconName(name) {
				let nameList = name.split('.');
				return nameList[nameList.length - 1].toLowerCase();
			},
			previewFile(data, type) {
				this.previewType = type;
				if (type === 'image') {
					this.imageUrl = data.node.url;
					this.isShow = true;
				} else if (type === 'video') {
					this.iframeSrc = data.node.url;
					this.fileVisible = true;
				} else if (type === 'pdf') {
					this.iframeSrc = `./pdf/web/viewer.html?file=${data.node.url}`;
					this.fileVisible = true;
				} else if (type === 'docx' || type === 'doc') {
					this.iframeSrc =
						`./pdf/web/viewer.html?file=https://www.waywish.com/file/fileNodeProject/${data.id}/renderPdf`;
					this.previewType = 'pdf';
					this.fileVisible = true;
				} else if (type === 'xlsx') {
					this.iframeSrc = data.node.url;
					this.previewType = 'excel';
					this.fileVisible = true;
				} else if (type === 'pptx') {
					this.iframeSrc = data.node.url;
					this.previewType = 'ppt';
					this.fileVisible = true;
				}
			}
		},
		watch: {
			$route() {
				this.tableData = [];
				this.init();
			}
		}
	}
</script>

<style lang="scss">
	.datacenter-project {
		width: 100%;
		height: 100%;
		padding: 20px 24px;
		border-radius: 8px;

		.work-document-title {
			padding-bottom: 20px;
			display: flex;
			align-items: center;

			.el-button {
				padding: 0 16px;
				margin: 0 !important;
				margin-right: 12px !important;
			}

			.el-button>span {
				display: flex;
				height: 32px;
				align-items: center;

				.el-icon-folder-add {
					font-size: 18px;
					margin-right: 5px;
				}

				.el-icon-setting,
				.el-icon-bell {
					margin-right: 3px;
				}
			}

			.button-icon {
				padding: 5px;
				font-size: 16px;
			}
		}

		.work-document-breadcrumb {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			height: 20px;

			.breadcrumb-back {
				max-width: 120px;
				cursor: pointer;
				display: flex;
				align-items: center;
				font-size: 14px;

				i {
					font-size: 18px;
				}
			}

			.breadcrumb-line {
				margin: 0 10px;
				width: 1px;
				background: $--color-common;
				height: 14px;
			}

			.el-breadcrumb {
				font-size: 14px;

				.el-breadcrumb__item {
					cursor: pointer;
				}
			}

			.el-breadcrumb__inner {
				color: $--color-common;
				opacity: 0.5;
			}

			.el-breadcrumb__inner.is-link,
			.el-breadcrumb__inner a {
				transition: none;
				font-weight: normal;
				opacity: 1;
			}
		}

		.hui-table {
			padding: 0;
		}

		.el-table {

			tr {
				cursor: pointer;
			}

			.cell {

				.work-document-name {
					display: flex;
					align-items: center;

					span {
						font-weight: bold;
						margin-left: 5px;
					}
				}
			}
		}
	}
</style>