feat: 11

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

@@ -4,10 +4,11 @@ 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 ClientDetail from '@/pages/Customer/Client/components/ClientDetail'
+import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
 import { Badge } from 'antd'
 import { cardTypeMap } from '../consts'
-// import { useModal } from '@/components/Modal'
+import { useModal } from '@/components/Modal'
 
 const dataTypeEunm = {
   0: {
@@ -44,20 +45,50 @@ const renderBadge = (count, active = false) => {
 
 /** 服务环比数据Tab切换表格 */
 const ServiceRatioPanels = ({ staffIds, cyclical, dataPermission }) => {
+  const { toggleDrawer, setDrawerProps } = useModal()
   const activeKeyMap = {
-    0: { key: 'clientName', title: '联系人' },
-    1: { key: 'customerName', title: '客户' },
-    2: { key: 'businessName', title: '商机' }
+    0: { key: 'clientName', title: '联系人', id: 'clientId' },
+    1: { key: 'customerName', title: '客户', id: 'customerId' },
+    2: { key: 'businessName', title: '商机', id: 'businessId' }
   }
   const [state, setState] = useState({
+    orderIds: [],
     activeKey: '0',
     total: 0
   })
+  const showDrawer = id => {
+    let children = null
+    if (state.activeKey === 0) {
+      children = <ContactDetail dataId={id} orderIds={state.orderIds} />
+    }
+    if (state.activeKey === 1) {
+      children = <CompanyDetail dataId={id} orderIds={state.orderIds} />
+    }
+    setDrawerProps({
+      zIndex: '1200',
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children
+    })
+    toggleDrawer()
+  }
   const columns = [
     {
       dataIndex: activeKeyMap[state.activeKey].key,
       title: `${activeKeyMap[state.activeKey].title}名称`,
       width: '20%'
+      // render: (text, record) => (
+      //   // console.log(record[activeKeyMap[state.activeKey].id])
+      //   <span
+      //     onClick={() => showDrawer(record.id)}
+      //     className="text-primary cursor-pointer hover:text-[#967bbd]">
+      //     {text}
+      //   </span>
+      // )
     },
     {
       dataIndex: 'status',
@@ -147,36 +178,50 @@ const ServiceRatioPanels = ({ staffIds, cyclical, dataPermission }) => {
 }
 
 const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission }) => {
-  // const { toggleDrawer, setDrawerProps } = useModal()
-  // const state = {
-  //   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 { toggleDrawer, setDrawerProps } = useModal()
+  const state = {
+    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 showDrawerComapny = id => {
+    setDrawerProps({
+      zIndex: '1200',
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <CompanyDetail dataId={id} orderIds={state.orderIds} />
+    })
+    toggleDrawer()
+  }
   const columnsMap = {
     0: [
       {
         dataIndex: 'clientName',
         title: '联系人名称',
-        width: '10%'
-        // render: (clientName, record) => (
-        //   <span
-        //     onClick={() => showDrawer(record.id)}
-        //     className="text-primary cursor-pointer hover:text-[#967bbd]">
-        //     {clientName}
-        //   </span>
-        // )
+        width: '10%',
+        render: (clientName, record) => (
+          <span
+            onClick={() => showDrawer(record.id)}
+            className="text-primary cursor-pointer hover:text-[#967bbd]">
+            {clientName}
+          </span>
+        )
       },
       {
         dataIndex: 'companyName',
@@ -218,7 +263,14 @@ const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission }) => {
       {
         dataIndex: 'companyName',
         title: '客户名称',
-        width: '16%'
+        width: '16%',
+        render: (companyName, record) => (
+          <span
+            onClick={() => showDrawerComapny(record.id)}
+            className="text-primary cursor-pointer hover:text-[#967bbd]">
+            {companyName}
+          </span>
+        )
       },
       {
         dataIndex: 'districtName',