联系人抽屉客户弹窗

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

@@ -1,3 +1,4 @@
+import ContactDetail from '@/pages/customer/Contact/components/ContactDetail'
 import React, { useEffect, useState, useRef } from 'react'
 import { Tabs, message } from 'antd'
 // import SvgIcon from '@/components/SvgIcon'
@@ -6,11 +7,30 @@ import { apiAddClient } from '@/services/contact'
 import { formatValues } from '@/components/LazyCascader'
 import consts from '@/consts'
 import ProTable from '@ant-design/pro-table'
+import { useModal } from '@/components/Modal'
 // import { queryContact } from '@/services/contact'
 
 const CompanyTabList = ({ initData, customerId, client, software, departmentsMap }) => {
+  const { toggleDrawer, setDrawerProps } = useModal()
   const { TabPane } = Tabs
   const tRef = useRef(null)
+  const [state, setState] = useState({
+    id: '',
+    orderIds: []
+  })
+  // 展示drawer
+  const showDrawer = id => {
+    setDrawerProps({
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <ContactDetail dataId={id} orderIds={state.orderIds} />
+    })
+    toggleDrawer()
+  }
   const columns = [
     {
       title: '所有部门',
@@ -20,7 +40,14 @@ const CompanyTabList = ({ initData, customerId, client, software, departmentsMap
     },
     {
       title: '姓名',
-      dataIndex: 'clientName'
+      dataIndex: 'clientName',
+      render: (clientName, record) => (
+        <span
+          onClick={() => showDrawer(record.id)}
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          {clientName}
+        </span>
+      )
     },
     {
       title: '昵称',

src/pages/Customer/Contact/index.jsx

@@ -1,5 +1,5 @@
 import ContactDetail from '@/pages/customer/Contact/components/ContactDetail'
-import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
+import CompanyDetail from '@/pages/customer/Company/components/CompanyDetail'
 import Addcontact from '@/pages/customer/Contact/components/AddContact'
 import ProTable from '@ant-design/pro-table'
 import { Button, Card, message, Tag, Tooltip } from 'antd'