canrd-main / canrd-erp-front · Files

import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import {
  postServiceOrderExport,
  postServiceOrderOrderCancel,
  postServiceOrderPrintOrder,
  postServiceOrderQueryServiceOrder,
} from '@/services';
import { orderExport } from '@/services/order';
import { enumValueToLabel } from '@/utils';
import { DownOutlined } from '@ant-design/icons';
import {
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import {
  Button,
  Checkbox,
  Divider,
  Dropdown,
  Flex,
  MenuProps,
  Space,
  Tag,
  message,
} from 'antd';
import { cloneDeep } from 'lodash';
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,
  LOGISTICS_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 [mainOrderAllItemKeys, setMainOrderAllItemKeys] = useState([]);
  const [rolePath, setRolePath] = useState([]); //当前角色权限（新增跟打印按钮）

  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 handleAllExpand = () => {
    if (expandedRowKeys.length === mainOrderAllItemKeys.length) {
      setExpandedRowKeys([]);
      return;
    }

    setExpandedRowKeys(mainOrderAllItemKeys);
  };
  // 主订单内容渲染
  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.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>
                {record.mainPath.includes('sendProduct') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      if (!selectedRowObj[record.id]?.length) {
                        return message.error('请选择选择子订单');
                      }
                      setSelectedRows(selectedRowObj[record.id]);
                      setDeliverVisible(true);
                    }}
                  >
                    发货
                  </Button>
                ) : (
                  ''
                )}
                {record.mainPath.includes('printOrder') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      window.print();
                    }}
                  >
                    打印
                  </Button>
                ) : (
                  ''
                )}
                {record.mainPath.includes('confirmReceipt') ? (
                  <ButtonConfirm
                    className="p-0"
                    title="确认开票？"
                    text="开票"
                    onConfirm={() => {}}
                  />
                ) : (
                  ''
                )}
                {record.mainPath.includes('updateOrder') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      setOrderDrawerVisible(true);
                      setOrderRow(record);
                    }}
                  >
                    编辑
                  </Button>
                ) : (
                  ''
                )}
                {record.mainPath.includes('checkOrder') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      setOrderRow(record);
                      setCheckVisible(true);
                    }}
                  >
                    审核
                  </Button>
                ) : (
                  ''
                )}

                {record.mainPath.includes('OrderCancel') ? (
                  <ButtonConfirm
                    className="p-0"
                    title="确认作废？"
                    text="作废"
                    onConfirm={async () => {
                      let body = { id: record.id };
                      const data = await postServiceOrderOrderCancel({
                        data: body,
                      });
                      if (data.result === RESPONSE_CODE.SUCCESS) {
                        message.success(data.message);
                        mainTableRef.current?.reload();
                      }
                    }}
                  />
                ) : (
                  ''
                )}
              </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);
                  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' ||
              item.key === 'logisticsMethod'
            ) {
              return {
                ...item,
                render: (text: string) => {
                  let label = enumValueToLabel(text, PAYMENT_CHANNEL_OPTIONS);
                  if (label === undefined) {
                    label = enumValueToLabel(text, PAYMENT_METHOD_OPTIONS);
                  }
                  if (label === undefined) {
                    label = enumValueToLabel(text, LOGISTICS_STATUS_OPTIONS);
                  }
                  return label;
                },
              };
            }
            return item;
          })
          .concat([
            {
              title: '操作',
              dataIndex: 'operation',
              key: 'operation',
              align: 'center',
              render: (optText, optRecord) => (
                <Flex>
                  {optRecord.subPath.includes('sendProduct') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        optRecord.mainOrderId = record.id;
                        setSelectedRows([cloneDeep(optRecord)]); //克隆一份数据，避免后续修改污染
                        setDeliverVisible(true);
                      }}
                    >
                      发货
                    </Button>
                  ) : (
                    ''
                  )}
                  {optRecord.subPath.includes('printOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={async () => {
                        //调用打印接口
                        let body = { subIds: [optRecord.id] };
                        const data = await postServiceOrderPrintOrder({
                          data: body,
                        });
                        if (data.result === RESPONSE_CODE.SUCCESS) {
                          message.success(data.message);
                          window.print();
                          mainTableRef.current?.reload();
                        }
                      }}
                    >
                      打印
                    </Button>
                  ) : (
                    ''
                  )}
                  {optRecord.subPath.includes('confirmReceipt') ? (
                    <ButtonConfirm
                      className="p-0"
                      title="确认开票？"
                      text="开票"
                      onConfirm={() => {}}
                    />
                  ) : (
                    ''
                  )}
                  {optRecord.subPath.includes('updateOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setOrderDrawerVisible(true);
                        setOrderRow(optRecord);
                      }}
                    >
                      编辑
                    </Button>
                  ) : (
                    ''
                  )}
                  {optRecord.subPath.includes('checkOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setOrderRow(optRecord);
                        setCheckVisible(true);
                      }}
                    >
                      审核
                    </Button>
                  ) : (
                    ''
                  )}

                  {/* {optRecord.subPath.includes("OrderCancel") ?
                  <ButtonConfirm
                    className="p-0"
                    title="确认作废？"
                    text="作废"
                    onConfirm={() => {
                     }}
                  />
                  : ''
                } */}
                </Flex>
              ),
            },
            {
              title: '备注',
              dataIndex: 'notes',
              key: 'notes',
              align: 'center',
              render: () => (
                <Button type="dashed" size="small">
                  详情
                </Button>
              ),
            },
          ])}
        rowSelection={{
          onChange: (selectedRowKeys: any, selectedRows: any) => {
            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}
      />
    );
  };

  function toolBarRender() {
    let toolBtns = [];

    //导出按钮配置
    const items: MenuProps['items'] = [
      {
        label: '导出已选中订单',
        key: '1',
        onClick: async () => {
          if (selectedItems.length === 0) {
            message.error('请选择订单');
            return;
          }
          let body = { flag: true, ids: selectedItems };
          // const data = await postServiceOrderExport({ data: { flag: true, ids: selectedItems } });
          orderExport(body);
          // if (data.result === RESPONSE_CODE.SUCCESS) {
          //   message.success(data.message);
          // }
        },
      },
      {
        label: '导出当前页订单',
        key: '2',
        onClick: async () => {
          if (mainOrderAllItemKeys.length === 0) {
            message.error('当前没有订单');
            return;
          }
          const data = await postServiceOrderExport({
            data: { flag: true, ids: mainOrderAllItemKeys },
          });
          if (data.result === RESPONSE_CODE.SUCCESS) {
            message.success(data.message);
          }
        },
      },
      {
        label: '导出所有订单',
        key: '3',
        onClick: async () => {
          const data = await postServiceOrderExport({
            data: { flag: false, ids: [] },
          });
          if (data.result === RESPONSE_CODE.SUCCESS) {
            message.success(data.message);
          }
        },
      },
    ];

    const menuProps = {
      items,
      onClick: () => {},
    };

    if (rolePath.includes('addOrder')) {
      toolBtns.push(
        <Button
          type="primary"
          key="out"
          onClick={() => setOrderDrawerVisible(true)}
        >
          新增
        </Button>,
      );
    }

    toolBtns.push(
      <Dropdown menu={menuProps}>
        <Button>
          <Space>
            导出
            <DownOutlined />
          </Space>
        </Button>
      </Dropdown>,
    );

    toolBtns.push(
      <Button
        key="show"
        onClick={() => {
          handleAllExpand();
        }}
      >
        {mainOrderAllItemKeys?.length !== expandedRowKeys.length
          ? '一键展开'
          : '一键收起'}
      </Button>,
    );

    return toolBtns;
  }

  return (
    <PageContainer
      header={{
        title: '订单管理',
      }}
    >
      <ProTable
        actionRef={mainTableRef}
        expandIconColumnIndex={-1}
        columns={mainOrdersColumns}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
          pageSize: 10,
        }}
        expandedRowKeys={expandedRowKeys}
        expandable={{ expandedRowRender }}
        dateFormatter="string"
        options={false}
        headerTitle="订单列表"
        search={{
          labelWidth: 'auto',
        }}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params,
          sorter,
          filter,
        ) => {
          const { data } = await postServiceOrderQueryServiceOrder({
            // ...params,
            // FIXME: remove @ts-ignore
            // @ts-ignore
            sorter,
            filter,
            data: params,
          });
          let mainOrderIds = data?.data?.map((d) => d.id);
          if (mainOrderAllItemKeys === undefined) {
            setMainOrderAllItemKeys([]);
          } else {
            setMainOrderAllItemKeys(mainOrderIds);
          }
          setRolePath(data.specialPath);
          return {
            data: data?.data || [],
            total: data?.total || 0,
          };
        }}
        toolBarRender={() => {
          return toolBarRender();
        }}
      />

      {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={() => {
            setDeliverVisible(false);
            setOrderRow({});
            mainTableRef.current?.reload();
          }}
        />
      )}
    </PageContainer>
  );
};

export default OrderPage;