组件调整

src/basic

@@ -1 +1 @@
-Subproject commit 5720d2fcd920829b2ec02196281d5bc5a0a0ec07
+Subproject commit 5ccf301342abade5ff0b1d34c830bf41cbf5dc71

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -0,0 +1,235 @@
+import {
+  Form,
+  Row,
+  Col,
+  Input,
+  Button,
+  Cascader,
+  Select,
+  Tag
+} from 'antd'
+import React, { useEffect } from 'react'
+// eslint-disable-next-line import/no-unresolved
+import '../Contacts/index.scss'
+
+const ContanctForm = props =>  {
+  // 浏览器实际宽度
+  useEffect(() => {
+  }, [])
+  const [ form ] = Form.useForm()
+  const {
+    onCreate
+  } = props
+  const residences = [
+    {
+      value: '广东省',
+      label: '广东省',
+      children: [
+        {
+          value: '珠海市',
+          label: '珠海市',
+          children: [
+            {
+              value: '香洲区',
+              label: '香洲区'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      value: '安徽省',
+      label: '安徽省',
+      children: [
+        {
+          value: '合肥市',
+          label: '合肥市',
+          children: [
+            {
+              value: '庐阳区',
+              label: '庐阳区'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+  return (
+    <div>
+      <Row>
+        <Col span={12}>
+          <h2>刘泽富</h2>
+        </Col>
+        {/* className={[ 'text-right', styles.textMuted ]} */}
+        <Col span={12} className="zh-text-right zh-gray">
+          陈特 创建于 2019年5月6日 14:55
+        </Col>
+      </Row>
+      <Form layout="vertical" form={form}>
+        <Form.Item
+          label="姓名"
+          name="clientname"
+          rules={[ { required: false, message: '姓名' } ]}>
+          <Input value="刘泽富" />
+        </Form.Item>
+        <Form.Item
+          label="联系人地区"
+          name="local"
+          rules={[ { required: false, message: '地区' } ]}>
+          <Cascader options={residences} />
+        </Form.Item>
+        <Form.Item
+          label="客户名称"
+          name="companyname"
+          rules={[ { required: false, message: '客户名称' } ]}>
+          <Input value="刘泽富" />
+        </Form.Item>
+        <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} />
+        </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>
+        <Form.Item
+          label="办公室"
+          name=""
+          rules={[ { required: false, message: '办公室' } ]}>
+          <Input value="" />
+        </Form.Item>
+        <Form.Item
+          label="联系人地址"
+          name=""
+          rules={[ { required: false, message: '联系人地址' } ]}>
+          <Input value="" />
+        </Form.Item>
+        <Form.Item
+          label="联系人乘车"
+          name=""
+          rules={[ { required: false, message: '联系人乘车' } ]}>
+          <Input value="" />
+        </Form.Item>
+        <Form.Item
+          label="联系人地标"
+          name=""
+          rules={[ { required: false, message: '联系人地标' } ]}>
+          <Input value="" />
+        </Form.Item>
+        <Form.Item
+          label="联系人住宿"
+          name=""
+          rules={[ { required: false, message: '联系人住宿' } ]}>
+          <Input value="" />
+        </Form.Item>
+        <Form.Item label="备注" name="" rules={[ { required: false, message: '备注' } ]}>
+          <Input value="" />
+        </Form.Item>
+        <Form.Item label="个人标签">
+          <span className="ant-form-text">
+            <Tag color="#16A085">标签</Tag>
+            <Tag color="#2980B9">特别关注</Tag>
+          </span>
+        </Form.Item>
+        <Form.Item label="协作标签">
+          <span className="ant-form-text">
+            <Tag color="#F8AC59">协作标签1</Tag>
+            <Tag color="#FF69B4">协作标签2</Tag>
+          </span>
+        </Form.Item>
+      </Form>
+      <Button
+        type="primary"
+        className="ant-btn ant-btn-primary"
+        onClick={() => {
+          form
+            .validateFields()
+            .then(values => {
+              onCreate(values)
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        }}>
+        确定
+      </Button>
+    </div>
+  )
+}
+
+export default ContanctForm

src/components/PopContent/Contacts/ContanctLowerList.jsx

@@ -0,0 +1,85 @@
+import {
+  Tabs,
+  Table,
+  List
+} from 'antd'
+import React, { useEffect } from 'react'
+import { connect } from 'dva'
+// eslint-disable-next-line import/no-unresolved
+import '../Contacts/index.scss'
+
+const ContanctLowerList = props =>  {
+  useEffect(() => {
+    const journallistData = () => {
+      const { dispatch } = props
+      dispatch({
+        type: 'journallist/fetch'
+      }) // 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
+    }
+    journallistData()
+    const servicelisData = () => {
+      const { dispatch } = props
+      dispatch({
+        type: 'servicelist/fetch'
+      }) // 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
+    }
+    servicelisData()
+  }, [])
+  const { TabPane } = Tabs
+  const {
+    journalName,
+    servicelistName
+  } = props
+  const journallist = [ ...journalName.list ]
+  const servicelist = [ ...servicelistName.lists ]
+  const servicecolumns = [
+    {
+      title: '类型/时间',
+      dataIndex: 'typedate',
+      key: 'typedate'
+    },
+    {
+      title: '服务内容',
+      dataIndex: 'servicecont',
+      key: 'servicecont'
+    }
+  ]
+  return (
+    <div>
+      <div className="sheet-panel-record zh-pd-left-15">
+        <Tabs type="card">
+          <TabPane tab="服务记录" key="服务记录">
+            <Table
+              columns={servicecolumns}
+              dataSource={servicelist}
+              pagination={false}
+            />
+          </TabPane>
+          <TabPane tab="日志" key="日志">
+            <List
+              dataSource={journallist}
+              split={false}
+              renderItem={item => (
+                <List.Item>
+                  <List.Item.Meta
+                    // avatar=
+                    title={item.operation}
+                    description={item.date}
+                  />
+                </List.Item>
+              )}
+            />
+          </TabPane>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+
+// export default ContanctLowerList
+
+export default connect(({ journallist, servicelist, loading }) => ({
+  journalName: journallist,
+  servicelistName:servicelist,
+  getlist: loading.effects['journallist/fetch']
+}))(ContanctLowerList)

src/components/PopContent/Contacts/ContanctTabList.jsx

@@ -0,0 +1,47 @@
+import {
+  Tabs,
+  Button
+} from 'antd'
+import React, { useEffect } from 'react'
+import SvgIcon from '@/components/SvgIcon'
+// eslint-disable-next-line import/no-unresolved
+import '../Contacts/index.scss'
+
+const ContanctTabList = () =>  {
+  useEffect(() => {
+  }, [])
+  const { TabPane } = Tabs
+  return (
+    <div>
+      <div className="sheet-right-panel zh-pd-left-15">
+        {/* <Tabs onChange={callback} type="card"> */}
+        <Tabs type="card">
+          <TabPane tab="养护云造价" key="养护云造价">
+            Content of Tab Pane 1
+          </TabPane>
+          <TabPane tab="大司空云计价" key="大司空云计价">
+            Content of Tab Pane 2
+          </TabPane>
+          <TabPane tab="软件锁" key="软件锁">
+            Content of Tab Pane 3
+          </TabPane>
+          <TabPane tab="通行账号" key="通行账号">
+            Content of Tab Pane 3
+          </TabPane>
+        </Tabs>
+      </div>
+      <div className="sheet-btns zh-pd-left-15 zh-pd-top-15">
+        <Button type="primary" ghost>
+          <SvgIcon type="icon-link" /> 绑定加密锁
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default ContanctTabList
+
+// export default connect(({ journallist, loading }) => ({
+//   journalName: journallist,
+//   getlist: loading.effects['journallist/fetch']
+// }))(ContanctTabList)

src/components/PopContent/Contacts/index.jsx

@@ -0,0 +1,54 @@
+import {
+  Drawer,
+  Row,
+  Col
+} from 'antd'
+import React, { useState, useEffect } from 'react'
+import "../index.scss"
+import ContanctForm from '@/components/PopContent/Contacts/ContanctForm'
+
+const Popcontent = 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
+  } = props
+  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 zh-pd-right-15">
+            <ContanctForm/>
+          </div>
+        </Col>
+      </Row>
+      </div>
+    </div>
+  )
+}
+
+export default Popcontent
+
+// export default connect(({ journallist, loading }) => ({
+//   journalName: journallist,
+//   getlist: loading.effects['journallist/fetch']
+// }))(Popcontent)

src/pages/Customer/Contact/index.jsx

@@ -1,4 +1,4 @@
-import Popcontent from '@/components/PopContent'
+import Contacts from '@/components/PopContent/Contacts'
 import ProTable from '@ant-design/pro-table'
 // import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { Button, Card, Tag } from 'antd'
@@ -294,7 +294,7 @@ const Contact = props => {
           </Button>
         ]}
       />
-      <Popcontent onClose={hideDrawer} visible={visible} onCreate={onCreate} />
+      <Contacts onClose={hideDrawer} visible={visible} onCreate={onCreate} />
     </Card>
   )
 }