index.tsx 12.6 KB

Edit Raw Blame History

import { postErpOrderListByPage } from '@/services';
import {
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Checkbox, Divider, Flex, Space } from 'antd';
import React, { Key, useState } from 'react';
import OrderDrawer from './components/OrderDrawer';
import './index.less';

const TableList: React.FC<unknown> = () => {
  const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
  const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
  const [selectedItems, setSelectedItems] = useState([]);
  const [orderRow, setOrderRow] = useState<[]>([]);
  const [subOrderShowText, setSubOrderShowText] = useState('订单详情');

  const onCheckboxChange = (itemKey: never) => {
    const newSelectedItems = selectedItems.includes(itemKey)
      ? selectedItems.filter((key) => key !== itemKey)
      : [...selectedItems, itemKey];

    setSelectedItems(newSelectedItems);
  };

  const a = 2;
  if (a == 2) {
  }

  // 主订单内容渲染
  const MainOrderColunmRender = ({ record }) => {
    return (
      <Flex vertical={true}>
        {/* 编号、时间、销售信息 */}
        <Flex justify="space-between" className="px-2 py-4 bg-gray-100">
          <Checkbox
            onChange={() => onCheckboxChange(record.id)}
            checked={selectedItems.includes(record.id)}
          >
            <Flex wrap="wrap" gap="middle">
              <div>{record.createTime}</div>
              <div>订单编号：{record.id}</div>
            </Flex>
          </Checkbox>
        </Flex>
        {/* 收货、开票、备注信息 */}
        <Flex justify="space-between" className="px-2 py-4">
          <Space split={<Divider type="vertical" align="center" />}>
            <Space.Compact direction="vertical" className="gap-2">
              <div>
                收货信息：收货人：{record.customerName} 联系方式：
                {record.customerContactNumber} 单位联系人：
                {record.institutionContactName} 单位名称：{record.institution}{' '}
                收货地址：{record.customerShippingAddress}
              </div>
              <div>
                开票信息：开户银行：{record.bank} 银行账号：
                {record.bankAccountNumber} 识别号：
                {record.invoiceIdentificationNumber}
              </div>
              <div>
                备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：{record.notes}
              </div>
            </Space.Compact>
          </Space>
          {/* 总金额、操作按钮信息 */}
          <Space>
            <Space.Compact direction="vertical" align="end">
              <div>
                总金额：<span className="text-lg">{record.totalPayment}￥</span>
              </div>
              <div>
                <Button className="p-0 pe-2" type="link">
                  确认收货
                </Button>
                <Button className="p-0 pe-2" type="link">
                  发货
                </Button>
                <Button className="p-0 pe-2" type="link">
                  打印
                </Button>
                <Button className="p-0 pe-2" type="link">
                  开票
                </Button>
                <Button
                  className="p-0 pe-2"
                  type="link"
                  onClick={() => setOrderDrawerVisible(true)}
                >
                  编辑
                </Button>
                <Button className="p-0 pe-2" type="link">
                  审核
                </Button>
                <Button className="p-0" type="link">
                  作废
                </Button>
              </div>
            </Space.Compact>
            <Space.Compact direction="vertical">
              <Button
                type="primary"
                onClick={() => handleExpand(record.id)}
                size="small"
              >
                {subOrderShowText}
              </Button>
            </Space.Compact>
          </Space>
        </Flex>
      </Flex>
    );
  };
  const [data, setData] = useState([]);

  const tableListDataSource: TableListItem[] = [];

  // 主订单列表
  const mainOrdersColumns: ProColumns<TableListItem>[] = [
    {
      title: '订单列表',
      width: 120,
      dataIndex: 'name',
      search: false,
      render: (text, record) => {
        return <MainOrderColunmRender record={record} />;
      },
    },
    {
      title: '订单编号',
      dataIndex: 'id',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '销售代表',
      dataIndex: 'salesCode',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '收货人',
      dataIndex: 'customerName',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '收货人联系电话',
      dataIndex: 'customerContactNumber',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '单位',
      dataIndex: 'institution',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '单位联系人',
      dataIndex: 'institutionContactName',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '收货人地址',
      dataIndex: 'customerShippingAddress',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '商品参数',
      dataIndex: 'parameters',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '支付方式',
      dataIndex: 'paymentStatus',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '物流方式',
      dataIndex: 'logisticsMethod',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '支付渠道',
      dataIndex: 'paymentChannel',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '银行名称',
      dataIndex: 'bank',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '支付流水',
      dataIndex: 'paymentTransactionId',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '所属部门',
      dataIndex: 'productBelongBusiness',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '创建日期',
      dataIndex: 'createTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: '开票状态',
      dataIndex: 'invoicingStatus',
      valueType: 'text',
      hideInTable: true,
    },
    {
      title: '开票日期',
      dataIndex: 'invoicingTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
  ];
  const handleExpand = (key: number) => {
    if (expandedRowKeys.includes(key)) {
      setSubOrderShowText('订单详情');
    } else {
      setSubOrderShowText('收起订单');
    }
    const newExpandedRowKeys = expandedRowKeys.includes(key)
      ? expandedRowKeys.filter((k) => k !== key)
      : [...expandedRowKeys, key];

    setExpandedRowKeys(newExpandedRowKeys);
  };

  const expandedRowRender = (record) => {
    let subOrders = record.subOrderInformationLists;
    console.log(subOrders);
    return (
      <ProTable
        columns={[
          { title: 'ID', dataIndex: 'id', key: 'id' },
          { title: '商品编码', dataIndex: 'productCode', key: 'productCode' },
          { title: '商品名称', dataIndex: 'productName', key: 'productName' },
          { title: '商品参数', dataIndex: 'parameters', key: 'parameters' },
          { title: '商品数量', dataIndex: 'quantity', key: 'quantity' },
          {
            title: '子订单金额(￥)',
            dataIndex: 'subOrderPayment',
            key: 'subOrderPayment',
          },
          {
            title: '支付方式',
            dataIndex: 'paymentMethod',
            key: 'paymentMethod',
          },
          {
            title: '支付渠道',
            dataIndex: 'paymentChannel',
            key: 'paymentChannel',
          },
          {
            title: '支付流水',
            dataIndex: 'paymentTransactionId',
            key: 'paymentTransactionId',
          },
          {
            title: '物流方式',
            dataIndex: 'logisticsMethod',
            key: 'logisticsMethod',
          },
          { title: '物流单号', dataIndex: 'serialNumber', key: 'serialNumber' },
          {
            title: '开票状态',
            dataIndex: 'invoicingStatus',
            key: 'invoicingStatus',
          },
          { title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus' },
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            align: 'center',

            render: () => (
              <Flex>
                <Button
                  type="link"
                  size="small"
                  style={{ paddingLeft: 0, paddingRight: '4px' }}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  size="small"
                  style={{ paddingLeft: 0, paddingRight: '4px' }}
                >
                  审核
                </Button>
                <Button
                  type="link"
                  size="small"
                  style={{ paddingLeft: 0, paddingRight: '4px' }}
                >
                  备注
                </Button>
                <Button
                  type="link"
                  size="small"
                  style={{ paddingLeft: 0, paddingRight: 0 }}
                >
                  作废
                </Button>
              </Flex>
            ),
          },
          {
            title: '备注',
            dataIndex: 'notes',
            key: 'notes',
            align: 'center',
            render: () => [
              <Button type="dashed" size="small">
                详情
              </Button>,
            ],
          },
        ]}
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          // selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          defaultSelectedRowKeys: [],
        }}
        rowKey="id"
        headerTitle={false}
        search={false}
        options={false}
        dataSource={subOrders}
        pagination={false}
      />
    );
  };

  return (
    <PageContainer
      header={{
        title: '订单管理',
      }}
    >
      <ProTable
        expandIconColumnIndex={-1}
        // dataSource={data}
        columns={mainOrdersColumns}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        expandedRowKeys={expandedRowKeys}
        expandable={{ expandedRowRender }}
        search={false}
        dateFormatter="string"
        options={false}
        headerTitle="订单列表"
        search={{
          labelWidth: 'auto',
        }}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params: T & {
            pageSize: 10;
            current: 1;
          },
          sorter,
          filter,
        ) => {
          const { data } = await postErpOrderListByPage({
            // ...params,
            // FIXME: remove @ts-ignore
            // @ts-ignore
            sorter,
            filter,
            body: JSON.stringify(params),
          });
          console.log(data);
          return {
            data: data?.data || [],
          };
        }}
        toolBarRender={() => [
          <Button key="show">一键展开</Button>,
          <Button key="out" onClick={() => setOrderDrawerVisible(true)}>
            新增
          </Button>,
          <Button key="primary" type="primary">
            导出
          </Button>,
        ]}
      />

      {orderDrawerVisible && (
        <OrderDrawer
          data={orderRow}
          onClose={() => {
            setOrderDrawerVisible(false);
            setOrderRow({});
          }}
        />
      )}
    </PageContainer>
  );
};

export default TableList;