WEB/src/pages/Logistics/List/index.tsx

import { logisticscontrollerGetlist, logisticscontrollerGetshipmentlabel,
  logisticscontrollerDeleteshipment,
  logisticscontrollerUpdateshipmentstate
 } from '@/servers/api/logistics';
import { stockcontrollerGetallstockpoints } from '@/servers/api/stock';
import { formatUniuniShipmentState } from '@/utils/format';
import { printPDF } from '@/utils/util';
import { CopyOutlined } from '@ant-design/icons';
import { ToastContainer, toast } from 'react-toastify';
import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { App, Button, Divider, Popconfirm } from 'antd';
import { useRef, useState } from 'react';
import { sitecontrollerAll } from '@/servers/api/site';

const ListPage: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const { message } = App.useApp();
  const [selectedRows, setSelectedRows] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const columns: ProColumns<API.Service>[] = [
    {
      title: '服务商',
      dataIndex: 'tracking_provider',
      hideInSearch: true,
    },
    {
      title: '仓库',
      dataIndex: 'stockPointId',
      // hideInTable: true,
      valueType: 'select',
      request: async () => {
        const { data = [] } = await stockcontrollerGetallstockpoints();
        return data.map((item) => ({
          label: item.name,
          value: item.id,
        }));
      },
    },
    {
      title: '网站',
      dataIndex: 'siteId',
      valueType: 'select',
      hideInSearch: true,
      request: async () => {
        const { data = [] } = await sitecontrollerAll();
        return data.map((item) => ({
          label: item.siteName,
          value: item.id,
        }));
      },
    },
    {
      title: '订单号',
      dataIndex: 'externalOrderId',
    },
    {
      title: '快递单号',
      dataIndex: 'return_tracking_number',
      render(_, record) {
        return (
          <>
            {record.return_tracking_number}
            <CopyOutlined
              onClick={async () => {
                try {
                  await navigator.clipboard.writeText(record.return_tracking_number);
                  message.success('复制成功！');
                } catch (err) {
                  message.error('复制失败！');
                }
              }}
            />
          </>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'state',
      hideInSearch: true,
      render(_, record) {
        return formatUniuniShipmentState(record.state);
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      hideInSearch: true,
      valueType: 'dateTime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      hideInSearch: true,
      render(_, record) {
        return (
          <>
            <Button
              type="primary"
              disabled={isLoading}
              onClick={async () => {
                setIsLoading(true);
                const { data } = await logisticscontrollerGetshipmentlabel(record.id);
                const content = data.content;
                printPDF([content]);
                setIsLoading(false);
              }}
            >
              Label
            </Button>
            <Divider type="vertical" />
            <Button
              type="primary"
              disabled={isLoading}
              onClick={async () => {
                setIsLoading(true);
                const res = await logisticscontrollerUpdateshipmentstate({shipmentId:record.id});
                console.log('res', res);

                setIsLoading(false);
              }}
            >
              刷新状态
            </Button>
            <Divider type="vertical" />
            <Popconfirm
              disabled={isLoading}
              title="删除"
              description="确认删除？"
              onConfirm={async () => {
                try {
                  setIsLoading(true);
                  const { success, message: errMsg } =
                  await logisticscontrollerDeleteshipment(record.id);
                  if (!success) {
                    throw new Error(errMsg);
                  }
                  setIsLoading(false);
                  actionRef.current?.reload();
                } catch (error: any) {
                  setIsLoading(false);
                  message.error(error.message);
                }
              }}
            >
              <Button type="primary" danger>
                删除
              </Button>
            </Popconfirm>
            <ToastContainer />
          </>
        );
      },
    },
  ];

  const handleBatchPrint = async () => {
    if (selectedRows.length === 0) {
      message.warning('请选择要打印的项');
      return;
    }
    await printPDF(
      selectedRows.map((row) => row.labels[row.labels.length - 1].url),
    );

    setSelectedRows([]);
  };
  return (
    <PageContainer ghost>
      <ProTable
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        request={async (values) => {
          console.log(values);
          const { data, success } = await logisticscontrollerGetlist({
            params: values,
          });
          if (success) {
            return {
              total: data?.total || 0,
              data: data?.items || [],
            };
          }
          return {
            data: [],
          };
        }}
        // rowSelection={{
        //   selectedRowKeys: selectedRows.map((row) => row.id),
        //   onChange: (_, selectedRows) => setSelectedRows(selectedRows),
        // }}
        columns={columns}
        tableAlertOptionRender={() => {
          return (
            <Button onClick={handleBatchPrint} type="primary">
              批量打印
            </Button>
          );
        }}
      />
    </PageContainer>
  );
};
export default ListPage;