GHHub/src/views/products/Audit.jsx

import { createContext, useContext, useEffect, useState } from 'react';
import { Link, useLocation, } from 'react-router-dom';
import { Button, Collapse, Table, Tabs, Typography, Space,  } from 'antd';
import { useProductsTypes, useProductsAuditStatesMapVal, useProductsAuditStates } from '@/hooks/useProductsSets';
import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
import { useTranslation } from 'react-i18next';
import useProductsStore from '@/stores/Products/Index';
import { isEmpty } from '@/utils/commons';

const Header = ({title, ...props}) => {
  const { t } = useTranslation();
  return (
    <div className='flex justify-end items-center gap-4 h-full'>
      <div className='grow'>
        <h2 className='m-0 leading-tight'>{title}</h2>
      </div>
      {/* <Button size='small'>{t('Copy')}</Button> */}
      {/* <Button size='small'>{t('Import')}</Button> */}
      <Button size='small' type={'primary'} ghost>{t('Export')} PDF</Button>
    </div>
  );
};

const PriceTable = ({dataSource, loading}) => {
  const { t } = useTranslation('products');
  const stateMapVal = useProductsAuditStatesMapVal();

  const columns = [
    { key: 'title', dataIndex: ['info', 'title'], title: t('Title'), onCell: (r, index) => ({ rowSpan: r.rowSpan }) },
    { key: 'value', title: t('Quotation'), render: (_, { value, currency, unit }) => `${value} ${currency} / ${unit}` },
    // {key: 'price', title: t('Currency'), },
    // {key: 'currency', title: t('Currency'), },
    // {key: 'unit', title: t('Unit'), },
    { key: 'ageType', dataIndex: ['age_type'], title: t('AgeType.Type') },
    {
      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 }) => `${use_dates_start} ~ ${use_dates_end}`,
    },
    { key: 'weekdays', dataIndex: ['weekdays'], title: t('Weekdays') },
    {
      key: 'state',
      title: t('State'),
      render: (_, r) => {
        return stateMapVal[`${r.info.audit_state}`]?.label;
      },
    },
    {
      title: '',
      key: 'action',
      render: () => (
        <Space>
          <Button>✔</Button>
          <Button>✖</Button>
        </Space>
      ),
    },
  ];
  return <Table pagination={false} columns={columns} dataSource={dataSource} rowKey={(r) => r.id} />;
}

/**
 *
 */
const TypesPanels = () => {
  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, children: <PriceTable loading={loading} dataSource={agencyProducts[ele.value].reduce((r, c) => r.concat(c.quotation.map((q, i) => ({ ...q, info: c.info, rowSpan: i=== 0 ? c.quotation.length : 0 }))), [])} /> }));
    setShowTypes(_show);

    setActiveKey(isEmpty(_show) ? [] : [_show[0].key]);

    return () => {};
  }, [productsTypes, agencyProducts]);

  const onCollapseChange = (_activeKey) => {
    setActiveKey(_activeKey)
  }
  return (
    <Collapse items={showTypes} activeKey={activeKey} onChange={onCollapseChange} />
  )
}

const Audit = ({ ...props }) => {
  // const [loading, agencyProducts] = useProductsStore((state) => [state.loading, state.agencyProducts]);

  return (
    <>
      <SecondHeaderWrapper header={<Header title={'{供应商名字}'} />}>
        <hr />
        <TypesPanels />
        {/* <PriceTable dataSource={agencyProductsList} /> */}
      </SecondHeaderWrapper>
    </>
  );
};
export default Audit;