GHHub/src/views/products/Audit.jsx

import { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { App, Empty, Button, Collapse, Table, Space } 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 useAuthStore from '@/stores/Auth';
import RequireAuth from '@/components/RequireAuth';
import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
import Header from './Detail/Header';
import dayjs from 'dayjs';
import { usingStorage } from '@/hooks/usingStorage';

const PriceTable = ({ productType, dataSource, refresh }) => {
  const { t } = useTranslation('products');
  const { travel_agency_id, use_year, audit_state } = useParams();
  const isPermitted = useAuthStore(state => state.isPermitted);
  const [loading, activeAgency] = useProductsStore((state) => [state.loading, state.activeAgency]);
  const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
  const { message, notification } = App.useApp();
  const stateMapVal = useProductsAuditStatesMapVal();

  const [renderData, setRenderData] = useState(dataSource);

  // console.log(dataSource);

  const handleAuditPriceItem = (state, row, rowIndex) => {
    postProductsQuoteAuditAction(state, { id: row.id, travel_agency_id: activeAgency.travel_agency_id })
      .then((json) => {
        if (json.errcode === 0) {
          message.success(json.errmsg);

          if (typeof refresh === 'function') {
            // refresh(); // debug: 不要刷新, 等太久
            // const newData = structuredClone(renderData);
            const newData = cloneDeep(renderData);
            newData.splice(rowIndex, 1, {...row, audit_state_id: state, });
            setRenderData(newData);
          }
        }
      })
      .catch((ex) => {
        notification.error({
          message: 'Notification',
          description: ex.message,
          placement: 'top',
          duration: 4,
        });
      });
  };

  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, }), className: 'bg-white', render: (text, r) => {
      const title = text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '';
      const itemLink = isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? `/products/${travel_agency_id}/${use_year}/${audit_state}/edit` : isPermitted(PERM_PRODUCTS_OFFER_PUT) ? `/products/edit` : '';
      return isNotEmpty(itemLink) ? <span onClick={() => setEditingProduct({info: r.info})}><Link to={itemLink} >{title}</Link></span> : 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}`)}` },
    // {key: 'unit', title: t('Unit'), },
    {
      key: 'groupSize',
      dataIndex: ['group_size_min'],
      title: t('GroupSize'),
      render: (_, { group_size_min, group_size_max }) => `${group_size_min} - ${group_size_max}`,
    },
    {
      key: 'useDates',
      dataIndex: ['use_dates_start'],
      title: t('UseDates'),
      render: (_, { use_dates_start, use_dates_end, weekdays }) => `${use_dates_start} ~ ${use_dates_end}`, // + (weekdays ? `, ${t('OnWeekdays')}${weekdays}` : ''),
    },
    { key: 'weekdays', dataIndex: ['weekdays'], title: t('Weekdays'), render: (text, r) => text || t('Unlimited') },
    {
      key: 'state',
      title: t('State'),
      render: (_, r) => {
        const stateCls = ` text-${stateMapVal[`${r.audit_state_id}`]?.color} `;
        return <span className={stateCls}>{stateMapVal[`${r.audit_state_id}`]?.label}</span>;
      },
    },
    {
      title: '',
      key: 'action',
      render: (_, r, ri) =>
        (Number(r.audit_state_id)) === 0 ? (
          <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
            <Space>
              <Button onClick={() => handleAuditPriceItem('2', r, ri)}>✔</Button>
              <Button onClick={() => handleAuditPriceItem('3', r, ri)}>✖</Button>
            </Space>
          </RequireAuth>
        ) : null,
    },
  ];
  return <Table size={'small'} className='border-collapse' rowHoverable={false} rowClassName={rowStyle} pagination={false} {...{ columns, }} dataSource={renderData} rowKey={(r) => r.id} />;
};

/**
 *
 */
const TypesPanels = (props) => {
  const { t } = useTranslation();
  const [loading, agencyProducts] = useProductsStore((state) => [state.loading, state.agencyProducts]);
  // console.log(agencyProducts);
  const productsTypes = useProductsTypes();
  const [activeKey, setActiveKey] = useState([]);
  const [showTypes, setShowTypes] = useState([]);
  useEffect(() => {
    // 只显示有产品的类型; 展开产品的价格表, 合并名称列; 转化为价格主表, 携带产品属性信息
    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(
              (r, c, ri) =>
                r.concat(
                  c.quotation.map((q, i) => ({
                    ...q,
                    weekdays: q.weekdays
                      .split(',')
                      .filter(Boolean)
                      .map((w) => t(`weekdaysShort.${w}`))
                      .join(', '),
                    info: c.info,
                    lgc_details: c.lgc_details.reduce((rlgc, clgc) => ({...rlgc, [clgc.lgc]: clgc}), {}),
                    rowSpan: i === 0 ? c.quotation.length : 0,
                    rowSpanI: [ri, i],
                  }))
                ),
              []
            )}
            refresh={props.refresh}
          />
        ),
      }));
    setShowTypes(_show);

    setActiveKey(isEmpty(_show) ? [] : [_show[0].key]);
    return () => {};
  }, [productsTypes, agencyProducts]);

  const onCollapseChange = (_activeKey) => {
    setActiveKey(_activeKey);
  };
  return isEmpty(agencyProducts) ? <Empty /> : <Collapse items={showTypes} activeKey={activeKey} onChange={onCollapseChange} />;
};

const Audit = ({ ...props }) => {
  const { travel_agency_id, use_year, audit_state } = useParams();
  const [loading, activeAgency, getAgencyProducts] = useProductsStore((state) => [state.loading, state.activeAgency, state.getAgencyProducts]);
  const { travelAgencyId } = usingStorage();

  const handleGetAgencyProducts = ({pick_year, pick_agency, pick_state}={}) => {
    const year = pick_year || use_year || dayjs().year();
    const agency = pick_agency || travel_agency_id || travelAgencyId;
    const state = pick_state ?? audit_state;
    getAgencyProducts({ travel_agency_id: agency, use_year: year, audit_state: state });
  };

  return (
    <>
      <SecondHeaderWrapper loading={loading} backTo={`/products`} header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} />}>
        {/* <PrintContractPDF /> */}

        <TypesPanels refresh={handleGetAgencyProducts} />
      </SecondHeaderWrapper>
    </>
  );
};
export default Audit;