canrd-main / canrd-erp-front · Files

import ButtonConfirm from '@/components/ButtomConfirm';
import { postErpOrderListByPage } from '@/services';
import {
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Divider, Flex, Space, Tag, message } from 'antd';
import { Key, useState } from 'react';
import CheckModal from './components/CheckModal';
import DeliverModal from './components/DeliverModal';
import OrderDrawer from './components/OrderDrawer';
import { MAIN_ORDER_COLUMNS, SUB_ORDER_COLUMNS } from './constant';
import './index.less';
import { OrderListItemType, OrderType } from './type.d';

const OrderPage = () => {
  const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
  const [checkVisible, setCheckVisible] = useState<boolean>(false);
  const [deliverVisible, setDeliverVisible] = useState<boolean>(false);
  const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
  const [orderRow, setOrderRow] = useState<Partial<OrderType>>({});
  const [subOrderShowText, setSubOrderShowText] = useState('订单详情');

  const [selectedRows, setSelectedRows] = useState({});
  const [selectedRowObj, setSelectedRowObj] = useState({});

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

  //   setSelectedItems(newSelectedItems);
  // };

  // 主订单内容渲染
  const MainOrderColumnRender = ({ record }: { record: OrderListItemType }) => {
    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);
    };
    return (
      <Flex vertical={true}>
        {/* 编号、时间、销售信息 */}
        <Flex justify="space-between" className="px-2 py-4 bg-gray-100">
          {/* <Checkbox
            onChange={() => onCheckboxChange(record.main_order_id)}
            checked={selectedItems.includes(record.main_order_id)}
          > */}
          <Flex wrap="wrap" gap="middle">
            <div>{record.createTime}</div>
            <div>订单编号：{record.main_order_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>
                收货信息：
                <Space
                  split={<span className="text-blue-300">|</span>}
                  className="ml-2"
                >
                  <span>收货人：{record.customerName}</span>
                  <span>
                    联系方式：
                    {record.customerContactNumber}
                  </span>
                  <span>
                    单位联系人：
                    {record.institutionContactName}
                  </span>
                  <span>单位名称：{record.institution}</span>
                  <span> 收货地址：{record.customerShippingAddress}</span>
                </Space>
              </div>
              <div>
                开票信息：
                <Space
                  split={<span className="text-blue-300">|</span>}
                  className="ml-2"
                >
                  <span>开户银行：{record.bank}</span>
                  <span>
                    银行账号：
                    {record.bankAccountNumber}
                  </span>
                  <span>
                    识别号：
                    {record.invoiceIdentificationNumber}
                  </span>
                </Space>
              </div>
              <div>
                备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：
                <span className="ml-2">{record.notes}</span>
              </div>
            </Space.Compact>
          </Space>
          {/* 总金额、操作按钮信息 */}
          <Space>
            <Space.Compact direction="vertical" align="end">
              <div>
                总金额：<span className="text-lg">{record.totalPayment}￥</span>
              </div>
              <Space>
                <Button
                  className="p-0"
                  type="link"
                  onClick={() => {
                    if (!selectedRowObj[record.id]?.length) {
                      return message.error('请选择选择子订单');
                    }
                    setSelectedRows(selectedRowObj[record.id]);
                    setDeliverVisible(true);
                  }}
                >
                  发货
                </Button>
                <Button
                  className="p-0"
                  type="link"
                  onClick={() => {
                    window.print();
                  }}
                >
                  打印
                </Button>
                <ButtonConfirm
                  className="p-0"
                  title="确认开票？"
                  text="开票"
                  onConfirm={() => {}}
                />
                <Button
                  className="p-0"
                  type="link"
                  onClick={() => {
                    setOrderDrawerVisible(true);
                    setOrderRow(record);
                  }}
                >
                  编辑
                </Button>
                <Button
                  className="p-0"
                  type="link"
                  onClick={() => {
                    setCheckVisible(true);
                  }}
                >
                  审核
                </Button>
                <ButtonConfirm
                  className="p-0"
                  title="确认作废？"
                  text="作废"
                  onConfirm={() => {}}
                />
              </Space>
            </Space.Compact>
            <Space.Compact direction="vertical">
              <Button
                type="primary"
                // todo change main_order_id
                onClick={() => handleExpand(record.id)}
                size="small"
              >
                {subOrderShowText}
              </Button>
            </Space.Compact>
          </Space>
        </Flex>
      </Flex>
    );
  };

  // 主订单列表
  const mainOrdersColumns: ProColumns<OrderType>[] = MAIN_ORDER_COLUMNS.map(
    (item) => {
      if (item.dataIndex === 'name') {
        return {
          ...item,
          render: (text, record) => {
            return <MainOrderColumnRender record={record} />;
          },
        };
      }
      return item;
    },
  );

  const expandedRowRender = (record) => {
    let subOrders = record.subOrderInformationLists;

    return (
      <ProTable
        columns={(SUB_ORDER_COLUMNS as any)
          .map((item) => {
            if (item.component === 'tag') {
              return {
                ...item,
                render: (text: string) => {
                  let color = 'gold';
                  if (text === '已开票' || text === '已审核') {
                    color = 'green';
                  }
                  return <Tag color={color}>{text}</Tag>;
                },
              };
            }
            return item;
          })
          .concat([
            {
              title: '操作',
              dataIndex: 'operation',
              key: 'operation',
              align: 'center',
              render: () => (
                <Flex>
                  <Button type="link" size="small">
                    编辑
                  </Button>
                  <Button
                    type="link"
                    size="small"
                    onClick={() => {
                      setCheckVisible(true);
                      setOrderRow(record);
                    }}
                  >
                    审核
                  </Button>

                  <Button type="link" size="small">
                    备注
                  </Button>
                  <Button type="link" size="small">
                    作废
                  </Button>
                </Flex>
              ),
            },
            {
              title: '备注',
              dataIndex: 'notes',
              key: 'notes',
              align: 'center',
              render: () => (
                <Button type="dashed" size="small">
                  详情
                </Button>
              ),
            },
          ])}
        rowSelection={{
          onChange: (selectedRowKeys: any, selectedRows: any) => {
            console.log(selectedRowKeys, selectedRows);
            setSelectedRowObj({
              ...setSelectedRowObj,
              [record.id]: selectedRows,
            });
          },
          // 自定义选择项参考: 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}
        columns={mainOrdersColumns}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        expandedRowKeys={expandedRowKeys}
        expandable={{ expandedRowRender }}
        dateFormatter="string"
        options={false}
        headerTitle="订单列表"
        search={{
          labelWidth: 'auto',
        }}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params: {
            pageSize: 10;
            current: 1;
          },
          sorter,
          filter,
        ) => {
          const { data } = await postErpOrderListByPage({
            // ...params,
            // FIXME: remove @ts-ignore
            // @ts-ignore
            sorter,
            filter,
            data: 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({});
          }}
        />
      )}

      {checkVisible && (
        <CheckModal
          data={orderRow}
          setCheckVisible={setCheckVisible}
          onClose={() => {
            setCheckVisible(false);
            setOrderRow({});
          }}
        />
      )}

      {deliverVisible && (
        <DeliverModal
          data={selectedRows}
          onClose={() => {
            setCheckVisible(false);
            setOrderRow({});
          }}
        />
      )}
    </PageContainer>
  );
};

export default OrderPage;