feat: 联系人抽屉式表单详情接口接入

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -1,25 +1,18 @@
-import {
-  Form,
-  Row,
-  Col,
-  Input,
-  Button,
-  Cascader,
-  Select,
-  Tag
-} from 'antd'
+import consts from '@/consts'
+import { apiContactDetail } from '@/services/contact'
+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 =>  {
+const ContanctForm = props => {
+  const { client } = props
+  const [form] = Form.useForm()
   // 浏览器实际宽度
+
   useEffect(() => {
+    form.setFieldsValue(client)
   }, [])
-  const [ form ] = Form.useForm()
-  const {
-    onCreate
-  } = props
   const residences = [
     {
       value: '广东省',
@@ -66,30 +59,21 @@ const ContanctForm = props =>  {
         </Col>
       </Row>
       <Form layout="vertical" form={form}>
-        <Form.Item
-          label="姓名"
-          name="clientname"
-          rules={[ { required: false, message: '姓名' } ]}>
+        <Form.Item label="姓名" name="clientname" rules={[{ required: false, message: '姓名' }]}>
           <Input value="刘泽富" />
         </Form.Item>
-        <Form.Item
-          label="联系人地区"
-          name="local"
-          rules={[ { required: false, message: '地区' } ]}>
+        <Form.Item label="联系人地区" name="local" rules={[{ required: false, message: '地区' }]}>
           <Cascader options={residences} />
         </Form.Item>
         <Form.Item
           label="客户名称"
           name="companyname"
-          rules={[ { required: false, message: '客户名称' } ]}>
+          rules={[{ required: false, message: '客户名称' }]}>
           <Input value="刘泽富" />
         </Form.Item>
         <Row gutter={16}>
           <Col span={12}>
-            <Form.Item
-              label="性别"
-              name=""
-              rules={[ { required: false, message: '性别' } ]}>
+            <Form.Item label="性别" name="gender" rules={[{ required: false, message: '性别' }]}>
               <Select>
                 <Select.Option value="男">男</Select.Option>
                 <Select.Option value="女">女</Select.Option>
@@ -97,53 +81,38 @@ const ContanctForm = props =>  {
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item
-              label="昵称"
-              name=""
-              rules={[ { required: false, message: '昵称' } ]}>
+            <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: '手机' } ]}>
+            <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' } ]}>
+            <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: '电话' } ]}>
+            <Form.Item label="电话" name="" rules={[{ required: false, message: '电话' }]}>
               <Input value="" />
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item
-              label="邮箱"
-              name=""
-              rules={[ { required: false, message: '邮箱' } ]}>
+            <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: '传真' } ]}>
+            <Form.Item label="传真" name="" rules={[{ required: false, message: '传真' }]}>
               <Input value="" />
             </Form.Item>
           </Col>
