canrd-main / canrd-erp-front · Files

import ButtonConfirm from '@/components/ButtomConfirm';
import { postServiceOrderQueryServiceOrder } from '@/services';
import { enumValueToLabel } from '@/utils';
import {
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Checkbox, Divider, Flex, Space, Tag, message } from 'antd';
import { Key, useRef, useState } from 'react';
import CheckModal from './components/CheckModal';
import DeliverModal from './components/DeliverModal';
import OrderDrawer from './components/OrderDrawer';
import {
  INVOCING_STATUS_OPTIONS,
  MAIN_ORDER_COLUMNS,
  ORDER_STATUS_OPTIONS,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  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 [selectedRows, setSelectedRows] = useState({});
  const [selectedRowObj, setSelectedRowObj] = useState({});
  const [selectedItems, setSelectedItems] = useState([]);
  const mainTableRef = useRef();

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

    setSelectedItems(newSelectedItems);
  };

  // 主订单内容渲染
  const MainOrderColumnRender = ({ record }: { record: OrderListItemType }) => {
    const handleExpand = (key: number) => {
      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.id)}
            checked={selectedItems.includes(record.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={() => {
                    setOrderRow(record);
                    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"
              >
                {expandedRowKeys.includes(record.id) ? '收起详情' : '订单详情'}
              </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 label = enumValueToLabel(text, ORDER_STATUS_OPTIONS);
                  console.log('label：' + label);
                  if (label === undefined) {
                    label = enumValueToLabel(text, INVOCING_STATUS_OPTIONS);
                  }
                  let color = 'gold';
                  if (label === '已开票' || label === '已审核') {
                    color = 'green';
                  }
                  return <Tag color={color}>{label}</Tag>;
                },
              };
            }

            //枚举字段处理
            if (item.key === 'paymentMethod' || item.key === 'paymentChannel') {
              return {
                ...item,
                render: (text: string) => {
                  let label = enumValueToLabel(text, PAYMENT_CHANNEL_OPTIONS);
                  if (label === undefined) {
                    label = enumValueToLabel(text, PAYMENT_METHOD_OPTIONS);
                  }
                  return label;
                },
              };
            }
            return item;
          })
          .concat([
            {
              title: '操作',
              dataIndex: 'operation',
              key: 'operation',
              align: 'center',
              render: (optText, optRecord) => (
                <Flex>
                  <Button
                    type="link"
                    size="small"
                    onClick={() => {
                      mainTableRef.current?.reload();
                    }}
                  >
                    编辑
                  </Button>
                  <Button
                    type="link"
                    size="small"
                    onClick={() => {
                      setCheckVisible(true);
                      setOrderRow(optRecord);
                    }}
                  >
                    审核
                  </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
        actionRef={mainTableRef}
        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 postServiceOrderQueryServiceOrder({
            // ...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" onClick={() => {}}>
            导出
          </Button>,
        ]}
      />

      {orderDrawerVisible && (
        <OrderDrawer
          data={orderRow}
          onClose={() => {
            setOrderDrawerVisible(false);
            setOrderRow({});
            mainTableRef.current?.reload();
          }}
        />
      )}

      {checkVisible && (
        <CheckModal
          setCheckVisible={setCheckVisible}
          data={orderRow}
          onClose={() => {
            setCheckVisible(false);
            setOrderRow({});
            mainTableRef.current?.reload();
          }}
        />
      )}

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

export default OrderPage;