fix: 审核页面: 搜索状态时, 数据记录和总数不一致

src/views/products/Audit.jsx

@@ -1,17 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { App, Empty, Button, Collapse, Table, Space } from 'antd';
+import { App, Empty, Button, Collapse, Table, Space, Alert } from 'antd';
 import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
 import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
 import { useTranslation } from 'react-i18next';
 import useProductsStore, { postProductsQuoteAuditAction, } from '@/stores/Products/Index';
-import { cloneDeep, isEmpty, isNotEmpty } from '@/utils/commons';
+import { cloneDeep, groupBy, isEmpty, isNotEmpty } from '@/utils/commons';
 import useAuthStore from '@/stores/Auth';
 import RequireAuth from '@/components/RequireAuth';
 import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
 import Header from './Detail/Header';
 import dayjs from 'dayjs';
 import { usingStorage } from '@/hooks/usingStorage';
+import { ClockCircleFilled, ClockCircleOutlined, PlusCircleFilled, PlusCircleOutlined } from '@ant-design/icons';
 
 const PriceTable = ({ productType, dataSource, refresh }) => {
   const { t } = useTranslation('products');
@@ -55,9 +56,11 @@ const PriceTable = ({ productType, dataSource, refresh }) => {
     const trCls = tri%2 !== 0 ? ' bg-stone-50' : ''; // 奇偶行
     const [infoI, quoteI] = r.rowSpanI;
     const bigTrCls = quoteI === 0 && tri !== 0 ? 'border-collapse border-double border-0 border-t-4 border-stone-300' : ''; // 合并行双下划线
-    const editedCls = (r.audit_state_id <= 0 && isNotEmpty(r.lastedit_changed)) ? '!bg-red-100' : ''; // <=待审核, 变更: 红色
+    // && isNotEmpty(r.lastedit_changed)
+    const editedCls = (r.audit_state_id === 0 ) ? '!bg-amber-100' : ''; // 待审核, 黄
+    const newCls = (r.audit_state_id === -1 ) ? '!bg-sky-100' : ''; // 新增, 蓝
     const editedCls_ = isNotEmpty(r.lastedit_changed) ? (r.audit_state_id === 0 ? '!bg-red-100' : '!bg-sky-100') : '';
-    return [trCls, bigTrCls, editedCls].join(' ');
+    return [trCls, bigTrCls, newCls, editedCls].join(' ');
   };
 
   const columns = [
@@ -123,14 +126,8 @@ const TypesPanels = (props) => {
     const hasDataTypes = Object.keys(agencyProducts);
     const _show = productsTypes
       .filter((kk) => hasDataTypes.includes(kk.value))
-      .map((ele) => ({
-        ...ele,
-        extra: t('Table.Total', { total: agencyProducts[ele.value].length }),
-        children: (
-          <PriceTable
-            // loading={loading}
-            productType={ele.value}
-            dataSource={agencyProducts[ele.value].reduce(
+      .map((ele) => {
+        const _children = agencyProducts[ele.value].reduce(
               (r, c, ri) =>
                 r.concat(
                   c.quotation.map((q, i) => ({
@@ -147,11 +144,28 @@ const TypesPanels = (props) => {
                   }))
                 ),
               []
-            )}
+            );
+        const _childrenByState = groupBy(_children, 'audit_state_id');
+        // console.log(_childrenByState);
+        return {
+        ...ele,
+        extra: <Space>
+          {_childrenByState['1']?.length > 0 && <Alert showIcon type='success' className='py-1 text-xs' message={_childrenByState['1']?.length || 0} />}
+          {_childrenByState['2']?.length > 0 && <Alert showIcon type='success' className='py-1 text-xs' message={_childrenByState['2']?.length || 0} icon={<ClockCircleOutlined />} />}
+          {_childrenByState['0']?.length > 0 && <Alert showIcon type='warning' className='py-1 text-xs' message={_childrenByState['0']?.length || 0} />}
+          {_childrenByState['3']?.length > 0 && <Alert showIcon type='error' className='py-1 text-xs' message={_childrenByState['3']?.length || 0} />}
+          {_childrenByState['-1']?.length > 0 && <Alert showIcon type='info' className='py-1 text-xs' message={_childrenByState['-1']?.length || 0} icon={<PlusCircleFilled />} />}
+          <span>{t('Table.Total', { total: _children.length })}</span>
+        </Space>,
+        children: (
+          <PriceTable
+            // loading={loading}
+            productType={ele.value}
+            dataSource={_children}
             refresh={props.refresh}
           />
         ),
-      }));
+      }});
     setShowTypes(_show);
 
     setActiveKey(isEmpty(_show) ? [] : [_show[0].key]);

tailwind.config.js

@@ -8,6 +8,7 @@ export default {
     'text-muted',
     'bg-red-100',
     'bg-sky-100',
+    'bg-amber-100',
   ],
   darkMode: 'media',
   theme: {