fastlion-amis
Version:
一种MIS页面生成工具
717 lines (716 loc) • 47.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LionInputImgRenderer = exports.LionInputImg = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Item_1 = require("../../../../Form/Item");
var Upload_1 = (0, tslib_1.__importDefault)(require("antd/lib/Upload"));
var Modal_1 = (0, tslib_1.__importDefault)(require("antd/lib/Modal"));
require("./LionFormImg.css");
var styled_components_1 = (0, tslib_1.__importDefault)(require("styled-components"));
var msgsub_1 = (0, tslib_1.__importDefault)(require("../../../utils/msgsub"));
var spark_md5_1 = (0, tslib_1.__importDefault)(require("spark-md5"));
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 Warpper = styled_components_1.default.div.attrs({
marginTop: 'calc((1.875rem - 1.4285714286 *0.875rem)/2)'
})(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n .ant-upload-picture-card-wrapper{\n .ant-upload-list-picture-card{\n .ant-upload-select-picture-card{\n width:", ";\n height:", ";\n border-radius:4px;\n position:relative;\n display:inline-block;\n font-size:22px;\n }\n .ant-upload-list-picture-card-container{\n position:relative;\n display:inline-block;\n width:", ";\n height:", ";\n .ant-upload-list-item{\n border-radius:4px;\n border:0px;\n width:100%;\n height:", ";\n padding:", ";\n display: flex;\n align-items: center;\n justify-content: center;\n border:1px solid #d9d9d9;\n\n .ant-upload-list-item-info{\n position:relative;\n overflow:hidden;\n width:100%;\n height:100%;\n .ant-upload-span{\n width:100%;\n height:100%;\n img {\n position: ", ";\n width: ", ";\n object-fit:", ";\n height: ", ";\n transform: ", ";\n max-height:100%;\n top: ", ";\n left: ", ";\n }\n }\n }\n }\n }\n }\n }\n"], ["\n .ant-upload-picture-card-wrapper{\n .ant-upload-list-picture-card{\n .ant-upload-select-picture-card{\n width:", ";\n height:", ";\n border-radius:4px;\n position:relative;\n display:inline-block;\n font-size:22px;\n }\n .ant-upload-list-picture-card-container{\n position:relative;\n display:inline-block;\n width:", ";\n height:", ";\n .ant-upload-list-item{\n border-radius:4px;\n border:0px;\n width:100%;\n height:", ";\n padding:", ";\n display: flex;\n align-items: center;\n justify-content: center;\n border:1px solid #d9d9d9;\n\n .ant-upload-list-item-info{\n position:relative;\n overflow:hidden;\n width:100%;\n height:100%;\n .ant-upload-span{\n width:100%;\n height:100%;\n img {\n position: ", ";\n width: ", ";\n object-fit:", ";\n height: ", ";\n transform: ", ";\n max-height:100%;\n top: ", ";\n left: ", ";\n }\n }\n }\n }\n }\n }\n }\n"])), function (props) { return props.width ? props.width : '60px'; }, function (props) { return props.height ? props.height : '60px'; }, function (props) { return props.width ? props.width : '68px'; }, function (props) { return props.height ? props.height : '68px'; }, function (props) { return props.thumbMode === 'cover' ? '100%' : props.imgHeight; }, function (props) { return props.padding ? props.padding : '0px'; }, function (props) { return props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? 'absolute' : 'static'; }, function (props) { return props.thumbMode === 'w-full' ? '100%' : (props.thumbMode === 'h-full' ? 'auto' : '100% !important'); }, function (props) { return props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? 'unset' : props.thumbMode; }, function (props) { return props.thumbMode === 'w-full' ? 'auto' : (props.thumbMode === 'h-full' ? '' : '100% !important'); }, function (props) { return props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? 'translate(-50%,-50%)' : 'translate(0,0)'; }, function (props) { return props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? '50%' : '0'; }, function (props) { return props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? '50%' : '0'; });
var LionInputImg = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LionInputImg, _super);
function LionInputImg() {
var _this_1 = _super !== null && _super.apply(this, arguments) || this;
_this_1.state = {
imgHeight: '100%',
previewVisible: false,
previewImage: '',
previewTitle: '',
errorImage: {
url: 'data:image/png;base64,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',
uid: 'error',
status: 'error.png',
name: 'error,'
},
fileList: [],
showfileList: [],
turtyfilelist: [],
loading: false,
type: '',
params: '',
init: false,
formItemName: '',
preUploading: false,
chunksSize: 0,
currentChunks: 0,
uploadPercent: -1,
preUploadPercent: -1,
uploadRequest: false,
uploaded: false,
uploadParams: {},
arrayBufferData: [],
upload_cmd: 'check_exist',
upload_name: '',
upload_field: '',
file_type: '',
fileSize: 0
};
_this_1.handleCancel = function () { return _this_1.setState({ previewVisible: false }); };
_this_1.handlePreview = function (file) { return (0, tslib_1.__awaiter)(_this_1, 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.preview || file.url,
previewVisible: true,
previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
});
return [2 /*return*/];
}
});
}); };
_this_1.handleChange = function (file) {
var _a, _b;
var limitType = _this_1.props.limitType;
if (!limitType && ((_b = (_a = file.file) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.startsWith('image/'))) {
_this_1.setState({ type: 'image', fileList: file.fileList });
}
else if (limitType && limitType.split(',').some(function (_) {
var _a, _b;
return (_b = (_a = file.file) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.endsWith(_);
})) {
_this_1.setState({ type: limitType, fileList: file.fileList });
}
};
_this_1.handleFile = function (config) {
var limitSize = _this_1.props.limitSize;
return new Promise(function (resolve, reject) {
var _a, _b, _c;
var fileSize = (_a = config === null || config === void 0 ? void 0 : config.file) === null || _a === void 0 ? void 0 : _a.size;
var file = config === null || config === void 0 ? void 0 : config.file;
if (limitSize && (fileSize > limitSize)) {
msgsub_1.default._error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7" + limitSize + "KB");
_this_1.setState({
loading: false
});
reject();
return;
}
var blobSlice = File.prototype.slice; // 切片使用
var _this = _this_1;
var chunkSize = 1024 * 1024 * 2; // 切片每次2M
var chunks = Math.ceil(file.size / chunkSize); // 切片数
var currentChunk = 0; // 当前上传的chunk索引
var file_type = (_b = config === null || config === void 0 ? void 0 : config.file) === null || _b === void 0 ? void 0 : _b.type;
var file_name = (_c = config === null || config === void 0 ? void 0 : config.file) === null || _c === void 0 ? void 0 : _c.name;
var spark = new spark_md5_1.default.ArrayBuffer(); // 对arrayBuffer数据进行md5加密，产生一个md5字符串
var chunkFileReader = new FileReader(); // 用于计算出每个chunkMd5
var totalFileReader = new FileReader(); // 用于计算出总文件的fileMd5
var params = { chunks: [], file: {} }; // 用于上传所有分片的md5信息
var arrayBufferData = []; // 用于存储每个chunk的arrayBuffer对象,用于分片上传使用
params.file.fileName = file.name;
params.file.fileSize = file.size;
totalFileReader.readAsArrayBuffer(file);
totalFileReader.onload = function (e) {
// 对整个totalFile生成md5
spark.append(e.target.result);
params.file.fileMd5 = spark.end(); // 计算整个文件的fileMd5
};
chunkFileReader.onload = function (e) {
// 对每一片分片进行md5加密
spark.append(e.target.result);
// 每一个分片需要包含的信息
var obj = {
chunk: currentChunk + 1,
start: currentChunk * chunkSize,
end: ((currentChunk * chunkSize + chunkSize) >= file.size) ? file.size : currentChunk * chunkSize + chunkSize,
chunkMd5: spark.end(),
chunks: chunks
};
// 每一次分片onload,currentChunk都需要增加，以便来计算分片的次数
currentChunk++;
params.chunks.push(obj);
// 将每一块分片的arrayBuffer存储起来，用来partUpload
var tmp = {
chunk: obj.chunk,
currentBuffer: e.target.result
};
arrayBufferData.push(tmp);
if (currentChunk < chunks) {
// 当前切片总数没有达到总数时
loadNext();
// 计算预处理进度
_this.setState({
preUploading: true,
preUploadPercent: Number((currentChunk / chunks * 100).toFixed(2))
});
}
else {
//记录所有chunks的长度
params.file.fileChunks = params.chunks.length;
// 表示预处理结束，将上传的参数，arrayBuffer的数据存储起来
_this.setState({
preUploading: false,
uploadParams: params,
arrayBufferData: arrayBufferData,
chunksSize: chunks,
preUploadPercent: 100,
file_type: file_type,
upload_name: file_name,
fileSize: fileSize
}, function () {
resolve();
});
}
};
chunkFileReader.onerror = function () {
console.warn('oops, something went wrong.');
};
function loadNext() {
var start = currentChunk * chunkSize, end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
chunkFileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
});
};
_this_1.handleUpload = function (config) {
var _a, _b, _c;
// 上传逻辑
var _d = _this_1.state, type = _d.type, showfileList = _d.showfileList, turtyfilelist = _d.turtyfilelist, params = _d.params;
var _e = _this_1.props, env = _e.env, multiple = _e.multiple, limitType = _e.limitType;
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 (type !== 'image') {
msgsub_1.default._error('请选择图片类型的文件!');
_this_1.setState({
type: ''
});
return;
}
if (limitType && type !== limitType) {
msgsub_1.default._error("\u8BF7\u4E0A\u4F20 " + limitType + " \u7C7B\u578B\u7684\u56FE\u7247!");
_this_1.setState({
type: ''
});
return;
}
var _f = _this_1.props, url = _f.url, name = _f.name;
var fileSize = (_c = config === null || config === void 0 ? void 0 : config.file) === null || _c === void 0 ? void 0 : _c.size;
_this_1.setState({
loading: true,
fileSize: 0
});
_this_1.handleFile(config).then(function () {
var uploadParams = _this_1.state.uploadParams;
var formData = new FormData();
formData.append('upload_cmd', 'check_exist');
formData.append('upload_field', String(name));
formData.append('file_name', uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.file.fileName);
formData.append('file_md5', uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.file.fileMd5);
env.fetcher({
url: url,
data: formData,
method: 'post',
dataType: 'form-data'
}).then(function (res) {
var _a;
var _b, _c;
if ((res === null || res === void 0 ? void 0 : res.status) === 0 && (res === null || res === void 0 ? void 0 : res.data)) {
var exist = (res === null || res === void 0 ? void 0 : res.data).exist;
switch (exist) {
case true:
msgsub_1.default._info('文件上传成功');
var _url = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.url;
var value = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.value;
var str = typeof params === 'string' && params.length === 0 ? value : params + ',' + value;
var _item_val = {
value: str,
info: turtyfilelist.map(function (_file) {
return {
name: _file.name,
size: _file.size,
url: _file.url,
};
}).concat([{ name: uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.file.fileName, url: _url, size: fileSize }])
};
if (multiple) {
_this_1.setState({
loading: false,
showfileList: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], showfileList, true), [
{ name: uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.file.fileName, url: (!baseUrl ? '' : (_this_1.matchLocalhost(baseUrl) ? '' : baseUrl)) + _url, uid: value, status: 'done', size: fileSize }
], false),
turtyfilelist: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], turtyfilelist, true), [
{ name: uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.file.fileName, url: (!baseUrl ? '' : (_this_1.matchLocalhost(baseUrl) ? '' : baseUrl)) + _url, uid: value, status: 'done', size: fileSize }
], false)
});
}
else {
_this_1.setState({
loading: false,
turtyfilelist: [
{ name: uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.file.fileName, url: (!baseUrl ? '' : (_this_1.matchLocalhost(baseUrl) ? '' : baseUrl)) + _url, uid: value, status: 'done', size: fileSize }
],
showfileList: [
{ name: uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.file.fileName, url: (!baseUrl ? '' : (_this_1.matchLocalhost(baseUrl) ? '' : baseUrl)) + _url, uid: value, status: 'done', size: fileSize }
]
});
}
;
_this_1.props.onBulkChange((_a = {}, _a[name] = _item_val, _a));
_this_1.setState({
uploadParams: { chunks: [], file: {} },
arrayBufferData: [],
chunksSize: 0,
preUploading: false,
file_type: '',
upload_name: '',
loading: false,
params: value
});
break;
case false:
_this_1.setState({
upload_cmd: 'chunk_upload'
}, function () {
_this_1.handleMergeFile();
// 上传分片文件
});
break;
default:
break;
}
}
else {
_this_1.setState({
loading: false
});
msgsub_1.default._error('文件上传失败，系统异常');
return;
}
}).catch(function (err) {
if (err) {
msgsub_1.default._error(err);
}
_this_1.setState({
loading: false
});
return;
});
});
return;
};
_this_1.handlePartUpload = function (uploadList, file) {
var _a, _b;
var _c = _this_1.state, upload_cmd = _c.upload_cmd, upload_name = _c.upload_name, turtyfilelist = _c.turtyfilelist, errorImage = _c.errorImage, showfileList = _c.showfileList, chunksSize = _c.chunksSize, file_type = _c.file_type, params = _c.params, fileSize = _c.fileSize;
var fileMd5 = file.fileMd5;
var _d = _this_1.props, url = _d.url, multiple = _d.multiple, env = _d.env, name = _d.name;
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);
// 遍历uploadList
try {
// @ts-ignore
Promise.allSettled(uploadList.map(function (_uploadItem) {
return new Promise(function (resolve, reject) {
var chunkMd5 = _uploadItem.chunkMd5, chunk = _uploadItem.chunk, start = _uploadItem.start, end = _uploadItem.end;
var formData = new FormData(),
//新建一个Blob对象，将对应分片的arrayBuffer加入Blob中
blob = new Blob([_this_1.state.arrayBufferData[chunk - 1].currentBuffer], { type: 'application/octet-stream' });
// 上传的参数
var params = "fileMd5=" + fileMd5 + "&chunkMd5=" + chunkMd5 + "&chunk=" + chunk + "&start=" + start + "&end=" + end + "&chunks=" + _this_1.state.arrayBufferData.length;
// 通过formData将上传参数传入
formData.append('upload_cmd', upload_cmd);
formData.append('upload_field', String(name));
formData.append('file_name', upload_name);
formData.append('file_md5', fileMd5);
formData.append('chunk_index', chunk);
formData.append('chunk_total', String(chunksSize));
formData.append('chunk_size', String(end - start));
formData.append('type', file_type);
formData.append('chunk_file', blob);
env.fetcher({
url: url,
data: formData,
method: 'post'
}).then(function (res) {
if (res.status === 0) {
resolve(res === null || res === void 0 ? void 0 : res.data);
}
else {
reject({ _err: res === null || res === void 0 ? void 0 : res.msg, _data: formData });
}
});
});
})).then(function (_res) {
var _chunk_success_count = 0;
var _chunk_error_arr = [];
_res.map(function (_upload_res) {
if ((_upload_res === null || _upload_res === void 0 ? void 0 : _upload_res.status) === 'fulfilled') {
_chunk_success_count++;
}
else {
_chunk_error_arr.push(_upload_res.reason._data);
}
});
if (_chunk_success_count === chunksSize) {
var formData = new FormData();
// 通过formData将上传参数传入，发起文件分片合并通知
formData.append('upload_cmd', 'chunk_merge');
formData.append('upload_field', String(name));
formData.append('file_name', upload_name);
formData.append('file_md5', fileMd5);
env.fetcher({
url: url,
data: formData,
method: 'post'
}).then(function (_merge_res) {
var _a;
if ((_merge_res === null || _merge_res === void 0 ? void 0 : _merge_res.status) === 0) {
var data = _merge_res === null || _merge_res === void 0 ? void 0 : _merge_res.data;
var fileName = data === null || data === void 0 ? void 0 : data.fileName;
var _url = data === null || data === void 0 ? void 0 : data.url;
var value = data === null || data === void 0 ? void 0 : data.value;
var str = params.slice();
var _item_val = void 0;
if (typeof str === 'string' && str.length === 0) {
_item_val = {
value: value,
info: turtyfilelist.map(function (_file) {
return {
name: _file.name,
size: _file.size,
url: _file.url,
};
}).concat([{ name: fileName, url: _url, size: fileSize }])
};
_this_1.setState({
params: value
});
}
else {
_item_val = {
value: str + ',' + value,
info: turtyfilelist.map(function (_file) {
return {
name: _file.name,
size: _file.size,
url: _file.url,
};
}).concat([{ name: fileName, url: _url, size: fileSize }])
};
_this_1.setState({
params: str + ',' + value
});
}
_this_1.props.onBulkChange((_a = {}, _a[String(name)] = _item_val, _a));
// this.props.onChange(_item_val)
if (multiple) {
_this_1.setState({
loading: false,
showfileList: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], showfileList, true), [
{ name: fileName, url: (!baseUrl ? '' : (_this_1.matchLocalhost(baseUrl) ? '' : baseUrl)) + _url, uid: value, status: 'done', size: fileSize }
], false),
turtyfilelist: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], turtyfilelist, true), [
{ name: fileName, url: (!baseUrl ? '' : (_this_1.matchLocalhost(baseUrl) ? '' : baseUrl)) + _url, uid: value, status: 'done', size: fileSize }
], false)
});
}
else {
_this_1.setState({
loading: false,
turtyfilelist: [
{ name: fileName, url: (!baseUrl ? '' : (_this_1.matchLocalhost(baseUrl) ? '' : baseUrl)) + _url, uid: value, status: 'done', size: fileSize }
],
showfileList: [
{ name: fileName, url: (!baseUrl ? '' : (_this_1.matchLocalhost(baseUrl) ? '' : baseUrl)) + _url, uid: value, status: 'done', size: fileSize }
]
});
}
msgsub_1.default._success('文件上传成功');
}
else {
if (multiple) {
_this_1.setState({
loading: false,
showfileList: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], showfileList, true), [
{
url: errorImage.url,
uid: _this_1.uuid(),
status: 'error',
name: upload_name,
}
], false)
});
}
else {
_this_1.setState({
loading: false,
showfileList: [
{
url: errorImage.url,
uid: _this_1.uuid(),
status: 'error',
name: upload_name,
}
]
});
}
msgsub_1.default._error(_merge_res === null || _merge_res === void 0 ? void 0 : _merge_res.msg);
}
}).catch(function (_file_merge_res) {
if (multiple) {
_this_1.setState({
loading: false,
showfileList: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], showfileList, true), [
{
url: errorImage.url,
uid: _this_1.uuid(),
status: 'error',
name: upload_name,
}
], false)
});
}
else {
_this_1.setState({
loading: false,
showfileList: [
{
url: errorImage.url,
uid: _this_1.uuid(),
status: 'error',
name: upload_name,
}
]
});
}
msgsub_1.default._error('上传失败');
return;
});
}
else {
_chunk_error_arr.map(function (_chunk_error_item) {
env.fetcher({
url: url,
data: _chunk_error_item,
method: 'post'
}).then(function (_error_res) {
});
});
throw new Error('chunk file upload error!');
}
}).catch(function (_err) {
_this_1.setState({
loading: false
});
msgsub_1.default._error(_err);
return;
});
}
catch (error) {
_this_1.setState({
loading: false
});
msgsub_1.default._error(error);
return;
}
};
_this_1.uuid = function () {
var temp_url = URL.createObjectURL(new Blob());
var uuid = temp_url.toString();
URL.revokeObjectURL(temp_url);
return uuid.substr(uuid.lastIndexOf("/") + 1);
};
_this_1.handleMergeFile = function () {
var uploadParams = _this_1.state.uploadParams;
_this_1.handlePartUpload(uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.chunks, uploadParams === null || uploadParams === void 0 ? void 0 : uploadParams.file);
};
_this_1.matchLocalhost = function (str) {
if (!str) {
return false;
}
return /localhost\:(\d)+/.test(str);
};
_this_1.handleRemove = function (file) {
var _a, _b;
var _c = _this_1.state, showfileList = _c.showfileList, turtyfilelist = _c.turtyfilelist, params = _c.params;
var _d = _this_1.props, multiple = _d.multiple, name = _d.name;
var _item_val = {};
if (multiple) {
var index = showfileList.indexOf(file);
var isexist = turtyfilelist.findIndex(function (item, idx) {
return item.name === file.name && item.uid === file.uid && item.url === file.url;
});
var newturtyfilelist = turtyfilelist.slice();
var newparams = params.slice();
var newFileList = showfileList.slice();
if (index !== -1 && isexist !== -1) {
var example = params.split(',');
newturtyfilelist.splice(isexist, 1);
example.splice(isexist, 1);
newparams = example.join(',');
}
newFileList.splice(index, 1);
_this_1.setState({
showfileList: newFileList,
type: '',
params: newparams,
turtyfilelist: newturtyfilelist
});
_item_val = {
value: newparams,
info: turtyfilelist.map(function (_file) {
return {
name: _file.name,
size: _file.size,
url: _file.url,
};
})
};
_this_1.props.onBulkChange((_a = {}, _a[name] = _item_val, _a));
}
else {
_this_1.setState({
showfileList: [],
type: '',
params: '',
turtyfilelist: []
});
_this_1.props.onBulkChange((_b = {}, _b[name] = _item_val, _b));
}
};
return _this_1;
}
LionInputImg.prototype.initFileData = function () {
var _a, _b;
var _c = this.props, data = _c.data, name = _c.name, store = _c.store;
var content;
content = data[name] || (store === null || store === void 0 ? void 0 : store.data[name]);
var _d = this.props, thumbRatio = _d.thumbRatio, env = _d.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) || '';
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.setState({
formItemName: 'temp_' + name
});
// 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 || ele.fileName,
// url: (baseUrl ? baseUrl : '') + (ele?.url ? ele?.url : ele.addr),
preview: baseUrl + ((ele === null || ele === void 0 ? void 0 : ele.url) ? ele === null || ele === void 0 ? void 0 : ele.url : ele.addr),
url: baseUrl + (ele === null || ele === void 0 ? void 0 : ele.thumbnailAddr),
size: ele === null || ele === void 0 ? void 0 : ele.size
});
});
this.setState({
loading: false,
params: value,
showfileList: (0, tslib_1.__spreadArray)([], initialList_1, true),
turtyfilelist: (0, tslib_1.__spreadArray)([], initialList_1, true)
});
// this.props.onBulkChange({ ['temp_' + name as string]: value });
}
}
};
LionInputImg.prototype.componentDidUpdate = function (prevProps, prevState) {
var _a = this.props, data = _a.data, name = _a.name;
var content = data[name];
if (content && (content !== prevProps.data[name])) {
this.initFileData();
}
};
LionInputImg.prototype.componentDidMount = function () {
this.initFileData();
};
LionInputImg.prototype.render = function () {
var _this_1 = this;
var _a, _b;
var _c = this.props, url = _c.url, multiple = _c.multiple, cx = _c.classnames, className = _c.className, thumbMode = _c.thumbMode, width = _c.width, height = _c.height, 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 _d = this.state, previewVisible = _d.previewVisible, previewImage = _d.previewImage, loading = _d.loading, previewTitle = _d.previewTitle, showfileList = _d.showfileList, errorImage = _d.errorImage;
var uploadButton = (loading ? react_1.default.createElement("span", { className: "fa fa-circle-o-notch fa-spin" }) : react_1.default.createElement("span", { className: "fa fa-plus" }));
var uploadProps = {
action: (baseUrl ? baseUrl : '') + url,
disabled: loading || this.props.disabled,
listType: "picture-card",
showUploadList: true,
fileList: showfileList,
progress: {
strokeColor: {
'0%': '#108ee9',
'100%': '#87d068',
},
strokeWidth: 3,
format: function (percent) { return parseFloat(percent.toFixed(2)) + "%"; }
},
onPreview: this.handlePreview,
onChange: this.handleChange,
onRemove: this.handleRemove,
customRequest: this.handleUpload,
};
return (react_1.default.createElement(Warpper, (0, tslib_1.__assign)({}, this.props, { imgHeight: this.state.imgHeight }),
react_1.default.createElement(Upload_1.default, (0, tslib_1.__assign)({}, uploadProps), multiple ? uploadButton : (showfileList.length >= 1 ? null : uploadButton)),
react_1.default.createElement(Modal_1.default, { className: 'fastlion-modal', visible: previewVisible, title: previewTitle, footer: null, onCancel: this.handleCancel, zIndex: 9999, maskStyle: {
zIndex: 9999
} },
react_1.default.createElement("img", { onError: function () {
_this_1.setState({
previewImage: errorImage === null || errorImage === void 0 ? void 0 : errorImage.url
});
}, title: previewTitle, alt: previewTitle, style: { width: '100%' }, src: previewImage }))));
};
return LionInputImg;
}(react_1.default.PureComponent));
exports.LionInputImg = LionInputImg;
var LionInputImgRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LionInputImgRenderer, _super);
function LionInputImgRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
LionInputImgRenderer = (0, tslib_1.__decorate)([
(0, Item_1.FormItem)({
type: 'lion-input-img',
strictMode: false
})
], LionInputImgRenderer);
return LionInputImgRenderer;
}(LionInputImg));
exports.LionInputImgRenderer = LionInputImgRenderer;
var templateObject_1;
//# sourceMappingURL=./renderers/Lion/File/components/LionInputImg/LionInputImg.js.map