⏳feat: 审核: 查看价格历史

src/views/products/Audit.jsx

@@ -17,47 +17,123 @@ import { ClockCircleFilled, ClockCircleOutlined, PlusCircleFilled, PlusCircleOut
 const parseJson = (str) => {
   let result;
   if (str === null || str === undefined || str === '') {
-    return [];
+    return {};
   }
   try {
     result = JSON.parse(str);
-    return result;
+    return Array.isArray(result) ? result.reduce((acc, cur) => ({ ...acc, ...cur }), {}) : result;
   } catch (e) {
-    return [];
+    return {};
   }
 };
 
-  const columnsSets = t => [
-    { key: 'adult', title: t('AgeType.Adult'), width: '12rem', render: (_, { adult_cost, currency, unit_id, unit_name, lastedit_changed }) => {
-      const _changed = parseJson(lastedit_changed)?.reduce((acc, cur) => ({...acc, ...cur}), {});
-      const preValue = isNotEmpty(_changed.adult_cost) ? <div className='text-muted line-through '>{_changed.adult_cost}</div> : null;
-      return (<div>{preValue}{`${adult_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}`}</div>)} },
-    { key: 'child', title: t('AgeType.Child'), width: '12rem', render: (_, { child_cost, currency, unit_id, unit_name, lastedit_changed }) => {
-      const _changed = parseJson(lastedit_changed)?.reduce((acc, cur) => ({...acc, ...cur}), {});
-      const preValue = isNotEmpty(_changed.child_cost) ? <div className='text-muted line-through '>{_changed.child_cost}</div> : null;
-      return <div>{preValue}{`${child_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}`}</div>;
-    } },
+  const columnsSets = (t, colorize = true) => [
+    {
+      key: 'adult',
+      title: t('AgeType.Adult'),
+      width: '12rem',
+      render: (_, { adult_cost, currency, unit_id, unit_name, audit_state_id, lastedit_changed }) => {
+        const _changed = parseJson(lastedit_changed);
+        const ifCompare = colorize && ![-1, 1, 2].includes(audit_state_id);
+        const ifData = isNotEmpty(_changed.adult_cost) || isNotEmpty(_changed.unit_id) || isNotEmpty(_changed.currency);
+        const preValue =
+          ifCompare && ifData ? (
+            <div className='text-muted line-through '>{`${_changed.adult_cost} ${_changed.currency || currency} / ${t(`PriceUnit.${_changed.unit_id || unit_id}`)}`}</div>
+          ) : null;
+        const editCls = ifCompare && ifData ? 'text-danger' : '';
+        return (
+          <div>
+            {preValue}
+            <span className={editCls}>{`${adult_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}`}</span>
+          </div>
+        );
+      },
+    },
+    {
+      key: 'child',
+      title: t('AgeType.Child'),
+      width: '12rem',
+      render: (_, { child_cost, currency, unit_id, unit_name, audit_state_id, lastedit_changed }) => {
+        const _changed = parseJson(lastedit_changed);
+        const ifCompare = colorize && ![-1, 1, 2].includes(audit_state_id);
+        const ifData = isNotEmpty(_changed.child_cost) || isNotEmpty(_changed.unit_id) || isNotEmpty(_changed.currency);
+        const preValue =
+          ifCompare && ifData ? (
+            <div className='text-muted line-through '>{`${_changed.child_cost} ${_changed.currency || currency} / ${t(`PriceUnit.${_changed.unit_id || unit_id}`)}`}</div>
+          ) : null;
+        const editCls = ifCompare && ifData ? 'text-danger' : '';
+        return (
+          <div>
+            {preValue}
+            <span className={editCls}>{`${child_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}`}</span>
+          </div>
+        );
+      },
+    },
     // {key: 'unit', title: t('Unit'), },
     {
       key: 'groupSize',
       dataIndex: ['group_size_min'],
-      title: t('group_size'), width: '6rem',
+      title: t('group_size'),
+      width: '6rem',
       render: (_, { audit_state_id, group_size_min, group_size_max, lastedit_changed }) => {
-        const _changed = parseJson(lastedit_changed)?.reduce((acc, cur) => ({...acc, ...cur}), {});
-        const preValue = ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.group_size_min) || isNotEmpty(_changed.group_size_max)) ? <div className='text-muted line-through '>{`${_changed.group_size_min ?? group_size_min} - ${_changed.group_size_max ?? group_size_max}`}</div> : null;
-        return <div>{preValue}{formatGroupSize(group_size_min, group_size_max)}</div>;
-      }
+        const _changed = parseJson(lastedit_changed);
+        const preValue =
+          colorize && ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.group_size_min) || isNotEmpty(_changed.group_size_max)) ? (
+            <div className='text-muted line-through '>{`${_changed.group_size_min ?? group_size_min} - ${_changed.group_size_max ?? group_size_max}`}</div>
+          ) : null;
+        const editCls = colorize && ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.group_size_min) || isNotEmpty(_changed.group_size_max)) ? 'text-danger' : '';
+        return (
+          <div>
+            {preValue}
+            <span className={editCls}>{formatGroupSize(group_size_min, group_size_max)}</span>
+          </div>
+        );
+      },
     },
     {
       key: 'useDates',
       dataIndex: ['use_dates_start'],
-      title: t('use_dates'), width: '12rem',
-      render: (_, { use_dates_start, use_dates_end, weekdays }) => `${use_dates_start} ~ ${use_dates_end}`, // + (weekdays ? `, ${t('OnWeekdays')}${weekdays}` : ''),
+      title: t('use_dates'),
+      width: '12rem',
+      render: (_, { use_dates_start, use_dates_end, weekdays, audit_state_id, lastedit_changed }) => {
+        const _changed = parseJson(lastedit_changed);
+        const preValue =
+          colorize && ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.use_dates_start) || isNotEmpty(_changed.use_dates_end)) ? (
+            <div className='text-muted'>
+              {isNotEmpty(_changed.use_dates_start) ? <span className=' line-through '>{_changed.use_dates_start}</span> : use_dates_start} ~{' '}
+              {isNotEmpty(_changed.use_dates_end) ? <span className='t line-through '>{_changed.use_dates_end}</span> : use_dates_end}
+            </div>
+          ) : null;
+        const editCls = colorize && ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.use_dates_start) || isNotEmpty(_changed.use_dates_end)) ? 'text-danger' : '';
+        return (
+          <div>
+            {preValue}
+            <span className={editCls}>{`${use_dates_start} ~ ${use_dates_end}`}</span>
+          </div>
+        );
+      },
+    },
+    {
+      key: 'weekdays',
+      dataIndex: ['weekdays'],
+      title: t('Weekdays'),
+      width: '6rem',
+      render: (text, { weekdays, audit_state_id, lastedit_changed }) => {
+        const _changed = parseJson(lastedit_changed);
+        const ifCompare = colorize && ![-1, 1, 2].includes(audit_state_id);
+        const ifData = !isEmpty((_changed.weekdayList || []).filter(s => s));
+        const preValue =
+          ifCompare && ifData ? (
+            <div className='text-muted line-through '>{_changed.weekdayList}</div>
+          ) : null;
+        const editCls = ifCompare && ifData ? 'text-danger' : '';
+        return <div>{preValue}<span className={editCls}>{text || t('Unlimited')}</span></div>;
+      },
     },
