webConfigForm.js

import BaseForm from '@/components/BaseForm';
import React, { useEffect, useState } from 'react';
import {
  getLoginPage,
  getMapCofigs,
  getWebThemes,
} from '@/services/webConfig/api';
import { Row, Col } from 'antd';
import { getDefaultGetWebconfig, singleStyleData } from '../utils';

const WebConfigForm = props => {
  const { hasIntegerate, config, onCancel, onSubmit, onOk } = props;
  const [webThemes, setWebThemes] = useState([]);
  const [mapConfigs, setMapConfigs] = useState([]);
  const [loginPages, setLoginPages] = useState([]);
  const [webType, setWebType] = useState();
  const [form, setForm] = useState(null);

  const getForm = f => {
    setForm(f);
  };

  useEffect(() => {
    if (form) {
      form.setFieldsValue(config);
    }
  }, [config]);

  const onGetThemes = () => {
    if (webThemes.length === 0) {
      getWebThemes().then(res => setWebThemes(res));
    }
  };

  const onGetLoginPages = () => {
    if (loginPages.length === 0) {
      getLoginPage().then(res => setLoginPages(res));
    }
  };

  const onGetMapConfig = () => {
    if (mapConfigs.length === 0) {
      getMapCofigs().then(res => setMapConfigs(res));
    }
  };

  const itemsMap = getDefaultGetWebconfig({
    initialValues: config,
    hasIntegerate,
    webThemes,
    webType,
    onGetThemes,
    loginPages,
    mapConfigs,
    onGetLoginPages,
    onGetMapConfig,
  });

  const formConfig = {
    getForm,
    items: Object.keys(itemsMap).map(k => ({
      ...itemsMap[k],
      dataIndex: k,
    })),
    buttons: [
      {
        text: '取消',
        type: 'cancel',
        size: 'middle',
        onClick: () => {
          // eslint-disable-next-line no-unused-expressions
          onCancel && onCancel();
        },
      },
      {
        text: '确定',
        htmlType: 'submit',
        type: 'primary',
        size: 'middle',
        style: {
          marginLeft: '10px',
        },
      },
    ],
    buttonsWraper: bts => (
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          {bts}
        </Col>
      </Row>
    ),
  };

  return (
    <BaseForm
      {...formConfig}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      onValuesChange={v => {
        if (v.type) {
          setWebType(v.type);
          if (form) {
            const sty = form.getFieldValue('style');
            if (!singleStyleData[sty]) {
              form.setFieldsValue([{ name: 'style', value: 'platform' }]);
            }
          }
        }
      }}
      onFinish={values => {
        // eslint-disable-next-line no-unused-expressions
        onSubmit && onSubmit(values);
        // eslint-disable-next-line no-unused-expressions
        onOk && onOk(values);
      }}
    />
  );
};

export default WebConfigForm;