客户下的联系人列表

src/pages/Customer/Company/components/CompanyDetail/CompanyTabList.jsx

@@ -1,16 +1,45 @@
-import React from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { Tabs, message } from 'antd'
 // import SvgIcon from '@/components/SvgIcon'
 import AddContact from '@/pages/customer/Contact/components/AddContact'
 import { apiAddClient } from '@/services/contact'
 import { formatValues } from '@/components/LazyCascader'
 import consts from '@/consts'
+import ProTable from '@ant-design/pro-table'
+import { queryContact } from '@/services/contact'
 
 const CompanyTabList = ({ initData, customerId }) => {
   const { TabPane } = Tabs
+  const tRef = useRef()
+  const columns = [
+    {
+      title: '所有部门',
+      dataIndex: 'department'
+    },
+    {
+      title: '姓名',
+      dataIndex: 'clientName'
+    },
+    {
+      title: '昵称',
+      dataIndex: 'niceName'
+    },
+    {
+      title: '手机',
+      dataIndex: 'telephone'
+    },
+    {
+      title: 'QQ',
+      dataIndex: 'qq'
+    }
+  ]
+  const [state, setState] = useState({
+    id: '',
+    params: {},
+    visible: false
+  })
   const handleAddClient = async values => {
     // 客户id
-
     const payload = formatValues({ ...values, customerId })
     const { code = -1, msg = '新增失败' } = await apiAddClient(payload)
     if (code === consts.RET_CODE.SUCCESS) {
@@ -24,7 +53,26 @@ const CompanyTabList = ({ initData, customerId }) => {
         <Tabs>
           <TabPane tab="联系人" key="联系人">
             <div className="sheet-right-panel">
-              联系人
+              <ProTable
+                columns={columns}
+                search={false}
+                toolBarRender={false}
+                params={state.params}
+                actionRef={tRef}
+                rowKey={record => record.id}
+                request={async (params, sort, filter) => {
+                  const {
+                    code = -1,
+                    data: { client = [], total = 0 }
+                  } = await queryContact({ ...params, ...sort, ...filter })
+                  return {
+                    data: client,
+                    success: code === consts.RET_CODE.SUCCESS,
+                    total
+                  }
+                }}
+                pagination={false}
+              />
               {/* <Table columns={curingcolumns} dataSource={curinglist} pagination={false} /> */}
             </div>
           </TabPane>
@@ -37,14 +85,6 @@ const CompanyTabList = ({ initData, customerId }) => {
         {/* <Button type="primary" ghost>
           <SvgIcon type="icon-link" /> 绑定加密锁
         </Button> */}
-        {/* <Button
-          type="primary"
-          ghost
-          size="small"
-          // onClick={() => setAddService({ ...setAddService, visible: true })}
-        >
-          <SvgIcon type="icon-plus" /> 添加联系人
-        </Button> */}
         <AddContact onConfirm={handleAddClient} key="addContactBtn" />
       </div>
     </div>