UNPKG

@wufengteam/inputs

Version:

平台提供的右侧属性编辑器,需要在主工程中注册

496 lines 26.9 kB
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } import React, { useEffect, useMemo, useState } from 'react'; import { Empty, Popover, Table, Input, Select, message, Tooltip } from 'antd'; import { PlusCircleFilled, DeleteOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import "./index.css"; import { addKeysAndParentKeys, changeChildren, extractNodeValues, getAddParamsData, getTreeParamValue, isNodeInDataSource, mergeTrees } from '../../../utils'; import { ARRAY_LIST } from '../../../constant'; var CommonItem = function CommonItem(props) { var type = props.type, paramsList = props.paramsList, style = props.style, fields = props.fields, apiObject = props.apiObject, onValuesChange = props.onValuesChange, value = props.value; var _useState = useState(extractNodeValues(value) || []), _useState2 = _slicedToArray(_useState, 2), selectParams = _useState2[0], setSelectParams = _useState2[1]; var _useState3 = useState(value || []), _useState4 = _slicedToArray(_useState3, 2), dataSource = _useState4[0], setDataSource = _useState4[1]; var _useState5 = useState({}), _useState6 = _slicedToArray(_useState5, 2), curApi = _useState6[0], setCurApi = _useState6[1]; var updateValue = function updateValue(nodes, targetKey, newValue) { return nodes.map(function (node) { // 如果找到了目标节点,更新它的paramValue if (node.key === targetKey) { return Object.assign(Object.assign({}, node), { paramValue: newValue }); } // 如果节点有children,递归遍历children if (node.children && Array.isArray(node.children)) { node.children = updateValue(node.children, targetKey, newValue); } // 返回未修改的节点或已更新的节点(包括其子节点) return node; }); }; var findNode = function findNode(tree, keyToFind) { var keyProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'key'; // 使用 for 循环而不是 forEach,以便在找到匹配项时能够 break // eslint-disable-next-line no-plusplus for (var i = 0; i < tree.length; i++) { var node = tree[i]; // 检查当前节点的指定属性是否匹配 if (node[keyProperty] === keyToFind) { return node; // 找到匹配项后返回节点 } // 如果节点有子节点,则递归调用 if (node.children && Array.isArray(node.children)) { var foundNode = findNode(node.children, keyToFind, keyProperty); if (foundNode) { return foundNode; // 递归调用找到了匹配的节点,返回它 } } } // 如果没有找到匹配的节点,返回 null return null; }; // 删除节点的函数 var removeNodeByKey = function removeNodeByKey(tree, keyToRemove) { // 根据key删除节点的函数 return tree.map(function (node) { // 检查当前节点是否是要删除的节点 if (node.key === keyToRemove) { return null; // 返回null表示该节点应该被删除 } // 递归处理children属性 var newChildren; if (node.children && node.children.length > 0) { newChildren = removeNodeByKey(node.children, keyToRemove).filter(function (child) { return child !== null; }); // 如果没有子节点了(即全部被删除),则设置为空数组 if (newChildren.length === 0) { newChildren = []; } } if (ARRAY_LIST.includes(node === null || node === void 0 ? void 0 : node.attrType)) { // 返回一个新的节点对象,根据需要更新children属性 return Object.assign(Object.assign({}, node), { // 只有当newChildren不是空数组时才明确设置children属性(实际上,如果不设置,它默认为undefined) // 但由于我们希望保持children为空数组而不是undefined,所以我们总是设置它 children: newChildren || [] }); } return Object.assign({}, node); }).filter(function (node) { return node !== null; }); // 过滤掉被删除的节点 }; var columns = [{ title: '参数名称', width: '30%', dataIndex: 'paramName', key: 'paramName', render: function render(_, row) { return /*#__PURE__*/React.createElement("span", { className: "paramNameWrap" }, /*#__PURE__*/React.createElement("span", { className: "redWrap" }, " ", (row === null || row === void 0 ? void 0 : row.mustFlag) === 'T' ? '*' : '', " "), (row === null || row === void 0 ? void 0 : row.name) || (row === null || row === void 0 ? void 0 : row.paramName)); } }, { title: '填充类型', width: '30%', dataIndex: 'paramType', key: 'paramType', render: function render(_, row) { if (ARRAY_LIST.includes(row === null || row === void 0 ? void 0 : row.attrType) && "".concat(row === null || row === void 0 ? void 0 : row.parentKey) === '1') { return '导入模板'; } return (row === null || row === void 0 ? void 0 : row.paramType) === 'fixed' ? '固定值' : '导入模板字段'; } }, { title: '参数值', width: '30%', dataIndex: 'paramValue', key: 'paramValue', render: function render(_, row) { var _a, _b, _c, _d; if (ARRAY_LIST.includes(row === null || row === void 0 ? void 0 : row.attrType) && "".concat(row === null || row === void 0 ? void 0 : row.parentKey) === '1') { return '导入模板'; } if ((row === null || row === void 0 ? void 0 : row.paramType) === 'fixed') { return /*#__PURE__*/React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165", style: { width: '100%' }, value: row === null || row === void 0 ? void 0 : row.paramValue, onChange: function onChange(e) { setDataSource(updateValue(dataSource, row === null || row === void 0 ? void 0 : row.key, e.target.value)); } }); } var selectRange = fields; var parentKey = (_a = row === null || row === void 0 ? void 0 : row.parentKey) === null || _a === void 0 ? void 0 : _a.substring(0, row === null || row === void 0 ? void 0 : row.parentKey.lastIndexOf('-')); var parentRow = findNode(dataSource, (curApi === null || curApi === void 0 ? void 0 : curApi.tabKey) === '10' ? row === null || row === void 0 ? void 0 : row.parentKey : parentKey); if (parentRow && (parentRow === null || parentRow === void 0 ? void 0 : parentRow.children) && (parentRow === null || parentRow === void 0 ? void 0 : parentRow.paramValue)) { selectRange = ((_b = fields === null || fields === void 0 ? void 0 : fields.find(function (field) { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.props) === null || _a === void 0 ? void 0 : _a.fieldName) === (parentRow === null || parentRow === void 0 ? void 0 : parentRow.paramValue); })) === null || _b === void 0 ? void 0 : _b.components) || []; } return /*#__PURE__*/React.createElement(Select, { allowClear: true, showSearch: true, key: row === null || row === void 0 ? void 0 : row.key, onClear: function onClear() { // 清空回调 setSelectParams(selectParams === null || selectParams === void 0 ? void 0 : selectParams.filter(function (it) { return it.key !== (row === null || row === void 0 ? void 0 : row.code); })); setDataSource(updateValue(dataSource, row === null || row === void 0 ? void 0 : row.key, undefined)); }, filterOption: function filterOption(input, option) { return "".concat((option === null || option === void 0 ? void 0 : option.children) || '').toLowerCase().includes(input === null || input === void 0 ? void 0 : input.toLowerCase()) || "".concat((option === null || option === void 0 ? void 0 : option.value) || '').toLowerCase().includes(input === null || input === void 0 ? void 0 : input.toLowerCase()); }, placeholder: "\u8BF7\u9009\u62E9", style: { width: '100%' }, value: row === null || row === void 0 ? void 0 : row.paramValue, onChange: function onChange(e) { var _a; // 重置子表单的关联 if (ARRAY_LIST.includes(row === null || row === void 0 ? void 0 : row.attrType)) { (_a = row === null || row === void 0 ? void 0 : row.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { setDataSource(updateValue(dataSource, child === null || child === void 0 ? void 0 : child.key, undefined)); }); } // 防止清空的时候undifined if (e) { // 选中的节点 var selectParamsTemp = JSON.parse(JSON.stringify(selectParams)); var beanTemp = selectParamsTemp === null || selectParamsTemp === void 0 ? void 0 : selectParamsTemp.find(function (it) { return (it === null || it === void 0 ? void 0 : it.key) === (row === null || row === void 0 ? void 0 : row.code); }); if (beanTemp) { beanTemp.value = e; } else { selectParamsTemp.push({ key: row === null || row === void 0 ? void 0 : row.code, value: e }); } setSelectParams(selectParamsTemp); setDataSource(updateValue(dataSource, row === null || row === void 0 ? void 0 : row.key, e)); } } }, (_d = (_c = selectRange || []) === null || _c === void 0 ? void 0 : _c.filter(function (it) { var _a, _b; // 控制子表单和其他组件的可选范围 if (ARRAY_LIST.includes(row === null || row === void 0 ? void 0 : row.attrType)) { return (_a = it === null || it === void 0 ? void 0 : it.components) === null || _a === void 0 ? void 0 : _a.length; } return !((_b = it === null || it === void 0 ? void 0 : it.components) === null || _b === void 0 ? void 0 : _b.length); })) === null || _d === void 0 ? void 0 : _d.map(function (item) { var _a, _b, _c, _d; return /*#__PURE__*/React.createElement(Select.Option, { value: (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.fieldName, disabled: (_b = selectParams === null || selectParams === void 0 ? void 0 : selectParams // eslint-disable-next-line consistent-return .map(function (i) { if ((i === null || i === void 0 ? void 0 : i.key) !== (row === null || row === void 0 ? void 0 : row.code)) { return i === null || i === void 0 ? void 0 : i.value; } })) === null || _b === void 0 ? void 0 : _b.includes((_c = item === null || item === void 0 ? void 0 : item.props) === null || _c === void 0 ? void 0 : _c.fieldName) }, (_d = item === null || item === void 0 ? void 0 : item.props) === null || _d === void 0 ? void 0 : _d.name); })); } }, { title: '操作', key: 'handle', width: '10%', render: function render(_, row) { return (row === null || row === void 0 ? void 0 : row.mustFlag) !== 'T' && ( /*#__PURE__*/React.createElement(DeleteOutlined, { onClick: function onClick() { var _a, _b; var matchedItems = paramsList.filter(function (item) { return ARRAY_LIST.includes(item.attrType); }); if ((ARRAY_LIST === null || ARRAY_LIST === void 0 ? void 0 : ARRAY_LIST.includes(row === null || row === void 0 ? void 0 : row.attrType)) && (matchedItems === null || matchedItems === void 0 ? void 0 : matchedItems.length) === 1 && (row === null || row === void 0 ? void 0 : row.parentKey) === '1') { message.error('当前服务只有一个数组类型参数,不能删除'); return; } var newData = removeNodeByKey(dataSource, row === null || row === void 0 ? void 0 : row.key); setDataSource(newData); // 去除已选的组件 setSelectParams(selectParams === null || selectParams === void 0 ? void 0 : selectParams.filter(function (it) { return it.key !== (row === null || row === void 0 ? void 0 : row.code); })); if (((_a = row === null || row === void 0 ? void 0 : row.children) === null || _a === void 0 ? void 0 : _a.length) > 0) { var keyList = (_b = row === null || row === void 0 ? void 0 : row.children) === null || _b === void 0 ? void 0 : _b.map(function (it) { return it.code; }); setSelectParams(selectParams === null || selectParams === void 0 ? void 0 : selectParams.filter(function (it) { return !(keyList === null || keyList === void 0 ? void 0 : keyList.includes(it.key)); })); } } })); } }]; // 遍历树状数组并设置节点属性的函数 var setNodeProperties = function setNodeProperties(node) { var _a, _b; if (!(node === null || node === void 0 ? void 0 : node.paramName)) { node.paramName = (node === null || node === void 0 ? void 0 : node.name) || (node === null || node === void 0 ? void 0 : node.code); } if (!(node === null || node === void 0 ? void 0 : node.paramType) && "".concat(node === null || node === void 0 ? void 0 : node.parentKey) === '1') { // 非数组并且在第一层级,则设置为固定值 node.paramType = !ARRAY_LIST.includes(node.attrType) ? 'fixed' : 'association'; } if (!(node === null || node === void 0 ? void 0 : node.paramValue)) { node.paramValue = undefined; } // 如果有子节点,递归调用 if ((node === null || node === void 0 ? void 0 : node.children) && ((_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a.length) > 0) { (_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.forEach(function (childNode) { return setNodeProperties(childNode); }); } }; useEffect(function () { onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(type, dataSource); }, [JSON.stringify(dataSource)]); useEffect(function () { setCurApi(apiObject); }, [JSON.stringify(apiObject)]); useEffect(function () { if (paramsList && Array.isArray(paramsList) && !value) { var dataSourceTemp = []; paramsList.forEach(function (param) { setNodeProperties(param); if (type === 'body') { // 必填或者是第一个数组 if ((param === null || param === void 0 ? void 0 : param.mustFlag) === 'T' || ARRAY_LIST.includes(param === null || param === void 0 ? void 0 : param.attrType) && !(dataSourceTemp === null || dataSourceTemp === void 0 ? void 0 : dataSourceTemp.find(function (it) { return ARRAY_LIST.includes(it === null || it === void 0 ? void 0 : it.attrType); }))) { dataSourceTemp.push(param); } } if (type === 'header') { if ((param === null || param === void 0 ? void 0 : param.mustFlag) === 'T') { dataSourceTemp.push(param); } } }); setDataSource(dataSourceTemp); var selectParamsTemp = []; getTreeParamValue(selectParamsTemp, dataSourceTemp); setSelectParams(selectParamsTemp); } }, [JSON.stringify(paramsList)]); var renderCheckField = useMemo(function () { var hasArray = false; // eslint-disable-next-line consistent-return dataSource.forEach(function (item) { if (ARRAY_LIST.includes(item.attrType)) { hasArray = true; } if (hasArray) { return false; } }); var selectList = getAddParamsData(paramsList, dataSource); if ((selectList === null || selectList === void 0 ? void 0 : selectList.length) > 0) { selectList.forEach(function (select) { setNodeProperties(select); }); } return (selectList === null || selectList === void 0 ? void 0 : selectList.length) > 0 ? ( /*#__PURE__*/React.createElement("div", { className: "popWrap" }, selectList === null || selectList === void 0 ? void 0 : selectList.map(function (item) { var _a, _b; return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { className: "fieldItem", onClick: function onClick() { if (isNodeInDataSource(item, dataSource)) { // 在表格中,点击父级节点,则不进行任何操作 return; } if (hasArray && ARRAY_LIST.includes(item.attrType)) { message.error('参数中只能有一个数组类型的参数,可先删除其他参数,再进行添加该参数'); return; } var dataSourceTemp = JSON.parse(JSON.stringify(dataSource)); dataSourceTemp.push(item); setDataSource(dataSourceTemp); }, title: item === null || item === void 0 ? void 0 : item.paramName }, item === null || item === void 0 ? void 0 : item.paramName), ((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 && isNodeInDataSource(item, dataSource) && ((_b = item === null || item === void 0 ? void 0 : item.children) === null || _b === void 0 ? void 0 : _b.map(function (child) { return /*#__PURE__*/React.createElement("div", { className: "fieldItem", style: { marginLeft: '20px' }, onClick: function onClick() { // 对应子参数 var dataSourceTemp = JSON.parse(JSON.stringify(dataSource)); var parentNode = dataSourceTemp.find(function (it) { return (it === null || it === void 0 ? void 0 : it.key) === item.key; }); if (parentNode) { parentNode.children.push(child); } setDataSource(dataSourceTemp); }, title: child === null || child === void 0 ? void 0 : child.paramName }, child === null || child === void 0 ? void 0 : child.paramName); }))); }))) : ( /*#__PURE__*/React.createElement(Empty, { description: "\u6682\u65E0\u53EF\u6DFB\u52A0\u53C2\u6570" })); }, [JSON.stringify(paramsList), JSON.stringify(dataSource)]); var getTitle = function getTitle() { if (type === 'header') { return '请求头参数设置(header)'; } return (curApi === null || curApi === void 0 ? void 0 : curApi.tabKey) === '10' ? '请求体参数设置(body)' : '请求参数设置'; }; return /*#__PURE__*/React.createElement("div", { className: "commonItemWrap", style: style, key: type + (apiObject === null || apiObject === void 0 ? void 0 : apiObject.businessObjectId) }, /*#__PURE__*/React.createElement("div", { className: "commonTitleWrap" }, /*#__PURE__*/React.createElement("div", { className: "colorWrap" }), /*#__PURE__*/React.createElement("div", { className: "titleWrap" }, getTitle())), /*#__PURE__*/React.createElement("div", { className: "addAndTip" }, /*#__PURE__*/React.createElement(Popover, { overlayClassName: "checkFieldPopover", placement: "bottomLeft", title: "", content: renderCheckField, trigger: "click" }, /*#__PURE__*/React.createElement("div", { className: "addFieldWrap" }, /*#__PURE__*/React.createElement(PlusCircleFilled, null), "\u6DFB\u52A0\u53C2\u6570")), type === 'body' && ( /*#__PURE__*/React.createElement(Tooltip, { title: "\u6DFB\u52A0\u53C2\u6570\u8BF7\u5305\u542B\u4E00\u4E2A\u6570\u7EC4\u7C7B\u578B\u53C2\u6570\uFF0C\u7528\u4E8E\u63A5\u6536\u9700\u8981\u6821\u9A8C\u7684\u6279\u91CF\u6570\u636E\uFF0C\u8BF7\u786E\u4FDD\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5B57\u6BB5\u540C\u5BFC\u5165\u6A21\u677F\u5B57\u6BB5\u5B9E\u73B0\u4E00\u4E00\u5BF9\u5E94\u5173\u7CFB\u3002" }, /*#__PURE__*/React.createElement(QuestionCircleOutlined, { className: "tipWrap" })))), /*#__PURE__*/React.createElement(Table, { rowKey: "key", pagination: false, defaultExpandAllRows: true, expandable: { defaultExpandAllRows: true }, columns: columns, dataSource: JSON.parse(JSON.stringify(dataSource)) })); }; var InParams = function InParams(props) { var fields = props.fields, type = props.type, _onValuesChange = props.onValuesChange, apiObject = props.apiObject, value = props.value; var renderContentView = useMemo(function () { var _a, _b, _c; if ((apiObject === null || apiObject === void 0 ? void 0 : apiObject.tabKey) === '10') { var header = (_a = apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) === null || _a === void 0 ? void 0 : _a.find(function (it) { return (it === null || it === void 0 ? void 0 : it.code) === 'header'; }); var body = (_b = apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) === null || _b === void 0 ? void 0 : _b.find(function (it) { return (it === null || it === void 0 ? void 0 : it.code) === 'body'; }); changeChildren(header === null || header === void 0 ? void 0 : header.children); changeChildren(body === null || body === void 0 ? void 0 : body.children); if (ARRAY_LIST.includes(body === null || body === void 0 ? void 0 : body.attrType)) { body = addKeysAndParentKeys(body); } else { body.children = addKeysAndParentKeys(body === null || body === void 0 ? void 0 : body.children); } if (header && (header === null || header === void 0 ? void 0 : header.children)) { header.children = addKeysAndParentKeys(header === null || header === void 0 ? void 0 : header.children); } else { header.children = []; } // 外部服务 return /*#__PURE__*/React.createElement(React.Fragment, null, ((_c = header === null || header === void 0 ? void 0 : header.children) === null || _c === void 0 ? void 0 : _c.length) > 0 && ( /*#__PURE__*/React.createElement(CommonItem, { type: "header", value: value === null || value === void 0 ? void 0 : value.header, onValuesChange: function onValuesChange(t, e) { if (e && Array.isArray(e) && (e === null || e === void 0 ? void 0 : e.length) > 0) { mergeTrees(header === null || header === void 0 ? void 0 : header.children, e); } _onValuesChange(t, e); }, apiObject: apiObject, paramsList: header === null || header === void 0 ? void 0 : header.children })), /*#__PURE__*/React.createElement(CommonItem, { type: "body", value: value === null || value === void 0 ? void 0 : value.body, onValuesChange: function onValuesChange(t, e) { var _a; if (e && Array.isArray(e) && (e === null || e === void 0 ? void 0 : e.length) > 0) { if (ARRAY_LIST.includes(body === null || body === void 0 ? void 0 : body.attrType)) { var index = (_a = apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) === null || _a === void 0 ? void 0 : _a.findIndex(function (it) { return (it === null || it === void 0 ? void 0 : it.code) === 'body'; }); if (index !== -1) { apiObject.requestJson.splice(index, 1, body); // 替换数组中的对象 } } else { mergeTrees(body === null || body === void 0 ? void 0 : body.children, e); } } _onValuesChange(t, e); }, apiObject: apiObject, style: { marginTop: 16 }, paramsList: ARRAY_LIST.includes(body === null || body === void 0 ? void 0 : body.attrType) ? JSON.parse(JSON.stringify([body])) : JSON.parse(JSON.stringify(body === null || body === void 0 ? void 0 : body.children)), fields: fields })); } return /*#__PURE__*/React.createElement(CommonItem, { type: "body", value: value === null || value === void 0 ? void 0 : value.body, onValuesChange: function onValuesChange(t, e) { if (e && Array.isArray(e) && (e === null || e === void 0 ? void 0 : e.length) > 0) { mergeTrees(apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson, e); } _onValuesChange(t, e); }, apiObject: apiObject, paramsList: JSON.parse(JSON.stringify((apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) || '[]')), fields: fields }); }, [apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceId, JSON.stringify(apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson), value, fields]); return /*#__PURE__*/React.createElement("div", { key: type, className: "inParamsWrap" }, JSON.stringify(apiObject || '{}') !== '{}' && apiObject ? renderContentView : /*#__PURE__*/React.createElement(Empty, { description: "\u5982\u9700\u670D\u52A1\u6821\u9A8C\uFF0C\u8BF7\u5148\u9009\u62E9\u5BF9\u5E94\u670D\u52A1" })); }; export default InParams;