@wufengteam/inputs/es/ApiParams/index.js

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

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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, useState } from 'react';
import { Modal, Button, Form, Space, Divider, Empty } from 'antd';
import "./index.css";
import { cssPrefixCls } from '../utils';
import KVTable from './components/KVTable';
import { SERVICE_KEY, TYPE_MAP } from '../ApiObject/constant';
var ParamsModal = function ParamsModal(props) {
  var _a;
  var _props$apiObject = props.apiObject,
    apiObject = _props$apiObject === void 0 ? {} : _props$apiObject,
    apiRespond = props.apiRespond,
    value = props.value,
    onChange = props.onChange,
    DSLCore = props.DSLCore;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isClear = _useState4[0],
    setClear = _useState4[1];
  var _useState5 = useState({}),
    _useState6 = _slicedToArray(_useState5, 2),
    paramsBean = _useState6[0],
    updataParamsBean = _useState6[1];
  var _useState7 = useState([]),
    _useState8 = _slicedToArray(_useState7, 2),
    oldFieldsValue = _useState8[0],
    setOldFieldsValue = _useState8[1];
  // 已用的组件 key - list
  var _useState9 = useState({}),
    _useState10 = _slicedToArray(_useState9, 2),
    usedComponents = _useState10[0],
    setUsedComponents = _useState10[1];
  // 本地表单的字段列表
  var _useState11 = useState([]),
    _useState12 = _slicedToArray(_useState11, 2),
    localFieldList = _useState12[0],
    setLocalFieldList = _useState12[1];
  var _Form$useForm = Form.useForm(),
    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
    form = _Form$useForm2[0];
  // 撤销编辑
  var onCancel = function onCancel() {
    setVisible(false);
    setClear(!isClear);
    form.setFields(Object.entries(oldFieldsValue).map(function (field) {
      return {
        name: field[0],
        value: field[1]
      };
    }));
    form.setFieldsValue(oldFieldsValue);
  };
  var _apiObject$busiServic = apiObject.busiServiceId,
    busiServiceId = _apiObject$busiServic === void 0 ? '' : _apiObject$busiServic;
  var _ref = ((_a = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _a === void 0 ? void 0 : _a.props) || {},
    _ref$apiParams = _ref.apiParams,
    apiParams = _ref$apiParams === void 0 ? {} : _ref$apiParams;
  useEffect(function () {
    if (busiServiceId !== (apiParams === null || apiParams === void 0 ? void 0 : apiParams.busiServiceId)) {
      form === null || form === void 0 ? void 0 : form.resetFields();
      form === null || form === void 0 ? void 0 : form.setFields([]);
      form === null || form === void 0 ? void 0 : form.setFieldsValue({
        params: {}
      });
      setTimeout(function () {
        onChange === null || onChange === void 0 ? void 0 : onChange({
          busiServiceId: busiServiceId,
          params: {}
        });
      }, 10);
    }
  }, [apiParams, busiServiceId]);
  useEffect(function () {
    if (visible) {
      setLocalFieldList(function () {
        // 1、对于输入参数不支持：附件/图片/视频/表格/签名/关联表单/数据联动/附件下载；
        // 2、对于输出参数不支持：附件/图片/视频/签名/关联表单/数据联动/附件下载；
        var fillterList = ['Upload', 'Image', 'Video', 'EditableTable', 'Autograph', 'BindTable', 'DataLinkage', 'Download', 'Attachments', 'Api', 'ImgUpload', 'StdUpload', 'VideoUpload', 'ImageShow'];
        var components = DSLCore.querySelectAll('[compType=2]') || [];
        var filterList = components.filter(function (item) {
          var _a, _b;
          return "".concat((_b = (_a = item === null || item === void 0 ? void 0 : item.attribute) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isInSubForm) !== 'true';
        }) // 过滤子表单下的组件
        .filter(function (item) {
          var _a;
          return !fillterList.includes((_a = item === null || item === void 0 ? void 0 : item.attribute) === null || _a === void 0 ? void 0 : _a.compName);
        }) // 过滤不能关联组件
        .filter(function (item) {
          var _a, _b, _c, _d;
          return ((_b = (_a = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.fieldName) !== ((_d = (_c = item === null || item === void 0 ? void 0 : item.attribute) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.fieldName);
        }); // 过滤自己
        var list = filterList.map(function (item) {
          var _a, _b, _c, _d, _e, _f, _g;
          var compType = (_a = item === null || item === void 0 ? void 0 : item.attribute) === null || _a === void 0 ? void 0 : _a.compName;
          var attrCode = (_c = (_b = item === null || item === void 0 ? void 0 : item.attribute) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.fieldName;
          var attrName = (_e = (_d = item === null || item === void 0 ? void 0 : item.attribute) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.name;
          if (compType === 'SubForm') {
            // 子表单
            return {
              compType: compType,
              attrCode: attrCode,
              attrName: attrName,
              subFormFields: (_g = (_f = item === null || item === void 0 ? void 0 : item.attribute) === null || _f === void 0 ? void 0 : _f.props) === null || _g === void 0 ? void 0 : _g.subFormFields.map(function (child) {
                var _a, _b;
                return {
                  compType: child === null || child === void 0 ? void 0 : child.compName,
                  attrCode: (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.fieldName,
                  attrName: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.name
                };
              })
            };
          }
          return {
            compType: compType,
            attrCode: attrCode,
            attrName: attrName
          };
        });
        // 过滤输出参数选择的组件
        var paramsComponents = [];
        if (apiRespond && (apiRespond === null || apiRespond === void 0 ? void 0 : apiRespond.respond)) {
          Object.values(apiRespond === null || apiRespond === void 0 ? void 0 : apiRespond.respond).forEach(function (item) {
            paramsComponents.push(item);
          });
        }
        var resultList = list.filter(function (item) {
          return !paramsComponents.includes(item === null || item === void 0 ? void 0 : item.attrCode);
        });
        return resultList;
      });
      setOldFieldsValue(form.getFieldsValue());
    }
  }, [visible]);
  var getChildren = function getChildren(children) {
    if (children && Array.isArray(children) && children.length > 0) {
      children.forEach(function (child) {
        child.label = child === null || child === void 0 ? void 0 : child.code;
        child.value = child === null || child === void 0 ? void 0 : child.code;
        child.dataKeyType = child === null || child === void 0 ? void 0 : child.attrType;
        child.children = getChildren(child === null || child === void 0 ? void 0 : child.children);
      });
      return children;
    }
    return undefined;
  };
  // 格式化
  var getOptions = function getOptions(code) {
    var _a;
    // attrSpec-属性，serviceObjectCode-对象
    if (!((apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) && Array.isArray(apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) && (apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson.length) > 0)) {
      return {};
    }
    var params = (_a = apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) === null || _a === void 0 ? void 0 : _a.map(function (item) {
      if ((item === null || item === void 0 ? void 0 : item.code) === code) {
        return item;
      }
      return null;
    }).filter(function (item) {
      return item !== null;
    });
    var result = [];
    if (params && Array.isArray(params) && params.length > 0) {
      params.forEach(function (item) {
        if ((item === null || item === void 0 ? void 0 : item.children) && Array.isArray(item.children) && item.children.length > 0) {
          result = getChildren(item === null || item === void 0 ? void 0 : item.children);
        }
      });
    }
    return result;
  };
  var getParamsValue = function getParamsValue(code) {
    var _a;
    if (!((apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) && Array.isArray(apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) && (apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson.length) > 0)) {
      return {};
    }
    var params = (_a = apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) === null || _a === void 0 ? void 0 : _a.map(function (item) {
      if ((item === null || item === void 0 ? void 0 : item.code) === code) {
        return item;
      }
      return null;
    }).filter(function (item) {
      return item !== null;
    }).filter(function (item) {
      return (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;
    });
    if (params && Array.isArray(params) && params.length > 0) {
      return params === null || params === void 0 ? void 0 : params[0];
    }
    return {};
  };
  // 配置参数入参
  var requestParamsList = [{
    key: 'requestHeader',
    name: '头部参数设置 header',
    showAddItem: true,
    value: getParamsValue('header'),
    keyList: getOptions('header') // 参数名列表
  }, {
    key: 'requestPath',
    name: '路径参数 path',
    showAddItem: true,
    value: getParamsValue('path'),
    keyList: getOptions('path')
  }, {
    key: 'requestQuery',
    name: '查询参数 query',
    showAddItem: true,
    value: getParamsValue('query'),
    keyList: getOptions('query')
  }, {
    key: 'requestBody',
    name: '请求参数 body',
    value: getParamsValue('body'),
    showAddItem: true,
    keyList: getOptions('body')
  }];
  var getNoRhinParamsType = function getNoRhinParamsType(item) {
    var type = (item === null || item === void 0 ? void 0 : item.type) || (item === null || item === void 0 ? void 0 : item.attrType);
    if (type === TYPE_MAP.array || type === TYPE_MAP.fieldArray) {
      return 'array';
    }
    if (type === TYPE_MAP.object) {
      return 'object';
    }
    return 'string';
  };
  var getNoRhinOptions = function getNoRhinOptions(params) {
    if (!params) {
      return {};
    }
    var listParams = [];
    if (Array.isArray(params) && params.length > 0) {
      params.forEach(function (item) {
        listParams.push({
          label: item === null || item === void 0 ? void 0 : item.code,
          value: item === null || item === void 0 ? void 0 : item.code,
          dataKeyType: getNoRhinParamsType(item)
        });
      });
    }
    return listParams;
  };
  var requestParamsNoRhinList = [{
    key: 'root',
    name: '请求参数',
    showAddItem: true,
    value: apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson,
    keyList: (apiObject === null || apiObject === void 0 ? void 0 : apiObject.tabKey) !== SERVICE_KEY.RHIN ? getNoRhinOptions(apiObject === null || apiObject === void 0 ? void 0 : apiObject.requestJson) : [] // 参数名列表
  }];
  var newRequestParamsList = (apiObject === null || apiObject === void 0 ? void 0 : apiObject.tabKey) !== SERVICE_KEY.RHIN ? requestParamsNoRhinList.filter(function (param) {
    return param.value && JSON.stringify(param.value) !== '[]';
  }) : requestParamsList.filter(function (param) {
    return param.value && JSON.stringify(param.value) !== '{}';
  });
  var getUsedComps = function getUsedComps() {
    var list = [];
    Object.values(usedComponents).forEach(function (v) {
      list = list.concat(v);
    });
    return list;
  };
  var getParamsLength = function getParamsLength(params) {
    var length = 0;
    Object.keys(params).forEach(function (key) {
      length = params[key].length + length;
    });
    return length !== 0;
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    disabled: !!(apiObject && (apiObject === null || apiObject === void 0 ? void 0 : apiObject.busiServiceId) ? newRequestParamsList.length > 0 ? value && value.params ? 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) ? newRequestParamsList.length > 0 ? value && value.params && JSON.stringify(value.params) !== '{}' && getParamsLength(value.params) ? '已配置' : '配置参数' : '无需配置' : '请先选择API'), /*#__PURE__*/React.createElement(Modal, {
    visible: visible,
    title: "\u8F93\u5165\u53C2\u6570\u8BBE\u7F6E",
    width: 780,
    wrapClassName: "".concat(cssPrefixCls, "-params-modalWrap"),
    onOk: function onOk() {
      if (paramsBean && JSON.stringify(paramsBean) !== '{}') {
        Object.keys(paramsBean).forEach(function (key) {
          if (paramsBean[key] && Array.isArray(paramsBean[key] && paramsBean[key].length === 0)) {
            // 过滤空数组字段
            delete paramsBean[key];
          }
        });
      }
      onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, value), {
        params: paramsBean
      }));
      setVisible(false);
    },
    onCancel: onCancel
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(cssPrefixCls, "-content-wrap")
  }, newRequestParamsList.length > 0 ? newRequestParamsList.map(function (item) {
    var _a, _b;
    return /*#__PURE__*/React.createElement(Space, {
      direction: "vertical",
      size: 20,
      style: {
        display: 'flex'
      }
    }, /*#__PURE__*/React.createElement(Divider, {
      className: "".concat(cssPrefixCls, "-title-wrap")
    }, item.name), /*#__PURE__*/React.createElement(KVTable, Object.assign({
      showHeader: true,
      tableKey: item === null || item === void 0 ? void 0 : item.key,
      isClear: isClear,
      localFieldList: localFieldList,
      keyList: item.keyList,
      tableData: value && (value === null || value === void 0 ? void 0 : value.params) && ((_a = value === null || value === void 0 ? void 0 : value.params) === null || _a === void 0 ? void 0 : _a[item.key]) ? _toConsumableArray((_b = value === null || value === void 0 ? void 0 : value.params) === null || _b === void 0 ? void 0 : _b[item.key]) : [],
      allowEdit: true
    }, props, {
      showAddItem: item.showAddItem,
      getUsedComps: getUsedComps,
      onDataUpdate: function onDataUpdate(tableKey, tableList) {
        var bean = paramsBean;
        bean[item.key] = tableList;
        updataParamsBean(bean);
        // 构造已使用组件列表
        var usedComponentsTemp = [];
        tableList.forEach(function (item1) {
          var _a;
          if ((item1 === null || item1 === void 0 ? void 0 : item1.dataValue) && item1.dataType === '2') {
            usedComponentsTemp.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') {
                usedComponentsTemp.push(child === null || child === void 0 ? void 0 : child.dataValue);
              }
            });
          }
        });
        var usedComponentsTemp1 = usedComponents;
        usedComponentsTemp1[tableKey] = usedComponentsTemp;
        setUsedComponents(usedComponentsTemp1);
      }
    })));
  }) : ( /*#__PURE__*/React.createElement(Empty, {
    description: "\u8BF7\u914D\u7F6E\u8F93\u5165\u53C2\u6570!"
  })))));
};
var Test = function Test(_ref2) {
  var name = _ref2.name,
    rules = _ref2.rules,
    label = _ref2.label,
    DSLCore = _ref2.DSLCore;
  var _a;
  var _ref3 = ((_a = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _a === void 0 ? void 0 : _a.props) || {},
    _ref3$apiObject = _ref3.apiObject,
    apiObject = _ref3$apiObject === void 0 ? {} : _ref3$apiObject,
    apiRespond = _ref3.apiRespond;
  return /*#__PURE__*/React.createElement(Form.Item, {
    label: label,
    name: name,
    rules: rules
  }, /*#__PURE__*/React.createElement(ParamsModal, {
    apiObject: apiObject,
    apiRespond: apiRespond,
    DSLCore: DSLCore
  }));
};
export default Test;