machinery-admin/src/pages/SystemManagement/Administrator/AdminEdit/index.jsx

import { Input, Card, Select, Button, message } from "antd"
import { useEffect, useState } from 'react'
import { Form } from "antd";
import { history } from 'umi';
import ProCard from '@ant-design/pro-card'

const { Option } = Select
const goBack = () => {
  history.goBack()
}
const FormItem = Form.Item
export default (props) => {

  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)

  const formItemLayout = {
    //布局
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };

  const Submit = values => {
    console.log("🚀 ~ file: index.jsx ~ line 21 ~ values", values)

  };

  return (
    <Card >
      <ProCard tabs={{ type: 'card' }} style={{ marginTop: '16px' }}
      >
        <ProCard.TabPane key={1} tab="人员管理">
          <Form {...formItemLayout} onFinish={Submit} form={form} >
            <FormItem label="账号" name="shopName" rules={[{ required: true, message: '请输入' }]}>
              <Input placeholder="请输入" style={{ width: '350px' }} />
            </FormItem>
            <FormItem label="姓名" name="title" rules={[{ required: true, message: '请输入' }]}>
              <Input placeholder="请输入" style={{ width: '350px' }} />
            </FormItem>
            <FormItem label="邮箱" name="phone" rules={[{ required: true, message: '邮箱格式不正确或内容为空', pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/ }]}>
              <Input placeholder="请输入" style={{ width: '350px' }} />
            </FormItem>
            <FormItem label="角色" name="user" rules={[{ required: true, message: '请选择' }]}>
              <Select
                placeholder="请选择方式"
                // onChange={onGenderChange}
                allowClear
                style={{ width: '350px' }}
              >
                <Option value="nongji">农机手</Option>
                <Option value="nonghu">农户</Option>
              </Select>
            </FormItem>
            <FormItem label="状态" name="stry" rules={[{ required: true, message: '请选择', }]} >
              <Select
                placeholder="请选择方式"
                // onChange={onGenderChange}
                allowClear
                style={{ width: '350px' }}
              >
                <Option value="0">启用</Option>
                <Option value="1">禁用</Option>
              </Select>
            </FormItem>

            <FormItem label=" " colon={false} >
              <Button type='default' onClick={() => goBack()} >返回</Button>
              <Button type='primary' loading={loading} htmlType="Submit" style={{ marginLeft: '4em' }}>保存</Button>
            </FormItem>
          </Form>
        </ProCard.TabPane>
      </ProCard>
    </Card>
  )
}