oadp-material
Version:
oadp-material
638 lines (636 loc) • 29.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.OadpEntityTable = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _pagination = _interopRequireDefault(require("@alifd/next/lib/pagination"));
var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var React = _interopRequireWildcard(require("react"));
require("./index.scss");
var _EmptyBlock = _interopRequireDefault(require("./EmptyBlock"));
var _oadpCommon = require("oadp-common");
var _oadpTableColumn = _interopRequireDefault(require("../oadp-table-column"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var OadpEntityTable = exports.OadpEntityTable = /*#__PURE__*/function (_React$Component) {
function OadpEntityTable(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.topBoxRef = /*#__PURE__*/React.createRef();
_this.paginationRef = /*#__PURE__*/React.createRef();
_this.updateTableMaxBodyHeight = function () {
// console.log('updateTableMaxBodyHeight', this.topBoxRef, this.paginationRef);
if (_this.topBoxRef.current && _this.paginationRef.current) {
var topBoxHeight = _this.topBoxRef.current.clientHeight;
var paginationHeight = _this.paginationRef.current.clientHeight;
paginationHeight = paginationHeight < 50 ? 50 : paginationHeight;
// console.log('updateTableMaxBodyHeight topBoxHeight ', topBoxHeight, paginationHeight);
var tableMaxBodyHeight = window.innerHeight - topBoxHeight - paginationHeight - 50 - 40;
var tableMaxHeight = window.innerHeight - topBoxHeight - paginationHeight - 50;
// console.log('updateTableMaxBodyHeight tableMaxBodyHeight ', tableMaxBodyHeight);
if (_this.state.tableMaxBodyHeight !== tableMaxBodyHeight) {
// console.log('updateTableMaxBodyHeight tableMaxBodyHeight ', tableMaxBodyHeight);
_this.setState({
tableMaxBodyHeight: tableMaxBodyHeight,
tableMaxHeight: tableMaxHeight
});
}
}
};
_this.handleRowSelectionUpdate = function () {
var _this$props = _this.props,
rowSelectionMode = _this$props.rowSelectionMode,
__designMode = _this$props.__designMode;
console.log('handleRowSelectionUpdate ', rowSelectionMode);
try {
if (rowSelectionMode !== 'disabled') {
_this.setState({
rowSelection: {
// 保持与componentDidMount相同的初始化逻辑
onChange: _this.rowSelectionOnChange,
onSelect: function onSelect(selected, record, records) {
console.log('onSelect', selected, record, records);
},
onSelectAll: function onSelectAll(selected, records) {
console.log('onSelectAll', selected, records);
},
selectedRowKeys: [],
mode: rowSelectionMode,
columnProps: function columnProps() {
return {
width: 40,
align: 'center',
alignHeader: 'center',
lock: __designMode === 'design' ? false : 'left'
};
},
getProps: function getProps(record) {
return {};
}
}
});
} else {
_this.setState({
rowSelection: undefined
});
}
} catch (error) {
console.log('handleRowSelectionUpdate error ', error);
}
};
_this.handleRefreshTableDataSourceEvent = function (payload) {
console.log("OadpEntityTable handleRefreshTableDataSourceEvent:", payload, _this.props);
if (payload.tableComponentRefId === _this.props.__id) {
_this.initDataSource(payload);
}
};
_this.handleRefreshTableColumnEvent = function (payload) {
console.log("OadpEntityTable handleRefreshTableColumnEvent: ", payload, _this.props);
if (payload.tableComponentRefId === _this.props.__id && payload && payload.showColumnList) {
// 遍历 transferTargetValue，创建新的children数据
var children = _this.props.children;
var attributeDataSource = _this.state.attributeDataSource;
var newChildren = [];
payload.showColumnList.forEach(function (showColumn) {
console.log('OadpEntityTable handleRefreshTableColumnEvent item', showColumn, children);
var findOldChild = children.find(function (child) {
return child.props.dataIndex === showColumn;
});
console.log('OadpEntityTable handleRefreshTableColumnEvent: findOldChild', findOldChild);
if (findOldChild) {
newChildren.push(findOldChild);
} else {
// 处理 transferTargetItem 中包含 . 的情况
var logicalName = showColumn.includes('.') ? showColumn.split('.')[0] : showColumn;
var findAttribute = attributeDataSource.find(function (attribute) {
return attribute.logicalName === logicalName;
});
console.log('OadpEntityTable handleRefreshTableColumnEvent: ', attributeDataSource, findAttribute);
if (findAttribute) {
var dataIndex = findAttribute.logicalName;
if (findAttribute.attributeType.code === 'REFER') {
dataIndex = findAttribute.logicalName + '.name';
}
newChildren.push( /*#__PURE__*/React.createElement(_oadpTableColumn["default"], {
key: findAttribute.logicalName,
dataIndex: dataIndex,
title: findAttribute.name,
width: 200,
align: 'center'
}));
}
}
console.log('OadpEntityTable handleRefreshTableColumnEvent: newChildren', newChildren);
});
// 更新 state 中的 dynamicChildren
if (newChildren) {
var attributeShowList = [];
newChildren.forEach(function (child) {
attributeShowList.push(child.props.dataIndex);
});
_this.setState({
dynamicChildren: newChildren,
attributeShowDataSource: attributeShowList
});
}
}
};
_this.handleResize = function () {
_this.updateTableMaxBodyHeight();
};
// 递归函数来处理 filterRule
_this.handleFilterRuleToCondition = function (filterCondition, field) {
console.log('handleFilterRuleToCondition begin with filterCondition', filterCondition, field);
if (!filterCondition) return;
var newFilterCondition = (0, _extends2["default"])({}, filterCondition);
if (filterCondition.operator === 'or' || filterCondition.operator === 'and') {
newFilterCondition.value = filterCondition.value.map(function (item) {
return _this.handleFilterRuleToCondition(item, field);
});
} else {
if (filterCondition.valueType === 'ATTRIBUTE') {
var attributeValueLogicalName = filterCondition.value;
newFilterCondition.value = field.getValue(attributeValueLogicalName);
}
}
console.log('handleFilterRuleToCondition end with newFilterCondition', newFilterCondition);
return newFilterCondition;
};
_this.initDataSource = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(payload) {
var _this$props2, entity, filterRule, entityWithRefer, condition, response, entityTableDataSource, total;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
console.log('initDataSource', _this.props, payload, _this.state);
_this$props2 = _this.props, entity = _this$props2.entity, filterRule = _this$props2.filterRule;
if (entity) {
_context.next = 5;
break;
}
console.log('OadpEntityTable initDataSource entity is empty');
return _context.abrupt("return");
case 5:
if (_this.state.needInitDataSource) {
_context.next = 8;
break;
}
console.log('OadpEntityTable initDataSource needInitDataSource is false');
return _context.abrupt("return");
case 8:
_context.next = 10;
return _oadpCommon.entityMetadataUtil.asyncSelectEntityWithReferById(entity);
case 10:
entityWithRefer = _context.sent;
console.log('OadpEntityTable initDataSource entityWithRefer', entityWithRefer);
if (entityWithRefer) {
_context.next = 15;
break;
}
console.log('OadpEntityTable initDataSource entityWithRefer is empty');
return _context.abrupt("return");
case 15:
_context.prev = 15;
condition = null;
if (filterRule) {
condition = _this.handleFilterRuleToCondition(filterRule, entity);
}
if (payload && payload.pageNum && payload.pageNum !== _this.state.pageNum) {
_this.setState({
pageNum: payload.pageNum
});
}
if (payload && payload.pageSize && payload.pageSize !== _this.state.pageSize) {
_this.setState({
pageSize: payload.pageSize
});
}
if (payload && payload.readFastCondition) {
if (condition) {
condition = {
operator: 'and',
value: [payload.readFastCondition, condition]
};
} else {
condition = payload.readFastCondition;
console.log('OadpEntityTable initDataSource condition', condition, payload.readFastCondition);
}
console.log('OadpEntityTable initDataSource condition', condition);
}
_context.next = 23;
return _oadpCommon.entityDataUtil.asyncSelectPageListWithReferByCondition(entityWithRefer.logicalName, {
"model": entityWithRefer.logicalName,
condition: condition,
"orderBy": [{
"attribute": "updateAt",
"operator": "desc"
}],
"pageNum": _this.state.pageNum,
"pageSize": _this.state.pageSize
});
case 23:
response = _context.sent;
console.log('response', response);
entityTableDataSource = response.data.list;
total = response.data.total;
_this.setState({
entityTableDataSource: entityTableDataSource,
pageNum: response.data.pageNum,
pageSize: response.data.pageSize,
total: total
});
_context.next = 33;
break;
case 30:
_context.prev = 30;
_context.t0 = _context["catch"](15);
console.error('OadpEntityTable initDataSource error:', _context.t0);
case 33:
case "end":
return _context.stop();
}
}, _callee, null, [[15, 30]]);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}();
// 当前页码变更事件
_this.onPageNumChange = function (pageNum, e) {
console.log('onPageNumChange begin with pageNum:', pageNum);
_this.setState({
pageNum: pageNum
}, function () {
_this.initDataSource(); // 使用state更新后的值
});
console.log('onPageNumChange begin with pageNum:', _this.state.pageNum);
};
// 每页条数变更事件
_this.onPageSizeChange = function (pageSize) {
console.log('onPageSizeChange begin with pageSize:', pageSize);
_this.setState({
pageSize: pageSize
}, function () {
_this.initDataSource(); // 使用state更新后的值
});
console.log('onPageSizeChange end ');
};
_this.renderChildren = function () {
var _this$props3 = _this.props,
__designMode = _this$props3.__designMode,
children = _this$props3.children;
if (__designMode === 'design') {
console.log('renderChildren', children, __designMode);
return children;
} else {
console.log('renderChildren', _this.state.dynamicChildren, __designMode);
return _this.state.dynamicChildren;
}
};
_this.renderRowButtonBar = function (cellData, rowData, rowIndex) {
var rowButtonBar = _this.props.rowButtonBar;
// console.log('renderRowButtonBar', cellData, rowData, rowIndex);
return rowButtonBar ? /*#__PURE__*/React.createElement(_box["default"], {
style: {
width: '100%'
}
}, rowButtonBar()) : null;
};
_this.state = {
entityTableDataSource: [],
readFastCondition: null,
needInitDataSource: true,
pageNum: 1,
pageSize: props.pageSize | 20,
total: 0,
visibleTableSetting: false,
attributeDataSource: [],
attributeShowDataSource: [],
transferTargetValue: [],
transferTargetDataSource: [],
tableMaxBodyHeight: 500,
tableMaxHeight: 550,
rowSelection: {
onChange: _this.rowSelectionOnChange.bind(_this),
onSelect: function onSelect(selected, record, records) {
console.log('onSelect', selected, record, records);
},
onSelectAll: function onSelectAll(selected, records) {
console.log('onSelectAll', selected, records);
},
selectedRowKeys: [],
mode: _this.props.rowSelectionMode,
getProps: function getProps(record) {
return {
// disabled: record.id === 100306660941,
};
}
}
};
_this.rowSelectionOnChange = _this.rowSelectionOnChange.bind(_this);
return _this;
}
(0, _inheritsLoose2["default"])(OadpEntityTable, _React$Component);
var _proto = OadpEntityTable.prototype;
_proto.componentDidMount = /*#__PURE__*/function () {
var _componentDidMount = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
var _this$props4, entity, children, rowSelectionMode, preLockAttributeList, postLockAttributeList, __designMode, attributeData, preLockLogicalNameList, postLockLogicalNameList, processedChildren, attributeShowList;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_this$props4 = this.props, entity = _this$props4.entity, children = _this$props4.children, rowSelectionMode = _this$props4.rowSelectionMode, preLockAttributeList = _this$props4.preLockAttributeList, postLockAttributeList = _this$props4.postLockAttributeList, __designMode = _this$props4.__designMode;
console.log('OadpEntityTable componentDidMount this.props', this.props);
if (entity) {
_context2.next = 6;
break;
}
console.log('OadpEntityTable componentDidMount entity is undefined');
_context2.next = 12;
break;
case 6:
_context2.next = 8;
return _oadpCommon.entityMetadataUtil.asyncSelectAttributeListWithReferByEntityId(entity);
case 8:
attributeData = _context2.sent;
console.log('OadpEntityTable componentDidMount attributeData', attributeData);
attributeData.list.forEach(function (item) {
item.label = item.name;
item.value = item.logicalName;
if (item.attributeType.code === 'REFER') {
item.value = item.logicalName + '.name';
}
});
this.setState({
attributeDataSource: attributeData.list
});
case 12:
if (rowSelectionMode !== 'disabled') {
this.setState({
rowSelection: {
onChange: this.rowSelectionOnChange,
onSelect: function onSelect(selected, record, records) {
console.log('onSelect', selected, record, records);
},
onSelectAll: function onSelectAll(selected, records) {
console.log('onSelectAll', selected, records);
},
selectedRowKeys: [],
mode: rowSelectionMode,
columnProps: function columnProps() {
return {
width: 40,
align: 'center',
alignHeader: 'center'
// lock: 'left',
};
},
getProps: function getProps(record) {}
}
});
} else {
this.setState({
rowSelection: undefined
});
}
preLockLogicalNameList = [];
this.state.attributeDataSource.find(function (item) {
if (preLockAttributeList.includes(item.id)) {
var logicalName = item.logicalName;
if (item.attributeType.code === 'REFER') {
logicalName = item.logicalName + '.name';
}
preLockLogicalNameList.push(logicalName);
}
});
console.log('OadpEntityTable componentDidMount preLockAttributeList', this.state.attributeDataSource, preLockAttributeList);
postLockLogicalNameList = [];
this.state.attributeDataSource.find(function (item) {
if (postLockAttributeList.includes(item.id)) {
var logicalName = item.logicalName;
if (item.attributeType.code === 'REFER') {
logicalName = item.logicalName + '.name';
}
postLockLogicalNameList.push(logicalName);
}
});
console.log('OadpEntityTable componentDidMount postLockAttributeList', this.state.attributeDataSource, postLockAttributeList);
processedChildren = children.map(function (element) {
if (preLockLogicalNameList.length > 0) {
var _element$props;
if (preLockLogicalNameList.includes(element === null || element === void 0 ? void 0 : (_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.dataIndex)) {
element.props.lock = __designMode === 'design' ? false : 'left';
element.props.width = 200;
console.log('OadpEntityTable componentDidMount __designMode preLockLogicalNameList', __designMode, element.props.lock, element);
}
}
if (postLockLogicalNameList.length > 0) {
var _element$props2;
if (postLockLogicalNameList.includes(element === null || element === void 0 ? void 0 : (_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.dataIndex)) {
element.props.lock = __designMode === 'design' ? false : 'right';
element.props.width = 200;
console.log('OadpEntityTable componentDidMount __designMode', postLockLogicalNameList, __designMode, element.props.lock, element);
}
}
return element;
});
this.setState({
dynamicChildren: processedChildren || []
});
if (children && Array.isArray(children)) {
attributeShowList = [];
children.forEach(function (child) {
attributeShowList.push(child.props.dataIndex);
});
this.setState({
attributeShowDataSource: attributeShowList
});
}
console.log('OadpEntityTable componentDidMount attributeShowDataSource', this.state.attributeShowDataSource);
this.initDataSource();
this.updateTableMaxBodyHeight();
// 监听事件
window.addEventListener('resize', this.handleResize);
_oadpCommon.eventBusUtil.on("refreshOadpEntityTableDataSource", this.handleRefreshTableDataSourceEvent);
_oadpCommon.eventBusUtil.on("refreshOadpEntityTableColumn", this.handleRefreshTableColumnEvent);
case 28:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function componentDidMount() {
return _componentDidMount.apply(this, arguments);
}
return componentDidMount;
}();
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
if (prevProps.entity !== this.props.entity) {
this.initDataSource();
}
this.updateTableMaxBodyHeight();
// 增加props变化判断
if (prevProps.rowSelectionMode !== this.props.rowSelectionMode) {
this.handleRowSelectionUpdate();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
_oadpCommon.eventBusUtil.off("refreshOadpEntityTableDataSource", this.handleRefreshTableDataSourceEvent);
_oadpCommon.eventBusUtil.off("refreshOadpEntityTableColumn", this.handleRefreshTableColumnEvent);
window.removeEventListener('resize', this.handleResize);
};
_proto.rowSelectionOnChange = function rowSelectionOnChange(ids, records) {
var rowSelection = this.state.rowSelection;
rowSelection.selectedRowKeys = ids;
console.log('rowSelectionOnChange', ids, records);
this.setState({
rowSelection: rowSelection
});
};
_proto.render = function render() {
var _this2 = this,
_this$state$rowSelect,
_this$state$rowSelect2;
console.log('OadpEntityTable render', this.props);
console.log('OadpEntityTable render tableMaxBodyHeight ', this.state.tableMaxBodyHeight);
console.log('OadpEntityTable render entityTableDataSource', this.state.entityTableDataSource);
var _this$props5 = this.props,
enableTableQueryBar = _this$props5.enableTableQueryBar,
tableQueryBar = _this$props5.tableQueryBar,
enableTableButtonBar = _this$props5.enableTableButtonBar,
tableButtonBar = _this$props5.tableButtonBar,
enableRowButtonBar = _this$props5.enableRowButtonBar,
rowButtonBar = _this$props5.rowButtonBar,
tableWidth = _this$props5.tableWidth,
pageType = _this$props5.pageType,
pageButton = _this$props5.pageButton,
pageShowCount = _this$props5.pageShowCount,
pageSizeSelector = _this$props5.pageSizeSelector,
pageSizeList = _this$props5.pageSizeList,
children = _this$props5.children,
enableSerialNumber = _this$props5.enableSerialNumber,
__designMode = _this$props5.__designMode;
return /*#__PURE__*/React.createElement(_box["default"], null, /*#__PURE__*/React.createElement("div", {
ref: this.topBoxRef
}, /*#__PURE__*/React.createElement(_box["default"], {
direction: "column",
justify: "start",
align: "center"
}, enableTableQueryBar ? /*#__PURE__*/React.createElement(_box["default"], {
style: {
width: '100%',
marginBottom: 5
}
}, tableQueryBar ? /*#__PURE__*/React.createElement(_box["default"], {
style: {
width: '100%'
}
}, tableQueryBar()) : null) : null, enableTableButtonBar ? /*#__PURE__*/React.createElement(_box["default"], {
direction: "row",
justify: "end",
style: {
width: '100%',
marginBottom: 5
}
}, tableButtonBar ? /*#__PURE__*/React.createElement(_box["default"], {
style: {
width: '100%'
}
}, tableButtonBar()) : null) : null)), /*#__PURE__*/React.createElement("div", {
entity_table_data_div_id: this.props.__id,
table_select_row_ids: this.state && this.state.rowSelection && this.state.rowSelection.selectedRowKeys ? this.state.rowSelection.selectedRowKeys : '',
table_attribute_show_datasource: this.state && this.state.attributeShowDataSource ? this.state.attributeShowDataSource : '',
table_attribute_datasource: this.state && this.state.attributeDataSource ? this.state.attributeDataSource : ''
}), /*#__PURE__*/React.createElement("div", {
style: {
width: '100%',
height: this.state.tableMaxBodyHeight + 50,
border: '1px solid #DADBDF'
}
}, /*#__PURE__*/React.createElement(_table["default"], {
// tableLayout = 'fixed'
hasBorder: false,
fixedHeader: true,
emptyContent: /*#__PURE__*/React.createElement(_EmptyBlock["default"], null),
tableWidth: tableWidth,
dataSource: this.state.entityTableDataSource,
maxBodyHeight: this.state.tableMaxBodyHeight,
rowSelection: this.state.rowSelection
}, enableSerialNumber ? /*#__PURE__*/React.createElement(_oadpTableColumn["default"], {
title: "#"
// dataIndex="serialNumber"
,
width: 80,
align: 'center',
cell: function cell(rowData, rowIndex) {
return (_this2.state.pageNum - 1) * _this2.state.pageSize + rowIndex + 1;
},
lock: __designMode === 'design' ? false : 'left'
}) : null, __designMode === 'design' ? children : this.state.dynamicChildren, enableRowButtonBar ? /*#__PURE__*/React.createElement(_oadpTableColumn["default"], {
title: "\u64CD\u4F5C",
dataIndex: "_oadpEntityRowOperate",
width: 200,
align: 'center',
cell: this.renderRowButtonBar,
lock: __designMode === 'design' ? false : 'right'
}) : null)), /*#__PURE__*/React.createElement("div", {
ref: this.paginationRef
}, /*#__PURE__*/React.createElement(_box["default"], {
direction: "row",
justify: "end",
style: {
width: '100%',
height: '50'
}
}, /*#__PURE__*/React.createElement(_box["default"], {
direction: "row",
justify: "start",
align: "center",
style: {
width: '30%'
}
}, /*#__PURE__*/React.createElement(_box["default"], {
className: "next-pagination-size-selector-title",
style: {
color: '#999'
}
}, "\u5DF2\u9009 ", ((_this$state$rowSelect = this.state.rowSelection) === null || _this$state$rowSelect === void 0 ? void 0 : (_this$state$rowSelect2 = _this$state$rowSelect.selectedRowKeys) === null || _this$state$rowSelect2 === void 0 ? void 0 : _this$state$rowSelect2.length) || 0, " \u6761")), /*#__PURE__*/React.createElement(_box["default"], {
direction: "row",
justify: "end",
align: "center",
style: {
width: '70%'
}
}, /*#__PURE__*/React.createElement(_pagination["default"], {
size: "medium",
pageSizePosition: "end",
type: pageType,
shape: pageButton,
total: this.state.total,
totalRender: function totalRender(total) {
return /*#__PURE__*/React.createElement(_box["default"], {
className: "next-pagination-size-selector-title",
style: {
color: '#999'
}
}, "\u5171\u8BA1 ", total || 0, " \u6761");
},
pageShowCount: pageShowCount,
current: this.state.pageNum,
pageSize: this.state.pageSize,
pageSizeSelector: pageSizeSelector,
pageSizeList: pageSizeList,
style: {
marginTop: "5px",
marginBottom: "5px"
},
onChange: this.onPageNumChange,
onPageSizeChange: this.onPageSizeChange
})))));
};
return OadpEntityTable;
}(React.Component);
var _default = exports["default"] = OadpEntityTable;