UNPKG

yylib-quick-mobile

Version:

yylib-quick-mobile

612 lines (561 loc) 28.4 kB
'use strict'; 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;