fx-form-widget/es/packages/previewPlatform/index.js

动态表单组件库

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState, useEffect, useImperativeHandle, createContext, forwardRef, useRef } from 'react';
import httpClient from '../../config/httpClient';
import ContentWrap from './component/ContentWrap/index';
import { transformFrom, transformFromAnchor, createBindMap } from './tools/index';
import { findSchemaDataIndex, setDatas } from './shard';
import PlusConfigProvier from '@fle-ui/plus-config-provider';
import './index.less';
export var Context = /*#__PURE__*/createContext({});
var PreviewPlatform = function PreviewPlatform(props, ref) {
  var variant = props.variant,
    readonly = props.readonly,
    _props$schema = props.schema,
    schema = _props$schema === void 0 ? {} : _props$schema,
    _props$hideInForm = props.hideInForm,
    hideInForm = _props$hideInForm === void 0 ? [] : _props$hideInForm,
    _props$loading = props.loading,
    loading = _props$loading === void 0 ? false : _props$loading,
    _props$defaultValue = props.defaultValue,
    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
    getAnchorInfo = props.getAnchorInfo,
    formId = props.formId,
    onCheck = props.onCheck;
  var _schema$globalLayout = schema.globalLayout,
    globalLayout = _schema$globalLayout === void 0 ? {} : _schema$globalLayout,
    _schema$partitions = schema.partitions,
    partitions = _schema$partitions === void 0 ? [] : _schema$partitions;
  var contentRef = useRef();
  var allSchemaData = useRef([]);
  var _useState = useState({}),
    bindList = _useState[0],
    setBindList = _useState[1];
  var _useState2 = useState({}),
    dataContext = _useState2[0],
    setDataContext = _useState2[1];
  useEffect(function () {
    var schemaData = transformFrom(partitions, readonly, hideInForm);
    allSchemaData.current = schemaData;
    var anchor = transformFromAnchor(schemaData);
    getAnchorInfo === null || getAnchorInfo === void 0 ? void 0 : getAnchorInfo(anchor);
    setBindList(createBindMap(schemaData.map(function (item) {
      return item.viewSchema;
    }).filter(function (item) {
      return item.isBind;
    })));
    onDataChange({
      schemaData: schemaData
    });
  }, [partitions]);
  useEffect(function () {
    var _contentRef$current;
    var defaultValues = {};
    if (Object.prototype.toString.call(defaultValue) === '[object Array]') {
      defaultValues = defaultValue.reduce(function (obj, item) {
        obj[item.fieldName || item.wid] = item.value;
        return obj;
      }, {});
    } else {
      defaultValues = defaultValue;
    }
    defaultValues && ((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.dynamicForm.setFieldsValue(defaultValues));
  }, [defaultValue]);
  useImperativeHandle(ref, function () {
    return {
      onReset: onReset,
      onSubmit: onSubmit,
      setDefaultValue: setDefaultValue
    };
  });
  var handleValuesChange = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(changedValue) {
      var response;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            if (!(bindList[Object.keys(changedValue)[0]] && Object.values(changedValue)[0])) {
              _context.next = 5;
              break;
            }
            _context.next = 3;
            return Promise.all(bindList[Object.keys(changedValue)[0]].map(function (item) {
              return httpClient.post(item.bindUrl, changedValue);
            }));
          case 3:
            response = _context.sent;
            response.forEach(function (item, index) {
              var _bindList$Object$keys = bindList[Object.keys(changedValue)[0]][index],
                fieldName = _bindList$Object$keys.fieldName,
                bindValueKey = _bindList$Object$keys.bindValueKey;
              fieldName.forEach(function (i, index) {
                var _contentRef$current2;
                (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.dynamicForm.setFieldValue(i, item.data[bindValueKey[index]] || '');
              });
            });
          case 5:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function handleValuesChange(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  // 重置form表单数据
  var onReset = function onReset() {
    var tempArr = dataContext.schemaData.map(function (item) {
      var _item$viewSchema;
      if ((_item$viewSchema = item.viewSchema) !== null && _item$viewSchema !== void 0 && _item$viewSchema.data) {
        item.viewSchema.data = undefined;
      }
      return item;
    });
    if (contentRef.current.dynamicForm) {
      // 修改实际的值
      onDataChange({
        schemaData: tempArr
      });
      // form自带重置方法
      contentRef.current.dynamicForm.resetFields();
    }
  };

  // 校验
  var onSubmit = function onSubmit() {
    var dataList = [];
    var schemaData = allSchemaData.current;
    return new Promise(function (resolve, reject) {
      contentRef.current.dynamicForm.validateFields().then(function (values) {
        setDatas(schemaData, dataList, values);
        resolve(dataList);
      })["catch"](function () {
        reject(false);
      });
    });
  };
  var onDataChange = function onDataChange(data) {
    setDataContext(_extends({}, dataContext, data));
  };
  var onSchemaChange = function onSchemaChange(type, newSchemaData) {
    var schemaData = allSchemaData.current;
    var wid = newSchemaData.wid;
    var _findSchemaDataIndex = findSchemaDataIndex(schemaData, wid),
      index = _findSchemaDataIndex.index,
      children = _findSchemaDataIndex.children;
    if (index < 0) {
      return;
    }
    children.splice(index, 1, newSchemaData);
  };

  // 设置初始值
  var setDefaultValue = function setDefaultValue(values) {
    var defaultValues = {};
    if (Object.prototype.toString.call(values) === '[object Array]') {
      defaultValues = values.reduce(function (obj, item) {
        obj[item.fieldName || item.wid] = item.value;
        return obj;
      }, {});
    } else {
      defaultValues = values;
    }
    contentRef.current.dynamicForm.setFieldsValue(defaultValues);
  };
  var values = _extends({}, dataContext, {
    schemaData: allSchemaData.current,
    onSchemaChange: onSchemaChange,
    globalData: globalLayout,
    formId: formId
  });
  return /*#__PURE__*/React.createElement(PlusConfigProvier, null, /*#__PURE__*/React.createElement(Context.Provider, {
    value: values
  }, /*#__PURE__*/React.createElement("div", {
    className: "preview_wrap"
  }, /*#__PURE__*/React.createElement(ContentWrap, {
    variant: variant,
    ref: contentRef,
    valuesChanged: handleValuesChange,
    onCheck: onCheck,
    loading: loading
  }))));
};
export default /*#__PURE__*/forwardRef(PreviewPlatform);