@@ -151,53 +120,32 @@ const ContanctForm = props =>  {
         </Row>
         <Row gutter={16}>
           <Col span={12}>
-            <Form.Item
-              label="部门"
-              name=""
-              rules={[ { required: false, message: '部门' } ]}>
+            <Form.Item label="部门" name="" rules={[{ required: false, message: '部门' }]}>
               <Input value="" />
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item
-              label="职务"
-              name=""
-              rules={[ { required: false, message: '职务' } ]}>
+            <Form.Item label="职务" name="" rules={[{ required: false, message: '职务' }]}>
               <Input value="" />
             </Form.Item>
           </Col>
         </Row>
-        <Form.Item
-          label="办公室"
-          name=""
-          rules={[ { required: false, message: '办公室' } ]}>
+        <Form.Item label="办公室" name="" rules={[{ required: false, message: '办公室' }]}>
           <Input value="" />
         </Form.Item>
-        <Form.Item
-          label="联系人地址"
-          name=""
-          rules={[ { required: false, message: '联系人地址' } ]}>
+        <Form.Item label="联系人地址" name="" rules={[{ required: false, message: '联系人地址' }]}>
           <Input value="" />
         </Form.Item>
-        <Form.Item
-          label="联系人乘车"
-          name=""
-          rules={[ { required: false, message: '联系人乘车' } ]}>
+        <Form.Item label="联系人乘车" name="" rules={[{ required: false, message: '联系人乘车' }]}>
           <Input value="" />
         </Form.Item>
-        <Form.Item
-          label="联系人地标"
-          name=""
-          rules={[ { required: false, message: '联系人地标' } ]}>
+        <Form.Item label="联系人地标" name="" rules={[{ required: false, message: '联系人地标' }]}>
           <Input value="" />
         </Form.Item>
-        <Form.Item
-          label="联系人住宿"
-          name=""
-          rules={[ { required: false, message: '联系人住宿' } ]}>
+        <Form.Item label="联系人住宿" name="" rules={[{ required: false, message: '联系人住宿' }]}>
           <Input value="" />
         </Form.Item>
-        <Form.Item label="备注" name="" rules={[ { required: false, message: '备注' } ]}>
+        <Form.Item label="备注" name="" rules={[{ required: false, message: '备注' }]}>
           <Input value="" />
         </Form.Item>
         <Form.Item label="个人标签">

src/components/PopContent/Contacts/ContanctLowerList.jsx

@@ -1,35 +1,28 @@
-import {
-  Tabs,
-  Table,
-  List
-} from 'antd'
+import { Tabs, Table, List } from 'antd'
 import React, { useEffect } from 'react'
 import { connect } from 'umi'
 
-const ContanctLowerList = props =>  {
+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 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 { journalName, servicelistName } = props
+  const journallist = [...journalName.list]
+  const servicelist = [...servicelistName.lists]
   const servicecolumns = [
     {
       title: '类型/时间',
@@ -48,11 +41,7 @@ const ContanctLowerList = props =>  {
         <Tabs type="card">
           <TabPane tab="服务记录" key="服务记录">
             <div className="sheet-panel-record">
-              <Table
-                columns={servicecolumns}
-                dataSource={servicelist}
-                pagination={false}
-              />
+              <Table columns={servicecolumns} dataSource={servicelist} pagination={false} />
             </div>
           </TabPane>
           <TabPane tab="日志" key="日志">
@@ -82,6 +71,6 @@ const ContanctLowerList = props =>  {
 
 export default connect(({ journallist, servicelist, loading }) => ({
   journalName: journallist,
-  servicelistName:servicelist,
+  servicelistName: servicelist,
   getlist: loading.effects['journallist/fetch']
 }))(ContanctLowerList)

src/components/PopContent/Contacts/ContanctTabList.jsx

@@ -1,26 +1,20 @@
-import {
-  Tabs,
-  Button,
-  Table
-} from 'antd'
+import { Tabs, Button, Table } from 'antd'
 import React, { useEffect } from 'react'
 import SvgIcon from '@/components/SvgIcon'
 import { connect } from 'umi'
 
-const ContanctTabList = props =>  {
+const ContanctTabList = props => {
   useEffect(() => {
-    const curinglisData = () => {
-      const { dispatch } = props
-      dispatch({
-        type: 'curinglist/fetch'
-      }) // 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
-    }
-    curinglisData()
-  },[])
-  const {
-    curinglistName
-  } = props
-  const curinglist = [ ...curinglistName.list ]
+    // const curinglisData = () => {
+    //   const { dispatch } = props
+    //   dispatch({
+    //     type: 'curinglist/fetch'
+    //   }) // 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
+    // }
+    // curinglisData()
+  }, [])
+  const { curinglistName } = props
+  const curinglist = [...curinglistName.list]
   // console.log(curinglist)
   const { TabPane } = Tabs
   const curingcolumns = [
@@ -42,27 +36,17 @@ const ContanctTabList = props =>  {
         <Tabs type="card">
           <TabPane tab="养护云造价" key="养护云造价">
             <div className="sheet-right-panel">
-              <Table
-                columns={curingcolumns}
-                dataSource={curinglist}
-                pagination={false}
-              />
+              <Table columns={curingcolumns} dataSource={curinglist} pagination={false} />
             </div>
           </TabPane>
           <TabPane tab="大司空云计价" key="大司空云计价">
-            <div className="sheet-right-panel">
-            大司空云计价
-            </div>
+            <div className="sheet-right-panel">大司空云计价</div>
           </TabPane>
           <TabPane tab="软件锁" key="软件锁">
-            <div className="sheet-right-panel">
-            软件锁
-            </div>
+            <div className="sheet-right-panel">软件锁</div>
           </TabPane>
           <TabPane tab="通行账号" key="通行账号">
-            <div className="sheet-right-panel">
-            通行账号
-            </div>
+            <div className="sheet-right-panel">通行账号</div>
           </TabPane>
         </Tabs>
       </div>

src/components/PopContent/Contacts/index.jsx

@@ -1,22 +1,43 @@
 import { Drawer, Row, Col } from 'antd'
 import React, { useState, useEffect } from 'react'
-import "../index.scss"
+import '../index.scss'
 import ContanctForm from '@/components/PopContent/Contacts/ContanctForm.jsx'
 import ContanctTabList from '@/components/PopContent/Contacts/ContanctTabList.jsx'
 import ContanctLowerList from '@/components/PopContent/Contacts/ContanctLowerList.jsx'
+import { apiContactDetail } from '@/services/contact'
+import consts from '@/consts'
 
 const Popcontent = props => {
+  const { visible, onClose, id = '' } = props
+
+  console.log(props)
   // 浏览器实际宽度
-  const [ clientWidth, setClientWidth ] = useState(document.body.clientWidth * 0.75)
+  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
+  const [state, setState] = useState({
+    client: {},
+    log: []
+  })
+
+  const initData = async () => {
+    const {
+      data: { client = {} },
+      code = -1
+    } = await apiContactDetail(id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, client })
+    }
+  }
   useEffect(() => {
+    if (visible) {
+      initData()
+    }
     window.addEventListener('resize', () => {
       setClientWidth(document.body.clientWidth * 0.7)
     })
     return () => {
       window.removeEventListener('resize', () => {})
     }
-  }, [])
-  const { visible, onClose } = props
+  }, [visible])
   return (
     <div>
       <div className="sheet-box">
@@ -32,7 +53,7 @@ const Popcontent = props => {
           <Row>
             <Col span={12} className="sheet-box-left">
               <div className="sheet-left-panel zh-pd-right-15">
-                <ContanctForm />
+                <ContanctForm data={state.client} />
               </div>
             </Col>
             <Col span={12}>

src/pages/Customer/Contact/index.jsx

@@ -13,13 +13,12 @@ import LazyCascader from '@/components/LazyCascader'
 
 const Contact = props => {
   const [x, y] = useAutoTable(props.collapsed)
-  // index.jsx:12 1320 747
-  // let tag = Array.from(tag);
-  const [visible, setVisible] = useState(false)
 
   const [state, setState] = useState({
     data: [],
-    total: 0
+    total: 0,
+    id: '',
+    visible: false
   })
 
   const initData = async payload => {
@@ -32,13 +31,14 @@ const Contact = props => {
     }
   }
   // 展示drawer
-  const showDrawer = () => {
-    setVisible(true)
+  const showDrawer = id => {
+    // console.log(id);
+    setState({ ...state, id, visible: true })
   }
 
   // 隐藏drawer
   const hideDrawer = () => {
-    setVisible(false)
+    setState({ ...state, visible: false, id: '' })
   }
 
   const onCreate = values => {
@@ -56,7 +56,7 @@ const Contact = props => {
       key: 'clientname',
       width: 100,
       fixed: 'left',
-      render: clientname => <a onClick={showDrawer}>{clientname}</a>
+      render: (clientname, record) => <a onClick={() => showDrawer(record.id)}>{clientname}</a>
     },
     {
       title: '客户名称',
@@ -317,9 +317,7 @@ const Contact = props => {
             search: {
               onSearch: handleSearch
             },
-            actions:[
-              <LazyCascader onSelect={handleOnselect} key="LazyCascader"/>
-            ]
+            actions: [<LazyCascader onSelect={handleOnselect} key="LazyCascader" />]
           }}
           scroll={{ x, y }}
           columnsStateMap={columnsStateMap}
@@ -333,7 +331,7 @@ const Contact = props => {
           ]}
         />
       </div>
-      <Contacts onClose={hideDrawer} visible={visible} onCreate={onCreate} />
+      <Contacts onClose={hideDrawer} visible={state.visible} onCreate={onCreate} id={state.id} />
     </div>
   )
 }

src/services/contact.js

@@ -12,3 +12,13 @@ export async function queryContact(payload) {
     })
     return data
 }
+
+/**
+ * 获取联系人详情
+ * @param {string} id 联系人记录id
+ */
+export async function apiContactDetail(id) {
+    const params = { id }
+    const data = await request('/api/client/detail', { params })
+    return data
+}