feat: 客户下新增云版列表

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

@@ -1,4 +1,4 @@
-import { Button, message, Tabs, Typography } from 'antd'
+import { Button, message, Tabs, Tag, Typography } from 'antd'
 import React, { useEffect, useState, useRef } from 'react'
 import consts from '@/consts'
 import { apiAddService } from '@/services/customer'
@@ -9,6 +9,8 @@ import { longleSellStatusNum, longlePreserveStatusNum } from '@/pages/Product/Lo
 import { ProductLabel } from '@/pages/Product/Lock/LockStore/index'
 import { useModal } from '@/components/ModalStore'
 import { Plus } from '@icon-park/react'
+import { queryRoadPricingListByClientId } from '@/services/product'
+import { cloudTitleEnum } from '@/pages/Product/Cloud/components/Detail/Form'
 
 const ClientTabList = ({ clientId, software, updatePayload }) => {
   const { Text } = Typography
@@ -19,7 +21,6 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
     visible: false
   })
   const [clientHeight] = useState((document.body.clientHeight - 48 - 92 - 64 - 120) / 2)
-  const tRef = useRef()
 
   const columns = [
     {
@@ -29,10 +30,9 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
       render: (clientName, record) => (
         <span
           onClick={() => dispatchModal('D_LOCK_DETAIL', { dataId: record.id })}
-          className={[
-            'cursor-pointer hover:text-hex-967bbd',
-            record.preserveStatus === 3 ? null : 'text-primary'
-          ].join(' ')}
+          className={['cursor-pointer hover:text-hex-967bbd', record.preserveStatus === 3 ? null : 'text-primary'].join(
+            ' '
+          )}
         >
           {record.preserveStatus === 3 ? (
             <Text delete type="secondary">
@@ -114,6 +114,57 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
       )
     }
   ]
+
+  const cloudColumns = [
+    {
+      dataIndex: 'project_type',
+      title: '云版名称',
+      width: '20%',
+      renderText: text => cloudTitleEnum[text]
+    },
+    {
+      dataIndex: 'mobile',
+      title: '账号',
+      width: '20%',
+      render: (text, record) => (
+        <div
+          className="text-primary cursor-pointer hover:text-hex-967bbd"
+          onClick={() =>
+            dispatchModal('D_CLOUD_DETAIL', {
+              dataId: record.ssoId,
+              projectType: record.project_type
+            })
+          }
+        >
+          {text}
+        </div>
+      )
+    },
+    {
+      dataIndex: 'real_name',
+      title: '姓名',
+      width: '20%'
+    },
+    {
+      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 [addService, setAddService] = useState({
     visible: false,
     loading: false
@@ -150,7 +201,6 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
                 search={false}
                 toolBarRender={false}
                 params={state.params}
-                actionRef={tRef}
                 rowKey={record => record.id}
                 dataSource={software.longle}
                 pagination={false}
@@ -158,6 +208,23 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
               />
             </div>
           </TabPane>
+          <TabPane tab="云版">
+            <ProTable
+              columns={cloudColumns}
+              search={false}
+              toolBarRender={false}
+              rowKey={record => record._id}
+              pagination={false}
+              scroll={{ y: clientHeight }}
+              request={async () => {
+                const { code, data } = await queryRoadPricingListByClientId({ clientId })
+                return {
+                  success: code === consts.RET_CODE.SUCCESS,
+                  data
+                }
+              }}
+            />
+          </TabPane>
         </Tabs>
       </div>
       <div className="sheet-btns pl-15px pt-15px :not-first:ml-1">

src/pages/Customer/Client/index.jsx

@@ -4,11 +4,7 @@ import React, { useEffect, useState, useRef, useMemo } from 'react'
 import consts from '@/consts'
 import LazyCascader, { formatValues } from '@/components/LazyCascader'
 import PersonLabel from '../Company/components/PersonLabel'
-import {
-  TagTypeEnum,
-  TagDataTypeEnum,
-  LabelModeType
-} from '../Company/components/PersonLabel/const'
+import { TagTypeEnum, TagDataTypeEnum, LabelModeType } from '../Company/components/PersonLabel/const'
 import { Add, Down, Check } from '@icon-park/react'
 import { apiAddClient, queryClient } from '@/services/customer'
 import { apiBatchLink } from '@/services/customer'
@@ -21,16 +17,8 @@ import { useModal } from '@/components/ModalStore'
 import { Plus } from '@icon-park/react'
 const Client = props => {
   const dispatchModal = useModal()
-  const {
-    personTagColorMap,
-    teamTagColorMap,
-    personTags,
-    teamTags,
-    dispatch,
-    shouldUpdate,
-    loading,
-    sourceList
-  } = props
+  const { personTagColorMap, teamTagColorMap, personTags, teamTags, dispatch, shouldUpdate, loading, sourceList } =
+    props
 
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const hasAddPerm = useAccess()?.validatePermByType('client_add') || false
@@ -70,10 +58,7 @@ const Client = props => {
       teamTagMap[item.id] = {
         text: (
           <>
-            <span
-              className="w-12px h-12px inline-block mr-3px"
-              style={{ backgroundColor: teamTagColorMap[item.id] }}
-            />
+            <span className="w-12px h-12px inline-block mr-3px" style={{ backgroundColor: teamTagColorMap[item.id] }} />
             <span>{item.name}</span>
           </>
         )
@@ -142,10 +127,9 @@ const Client = props => {
       fixed: 'left',
       render: (clientName, record) => (
         <span
-          onClick={() =>
-            dispatchModal('D_CLIENT_DETAIL', { dataId: record.id, orderIds: state.orderIds })
-          }
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id, orderIds: state.orderIds })}
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {clientName}
         </span>
       ),
@@ -168,7 +152,8 @@ const Client = props => {
                 orderIds: state.orderIds
               })
             }
-            className="text-primary cursor-pointer hover:text-[#967bbd]">
+            className="text-primary cursor-pointer hover:text-hex-967bbd"
+          >
             {companyName}
           </span>
         ) : (
@@ -274,7 +259,8 @@ const Client = props => {
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.CLIENT}
             checkCallBack={refreshData}
-            modeType={LabelModeType.column}>
+            modeType={LabelModeType.column}
+          >
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
           </PersonLabel>
         </div>
@@ -311,7 +297,8 @@ const Client = props => {
             tagType={TagTypeEnum.TEAMTAG}
             tagColumn={TagDataTypeEnum.CLIENT}
             checkCallBack={refreshData}
-            modeType={LabelModeType.column}>
+            modeType={LabelModeType.column}
+          >
             <Add theme="filled" size="20" fill="#868e96" className="cursor-pointer" />
           </PersonLabel>
         </div>
@@ -478,7 +465,8 @@ const Client = props => {
             tagType={TagTypeEnum.PERSONTAG}
             tagColumn={TagDataTypeEnum.CLIENT}
             checkCallBack={toolbarOptionsChange}
-            modeType={LabelModeType.toolbar}>
+            modeType={LabelModeType.toolbar}
+          >
             {tagState.tagIds.length ? (
               <Button>
                 {tagState.tagIds.map(item => (
@@ -503,7 +491,8 @@ const Client = props => {
             tagType={TagTypeEnum.TEAMTAG}
             tagColumn={TagDataTypeEnum.CLIENT}
             checkCallBack={toolbarOptionsChange}
-            modeType={LabelModeType.toolbar}>
+            modeType={LabelModeType.toolbar}
+          >
             {tagState.tagCooperationIds.length ? (
               <Button>
                 {tagState.tagCooperationIds.map(item => (
@@ -566,9 +555,7 @@ const Client = props => {
                 style={{ width: '250px' }}
                 allowClear={true}
                 placeholder={`在${
-                  permData[PermDataTypeEunm.CUSTOMER]?.find(
-                    item => item.value === defaultPermAuthCache
-                  )?.label
+                  permData[PermDataTypeEunm.CUSTOMER]?.find(item => item.value === defaultPermAuthCache)?.label
                 }下搜索`}
                 onSearch={handleSearch}
               />
@@ -593,7 +580,8 @@ const Client = props => {
                   onConfirm: handleAddClient,
                   reload: () => tRef.current?.reload()
                 })
-              }>
+              }
+            >
               <Plus className="mr-1" />
               客户
             </Button>

src/pages/Product/Cloud/components/Detail/Form.jsx

@@ -2,14 +2,15 @@ import React from 'react'
 import { Row, Col } from 'antd'
 import EditableForm from '@/components/EditableForm'
 
+export const cloudTitleEnum = {
+  1: '养护云造价',
+  2: '大司空',
+  3: '公路云计价',
+  4: '大司空概算'
+}
 const RoadpricingForm = props => {
   const { cloudUser, actionPayload, projectType } = props
-  const titleEnum = {
-    1: '养护云造价',
-    2: '大司空',
-    3: '公路云计价',
-    4: '大司空概算'
-  }
+
   const columns = [
     {
       dataIndex: 'mobile',
@@ -76,7 +77,7 @@ const RoadpricingForm = props => {
     <div>
       <Row>
         <Col span={8}>
-          <h2 className="text-gray-500">{titleEnum[projectType]}用户</h2>
+          <h2 className="text-gray-500">{cloudTitleEnum[projectType]}用户</h2>
         </Col>
         <Col span={16} className="text-right text-gray-500">
           创建于 {cloudUser.create_time}
@@ -86,12 +87,7 @@ const RoadpricingForm = props => {
         </Col>
         <Col span={2} />
       </Row>
-      <EditableForm
-        dataSource={cloudUser}
-        columns={columns}
-        tartgetUrl="/cloud/update"
-        type={actionPayload}
-      />
+      <EditableForm dataSource={cloudUser} columns={columns} tartgetUrl="/cloud/update" type={actionPayload} />
     </div>
   )
 }