oadp-material
Version:
oadp-material
234 lines (229 loc) • 8.76 kB
JavaScript
import _Box from "@alifd/next/es/box";
import _Button from "@alifd/next/es/button";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["children", "name", "id", "entity", "tableComponentRefId", "defaultValue", "label", "style", "type", "size", "onClick", "queryAttributeList", "disabled", "__designMode"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect, useState } from 'react';
import "./index.scss";
import { entityMetadataUtil } from 'oadp-common';
import OadpAttributeSettingTransfer from "../common/oadp-attribute-setting-transfer";
import ConditionGroup from "../oadp-entity-button-read-condition/condition-group";
// oadp-filter 组件定义
// oadp-filter 组件实例
var OadpEntityButtonReadCondition = function OadpEntityButtonReadCondition(_ref) {
var children = _ref.children,
name = _ref.name,
id = _ref.id,
entity = _ref.entity,
tableComponentRefId = _ref.tableComponentRefId,
defaultValue = _ref.defaultValue,
label = _ref.label,
style = _ref.style,
type = _ref.type,
size = _ref.size,
onClick = _ref.onClick,
queryAttributeList = _ref.queryAttributeList,
disabled = _ref.disabled,
__designMode = _ref.__designMode,
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
// 使用 useState 管理 condition 的值
var _useState = useState(defaultValue || {
id: '0',
operator: 'and',
value: [{
id: String(Date.now() + 1),
attribute: '',
operator: 'equals',
valueType: 'MEMBER',
value: ''
}]
}),
condition = _useState[0],
setConditionValue = _useState[1];
var _React$useState = React.useState(queryAttributeList),
attributeShowDataSource = _React$useState[0],
setAttributeShowDataSource = _React$useState[1];
var _React$useState2 = React.useState([]),
attributeDataSource = _React$useState2[0],
setAttributeDataSource = _React$useState2[1];
var _React$useState3 = React.useState("and"),
operator = _React$useState3[0],
setOperator = _React$useState3[1];
// 初始化逻辑（类似类组件的 componentDidMount）
useEffect(function () {
var fetchAttributeData = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var attributeData;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
console.log('OadpEntityButtonReadCondition componentDidMount props', {
entity: entity,
tableComponentRefId: tableComponentRefId
});
if (entity) {
_context.next = 5;
break;
}
console.log('OadpEntityButtonReadCondition componentDidMount entity is undefined');
return _context.abrupt("return");
case 5:
_context.next = 7;
return entityMetadataUtil.asyncSelectAttributeListWithReferByEntityId(entity);
case 7:
attributeData = _context.sent;
attributeData.list.forEach(function (item) {
item.label = item.name || '';
item.value = item.id || '';
});
console.log('OadpEntityButtonReadCondition componentDidMount attributeData', attributeData.list);
setAttributeDataSource(attributeData.list);
_context.next = 16;
break;
case 13:
_context.prev = 13;
_context.t0 = _context["catch"](0);
console.error('OadpEntityButtonReadCondition componentDidMount Failed to fetch field options:', _context.t0);
case 16:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 13]]);
}));
return function fetchAttributeData() {
return _ref2.apply(this, arguments);
};
}();
fetchAttributeData();
}, [entity]);
// 处理 Button 的 onClick 事件
var handleButtonClick = function handleButtonClick() {
if (__designMode === 'design') {
console.log('design mode OadpEntityButtonReadCondition click');
return;
}
if (onClick) {
console.log('OadpEntityButtonReadCondition click condition', condition);
onClick(condition);
}
};
var handleAdd = function handleAdd(parentId, isGroup) {
var newItem = isGroup ? {
id: String(Date.now()),
operator: 'and',
value: [{
id: String(Date.now() + 1),
attribute: '',
operator: 'equals',
valueType: 'MEMBER',
value: ''
}, {
id: String(Date.now() + 2),
attribute: '',
operator: 'equals',
valueType: 'MEMBER'
}]
} : {
id: String(Date.now()),
attribute: '',
operator: 'equals',
valueType: 'MEMBER',
value: ''
};
console.log("handleAdd newItem", newItem);
var newData = addItemToParent(condition, parentId, newItem);
console.log("handleAdd newData", newData);
setConditionValue(newData);
};
var handleRemove = function handleRemove(id) {
var newData = removeItemById(condition, id);
setConditionValue(newData);
};
var handleChange = function handleChange(id, updates) {
console.log('handleChange with updates ', updates);
var newData = updateConditionById(condition, id, updates);
console.log('handleChange with newData ', newData);
setConditionValue(newData);
};
// 工具方法
var addItemToParent = function addItemToParent(filterCondition, parentId, newItem) {
if (filterCondition.id === parentId) {
return _extends({}, filterCondition, {
value: [].concat(filterCondition.value || [], [newItem])
});
}
if (filterCondition.value) {
return _extends({}, filterCondition, {
value: addItemToParent(filterCondition.value, parentId, newItem)
});
}
return filterCondition;
};
var removeItemById = function removeItemById(filterCondition, id) {
console.log('OadpEntityButtonReadCondition removeItemById ', filterCondition, id);
if (!filterCondition.value) {
return filterCondition;
}
// 确保 filterCondition.value 是一个数组
if (!Array.isArray(filterCondition.value)) {
return filterCondition;
}
console.log('OadpEntityButtonReadCondition removeItemById filterCondition.value ', filterCondition.value);
return _extends({}, filterCondition, {
value: filterCondition.value.reduce(function (acc, item) {
if (item.id === id) {
return acc;
}
if (item.value && Array.isArray(item.value)) {
return [].concat(acc, [_extends({}, item, {
value: removeItemById(item, id).value
})]);
}
return [].concat(acc, [item]);
}, [])
});
};
var updateConditionById = function updateConditionById(filterCondition, id, updates) {
console.log('updateConditionById with updates ', updates, filterCondition);
var newFilterCondition = _extends({}, filterCondition);
if (filterCondition.id === id) {
newFilterCondition = _extends({}, filterCondition, updates);
}
if (newFilterCondition.value && Array.isArray(newFilterCondition.value)) {
newFilterCondition.value = newFilterCondition.value.map(function (item) {
return updateConditionById(item, id, updates);
});
}
return newFilterCondition;
};
var handleDialogOk = function handleDialogOk() {
console.log('OadpEntityButtonReadCondition handleDialogOk');
};
return /*#__PURE__*/React.createElement(_Box, {
direction: "row",
justify: "start",
align: "center"
}, /*#__PURE__*/React.createElement(ConditionGroup, {
condition: condition,
attributeDataSource: attributeDataSource,
onAdd: handleAdd,
onRemove: handleRemove,
onChange: handleChange,
handleButtonClick: handleButtonClick
}), /*#__PURE__*/React.createElement(_Button, {
type: 'primary',
size: 'medium'
// style={ style || { width: '60%' }}
,
onClick: handleButtonClick
}, " \u6761\u4EF6\u67E5\u8BE2"), /*#__PURE__*/React.createElement(OadpAttributeSettingTransfer, {
attributeDataSource: attributeDataSource,
attributeShowDataSource: attributeShowDataSource,
onConfirm: handleDialogOk,
__designMode: __designMode
}));
};
export default OadpEntityButtonReadCondition;