github/tank-front
4
0
Fork 0
mirror of https://github.com/eyebluecn/tank-front synced 2024-04-21 12:31:55 +00:00
Code Issues Releases Wiki Activity

Finish the pdf preview.

Browse Source
This commit is contained in:
lishuang
2020-06-13 00:35:34 +08:00
parent 3c97f38c5e
commit 34ef6e4ec9
5 changed files with 170 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/model/matter/Matter.ts
+20 -17
View File
@@ -1,4 +1,4 @@
import { message } from "antd";
import {message} from "antd";
import BaseEntity from "../base/BaseEntity";
import Filter from "../base/filter/Filter";
import HttpUtil from "../../util/HttpUtil";
@@ -12,13 +12,15 @@ import MimeUtil from "../../util/MimeUtil";
import StringUtil from "../../util/StringUtil";
import NumberUtil from "../../util/NumberUtil";
import SafeUtil from "../../util/SafeUtil";
import ImagePreviewer from "../../../pages/widget/previewer/ImagePreviewer";
import BrowserPreviewer from "../../../pages/widget/previewer/BrowserPreviewer";
export default class Matter extends BaseEntity {
puuid: string = "";
userUuid: string = "";
dir: boolean = false;
alien: boolean = false;
name: string | null = null;
name: string = "";
md5: string | null = null;
size: number = 0;
privacy: boolean = true;
@@ -177,15 +179,16 @@ export default class Matter extends BaseEntity {
previewUrl = that.getPreviewUrl();
}
// todo preview
// if (that.isImage()) {
//
// Vue.$photoSwipePlugin.showPhoto(previewUrl)
//
// } else if (that.isPdf()) {
//
// Vue.$previewer.previewPdf(that.name, previewUrl, that.size)
//
if (that.isImage()) {
ImagePreviewer.showSinglePhoto(previewUrl)
} else if (that.isPdf()) {
BrowserPreviewer.show(that.name, previewUrl, that.size)
}
// } else if (that.isDoc() || that.isPpt() || that.isXls()) {
//
// //如果是分享中的预览，直接就可以公有访问。
@@ -229,7 +232,7 @@ export default class Matter extends BaseEntity {
finallyCallback?: any
) {
let that = this;
let form = { userUuid: that.userUuid, name: that.name, puuid: that.puuid };
let form = {userUuid: that.userUuid, name: that.name, puuid: that.puuid};
return this.httpPost(
Matter.URL_MATTER_CREATE_DIRECTORY,
@@ -246,7 +249,7 @@ export default class Matter extends BaseEntity {
httpDelete(successCallback?: any, errorCallback?: any) {
this.httpPost(
Matter.URL_MATTER_DELETE,
{ uuid: this.uuid },
{uuid: this.uuid},
function (response: any) {
typeof successCallback === "function" && successCallback(response);
},
@@ -257,7 +260,7 @@ export default class Matter extends BaseEntity {
httpDeleteBatch(uuids: string, successCallback?: any, errorCallback?: any) {
this.httpPost(
Matter.URL_MATTER_DELETE_BATCH,
{ uuids: uuids },
{uuids: uuids},
function (response: any) {
typeof successCallback === "function" && successCallback(response);
},
@@ -274,7 +277,7 @@ export default class Matter extends BaseEntity {
let that = this;
this.httpPost(
Matter.URL_MATTER_RENAME,
{ uuid: this.uuid, name: name },
{uuid: this.uuid, name: name},
function (response: any) {
that.assign(response.data.data);
typeof successCallback === "function" && successCallback(response);
@@ -292,7 +295,7 @@ export default class Matter extends BaseEntity {
let that = this;
this.httpPost(
Matter.URL_CHANGE_PRIVACY,
{ uuid: this.uuid, privacy: privacy },
{uuid: this.uuid, privacy: privacy},
function (response: any) {
that.privacy = privacy;
if (typeof successCallback === "function") {
@@ -312,7 +315,7 @@ export default class Matter extends BaseEntity {
successCallback?: any,
errorCallback?: any
) {
let form: any = { srcUuids: srcUuids };
let form: any = {srcUuids: srcUuids};
if (destUuid) {
form.destUuid = destUuid;
} else {
src/pages/matter/widget/MatterPanel.tsx
+19 -12
View File
@@ -19,8 +19,8 @@ import {
DeleteFilled,
ExclamationCircleFilled,
} from "@ant-design/icons";
import { Modal, Checkbox } from "antd";
import { CheckboxChangeEvent } from "antd/es/checkbox";
import {Modal, Checkbox} from "antd";
import {CheckboxChangeEvent} from "antd/es/checkbox";
import SafeUtil from "../../../common/util/SafeUtil";
interface IProps {
@@ -33,7 +33,8 @@ interface IProps {
onGoToDirectory?: (id: string) => any;
}
interface IState {}
interface IState {
}
export default class MatterPanel extends TankComponent<IProps, IState> {
//正在重命名的临时字段
@@ -50,7 +51,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
}
prepareRename = () => {
const { matter, director } = this.props;
const {matter, director} = this.props;
if (director.isEditing()) {
console.error("导演正忙着，不予执行");
return;
@@ -86,7 +87,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
deleteMatter = () => {
Modal.confirm({
title: "此操作不可撤回, 是否继续?",
icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
icon: <ExclamationCircleFilled twoToneColor="#FFDC00"/>,
onOk: () => {
this.props.matter.httpDelete(() => {
MessageBoxUtil.success("操作成功");
@@ -106,7 +107,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
if (this.renamingLoading) {
return;
}
const { matter, director } = this.props;
const {matter, director} = this.props;
this.renamingLoading = true;
matter.httpRename(
@@ -130,7 +131,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
};
finishCreateDirectory = () => {
const { matter, director, onCreateDirectoryCallback } = this.props;
const {matter, director, onCreateDirectoryCallback} = this.props;
matter.name = this.renameMatterName;
matter.httpCreateDirectory(
() => {
@@ -148,7 +149,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
};
blurTrigger = () => {
const { matter, director } = this.props;
const {matter, director} = this.props;
if (matter.editMode) {
if (director.createMode) {
this.finishCreateDirectory();
@@ -180,12 +181,16 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
};
clickRow = () => {
const { matter, director, onGoToDirectory, onPreviewImage } = this.props;
const {matter, director, onGoToDirectory, onPreviewImage} = this.props;
if (director.isEditing()) {
console.error("导演正忙着，不予执行");
return;
}
if (matter.dir) {
onGoToDirectory!(matter.uuid!);
} else {
@@ -193,13 +198,15 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
if (matter.isImage()) {
onPreviewImage!(matter);
} else {
matter.preview();
}
}
};
render() {
const { matter } = this.props;
const {matter} = this.props;
return (
<div className="widget-matter-panel">
<div onClick={e => SafeUtil.stopPropagationWrap(e)(this.clickRow())}>
@@ -214,7 +221,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
/>
</span>
<span className="basic-span">
<img className="matter-icon" src={matter.getIcon()} />
<img className="matter-icon" src={matter.getIcon()}/>
</span>
</div>
</div>
@@ -297,7 +304,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
<span className="matter-name">
{matter.name}
{!matter.dir && !matter.privacy && (
<UnlockFilled className="icon" />
<UnlockFilled className="icon"/>
)}
</span>
)}
src/pages/widget/previewer/BrowserPreviewer.less
+38
View File
@@ -0,0 +1,38 @@
.browser-previewer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background: #333;
color: #eee;
display: flex;
flex-direction: column;
.title-bar {
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
border-bottom: 1px solid #555;
.close {
float: right;
margin-right: 20px;
}
}
.frame-area {
flex: 1;
iframe {
border: 0;
}
}
}
src/pages/widget/previewer/BrowserPreviewer.tsx
+87
View File
@@ -0,0 +1,87 @@
import "./BrowserPreviewer.less"
import React from "react";
import * as ReactDOM from 'react-dom';
import FileUtil from "../../../common/util/FileUtil";
import {CloseOutlined} from "@ant-design/icons";
import {Tooltip} from "antd";
interface IProps {
name: string
url: string
size: number
onClose: () => void
}
interface IState {
}
/**
* 浏览器预览器
* 浏览器支持的预览格式统统交由它处理
*/
export default class BrowserPreviewer extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {};
}
componentDidMount() {
}
//展示一系列图片
static show(name: string, url: string, size: number) {
let that = this;
const div: Element = document.createElement('div');
document.body.appendChild(div);
let element: React.ReactElement = React.createElement(
BrowserPreviewer,
{
name: name,
url: url,
size: size,
onClose: () => {
//删除所有节点。
const unmountResult = ReactDOM.unmountComponentAtNode(div);
if (unmountResult && div.parentNode) {
div.parentNode.removeChild(div);
}
}
}
)
//将react组件挂载到div中去。
ReactDOM.render(element, div);
}
render() {
return <div className="browser-previewer">
<div className="title-bar">
{this.props.name}({FileUtil.humanFileSize(this.props.size)})
<span className="close btn-action">
<CloseOutlined onClick={() => {
this.props.onClose()
}}/>
</span>
</div>
<div className="frame-area">
<iframe width="100%" height="100%" src={this.props.url}>
iframe may not supported.
</iframe>
</div>
</div>
}
}
src/pages/widget/previewer/ImagePreviewer.tsx
+6 -1
View File
@@ -5,9 +5,14 @@ import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
import "photoswipe/dist/photoswipe.css";
import "photoswipe/dist/default-skin/default-skin.css";
/**
* 图片预览器
* 支持预览一张图片或者多张图片
*/
export default class ImagePreviewer {
static pswpDom(): HTMLElement {
private static pswpDom(): HTMLElement {
let innerHTML = `
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->