feat: 解决倒计时更新不及时的问题

src/pages/AfterSaleManage/Pending/index.jsx

 import React, { useState, useRef } from 'react';
-import { notification, Button, Popconfirm, Modal } from 'antd';
+import { notification, Button, Popconfirm, Modal, Statistic } from 'antd';
 import ProTable from '@ant-design/pro-table';
 import moment from 'moment';
 import _ from 'lodash';
@@ -12,6 +12,8 @@ import { getDetail } from '../../afterSale/appeal/services';
 import AppealDetail from '../../afterSale/components/detail';
 import AfterLog from '../components/AfterLog';
 
+const { Countdown } = Statistic;
+
 const { confirm } = Modal;
 export default () => {
   const table = useRef();
@@ -75,8 +77,7 @@ export default () => {
         const data = await logisticsIntercept({ serviceNo: r.serviceNo });
         if (data.businessCode === '0000') {
           notification.success({ message: '拦截成功' });
-          // eslint-disable-next-line no-unused-expressions
-          table.current?.reload?.();
+          table.current.reload();
         } else {
           notification.error({ message: data.msg || '拦截失败' });
         }
@@ -86,39 +87,39 @@ export default () => {
       },
     });
   };
-  const renderContent = (record, index, action) => {
-    if (!time[record.serviceNo]) {
-      const serviceTime = moment(record.approvalEndTime).valueOf();
-      const nowTime = moment(record.nowTime).valueOf();
-      let timeNumber = (serviceTime - nowTime) / 1000;
-      time[record.serviceNo] = setInterval(() => {
-        if (timeNumber > 0) {
-          timeNumber -= 1;
-          // eslint-disable-next-line radix
-          const hours = parseInt(timeNumber / 3600)
-            .toString()
-            .padStart(2, '0');
-          // eslint-disable-next-line radix
-          const minutes = parseInt((timeNumber / 60) % 60)
-            .toString()
-            .padStart(2, '0');
-          // eslint-disable-next-line radix
-          const seconds = parseInt(timeNumber % 60)
-            .toString()
-            .padStart(2, '0');
-          const str = `${hours}时${minutes}分${seconds}秒`;
-          timeString[record.serviceNo] = str;
-          const strings = _.cloneDeep(timeString);
-          setTimeString(strings);
-        } else {
-          clearInterval(time[record.serviceNo]);
-          timeString[record.serviceNo] = '0时0分0秒';
-          const strings = _.cloneDeep(timeString);
-          setTimeString(strings);
-        }
-      }, 1000);
-    }
-  };
+  // const renderContent = (record, index, action) => {
+  //   if (!time[record.serviceNo]) {
+  //     const serviceTime = moment(record.approvalEndTime).valueOf();
+  //     const nowTime = moment(record.nowTime).valueOf();
+  //     let timeNumber = (serviceTime - nowTime) / 1000;
+  //     time[record.serviceNo] = setInterval(() => {
+  //       if (timeNumber > 0) {
+  //         timeNumber -= 1;
+  //         // eslint-disable-next-line radix
+  //         const hours = parseInt(timeNumber / 3600)
+  //           .toString()
+  //           .padStart(2, '0');
+  //         // eslint-disable-next-line radix
+  //         const minutes = parseInt((timeNumber / 60) % 60)
+  //           .toString()
+  //           .padStart(2, '0');
+  //         // eslint-disable-next-line radix
+  //         const seconds = parseInt(timeNumber % 60)
+  //           .toString()
+  //           .padStart(2, '0');
+  //         const str = `${hours}时${minutes}分${seconds}秒`;
+  //         timeString[record.serviceNo] = str;
+  //         const strings = _.cloneDeep(timeString);
+  //         setTimeString(strings);
+  //       } else {
+  //         clearInterval(time[record.serviceNo]);
+  //         timeString[record.serviceNo] = '0时0分0秒';
+  //         const strings = _.cloneDeep(timeString);
+  //         setTimeString(strings);
+  //       }
+  //     }, 1000);
+  //   }
+  // };
   const columns = [
     {
       title: '审核倒计时',
@@ -126,12 +127,22 @@ export default () => {
       key: 'serviceTime',
       hideInSearch: true,
       width: 150,
-      render: (val, record, index, action) => [
-        <span style={{ color: 'red' }}>
-          {renderContent(record, index, action)}
-          {timeString[record.serviceNo]}
-        </span>,
-      ],
+      // render: (val, record, index, action) => [
+      //   <span style={{ color: 'red' }}>
+      //     {renderContent(record, index, action)}
+      //     {timeString[record.serviceNo]}
+      //   </span>,
+      // ],
+      render: (val, record) => {
+        const serviceTime = moment(record.approvalEndTime).valueOf();
+        return (
+          <Countdown
+            format="HH时mm分ss秒"
+            value={serviceTime}
+            valueStyle={{ color: 'red', fontSize: '14px' }}
+          />
+        );
+      },
     },
     {
       title: '售后状态',
@@ -165,7 +176,7 @@ export default () => {
       hideInSearch: true,
       dataIndex: 'action',
       width: 250,
-      // fixed: 'right',
+      fixed: 'right',
       render: (val, r) => [
         <Button key="link1" onClick={() => openAudit(r)} className="mr10" type="primary">
           审核