cldV2react/src/pages/Customer/Contact/components/AddContact/index.jsx

import React, { useEffect } from 'react'
import { Form, Input, Modal, Row, Col, Select } from 'antd'
import LazyCascader from '@/components/LazyCascader'
import { useForm } from 'antd/lib/form/Form'

const Addcontact = props => {
  const [form] = useForm()
  const { visible, onCancel, onConfirm, loading } = props
  const { Option } = Select
  const layout = {
    labelCol: { span: 6 }
  }
  function handleChange(value) {
    console.log(`selected ${value}`)
  }
  useEffect(() => {}, [visible])
  return (
    <div>
      <Modal
        title="添加联系人"
        width={800}
        onCancel={onCancel}
        visible={visible}
        confirmLoading={loading}
        onOk={() => {
          form.validateFields().then(values => {
            form.resetFields()
            onConfirm(values)
          })
        }}>
        <Form {...layout} form={form} name="basic">
          <Row>
            <Col span={12}>
              <Form.Item
                label="姓名"
                name="clientName"
                rules={[{ required: true, message: '姓名' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12} />
            <Col span={12}>
              <Form.Item label="联系人地区" name="" rules={[{ message: '联系人地区' }]}>
                <LazyCascader key="LazyCascader" />
              </Form.Item>
            </Col>
            <Col span={12} />
            <Col span={12}>
              <Form.Item label="性别" name="gender" rules={[{ message: '性别' }]}>
                <Select onChange={handleChange}>
                  <Option value="男">男</Option>
                  <Option value="女">女</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="昵称" name="niceName" rules={[{ message: '昵称' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="手机"
                name="telephone"
                rules={[{ required: true, message: '手机' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="QQ" name="qq" rules={[{ required: true, message: 'QQ' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="电话" name="phone" rules={[{ required: true, message: '电话' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '邮箱' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="联系人地址" name="address" rules={[{ message: '联系人地址' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="联系人乘车" name="ride" rules={[{ message: '联系人乘车' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="联系人地标" name="landmarks" rules={[{ message: '联系人地标' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="联系人住宿" name="stay" rules={[{ message: '联系人住宿' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="备注" name="mark" rules={[{ message: '备注' }]}>
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  )
}

export default Addcontact