index.jsx

import React, { createElement, memo, useRef, useState } from 'react';
import {
  ProForm,
  ProFormDependency,
  ProFormSelect,
  ProFormText,
  ProFormGroup,
  ProFormList,
  ProCard,
} from '@ant-design/pro-components';
import moment from 'moment';
import { doFetch } from '@/utils/doFetch';
import styles from './index.less';
import FormItems from './FormItems';

function upperCase(str) {
  const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
  return newStr;
}

let FormRender = memo(({ fields = [], colProps, proformRef }) => {
  return (
    <>
      {fields
        .filter((it) => it.hideInForm !== true)
        .map((item, index) => {
          let key = item?.valueType ? upperCase(item?.valueType) : 'Input';
          let { hideInForm } = item;
          item.formItemProps = item.formItemProps ?? { rules: [] };
          if (item.valueType == 'split') {
            return (
              <div className={styles.title} style={{ borderWidth: index == 0 ? 0 : 1 }}>
                {item.title}
              </div>
            );
          }
          if (hideInForm && Object.keys(hideInForm)) {
            return (
              <ProFormDependency name={Object.keys(hideInForm)}>
                {(params) => {
                  let ifs = true;
                  let res = Object.keys(hideInForm).map((its) => {
                    if (Array.isArray(hideInForm[its])) {
                      return !hideInForm[its].includes(params[its]);
                    } else {
                      let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
                      return vals.indexOf(params[its]) != -1;
                    }
                  });
                  ifs = res.includes(false);
                  if (ifs) {
                    return;
                  } else {
                    return (
                      <>
                        {createElement(FormItems[key], {
                          item: item,
                          colProps: colProps,
                          key: item.dataIndex,
                          formRef: proformRef,
                        })}
                      </>
                    );
                  }
                }}
              </ProFormDependency>
            );
          } else {
            return (
              <>
                {createElement(FormItems[key], {
                  item: item,
                  colProps: colProps,
                  key: item.dataIndex,
                  formRef: proformRef,
                })}
              </>
            );
          }
        })}
    </>
  );
});

function InitForm({
  formRef,
  onFinish = (vals) => {
    console.log(vals);
  },
  formKey,
  params = {},
  detailpath = '',
  defaultFormValue = {},
  submitter,
  fields,
  colProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
}) {
  let proformRef = useRef();
  proformRef = formRef ?? proformRef;

  return (
    <ProForm
      style={{ overflow: 'hidden' }}
      formRef={proformRef}
      onFinish={onFinish}
      formKey={formKey ?? parseInt(Math.random() * 1000000)}
      params={params}
      submitter={submitter ?? true}
      grid={true}
      rowProps={{
        gutter: 12,
      }}
      request={async (params) => {
        if (detailpath) {
          let res = await doFetch({ url: detailpath, params });
          return {
            ...(res?.data?.data ?? {}),
            ...defaultFormValue,
          };
        } else {
          return {
            ...defaultFormValue,
          };
        }
      }}
      autoFocusFirstInput
    >
      <FormRender
        fields={fields.filter((it) => it.valueType != 'option')}
        colProps={colProps}
        proformRef={proformRef}
      />
    </ProForm>
  );
}

export default InitForm;