feat: 大司空2.0+云版管理服务记录滚动优化

feat: 大司空2.0+云版管理的服务记录滚动优化

src/pages/Product/Cloud/components/Detail/LowerList.tsx

@@ -1,10 +1,15 @@
-import React from 'react'
+import React, { useMemo, useRef } from 'react'
 import { Tabs, Table } from 'antd'
 import ServiceLogItem from '@/components/TimeLineList/ServiceLogItem'
 import { ServiceLogType } from '@/pages/Customer/Client/components/ClientDetail/LowerList'
+import { VList } from 'virtuallist-antd'
+import { useInfiniteScroll } from 'ahooks'
+import { queryClientService } from '@/services/customer'
+import { getLoadMoreList } from '@/components/TimeLineList/shared'
 const { TabPane } = Tabs
 
 type RoadpricingLowerPorps = {
+  clientId: string
   logList: {
     log: any[]
   }
@@ -12,11 +17,27 @@ type RoadpricingLowerPorps = {
   updatePayload: { main: string; target: string }
 }
 
+const PAGE_SIZE = 20
+
 const RoadpricingLowerList: React.FC<RoadpricingLowerPorps> = ({
+  clientId,
   logList: { log: logs = [] },
-  serviceList,
+  serviceList: { list: services = [], total: servicesTotal = 0 },
   updatePayload
 }) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const { data, loadingMore, noMore } = useInfiniteScroll(
+    d => {
+      const current = d ? Math.ceil(d.list.length / PAGE_SIZE) + 1 : 1
+      const data = current === 1 ? { list: services, total: servicesTotal } : d
+      return getLoadMoreList(data, { clientId, current, pageSize: PAGE_SIZE }, queryClientService)
+    },
+    {
+      reloadDeps: [services],
+      target: ref,
+      isNoMore: d => d?.list.length === d?.total
+    }
+  )
   const tableHeight = (document.body.clientHeight - 124 - 78) / 2
   const columns = [
     {
@@ -46,27 +67,36 @@ const RoadpricingLowerList: React.FC<RoadpricingLowerPorps> = ({
       key: 'content'
     }
   ]
+  const vList = useMemo(() => {
+    return VList({
+      height: tableHeight,
+      vid: 'cloud_log_list'
+    })
+  }, [])
   return (
     <div className="pl-4">
       <Tabs>
         <TabPane tab="服务记录" key="服务记录">
-          <div className="sheet-panel-record">
-            {serviceList.map(item => (
-              <div className="mb-3" key={item.id}>
+          <div className="sheet-panel-record" ref={ref}>
+            {data?.list.map(item => (
+              <div key={item.id}>
                 <ServiceLogItem item={item} logType={ServiceLogType.CLIENT} updatePayload={updatePayload} />
               </div>
             ))}
+            {loadingMore ? <div className="text-center my-2">正在加载.....</div> : null}
+            {noMore ? <div className="text-gray text-center my-2">暂无更多数据</div> : null}
           </div>
         </TabPane>
         <TabPane tab="日志" key="日志">
           <div className="sheet-panel-record">
-            <Table
+            <Table<API.LogItem>
               rowKey="id"
               columns={columns}
               dataSource={logs}
               pagination={false}
               size="small"
               scroll={{ y: tableHeight }}
+              components={vList}
             />
           </div>
         </TabPane>

src/pages/Product/Cloud/components/Detail/index.tsx

@@ -145,11 +145,14 @@ const CloudDetail = props => {
                   projectType={projectType}
                   ssoId={state.cloudUser.ssoId}
                 />
-                <LowerList
-                  logList={state.log}
-                  serviceList={state.serviceLog}
-                  updatePayload={{ main: updateKey, target: dataId }}
-                />
+                {state.client?.id && (
+                  <LowerList
+                    customerId={state.client?.id}
+                    logList={state.log}
+                    serviceList={state.serviceLog}
+                    updatePayload={{ main: updateKey, target: dataId }}
+                  />
+                )}
               </Col>
             </Row>
           </div>

src/pages/Product/Cloud/index.tsx

@@ -250,7 +250,7 @@ const Cloud = ({ cloud, dispatch }) => {
 
   const handleSearch = value => {
     tRef.current?.reloadAndRest()
-    setState({ ...state, params: { ...state.params, search: value } })
+    setState({ ...state, search: value, params: { ...state.params, search: value } })
   }
 
   return (
@@ -258,7 +258,7 @@ const Cloud = ({ cloud, dispatch }) => {
       <BasicTable
         actionRef={tRef}
         rowKey={record => record._id}
-        params={{ searhc: state.search, projectType: roadpricingEnum[memoRef.columnStateType] }}
+        params={{ search: state.search, projectType: roadpricingEnum[memoRef.columnStateType] }}
         request={async (params, sort, filter) => {
           const {
             data: { list = [], total = 0 }

src/pages/Product/Road/Enterprise/components/Detail/LowerList.tsx

@@ -1,19 +1,69 @@
-import { List, Tabs } from 'antd'
-import React from 'react'
-import { dayjsFormat } from '@/utils/utils'
+import { Tabs } from 'antd'
+import React, { useMemo } from 'react'
+import ProTable, { ProColumns } from '@ant-design/pro-table'
+import { VList } from 'virtuallist-antd'
+
+const { TabPane } = Tabs
 
 const EnterpriseLowerList = props => {
   const {
     log: { log: logs = [] }
   } = props
-  const { TabPane } = Tabs
+
+  const tableHeight = (document.body.clientHeight - 124 - 78) / 2
+
+  const vList = useMemo(() => {
+    return VList({
+      height: tableHeight,
+      vid: 'enterprise_log_list'
+    })
+  }, [])
+  const columns: ProColumns<API.LogItem>[] = [
+    {
+      title: '日期',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 160
+    },
+    {
+      title: '操作人',
+      dataIndex: 'operatorName',
+      key: 'operatorName',
+      ellipsis: true,
+      width: 115
+    },
+    {
+      title: '操作',
+      dataIndex: 'operationType',
+      key: 'operationType',
+      ellipsis: true,
+      width: 120
+    },
+    {
+      title: '操作内容',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    }
+  ]
   return (
     <div>
       <div className="pl-4">
         <Tabs>
           <TabPane tab="日志" key="日志">
             <div className="sheet-panel-record">
-              <List
+              <ProTable<API.LogItem>
+                search={false}
+                toolBarRender={false}
+                rowKey="id"
+                columns={columns}
+                dataSource={logs}
+                pagination={false}
+                scroll={{ y: tableHeight }}
+                size="small"
+                components={vList}
+              />
+              {/* <List
                 dataSource={logs}
                 split={false}
                 renderItem={item => (
@@ -22,7 +72,7 @@ const EnterpriseLowerList = props => {
                     <List.Item.Meta description={dayjsFormat(item.createTime)} />
                   </List.Item>
                 )}
-              />
+              /> */}
             </div>
           </TabPane>
         </Tabs>

src/pages/Product/Road/Personal/components/Detail/LowerList.tsx

@@ -1,55 +1,112 @@
-import React from 'react'
-import { Tabs, List, Row, Col } from 'antd'
-import { dayjsFormat } from '@/utils/utils'
-import { servicelogEnum } from '@/pages/Customer/Client/components/ClientDetail/LowerList'
+import React, { useMemo, useRef } from 'react'
+import { Tabs } from 'antd'
+import { ServiceLogType } from '@/pages/Customer/Client/components/ClientDetail/LowerList'
+import ServiceLogItem from '@/components/TimeLineList/ServiceLogItem'
+import { useInfiniteScroll } from 'ahooks'
+import { getLoadMoreList } from '@/components/TimeLineList/shared'
+import { queryClientService } from '@/services/customer'
+import { VList } from 'virtuallist-antd'
+import ProTable from '@ant-design/pro-table'
+import type { ProColumns } from '@ant-design/pro-table'
+
+const { TabPane } = Tabs
+type PersonalLowerListProps = {
+  clientId: string
+  logList: {
+    log: any[]
+  }
+  serviceLog: {
+    list: API.ServiceLogItem[]
+    total: number
+  }
+  updatePayload?: { main: string; target: string }
+}
+
+const PAGE_SIZE = 20
+const PersonalLowerList: React.FC<PersonalLowerListProps> = ({
+  clientId,
+  logList: { log: logs = [] },
+  serviceLog: { list: services = [], total: servicesTotal = 0 },
+  updatePayload
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const { data, loadingMore, noMore } = useInfiniteScroll(
+    async d => {
+      const current = d ? Math.ceil(d.list.length / PAGE_SIZE) + 1 : 1
+      const data = current === 1 ? { list: services, total: servicesTotal } : d
+      return await getLoadMoreList(data, { clientId, current, pageSize: PAGE_SIZE }, queryClientService)
+    },
+    {
+      reloadDeps: [services],
+      target: ref,
+      isNoMore: d => d?.list.length === d?.total
+    }
+  )
+
+  const columns: ProColumns<API.LogItem>[] = [
+    {
+      title: '日期',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 160
+    },
+    {
+      title: '操作人',
+      dataIndex: 'operatorName',
+      key: 'operatorName',
+      ellipsis: true,
+      width: 115
+    },
+    {
+      title: '操作',
+      dataIndex: 'operationType',
+      key: 'operationType',
+      ellipsis: true,
+      width: 120
+    },
+    {
+      title: '操作内容',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    }
+  ]
+
+  const tableHeight = (document.body.clientHeight - 124 - 78) / 2
+  const vList = useMemo(() => {
+    return VList({
+      height: tableHeight,
+      vid: 'personal_log_list'
+    })
+  }, [])
 
-const PersonalLowerList = props => {
-  const {
-    log: { log = [] },
-    serviceLog
-  } = props
-  const { TabPane } = Tabs
   return (
     <div>
       <div className="pl-4">
         <Tabs>
           <TabPane tab="服务记录" key="服务记录">
-            <div className="sheet-panel-record">
-              <Row>
-                <Col span="8">类型/时间</Col>
-                <Col span="16">服务内容</Col>
-              </Row>
-              <List
-                dataSource={serviceLog}
-                split={false}
-                renderItem={item => (
-                  <List.Item>
-                    <Row className="w-full">
-                      <Col span="8">
-                        <a className="mr-1">@{item.staffName}</a>
-                        {servicelogEnum[item.status]}
-                        <List.Item.Meta description={dayjsFormat(item.date, 'YYYY-MM-DD')} />
-                      </Col>
-                      <Col span="16" className="whitespace-pre-line">
-                        {item.mark}
-                      </Col>
-                    </Row>
-                  </List.Item>
-                )}
-              />
+            <div className="sheet-panel-record" ref={ref}>
+              {data?.list.map(item => (
+                <div key={item.id}>
+                  <ServiceLogItem item={item} logType={ServiceLogType.CLIENT} updatePayload={updatePayload} />
+                </div>
+              ))}
+              {loadingMore ? <div className="text-center my-2">正在加载.....</div> : null}
+              {noMore ? <div className="text-gray text-center my-2">暂无更多数据</div> : null}
             </div>
           </TabPane>
           <TabPane tab="日志" key="日志">
             <div className="sheet-panel-record">
-              <List
-                dataSource={log}
-                split={false}
-                renderItem={item => (
-                  <List.Item>
-                    <a>@{item.operatorName}</a> {item.content}
-                    <List.Item.Meta description={dayjsFormat(item.create_time)} />
-                  </List.Item>
-                )}
+              <ProTable<API.LogItem>
+                search={false}
+                toolBarRender={false}
+                rowKey="id"
+                size="small"
+                columns={columns}
+                dataSource={logs}
+                pagination={false}
+                scroll={{ y: tableHeight }}
+                components={vList}
               />
             </div>
           </TabPane>

src/pages/Product/Road/Personal/components/Detail/index.tsx

@@ -32,6 +32,7 @@ const PersonalDetail = props => {
     serviceLog: [],
     client: {}
   })
+
   const dispatchModal = useModal()
   const shouldUpdate = refresh?.[updateKey] || false
   const refreshDetail = () => {
@@ -114,7 +115,6 @@ const PersonalDetail = props => {
                     <>
                       <div className="mt-4">
                         <CardClientDetail client={state.client} />
-                        {/* <ClientDetail client={state.client} filterTag={filterTag} /> */}
                       </div>
                       <div className="text-center mt-6">
                         <Tooltip placement="right" title="移除CLD客户">
@@ -141,20 +141,20 @@ const PersonalDetail = props => {
                   )}
                 </div>
               </Col>
-              <Col
-                span={15}
-                // sm={{ span: 24 }}
-                // md={{ span: 24 }}
-                // lg={{ span: 15 }}
-                // xl={{ span: 15 }}
-                flex={{ flexDirection: 'column' }}
-                className="sheet-box-right">
+              <Col span={15} flex={{ flexDirection: 'column' }} className="sheet-box-right">
                 <TabList
                   cloudUser={state.cloudUser}
                   projectType={projectType}
                   ssoId={state.cloudUser.ssoID}
                 />
-                <LowerList log={state.log} serviceLog={state.serviceLog} />
+                {state.client?.id && (
+                  <LowerList
+                    clientId={state.client?.id}
+                    logList={state.log}
+                    serviceLog={state.serviceLog}
+                    updatePayload={{ main: updateKey, target: dataId }}
+                  />
+                )}
               </Col>
             </Row>
           </div>