feat: 客户、单位下详情抽屉增加云版列表

src/pages/Customer/Client/components/ClientDetail/TabList.jsx

@@ -1,4 +1,4 @@
-import { Button, message, Tabs, Tag, Typography } from 'antd'
+import { Button, message, Table, Tabs, Tag, Typography } from 'antd'
 import React, { useEffect, useState, useRef } from 'react'
 import consts from '@/consts'
 import { apiAddService } from '@/services/customer'
@@ -10,8 +10,9 @@ import { ProductLabel } from '@/pages/Product/Lock/LockStore/index'
 import { useModal } from '@/components/ModalStore'
 import { Plus } from '@icon-park/react'
 import classNames from 'classnames'
-import { queryRoadPricingListByClientId } from '@/services/product'
+import { queryRoadPricingListWithParams } from '@/services/product'
 import { cloudTitleEnum } from '@/pages/Product/Cloud/components/Detail/Form'
+const { TabPane } = Tabs
 
 const ClientTabList = ({ clientId, software, updatePayload }) => {
   const { Text } = Typography
@@ -19,9 +20,10 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
   const dispatchModal = useModal()
   const [state, setState] = useState({
     params: {},
-    visible: false
+    cloud: [],
+    loading: false // 云版表格loading
   })
-  const [clientHeight] = useState((document.body.clientHeight - 48 - 92 - 64 - 120) / 2)
+  const clientHeight = (document.body.clientHeight - 48 - 92 - 64 - 120) / 2
 
   const columns = [
     {
@@ -33,7 +35,8 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
           onClick={() => dispatchModal('D_LOCK_DETAIL', { dataId: record.id })}
           className={classNames('cursor-pointer hover:text-hex-967bbd', {
             'text-primary': record.preserveStatus !== 3
-          })}>
+          })}
+        >
           {record.preserveStatus === 3 ? (
             <Text delete type="secondary">
               {clientName}
@@ -120,7 +123,9 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
       dataIndex: 'project_type',
       title: '云版名称',
       width: '20%',
-      renderText: text => cloudTitleEnum[text]
+      filters: Object.keys(cloudTitleEnum).map(item => ({ text: cloudTitleEnum[item], value: item })),
+      onFilter: (projectType, record) => record.project_type.toString() === projectType,
+      render: text => cloudTitleEnum[text]
     },
     {
       dataIndex: 'mobile',
@@ -134,7 +139,8 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
               dataId: record.ssoId,
               projectType: record.project_type
             })
-          }>
+          }
+        >
           {text}
         </div>
       )
@@ -164,13 +170,7 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
     }
   ]
 
-  const [addService, setAddService] = useState({
-    visible: false,
-    loading: false
-  })
-
   const handleAddService = async values => {
-    setAddService({ ...addService, loading: true })
     const { code = -1 } = await apiAddService({ ...values, clientId })
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('新增成功')
@@ -179,21 +179,31 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
         type: 'refresh/commitAction',
         payload: updatePayload
       })
-      setState({ ...state, data: values })
     }
     // 请求完了
-    setAddService({ ...addService, loading: false, visible: false })
     return code === consts.RET_CODE.SUCCESS
   }
+
+  const initCloudData = async () => {
+    setState({ ...state, loading: true })
+    const { code, data } = await queryRoadPricingListWithParams({ clientId })
+    setState({ ...state, cloud: data, loading: false })
+  }
+
+  const handleTabChange = activeKey => {
+    if (activeKey === '2') {
+      initCloudData()
+    }
+  }
   useEffect(() => {
     setState({ ...state, params: { ...state.params, clientId } })
   }, [clientId])
-  const { TabPane } = Tabs
+
   return (
     <div>
       <div className="pl-15px">
-        <Tabs>
-          <TabPane tab={<span>软件锁{renderBadge(software.total, true)}</span>} key="软件锁">
+        <Tabs onChange={handleTabChange}>
+          <TabPane tab={<span>软件锁{renderBadge(software.total, true)}</span>} key="1">
             <ProTable
               className="sheet-right-panel"
               columns={columns}
@@ -206,24 +216,18 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
               scroll={{ y: clientHeight }}
             />
           </TabPane>
-          {/* <TabPane tab="云版">
-            <ProTable
+          <TabPane tab="云版" key="2">
+            <Table
               className="sheet-right-panel"
+              loading={state.loading}
+              size="small"
               columns={cloudColumns}
-              search={false}
-              toolBarRender={false}
-              rowKey={record => record._id}
+              rowKey="_id"
               pagination={false}
               scroll={{ y: clientHeight }}
-              request={async () => {
-                const { code, data } = await queryRoadPricingListByClientId({ clientId })
-                return {
-                  success: code === consts.RET_CODE.SUCCESS,
-                  data
-                }
-              }}
+              dataSource={state.cloud}
             />
-          </TabPane> */}
+          </TabPane>
         </Tabs>
       </div>
       <div className="sheet-btns pl-15px pt-15px :not-first:ml-1">
@@ -232,7 +236,8 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
           ghost
           size="small"
           className="mr-1"
-          onClick={() => dispatchModal('M_RECORD_ADD', { onConfirm: handleAddService })}>
+          onClick={() => dispatchModal('M_RECORD_ADD', { onConfirm: handleAddService })}
+        >
           <Plus className="mr-1" /> 添加服务记录
         </Button>
       </div>

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useState } from 'react'
-import { Tabs, message, Dropdown, Menu, Typography, Button, Table } from 'antd'
+import { Tabs, message, Dropdown, Menu, Typography, Button, Table, Tag } from 'antd'
 import { apiAddClient, apiAddCustomerService, updateClient } from '@/services/customer'
 import { formatValues } from '@/components/LazyCascader'
 import consts from '@/consts'
