fusionUI表单组件的补充

import * as React from 'react';
import {
  Avatar,
  Card,
  Tab,
  ResponsiveGrid,
  Table,
  Typography,
  Upload,
  Button,
  Form,
  Input,
  Message,
  Box,
  Radio,
  Dialog,
  Icon,
} from '@alifd/next';
import styles from './index.module.css';

const { useState, useEffect } = React;
const { Cell } = ResponsiveGrid;
const FormItem = Form.Item;

const SettingSystemBlock = (props) => {
  const [initialized, setInitialize] = useState(false);
  const [preview, setPreview] = useState(true);
  const [postData, setValue] = useState({});
  useEffect(() => {
    setInitialize(true);
  }, [initialized]);

  const formChange = (values) => {
    setValue(values);
  };

  const onSubmit = (values, errors) => {
    console.log('values:', values);
    console.log('postData:', postData);
  };

  return (
    <Card free>
      <Card.Content className={styles.settingPersonBlock}>
        <Box className={styles.baseSettingContainer}>
          <Form
            isPreview={preview}
            className={styles.baseSetting}
            value={postData}
            labelAlign="top"
            onChange={formChange}
            responsive
          >
            <FormItem label="公司封面" colSpan={12}>
              <ResponsiveGrid gap={10}>
                <Cell colSpan={2}>
                  <Avatar 
                  src={postData.image&&`http://alfuser.quchangguan.cn/${postData.image[0].url}`}
                  shape="circle" size={64} icon="account" />
                </Cell>
                <Cell colSpan={10} className={styles.changeLogo}>
                  <Box spacing={12}>
                    <FormItem>
                      <Upload
                        limit={1}
                        formatter={(res) => {
                          return {
                            success: true,
                            url: res.data.result.mid,
                          };
                        }}
                        action="/api/alf/image/upload2"
                        // name="image"
                      >
                        <Button className={styles.uploadButton} type="primary">
                          更新公司logo
                        </Button>
                      </Upload>
                    </FormItem>
                    <Box>
                      <p>* logo尽量上传超过 80px*80px, 但不要太大了。</p>
                      <p>* 请上传两倍图保证清晰度</p>
                    </Box>
                  </Box>
                </Cell>
              </ResponsiveGrid>
            </FormItem>
            <FormItem label="公司名称" required requiredMessage="必填" colSpan={12}>
              <Input placeholder="请输入公司名称" name="companyName" />
            </FormItem>

            <FormItem label="公司创建时间" required requiredMessage="必填" colSpan={12}>
              <Input placeholder="请输入公司公司创建时间" name="createAt" />
            </FormItem>

            <FormItem label="公司编号" required requiredMessage="必填" colSpan={12}>
              <Input placeholder="请输入公司编号" name="companyId" />
            </FormItem>

            {preview ? (
              <FormItem colSpan={12}>
                <Button
                  style={{ marginRight: '20px' }}
                  type="primary"
                  onClick={() => {
                    setPreview(false);
                  }}
                >
                  编辑
                </Button>
              </FormItem>
            ) : (
              <FormItem colSpan={12}>
                <Button
                  style={{ marginRight: '20px' }}
                  type="primary"
                  onClick={() => {
                    setPreview(true);
                  }}
                >
                  取消
                </Button>
                <Form.Submit type="primary" onClick={onSubmit} >
                  保存
                </Form.Submit>
              </FormItem>
            )}
          </Form>
        </Box>
      </Card.Content>
    </Card>
  );
};

export default SettingSystemBlock;