feat: 1

src/pages/Customer/Client/components/ClientDetail/LowerList.tsx

@@ -1,9 +1,12 @@
-import { Tabs, List } from 'antd'
-import React from 'react'
+import { Tabs, Table } from 'antd'
+import React, { useMemo } from 'react'
 import { dayjsFormat } from '@/utils/utils'
 import TimeLineList from '@/components/TimeLineList'
 import classNames from 'classnames'
 import { isDevMode } from '@/utils/env'
+import { VList } from 'virtuallist-antd'
+import consts from '@/consts'
+const { TabPane } = Tabs
 
 export enum Servicelog {
   /** 上门服务 */
@@ -46,8 +49,48 @@ type ClientLowerListProps = {
   serviceList: API.ServiceLogItem[]
 }
 const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs = [] }, serviceList }) => {
-  const { TabPane } = Tabs
-
+  const tableHeight = (document.body.clientHeight - 48 - 92 - 64 - 120) / 2
+  const columns = [
+    {
+      title: '日期',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 100
+    },
+    {
+      title: '操作人',
+      dataIndex: 'operatorName',
+      key: 'operatorName',
+      width: 115,
+      render: (_, record) => (
+        <div className="flex items-center">
+          <div
+            className="rounded-1/2 w-5 h-5"
+            style={{
+              backgroundImage: `url(${
+                (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                (record.avatar ?? consts.DEFAULT_AVATAR)
+              })`,
+              backgroundSize: 'cover'
+            }}
+          />
+          <div className="ml-1 text-opacity-80 text-sm leading-4">{record.operatorName}</div>
+        </div>
+      )
+    },
+    {
+      title: '操作',
+      dataIndex: 'operationType',
+      key: 'operationType',
+      width: 75
+    },
+    {
+      title: '操作内容',
+      dataIndex: 'content',
+      key: 'content',
+      width: 150
+    }
+  ]
   const renderServiceLogItem = (item: API.ServiceLogItem) => {
     return (
       <div
@@ -63,7 +106,7 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
                 style={{
                   backgroundImage: `url(${
                     (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-                    (item.avatar ? item.avatar : '/resource/avatar/avtra_2.jpg')
+                    (item.avatar ?? consts.DEFAULT_AVATAR)
                   })`,
                   backgroundSize: 'cover'
                 }}
@@ -91,6 +134,14 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
       </div>
     )
   }
+
+  const vList = useMemo(() => {
+    return VList({
+      height: tableHeight,
+      vid: 'client_log_list'
+    })
+  }, [])
+
   return (
     <div>
       <div className="pl-4">
@@ -108,15 +159,14 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
           </TabPane>
           <TabPane tab="日志" key="日志">
             <div className="sheet-panel-record">
-              <List
+              <Table
+                rowKey="id"
+                size="small"
+                columns={columns}
                 dataSource={logs}
-                split={false}
-                renderItem={item => (
-                  <List.Item>
-                    <a>@{item.operatorName}</a> {item.content}
-                    <List.Item.Meta description={dayjsFormat(item.createTime)} />
-                  </List.Item>
-                )}
+                pagination={false}
+                scroll={{ y: tableHeight }}
+                components={vList}
               />
             </div>
           </TabPane>