ming-demo3
Version:
mdf metaui web
634 lines (565 loc) • 23 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _findIndex2 = _interopRequireDefault(require("lodash/findIndex"));
var _react = _interopRequireDefault(require("react"));
var _baseui = require("@mdf/baseui");
var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));
if (process.env.__CLIENT__ === true) {
require("./PictureBook.css");
}
var PictureBook = function (_React$Component) {
(0, _inherits2["default"])(PictureBook, _React$Component);
function PictureBook(props) {
var _this;
(0, _classCallCheck2["default"])(this, PictureBook);
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(PictureBook).call(this, props));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "transferBill2Refer", function (value, bill2ReferKeyFieldMap) {
if (!value) return [];
var fileList = _this.state.fileList;
var newValue = [];
value.forEach(function (item, index) {
if (item._status == "Delete") return;
var referItem = {};
for (var billKey in bill2ReferKeyFieldMap) {
referItem[bill2ReferKeyFieldMap[billKey]] = item[billKey];
}
if (fileList[index]) {
if (fileList[index].name == referItem.name && fileList[index].size == referItem.size) {
referItem.id = fileList[index].id;
} else {
var i = (0, _findIndex2["default"])(fileList, {
"name": referItem.name,
"size": referItem.size
});
if (i != -1) referItem.id = fileList[i].id;
}
}
newValue.push(referItem);
});
return newValue;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_fielUploadOnChange", function (info) {
var _this$state = _this.state,
fileList = _this$state.fileList,
replaceIndex = _this$state.replaceIndex,
onReplace = _this$state.onReplace,
bill2ReferKeyFieldMap = _this$state.bill2ReferKeyFieldMap;
var num = (0, _findIndex2["default"])(fileList, {
'id': info.file.uid
});
if (info.file.status === 'uploading') {
if (!info.file.percent) {
cb.utils.loadingControl.end();
_this.uploading = false;
fileList[num].percent = 100;
} else {
fileList[num].percent = info.file.percent;
}
fileList[num].size = info.file.size;
_this.setState({
fileList: fileList,
percent: info.file.percent
});
}
if (info.file.status === 'done') {
if (info.file.response.code == 200) {
fileList[num].address = _this.DocumentServerAddress + info.file.response.data;
_this.setState({
fileList: fileList,
percent: 0
});
cb.utils.loadingControl.end();
_this.uploading = false;
if (onReplace) {
if (_this.props.model) {
var cellValues = [];
for (var key in bill2ReferKeyFieldMap) {
var newKey = bill2ReferKeyFieldMap[key];
cellValues.push({
index: replaceIndex,
cellName: key,
cellValue: fileList[replaceIndex][newKey]
});
}
if (_this.props.model) _this.props.model.setCellValues(cellValues);
}
_this.setState({
onReplace: false
});
} else {
if (_this.props.model) {
var bSet = true;
fileList.map(function (item) {
if (cb.utils.isEmpty(item.address)) bSet = false;
});
if (bSet) _this.props.model.setValue(fileList, true);
}
}
} else {
cb.utils.loadingControl.end();
_this.uploading = false;
fileList.pop();
_this.setState({
fileList: fileList,
percent: 0
});
cb.utils.alert("".concat(info.file.name, " \u4E0A\u4F20\u5931\u8D25\uFF01").concat(info.file.response.code, " : ").concat(info.file.response.message), 'error');
}
}
if (info.file.status === 'error') {
cb.utils.alert("".concat(info.file.name, " \u4E0A\u4F20\u5931\u8D25\uFF01").concat(info.file.response.code, " : ").concat(info.file.response.message), 'error');
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_fileListControl", function (fileType) {
if (_this.state.fileList.length == 0 && _this.state.readOnly) {
return _react["default"].createElement("div", {
className: "upload-nodata"
}, _react["default"].createElement(_baseui.Icon, {
type: fileType == "file" ? "noFile" : "noPic"
}), _react["default"].createElement("span", null, fileType == "file" ? "暂无附件~" : "暂无图片~"));
}
return _react["default"].createElement(FileList, {
arrowImg: _this._arrowImg,
DelFile: _this._DelFile,
colCount: _this.state.colCount,
fileType: fileType,
fileList: _this.state.fileList,
readOnly: _this.state.readOnly,
mode: _this.state.mode
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_DelFile", function (index) {
if (_this.props.model) _this.props.model.deleteItem(index);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_beforeUpload", function (file, uploadFileList) {
cb.utils.loadingControl.start();
if (file.size > 1048576) {
cb.utils.alert('上传大小超出限制，请重新上传！', 'error');
_this.uploading = false;
cb.utils.loadingControl.end();
return false;
}
var accept = "png,jpg,jpeg,bmp";
accept = accept.split(',');
var inAccept = false;
accept.map(function (item) {
if (file.name && file.name.toLowerCase().split(item).length > 1) inAccept = true;
});
if (!inAccept) {
cb.utils.alert('选择文件格式不正确，请重新选择！', 'error');
_this.uploading = false;
cb.utils.loadingControl.end();
return false;
}
if (!_this.uploading) {
_this.uploading = true;
}
var _this$state2 = _this.state,
fileList = _this$state2.fileList,
onReplace = _this$state2.onReplace,
replaceIndex = _this$state2.replaceIndex;
if (onReplace) fileList[replaceIndex].id = file.uid;else fileList.push({
'percent': file.percent,
'name': file.name,
'id': file.uid,
'type': file.type
});
_this.setState({
fileList: fileList
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onOk", function () {
_this.setState({
showModal: false
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCancel", function () {
_this.setState({
showModal: false
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBigCancel", function () {
_this.setState({
showDetailModal: false,
picIndex: 0
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "showPicModel", function (e) {
e.preventDefault();
e.stopPropagation();
_this.onClick();
_this.setState({
showModal: true
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onOpenDetail", function (e) {
e.preventDefault();
e.stopPropagation();
_this.setState({
showDetailModal: true
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDelete", function (e) {
_this.onClick();
e.preventDefault();
e.stopPropagation();
var fileList = _this.state.fileList;
var indexes = [];
fileList.map(function (file, index) {
indexes.push(index);
});
if (_this.props.model) {
_this.props.model.deleteItems(indexes);
} else {
if (_this.props.onDelete) _this.props.onDelete(indexes);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPicDelete", function (e, index) {
if (_this.props.model) _this.props.model.deleteItem(index);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onReplace", function (e, index) {
_this.setState({
onReplace: true,
replaceIndex: index
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function () {
if (_this.props.onClick) _this.props.onClick();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onLeftClick", function () {
if (_this.state.picIndex == 0) return;
_this.setState({
picIndex: _this.state.picIndex - 1
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRightClick", function () {
if (_this.state.picIndex == _this.state.fileList.length - 1) return;
_this.setState({
picIndex: _this.state.picIndex + 1
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getControl", function () {
var fileList = _this.state.fileList;
var readOnly = false,
count = fileList.length;
if (_this.state.mode == 'browse' || _this.state.readOnly) readOnly = true;
var control = null,
style = {};
if (count == 0) {
if (readOnly) {
control = _react["default"].createElement(_baseui.Badge, {
count: count
}, _react["default"].createElement("div", {
className: "pictureBook readOnly"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "zanwushangpinxiangcetupian"
}), _react["default"].createElement("div", {
className: "pictureRow"
})));
} else {
var tempControl = _react["default"].createElement("div", {
className: "pictureBook ",
onClick: _this.showPicModel
}, _react["default"].createElement("div", {
className: "pictureRow"
}), _react["default"].createElement(_SvgIcon["default"], {
type: "shangchuantupian"
}), _react["default"].createElement("p", null, "\u4E0A\u4F20\u56FE\u7247"));
control = tempControl;
}
} else {
if (readOnly) {
control = _react["default"].createElement(_baseui.Badge, {
count: count
}, _react["default"].createElement("div", {
className: "pictureBook ",
onClick: _this.onClick
}, _react["default"].createElement("div", {
className: "pictureRow"
}), _react["default"].createElement("div", {
className: "pictureImg"
}, _react["default"].createElement("img", {
src: _this.state.fileList[0].address
})), _react["default"].createElement("div", {
className: "fileBtn"
}, _react["default"].createElement("a", {
onClick: _this.onOpenDetail,
className: 'search'
}, _react["default"].createElement(_baseui.Icon, {
type: "search"
})))));
} else {
var _tempControl = _react["default"].createElement(_baseui.Badge, {
count: count
}, _react["default"].createElement("div", {
className: "pictureBook ",
onClick: _this.onClick
}, _react["default"].createElement("div", {
className: "pictureRow"
}), _react["default"].createElement("div", {
className: "pictureImg"
}, _react["default"].createElement("img", {
onClick: _this.showPicModel,
src: _this.state.fileList[0].address
})), _react["default"].createElement("div", {
className: "fileBtn"
}, _react["default"].createElement("a", {
className: 'upload'
}, _react["default"].createElement(_baseui.Icon, {
type: "uploadImg"
})), _react["default"].createElement("a", {
onClick: _this.onOpenDetail,
className: 'search'
}, _react["default"].createElement(_baseui.Icon, {
type: "search"
})), _react["default"].createElement("a", {
onClick: _this.onDelete,
className: 'delete'
}, _react["default"].createElement(_baseui.Icon, {
type: "delete"
}))), _react["default"].createElement("div", {
className: "Progress"
}, _this.state.percent && _this.state.percent != 100 ? _react["default"].createElement(_baseui.Progress, {
percent: _this.state.percent,
strokeWidth: 5
}) : null)));
control = _this.getUploadControl(_tempControl);
}
}
return control;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getModalControl", function (uploadControl) {
var _this$state3 = _this.state,
fileList = _this$state3.fileList,
bPaginationChange = _this$state3.bPaginationChange;
var control = [];
var len = fileList.length;
var _loop = function _loop() {
var j = i;
var buttonControl = _react["default"].createElement("a", {
onClick: function onClick(e) {
return _this.onReplace(e, j);
},
className: 'replace'
}, "\u66FF\u6362");
var tempControl = _this.getUploadControl(buttonControl);
control.push(_react["default"].createElement("div", {
className: "list-col"
}, _react["default"].createElement("div", {
className: "pictureBook"
}, _react["default"].createElement("div", {
className: "pictureImg"
}, _react["default"].createElement("img", {
src: fileList[i].address
})), _react["default"].createElement("div", {
className: "fileBtn"
}, tempControl, _react["default"].createElement("a", {
onClick: function onClick(e) {
return _this.onPicDelete(e, j);
},
className: 'delete'
}, _react["default"].createElement(_baseui.Icon, {
type: "delete"
}))))));
};
for (var i = 0; i < len; i++) {
_loop();
}
return _react["default"].createElement("div", {
className: "pictureBook-list"
}, _this.state.readOnly ? "" : uploadControl, _react["default"].createElement("div", {
className: "pictureBook-list-title"
}, "\uFF08\u6700\u59271M\uFF0C\u652F\u6301\u683C\u5F0F\uFF1Ajpg\u3001bmp\u3001png\u3001jpeg\uFF0C700*700 \u4EE5\u4E0A\u7684\u56FE\u7247\u53EF\u4EE5\u5728\u5546\u54C1\u8BE6\u60C5\u9875\u4E3B\u56FE\u63D0\u4F9B\u56FE\u7247\u653E\u5927\u529F\u80FD\uFF09"), _react["default"].createElement("div", {
className: "list-row"
}, control));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getBigModalControl", function () {
var _this$state4 = _this.state,
fileList = _this$state4.fileList,
picIndex = _this$state4.picIndex;
var len = fileList.length - 1;
return _react["default"].createElement("div", {
className: "picture-big"
}, _react["default"].createElement("a", {
className: picIndex == 0 ? "pic-left pic-left-disabled" : "pic-left",
onClick: _this.onLeftClick
}, _react["default"].createElement(_baseui.Icon, {
type: "left"
})), fileList[picIndex] ? _react["default"].createElement("img", {
src: fileList[picIndex].address
}) : null, _react["default"].createElement("a", {
className: picIndex == len ? "pic-right pic-right-disabled" : "pic-right",
onClick: _this.onRightClick
}, _react["default"].createElement(_baseui.Icon, {
type: "right"
})));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getUploadControl", function (control) {
var action = '/upload?token=' + cb.rest.AppContext.token;
var accept = '';
if (_this.state.fileType == 'img') accept = 'image/jpeg,image/png,image/x-ms-bmp';
return _react["default"].createElement(_baseui.Upload, {
showUploadList: false,
action: action,
onChange: _this._fielUploadOnChange,
multiple: true,
accept: accept,
beforeUpload: _this._beforeUpload
}, control);
});
if (props.cStyle) {
try {
config = JSON.parse(props.cStyle);
} catch (e) {}
}
_this.state = {
fileList: [],
fileType: props.fileType || 'img',
bill2ReferKeyFieldMap: props.bill2ReferKeyFieldMap || {},
readOnly: props.readOnly,
percent: 0,
showModal: false,
picIndex: 0
};
_this.DocumentServerAddress = 'https://oivs4lxfc.bkt.clouddn.com';
_this.uploading = false;
var proxy = cb.rest.DynamicProxy.create({
getFileServerUrl: {
url: '/pub/fileupload/getFileServerUrl',
method: 'GET',
options: {
token: true
}
}
});
proxy.getFileServerUrl({}, function (err, result) {
if (!err) this.DocumentServerAddress = result;
}, (0, _assertThisInitialized2["default"])(_this));
return _this;
}
(0, _createClass2["default"])(PictureBook, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (nextProps.model) {
if (!this.props.model) {
nextProps.model.addListener(this);
this.setValue(nextProps.model.getValue());
} else {
return;
}
} else {
var bill2ReferKeyFieldMap = nextProps.bill2ReferKeyFieldMap || this.state.bill2ReferKeyFieldMap;
var fileList = [];
if (this.props.model) {
this.props.model.removeListener(this);
if (nextProps.dataSource) fileList = this.transferBill2Refer(nextProps.dataSource, bill2ReferKeyFieldMap);
this.setState({
fileList: fileList,
bill2ReferKeyFieldMap: bill2ReferKeyFieldMap
});
} else {
if (nextProps.dataSource) fileList = this.transferBill2Refer(nextProps.dataSource, bill2ReferKeyFieldMap);
this.setState({
fileList: fileList,
bill2ReferKeyFieldMap: bill2ReferKeyFieldMap,
readOnly: nextProps.readOnly
});
}
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.model) this.props.model.addListener(this);else {
var _this$props = this.props,
dataSource = _this$props.dataSource,
bill2ReferKeyFieldMap = _this$props.bill2ReferKeyFieldMap,
readOnly = _this$props.readOnly;
if (dataSource && bill2ReferKeyFieldMap) {
var fileList = this.transferBill2Refer(dataSource, bill2ReferKeyFieldMap);
this.setState({
fileList: fileList,
bill2ReferKeyFieldMap: bill2ReferKeyFieldMap,
readOnly: readOnly
});
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.props.model) this.props.model.removeListener(this);
}
}, {
key: "setListenerState",
value: function setListenerState(params, propertyName) {
var showValue = params.showValue;
if (showValue && showValue.length > 0) {
params.fileList = this.transferBill2Refer(showValue, params.bill2ReferKeyFieldMap);
}
this.setState(params);
}
}, {
key: "setValue",
value: function setValue(value) {
var fileList = this.transferBill2Refer(value, this.state.bill2ReferKeyFieldMap);
this.setState({
fileList: fileList
});
}
}, {
key: "render",
value: function render() {
var control = this._getControl();
var buttonControl = _react["default"].createElement(_baseui.Button, {
key: "upload",
onClick: this.handleModify
}, _react["default"].createElement(_SvgIcon["default"], {
className: "plus-copy",
type: "export"
}), "\u4E0A\u4F20\u56FE\u7247");
var uploadControl = this.getUploadControl(buttonControl);
var modalControl = this.getModalControl(uploadControl);
var bigModalControl = this.getBigModalControl();
var title = _react["default"].createElement("div", {
className: "model-header"
}, _react["default"].createElement("div", {
className: "modelTitle"
}, "\u56FE\u518C"));
return _react["default"].createElement("div", {
className: "upload-picture-book clearfix"
}, control, _react["default"].createElement(_baseui.Modal, {
title: title,
width: 750,
visible: this.state.showModal,
className: "picture-book-modal",
onOk: this.onOk,
onCancel: this.onCancel,
okText: "\u786E\u8BA4",
cancelText: "\u53D6\u6D88",
maskClosable: false
}, modalControl), _react["default"].createElement(_baseui.Modal, {
width: 600,
visible: this.state.showDetailModal,
className: "picture-big-modal",
footer: null,
maskClosable: false,
onCancel: this.onBigCancel
}, bigModalControl));
}
}]);
return PictureBook;
}(_react["default"].Component);
exports["default"] = PictureBook;
//# sourceMappingURL=PictureBook.js.map