@@ -15,17 +15,28 @@ import { useModal } from '@/components/ModalStore'
 import { Plus } from '@icon-park/react'
 import { VList } from 'virtuallist-antd'
 import classNames from 'classnames'
+import { queryRoadPricingListWithParams } from '@/services/product'
+import { cloudTitleEnum } from '@/pages/Product/Cloud/components/Detail/Form'
 
 const { Text } = Typography
+
+const tabEnum = {
+  CLIENT: '1',
+  SOFTWARE: '2',
+  BUSINESS: '3',
+  CLOUD: '4'
+}
 const CompanyTabList = ({ initData, customerId, client, software, customer, business, updatePayload }) => {
   const dispatch = useDispatch()
   const dispatchModal = useModal()
   const { TabPane } = Tabs
   const [state, setState] = useState({
     params: {},
-    visible: false
+    cloud: [],
+    loading: false // 云版loading
   })
-  const [clientHeight] = useState((document.body.clientHeight - 48 - 92 - 64 - 120) / 2)
+
+  const tableHeight = (document.body.clientHeight - 48 - 92 - 64 - 120) / 2
 
   const changePriority = async (key, clientId) => {
     const { code = -1 } = await updateClient({
@@ -75,7 +86,6 @@ const CompanyTabList = ({ initData, customerId, client, software, customer, busi
     {
       title: '所有部门',
       dataIndex: 'department',
-      onFilter: true,
       width: 100,
       filters: Array.from(
         new Set(client.client?.map(item => item.department)).map(item => ({
@@ -212,56 +222,97 @@ const CompanyTabList = ({ initData, customerId, client, software, customer, busi
       )
     }
   ]
-  const columnBusiness = [
+  // const columnBusiness = [
+  //   {
+  //     title: '商机名称',
+  //     dataIndex: 'name',
+  //     width: 185,
+  //     render: (text, record) => (
+  //       <span
+  //         onClick={() => dispatchModal('D_BUSINESS_DETAIL', { dataId: record.id })}
+  //         className="text-primary cursor-pointer hover:text-hex-967bbd">
+  //         {text}
+  //       </span>
+  //     )
+  //   },
+  //   {
+  //     title: '状态',
+  //     width: 90,
+  //     dataIndex: 'businessStatusName'
+  //   },
+  //   {
+  //     title: '负责人',
+  //     width: 90,
+  //     dataIndex: 'responsible'
+  //   },
+  //   {
+  //     title: '商机金额',
+  //     width: 90,
+  //     dataIndex: 'price'
+  //   },
+  //   {
+  //     title: '预计成交',
+  //     width: 90,
+  //     dataIndex: 'finalTime'
+  //   }
+  // ]
+
+  const cloudColumns = [
+    {
+      dataIndex: 'project_type',
+      title: '云版名称',
+      width: '20%',
+      filters: Object.keys(cloudTitleEnum).map(item => ({ text: cloudTitleEnum[item], value: item })),
+      onFilter: (projectType, record) => record.project_type.toString() === projectType,
+      render: text => cloudTitleEnum[text]
+    },
     {
-      title: '商机名称',
-      dataIndex: 'name',
-      width: 185,
+      dataIndex: 'mobile',
+      title: '账号',
+      width: '20%',
       render: (text, record) => (
-        <span
-          onClick={() => dispatchModal('D_BUSINESS_DETAIL', { dataId: record.id })}
+        <div
           className="text-primary cursor-pointer hover:text-hex-967bbd"
+          onClick={() =>
+            dispatchModal('D_CLOUD_DETAIL', {
+              dataId: record.ssoId,
+              projectType: record.project_type
+            })
+          }
         >
           {text}
-        </span>
+        </div>
       )
     },
     {
-      title: '状态',
-      width: 90,
-      dataIndex: 'businessStatusName'
-    },
-    {
-      title: '负责人',
-      width: 90,
-      dataIndex: 'responsible'
-    },
-    {
-      title: '商机金额',
-      width: 90,
-      dataIndex: 'price'
+      dataIndex: 'real_name',
+      title: '姓名',
+      width: '20%'
     },
     {
-      title: '预计成交',
-      width: 90,
-      dataIndex: 'finalTime'
+      dataIndex: 'upgrade_list',
+      title: '已升级专业版',
+      width: '40%',
+      render: text => (
+        <div className="children:m-2px">
+          {text
+            .filter(item => item.isUpgrade)
+            .map(item => {
+              return (
+                <Tag color="purple" key={item.compilationID}>
+                  {item.name}
+                </Tag>
+              )
+            })}
+        </div>
+      )
     }
   ]
-
-  const [addCustomerService, setAddCustomerService] = useState({
-    visible: false,
-    loading: false
-  })
-
   const handleAddCustomerService = async values => {
-    setAddCustomerService({ ...addCustomerService, loading: true })
     const { code = -1 } = await apiAddCustomerService({ ...values, customerId })
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('新增成功')
-      setState({ ...state, data: values })
       // 请求完了
-      setAddCustomerService({ ...addCustomerService, loading: false, visible: false })
-      // 刷新数据
       dispatch({
         type: 'refresh/commitAction',
         payload: updatePayload
@@ -285,17 +336,37 @@ const CompanyTabList = ({ initData, customerId, client, software, customer, busi
     return code === consts.RET_CODE.SUCCESS
   }
 
-  const vList = useMemo(() => {
+  const initCloudData = async () => {
+    setState({ ...state, loading: true })
+    const { data = [] } = await queryRoadPricingListWithParams({ customerId })
+    setState({ ...state, cloud: data, loading: false })
+  }
+
+  const handleTabChange = activeKey => {
+    if (activeKey === tabEnum.CLOUD) {
+      initCloudData()
+    }
+  }
+
+  // 联系人虚拟表格
+  const vClientList = useMemo(() => {
     return VList({
-      height: clientHeight,
+      height: tableHeight,
       vid: 'client_list'
     })
   }, [])
+  // 云版虚拟表格
+  const vCloudList = useMemo(() => {
+    return VList({
+      height: tableHeight,
+      vid: 'cloud_list'
+    })
+  }, [])
   return (
     <div>
       <div className="pl-15px">
-        <Tabs>
-          <TabPane tab={<span>客户{renderBadge(client.total, true)}</span>} key="1">
+        <Tabs onChange={handleTabChange}>
+          <TabPane tab={<span>客户{renderBadge(client.total, true)}</span>} key={tabEnum.CLIENT}>
             <div className="sheet-right-panel">
               <Table
                 rowKey="id"
@@ -303,12 +374,12 @@ const CompanyTabList = ({ initData, customerId, client, software, customer, busi
                 columns={columns}
                 dataSource={client.client}
                 pagination={false}
-                scroll={{ y: clientHeight }}
-                components={vList}
+                scroll={{ y: tableHeight }}
+                components={vClientList}
               />
             </div>
           </TabPane>
-          <TabPane tab={<span>软件锁{renderBadge(software.total, true)}</span>} key="2">
+          <TabPane tab={<span>软件锁{renderBadge(software.total, true)}</span>} key={tabEnum.SOFTWARE}>
             <div className="sheet-right-panel">
               <ProTable
                 size="small"
@@ -318,11 +389,24 @@ const CompanyTabList = ({ initData, customerId, client, software, customer, busi
                 rowKey={record => record.id}
                 dataSource={software.longle}
                 pagination={false}
-                scroll={{ y: clientHeight }}
+                scroll={{ y: tableHeight }}
               />
             </div>
           </TabPane>
-          {/* <TabPane tab={<span>商机{renderBadge(business.total, true)}</span>} key="3">
+          <TabPane tab="云版" key={tabEnum.CLOUD}>
+            <Table
+              className="sheet-right-panel"
+              size="small"
+              loading={state.loading}
+              columns={cloudColumns}
+              rowKey="_id"
+              pagination={false}
+              scroll={{ y: tableHeight }}
+              components={vCloudList}
+              dataSource={state.cloud}
+            />
+          </TabPane>
+          {/* <TabPane tab={<span>商机{renderBadge(business.total, true)}</span>} key={tabEnum.BUSINESS}>
             <div className="sheet-right-panel">
               <ProTable
                 size="small"

src/services/product.js

@@ -197,7 +197,7 @@ export async function apiRoadPricingDeadline(payload) {
 }
 
 /** 根据客户id获得云版所有账号信息 */
-export async function queryRoadPricingListByClientId(params) {
+export async function queryRoadPricingListWithParams(params) {
   return request('/Roadpricing/all/rp/account', {
     params
   })