fastlion-amis
Version:
一种MIS页面生成工具
221 lines (220 loc) • 12.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getMediaUrl = void 0;
var tslib_1 = require("tslib");
var antd_1 = require("antd");
var react_1 = tslib_1.__importStar(require("react"));
var factory_1 = require("../factory");
var shell_1 = require("../utils/shell");
var drawer_1 = tslib_1.__importDefault(require("antd/lib/drawer"));
var button_1 = tslib_1.__importDefault(require("antd/lib/button"));
var Upload_1 = tslib_1.__importDefault(require("./Lion/components/Upload"));
var CloseCircleOutlined_1 = tslib_1.__importDefault(require("@ant-design/icons/lib/icons/CloseCircleOutlined"));
;
var getMediaUrl = function (originUrl, thumbnail) {
if (thumbnail === void 0) { thumbnail = false; }
// media的url存在多种类型
// blob,localfile,base64可以直接显示,并且没有缩略图
// 后台资源地址需要拼接CONF.baseUrl,并且支持缩略图
if (/^data:/.test(originUrl) || // base64
/^blob:/.test(originUrl) || // blob
/^localfile:/.test(originUrl) // 终端localfile
)
return originUrl;
return createImageUrl(originUrl, thumbnail);
};
exports.getMediaUrl = getMediaUrl;
var createImageUrl = function (imgUrl, thumbnail, isoffline) {
if (thumbnail === void 0) { thumbnail = false; }
if (isoffline === void 0) { isoffline = true; }
if (isoffline && shell_1.Shell.hasShell() && imgUrl) {
//离线终端的临时目录 已经有了就localfile 就不需要拼接 否则要把线上的http换成localfile
var url = '';
if (imgUrl.indexOf("localfile:///") > -1) {
return imgUrl;
}
else {
url = "localfile:///";
return "".concat(url).concat(imgUrl);
}
}
if (/^data:image/.test(imgUrl)) {
return imgUrl;
}
return imgUrl;
};
var OfflineImage = function (props) {
var offlineData = props.offlineData, cx = props.classnames, multiple = props.multiple, _a = props.maxLength, maxLength = _a === void 0 ? 0 : _a, formItem = props.formItem, label = props.label, readonly = props.readonly, offline = props.offline, offlineChange = props.offlineChange, offlineDelete = props.offlineDelete, limit = props.limit, _b = props.maxSize, maxSize = _b === void 0 ? 1024 : _b;
var _c = (0, react_1.useState)(offlineData), imageValue = _c[0], setImageValue = _c[1];
var _d = (0, react_1.useState)(false), previewOpen = _d[0], setPreviewOpen = _d[1];
var _e = (0, react_1.useState)(''), previewImage = _e[0], setPreviewImage = _e[1];
var _f = (0, react_1.useState)(''), previewTitle = _f[0], setPreviewTitle = _f[1];
(0, react_1.useEffect)(function () {
setImageValue(offlineData);
}, [offlineData]);
var _g = (0, react_1.useState)(false), visible = _g[0], setVisible = _g[1];
var ImageItem = function (index, value) {
if (value) {
var url_1 = (0, exports.getMediaUrl)(value.name);
return react_1.default.createElement("div", { className: cx('Offline-image-item') },
react_1.default.createElement("div", { className: 'img-left', style: { width: 28, height: 28, overflow: 'hidden' } },
react_1.default.createElement("img", { style: { width: '100%' }, onClick: function (e) {
e.stopPropagation();
handlePreview(url_1, value.name || value.fileName || '');
}, src: url_1 })),
formItem && react_1.default.createElement("div", { className: 'img-right' },
react_1.default.createElement("div", { className: 'img-name' }, value.name || value.fileName),
value.size ? react_1.default.createElement("div", { className: 'img-size' }, Upload_1.default.formatFileSize(value.size)) : null),
formItem && !readonly ? react_1.default.createElement("div", { className: 'img-del' },
react_1.default.createElement(CloseCircleOutlined_1.default, { onClick: function () { return handleDelete(index); } })) : null);
}
return null;
};
//壳选择图片
var chooseImage = function () {
var hasShell = shell_1.Shell.hasShell();
if (hasShell && offline.primaryValue) {
setVisible(true);
}
else {
antd_1.message.error("请先扫码再选择图片！");
}
};
//0相册 1 拍照
var getImages = function (type) {
var _a;
var currentNum = 0;
if (imageValue) {
if ("info" in imageValue) {
currentNum = ((_a = imageValue.info) === null || _a === void 0 ? void 0 : _a.length) || 0;
}
}
var count = maxLength - currentNum;
// maxLength大于0证明有配置,此时才需要验证
if (count <= 0 && maxLength) {
antd_1.message.warning({ content: "\u4E0A\u4F20\u4E2A\u6570\u5DF2\u8FBE\u4E0A\u9650".concat(maxLength, "\u4E2A") });
return;
}
var config = {
maxHeight: (limit === null || limit === void 0 ? void 0 : limit.maxHeight) || 0, maxWidth: (limit === null || limit === void 0 ? void 0 : limit.maxWidth) || 0, maxSize: 1024,
multi: multiple,
type: type,
rect: null,
count: count,
offline: offline
};
var list = [];
var fail = function (res) {
antd_1.message.error(res.msg);
};
var info = function (res) {
if ((res === null || res === void 0 ? void 0 : res.code) === -200) {
antd_1.message.warning((res === null || res === void 0 ? void 0 : res.msg) || '拍照失败');
}
else {
list.push(res.data.dataurl);
}
};
var success = function (res) {
list.push(res.data.dataurl);
onUpload(list);
};
shell_1.Shell.getAttachment(config, info, success, fail);
};
//处理回调文件
var onUpload = function (md5s) {
var valueList = [];
var info = md5s.map(function (item) {
var name = item.replace('localfile:///', '');
valueList.push(name);
return {
addr: item,
name: name,
fileName: name,
path: item
};
});
if (imageValue.value) {
var newValue = tslib_1.__spreadArray([imageValue.value], valueList, true).join(',');
var newInfo = tslib_1.__spreadArray(tslib_1.__spreadArray([], imageValue.info, true), info, true);
setImageValue({
value: newValue,
info: newInfo
});
}
else {
setImageValue({
value: valueList.join(','),
info: info
});
}
offlineChange(md5s, offline.fieldName);
setVisible(false);
};
//离线删除本地图片
var handleDelete = function (fileIndex) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var tableName, primaryKey, primaryValue, fieldName, valueList, info;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
tableName = offline.tableName, primaryKey = offline.primaryKey, primaryValue = offline.primaryValue, fieldName = offline.fieldName;
return [4 /*yield*/, shell_1.Shell.deleteFile(tableName, primaryKey, primaryValue, fieldName, 'localfile:///' + imageValue.info[fileIndex].name)];
case 1:
_a.sent();
valueList = imageValue.value.split(',');
info = tslib_1.__spreadArray([], imageValue.info, true);
valueList.splice(fileIndex, 1);
info.splice(fileIndex, 1);
setImageValue({
value: valueList.join(','),
info: info
});
offlineDelete(fieldName, fileIndex);
return [2 /*return*/];
}
});
}); };
var renderBody = function () {
var _a, _b, _c;
var images = multiple ?
(imageValue === null || imageValue === void 0 ? void 0 : imageValue.value) ?
imageValue.value.split(',').map(function (imageName, index) { var _a; return ImageItem(index, (_a = imageValue === null || imageValue === void 0 ? void 0 : imageValue.info) === null || _a === void 0 ? void 0 : _a[index]); }) : null
: ImageItem(0, (_a = imageValue === null || imageValue === void 0 ? void 0 : imageValue.info) === null || _a === void 0 ? void 0 : _a[0]);
return formItem ? react_1.default.createElement("div", { className: cx('Offline-form-item') },
react_1.default.createElement("label", null,
label,
readonly || (((_b = imageValue === null || imageValue === void 0 ? void 0 : imageValue.info) === null || _b === void 0 ? void 0 : _b.length) === maxLength && maxLength) || (!multiple && ((_c = imageValue === null || imageValue === void 0 ? void 0 : imageValue.info) === null || _c === void 0 ? void 0 : _c.length) === 1) ? null : react_1.default.createElement("span", { className: "fa fa-plus-circle", onClick: chooseImage })),
react_1.default.createElement("div", { className: 'offline-form-item-wrapper' }, images)) : react_1.default.createElement("div", { className: 'offline-image-wrapper' }, images);
};
var handleCancel = function () { return setPreviewOpen(false); };
var handlePreview = function (url, fileName) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
setPreviewImage(url);
setPreviewTitle(fileName);
setPreviewOpen(true);
return [2 /*return*/];
});
}); };
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: cx('Offline-image') }, renderBody()),
react_1.default.createElement(drawer_1.default, { title: null, placement: 'bottom', closable: false, visible: visible, onClose: function () { return setVisible(false); }, maskClosable: true, getContainer: props.env.getModalContainer,
// zIndex={1000}
height: 110, className: 'offline-picture-drawer' },
react_1.default.createElement("div", { className: 'offline-picture-item' },
react_1.default.createElement(button_1.default, { onClick: function () { return getImages(0); }, block: true, type: 'primary', size: 'large' }, "\u76F8\u518C")),
react_1.default.createElement("div", { className: 'offline-picture-item' },
react_1.default.createElement(button_1.default, { onClick: function () { return getImages(1); }, block: true, size: 'large' }, "\u62CD\u6444"))),
react_1.default.createElement(drawer_1.default, { width: '100vw', getContainer: props.env.getModalContainer, visible: previewOpen, title: react_1.default.createElement("span", { style: {
paddingRight: '22px', width: '100%', display: 'inline-block', whiteSpace: 'nowrap',
textOverflow: 'ellipsis', overflow: 'hidden'
} }, previewTitle), footer: null, onClose: function (e) {
e.stopPropagation();
handleCancel();
} },
react_1.default.createElement("img", { alt: "example", style: { width: '100%' }, src: previewImage }))));
};
// 将组件注册到 amis 渲染器中
exports.default = (0, factory_1.Renderer)({
type: 'offline-image'
})(OfflineImage);
//# sourceMappingURL=./renderers/OfflineImage.js.map