style: products Audit

src/assets/global.css

@@ -21,3 +21,6 @@
   justify-content: center;
   width: 100%;
 }
+.ant-table-wrapper.border-collapse table {
+    border-collapse: collapse;
+}

src/hooks/useProductsSets.js

@@ -51,10 +51,10 @@ export const useProductsTypes = () => {
       { label: t('products:type.UltraService'), value: 'B', key: 'B' },
       { label: t('products:type.Car'), value: 'J', key: 'J' },
       { label: t('products:type.Guide'), value: 'Q', key: 'Q' },
-      { label: t('products:type.Package'), value: 'D', key: 'D' }, // 包价线路
       { label: t('products:type.Attractions'), value: '7', key: '7' },
       { label: t('products:type.Meals'), value: 'R', key: 'R' },
       { label: t('products:type.Extras'), value: '8', key: '8' },
+      { label: t('products:type.Package'), value: 'D', key: 'D' }, // 包价线路
     ];
     setTypes(newData);
   }, [i18n.language]);

src/views/products/Audit.jsx

@@ -84,8 +84,15 @@ const PriceTable = ({ productType, dataSource, refresh }) => {
       });
   };
 
+  const rowStyle = (r, tri) => {
+    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' : '';
+    return [trCls, bigTrCls].join(' ');
+  };
+
   const columns = [
-    { key: 'title', dataIndex: ['info', 'title'], width: '16rem', title: t('Title'), onCell: (r, index) => ({ rowSpan: r.rowSpan }), render: (text, r) => text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '' },
+    { key: 'title', dataIndex: ['info', 'title'], width: '16rem', title: t('Title'), onCell: (r, index) => ({ rowSpan: r.rowSpan, }), className: 'bg-white', render: (text, r) => text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '' },
     ...(productType === 'B' ? [{ key: 'km', dataIndex: ['info', 'km'], title: t('KM')}] : []),
     { key: 'adult', title: t('AgeType.Adult'), render: (_, { adult_cost, currency, unit_id, unit_name }) => `${adult_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}` },
     { key: 'child', title: t('AgeType.Child'), render: (_, { child_cost, currency, unit_id, unit_name }) => `${child_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}` },
@@ -122,7 +129,7 @@ const PriceTable = ({ productType, dataSource, refresh }) => {
         ) : null,
     },
   ];
-  return <Table size={'small'} pagination={false} {...{ columns, dataSource }} rowKey={(r) => r.id} />;
+  return <Table size={'small'} className='border-collapse' rowHoverable={false} rowClassName={rowStyle} pagination={false} {...{ columns, dataSource }} rowKey={(r) => r.id} />;
 };
 
 /**
@@ -148,7 +155,7 @@ const TypesPanels = (props) => {
             // loading={loading}
             productType={ele.value}
             dataSource={agencyProducts[ele.value].reduce(
-              (r, c) =>
+              (r, c, ri) =>
                 r.concat(
                   c.quotation.map((q, i) => ({
                     ...q,
@@ -160,6 +167,7 @@ const TypesPanels = (props) => {
                     info: c.info,
                     lgc_details: c.lgc_details.reduce((rlgc, clgc) => ({...r, [clgc.lgc]: clgc}), {}),
                     rowSpan: i === 0 ? c.quotation.length : 0,
+                    rowSpanI: [ri, i],
                   }))
                 ),
               []