yylib-quick-mobile
Version:
yylib-quick-mobile
612 lines (561 loc) • 28.4 kB
JavaScript
;
var _imagePicker = require('antd-mobile/lib/image-picker');
var _imagePicker2 = _interopRequireDefault(_imagePicker);
var _toast = require('antd-mobile/lib/toast');
var _toast2 = _interopRequireDefault(_toast);
var _modal = require('antd-mobile/lib/modal');
var _modal2 = _interopRequireDefault(_modal);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
require('antd-mobile/lib/image-picker/style/css');
require('antd-mobile/lib/toast/style/css');
require('antd-mobile/lib/modal/style/css');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
require('./YYImagePicker.css');
var _FunctionUtil = require('../../utils/FunctionUtil');
var _UploadFileUtils = require('../../utils/UploadFileUtils');
var _UploadFileUtils2 = _interopRequireDefault(_UploadFileUtils);
var _RestUrl = require('../../common/RestUrl');
var _YYFile = require('./YYFile');
var _YYFile2 = _interopRequireDefault(_YYFile);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var alert = _modal2.default.alert;
var YYImagePicker = function (_Component) {
_inherits(YYImagePicker, _Component);
function YYImagePicker() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, YYImagePicker);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = YYImagePicker.__proto__ || Object.getPrototypeOf(YYImagePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
files: _this.props.files,
scrollTop: '0',
showFile: false
}, _this.getAttachList = function (params, callback) {
var fileList = [];
if (window.YYPlugin) {
window.YYPlugin.call("ExpandPlugin", "queryTempAttachList", params, function (data) {
var backData = data.backData;
if (backData != null) {
for (var i = 0; i < backData.length; i++) {
var item = backData[i];
var fileUrl = _RestUrl.ADDR + '/' + item.filePath;
var file = {
gid: item.gid,
name: item.fileName,
url: item.filePath,
fileUrl: fileUrl,
backData: item
};
fileList.push(file);
}
}
if (callback && _.isFunction(callback)) {
callback(fileList);
}
}, function (data) {
console.log(data);
});
} else {
_toast2.default.info('请在手机上进行调试或检查yyplus的引入！');
}
}, _this.onChange = function (files, type, index) {
if (type == 'add') {
_this.postPCFile(files);
} else if (type == 'remove') {
_this.deleteFile(index);
} else {
console.log('上传错误！');
}
}, _this.deleteFile = function (index) {
var that = _this;
var alertInstance = alert('删除', '删除后不可恢复!', [{
text: '取消', onPress: function onPress() {
alertInstance.close();
}, style: 'default'
}, {
text: '确定', onPress: function onPress() {
if (that.props.offline) {
window.YYPlugin.call("ExpandPlugin", "delAttach", { 'gid': that.state.files[index].gid }, function () {
that.setState({
files: that.state.files.filter(function (e, i) {
return i != index;
})
}, function () {
_toast2.default.success('删除成功', 1);
if (_.isFunction(that.props.onChange)) {
that.props.onChange(_this.state.files);
}
});
});
} else {
if (_this.props.source.sourceType) {
var params = {
id: _this.props.source.sourceId,
billType: _this.props.source.billType,
sourceType: _this.props.source.sourceType,
attachIds: _this.state.files[index].gid
};
_UploadFileUtils2.default.delAttach(params, function () {
that.setState({
files: that.state.files.filter(function (e, i) {
return i != index;
})
}, function () {
window.YYPlugin && YYPlugin.call("ExpandPlugin", "delAttach", { 'gid': that.state.files[index].gid }, function (f) {
return f;
});
if (_.isFunction(that.props.onChange)) {
that.props.onChange(_this.state.files);
}
});
});
} else {
_this.setState({
files: that.state.files.filter(function (e, i) {
return i != index;
})
}, function () {
if (_.isFunction(that.props.onChange)) {
that.props.onChange(_this.state.files);
}
});
}
}
}
}]);
}, _this.onAddImageClick = function (e) {
var _this$props = _this.props,
orderQuality = _this$props.orderQuality,
orderWidth = _this$props.orderWidth,
camera = _this$props.camera,
picture = _this$props.picture,
inChild = _this$props.inChild;
var that = _this;
e.preventDefault();
var params = {
billType: _this.props.source.billType,
sourceType: _this.props.source.sourceType,
sourceId: _this.props.source.sourceId,
userId: window.YYUtils.AuthToken.getUserId(),
userName: window.YYUtils.AuthToken.getUserName(),
camera: camera,
picture: picture,
file: _this.props.file,
billId: _this.props.source.billId,
upload: _this.props.offline ? "1" : "0"
};
if (orderQuality) {
params.orderQuality = orderQuality;
}
if (orderWidth) {
params.orderWidth = orderWidth;
}
var file = {};
if (window.YYPlugin) {
window.YYPlugin.call("CommonPlugin", "postFile", params, function success(result) {
try {
file.gid = result.gid;
file.name = result.fileName;
var urlArray = result.filePath.split('.');
if (!that.props.offline) {
file.url = result.filePath.replace('.' + urlArray[urlArray.length - 1], '_100x100.' + urlArray[urlArray.length - 1]);
} else {
file.url = result.filePath;
}
file.fileUrl = result.filePath;
file.openurl = result.filePath;
file.backData = result;
var files = that.state.files.concat(file);
that.setState({
files: files
}, function () {
var fields = {};
var values = that.state.files.map(function (item) {
return item.gid;
}).join(',');
if (inChild) {
fields[that.props.uikey] = {
dirty: true,
errors: undefined,
name: that.props.uikey,
touched: true,
validating: true,
value: that.props.sourceType
};
} else {
fields[that.props.sourceType] = {
dirty: true,
errors: undefined,
name: that.props.uikey ? that.props.uikey : that.props.sourceType,
touched: true,
validating: true,
value: values
};
}
that.props.form && that.props.form.setFields(fields);
if (_.isFunction(that.props.onChange)) {
that.props.onChange(that.state.files);
}
});
} catch (e) {
alert(e.message);
}
});
} else {
_toast2.default.info('请在手机上进行调试或检查yyplus的引入！');
}
}, _this.onImageClick = function (index, val) {
var src = _this.state.files[index] ? _this.state.files[index].openurl : null;
var fileUrl = _this.state.files[index] ? _this.state.files[index].fileUrl : val[index].fileUrl;
var filename = _this.state.files[index] ? _this.state.files[index].name : val[index].name;
var filetype = filename && filename.split('.') ? filename.split('.')[1] : null;
if (['jpg', 'png', 'gif', 'jpeg', 'PNG', 'JPG', 'GIF'].indexOf(filetype) >= 0) {
if (src) {
var url = src.split('.');
var params = {
thumbnailUrl: _this.props.offline ? src : src.replace('.' + url[url.length - 1], '_355x500.' + url[url.length - 1]),
originalUrl: src
};
if (window.YYPlugin) {
window.YYPlugin.call("CommonPlugin", "openPic", params);
} else {
_this.setState({ showFile: true, filePath: src });
}
} else {
var Vurl = val[index].fileUrl ? val[index].fileUrl.split('.') : val[index].url.split('.');
var realUrl = val[index].fileUrl ? val[index].fileUrl : val[index].url;
var Vparams = {
thumbnailUrl: _this.props.offline ? realUrl : realUrl.replace('.' + Vurl[Vurl.length - 1], '_355x500.' + Vurl[Vurl.length - 1]),
originalUrl: realUrl
};
if (window.YYPlugin) {
window.YYPlugin.call("CommonPlugin", "openPic", Vparams);
} else {
_this.setState({ showFile: true, filePath: realUrl });
}
}
} else {
var _params = {
url: fileUrl,
filename: filename
};
if (window.YYPlugin) {
window.YYPlugin.call("CommonPlugin", "openAttach", _params);
} else {
_this.setState({ showFile: true, filePath: fileUrl });
}
}
}, _this.onImageClickNew = function (_ref2) {
var index = _ref2.index,
filesList = _ref2.filesList;
_this.onImageClick(index, filesList);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(YYImagePicker, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _self = this;
if (this.props.source) {
this.loadAttachList(this.props.source);
}
window.addEventListener('scroll', function (val) {
_self.state.scrollTop = document.documentElement.scrollTop;
});
if (this.props.RunInDesign) {
var filesList = [{ url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg', name: 'a.jpeg', gid: '1111' }, { url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg', name: 'b.jpeg', gid: '1111' }];
this.setState({ files: filesList });
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var source = this.props.source;
if (nextProps.source && nextProps.source.sourceId && (source.sourceId != nextProps.source.sourceId || source.sourceType != nextProps.source.sourceType)) {
this.loadAttachList(nextProps.source);
}
if (JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files)) {
this.setState({
files: nextProps.files
});
}
}
}, {
key: 'loadAttachList',
value: function loadAttachList(source) {
var params = {
sourceId: source.sourceId,
billType: source.billType,
sourceType: source.sourceType,
id: source.sourceId,
type: source.sourceType
};
var that = this;
if (source.sourceId && source.sourceType && source.billType) {
if (this.props.offline) {
that.getAttachList(params, function (data) {
if (data.length > 0) {
that.setState({
files: data
});
}
});
} else {
_UploadFileUtils2.default.loadAttachList(params, function (data) {
if (data.length > 0) {
that.setState({
files: data
});
}
});
}
} else {
this.setState({ files: [] });
}
}
}, {
key: 'postPCFile',
value: function postPCFile(files) {
var _props = this.props,
orderQuality = _props.orderQuality,
orderWidth = _props.orderWidth,
camera = _props.camera,
picture = _props.picture,
inChild = _props.inChild;
var that = this;
var params = {
billType: this.props.source.billType,
sourceType: this.props.source.sourceType,
sourceId: this.props.source.sourceId,
userId: window.YYUtils.AuthToken.getUserId(),
userName: window.YYUtils.AuthToken.getUserName(),
camera: camera,
picture: picture,
file: files[files.length - 1].file,
billId: this.props.source.billId
};
if (orderQuality) {
params.orderQuality = orderQuality;
}
if (orderWidth) {
params.orderWidth = orderWidth;
}
var file = {};
_UploadFileUtils2.default.multiFilesUpLoad(params, params.billType, { sourceId: params.sourceId, sourceType: params.sourceType }, function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 1),
result = _ref4[0];
file.gid = result.gid;
file.name = result.name;
file.url = result.fileUrl;
file.openurl = result.fileUrl;
file.fileUrl = result.fileUrl;
file.backData = result;
var files = that.state.files.concat(file);
that.setState({
files: files
}, function () {
var fields = {};
var values = that.state.files.map(function (item) {
return item.gid;
}).join(',');
if (inChild) {
fields[that.props.uikey] = {
dirty: true,
errors: undefined,
name: that.props.uikey,
touched: true,
validating: true,
value: that.props.sourceType
};
} else {
fields[that.props.sourceType] = {
dirty: true,
errors: undefined,
name: that.props.uikey ? that.props.uikey : that.props.sourceType,
touched: true,
validating: true,
value: values
};
}
that.props.form && that.props.form.setFields(fields);
if (_.isFunction(that.props.onChange)) {
that.props.onChange(that.state.files);
}
});
});
}
}, {
key: 'closeFile',
value: function closeFile() {
this.setState({ showFile: false });
}
}, {
key: 'pcChange',
value: function pcChange(event) {
if (event && event.target) {
var file = event.target.files[0];
this.postPCFile([{ file: file }]);
}
}
}, {
key: 'renderAdd',
value: function renderAdd() {
return _react2.default.createElement(
'div',
{ className: 'am-flexbox am-flexbox-align-center' },
_react2.default.createElement(
'div',
{ className: 'am-flexbox-item' },
_react2.default.createElement(
'div',
{ className: 'am-image-picker-item am-image-picker-upload-btn', role: 'button', onClick: window.YYPlugin ? this.onAddImageClick : null },
window.YYPlugin ? null : _react2.default.createElement('input', { type: 'file', onChange: this.pcChange.bind(this) })
)
),
_react2.default.createElement('div', { className: 'am-flexbox-item' }),
_react2.default.createElement('div', { className: 'am-flexbox-item' }),
_react2.default.createElement('div', { className: 'am-flexbox-item' })
);
}
}, {
key: 'renderFiles',
value: function renderFiles(filesList) {
var _this2 = this;
var _props2 = this.props,
disabled = _props2.disabled,
maxSize = _props2.maxSize;
var list = [];
filesList.map(function (item, index) {
var itemContent = null;
itemContent = _react2.default.createElement(
'div',
{ className: 'item', key: index },
_react2.default.createElement('div', { className: 'am-image-picker-item-remove', onClick: _this2.deleteFile.bind(_this2, index) }),
_react2.default.createElement(
'div',
{ onClick: _this2.onImageClickNew.bind(_this2, { index: index, filesList: filesList }) },
_react2.default.createElement(
'span',
{ style: { fontSize: '14px', wordWrap: 'break-word', wordBreak: 'normal', lineHeight: '1' } },
item.name
)
)
);
list.push(itemContent);
});
return list;
}
}, {
key: 'render',
value: function render() {
var getFieldProps = this.props.form ? this.props.form.getFieldProps : null;
var _props3 = this.props,
RunInDesign = _props3.RunInDesign,
disabled = _props3.disabled,
maxSize = _props3.maxSize,
label = _props3.label,
className = _props3.className,
orderWidth = _props3.orderWidth,
source = _props3.source,
files = _props3.files,
file = _props3.file,
visible = _props3.visible,
sourceType = _props3.sourceType,
orderQuality = _props3.orderQuality,
selectable = _props3.selectable,
camera = _props3.camera,
picture = _props3.picture,
upload = _props3.upload,
inChild = _props3.inChild,
findUI = _props3.findUI,
offline = _props3.offline,
parentType = _props3.parentType,
uiorigin = _props3.uiorigin,
uititle = _props3.uititle,
uitype = _props3.uitype,
uikey = _props3.uikey,
nid = _props3.nid,
control_event = _props3.control_event,
restProps = _objectWithoutProperties(_props3, ['RunInDesign', 'disabled', 'maxSize', 'label', 'className', 'orderWidth', 'source', 'files', 'file', 'visible', 'sourceType', 'orderQuality', 'selectable', 'camera', 'picture', 'upload', 'inChild', 'findUI', 'offline', 'parentType', 'uiorigin', 'uititle', 'uitype', 'uikey', 'nid', 'control_event']);
var filesList = this.state.files;
var field = this.props.uikey ? this.props.uikey : this.props.sourceType;
var wrapClz = (0, _classnames2.default)('yy-image-picker', !visible && 'hidden', className, disabled && "yy-image-picker-disabled");
if (this.props.RunInDesign) {
filesList = [{ url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg', name: 'a.jpeg', gid: '1111' }, { url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg', name: 'b.jpeg', gid: '1111' }];
}
var _state = this.state,
showFile = _state.showFile,
filePath = _state.filePath;
return _react2.default.createElement(
'div',
_extends({}, restProps, { className: wrapClz }, (0, _FunctionUtil.isFunction)(getFieldProps) ? getFieldProps(field, {}) : null),
!showFile || _react2.default.createElement(_YYFile2.default, { filePath: filePath, closeFile: this.closeFile.bind(this) }),
label && _react2.default.createElement(
'div',
{ className: 'label' },
label
),
disabled === true && filesList.length === 0 ? null : file ? _react2.default.createElement(
'div',
{ className: 'am-image-picker' },
_react2.default.createElement(
'div',
{ className: 'am-image-picker-list',
files: filesList },
!disabled && this.state.files.length < maxSize ? this.renderAdd() : null,
this.renderFiles(filesList)
)
) : _react2.default.createElement(_imagePicker2.default, {
files: filesList,
onChange: disabled ? null : this.onChange,
onImageClick: this.onImageClick,
selectable: !disabled && this.state.files.length < maxSize,
onAddImageClick: window.YYPlugin ? this.onAddImageClick : null
})
);
}
}]);
return YYImagePicker;
}(_react.Component);
YYImagePicker.defaultProps = {
label: '上传图片',
maxSize: 5,
disabled: false,
source: {
sourceId: '',
billType: '',
sourceType: 'MD001'
},
files: [],
orderQuality: null,
orderWidth: null,
visible: true,
selectable: true,
camera: true,
picture: true,
file: false,
upload: '1',
inChild: false,
sourceType: '',
control_event: {},
findUI: '',
offline: false,
parentType: '',
uiorigin: '',
RunInDesign: false,
uititle: '',
uitype: '',
uikey: '',
nid: ''
};
module.exports = YYImagePicker;