feat: 仪表盘新增联系人弹窗详情

src/pages/workbench/Dashboard/components/RatioPanels.jsx

@@ -4,8 +4,10 @@ import CustomModal from '@/components/Modal/src/components/CustomModal'
 import { queryRatioPanelsList, queryServiceRatioPanelsList } from '@/services/dashboard'
 import consts from '@/consts'
 import { servicelogEnum } from '@/pages/Customer/Company/components/CompanyDetail/LowerList'
+import ClientDetail from '@/pages/Customer/Client/components/ClientDetail'
 import { Badge } from 'antd'
 import { cardTypeMap } from '../consts'
+import { useModal } from '@/components/Modal'
 
 const dataTypeEunm = {
   0: {
@@ -51,7 +53,6 @@ const ServiceRatioPanels = ({ cyclical, dataPermission }) => {
     activeKey: '0',
     total: 0
   })
-
   const columns = [
     {
       dataIndex: activeKeyMap[state.activeKey].key,
@@ -141,12 +142,36 @@ const ServiceRatioPanels = ({ cyclical, dataPermission }) => {
 }
 
 const RatioPanels = ({ dataType, retioCyclical, dataPermission }) => {
+  const { toggleDrawer, setDrawerProps } = useModal()
+  const [state, setState] = useState({
+    orderIds: []
+  })
+  const showDrawer = id => {
+    setDrawerProps({
+      zIndex: '1200',
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <ClientDetail dataId={id} orderIds={state.orderIds} />
+    })
+    toggleDrawer()
+  }
   const columnsMap = {
     0: [
       {
         dataIndex: 'clientName',
         title: '联系人名称',
-        width: '13%'
+        width: '13%',
+        render: (clientName, record) => (
+          <span
+            onClick={() => showDrawer(record.id)}
+            className="text-primary cursor-pointer hover:text-[#967bbd]">
+            {clientName}
+          </span>
+        )
       },
       {
         dataIndex: 'companyName',

src/pages/workbench/Dashboard/index.jsx

@@ -44,6 +44,9 @@ const Dashboard = () => {
   // 展示卡片详情
   const handleRatioCard = dataType => {
     setModalProps({
+      zIndex: '1100',
+      closable: true,
+      onClose: () => toggleModal(),
       width: '90vw',
       modalRender: () => (
         <RatioPanels
@@ -51,8 +54,7 @@ const Dashboard = () => {
           retioCyclical={state.params.cyclical}
           dataPermission={state.params.dataPermission}
         />
-      ),
-      onCancel: () => toggleModal()
+      )
     })
     toggleModal()
   }