@wufengteam/wform
Version:
@wufengteam/wform
487 lines • 24.7 kB
JavaScript
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; }
/* eslint-disable no-console */
import React, { useState } from 'react';
import { Button, message, Select, Spin } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Show } from '@alita/flow';
import { isJSONString, isPlainObject } from '../../utils/tool';
import { getRespondData, getRespondDataHasArray } from '../util';
import { SERVICE_KEY } from '../constant';
import "./index.css";
import { prefix } from '../../utils';
/**
* api查询组件pc与app端差别不大,仅有两点
* 1.form的实例获取不一样(但是获取值和设置值的方式是一样的)
* 2.按钮以及下拉框的宽度不一致
*/
var ApiPC = function ApiPC(props) {
var _a, _b;
var _props$apiObject = props.apiObject,
apiObject = _props$apiObject === void 0 ? {} : _props$apiObject,
_props$apiParams = props.apiParams,
apiParams = _props$apiParams === void 0 ? {} : _props$apiParams,
disabled = props.disabled,
_props$apiRespond = props.apiRespond,
apiRespond = _props$apiRespond === void 0 ? {} : _props$apiRespond,
_props$apiOptions = props.apiOptions,
apiOptions = _props$apiOptions === void 0 ? {} : _props$apiOptions,
buttonName = props.buttonName,
fieldAttr = props.fieldAttr,
pageId = props.pageId;
// const disabled = renderType ? renderType === 'editor' : fieldAttr.includes('read');
// 获取当前表单实例
var form = props === null || props === void 0 ? void 0 : props.form;
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
selectData = _useState2[0],
setSelectData = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
loading = _useState4[0],
setLoading = _useState4[1];
// 选中值
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
currentSelectValue = _useState6[0],
setCurrentSelectValue = _useState6[1];
var _apiRespond$root = apiRespond.root,
root = _apiRespond$root === void 0 ? {
value: ''
} : _apiRespond$root,
_apiRespond$respond = apiRespond.respond,
respond = _apiRespond$respond === void 0 ? {} : _apiRespond$respond,
_apiRespond$rootIsArr = apiRespond.rootIsArray,
rootIsArray = _apiRespond$rootIsArr === void 0 ? false : _apiRespond$rootIsArr;
var _ref = ((_a = props === null || props === void 0 ? void 0 : props.getEngineApis) === null || _a === void 0 ? void 0 : _a.call(props)) || {},
_ref$customEngineApi = _ref.customEngineApi,
customEngineApi = _ref$customEngineApi === void 0 ? {} : _ref$customEngineApi;
/**
* 接口返参样例 {"capabilityCode":"shange_weatherInfo","apiCode":"shange_weatherInfo","serviceRequest":
* {"query":{"city":"11001","key":"4234b1472fd2b4982daaaf1c5958f1f2"}},"appId":"864338437506973696"}
*/
var callRhinEngine = function callRhinEngine(_ref2) {
var capabilityCode = _ref2.capabilityCode,
apiCode = _ref2.apiCode,
serviceRequest = _ref2.serviceRequest,
appId = _ref2.appId;
var _a;
setLoading(true);
(_a = customEngineApi === null || customEngineApi === void 0 ? void 0 : customEngineApi.callRhinEngine) === null || _a === void 0 ? void 0 : _a.call(customEngineApi, {
capabilityCode: capabilityCode,
apiCode: apiCode,
serviceRequest: serviceRequest,
appId: appId
}).then(function (res) {
var _a, _b, _c;
setLoading(false);
if ("".concat(res === null || res === void 0 ? void 0 : res.respCode) === '0') {
if (isPlainObject(res)) {
var data = getRespondDataHasArray((res === null || res === void 0 ? void 0 : res.resultObject) || res, (res === null || res === void 0 ? void 0 : res.resultObject) && ((_a = root === null || root === void 0 ? void 0 : root.value) === null || _a === void 0 ? void 0 : _a.includes('resultObject')) ? root === null || root === void 0 ? void 0 : root.value.replace('resultObject.', '') : root === null || root === void 0 ? void 0 : root.value);
try {
if (Object.keys(data).length === 0) {
if ((_b = res === null || res === void 0 ? void 0 : res.resultObject) === null || _b === void 0 ? void 0 : _b.msg) {
message.error((_c = res === null || res === void 0 ? void 0 : res.resultObject) === null || _c === void 0 ? void 0 : _c.msg);
}
}
} catch (error) {
console.log(error);
}
if (rootIsArray) {
if (!Array.isArray(data)) {
message.error('配置错误,请检查 api 查询配置。');
} else {
setSelectData(data.map(function (i, index) {
return Object.assign(Object.assign({}, i), {
__id: index
});
}));
// 数组默认设置第一个
var dataObj = {};
if (respond && JSON.stringify(respond) !== '{}') {
Object.keys(respond).forEach(function (key) {
var arr = key === null || key === void 0 ? void 0 : key.split('root.');
var respondObj = getRespondData(data[0], arr[1]);
dataObj[respond[key]] = respondObj;
});
}
if (form) {
form.setFieldsValue(dataObj);
}
if (dataObj && JSON.stringify(dataObj) !== '{}') {
setCurrentSelectValue([0]);
}
}
} else {
var _dataObj = {};
if (respond && JSON.stringify(respond) !== '{}') {
Object.keys(respond).forEach(function (key) {
var arr = key === null || key === void 0 ? void 0 : key.split('root.');
var respondObj = getRespondData(Array.isArray(data) ? data[0] : data, arr[1]);
_dataObj[respond[key]] = respondObj;
});
}
if (form) {
form.setFieldsValue(_dataObj);
}
}
}
} else {
message.error(res === null || res === void 0 ? void 0 : res.respDesc);
}
});
};
var dealResult = function dealResult(res) {
var _a, _b, _c;
console.log('res====>', res);
if ("".concat(res === null || res === void 0 ? void 0 : res.resultCode) === '0') {
if (isPlainObject(res)) {
var data = getRespondDataHasArray((res === null || res === void 0 ? void 0 : res.resultObject) || res, (res === null || res === void 0 ? void 0 : res.resultObject) && ((_a = root === null || root === void 0 ? void 0 : root.value) === null || _a === void 0 ? void 0 : _a.includes('resultObject')) ? root === null || root === void 0 ? void 0 : root.value.replace('resultObject.', '') : root === null || root === void 0 ? void 0 : root.value);
try {
if (Object.keys(data).length === 0) {
if ((_b = res === null || res === void 0 ? void 0 : res.resultObject) === null || _b === void 0 ? void 0 : _b.msg) {
message.error((_c = res === null || res === void 0 ? void 0 : res.resultObject) === null || _c === void 0 ? void 0 : _c.msg);
}
}
} catch (error) {
console.log(error);
}
if (rootIsArray) {
if (!Array.isArray(data)) {
message.error('配置错误,请检查 api 查询配置。');
} else {
setSelectData(data.map(function (i, index) {
return Object.assign(Object.assign({}, i), {
__id: index
});
}));
// 数组默认设置第一个
var dataObj = {};
if (respond && JSON.stringify(respond) !== '{}') {
Object.keys(respond).forEach(function (key) {
var arr = key === null || key === void 0 ? void 0 : key.split('root.');
var respondObj = getRespondData(data[0], arr[1]);
dataObj[respond[key]] = respondObj;
});
}
if (form) {
form.setFieldsValue(dataObj);
}
if (dataObj && JSON.stringify(dataObj) !== '{}') {
setCurrentSelectValue([0]);
}
}
} else {
var _dataObj2 = {};
if (respond && JSON.stringify(respond) !== '{}') {
Object.keys(respond).forEach(function (key) {
var arr = key === null || key === void 0 ? void 0 : key.split('root.');
var respondObj = getRespondData(Array.isArray(data) ? data[0] : data, arr[1]);
_dataObj2[respond[key]] = respondObj;
});
}
if (form) {
form.setFieldsValue(_dataObj2);
}
}
}
} else {
message.error(res === null || res === void 0 ? void 0 : res.resultMsg);
}
};
var callSqlService = function callSqlService(_ref3) {
var appId = _ref3.appId,
serviceCode = _ref3.serviceCode,
params = _ref3.params;
var _a;
setLoading(true);
(_a = customEngineApi === null || customEngineApi === void 0 ? void 0 : customEngineApi.callSqlService) === null || _a === void 0 ? void 0 : _a.call(customEngineApi, {
appId: appId,
pageId: pageId,
serviceCode: serviceCode,
params: params
}).then(function (res) {
setLoading(false);
dealResult(res);
});
};
var callInnerService = function callInnerService(params) {
var _a;
setLoading(true);
(_a = customEngineApi === null || customEngineApi === void 0 ? void 0 : customEngineApi.callInnerService) === null || _a === void 0 ? void 0 : _a.call(customEngineApi, params).then(function (res) {
setLoading(false);
// console.log('isJSONString(res)', isJSONString(res), res.slice(-10));
dealResult(isJSONString(res) ? JSON.parse(res) : res);
});
};
var callStdService = function callStdService(params) {
var _a;
setLoading(true);
(_a = customEngineApi === null || customEngineApi === void 0 ? void 0 : customEngineApi.callStdService) === null || _a === void 0 ? void 0 : _a.call(customEngineApi, params).then(function (res) {
setLoading(false);
dealResult(res);
});
};
var onSelect = function onSelect(value) {
try {
setCurrentSelectValue([value]);
var da = selectData[value];
if (da) {
var dataObj = {};
if (respond && JSON.stringify(respond) !== '{}') {
Object.keys(respond).forEach(function (key) {
var arr = key.split('root.');
var respondObj = getRespondData(da, arr[1]);
dataObj[respond[key]] = respondObj;
});
}
if (form) {
form.setFieldsValue(dataObj);
}
}
} catch (error) {
message.error('数据返回异常,请检查配置');
}
};
var onSubmit = function onSubmit() {
var _a, _b, _c;
if (disabled) {
return;
}
// 查询 API
// 清空数据
var dataObj = {};
if (respond && JSON.stringify(respond) !== '{}') {
Object.keys(respond).forEach(function (key) {
dataObj[respond[key]] = undefined;
});
}
if (form) {
form.setFieldsValue(dataObj);
}
setCurrentSelectValue([]);
// const { requestJson = {} } = apiObject as any;
// 这里要判断 requestJson 的值是在哪个对象中。
// 再匹配到 apiParams
var serviceRequest = {};
if (form) {
// const apiPramsObj = listToObj(apiParams?.params ?? []);
var formValues = form.getFieldsValue();
// serviceRequest[key] = requestJson[key];
// Object.keys(requestJson[key]).forEach(key2 => {
// // serviceRequest[key][key2] = formValues?.[apiPramsObj[key2]];
// // const params = apiParams?.params?.find((item: any) => item?.first === key2);
// // if (JSON.stringify(params) !== '{}') {
// // serviceRequest[key][key2] = params.second === '2' ? params.last : formValues?.[params.last];
// // }
// if (apiParams && apiParams?.params && JSON.stringify(apiParams?.params) !== '{}' && !Array.isArray(apiParams?.params)) {
// Object.keys(apiParams?.params).forEach(paramKey => {
// if (
// paramKey.toLowerCase().includes(key.toLowerCase()) &&
// Array.isArray(apiParams?.params[paramKey]) &&
// apiParams?.params[paramKey].length > 0
// ) {
// apiParams?.params[paramKey].forEach(param => {
// if (param?.dataKey === key2) {
// // 关联的key一样
// if (!['object', 'array'].includes(param?.dataKeyType)) {
// // 非对象和数组数组数据直接复制
// serviceRequest[key][key2] = param.dataType === '1' ? param.dataValue : formValues?.[param.dataValue];
// } else {
// // 数组或对象 取children数据
// // 数组
// // eslint-disable-next-line no-lonely-if
// if (param?.dataKeyType === 'array') {
// if (param.dataType === '1') {
// // 固定值
// serviceRequest[key][key2] = param.dataValue;
// } else {
// // 选择组件 子表单 遍历 添加到数组中
// const list: any = [];
// if (param?.children && Array.isArray(param?.children) && param?.children.length > 0) {
// // 数据源
// const formData = formValues?.[param.dataValue];
// // 对象
// const bean = serviceRequest[key][key2][0];
// if (bean) {
// if (formData && Array.isArray(formData) && formData.length > 0) {
// formData.forEach(data => {
// let beanTemp: any = {};
// Object.keys(bean).forEach(beanKey => {
// // 关联关系
// const linkData = param?.children.find(item => item.dataKey === beanKey);
// if (linkData) {
// beanTemp = Object.assign(bean, { [beanKey]: data[linkData?.dataValue] });
// }
// });
// if (JSON.stringify(beanTemp) !== '{}') {
// list.push(beanTemp);
// }
// });
// }
// }
// }
// serviceRequest[key][key2] = list;
// }
// } else {
// // 对象
// const children = param?.children;
// const bean = serviceRequest[key][key2];
// let beanTemp: any = {};
// if (bean && children && Array.isArray(children) && children?.length > 0) {
// children?.forEach(child => {
// beanTemp = Object.assign(bean, {
// [child?.dataKey]: child.dataType === '1' ? child.dataValue : formValues[child?.dataValue],
// });
// });
// serviceRequest[key][key2] = beanTemp;
// }
// }
// }
// }
// });
// }
// });
// }
// });
// });
if ((apiObject === null || apiObject === void 0 ? void 0 : apiObject.tabKey) === SERVICE_KEY.RHIN) {
// 外部服务
if (apiParams && (apiParams === null || apiParams === void 0 ? void 0 : apiParams.params) && JSON.stringify(apiParams === null || apiParams === void 0 ? void 0 : apiParams.params) !== '{}') {
Object.keys(apiParams.params).forEach(function (key) {
if (apiParams.params[key] && Array.isArray(apiParams.params[key]) && apiParams.params[key].length > 0) {
var params = {};
apiParams.params[key].forEach(function (item) {
// 对象 、数组数据配置
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
if (item.dataKeyType === 'object') {
// 对象
var childParams = {};
item.children.forEach(function (child) {
childParams[child.dataKey] = child.dataType === '1' ? child.dataValue : formValues[child === null || child === void 0 ? void 0 : child.dataValue];
});
params[item.dataKey] = childParams;
} else {
// 数组
var list = [];
if ((item === null || item === void 0 ? void 0 : item.children) && Array.isArray(item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 ? void 0 : item.children.length) > 0) {
// 数据源
var formData = formValues === null || formValues === void 0 ? void 0 : formValues[item.dataValue];
if (formData && Array.isArray(formData) && formData.length > 0) {
formData.forEach(function (data) {
var childParams = {};
item.children.forEach(function (child) {
childParams[child.dataKey] = child.dataType === '1' ? child.dataValue : data[child === null || child === void 0 ? void 0 : child.dataValue];
});
if (JSON.stringify(childParams) !== '{}') {
list.push(childParams);
}
});
}
}
params[item.dataKey] = list;
}
} else {
// 字段
params[item.dataKey] = item.dataType === '1' ? item.dataValue : formValues[item === null || item === void 0 ? void 0 : item.dataValue];
}
});
serviceRequest[key.replace('request', '').toLowerCase()] = params;
}
});
}
callRhinEngine({
capabilityCode: apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceNbr,
apiCode: apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceNbr,
serviceRequest: serviceRequest,
appId: window.appId
});
} else {
// 非外部服务
var serviceParams = {};
if (apiParams && (apiParams === null || apiParams === void 0 ? void 0 : apiParams.params) && ((_a = apiParams === null || apiParams === void 0 ? void 0 : apiParams.params) === null || _a === void 0 ? void 0 : _a.root) && Array.isArray((_b = apiParams === null || apiParams === void 0 ? void 0 : apiParams.params) === null || _b === void 0 ? void 0 : _b.root) && ((_c = apiParams.params) === null || _c === void 0 ? void 0 : _c.root.length) > 0) {
apiParams.params.root.forEach(function (param) {
serviceParams[param.dataKey] = param.dataType === '1' ? param.dataValue : formValues[param === null || param === void 0 ? void 0 : param.dataValue];
});
}
if ((apiObject === null || apiObject === void 0 ? void 0 : apiObject.tabKey) === SERVICE_KEY.INNER) {
// 请求层
var params = {
serviceMethod: apiObject === null || apiObject === void 0 ? void 0 : apiObject.serviceMethod,
servicePath: apiObject === null || apiObject === void 0 ? void 0 : apiObject.servicePath,
appId: window.appId,
serviceCode: apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceNbr,
params: Object.assign({}, serviceParams)
};
callInnerService(params);
} else if ((apiObject === null || apiObject === void 0 ? void 0 : apiObject.tabKey) === SERVICE_KEY.STD) {
// 编排
callStdService({
appId: window.appId,
serviceCode: apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceNbr,
pageId: pageId,
version: '1.0',
serviceVersionId: apiObject === null || apiObject === void 0 ? void 0 : apiObject.serviceVersionId,
parameters: Object.assign({}, serviceParams)
});
} else {
callSqlService({
appId: window.appId,
serviceCode: apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceNbr,
params: Object.assign({}, serviceParams)
});
}
}
}
};
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "-api-wrap")
}, /*#__PURE__*/React.createElement(Show, {
when: !rootIsArray,
fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
}, /*#__PURE__*/React.createElement(Spin, {
spinning: loading,
style: {
width: '100%',
maxWidth: '377px'
}
}, /*#__PURE__*/React.createElement(Button, {
style: {
width: '100%',
maxWidth: '377px'
},
disabled: disabled || fieldAttr.includes('read'),
onClick: onSubmit
}, buttonName))), /*#__PURE__*/React.createElement(Show, {
when: !!rootIsArray,
fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "-array-layout-wrap")
}, /*#__PURE__*/React.createElement(Select, {
className: "".concat(prefix, "-left-select-wrap"),
placeholder: "\u8BF7\u70B9\u51FB\u67E5\u8BE2\u540E\u9009\u62E9\u4E00\u4E2A\u9009\u9879",
optionFilterProp: "children",
value: currentSelectValue,
bordered: false,
disabled: disabled || fieldAttr.includes('read'),
// 使用onChange事件在数据更换但选中的位置一致时会不触发,故改为onSelect
onSelect: onSelect,
fieldNames: {
label: (_b = apiOptions === null || apiOptions === void 0 ? void 0 : apiOptions.options) === null || _b === void 0 ? void 0 : _b.title,
value: '__id'
},
options: selectData
}), /*#__PURE__*/React.createElement(Spin, {
spinning: loading
}, /*#__PURE__*/React.createElement("div", {
className: disabled ? "".concat(prefix, "-right-search-wrap-disable") : "".concat(prefix, "-right-search-wrap"),
onClick: onSubmit
}, /*#__PURE__*/React.createElement(SearchOutlined, {
className: "".concat(prefix, "-search-icon-wrap")
}), buttonName)))));
};
export default ApiPC;