canrd-main / canrd-erp-front · Files

import ButtonConfirm from '@/components/ButtomConfirm';
import { RESPONSE_CODE } from '@/constants/enum';
import {
  postServiceOrderOrderCancel,
  postServiceOrderQueryServiceOrder,
} from '@/services';
import { orderExport } from '@/services/order';
import { enumValueToLabel, formatDateTime } from '@/utils';
import { DownOutlined, EllipsisOutlined } from '@ant-design/icons';
import {
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { history } from '@umijs/max';
import {
  Avatar,
  Button,
  Checkbox,
  Divider,
  Dropdown,
  Flex,
  MenuProps,
  Space,
  Tag,
  message,
} from 'antd';
import { cloneDeep } from 'lodash';
import { Key, useEffect, useRef, useState } from 'react';
import OrderPrintModal from '../OrderPrint/OrderPrintModal';
import CheckModal from './components/CheckModal';
import ConfirmReceiptModal from './components/ConfirmReceiptModal';
import DeliverModal from './components/DeliverModal';
import FinancialDrawer from './components/FinancialDrawer';
import OrderDrawer from './components/OrderDrawer';
import OrderNotesEditModal from './components/OrderNotesEditModal';
import SubOrderComfirmReceiptImagesModal from './components/SubOrderComfirmReceiptImagesModal';
import {
  INVOCING_STATUS_OPTIONS,
  LOGISTICS_STATUS_OPTIONS,
  MAIN_ORDER_COLUMNS,
  ORDER_STATUS_OPTIONS,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  SUB_ORDER_COLUMNS,
  TAGS_COLOR,
} 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 [orderPrintVisible, setOrderPrintVisible] = useState<boolean>(false);
  const [
    subOrderConfirmReceiptImagesVisible,
    setSubOrderConfirmReceiptImagesVisible,
  ] = useState<boolean>(false);
  const [notesEditVisible, setNotesEditVisible] = useState<boolean>(false);
  const [financialVisible, setFinancialVisible] = useState<boolean>(false);
  const [isRePrintOrder, setIsRePrintOrder] = useState<boolean>(false);
  const [isSendProduct, setIsSendProduct] = useState<boolean>(false);
  const [isMainOrder, setIsMainOrder] = useState<boolean>(false);
  const [confirmReceiptVisible, setConfirmReceiptVisible] =
    useState<boolean>(false);
  const [deliverVisible, setDeliverVisible] = useState<boolean>(false);
  const [orderOptType, setOrderOptType] = useState<string>('');
  const [isFinalcialEdit, setIsFinalcialEdit] = useState<boolean>(false);
  const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
  const [orderRow, setOrderRow] = useState<Partial<OrderType>>({});
  const [mainOrderAllItemKeys, setMainOrderAllItemKeys] = useState([]);
  const [rolePath, setRolePath] = useState([]); //当前角色权限（新增跟打印按钮）
  const userInfo = JSON.parse(localStorage.getItem('userInfo'));
  const [tableHeight, setTableHeight] = useState(200);
  const [selectedRows, setSelectedRows] = useState({});
  const [selectedRowObj, setSelectedRowObj] = useState({});
  const [selectedItems, setSelectedItems] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const mainTableRef = useRef();
  const [messageApi, contextHolder] = message.useMessage();

  const exportLoading = () => {
    messageApi.open({
      type: 'loading',
      content: '正在导出文件...',
      duration: 0,
    });
  };

  const exportLoadingDestory = () => {
    messageApi.destroy();
  };

  const refreshTable = () => {
    mainTableRef.current?.reload();
    //刷新表格数据的时候,取消选中行
    setSelectedRowObj([]);
    setSelectedRows([]);
    setSelectedRowKeys([]);
  };

  const resize = () => {
    // 计算元素底部到视口顶部的距离
    let bottomDistance = document
      .getElementById('mainTable')
      ?.getElementsByClassName('ant-table-thead')[0]
      .getBoundingClientRect().bottom;
    // 获取屏幕高度
    let screenHeight =
      window.innerHeight || document.documentElement.clientHeight;

    // 计算元素底部到屏幕底部的距离
    let bottomToScreenBottomDistance = screenHeight - bottomDistance;

    // //底部分页元素的高度
    // var pH = screenHeight - document.getElementById("mainTable").getElementsByClassName('ant-table-body')[0].getBoundingClientRect().bottom;

    setTableHeight(bottomToScreenBottomDistance - 88);
  };

  useEffect(() => {
    resize();
    // 添加事件监听器，当窗口大小改变时调用resize方法
    window.addEventListener('resize', resize);
  });

  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>{formatDateTime(record.createTime)}</div>
              <div>订单编号：{record.id}</div>
            </Flex>
          </Checkbox>
          <Space>
            <div>销售代表：{record.salesCode}</div>

            {rolePath?.includes('addOrder') ? (
              <Button
                size="small"
                onClick={() => {
                  setOrderOptType('copy');
                  setOrderDrawerVisible(true);
                  let copy = cloneDeep(record);
                  copy.id = undefined;
                  copy.subOrderInformationLists?.forEach((item) => {
                    item.id = undefined;
                  });
                  setOrderRow(copy);
                }}
              >
                复制
              </Button>
            ) : (
              ''
            )}
          </Space>
        </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>
                  {/* className='whitespace-pre-wrap max-w-sm' */}
                  <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);
                      setIsSendProduct(true);
                    }}
                  >
                    发货
                  </Button>
                ) : (
                  ''
                )}
                {record.mainPath.includes('printOrder') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      if (!selectedRowObj[record.id]?.length) {
                        return message.error('请选择选择子订单');
                      }
                      setSelectedRows(selectedRowObj[record.id]);
                      setOrderRow(record);
                      setOrderPrintVisible(true);
                    }}
                  >
                    打印
                  </Button>
                ) : (
                  ''
                )}
                {record.mainPath.includes('rePrintOrder') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      if (!selectedRowObj[record.id]?.length) {
                        return message.error('请选择选择子订单');
                      }
                      setSelectedRows(selectedRowObj[record.id]);
                      setOrderRow(record);
                      setOrderPrintVisible(true);
                      setIsRePrintOrder(true);
                    }}
                  >
                    重新打印
                  </Button>
                ) : (
                  ''
                )}
                {record.mainPath.includes('modifySendInformation') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      if (!selectedRowObj[record.id]?.length) {
                        return message.error(
                          '请选择已经发货或者已经确认收货的子订单',
                        );
                      }
                      for (let row of selectedRowObj[record.id]) {
                        if (
                          row.orderStatus !== 'CONFIRM_RECEIPT' &&
                          row.orderStatus !== 'SHIPPED'
                        ) {
                          return message.error(
                            '请选择已经发货或者已经确认收货的子订单',
                          );
                        }
                      }
                      setSelectedRows(selectedRowObj[record.id]);
                      setDeliverVisible(true);
                      setIsSendProduct(false);
                    }}
                  >
                    修改发货信息
                  </Button>
                ) : (
                  ''
                )}
                {record.mainPath.includes('invoicing') ? (
                  <Button
                    type="link"
                    className="p-0"
                    onClick={() => {
                      let selectedSubOrders = selectedRowObj[record.id];
                      setSelectedRows(selectedSubOrders);
                      if (selectedSubOrders === undefined) {
                        setSelectedRows(record.subOrderInformationLists);
                      }
                      setOrderRow(record);
                      setFinancialVisible(true);
                    }}
                  >
                    开票
                  </Button>
                ) : (
                  ''
                )}
                {record.mainPath.includes('updateOrder') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      //勾选的子订单：如果有勾选，后面只校验有勾选的
                      let selectedSubOrders = selectedRowObj[record.id];
                      if (
                        selectedSubOrders === undefined ||
                        selectedSubOrders.length === 0
                      ) {
                        selectedSubOrders = record.subOrderInformationLists;
                      }
                      for (
                        let index = 0;
                        index < selectedSubOrders.length;
                        index++
                      ) {
                        let orderStatus = selectedSubOrders[index].orderStatus;
                        //是审核通过及之后的订单
                        if (
                          orderStatus !== 'UNAUDITED' &&
                          orderStatus !== 'AUDIT_FAILED'
                        ) {
                          message.error(
                            '请选择未审核或者审核失败的订单进行编辑',
                          );
                          return;
                        }
                      }
                      setOrderDrawerVisible(true);
                      setOrderRow(record);
                      setSelectedRows(selectedSubOrders);
                      setOrderOptType('edit');
                    }}
                  >
                    编辑
                  </Button>
                ) : (
                  ''
                )}

                {record.mainPath.includes('checkOrder') ? (
                  <Button
                    className="p-0"
                    type="link"
                    onClick={() => {
                      let selectedSubOrders = selectedRowObj[record.id];
                      setSelectedRows(selectedSubOrders);
                      if (selectedSubOrders === undefined) {
                        setSelectedRows(record.subOrderInformationLists);
                        console.log(
                          'subOrderInformationLists：' +
                            record.subOrderInformationLists,
                        );
                      }
                      for (let i = 0; i < selectedRows.length; i++) {
                        if (
                          selectedRows[i].orderStatus !== 'UNAUDITED' &&
                          selectedRows[i].orderStatus !== 'AUDIT_FAILED'
                        ) {
                          message.error(
                            '请选择未审核或者审核失败的子订单进行审核',
                          );
                          return;
                        }
                      }
                      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);
                        refreshTable();
                      }
                    }}
                  />
                ) : (
                  ''
                )}

                <Button
                  className="p-0"
                  type="link"
                  onClick={() => {
                    setNotesEditVisible(true);
                    setOrderRow(record);
                    setIsMainOrder(true);
                  }}
                >
                  备注
                </Button>
              </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, optRecord) => {
                  let newText = text;
                  let label = enumValueToLabel(text, ORDER_STATUS_OPTIONS);
                  if (label === undefined) {
                    label = enumValueToLabel(text, INVOCING_STATUS_OPTIONS);
                  }
                  if (
                    label === '需要开票' &&
                    optRecord.invoicingTime !== undefined
                  ) {
                    label = '已开票';
                    newText = 'AFTER_INVOICED';
                  }
                  return <Tag color={TAGS_COLOR.get(newText)}>{label}</Tag>;
                },
              };
            } else 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;
                },
              };
            } else {
              return {
                ...item,
                render: (text: string) => {
                  return <span>{text}</span>;
                },
              };
            }
            // return item;
          })
          .concat([
            {
              title: '操作',
              dataIndex: 'operation',
              key: 'operation',
              align: 'center',
              fixed: 'right',
              render: (optText, optRecord) => (
                <Flex gap="small">
                  {optRecord.subPath.includes('sendProduct') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        optRecord.mainOrderId = record.id;
                        setSelectedRows([cloneDeep(optRecord)]); //克隆一份数据，避免后续修改污染
                        setDeliverVisible(true);
                        setIsSendProduct(true);
                      }}
                    >
                      发货
                    </Button>
                  ) : (
                    ''
                  )}

                  {optRecord.subPath.includes('modifySendInformation') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        optRecord.mainOrderId = record.id;
                        setSelectedRows([cloneDeep(optRecord)]); //克隆一份数据，避免后续修改污染
                        setDeliverVisible(true);
                        setIsSendProduct(false);
                      }}
                    >
                      修改发货信息
                    </Button>
                  ) : (
                    ''
                  )}

                  {optRecord.subPath.includes('printOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={async () => {
                        setOrderPrintVisible(true);
                        setSelectedRows([optRecord]);
                        setOrderRow(record);
                      }}
                    >
                      打印
                    </Button>
                  ) : (
                    ''
                  )}
                  {optRecord.subPath.includes('editOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setFinancialVisible(true);
                        setOrderRow(record);
                        setSelectedRows([optRecord]);
                        setIsFinalcialEdit(true);
                      }}
                    >
                      编辑
                    </Button>
                  ) : (
                    ''
                  )}
                  {optRecord.subPath.includes('invoicing') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setFinancialVisible(true);
                        setIsFinalcialEdit(false);
                        setOrderRow(record);
                        setSelectedRows([optRecord]);
                      }}
                    >
                      开票
                    </Button>
                  ) : (
                    ''
                  )}
                  {optRecord.subPath.includes('checkOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setOrderRow(optRecord);
                        setCheckVisible(true);
                        setSelectedRows([optRecord]);
                      }}
                    >
                      审核
                    </Button>
                  ) : (
                    ''
                  )}

                  {optRecord.subPath.includes('rePrintOrder') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setOrderPrintVisible(true);
                        setSelectedRows([optRecord]);
                        setOrderRow(record);
                        setIsRePrintOrder(true);
                      }}
                    >
                      重新打印
                    </Button>
                  ) : (
                    ''
                  )}

                  {optRecord.subPath.includes('confirmReceipt') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setConfirmReceiptVisible(true);
                        setOrderRow(optRecord);
                      }}
                    >
                      确认收货
                    </Button>
                  ) : (
                    ''
                  )}
                  {optRecord.subPath.includes('viewImages') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setSubOrderConfirmReceiptImagesVisible(true);
                        setOrderRow(optRecord);
                      }}
                    >
                      查看收货凭证
                    </Button>
                  ) : (
                    ''
                  )}
                </Flex>
              ),
            },
            {
              title: '备注',
              dataIndex: 'notes',
              key: 'notes',
              align: 'center',
              render: (optTxt, optRecord) => (
                <Button
                  type="dashed"
                  size="small"
                  onClick={() => {
                    setNotesEditVisible(true);
                    setOrderRow(optRecord);
                    setIsMainOrder(false);
                  }}
                >
                  详情
                </Button>
              ),
            },
          ])}
        rowSelection={{
          onChange: (selectedRowKeys: any, selectedRows: any) => {
            setSelectedRowKeys(selectedRowKeys);
            setSelectedRowObj({
              ...setSelectedRowObj,
              [record.id]: selectedRows,
            });
            selectedRowObj[record.id] = selectedRows;
            setSelectedRows(selectedRows);
          },
          selectedRowKeys: selectedRowKeys,
          // 自定义选择项参考: 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 };
          exportLoading();
          orderExport(body, exportLoadingDestory);
        },
      },
      {
        label: '导出当前页订单',
        key: '2',
        onClick: async () => {
          if (mainOrderAllItemKeys.length === 0) {
            message.error('当前没有订单');
            return;
          }
          let body = { flag: true, ids: mainOrderAllItemKeys };
          exportLoading();
          orderExport(body, exportLoadingDestory);
        },
      },
      {
        label: '导出所有订单',
        key: '3',
        onClick: async () => {
          let body = { flag: false, ids: [] };
          exportLoading();
          orderExport(body, exportLoadingDestory);
        },
      },
    ];

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

    if (rolePath?.includes('addOrder')) {
      toolBtns.push(
        <Button
          type="primary"
          key="out"
          onClick={() => {
            setOrderDrawerVisible(true);
            setOrderOptType('add');
          }}
        >
          新增
        </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: '订单管理',
        extra: [
          <Avatar key="0" style={{ verticalAlign: 'middle' }} size="large">
            {userInfo?.username}
          </Avatar>,
          <Tag key="nickName">{userInfo?.nickName}</Tag>,
          <Dropdown
            key="dropdown"
            trigger={['click']}
            menu={{
              items: [
                {
                  label: '退出登录',
                  key: '1',
                  onClick: () => {
                    localStorage.removeItem('token');
                    history.push('/login');
                  },
                },
                // {
                //   label: '修改密码',
                //   key: '2',
                // },
              ],
            }}
          >
            <Button key="4" style={{ padding: '0 8px' }}>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ],
      }}
    >
      <div id="resizeDiv"></div>
      <ProTable
        id="mainTable"
        // tableStyle={{height:'100px'}}
        scroll={{ x: true, y: tableHeight }}
        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',
          onCollapse: resize,
        }}
        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}
          subOrders={selectedRows}
          onClose={(isSuccess: boolean) => {
            setOrderDrawerVisible(false);
            setOrderRow({});
            if (isSuccess) {
              refreshTable();
            }
          }}
          orderOptType={orderOptType}
        />
      )}

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

      {notesEditVisible && (
        <OrderNotesEditModal
          setNotesEditVisible={setNotesEditVisible}
          data={orderRow}
          isMianOrder={isMainOrder}
          onClose={() => {
            setNotesEditVisible(false);
            setOrderRow({});
            refreshTable();
          }}
        />
      )}

      {deliverVisible && (
        <DeliverModal
          data={selectedRows}
          isSendProduct={isSendProduct}
          onClose={() => {
            setDeliverVisible(false);
            setOrderRow({});
            setIsSendProduct(false);
            refreshTable();
          }}
        />
      )}

      {financialVisible && (
        <FinancialDrawer
          isEdit={isFinalcialEdit}
          mainOrder={orderRow}
          subOrders={selectedRows}
          onClose={() => {
            setFinancialVisible(false);
            setOrderRow({});
            refreshTable();
          }}
        />
      )}

      {orderPrintVisible && (
        <OrderPrintModal
          mainOrder={orderRow}
          subOrders={selectedRows}
          isRePrint={isRePrintOrder}
          onClose={() => {
            setOrderPrintVisible(false);
            setOrderRow({});
            setIsRePrintOrder(false);
            refreshTable();
          }}
        />
      )}

      {confirmReceiptVisible && (
        <ConfirmReceiptModal
          data={orderRow}
          onClose={() => {
            setConfirmReceiptVisible(false);
            setOrderRow({});
            refreshTable();
          }}
        />
      )}

      {subOrderConfirmReceiptImagesVisible && (
        <SubOrderComfirmReceiptImagesModal
          setVisible={setSubOrderConfirmReceiptImagesVisible}
          onClose={() => {
            setSubOrderConfirmReceiptImagesVisible(false);
          }}
          orderRow={orderRow}
        />
      )}

      {contextHolder}
    </PageContainer>
  );
};

export default OrderPage;