fastlion-amis
Version:
一种MIS页面生成工具
494 lines (493 loc) • 29.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MoveUploadimg = exports.MoveUpload = void 0;
var tslib_1 = require("tslib");
var antd_1 = require("antd");
var react_1 = tslib_1.__importStar(require("react"));
var react_pdf_1 = require("react-pdf");
var viewerjs_1 = (0, tslib_1.__importDefault)(require("viewerjs"));
var utils_1 = require("../../renderers/Lion/utils/utils");
var shell_1 = require("../../utils/shell");
var tools_1 = require("../../utils/shell/tools");
var icons_1 = require("../icons");
var PopUp_1 = (0, tslib_1.__importDefault)(require("../PopUp"));
require("viewerjs/dist/viewer.css");
var hasShell = function (env, file, files, index) {
var _a, _b;
var baseUrl = ((_b = (_a = env === null || env === void 0 ? void 0 : env.axiosInstance) === null || _a === void 0 ? void 0 : _a.defaults) === null || _b === void 0 ? void 0 : _b.baseURL) || (env === null || env === void 0 ? void 0 : env.ajaxApi) || "";
if (tools_1.tools.isAndroid) {
if (files) {
shell_1.Shell.previewFile({ urls: files.map(function (val) { return val.preview; }) });
}
else {
var fileName = file.name;
if ((0, utils_1.isImg)(fileName)) {
shell_1.Shell.previewFile({ urls: [file.preview], current: index });
}
else
shell_1.Shell.previewPdf({ url: file.preview, name: fileName });
}
}
else {
if (files) {
var urls = files.map(function (attachment) {
var url = new URL(encodeURI(attachment.preview));
var search = url.search == '' ? "?fileName=" + attachment.preview_name : url.search + "&fileName=" + attachment.preview_name;
url.search = search;
return url.href;
});
shell_1.Shell.previewFile({ urls: urls, current: index });
}
else {
var url = new URL(encodeURI(file.preview));
var search = url.search == '' ? "?fileName=" + file.preview_name : url.search + "&fileName=" + file.preview_name;
url.search = search;
shell_1.Shell.previewFile({ urls: [url.href], current: index });
}
}
};
var MoveUpload = function (_a) {
var _b, _c;
var props = _a.props, maxTagCount = _a.maxTagCount, files = _a.files, minTagCount = _a.minTagCount, file = _a.file, errImg = _a.errImg, index = _a.index, onClick = _a.onClick, readonly = _a.readonly, isImage = _a.isImage, dropzone = _a.dropzone, onImgError = _a.onImgError;
var handleImgDom = function (index, url, dropzone) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var container, viewer;
return (0, tslib_1.__generator)(this, function (_a) {
container = dropzone.current;
viewer = new viewerjs_1.default(container, {
url: url,
navbar: true,
toolbar: false,
initialViewIndex: index,
inline: false,
zIndex: 9999,
button: true,
zoomable: true,
title: true,
tooltip: true,
minZoomRatio: 0.1,
maxZoomRatio: 100,
movable: true,
interval: 2000,
hide: function (env) {
viewer.destroy();
}
});
return [2 /*return*/, viewer];
});
}); };
var cx = props.classnames, env = props.env, tabSample = props.tabSample;
var handleImageError = function (e) {
// if (e.target) {
// e.target.style.display = 'none';
// }
onImgError(e);
};
var length = files.length - maxTagCount > 99 ? 99 : files.length - maxTagCount;
if (maxTagCount !== undefined && maxTagCount <= index && maxTagCount > 1) {
return react_1.default.createElement("div", { className: cx('ImageControl-img-wrapper ddd'), style: { display: 'none' } },
react_1.default.createElement("img", { src: (file.thumbnailAddr || file.preview) || errImg, alt: "", "data-original1": file.preview || errImg, onError: function (e) { return handleImageError(e); } }));
}
return (react_1.default.createElement(react_1.default.Fragment, null, (file === null || file === void 0 ? void 0 : file.err) ? null : (react_1.default.createElement("div", { className: cx('ImageControl-img-wrapper'), onClick: function (e) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var urls, viewer;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
if (!(readonly && !(length > 0 && minTagCount == maxTagCount && maxTagCount == index + 1))) return [3 /*break*/, 5];
e.stopPropagation();
e.preventDefault();
if (!(isImage || !files.some(function (item) { return !(0, utils_1.isImg)(item.name.toLowerCase()); }))) return [3 /*break*/, 5];
if (!shell_1.Shell.hasShell()) return [3 /*break*/, 1];
hasShell(env, file, files, index);
return [3 /*break*/, 4];
case 1:
if (!(dropzone !== undefined)) return [3 /*break*/, 4];
if (!env.previewImagesMb) return [3 /*break*/, 2];
urls = files.map(function (val) { return val.preview; });
env.previewImagesMb(urls, index);
return [3 /*break*/, 4];
case 2: return [4 /*yield*/, handleImgDom(index, 'data-original1', dropzone)];
case 3:
viewer = _a.sent();
viewer.show();
_a.label = 4;
case 4: return [2 /*return*/];
case 5:
onClick();
return [2 /*return*/];
}
});
}); } },
length > 0 && minTagCount == maxTagCount && maxTagCount == index + 1 && react_1.default.createElement("div", { className: cx('ImageControl-img-overlay') },
react_1.default.createElement("span", null,
"+",
length)),
Array.isArray(file.thumbnailAddr) ?
(react_1.default.createElement(icons_1.Icon, { icon: (_b = file.thumbnailAddr) === null || _b === void 0 ? void 0 : _b[0], color: (_c = file.thumbnailAddr) === null || _c === void 0 ? void 0 : _c[1], symbol: true })) : (react_1.default.createElement("img", { src: (file.thumbnailAddr || file.preview) || errImg, alt: "", "data-original1": file.preview || errImg, onError: function (e) { return handleImageError(e); } })),
!tabSample && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", null, file.name),
react_1.default.createElement(icons_1.Icon, { onClick: function (e) { e.stopPropagation(); (0, utils_1.downloadFile)(file.downloadSrc, file.name); }, icon: '#icon-tooltool_download', className: "icon", symbol: true })))))));
};
exports.MoveUpload = MoveUpload;
var MoveUploadimg = function (_a) {
var _b, _c, _d, _e;
var props = _a.props, files = _a.files, file = _a.file, errImg = _a.errImg, index = _a.index, readonly = _a.readonly, disabled = _a.disabled, isImage = _a.isImage, formatFileSize = _a.formatFileSize, removeFile = _a.removeFile, downloadFile = _a.downloadFile;
var cx = props.classnames, popOverContainer = props.popOverContainer, multiple = props.multiple, env = props.env;
var baseURL = ((_c = (_b = env === null || env === void 0 ? void 0 : env.axiosInstance) === null || _b === void 0 ? void 0 : _b.defaults) === null || _c === void 0 ? void 0 : _c.baseURL) || (env === null || env === void 0 ? void 0 : env.ajaxApi) || '';
var _f = (0, react_1.useState)(false), isOpened = _f[0], setIsOpened = _f[1];
// 第几个图片
var _g = (0, react_1.useState)(0), isOpenedIndex = _g[0], setIsOpenedIndex = _g[1];
// 确认删除
var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
// pdf有几页
var _j = (0, react_1.useState)(0), numPages = _j[0], setNumPages = _j[1];
// 查看pdf
var _k = (0, react_1.useState)(false), showPdf = _k[0], setShowPdf = _k[1];
// pdfdom
var pdfContainerRef = (0, react_1.useRef)(null);
// pdf的宽度
var _l = (0, react_1.useState)(0), pdfWidth = _l[0], setPdfWidth = _l[1];
// 加载几页
var _m = (0, react_1.useState)(5), loadedPages = _m[0], setLoadedPages = _m[1]; // 初始加载5页
// 是否可加载
var _o = (0, react_1.useState)(false), loadedDisabled = _o[0], setLoadedDisabled = _o[1];
var featLength = files.filter(function (item) { return (0, utils_1.isImg)(item.name); });
(0, react_1.useEffect)(function () {
if (!pdfContainerRef.current)
return;
var pdfBody = pdfContainerRef.current;
var pdfContainerWidth = pdfBody.clientWidth;
setPdfWidth(pdfContainerWidth - 50);
}, [pdfContainerRef.current]);
var getOrigin = function (first, second) {
return {
x: (first.x + second.x) / 2,
y: (first.y + second.y) / 2
};
};
var getCanvasOffset = function (first, second, initial) {
return {
x: (first.x - second.x + initial.x),
y: (first.y - second.y + initial.y)
};
};
var getDistance = function (start, stop) {
return Math.sqrt(Math.pow((stop.x - start.x), 2) + Math.pow((stop.y - start.y), 2));
};
(0, react_1.useEffect)(function () {
var _a;
if (!pdfContainerRef.current)
return;
var pdfContent = pdfContainerRef.current;
var pdfbody = (_a = pdfContent === null || pdfContent === void 0 ? void 0 : pdfContent.childNodes) === null || _a === void 0 ? void 0 : _a[0];
if (!pdfbody)
return;
// const mc = new Hammer(pdfContent);
var clientWidth = pdfbody.clientWidth;
var clientHeight = pdfbody.clientHeight;
var initialScale = 1;
var distance = {};
// 单只拖动
var initialCanvasOffset = { x: 0, y: 0 };
var lastTapTime = 0;
var Offset = { x: 0, y: 0 };
// 现在的位置
var canvasOff = { x: 0, y: 0 };
var origin = { x: 0, y: 0 };
pdfbody.addEventListener('touchstart', function (e) {
e.stopPropagation();
if (e.touches.length === 1) {
var currentTime = new Date().getTime();
var tapDelay = currentTime - lastTapTime;
lastTapTime = currentTime;
if (tapDelay < 300) {
if (initialScale > 1.5) {
pdfbody.style.position = 'relative';
pdfbody.style.top = canvasOff.y + 'px';
pdfbody.style.left = canvasOff.x + 'px';
pdfbody.style.transform = "scale(" + 1 + ")";
initialScale = 1;
}
else {
pdfbody.style.position = 'relative';
pdfbody.style.top = canvasOff.y + 'px';
pdfbody.style.left = canvasOff.x + 'px';
pdfbody.style.transform = "scale(" + 2 + ")";
initialScale = 2;
}
return;
}
initialCanvasOffset = {
x: e.touches[0].clientX,
y: e.touches[0].clientY
};
}
else if (e.touches.length > 1) {
distance.start = getDistance({
x: e.touches[0].screenX,
y: e.touches[0].screenY
}, {
x: e.touches[1].screenX,
y: e.touches[1].screenY
});
initialCanvasOffset = getOrigin({
x: e.touches[0].screenX,
y: e.touches[0].screenY
}, {
x: e.touches[1].screenX,
y: e.touches[1].screenY
});
}
});
pdfbody.addEventListener('touchmove', function (e) {
e.stopPropagation();
if (e.touches.length === 2) {
origin = getOrigin({
x: e.touches[0].pageX,
y: e.touches[0].pageY
}, {
x: e.touches[1].pageX,
y: e.touches[1].pageY
});
distance.stop = getDistance({
x: e.touches[0].screenX,
y: e.touches[0].screenY
}, {
x: e.touches[1].screenX,
y: e.touches[1].screenY
});
canvasOff = getCanvasOffset(origin, initialCanvasOffset, Offset);
initialScale = distance.stop / distance.start;
if (canvasOff.x < (-clientWidth - 100)) {
canvasOff.x = -clientWidth - 100;
}
else if (canvasOff.x > (clientWidth - 100)) {
canvasOff.x = clientWidth - 100;
}
if (canvasOff.y < (-clientHeight - 100)) {
canvasOff.y = (-clientHeight - 100);
}
else if (canvasOff.y > (clientHeight - 100)) {
canvasOff.y = clientHeight - 100;
}
pdfbody.style.position = 'relative';
pdfbody.style.top = canvasOff.y + 'px';
pdfbody.style.left = canvasOff.x + 'px';
pdfbody.style.transform = "scale(" + initialScale + ")";
}
else if (e.touches.length === 1) {
canvasOff = getCanvasOffset({
x: e.touches[0].clientX,
y: e.touches[0].clientY
}, initialCanvasOffset, Offset);
pdfbody.style.position = 'relative';
if (canvasOff.x < 0 && canvasOff.x <= (-clientWidth + 100)) {
canvasOff.x = (-clientWidth + 100);
}
else if (canvasOff.x > 0 && canvasOff.x >= (clientWidth - 100)) {
canvasOff.x = clientWidth - 100;
}
// if (canvasOff.y > 0) {
// canvasOff.y = 0
// } else if (canvasOff.y < 0 && canvasOff.y <= (clientHeight + 100)) {
// canvasOff.y = clientHeight - 100
// }
pdfbody.style.top = canvasOff.y + 'px';
pdfbody.style.left = canvasOff.x + 'px';
pdfbody.style.transform = "scale(" + initialScale + ")";
}
});
pdfbody.addEventListener('touchend', function (e) {
e.stopPropagation();
Offset = canvasOff;
});
return function () {
pdfbody.removeEventListener('touchstart', function () { });
pdfbody.removeEventListener('touchmove', function () { });
pdfbody.removeEventListener('touchend', function () { });
};
}, [pdfContainerRef.current]);
var handleShowPdf = function () {
setShowPdf(true);
};
var onDocumentLoadSuccess = function (_a) {
var numPages = _a.numPages;
setNumPages(numPages);
if (numPages < 5) {
setLoadedPages(numPages);
setLoadedDisabled(true);
}
};
(0, react_1.useEffect)(function () {
// 在组件挂载时加载首次5页
loadMorePages();
}, []); // 空数组表示只在组件挂载时运行
var loadMorePages = function () {
if (loadedPages < numPages) {
// 如果还有更多页面要加载，加载5页或剩余不足5页的页面
var newLoadedPages = Math.min(loadedPages + 5, numPages);
setLoadedPages(newLoadedPages);
if (newLoadedPages == numPages) {
setLoadedDisabled(true);
}
}
};
var handleClosePdf = function () {
setShowPdf(false);
};
var handleImgDom = function (index) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var container, viewer;
return (0, tslib_1.__generator)(this, function (_a) {
container = document.getElementById('containerss');
viewer = new viewerjs_1.default(container, {
url: "data-original",
navbar: true,
toolbar: false,
initialViewIndex: index,
inline: false,
zIndex: 9999,
button: true,
zoomable: true,
title: true,
tooltip: true,
minZoomRatio: 0.1,
maxZoomRatio: 100,
movable: true,
interval: 2000,
hide: function (env) {
viewer.destroy();
},
view: function (env) {
setIsOpenedIndex(isOpenedIndex);
}
});
return [2 /*return*/, viewer];
});
}); };
var onClickShell = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var urls, idx, viewer;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
if (!readonly) return [3 /*break*/, 4];
if (!shell_1.Shell.hasShell()) return [3 /*break*/, 1];
if (isImage || !files.some(function (item) { return !(0, utils_1.isImg)(item.name.toLowerCase()); })) {
hasShell(env, file, files, index);
}
else {
hasShell(env, file);
}
return [2 /*return*/];
case 1:
if (!(0, utils_1.isImg)(file.name)) {
if (env.previewPdfMb) {
env.previewPdfMb(file.name, file.preview);
}
else
handleShowPdf();
return [2 /*return*/];
}
else if ((0, utils_1.isImg)(file.name) && env.previewImagesMb) {
urls = [file.preview];
idx = 0;
if (!files.some(function (item) { return !(0, utils_1.isImg)(item.name.toLowerCase()); })) {
urls = files.map(function (val) { return val.preview; });
idx = index;
}
env.previewImagesMb(urls, idx);
return [2 /*return*/];
}
return [4 /*yield*/, handleImgDom(featLength === null || featLength === void 0 ? void 0 : featLength.findIndex(function (item) { return item.preview == file.preview; }))];
case 2:
viewer = _a.sent();
viewer.show(true);
_a.label = 3;
case 3: return [2 /*return*/];
case 4:
setIsOpened(true);
setIsOpenedIndex(featLength === null || featLength === void 0 ? void 0 : featLength.findIndex(function (item) { return item.preview == file.preview; }));
return [2 /*return*/];
}
});
}); };
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("li", { className: cx('ImageControl-upload-li', !(0, utils_1.isImg)(file.name) && 'ImageControl-upload-li-pdf'), key: index, onClick: onClickShell },
Array.isArray(file.thumbnailAddr) ? (react_1.default.createElement(icons_1.Icon, { icon: file.thumbnailAddr[0], color: file.thumbnailAddr[1], symbol: true })) : (react_1.default.createElement("img", { src: (file.thumbnailAddr || file.preview) || errImg, alt: "" })),
(0, utils_1.isImg)(file.name) && react_1.default.createElement("div", { style: { display: 'none' } },
react_1.default.createElement("img", { src: (file.thumbnailAddr || file.preview) || errImg, alt: "", "data-original": file.preview || errImg })),
!(0, utils_1.isImg)(file.name) && react_1.default.createElement("span", { className: 'upload-li-pdf-name' }, file.name)),
react_1.default.createElement(antd_1.Drawer, { visible: showPdf, placement: "right", height: "100%", className: "process_drawer", closable: false, width: '100%', destroyOnClose: true, zIndex: 3000, getContainer: env.getModalContainer, footer: react_1.default.createElement("div", { style: { textAlign: 'right' } },
react_1.default.createElement(antd_1.Button, { type: "primary", style: { borderRadius: 5, margin: '0 4px' }, onClick: handleClosePdf }, "\u5173\u95ED\u9884\u89C8"),
react_1.default.createElement(antd_1.Button, { type: "primary", style: { borderRadius: 5 }, onClick: loadMorePages, disabled: loadedDisabled },
"\u52A0\u8F7D\u66F4\u591A", "(" + (loadedPages + "/" + numPages) + ")")), bodyStyle: { padding: 0 } },
react_1.default.createElement("div", { className: "flow-drawer-header ImageControl-flow-drawer-header" },
react_1.default.createElement("div", { className: 'left-text', onClick: handleClosePdf },
react_1.default.createElement(icons_1.Icon, { icon: "title-left", style: { width: '16px', height: '16px' } })),
react_1.default.createElement("div", { className: "flow-drawer-header-title" },
react_1.default.createElement("div", { className: "flow-drawer-title" }, file.name)),
react_1.default.createElement("div", { className: "flow-drawer-extra", style: { width: 36 } },
react_1.default.createElement("span", { className: "right-text" }))),
react_1.default.createElement("div", { ref: pdfContainerRef, className: 'ImageControl-body' },
react_1.default.createElement(react_pdf_1.Document, { className: 'ImageControl-Document', file: file.preview, onLoadSuccess: onDocumentLoadSuccess, error: function () { setLoadedDisabled(true); setLoadedPages(0); return react_1.default.createElement(react_1.default.Fragment, null, " \u52A0\u8F7D\u9884\u89C8\u6587\u4EF6\u5931\u8D25"); }, loading: '\u52A0\u8F7D\u4E2D\uFF0C\u8BF7\u7A0D\u5019...' }, Array.from({ length: loadedPages }).map(function (_, index) { return (react_1.default.createElement(react_pdf_1.Page, { className: 'mb24', key: index, pageNumber: index + 1, scale: 1, width: pdfWidth, onRenderError: function () {
setLoadedDisabled(true);
setLoadedPages(0);
} })); })))),
react_1.default.createElement(PopUp_1.default, { isShow: isOpened, container: (_d = popOverContainer !== null && popOverContainer !== void 0 ? popOverContainer : env === null || env === void 0 ? void 0 : env.getModalContainer) !== null && _d !== void 0 ? _d : document.getElementById('amis-modal-container'), className: 'popOverClassName ImgButton', onHide: function () { return setIsOpened(false); }, header: react_1.default.createElement("div", { className: cx('TransferDropDown-header') },
react_1.default.createElement("div", { className: cx('PopUp-content-title') },
react_1.default.createElement("span", { className: cx('PopUp-content-name') }, file.name),
react_1.default.createElement("span", { className: cx('PopUp-content-size') }, "(" + formatFileSize(file.size) + ")"))), footer: react_1.default.createElement("div", { className: cx('PopUp-content-Button') },
react_1.default.createElement(antd_1.Button, { type: "text", onClick: function () { setIsOpened(false); } }, "\u53D6\u6D88")), multiple: multiple, showClose: true, popOverHeatClassName: 'PopUp-popOverHeat' },
react_1.default.createElement("div", { className: cx('PopUp-content-BT') },
!readonly && !disabled && react_1.default.createElement("div", { className: cx('PopUp-content-Button') },
react_1.default.createElement(antd_1.Button, { type: "text", onClick: function () { setOpen(true); }, danger: true }, "\u5220\u9664")),
react_1.default.createElement("div", { className: cx('PopUp-content-Button') },
react_1.default.createElement(antd_1.Button, { type: "text", onClick: function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var urls, viewer;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
if (shell_1.Shell.hasShell()) {
if ((isImage || !files.some(function (item) { return !(0, utils_1.isImg)(item.name.toLowerCase()); }))) {
hasShell(env, file, files, index);
}
else {
hasShell(env, file);
}
setIsOpened(false);
return [2 /*return*/];
}
if (!(0, utils_1.isImg)(file.name)) {
if (env.previewPdfMb) {
env.previewPdfMb(file.name, file.preview);
}
else
handleShowPdf();
return [2 /*return*/];
}
else if ((0, utils_1.isImg)(file.name) && env.previewImagesMb) {
urls = [file.preview];
env.previewImagesMb(urls);
setIsOpened(false);
return [2 /*return*/];
}
return [4 /*yield*/, handleImgDom(isOpenedIndex)];
case 1:
viewer = _a.sent();
setIsOpened(false);
viewer.show(true);
return [2 /*return*/];
}
});
}); } }, "\u9884\u89C8")),
!readonly && !disabled && react_1.default.createElement("div", { className: cx('PopUp-content-Button') },
react_1.default.createElement(antd_1.Button, { type: "text", onClick: function () { downloadFile(file.downloadSrc, file.name); } }, "\u4E0B\u8F7D")))),
react_1.default.createElement(PopUp_1.default, { isShow: open, className: 'popOverClassName ImgButtonremove', onHide: function () { return setOpen(false); }, footer: react_1.default.createElement("div", { className: cx('PopUp-content-Button') },
react_1.default.createElement(antd_1.Button, { type: "text", onClick: function () { setOpen(false); } }, "\u53D6\u6D88")), multiple: true, container: (_e = popOverContainer !== null && popOverContainer !== void 0 ? popOverContainer : env === null || env === void 0 ? void 0 : env.getModalContainer) !== null && _e !== void 0 ? _e : document.getElementById('amis-modal-container'), popOverHeatClassName: 'PopUp-popOverHeat' },
react_1.default.createElement("div", { className: cx('PopUp-content-BT') }, react_1.default.createElement("div", { className: cx('PopUp-content-Button') },
react_1.default.createElement(antd_1.Button, { type: "text", onClick: function () {
removeFile();
setOpen(false);
setIsOpened(false);
}, danger: true }, "\u786E\u8BA4\u5220\u9664"))))));
};
exports.MoveUploadimg = MoveUploadimg;
//# sourceMappingURL=./components/Lion/MoveUpload.js.map