@aliretail/react-materials-components
Version:
301 lines (266 loc) • 10.3 kB
JavaScript
import _NumberPicker from "@alifd/next/es/number-picker";
import _Button from "@alifd/next/es/button";
import _extends from "@babel/runtime/helpers/extends";
import _Field from "@alifd/next/es/field";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Table from "@alifd/next/es/table";
import React from 'react';
import PropTypes from 'prop-types';
import FilterSelectorDialog from "../FilterSelectorDialog";
import { resetData, getNeedValidateField, formFieldKey, getFieldErrs, fieldChange } from "./config/data-adaptor";
var TableColumn = _Table.Column;
var StockTableEdit = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(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 = resetData({
dataSource: value,
rowKey: rowKey,
rows: rows
});
_this.props.onChange(newData);
_this.fileds.setValue(formFieldKey, []);
newData.forEach(function (item, index) {
_this.fileds.addArrayValue(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 = fieldChange(name, val, value) || {},
data = _ref2.value,
record = _ref2.record,
dataIndex = _ref2.dataIndex;
onChange(data);
onNumberChange(val, dataIndex, record);
};
_this.fileds = new _Field(_assertThisInitialized(_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(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 = 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(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.createElement(React.Fragment, null, topRightLeftExtContent, /*#__PURE__*/React.createElement(FilterSelectorDialog, _extends({
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.createElement(_Button, _extends({
// 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.createElement("div", {
className: "aliretail-stock-table-edit" + (className ? " " + className : ''),
"data-name": "AliretailStockTableEdit"
}, /*#__PURE__*/React.createElement("div", {
className: "aliretail-stock-table-edit-head"
}, /*#__PURE__*/React.createElement("span", {
className: "table-edit-title"
}, title), /*#__PURE__*/React.createElement("div", {
className: "table-edit-extra"
}, this.getButtonDom())), /*#__PURE__*/React.createElement(_Table, _extends({
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 = formFieldKey + "." + index + "." + dataIndex;
var errMessage = getError(fieldKey);
var step = Number(numberStep) || 1;
return /*#__PURE__*/React.createElement("div", {
className: "edit-table-number" + (errMessage ? ' edit-table-number-error' : '')
}, /*#__PURE__*/React.createElement(_NumberPicker, _extends({
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.createElement("br", null), /*#__PURE__*/React.createElement("span", {
className: "edit-table-error"
}, errMessage));
};
}
if (newCell) {
return /*#__PURE__*/React.createElement(TableColumn, _extends({}, _extends({}, item, {
cell: newCell,
type: undefined,
rules: undefined
}), {
key: dataIndex
}));
}
return /*#__PURE__*/React.createElement(TableColumn, _extends({}, item, {
key: dataIndex,
type: undefined,
rules: undefined
}));
}) : null, hasDelete ? /*#__PURE__*/React.createElement(TableColumn, {
title: "\u64CD\u4F5C",
align: "right",
cell: function cell(value, index) {
return /*#__PURE__*/React.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.Component);
StockTableEdit.propTypes = {
title: PropTypes.string,
columns: PropTypes.array,
topRight: PropTypes.any,
buttonProps: PropTypes.any,
className: PropTypes.string,
isPreview: PropTypes.bool,
filterDialogProps: PropTypes.any,
needDelete: PropTypes.bool,
onChange: PropTypes.any,
tableProps: PropTypes.any,
value: PropTypes.array,
buttonText: PropTypes.string,
paginationClassName: PropTypes.string,
pageSizeList: PropTypes.array,
status: PropTypes.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
};
export default StockTableEdit;