@wufengteam/inputs
Version:
平台提供的右侧属性编辑器，需要在主工程中注册
452 lines • 20.6 kB
JavaScript
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
import React, { useEffect, useState } from 'react';
import { Modal, Select, Button, Form, Input, Space, TreeSelect } from 'antd';
import { getNoRiinRep, getRespondData } from './util';
// import { SERVICE_KEY } from '../ApiObject/constant';
import { cssPrefixCls } from '../utils';
import "./index.css";
var ObjectFormItem = function ObjectFormItem(_ref) {
var key1 = _ref.key1,
value = _ref.value,
options = _ref.options,
_onChange = _ref.onChange,
root = _ref.root,
n = _ref.n,
_ref$usedComponents = _ref.usedComponents,
usedComponents = _ref$usedComponents === void 0 ? [] : _ref$usedComponents;
return /*#__PURE__*/React.createElement(Space, {
key: key1,
align: "baseline",
size: "middle"
}, !!n && /*#__PURE__*/React.createElement("div", {
style: {
width: "".concat(10 * n, "px")
}
}), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Input, {
style: {
width: "".concat(n ? 210 - 10 * n - 16 : 210, "px")
},
disabled: true,
value: key1
})), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Select, {
style: {
width: '227px'
},
value: value,
onChange: function onChange(newValue) {
_onChange === null || _onChange === void 0 ? void 0 : _onChange({
key1: "".concat(root, ".").concat(key1),
value: newValue,
root: root,
n: n
});
},
allowClear: true
}, options.filter(function (option) {
return option.attrCode === value || !usedComponents.includes(option.attrCode);
}).map(function (item) {
return /*#__PURE__*/React.createElement(Select.Option, {
value: item.attrCode,
key: item.attrCode
}, item.attrName);
}))));
};
var ObjectForm = function ObjectForm(_ref2) {
var options = _ref2.options,
data = _ref2.data,
onChange = _ref2.onChange,
root = _ref2.root,
n = _ref2.n,
values = _ref2.values,
_ref2$isArray = _ref2.isArray,
isArray = _ref2$isArray === void 0 ? false : _ref2$isArray,
_ref2$usedComponents = _ref2.usedComponents,
usedComponents = _ref2$usedComponents === void 0 ? [] : _ref2$usedComponents;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Space, {
style: {
width: '454px',
color: 'black',
backgroundColor: '#f5f5f5',
borderColor: '#d9d9d9',
boxShadow: 'none',
cursor: 'not-allowed',
opacity: 1,
marginBottom: '12px',
padding: '4px 11px'
}
}, !!n && /*#__PURE__*/React.createElement("div", {
style: {
width: "".concat(10 * n, "px")
}
}), /*#__PURE__*/React.createElement("div", null, "- ", root, isArray ? '(数组)' : '', ":")), data && Object.keys(data).map(function (key) {
if (!data[key] || _typeof(data[key]) !== 'object') {
return /*#__PURE__*/React.createElement(ObjectFormItem, {
key1: key,
options: options,
usedComponents: usedComponents,
value: (values === null || values === void 0 ? void 0 : values["".concat(root, ".").concat(key)]) || '',
onChange: onChange,
root: root,
n: n
});
}
if (Array.isArray(data[key])) {
// 数组绑定子表，暂不支持
return null;
// return (
// <ObjectForm
// options={options}
// data={data?.[key]?.[0]}
// onChange={onChange}
// isArray
// root={`${root}.${key}`}
// n={n + 1}
// values={values}
// />
// );
}
return /*#__PURE__*/React.createElement(ObjectForm, {
options: options,
usedComponents: usedComponents,
data: data[key],
onChange: onChange,
root: "".concat(root, ".").concat(key),
n: n + 1,
values: values
});
}));
};
var RespondModal = function RespondModal(_ref3) {
var apiObject = _ref3.apiObject,
apiParams = _ref3.apiParams,
value = _ref3.value,
onChange = _ref3.onChange,
DSLCore = _ref3.DSLCore,
respond = _ref3.respond,
busiServiceId = _ref3.busiServiceId,
subFormFields = _ref3.subFormFields;
var _a, _b, _c, _d;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = useState(undefined),
_useState4 = _slicedToArray(_useState3, 2),
root = _useState4[0],
setRoot = _useState4[1];
var _useState5 = useState(),
_useState6 = _slicedToArray(_useState5, 2),
currentValue = _useState6[0],
setCurrentValue = _useState6[1];
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
treeData = _useState8[0],
setTreeData = _useState8[1];
var onRootChange = function onRootChange(newValue) {
var _a;
setRoot(newValue);
onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, value), {
root: newValue,
respond: {},
rootIsArray: (_a = newValue === null || newValue === void 0 ? void 0 : newValue.label) === null || _a === void 0 ? void 0 : _a.includes('数组')
}));
setUsedComponents([]);
};
// 本地表单的字段列表
var _useState9 = useState([]),
_useState10 = _slicedToArray(_useState9, 2),
localFieldList = _useState10[0],
setLocalFieldList = _useState10[1];
// 已用的组件
var _useState11 = useState([]),
_useState12 = _slicedToArray(_useState11, 2),
usedComponents = _useState12[0],
setUsedComponents = _useState12[1];
var _ref4 = ((_a = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _a === void 0 ? void 0 : _a.props) || {},
apiRespond = _ref4.apiRespond;
useEffect(function () {
if (busiServiceId !== (apiRespond === null || apiRespond === void 0 ? void 0 : apiRespond.busiServiceId)) {
onChange === null || onChange === void 0 ? void 0 : onChange({
busiServiceId: busiServiceId,
respond: null
});
setUsedComponents([]);
setRoot(undefined);
} else if (apiRespond === null || apiRespond === void 0 ? void 0 : apiRespond.root) {
setRoot(apiRespond === null || apiRespond === void 0 ? void 0 : apiRespond.root);
}
// 初始值 value 有异常
}, [apiRespond, busiServiceId]);
useEffect(function () {
setCurrentValue(value);
}, [value]);
useEffect(function () {
// eslint-disable-next-line @typescript-eslint/no-shadow
var getTreeNode = function getTreeNode(data, parent) {
var tree = [];
if (!data) return tree;
// eslint-disable-next-line array-callback-return
Object.keys(data).map(function (i) {
if (Array.isArray(data[i])) {
tree.push({
value: "".concat(parent ? "".concat(parent, ".") : '').concat(i),
title: "".concat(i, " (\u6570\u7EC4)")
});
} else if (data[i] && _typeof(data[i]) === 'object') {
tree.push({
value: "".concat(parent ? "".concat(parent, ".") : '').concat(i),
title: "".concat(i, " (\u5BF9\u8C61)"),
children: getTreeNode(data[i], "".concat(parent ? "".concat(parent, ".") : '').concat(i))
});
}
// else {
// tree.push({ title: `${i} (字符串)`, value: `${parent ? `${parent}.` : ''}${i}` });
// }
});
return tree;
};
// 仅适配sql 中 根节点返回为数组的情况。
setTreeData([{
value: '',
title: "".concat(apiObject === null || apiObject === void 0 ? void 0 : apiObject.scriptResultType) === '3' ? '根节点（数组）' : '根节点',
children: getTreeNode(respond)
}]);
}, [respond]);
useEffect(function () {
if (visible) {
setLocalFieldList(function () {
// 1、对于输入参数不支持：附件/图片/视频/表格/签名/关联表单/数据联动/附件下载；
// 2、对于输出参数不支持：附件/图片/视频/签名/关联表单/数据联动/附件下载；
var fillterList = ['Upload', 'Image', 'Video', 'EditableTable', 'Autograph', 'BindTable', 'DataLinkage', 'Download', 'Attachments', 'Api', 'ImgUpload', 'StdUpload', 'VideoUpload', 'SubForm', 'ImageShow'];
var components = subFormFields || [];
var filterList = components.filter(function (item) {
return !fillterList.includes(item === null || item === void 0 ? void 0 : item.compName);
});
var list = filterList.map(function (item) {
var _a, _b;
var compType = item === null || item === void 0 ? void 0 : item.compName;
var attrCode = (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.fieldName;
var attrName = (_b = item === null || item === void 0 ? void 0 : item.props) === null || _b === void 0 ? void 0 : _b.name;
return {
compType: compType,
attrCode: attrCode,
attrName: attrName
};
});
// 过滤输入参数选择的组件
var paramsComponents = [];
if (apiParams && (apiParams === null || apiParams === void 0 ? void 0 : apiParams.params)) {
var bean = apiParams === null || apiParams === void 0 ? void 0 : apiParams.params;
Object.keys(bean).forEach(function (key) {
if (bean[key] && Array.isArray(bean[key])) {
bean[key].forEach(function (item1) {
var _a;
if ((item1 === null || item1 === void 0 ? void 0 : item1.dataValue) && item1.dataType === '2') {
paramsComponents.push(item1 === null || item1 === void 0 ? void 0 : item1.dataValue);
}
if ((item1 === null || item1 === void 0 ? void 0 : item1.children) && Array.isArray(item1.children)) {
(_a = item1.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
if ((child === null || child === void 0 ? void 0 : child.dataValue) && child.dataType === '2') {
paramsComponents.push(child === null || child === void 0 ? void 0 : child.dataValue);
}
});
}
});
}
});
}
var resultList = list.filter(function (item) {
return !paramsComponents.includes(item === null || item === void 0 ? void 0 : item.attrCode);
});
return resultList;
});
// 初始化 设置已经设置的组件
if (apiRespond && (apiRespond === null || apiRespond === void 0 ? void 0 : apiRespond.respond)) {
var usedComponentsTemp = [];
Object.keys(apiRespond === null || apiRespond === void 0 ? void 0 : apiRespond.respond).forEach(function (item) {
usedComponentsTemp.push(apiRespond === null || apiRespond === void 0 ? void 0 : apiRespond.respond[item]);
});
setUsedComponents(usedComponentsTemp);
}
}
}, [visible, subFormFields]);
var keys = [];
var getDataKeys = function getDataKeys(data) {
Object.keys(data).forEach(function (key) {
if (_typeof(data[key]) === 'object') {
getDataKeys(data[key]);
} else {
keys.push(key);
}
});
return keys;
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
disabled: !!(apiObject && (apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceId) ? ((_b = Object.keys(respond)) === null || _b === void 0 ? void 0 : _b.length) > 0 ? value && value.respond ? false : false : true : true),
onClick: function onClick() {
setVisible(true);
},
style: {
fontSize: '12px',
lineHeight: 'unset',
height: 'unset',
padding: '0 15px'
}
}, apiObject && (apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceId) ? ((_c = Object.keys(respond)) === null || _c === void 0 ? void 0 : _c.length) > 0 ? value && (value === null || value === void 0 ? void 0 : value.respond) && Object.values(value === null || value === void 0 ? void 0 : value.respond).some(function (v) {
return v;
}) ? '已配置' : '请配置' : '无需配置' : '请先选择API'), visible && ( /*#__PURE__*/React.createElement(Modal, {
visible: visible,
title: "\u5B50\u8868\u5355\u9ED8\u8BA4\u503C\u8BBE\u7F6E",
key: busiServiceId,
wrapClassName: "".concat(cssPrefixCls, "-respond-modalWrap"),
bodyStyle: {
maxHeight: '500px',
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
paddingTop: '5px'
},
onOk: function onOk() {
var _a;
// 删除未在当前列表的出参数
var data = getRespondData(respond, root === null || root === void 0 ? void 0 : root.value);
if (currentValue && currentValue.respond && JSON.stringify(currentValue.respond) !== '{}') {
Object.keys(currentValue.respond).forEach(function (key) {
if (JSON.stringify(data) !== '{}') {
var arr = key.split('.');
var lastVal = arr.pop();
// 先清空数组数据
keys.length = 0;
var currentKeys = getDataKeys(data);
if (lastVal && !currentKeys.includes(lastVal)) {
delete currentValue.respond[key];
}
}
});
}
onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, currentValue), {
root: root,
rootIsArray: (_a = root === null || root === void 0 ? void 0 : root.label) === null || _a === void 0 ? void 0 : _a.includes('数组')
}));
setVisible(false);
},
onCancel: function onCancel() {
return setVisible(false);
},
width: 524
}, /*#__PURE__*/React.createElement("div", {
style: {
fontSize: '12px',
color: '#bbb6b6'
}
}, "\u6570\u636E\u5C06\u6309\u5982\u4E0B\u8BBE\u7F6E\u7684\u89C4\u5219\u8FDB\u884C\u6570\u636E\u586B\u5145\uFF0C\u5982\u679C\u8BBE\u7F6E\u591A\u4E2A\u503C\u586B\u5145\u5230\u5F53\u524D\u5B50\u8868\u5355\uFF0C\u540C\u4E00\u4E2A\u5B57\u6BB5\u65F6\uFF0C\u53EA\u751F\u6548\u6700\u540E \u4E00\u4E2A\u6570\u636E\u3002"), /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
alignItems: 'center',
marginTop: '8px',
marginBottom: '8px'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
fontSize: '14px',
width: '81px'
}
}, /*#__PURE__*/React.createElement("span", {
style: {
color: 'red',
marginRight: '5px'
}
}, "*"), "\u7ED1\u5B9A\u8282\u70B9\uFF1A"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TreeSelect, {
style: {
width: '390px'
},
value: root,
dropdownStyle: {
maxHeight: 400,
overflow: 'auto'
},
placeholder: "".concat(apiObject === null || apiObject === void 0 ? void 0 : apiObject.scriptResultType) === '3' ? '根节点（数组）' : '根节点',
allowClear: true,
labelInValue: true,
treeDefaultExpandAll: true,
onChange: onRootChange,
treeData: treeData
}))), /*#__PURE__*/React.createElement(Space, {
align: "baseline",
size: "middle",
style: {
marginBottom: '10px'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: '227px'
}
}, "Api\u8F93\u51FA\u53C2\u6570\u5B57\u7B26"), /*#__PURE__*/React.createElement("div", {
style: {
width: '210px'
}
}, "\u586B\u5145\u5B50\u8868\u5355\u5B57\u6BB5")), /*#__PURE__*/React.createElement(ObjectForm, {
options: localFieldList,
usedComponents: usedComponents,
data: getRespondData(respond, root === null || root === void 0 ? void 0 : root.value),
onChange: function onChange(_ref5) {
var key1 = _ref5.key1,
val = _ref5.value;
var newValue = Object.assign(Object.assign({}, value), {
respond: Object.assign(Object.assign({}, (currentValue === null || currentValue === void 0 ? void 0 : currentValue.respond) || {}), _defineProperty({}, key1, val))
});
setUsedComponents(Object.values(newValue.respond));
// onChange?.(newValue);
setCurrentValue(newValue);
},
values: currentValue === null || currentValue === void 0 ? void 0 : currentValue.respond,
root: "root",
isArray: (_d = root === null || root === void 0 ? void 0 : root.label) === null || _d === void 0 ? void 0 : _d.includes('数组'),
n: 0
}))));
};
var Test = function Test(_ref6) {
var name = _ref6.name,
rules = _ref6.rules,
label = _ref6.label,
DSLCore = _ref6.DSLCore;
var _a;
var _ref7 = ((_a = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _a === void 0 ? void 0 : _a.props) || {},
apiObject = _ref7.apiObject,
apiParams = _ref7.apiParams,
subFormFields = _ref7.subFormFields;
var respond = {};
if (apiObject === null || apiObject === void 0 ? void 0 : apiObject.responseJson) {
// if (apiObject?.tabKey === SERVICE_KEY.RHIN) {
// respond = apiObject?.responseJson;
// } else
if ((apiObject === null || apiObject === void 0 ? void 0 : apiObject.responseJson) && Array.isArray(apiObject === null || apiObject === void 0 ? void 0 : apiObject.responseJson) && (apiObject === null || apiObject === void 0 ? void 0 : apiObject.responseJson.length) > 0) {
apiObject === null || apiObject === void 0 ? void 0 : apiObject.responseJson.forEach(function (item) {
respond = getNoRiinRep(respond, item);
});
}
}
return /*#__PURE__*/React.createElement(Form.Item, {
label: label,
name: name,
rules: rules
}, /*#__PURE__*/React.createElement(RespondModal, {
apiObject: apiObject,
apiParams: apiParams,
DSLCore: DSLCore,
respond: respond,
busiServiceId: apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceId,
subFormFields: subFormFields
}));
};
export default Test;