-    { key: 'weekdays', dataIndex: ['weekdays'], title: t('Weekdays'), width: '6rem', render: (text, r) => text || t('Unlimited') },
   ];
 
-const PriceLogPopover = ({ title, fetchData, ...props}) => {
+const PriceLogPopover = ({ title, fetchData, triggerProps={}, ...props}) => {
   const { t } = useTranslation('products');
   const [open, setOpen] = useState(false);
   const [logData, setLogData] = useState([]);
@@ -65,7 +141,7 @@ const PriceLogPopover = ({ title, fetchData, ...props}) => {
     const data = await fetchData();
     setLogData(data);
   };
-  const columns = [...columnsSets(t), { title: '时间', dataIndex: 'updatetime', key: 'updatetime'}];
+  const columns = [...columnsSets(t, false), { title: '时间', dataIndex: 'updatetime', key: 'updatetime'}];
   return (
     <Popover {...props}
       title={
@@ -78,7 +154,7 @@ const PriceLogPopover = ({ title, fetchData, ...props}) => {
       }
       content={
         <>
-          <Table columns={columns} dataSource={logData} size='small' />
+          <Table columns={columns} dataSource={logData} rowKey={'id'} size='small' />
         </>
       }
       trigger={['click']}
@@ -89,7 +165,7 @@ const PriceLogPopover = ({ title, fetchData, ...props}) => {
       onOpenChange={(v) => {
         setOpen(v);
       }}>
-      <Button onClick={getData} title={title}>
+      <Button {...triggerProps} onClick={getData} title={title}>
         {title}
       </Button>
     </Popover>
@@ -186,20 +262,21 @@ const PriceTable = ({ productType, dataSource, refresh }) => {
     },
     {
       title: '',
-      key: 'action2', width: '6rem',
+      key: 'action2', width: '6rem', className: 'bg-white',
       onCell: (r, index) => ({ rowSpan: r.rowSpan, }),
       render: (_, r) => {
         const showPublicBtn = null; // r.pendingQuotation ? <Popover title='查看已发布的价格' trigger={['click']}> <Button  size='small' className='ml-2' onClick={() => { }}>✈</Button></Popover> : null;
-        const btn2 = (
+        const btn2 = r.pendingQuotation ? (
           <PriceLogPopover
             placement='bottom'
             className='max-w-[1000px]'
             title='已发布的'
+            triggerProps={{ type: 'primary', ghost:true, size: 'small' }}
             fetchData={() => getRunning({ travel_agency_id, product_id: r.info.id, price_id: r.id })}
             {...{ travel_agency_id, product_id: r.info.id, price_id: r.id }}
           />
-        );
-        return <div className="absolute bottom-2 right-1">{btn2}</div> ;
+        ) : null;
+        return <div className='absolute bottom-2 right-1'>{btn2}</div>;
       },
     }
   ];