cldV2reactV1/src/components/PopContactForm/index.jsx

import { Button, Drawer, Form, Input, Row, Col, Tabs, Cascader, Select, Tag } from 'antd'
import React, { useState, useEffect } from 'react'
import styles from './index.less'

const Popcontactform = props => {
  // 浏览器实际宽度
  const [ clientWidth, setClientWidth ] = useState(document.body.clientWidth * 0.75)
  useEffect(() => {
    window.addEventListener('resize', () => {
      setClientWidth(document.body.clientWidth * 0.7)
    })
    return () => {
      window.removeEventListener('resize')
    }
  }, [])
  const { visible, onClose, onCreate } = props
  const [ form ] = Form.useForm()
  const { TabPane } = Tabs
  function callback(key) {
    console.log(key)
  }
  const residences = [
    {
      value: '广东省',
      label: '广东省',
      children: [
        {
          value: '珠海市',
          label: '珠海市',
          children: [
            {
              value: '香洲区',
              label: '香洲区'
            }
          ]
        }
      ]
    },
    {
      value: '安徽省',
      label: '安徽省',
      children: [
        {
          value: '合肥市',
          label: '合肥市',
          children: [
            {
              value: '庐阳区',
              label: '庐阳区'
            }
          ]
        }
      ]
    }
  ]
  return (
    <div>
      <div className="sheet-box">
        <Drawer
          title="联系人"
          placement="right"
          width={clientWidth}
          closable
          onClose={onClose}
          visible={visible}
          // mask={false}
        >
          <Row>
            <Col span={12} className="sheet-box-left">
              <div className="sheet-left-panel pr-4">
                <Row>
                  <Col span={12}>
                    <h2>刘泽富</h2>
                  </Col>
                  <Col span={12} className={[ 'text-right', styles.textMuted ]}>
                    陈特 创建于 2019年5月6日 14:55
                  </Col>
                </Row>
                <Form layout="vertical" form={form}>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="姓名"
                        name="clientname"
                        rules={[ { required: false, message: '姓名' } ]}>
                        <Input value="刘泽富" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="联系人地区"
                        name="local"
                        rules={[ { required: false, message: '地区' } ]}>
                        <Cascader options={residences} />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="客户名称"
                        name="companyname"
                        rules={[ { required: false, message: '客户名称' } ]}>
                        <Input value="刘泽富" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={12}>
                      <Form.Item
                        label="性别"
                        name=""
                        rules={[ { required: false, message: '性别' } ]}>
                        <Select>
                          <Select.Option value="男">男</Select.Option>
                          <Select.Option value="女">女</Select.Option>
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item
                        label="昵称"
                        name=""
                        rules={[ { required: false, message: '昵称' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={12}>
                      <Form.Item
                        label="手机"
                        name=""
                        rules={[ { required: false, message: '手机' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item label="QQ" name="" rules={[ { required: false, message: 'QQ' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={12}>
                      <Form.Item
                        label="电话"
                        name=""
                        rules={[ { required: false, message: '电话' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item
                        label="邮箱"
                        name=""
                        rules={[ { required: false, message: '邮箱' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={12}>
                      <Form.Item
                        label="传真"
                        name=""
                        rules={[ { required: false, message: '传真' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                    <Col span={12}></Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={12}>
                      <Form.Item
                        label="部门"
                        name=""
                        rules={[ { required: false, message: '部门' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item
                        label="职务"
                        name=""
                        rules={[ { required: false, message: '职务' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="办公室"
                        name=""
                        rules={[ { required: false, message: '办公室' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="联系人地址"
                        name=""
                        rules={[ { required: false, message: '联系人地址' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="联系人乘车"
                        name=""
                        rules={[ { required: false, message: '联系人乘车' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="联系人地标"
                        name=""
                        rules={[ { required: false, message: '联系人地标' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="联系人住宿"
                        name=""
                        rules={[ { required: false, message: '联系人住宿' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item
                        label="备注"
                        name=""
                        rules={[ { required: false, message: '备注' } ]}>
                        <Input value="" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item label="个人标签">
                        <span className="ant-form-text">
                          <Tag color="#16A085">标签</Tag>
                          <Tag color="#2980B9">特别关注</Tag>
                        </span>
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={24}>
                      <Form.Item label="协作标签">
                        <span className="ant-form-text">
                          <Tag color="#F8AC59">协作标签1</Tag>
                          <Tag color="#FF69B4">协作标签2</Tag>
                        </span>
                      </Form.Item>
                    </Col>
                  </Row>
                </Form>
                <Button
                  type="primary"
                  className="ant-btn ant-btn-primary"
                  onClick={() => {
                    form
                      .validateFields()
                      .then(values => {
                        onCreate(values)
                      })
                      .catch(err => {
                        console.log(err)
                      })
                  }}>
                  确定
                </Button>
              </div>
            </Col>
            <Col span={12}>
              <div className="sheet-right-panel pl-4">
                <Tabs onChange={callback} type="card">
                  <TabPane tab="Tab 1" key="1">
                    Content of Tab Pane 1
                  </TabPane>
                  <TabPane tab="Tab 2" key="2">
                    Content of Tab Pane 2
                  </TabPane>
                  <TabPane tab="Tab 3" key="3">
                    Content of Tab Pane 3
                  </TabPane>
                </Tabs>
              </div>
            </Col>
          </Row>
        </Drawer>
      </div>
    </div>
  )
}

export default Popcontactform