fastlion-amis
Version:
一种MIS页面生成工具
181 lines (180 loc) • 11.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LionShowImgRenderer = exports.LionShowImg = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Item_1 = require("../../../../Form/Item");
var Image_1 = (0, tslib_1.__importDefault)(require("antd/lib/Image"));
require("./LionShowImg.scss");
function getBase64(file) {
return new Promise(function (resolve, reject) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () { return resolve(reader.result); };
reader.onerror = function (error) { return reject(error); };
});
}
var LionShowImg = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LionShowImg, _super);
function LionShowImg() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
previewVisible: false,
previewImage: '',
previewTitle: '',
errorImage: {
url: 'data:image/png;base64,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',
uid: 'error',
status: 'error',
name: 'error.png'
},
showfileList: [],
type: '',
imgHeight: '100%'
};
_this.handleCancel = function () { return _this.setState({ previewVisible: false }); };
_this.handlePreview = function (file) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var _a;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
if ((file === null || file === void 0 ? void 0 : file.status) === 'error') {
return [2 /*return*/];
}
if (!(!file.url && !file.preview)) return [3 /*break*/, 2];
_a = file;
return [4 /*yield*/, getBase64(file.originFileObj)];
case 1:
_a.preview = _b.sent();
_b.label = 2;
case 2:
this.setState({
previewImage: file.url || file.preview,
previewVisible: true,
previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
});
return [2 /*return*/];
}
});
}); };
return _this;
}
LionShowImg.prototype.componentDidMount = function () {
var _a, _b;
// this.props.onChange('');
var content;
var _c = this.props, data = _c.data, name = _c.name, env = _c.env, store = _c.store;
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) || '';
content = data[name] || (store === null || store === void 0 ? void 0 : store.data[name]);
var thumbRatio = this.props.thumbRatio;
switch (thumbRatio) {
case '4:3':
this.setState({
imgHeight: '75%'
});
break;
case '16:9':
this.setState({
imgHeight: '56.25%'
});
break;
case '1:1':
default:
this.setState({
imgHeight: '100%'
});
break;
}
// this.props.onBulkChange({ ['temp_' + name as string]: '' });
if (content) {
var info = content.info, value = content.value;
if (info && (value === null || value === void 0 ? void 0 : value.length) && info.length !== 0) {
var md5Map_1 = value.split(',');
var initialList_1 = [];
info.map(function (ele, idx) {
initialList_1.push({
uid: md5Map_1[idx],
status: 'done',
name: ele.name,
url: baseUrl + ele.addr,
thumbUrl: baseUrl + ele.thumbnailAddr // 缩略图地址
});
});
this.setState({
showfileList: (0, tslib_1.__spreadArray)([], initialList_1, true)
});
// this.props.onBulkChange({ ['temp_' + name as string]: value });
}
}
};
LionShowImg.prototype.componentDidUpdate = function (prevProps, prevState) {
var _a, _b;
var _c = this.props, data = _c.data, name = _c.name, env = _c.env;
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) || '';
var content = data[name];
if (content && (content !== prevProps.data[name])) {
// if (content) {
var info = content.info, value = content.value;
if (info && (value === null || value === void 0 ? void 0 : value.length) && info.length !== 0) {
var md5Map_2 = value.split(',');
var initialList_2 = [];
info.map(function (ele, idx) {
initialList_2.push({
uid: md5Map_2[idx],
status: 'done',
name: ele.name,
url: baseUrl + ele.addr,
thumbUrl: baseUrl + ele.thumbnailAddr // 缩略图地址
});
});
this.setState({
showfileList: (0, tslib_1.__spreadArray)([], initialList_2, true)
});
// this.props.onBulkChange({ ['temp_' + name as string]: value });
// }
}
else {
this.setState({
showfileList: []
});
}
}
};
LionShowImg.prototype.render = function () {
var _a = this.state, errorImage = _a.errorImage, previewVisible = _a.previewVisible, previewImage = _a.previewImage, previewTitle = _a.previewTitle, showfileList = _a.showfileList;
var uploadProps = {
disabled: false,
listType: "picture-card",
showUploadList: {
showPreviewIcon: true,
showRemoveIcon: false,
showDownloadIcon: false
},
fileList: showfileList && (showfileList === null || showfileList === void 0 ? void 0 : showfileList.length) >= 1 ? showfileList : [errorImage],
onPreview: this.handlePreview,
beforeUpload: function () {
return false;
}
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: 'lion-show-img' }, showfileList.length
? showfileList.map(function (item, index) { return (react_1.default.createElement(Image_1.default, { fallback: errorImage.url, key: index, src: item.thumbUrl, alt: item.name, title: item.name, preview: { src: item.url } })); })
: react_1.default.createElement(Image_1.default, { src: "error", fallback: errorImage.url }))));
};
return LionShowImg;
}(react_1.default.Component));
exports.LionShowImg = LionShowImg;
var LionShowImgRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LionShowImgRenderer, _super);
function LionShowImgRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
LionShowImgRenderer = (0, tslib_1.__decorate)([
(0, Item_1.FormItem)({
type: 'lion-show-img'
})
], LionShowImgRenderer);
return LionShowImgRenderer;
}(LionShowImg));
exports.LionShowImgRenderer = LionShowImgRenderer;
//# sourceMappingURL=./renderers/Lion/File/components/LionShowImg/LionShowImg.js.map