|
@@ -1,10 +1,10 @@
|
|
|
-import { Button, Card, Drawer, Form, Input,Row, Col } from 'antd'
|
|
|
+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.7)
|
|
|
+ const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
|
|
|
useEffect(() => {
|
|
|
window.addEventListener('resize', () => {
|
|
|
setClientWidth(document.body.clientWidth * 0.7)
|
|
@@ -15,9 +15,47 @@ const Popcontactform = props => {
|
|
|
}, [])
|
|
|
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={styles.popDrawer}>
|
|
|
+ <div className="sheet-box">
|
|
|
<Drawer
|
|
|
title="联系人"
|
|
|
placement="right"
|
|
@@ -27,32 +65,257 @@ const Popcontactform = props => {
|
|
|
visible={visible}
|
|
|
// mask={false}
|
|
|
>
|
|
|
- {/* className={styles.formTextmuted} */}
|
|
|
<Row>
|
|
|
- <Col span={12}><h2>刘泽富</h2></Col>
|
|
|
- <Col span={12} className={styles.textRight}>陈特 创建于 2019年5月6日 14:55</Col>
|
|
|
+ <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>
|
|
|
- <Form layout="inline" form={form}>
|
|
|
- <Form.Item name="code" rules={[{ required: true, message: '请输入编号' }]}>
|
|
|
- <Input />
|
|
|
- </Form.Item>
|
|
|
- </Form>
|
|
|
- {/* <Card title="联系人" bordered={false} extra={<span>陈特 创建于 2019年5月6日 14:55</span>}>
|
|
|
- <h3>张三</h3>
|
|
|
- </Card> */}
|
|
|
- <Button
|
|
|
- onClick={() => {
|
|
|
- form
|
|
|
- .validateFields()
|
|
|
- .then(values => {
|
|
|
- onCreate(values)
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- }}>
|
|
|
- 保存
|
|
|
- </Button>
|
|
|
</Drawer>
|
|
|
</div>
|
|
|
</div>
|