WEB/src/pages/Statistics/Restocking/index.tsx

import { statisticscontrollerRestocking } from '@/servers/api/statistics';
import {
  ActionType,
  PageContainer,
  ProColumns,
  ProFormDigit,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import dayjs from 'dayjs';
import { useMemo, useRef, useState } from 'react';

const ListPage: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [count, setCount] = useState(4);
  const history = useMemo(
    () =>
      Array.from({ length: Math.min(!!count ? count : 5, 10) }).map((_, i) => {
        if (dayjs().date() > 20) i++;
        return dayjs().add(i, 'month').format('YYYY-MM');
      }),
    [count],
  );

  const [savety, setSavety] = useState({});

  const columns: ProColumns[] = [
    {
      title: '产品名称',
      dataIndex: 'productName',
    },
    {
      title: '30天销量',
      dataIndex: 'last30DaysSales',
      hideInSearch: true,
    },
    {
      title: '2*15天销量',
      dataIndex: 'last15DaysSales',
      hideInSearch: true,
      render(_, record) {
        return 2 * record.last15DaysSales;
      },
    },
    {
      title: '库存',
      dataIndex: 'totalStock',
      hideInSearch: true,
    },
    ...history.map((v, i) => ({
      title: v,
      onCell: () => ({ style: { padding: 0 } }),
      align: 'center' as any,
      hideInSearch: true,
      render(_, record) {
        const base = record.lastMonthSales;
        return (
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              position: 'absolute',
              justifyContent: 'center',
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
            }}
          >
            <div style={{ position: 'absolute', zIndex: 99 }}>
              <div>{base}</div>
              <div>{base}</div>
              <div>{base}</div>
            </div>
            <div
              style={{
                position: 'absolute',
                zIndex: 1,
                width:
                  Math.max(Math.min(record.totalStock / base - i, 1), 0) * 100 +
                  '%',
                height: '100%',
                alignItems: 'flex-start',
                alignSelf: 'flex-start',
                backgroundColor: 'red',
              }}
            ></div>
          </div>
        );
      },
    })),
    {
      title: '安全补充系数',
      hideInSearch: true,
      render(_, record) {
        return (
          <ProFormDigit
            key={record.productSku}
            width={100}
            fieldProps={{
              defaultValue: 0,
              onChange(value) {
                setSavety({
                  ...savety,
                  [record.productSku]: value,
                });
              },
            }}
          />
        );
      },
    },
    {
      title: '',
      hideInSearch: true,
      render(_, record) {
        const base = record.lastMonthSales;
        return (
          <div>
            <div>{count * base}</div>
            <div>{2 * count * base}</div>
          </div>
        );
      },
    },
    {
      title: '合计',
      hideInSearch: true,
      render(_, record) {
        const base = record.lastMonthSales;
        return 3 * count * base + (savety[record.productSku] || 0);
      },
    },
    {
      title: '修正数',
      hideInSearch: true,
      render(_, record) {
        const base = record.lastMonthSales;
        return (
          <ProFormDigit
            key={'fix' + record.productSku + (savety[record.productSku] || 0)}
            width={100}
            fieldProps={{
              defaultValue: 3 * count * base + (savety[record.productSku] || 0),
            }}
          />
        );
      },
    },
  ];
  return (
    <PageContainer ghost>
      <ProTable
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        request={async (param) => {
          const { data, success } = await statisticscontrollerRestocking(param);
          if (success) {
            return {
              total: data?.total || 0,
              data: data?.items || [],
            };
          }
          return {
            data: [],
          };
        }}
        columns={columns}
        dateFormatter="number"
        toolBarRender={() => [
          <ProFormText
            key="count"
            width="100px"
            fieldProps={{
              onChange: (e) => setCount(e.target.value),
              value: count,
            }}
          />,
        ]}
      />
    </PageContainer>
  );
};

export default ListPage;