框架优化

src/assets/css/common.less

@@ -1,3 +1,14 @@
 .text-right {
   text-align: right;
 }
+.pr-4{
+  padding-right: 1.5rem;
+}
+.pl-4{
+  padding-left: 1.5rem;
+}
+.sheet-left-panel,.sheet-right-panel{
+  height: 834px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}

src/components/PopContactForm/index.jsx

@@ -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>

src/components/PopContactForm/index.less

@@ -1,4 +1,4 @@
 @import '~antd/es/style/themes/default.less';
-// .textRight{
-//   text-align: right;
-// }
+.textMuted{
+  color: #868e96;
+}