feat: 5.26 commit

package.json

@@ -71,7 +71,7 @@
     "react-dom": "17.0.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^7.1.0",
-    "umi": "3.5.24",
+    "umi": "3.5.4",
     "vditor": "3.8.14",
     "virtuallist-antd": "^0.7.2"
   },
@@ -91,7 +91,7 @@
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.8.4",
     "@types/react-helmet": "^6.1.0",
-    "@umijs/fabric": "^2.10.1",
+    "@umijs/fabric": "^2.11.1",
     "@umijs/plugin-blocks": "^2.0.5",
     "@umijs/plugin-esbuild": "^1.0.1",
     "@umijs/preset-ant-design-pro": "^1.2.0",

src/components/TimeLineList/index.tsx

@@ -1,3 +1,4 @@
+import { dayjsFormat } from '@/utils/utils'
 import classNames from 'classnames'
 import dayjs from 'dayjs'
 import { useState, useEffect } from 'react'
@@ -29,11 +30,13 @@ function TimeLineList<T>({
   useEffect(() => {
     const formatTimeMap = () => {
       // 先去重，按日期进行分组
-      const uniKeys = Array.from(new Set(dataSource.map(item => item?.[dataField])))
+      const uniKeys = Array.from(
+        new Set(dataSource.map(item => dayjsFormat(item?.[dataField], 'YYYY-MM-DD')))
+      )
       const uniDataMap = []
       // 构建二维数组
       uniKeys.forEach(key => {
-        uniDataMap.push(dataSource.filter(item => item?.[dataField] === key))
+        uniDataMap.push(dataSource.filter(item => dayjsFormat(item?.[dataField], 'YYYY-MM-DD') === key))
       })
       setDataMap(uniDataMap)
     }

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

@@ -6,6 +6,7 @@ import classNames from 'classnames'
 import { isDevMode } from '@/utils/env'
 import { VList } from 'virtuallist-antd'
 import consts from '@/consts'
+import type { ProColumns } from '@ant-design/pro-table'
 const { TabPane } = Tabs
 
 export enum Servicelog {
@@ -23,22 +24,22 @@ export const servicelogEnum = {
   [Servicelog.VISIT]: {
     title: '上门服务',
     bg: 'bg-hex-886ab5 bg-opacity-6',
-    text: 'text-hex-886ab5 fomt-medium'
+    text: 'text-hex-886ab5 fomt-medium text-sm'
   },
   [Servicelog.CALL]: {
     title: '电话拜访',
     bg: 'bg-hex-246daf bg-opacity-6',
-    text: 'text-hex-246daf fomt-medium'
+    text: 'text-hex-246daf fomt-medium text-sm'
   },
   [Servicelog.OTHER]: {
     title: '其他事项',
-    bg: 'bg-hex-b8795e bg-opacity-6',
-    text: 'text-hex-b8795e fomt-medium'
+    bg: 'bg-hex-1ca081 bg-opacity-6',
+    text: 'text-hex-1ca081 fomt-medium text-sm'
   },
   [Servicelog.ONLINE]: {
     title: '在线服务',
     bg: 'bg-hex-b8795e bg-opacity-6',
-    text: 'text-hex-b8795e fomt-medium'
+    text: 'text-hex-b8795e fomt-medium text-sm'
   }
 }
 
@@ -48,9 +49,54 @@ type ClientLowerListProps = {
   }
   serviceList: API.ServiceLogItem[]
 }
+
+export const renderServiceLogItem = (item: API.ServiceLogItem) => {
+  return (
+    <div
+      className={classNames(
+        'w-full rounded border-hex-886ab5 border-l-2px',
+        servicelogEnum[item.status]?.bg
+      )}>
+      <div className="p-4 flex flex-col">
+        <div className="flex justify-between">
+          <div className="flex">
+            <div
+              className="rounded-1/2 w-8 h-8"
+              style={{
+                backgroundImage: `url(${
+                  (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                  (item.avatar ?? consts.DEFAULT_AVATAR)
+                })`,
+                backgroundSize: 'cover'
+              }}
+            />
+            <div className="flex flex-col items-center ml-2">
+              <div className="text-sm font-medium text-opacity-80 text-black">{item.staffName}</div>
+              <div className="text-xs text-opacity-40 text-black h-1rem">
+                {dayjsFormat(item.createTime, 'HH:mm:ss')}
+              </div>
+            </div>
+          </div>
+          <div className={servicelogEnum[item.status]?.text}>{servicelogEnum[item.status]?.title}</div>
+        </div>
+        <div className="bg-white bg-opacity-80 rounded-sm text-black text-opacity-60 text-sm mt-4 p-2">
+          {item.mark}
+        </div>
+        <div className="pt-2 flex justify-between">
+          <div />
+          <div className="text-sm text-opacity-80">
+            <span>服务日期：</span>
+            <span className="ml-1">{dayjsFormat(item.date, 'YYYY-MM-DD')}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs = [] }, serviceList }) => {
   const tableHeight = (document.body.clientHeight - 48 - 92 - 64 - 120) / 2
-  const columns = [
+  const columns: ProColumns<API.LogItem>[] = [
     {
       title: '日期',
       dataIndex: 'createTime',
@@ -61,6 +107,7 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
       title: '操作人',
       dataIndex: 'operatorName',
       key: 'operatorName',
+      ellipsis: true,
       width: 115,
       render: (_, record) => (
         <div className="flex items-center">
@@ -82,58 +129,15 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
       title: '操作',
       dataIndex: 'operationType',
       key: 'operationType',
-      width: 75
+      ellipsis: true,
+      width: 100
     },
     {
       title: '操作内容',
       dataIndex: 'content',
-      key: 'content',
-      width: 150
+      key: 'content'
     }
   ]
-  const renderServiceLogItem = (item: API.ServiceLogItem) => {
-    return (
-      <div
-        className={classNames(
-          'w-full rounded border-hex-886ab5 border-l-2px',
-          servicelogEnum[item.status]?.bg
-        )}>
-        <div className="p-4 flex flex-col">
-          <div className="flex justify-between">
-            <div className="flex">
-              <div
-                className="rounded-1/2 w-8 h-8"
-                style={{
-                  backgroundImage: `url(${
-                    (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-                    (item.avatar ?? consts.DEFAULT_AVATAR)
-                  })`,
-                  backgroundSize: 'cover'
-                }}
-              />
-              <div className="flex flex-col items-center ml-2">
-                <div className="text-sm font-medium text-opacity-80 text-black">{item.staffName}</div>
-                <div className="text-xs text-opacity-40 text-black h-1rem">
-                  {dayjsFormat(item.createTime, 'HH:mm:ss')}
-                </div>
-              </div>
-            </div>
-            <div className={servicelogEnum[item.status]?.text}>{servicelogEnum[item.status]?.title}</div>
-          </div>
-          <div className="bg-white bg-opacity-80 rounded-sm text-black text-opacity-60 text-sm mt-4 p-2">
-            {item.mark}
-          </div>
-          <div className="pt-2 flex justify-between">
-            <div />
-            <div className="text-sm text-opacity-80">
-              <span>服务日期：</span>
-              <span className="ml-1">{dayjsFormat(item.date, 'YYYY-MM-DD')}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
 
   const vList = useMemo(() => {
     return VList({
@@ -147,7 +151,7 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
       <div className="pl-4">
         <Tabs>
           <TabPane tab="客户服务记录" key="客户服务记录">
-            <div className="sheet-panel-record ">
+            <div className="sheet-panel-record">
               <TimeLineList<API.ServiceLogItem>
                 rowkey="id"
                 mode="card"
@@ -159,7 +163,7 @@ const ClientLowerList: React.FC<ClientLowerListProps> = ({ logList: { log: logs
           </TabPane>
           <TabPane tab="日志" key="日志">
             <div className="sheet-panel-record">
-              <Table
+              <Table<API.LogItem>
                 rowKey="id"
                 size="small"
                 columns={columns}

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

@@ -1,99 +0,0 @@
-import { Tabs, List, Row, Col, Table } from 'antd'
-import { dayjsFormat } from '@/utils/utils'
-import consts from '@/consts'
-import { isDevMode } from '@/utils/env'
-
-export const servicelogEnum = {
-  1: '上门服务',
-  2: '电话拜访',
-  3: '其他事项',
-  4: '在线服务'
-}
-
-const CompanyLowerList = props => {
-  const {
-    log: { log: logs = [] },
-    servicelist
-  } = props
-
-  const { TabPane } = Tabs
-  const columns = [
-    {
-      title: '日期',
-      dataIndex: 'createTime',
-      key: 'createTime',
-      width: 100
-    },
-    {
-      title: '操作人',
-      dataIndex: 'operatorName',
-      key: 'operatorName',
-      width: 115,
-      render: (_, record) => (
-        <div className="flex items-center flex-row ml-2">
-          <img
-            className="w-full max-w-30px h-30px border rounded-30px"
-            src={
-              (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-              (record?.avatar ?? consts.DEFAULT_AVATAR)
-            }
-          />
-          <span className="ml-1">{record.operatorName}</span>
-        </div>
-      )
-    },
-    {
-      title: '操作',
-      dataIndex: 'operationType',
-      key: 'operationType',
-      width: 75
-    },
-    {
-      title: '操作内容',
-      dataIndex: 'content',
-      key: 'content',
-      width: 150
-    }
-  ]
-  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={servicelist}
-                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>
-          </TabPane>
-          <TabPane tab="日志" key="日志">
-            <div className="sheet-panel-record">
-              <Table rowKey="id" columns={columns} dataSource={logs} pagination={false} />
-            </div>
-          </TabPane>
-        </Tabs>
-      </div>
-    </div>
-  )
-}
-
-export default CompanyLowerList

src/pages/Customer/Company/components/CompanyDetail/LowerList.tsx

@@ -0,0 +1,90 @@
+import { Tabs, Table } from 'antd'
+import consts from '@/consts'
+import { isDevMode } from '@/utils/env'
+import TimeLineList from '@/components/TimeLineList'
+import { renderServiceLogItem } from '@/pages/Customer/Client/components/ClientDetail/LowerList'
+import type { ProColumns } from '@ant-design/pro-table'
+const { TabPane } = Tabs
+type CompanyLowerListProps = {
+  logList: {
+    log: any[]
+  }
+  serviceList: API.ServiceLogItem[]
+}
+
+const CompanyLowerList: React.FC<CompanyLowerListProps> = ({ logList: { log: logs = [] }, serviceList }) => {
+  const columns: ProColumns<API.LogItem>[] = [
+    {
+      title: '日期',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 100
+    },
+    {
+      title: '操作人',
+      dataIndex: 'operatorName',
+      key: 'operatorName',
+      ellipsis: true,
+      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',
+      ellipsis: true,
+      width: 100
+    },
+    {
+      title: '操作内容',
+      dataIndex: 'content',
+      key: 'content'
+    }
+  ]
+  return (
+    <div>
+      <div className="pl-4">
+        <Tabs>
+          <TabPane tab="单位服务记录" key="服务记录">
+            <div className="sheet-panel-record">
+              <TimeLineList<API.ServiceLogItem>
+                rowkey="id"
+                mode="card"
+                dataField="createTime"
+                dataSource={serviceList}
+                renderItem={item => renderServiceLogItem(item)}
+              />
+            </div>
+          </TabPane>
+          <TabPane tab="日志" key="日志">
+            <div className="sheet-panel-record">
+              <Table<API.LogItem>
+                rowKey="id"
+                columns={columns}
+                dataSource={logs}
+                pagination={false}
+                size="small"
+              />
+            </div>
+          </TabPane>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+
+export default CompanyLowerList

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

@@ -129,7 +129,7 @@ const CompanyDetail = props => {
                   customer={state.customer}
                   business={state.business}
                 />
-                <CompanyLowerList log={state.log} servicelist={state.serviceLog} />
+                <CompanyLowerList logList={state.log} serviceList={state.serviceLog} />
               </Col>
             </Row>
           </div>

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

@@ -2,10 +2,10 @@ import React, { useState } from 'react'
 import ProTable from '@ant-design/pro-table'
 import { queryRatioPanelsList, queryServiceRatioPanelsList } from '@/services/dashboard'
 import consts from '@/consts'
-import { servicelogEnum } from '@/pages/Customer/Company/components/CompanyDetail/LowerList'
 import { cardTypeMap } from '../consts'
 import { Badge, Modal } from 'antd'
 import { useModal } from '@/components/ModalStore'
+import { servicelogEnum } from '@/pages/Customer/Client/components/ClientDetail/LowerList'
 
 const dataTypeEunm = {
   0: {
@@ -76,7 +76,7 @@ const ServiceRatioPanels = ({ dispatchModal, staffIds, cyclical, dataPermission
       dataIndex: 'status',
       title: '服务类型',
       width: '8%',
-      render: type => servicelogEnum[type]
+      render: type => servicelogEnum[type]?.title
     },
     {
       dataIndex: 'date',

src/services/typding.d.ts

@@ -46,4 +46,13 @@ declare namespace API {
   }
 
   type ServiceLogList = ServiceLogItem[]
+
+  /** @description 日志 */
+  type LogItem = {
+    id?: string
+    createTime?: string
+    operatorName?: string
+    operationType?: string
+    content?: string
+  }
 }