@aliretail/react-materials-components
Version:
320 lines (271 loc) • 11.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FilterSelectorDialog = _interopRequireDefault(require("../FilterSelectorDialog"));
var _dataAdaptor = require("./config/data-adaptor");
var TableColumn = _table["default"].Column;
var StockTableEdit = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(StockTableEdit, _React$Component);
// 即便 ts 声明了 StockTableEditProps，这里还是要提供 IPropsTypes，用于 react 报错提示
function StockTableEdit(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.changeData = function (rows) {
var _this$props = _this.props,
isPreview = _this$props.isPreview,
value = _this$props.value,
filterDialogProps = _this$props.filterDialogProps;
if (isPreview) {
return;
}
var _ref = filterDialogProps || {},
primaryKey = _ref.primaryKey;
var rowKey = primaryKey || 'id';
var newData = (0, _dataAdaptor.resetData)({
dataSource: value,
rowKey: rowKey,
rows: rows
});
_this.props.onChange(newData);
_this.fileds.setValue(_dataAdaptor.formFieldKey, []);
newData.forEach(function (item, index) {
_this.fileds.addArrayValue(_dataAdaptor.formFieldKey, index, item);
});
};
_this.onFieldChange = function (name, val) {
var _this$props2 = _this.props,
value = _this$props2.value,
_this$props2$onChange = _this$props2.onChange,
onChange = _this$props2$onChange === void 0 ? function () {} : _this$props2$onChange,
_this$props2$onNumber = _this$props2.onNumberChange,
onNumberChange = _this$props2$onNumber === void 0 ? function () {} : _this$props2$onNumber;
var _ref2 = (0, _dataAdaptor.fieldChange)(name, val, value) || {},
data = _ref2.value,
record = _ref2.record,
dataIndex = _ref2.dataIndex;
onChange(data);
onNumberChange(val, dataIndex, record);
};
_this.fileds = new _field["default"]((0, _assertThisInitialized2["default"])(_this), {
parseName: true,
onChange: _this.onFieldChange
});
return _this;
}
var _proto = StockTableEdit.prototype;
_proto.componentDidCatch = function componentDidCatch(e) {
console.warn(e);
} // 校验方法
;
_proto.validate = function validate(callBack) {
var _this$props3 = this.props,
columns = _this$props3.columns,
value = _this$props3.value;
this.fileds.validate((0, _dataAdaptor.getNeedValidateField)(columns, value), callBack);
} // 外部检验，返回错误信息
;
_proto.setErrors = function setErrors(errs) {
var _this$fileds = this.fileds,
filedSetErrors = _this$fileds.setErrors,
getErrors = _this$fileds.getErrors;
var currentError = getErrors();
var needSetErrs = (0, _dataAdaptor.getFieldErrs)(errs, currentError);
filedSetErrors(needSetErrs);
} // 删除
;
_proto.deleteData = function deleteData(id) {
var _this$props4 = this.props,
isPreview = _this$props4.isPreview,
value = _this$props4.value;
if (isPreview) {
return;
}
this.fileds.deleteArrayValue(_dataAdaptor.formFieldKey, id);
var newData = Array.isArray(value) ? value.filter(function (item, index) {
return index !== id;
}) : [];
this.props.onChange(newData);
} // 库存信息修改
;
_proto.getButtonDom = function getButtonDom() {
var _this$props5 = this.props,
topRight = _this$props5.topRight,
buttonProps = _this$props5.buttonProps,
isPreview = _this$props5.isPreview,
filterDialogProps = _this$props5.filterDialogProps,
buttonText = _this$props5.buttonText,
tableData = _this$props5.value,
_this$props5$topRight = _this$props5.topRightLeftExtContent,
topRightLeftExtContent = _this$props5$topRight === void 0 ? null : _this$props5$topRight,
_this$props5$topRight2 = _this$props5.topRightRightExtContent,
topRightRightExtContent = _this$props5$topRight2 === void 0 ? null : _this$props5$topRight2;
if (isPreview) {
return '';
}
if (topRight !== undefined) {
return topRight;
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, topRightLeftExtContent, /*#__PURE__*/_react["default"].createElement(_FilterSelectorDialog["default"], (0, _extends2["default"])({
mode: "multiple",
hasTableBorder: false,
openType: "dialog",
dialogHeight: 616,
dialogWidth: 600,
loadType: "page",
columns: [],
filterConfigList: [],
onSelected: function onSelected() {}
}, filterDialogProps || {}, {
onChange: this.changeData,
selectedRowList: tableData || []
}), /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
// disabled={isPreview}
type: "secondary"
}, buttonProps || {}), buttonText)), topRightRightExtContent);
};
_proto.render = function render() {
var _this2 = this;
var _this$props6 = this.props,
title = _this$props6.title,
columns = _this$props6.columns,
isPreview = _this$props6.isPreview,
needDelete = _this$props6.needDelete,
className = _this$props6.className,
tableProps = _this$props6.tableProps,
tableData = _this$props6.value,
_this$props6$onNumber = _this$props6.onNumberInputBlur,
onNumberInputBlur = _this$props6$onNumber === void 0 ? function () {} : _this$props6$onNumber,
_this$props6$onNumber2 = _this$props6.onNumberInputFoucs,
onNumberInputFoucs = _this$props6$onNumber2 === void 0 ? function () {} : _this$props6$onNumber2,
numberStep = _this$props6.numberStep;
var hasColumns = Array.isArray(columns) && columns.length > 0;
var hasDelete = !isPreview && needDelete && hasColumns;
var _this$fileds2 = this.fileds,
init = _this$fileds2.init,
getError = _this$fileds2.getError;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "aliretail-stock-table-edit" + (className ? " " + className : ''),
"data-name": "AliretailStockTableEdit"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "aliretail-stock-table-edit-head"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "table-edit-title"
}, title), /*#__PURE__*/_react["default"].createElement("div", {
className: "table-edit-extra"
}, this.getButtonDom())), /*#__PURE__*/_react["default"].createElement(_table["default"], (0, _extends2["default"])({
dataSource: tableData,
hasBorder: false
}, tableProps || {}), hasColumns ? columns.map(function (item) {
if (item === void 0) {
item = {};
}
var _item = item,
cell = _item.cell,
type = _item.type,
dataIndex = _item.dataIndex,
rules = _item.rules;
var newCell = cell;
if (typeof cell !== 'function' && type === 'inputNumber') {
newCell = function newCell(value, index, record) {
if (record === void 0) {
record = {};
}
if (isPreview) {
return value;
}
var fieldKey = _dataAdaptor.formFieldKey + "." + index + "." + dataIndex;
var errMessage = getError(fieldKey);
var step = Number(numberStep) || 1;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "edit-table-number" + (errMessage ? ' edit-table-number-error' : '')
}, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], (0, _extends2["default"])({
type: "inline"
}, init(fieldKey, {
rules: rules
}), {
min: 0,
step: step,
value: value,
onBlur: function onBlur() {
onNumberInputBlur(value, dataIndex, record);
},
onFocus: function onFocus() {
onNumberInputFoucs(value, dataIndex, record);
}
})), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("span", {
className: "edit-table-error"
}, errMessage));
};
}
if (newCell) {
return /*#__PURE__*/_react["default"].createElement(TableColumn, (0, _extends2["default"])({}, (0, _extends2["default"])({}, item, {
cell: newCell,
type: undefined,
rules: undefined
}), {
key: dataIndex
}));
}
return /*#__PURE__*/_react["default"].createElement(TableColumn, (0, _extends2["default"])({}, item, {
key: dataIndex,
type: undefined,
rules: undefined
}));
}) : null, hasDelete ? /*#__PURE__*/_react["default"].createElement(TableColumn, {
title: "\u64CD\u4F5C",
align: "right",
cell: function cell(value, index) {
return /*#__PURE__*/_react["default"].createElement("span", {
onClick: function onClick() {
return _this2.deleteData(index);
},
className: "table-edit-delete" + (isPreview ? ' table-edit-delete-disabled' : '')
}, "\u5220\u9664");
},
key: "delete"
}) : null));
};
return StockTableEdit;
}(_react["default"].Component);
StockTableEdit.propTypes = {
title: _propTypes["default"].string,
columns: _propTypes["default"].array,
topRight: _propTypes["default"].any,
buttonProps: _propTypes["default"].any,
className: _propTypes["default"].string,
isPreview: _propTypes["default"].bool,
filterDialogProps: _propTypes["default"].any,
needDelete: _propTypes["default"].bool,
onChange: _propTypes["default"].any,
tableProps: _propTypes["default"].any,
value: _propTypes["default"].array,
buttonText: _propTypes["default"].string,
paginationClassName: _propTypes["default"].string,
pageSizeList: _propTypes["default"].array,
status: _propTypes["default"].string
};
StockTableEdit.defaultProps = {
title: '明细信息',
needDelete: true,
isPreview: false,
onChange: function onChange() {},
tableProps: {},
buttonText: '添加货品',
pageSizeList: [20, 50, 100],
onNumberChange: function onNumberChange() {},
onNumberInputBlur: function onNumberInputBlur() {},
onNumberInputFoucs: function onNumberInputFoucs() {},
numberStep: 1
};
var _default = StockTableEdit;
exports["default"] = _default;