canrd-main / canrd-erp-front · Files

import ButtonConfirm from '@/components/ButtomConfirm';

import { RESPONSE_CODE } from '@/constants/enum';
import {

  postServiceOrderNoNeedSend,

  postServiceOrderOrderCancel,

  postServiceOrderProcureOrder,

  postServiceOrderProcurePrint,

  postServiceOrderQueryServiceOrder,
} from '@/services';
import { orderExport } from '@/services/order';

import {
  copyToClipboard,
  enumToProTableEnumValue,
  enumValueToLabel,
  formatDateTime,
} from '@/utils';

import { getUserInfo } from '@/utils/user';

import {

  ClockCircleTwoTone,

  ContainerTwoTone,

  CopyTwoTone,

  DownOutlined,

  EditTwoTone,

  EllipsisOutlined,

  QuestionCircleOutlined,

} from '@ant-design/icons';

import {

  ActionType,

  PageContainer,

  ProColumns,

  ProFormInstance,

  ProTable,

} from '@ant-design/pro-components';

import { history } from '@umijs/max';

import {

  Avatar,

  Button,
  Checkbox,

  Divider,

  Dropdown,
  Flex,

  Image,

  MenuProps,
  Space,
  Tag,

  Tooltip,

  message,
} from 'antd';
import { cloneDeep } from 'lodash';

import React, { Key, useEffect, useRef, useState } from 'react';

import OrderPrintModal from '../OrderPrint/OrderPrintModal';

import AfterSalesDrawer from './components/AfterSalesDrawer';

import ApplyForInvoicingModal from './components/ApplyForInvoicingModal';

import AttachmentModal from './components/AttachmentModal';

import CheckModal from './components/CheckModal';

import ConfirmReceiptModal from './components/ConfirmReceiptModal';

import DeliverInfoDrawer from './components/DeliverInfoDrawer';

import DeliverModal from './components/DeliverModal';

import FinancialDrawer from './components/FinancialDrawer';

import FinancialEditDrawer from './components/FinancialEditDrawer';

import FinancialMergeDrawer from './components/FinancialMergeDrawer';

import FinancialReceiptsModal from './components/FinancialReceiptsModal';

import HistoryModal from './components/HistoryModal';

import ImportModal from './components/ImportModal';

import OrderDrawer from './components/OrderDrawer';

import OrderNotesEditModal from './components/OrderNotesEditModal';

import ProcureCheckModal from './components/ProcureCheckModal';

import ProcureConvertModal from './components/ProcureConvertModal';

import SubOrderComfirmReceiptImagesModal from './components/SubOrderComfirmReceiptImagesModal';

import {

  AFTER_INVOICING_STATUS,

  CHECK_TYPE,

  LOGISTICS_STATUS_OPTIONS,

  MAIN_ORDER_COLUMNS,
  ORDER_STATUS_OPTIONS,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,

  PROCURE_ORDER_STATUS,

  PRODUCT_BELONG_DEPARTMENT_OPTIONS,

  TAGS_COLOR,

  getInvoicingType,
  getNeedInvoicing,

} 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 [allMainChecked, setAllMainChecked] = useState(false);

  const [
    subOrderConfirmReceiptImagesVisible,
    setSubOrderConfirmReceiptImagesVisible,
  ] = useState<boolean>(false);

  const [data, setData] = useState([]); //列表数据

  const [notesEditVisible, setNotesEditVisible] = useState<boolean>(false);

  const [financialMergeDrawerVisible, setFinancialMergeDrawerVisible] =
    useState<boolean>(false);

  const [attachmentModalVisible, setAttachmentModalVisible] =
    useState<boolean>(false);

  const [financialReceiptsModalVisible, setFinancialReceiptsModalVisible] =
    useState(false);

  const [financialVisible, setFinancialVisible] = useState<boolean>(false);

  const [financialEditVisible, setFinancialEditVisible] =
    useState<boolean>(false);

  const [afterSalesDrawerVisible, setAfterSalesDrawerVisible] =
    useState<boolean>(false);

  const [historyModalVisible, setHistoryModalVisible] =
    useState<boolean>(false);

  const [isRePrintOrder, setIsRePrintOrder] = useState<boolean>(false);
  const [isSendProduct, setIsSendProduct] = useState<boolean>(false);
  const [isMainOrder, setIsMainOrder] = useState<boolean>(false);

  const [importModalVisible, setImportModalVisible] = useState<boolean>(false);

  const [applyForInvoicingVisible, setApplyForInvoicingVisible] =
    useState<boolean>(false);

  const [procureCheckModalVisible, setProcureCheckModalVisible] =
    useState<boolean>(false);

  const [procureConvertModalVisible, setProcureConvertModalVisible] =
    useState<boolean>(false);

  const [confirmReceiptVisible, setConfirmReceiptVisible] =
    useState<boolean>(false);

  const [deliverVisible, setDeliverVisible] = useState<boolean>(false);

  const [deliverInfoDrawerVisible, setDeliverInfoDrawerVisible] =
    useState<boolean>(false);

  const [orderOptType, setOrderOptType] = useState<string>('');

  const [isEdit, setIsEdit] = useState<boolean>(false);

  const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);

  const [orderRow, setOrderRow] = useState<Partial<OrderType>>({});

  const [mainOrderAllItemKeys, setMainOrderAllItemKeys] = useState([]);

  const [rolePath, setRolePath] = useState([]); //当前角色权限（新增跟打印按钮）

  const userInfo = getUserInfo();

  // const [tableHeight, setTableHeight] = useState(200);

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

  const [selectedItems, setSelectedItems] = useState([]);

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const [pageSize, setPageSize] = useState(10);
  const [currentPage, setCurrentPage] = useState(1);

  const [orderCheckType, setOrderCheckType] = useState('');

  const [onlyShowCancelOrder, setOnlyShowCancelOrder] = useState(false);

  const [onlyShowProcureToBeProcessed, setOnlyShowProcureToBeProcessed] =
    useState(false);

  const [mainOrderSelectedMap] = useState(new Map()); //选中的主订单Map

  const [mainOrderSelectedRows, setMainOrderSelectedRows] = useState([]); //选中的主订单集合

  const [onlyShowFinancialToBeProcessed, setOnlyShowFinancialToBeProcessed] =
    useState(false);

  const mainTableRef = useRef<ActionType>();
  const mainTableFormRef = useRef<ProFormInstance>();

  let [searchParams, setSearchParam] = useState(Object); //表格的查询条件存储

  const [messageApi, contextHolder] = message.useMessage();

  // const openCheckNotes = (checkNotes: string) => {
  //   Modal.info({
  //     title: '驳回备注',
  //     content: (
  //       <div>
  //         <p>{checkNotes}</p>
  //       </div>
  //     ),
  //     onOk() { },
  //   });
  // };

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

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

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

  function changeCancelOrderShow(e: any) {
    setOnlyShowCancelOrder(e.target.checked);
    refreshTable();
  }

  function changeProcureToBeProcessed(e: any) {
    setOnlyShowProcureToBeProcessed(e.target.checked);
    refreshTable();
  }

  function changeFinancialToBeProcessed(e: any) {
    setOnlyShowFinancialToBeProcessed(e.target.checked);
    refreshTable();
  }

  /**
   * 复制订单到剪贴板
   * @param record
   */
  function copyOrderToClipboard(record: any) {
    let text = '';
    text += record?.id;

    text += '，' + record?.salesCode;

    text += '，' + record?.customerName;
    text += '，' + record?.customerContactNumber;
    text += '，' + record?.customerShippingAddress;

    text += '，' + record?.institutionContactName;
    text += '，' + record?.institution;

    record?.subOrderInformationLists?.forEach((item) => {
      text += '\n';
      text += item?.productName;
      text += ' ' + item?.parameters;
      text += ' ' + item?.quantity;
      text += ' ' + item?.unit;
    });
    if (copyToClipboard(text)) {
      message.info('已复制到剪贴板');
    } else {
      message.info('无法复制到剪贴板');
    }
  }

  // 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("main-table").getElementsByClassName('ant-table-body')[0].getBoundingClientRect().bottom;

  //   setTableHeight(bottomToScreenBottomDistance - 88);
  // };

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

  const MyToolTip = ({ title, content }) => {
    return (
      <Tooltip
        color="#FFFFFF"
        placement="bottom"
        title={<div className="px-5 py-4 text-black">{title}</div>}
      >
        {content}
      </Tooltip>
    );
  };

  /**
   * 检查是否可以打印
   * @param paths 按钮集合
   * @returns
   */
  function checkePrintable(paths: any) {
    if (
      !paths?.includes('printOrder') &&
      !paths?.includes('supplierPrint') &&
      !paths?.includes('procurePrint') &&
      !paths?.includes('rePrintOrder')
    ) {
      return false;
    }

    return true;
  }

  const onCheckboxChange = (record: never) => {
    let newSelectedItems = [];
    if (selectedItems.includes(record.id)) {
      newSelectedItems = selectedItems.filter((key) => key !== record.id);
      setSelectedRowKeys([]);

      console.log(selectedRowObj);

      setSelectedRowObj({
        ...setSelectedRowObj,
        [record.id]: [],
      });
      selectedRowObj[record.id] = [];
      setSelectedRows([]);

      //取消选中主订单
      mainOrderSelectedMap.delete(record.id);

    } else {
      newSelectedItems = [...selectedItems, record.id];
      //子订单全部自动选中
      let subIds = record.subOrderInformationLists?.map((item) => {
        return item.id;
      });
      setSelectedRowKeys(subIds);

      setSelectedRowObj({
        ...setSelectedRowObj,
        [record.id]: record.subOrderInformationLists,
      });
      selectedRowObj[record.id] = record.subOrderInformationLists;
      setSelectedRows(record.subOrderInformationLists);

      //选中主订单
      mainOrderSelectedMap.set(record.id, record);

    }

    setSelectedItems(newSelectedItems);
  };

  const handleTableExpand = (mainOrderIds: any) => {
    setExpandedRowKeys(mainOrderIds);
  };

  const allMainCheckBoxChange = () => {
    let checked = !allMainChecked;
    setAllMainChecked(checked);

    mainOrderSelectedMap.clear();

    if (checked) {
      let mainOrderIds = data?.map((item) => {

        mainOrderSelectedMap.set(item.id, item);

        return item.id;
      });

      let rowObj = {};
      data?.forEach((item) => {

        let id = item.id;
        rowObj[id] = item;
      });
      setSelectedItems(mainOrderIds);
    } else {
      setSelectedItems([]);
    }
  };

  //表头渲染
  const OrderTableHeader = () => {
    return (
      <Flex className="w-full">

        <Flex className="w-[1%] ml-[7px]">
          <Checkbox
            onChange={allMainCheckBoxChange}
            checked={allMainChecked}
          ></Checkbox>
        </Flex>
        <Flex className="w-[30%] ml-[1%]">

          <span className="font-medium">商品信息</span>
        </Flex>

        <Flex className="w-[13%]">

          <span className="font-medium">交易金额</span>
        </Flex>
        <Flex className="w-[10%]">
          <span className="font-medium">支付</span>
        </Flex>

        <Flex className="w-[12%]">

          <span className="font-medium">其他</span>
        </Flex>
        <Flex className="w-[10%]">
          <span className="font-medium">交易状态</span>
        </Flex>
        <Flex className="w-[17%]">
          <span className="font-medium">操作</span>
        </Flex>

      </Flex>
    );
  };
  //子订单内容渲染
  const SubOderRander = ({ record, optRecord }) => {

    /**
     * 获取订单状态标签
     * @param optRecord
     */
    function getOrderStatusTag(optRecord: any): import('react').ReactNode {
      const orderStatus = optRecord.orderStatus;
      if (orderStatus === 'AUDIT_FAILED') {
        return (
          <MyToolTip

            key="key"

            title={optRecord.checkNotes}
            content={
              <>
                <Tag
                  color={TAGS_COLOR.get(optRecord.orderStatus)}
                  style={{ marginRight: '4px' }}
                >
                  {enumValueToLabel(
                    optRecord.orderStatus,
                    ORDER_STATUS_OPTIONS,
                  )}
                </Tag>
                <QuestionCircleOutlined style={{ color: '#C1C1C1' }} />
              </>
            }
          />
        );
      }

      if (
        orderStatus === 'AFTER_SALES_COMPLETION' ||
        orderStatus === 'IN_AFTER_SALES'
      ) {
        return (

          // <MyToolTip
          //   key="key"
          //   title={
          //     enumValueToLabel(
          //       optRecord.afterSalesPlan,
          //       AFTE_SALES_PLAN_OPTIONS,
          //     ) +
          //     ' ' +
          //     optRecord.afterSalesNotes
          //   }
          //   content={
          //     <>
          //       <Tag
          //         color={TAGS_COLOR.get(optRecord.orderStatus)}
          //         style={{ marginRight: '4px' }}
          //       >
          //         {enumValueToLabel(
          //           optRecord.orderStatus,
          //           ORDER_STATUS_OPTIONS,
          //         )}
          //       </Tag>
          //       <QuestionCircleOutlined style={{ color: '#C1C1C1' }} />
          //     </>
          //   }
          // />
          <Tag
            color={TAGS_COLOR.get(optRecord.orderStatus)}
            style={{ marginRight: '4px' }}
          >
            {enumValueToLabel(optRecord.orderStatus, ORDER_STATUS_OPTIONS)}
          </Tag>

        );
      }

      if (orderStatus === 'PROCURE_CONVERT_WAREHOUSE_KEEPER') {
        return (
          <MyToolTip

            key="key"

            title={optRecord.checkNotes}
            content={
              <>
                <Tag
                  color={TAGS_COLOR.get(optRecord.orderStatus)}
                  style={{ marginRight: '4px' }}
                >
                  {enumValueToLabel(
                    optRecord.orderStatus,
                    ORDER_STATUS_OPTIONS,
                  )}
                </Tag>
                <QuestionCircleOutlined style={{ color: '#C1C1C1' }} />
              </>
            }
          />
        );
      }

      return (

        <Tag key="key" color={TAGS_COLOR.get(optRecord.orderStatus)}>

          {enumValueToLabel(optRecord.orderStatus, ORDER_STATUS_OPTIONS)}
        </Tag>
      );
    }

    //申请开票附件处理
    const getAfterAnnexList = () => {
      let links = [];
      let afterAnnexList = optRecord.afterAnnexList;
      let i = 1;
      if (afterAnnexList?.length > 0) {
        for (let url of afterAnnexList) {
          links.push(

            <a key={i} className="pl-2" href={url}>

              附件{i++}
            </a>,
          );
        }
      }

      return links;
    };

    //财务审核附件处理
    const getInvoicingCheckAnnexList = () => {
      let invoicingCheckAnnexList = optRecord.invoicingCheckAnnexList;
      return (
        <div>
          <Image.PreviewGroup
            className="mr-10"
            preview={{
              onChange: (current, prev) =>
                console.log(`current index: ${current}, prev index: ${prev}`),
            }}

          >

            {invoicingCheckAnnexList.map((url, index) => (
              <React.Fragment key={index}>

                <Image className="max-h-[50px] max-w-[70px]" src={url} />{' '}
                <Divider type="vertical" />

              </React.Fragment>

            ))}
          </Image.PreviewGroup>
        </div>
      );
    };

    return (
      <>
        <Flex className="w-full border-b-indigo-500">
          <Flex vertical className="w-[31%]" gap="small">
            {/* 商品名称 */}
            <div
              className="overflow-hidden whitespace-no-wrap overflow-ellipsis"
              title={optRecord.productName}
            >
              <span className="font-medium text-black ">
                {optRecord.productName}
              </span>
            </div>
            <div
              className="overflow-hidden whitespace-no-wrap overflow-ellipsis"
              title={optRecord.parameters}
            >

              <span className="text-[#8C8C8C]">

                参数：{optRecord.parameters}

              </span>

            </div>

            <Flex title={optRecord.notes}>
              <div className="max-w-[90%] whitespace-no-wrap overflow-hidden overflow-ellipsis">
                <span className="text-[#8C8C8C]">
                  备注：
                  {optRecord.notes === undefined ? '暂无备注' : optRecord.notes}
                </span>
              </div>
              {/* 编辑备注按钮 */}
              <EditTwoTone

                className="pl-1 hover:curcor-pointer"

                onClick={() => {
                  setNotesEditVisible(true);
                  setOrderRow(optRecord);
                  setIsMainOrder(false);
                }}
              />
            </Flex>

            {/* {optRecord.applyInvoicingNotes !== undefined &&
            optRecord.applyInvoicingNotes !== null ? (

            <Flex title={optRecord.notes}>
              <div className="max-w-[90%] whitespace-no-wrap overflow-hidden overflow-ellipsis">
                <span className="text-[#8C8C8C]">
                  开票备注：
                  {optRecord.applyInvoicingNotes}
                </span>
              </div>
            </Flex>
          ) : (
            ''

          )} */}
          </Flex>
          <Flex className="w-[13%]" vertical gap="small">
            <div
              className="overflow-hidden whitespace-no-wrap overflow-ellipsis"
              title={optRecord.productPrice}
            >
              <span className="text-[#8C8C8C]">单价：</span>
              <span className="text-slate-700">￥{optRecord.productPrice}</span>
            </div>
            <div
              className="overflow-hidden whitespace-no-wrap overflow-ellipsis"
              title={optRecord.quantity}
            >
              <span className="text-[#8C8C8C]">数量：</span>

              <span className="text-slate-700">
                x{optRecord.quantity + ' '}
              </span>
              <span className="text-[#8C8C8C]">{optRecord.unit}</span>

            </div>
            <div
              className="overflow-hidden whitespace-no-wrap overflow-ellipsis"
              title={optRecord.subOrderPayment}
            >
              <span className="text-[#8C8C8C]">合计：</span>
              <span className="text-slate-700">
                ￥{optRecord.subOrderPayment}
              </span>
            </div>
          </Flex>
          <Flex className="w-[10%]" vertical gap="small">
            {/* 支付方式 */}
            <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
              <span className="text-slate-700">
                {enumValueToLabel(
                  optRecord.paymentMethod,
                  PAYMENT_METHOD_OPTIONS,
                )}
              </span>
            </div>
            {/* 支付渠道 */}
            <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
              <span className="text-slate-700">
                {enumValueToLabel(
                  optRecord.paymentChannel,
                  PAYMENT_CHANNEL_OPTIONS,
                )}
              </span>
            </div>
          </Flex>
          <Flex className="w-[13%]" vertical gap="small">
            {/* 所属部门 */}
            <div
              className="overflow-hidden whitespace-no-wrap overflow-ellipsis"
              title={enumValueToLabel(

                optRecord.productBelongBusiness,
                PRODUCT_BELONG_DEPARTMENT_OPTIONS,
              )}

            >
              <span className="text-slate-700">
                {enumValueToLabel(
                  optRecord.productBelongBusiness,
                  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
                )}
              </span>
            </div>

            {/* 开票类型 */}
            {getInvoicingType(optRecord) === undefined ? (
              <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                <span className="text-slate-700">
                  {getInvoicingType(optRecord)}
                </span>
              </div>
            ) : (
              ''
            )}

            {/* 开票状态 */}

            <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
              <span className="text-slate-700">

                {enumValueToLabel(
                  optRecord.afterInvoicingStatus,
                  AFTER_INVOICING_STATUS,
                )}

              </span>
            </div>

          </Flex>

          <Flex className="w-[10%]" vertical gap="small">
            {/* 开票状态 */}
            <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
              <Tag
                color={
                  optRecord.invoicingTime === null ||
                  optRecord.invoicingTime === undefined
                    ? TAGS_COLOR.get(optRecord.invoicingStatus)
                    : 'success'

                }

              >
                {getNeedInvoicing(optRecord)}
              </Tag>
            </div>
            {/* 订单状态 */}
            <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
              {getOrderStatusTag(optRecord)}
            </div>

            {/**采购是否已下单状态 */}
            {optRecord.procureOrderStatus !== null &&
            optRecord.procureOrderStatus !== undefined ? (
              <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                <Tag color="success">
                  {enumValueToLabel(
                    optRecord.procureOrderStatus,
                    PROCURE_ORDER_STATUS,
                  )}
                </Tag>
              </div>
            ) : (
              ''
            )}

            {/* 物流信息 */}
            <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
              {optRecord.orderStatus === 'CONFIRM_RECEIPT' ||
              optRecord.orderStatus === 'AFTER_SALES_COMPLETION' ||
              optRecord.orderStatus === 'IN_AFTER_SALES' ||
              optRecord.orderStatus === 'SHIPPED' ? (
                <MyToolTip
                  title={
                    optRecord.serialNumber === undefined
                      ? '暂无物流信息'
                      : enumValueToLabel(
                          optRecord.logisticsMethod,
                          LOGISTICS_STATUS_OPTIONS,
                        ) +
                        '  ' +
                        optRecord.serialNumber
                  }
                  content={
                    <Button type="link" size="small" style={{ padding: 0 }}>
                      物流信息
                    </Button>
                  }
                />
              ) : (
                ''
              )}
            </div>
          </Flex>
          <Flex className="w-[18%]" wrap="wrap" gap="small">

            {optRecord.subPath?.includes('noNeedInvoicingEdit') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setFinancialEditVisible(true);
                  setSelectedRows([optRecord]);

                  setOrderRow(record);

                  setIsMainOrder(false);
                }}
              >

                编辑时间

              </Button>
            ) : (
              ''
            )}

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

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

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

            {optRecord.subPath?.includes('queryAnnex') &&
            optRecord.listAnnex?.length > 0 ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  optRecord.mainOrderId = record.id;
                  setAttachmentModalVisible(true);
                  setOrderRow(optRecord);
                }}
              >
                附件
              </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);
                  setOrderCheckType(CHECK_TYPE.NORMAL);
                }}
              >
                仓库打印
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('supplierPrint') ? (
              <Button
                className="p-0"
                type="link"
                onClick={async () => {
                  setOrderPrintVisible(true);
                  setSelectedRows([optRecord]);
                  setOrderRow(record);
                  setOrderCheckType(CHECK_TYPE.SUPPLIER);
                }}
              >
                供应商打印
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('procurePrint') ? (

              <ButtonConfirm

                className="p-0"

                title="确认打印？"
                text="采购打印"
                onConfirm={async () => {
                  let res = await postServiceOrderProcurePrint({
                    data: {
                      ids: [optRecord.id],
                    },
                  });

                  if (res.result === RESPONSE_CODE.SUCCESS) {
                    message.success(res.message);
                    refreshTable();
                  }

                }}

              />

            ) : (

              // <Button
              //   className="p-0"
              //   type="link"
              //   onClick={async () => {
              //     setOrderPrintVisible(true);
              //     setSelectedRows([optRecord]);
              //     setOrderRow(record);
              //     setOrderCheckType(CHECK_TYPE.PROCURE);
              //   }}
              // >
              //   采购打印
              // </Button>

              ''
            )}

            {optRecord.subPath?.includes('editOrder') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setFinancialVisible(true);
                  setOrderRow(record);
                  setSelectedRows([optRecord]);

                  setIsEdit(true);

                }}
              >
                编辑
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('invoicing') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setFinancialVisible(true);

                  setIsEdit(false);

                  setOrderRow(record);
                  setSelectedRows([optRecord]);
                  setIsMainOrder(false);
                }}
              >
                开票
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('applyInvoicing') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setApplyForInvoicingVisible(true);
                  setSelectedRows([optRecord]);

                  setIsEdit(false);

                  setIsMainOrder(false);

                }}
              >
                申请开票
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('checkOrder') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {

                  setOrderRow(record);

                  setCheckVisible(true);
                  setSelectedRows([optRecord]);
                  setOrderCheckType(CHECK_TYPE.NORMAL);
                }}
              >
                审核
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('afterSalesCheck') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {

                  setOrderRow(record);

                  setCheckVisible(true);
                  setSelectedRows([optRecord]);
                  setOrderCheckType(CHECK_TYPE.AFTER_SALES);
                }}
              >
                售后审核
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('financeCheckOrder') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {

                  setOrderRow(record);

                  setCheckVisible(true);
                  setSelectedRows([optRecord]);
                  setOrderCheckType(CHECK_TYPE.FINALCIAL);
                }}
              >
                财务审核
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('procureCheckOrder') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {

                  setOrderRow(record);

                  setSelectedRows([optRecord]);
                  setOrderCheckType(CHECK_TYPE.PROCURE);
                  setProcureCheckModalVisible(true);
                }}
              >
                采购审核
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('procureConvertProcure') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setSelectedRows([optRecord]);
                  setOrderCheckType(CHECK_TYPE.PROCURE);
                  setProcureConvertModalVisible(true);
                }}
              >
                转发
              </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('applyAfterSales') ? (

              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setSelectedRows([optRecord]);

                  // setOrderDrawerVisible(true);
                  setAfterSalesDrawerVisible(true);

                  setOrderRow(record);

                  setOrderOptType('after-sales');

                }}
              >
                申请售后
              </Button>
            ) : (
              ''

            )}

            {optRecord.subPath?.includes('afterSalesCompletion') ? (
              <ButtonConfirm
                className="p-0"
                title="是否完成售后？"
                text="完成售后"
                onConfirm={async () => {
                  let res = await postServiceOrderAfterSalesCompletion({
                    data: { ids: [optRecord.id] },
                  });
                  if (res.result === RESPONSE_CODE.SUCCESS) {
                    message.success(res.message);
                    refreshTable();
                    return true;
                  }
                }}

              />

            ) : (
              ''
            )}

            {optRecord.subPath?.includes('procureOrder') ? (
              <ButtonConfirm
                className="p-0"
                title="是否已下单？"
                text="下单"
                onConfirm={async () => {
                  let res = await postServiceOrderProcureOrder({
                    data: { subIds: [optRecord.id] },
                  });
                  if (res.result === RESPONSE_CODE.SUCCESS) {
                    message.success(res.message);
                    refreshTable();
                    return true;
                  }
                }}
              />
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('noNeedSend') ? (
              <ButtonConfirm
                className="p-0"
                title="此订单是否无需发货？"
                text="无需发货"
                onConfirm={async () => {
                  let res = await postServiceOrderNoNeedSend({
                    data: { ids: [optRecord.id] },
                  });
                  if (res.result === RESPONSE_CODE.SUCCESS) {
                    message.success(res.message);
                    refreshTable();
                    return true;
                  }
                }}
              />
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('viewImages') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setSubOrderConfirmReceiptImagesVisible(true);
                  setOrderRow(optRecord);
                }}
              >
                查看收货凭证
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('orderCancel') ? (
              <ButtonConfirm
                className="p-0"
                title="确认作废？"
                text="作废"
                onConfirm={async () => {
                  let body = { ids: [optRecord.id], checkIsMainOrderId: false };
                  const data = await postServiceOrderOrderCancel({
                    data: body,
                  });
                  if (data.result === RESPONSE_CODE.SUCCESS) {
                    message.success(data.message);
                    refreshTable();
                  }
                }}
              />
            ) : (
              ''
            )}
          </Flex>

        </Flex>

        {userInfo?.roleSmallVO?.code === 'admin' ||
        userInfo?.roleSmallVO?.code === 'salesManager' ||
        userInfo?.roleSmallVO?.code === 'salesRepresentative' ||
        userInfo?.roleSmallVO?.code === 'finance' ? (
          <Flex title={optRecord.notes}>
            <div className="flex items-center">
              <div className="flex items-center max-w-[500px]">
                <div className="max-w-md overflow-hidden whitespace-no-wrap overflow-ellipsis">
                  <Tooltip
                    title={optRecord.applyInvoicingNotes}
                    placement="topLeft"
                  >
                    <span className="text-[#8C8C8C]">

                      申请开票备注：

                      {optRecord.applyInvoicingNotes === undefined ||
                      optRecord.applyInvoicingNotes === null
                        ? '暂无备注'
                        : optRecord.applyInvoicingNotes}
                    </span>
                  </Tooltip>
                </div>

                {getAfterAnnexList()}

                <Tooltip title="编辑">
                  <EditTwoTone
                    className="pl-1 hover:curcor-pointer"
                    onClick={() => {
                      setApplyForInvoicingVisible(true);
                      setSelectedRows([optRecord]);
                      setIsEdit(true);
                    }}
                  />
                </Tooltip>

              </div>
              <Divider type="vertical" className="mx-5" />
              <div className="flex items-center max-w-[500px]">
                <div className="max-w-md overflow-hidden whitespace-no-wrap overflow-ellipsis">
                  <Tooltip title={optRecord.checkNotes} placement="topLeft">
                    <span className="text-[#8C8C8C] mr-3">
                      财务审核备注：
                      {optRecord.checkNotes === undefined ||
                      optRecord.checkNotes === null
                        ? '暂无备注'
                        : optRecord.checkNotes}
                    </span>
                  </Tooltip>
                </div>

                {getInvoicingCheckAnnexList()}
              </div>
            </div>
          </Flex>
        ) : (
          ''
        )}
      </>

    );

  };

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

    return (
      <ProTable
        id="sub-table"

        className="w-full "

        showHeader={false}
        columns={[
          {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render: (text: any, optRecord: any) => {
              return <SubOderRander record={record} optRecord={optRecord} />;
            },
          },
        ]}
        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}

        tableAlertRender={false}

      />
    );
  };

  // 主订单内容渲染

  const MainOrderColumnRender = ({ record }: { record: OrderListItemType }) => {

    return (
      <Flex vertical={true}>
        {/* 编号、时间、销售信息 */}

        <Flex

          className="px-4 py-4 bg-white rounded-t-lg"

          justify="space-between"
        >
          <Flex wrap="wrap" gap="middle" vertical>
            <Flex>
              <Flex>
                <Checkbox

                  onChange={() => onCheckboxChange(record)}

                  checked={selectedItems.includes(record.id)}
                >

                  <Space split={<Divider type="vertical" />}>
                    <div>

                      <span className="text-[#8C8C8C]">订单号：</span>

                      <span className="text-slate-700">{record.id}</span>

                    </div>
                    <span>{formatDateTime(record.createTime)}</span>
                  </Space>
                </Checkbox>
                <Space split={<Divider type="vertical" />}>

                  <div>

                    <span className="text-[#8C8C8C]">代表：</span>

                    <span className="text-slate-700">{record.salesCode}</span>

                  </div>

                  <div
                    title={record.institution}

                    className="whitespace-no-wrap overflow-hidden overflow-ellipsis max-w-[150px]"

                  >

                    <span className="text-[#8C8C8C]">单位：</span>

                    <span className="text-slate-700">{record.institution}</span>

                  </div>

                  <span>

                    <span className="text-[#8C8C8C]">联系人：</span>

                    <span className="text-slate-700">

                      {record.institutionContactName + ' '}

                    </span>
                  </span>
                  <span>
                    <span className="text-[#8C8C8C]">收货人：</span>
                    <span className="text-slate-700">
                      {record.customerName + ' '}

                      <Tooltip className="order-tooltip" title="详情">
                        <ContainerTwoTone
                          className="hover:curcor-pointer"
                          onClick={() => {
                            setDeliverInfoDrawerVisible(true);
                            setOrderRow(record);
                          }}
                        />
                      </Tooltip>

                    </span>

                  </span>
                </Space>

              </Flex>

            </Flex>

            <Flex className="pl-6" align="center">

              <div title={record.notes}>

                <div className="max-w-md overflow-hidden whitespace-no-wrap overflow-ellipsis">

                  <span className="text-[#8C8C8C]">备注：</span>
                  <span className="ml-2">
                    {record.notes === undefined ? '暂无备注' : record.notes}
                  </span>

                </div>

              </div>

              <Tooltip title="编辑">
                <EditTwoTone

                  className="pl-1 hover:curcor-pointer"

                  onClick={() => {
                    setNotesEditVisible(true);
                    setOrderRow(record);
                    setIsMainOrder(true);
                  }}
                />
              </Tooltip>

            </Flex>
          </Flex>
          <Flex wrap="wrap" gap="middle" vertical>
            <Flex justify="flex-end">
              <Flex wrap="wrap" gap="middle" align="center">
                <div>

                  <span className="text-[#8C8C8C]">总金额：￥</span>

                  <span className="text-lg font-medium">
                    {record.totalPayment}
                  </span>

                </div>
                {rolePath?.includes('addOrder') ? (

                  <Tooltip title="复制">
                    <CopyTwoTone
                      className="hover:cursor-pointer"
                      onClick={() => {

                        copyOrderToClipboard(record);

                        setOrderOptType('copy');
                        setOrderDrawerVisible(true);
                        let copy = cloneDeep(record);
                        copy.id = undefined;
                        copy.subOrderInformationLists?.forEach((item) => {
                          item.id = undefined;
                        });
                        setOrderRow(copy);
                      }}
                    />
                  </Tooltip>

                ) : (

                  <Tooltip title="复制文本">
                    <CopyTwoTone
                      className="hover:cursor-pointer"
                      onClick={() => {
                        copyOrderToClipboard(record);
                      }}
                    />
                  </Tooltip>

                )}

                <Tooltip title="历史">
                  <ClockCircleTwoTone
                    className="hover:cursor-pointer"
                    onClick={() => {
                      setHistoryModalVisible(true);
                      if (selectedRowObj[record.id]?.length) {
                        setSelectedRows(selectedRowObj[record.id]);
                      } else {
                        setSelectedRows(record.subOrderInformationLists);
                      }
                    }}
                  />
                </Tooltip>

              </Flex>
            </Flex>
            <Flex justify="flex-end">
              <Space.Compact direction="vertical" align="end">
                <Space>

                  {record.mainPath?.includes('updateHirePurchase') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        setFinancialReceiptsModalVisible(true);
                        setOrderRow(record);
                        setSelectedRows([record]);
                        setIsEdit(true);
                      }}
                    >
                      收款记录
                    </Button>
                  ) : (
                    ''
                  )}

                  {record.mainPath?.includes('procureConvertProcure') ? (
                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        let selectedSubOrders = selectedRowObj[record.id];
                        if (selectedSubOrders === undefined) {
                          selectedSubOrders = record.subOrderInformationLists;
                        }

                        setSelectedRows(selectedSubOrders);
                        for (let i = 0; i < selectedSubOrders.length; i++) {
                          if (
                            !selectedSubOrders[i].subPath.includes(
                              'procureConvertProcure',
                            )
                          ) {
                            message.error('请选择允许转发的子订单进行转发');
                            return;
                          }
                        }
                        setSelectedRows(selectedSubOrders);
                        setOrderCheckType(CHECK_TYPE.PROCURE);
                        setProcureConvertModalVisible(true);
                      }}
                    >
                      转发
                    </Button>
                  ) : (
                    ''
                  )}

                  {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);

                        setOrderCheckType(CHECK_TYPE.NORMAL);

                      }}
                    >

                      仓库发货

                    </Button>
                  ) : (
                    ''
                  )}

                  {/* 供应商发货 */}

                  {record.mainPath?.includes('supplierSendOrder') ? (

                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        if (!selectedRowObj[record.id]?.length) {
                          return message.error('请选择选择子订单');
                        }
                        setSelectedRows(selectedRowObj[record.id]);
                        setDeliverVisible(true);
                        setIsSendProduct(true);
                        setOrderCheckType(CHECK_TYPE.SUPPLIER);
                      }}
                    >
                      供应商发货
                    </Button>
                  ) : (
                    ''
                  )}

                  {record.mainPath?.includes('procureSend') ? (

                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        if (!selectedRowObj[record.id]?.length) {
                          return message.error('请选择选择子订单');
                        }
                        setSelectedRows(selectedRowObj[record.id]);
                        setDeliverVisible(true);
                        setIsSendProduct(true);
                        setOrderCheckType(CHECK_TYPE.PROCURE);
                      }}
                    >
                      采购发货
                    </Button>
                  ) : (
                    ''
                  )}

                  {record.mainPath?.includes('printOrder') ? (

                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {

                        const selectedSubOrders = selectedRowObj[record.id];
                        if (!selectedSubOrders?.length) {

                          return message.error('请选择选择子订单');
                        }

                        for (let subOrderRecord of selectedSubOrders) {
                          let subPath = subOrderRecord.subPath;
                          if (!checkePrintable(subPath)) {
                            return message.error('请选择可以打印的子订单');
                          }
                        }
                        setSelectedRows(selectedSubOrders);

                        setOrderRow(record);
                        setOrderPrintVisible(true);

                        setOrderCheckType(CHECK_TYPE.NORMAL);

                      }}
                    >

                      仓库打印

                    </Button>
                  ) : (
                    ''
                  )}

                  {record.mainPath?.includes('supplierPrint') ? (

                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {
                        if (!selectedRowObj[record.id]?.length) {
                          return message.error('请选择选择子订单');
                        }
                        setSelectedRows(selectedRowObj[record.id]);
                        setOrderRow(record);
                        setOrderPrintVisible(true);
                        setOrderCheckType(CHECK_TYPE.SUPPLIER);
                      }}
                    >

                      供应商打印

                    </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) {

                          setIsMainOrder(true);

                          setSelectedRows(record.subOrderInformationLists);

                        } else {
                          setIsMainOrder(false);

                        }

                        setOrderRow(record);

                        setFinancialVisible(true);

                        setIsEdit(false);

                      }}
                    >

                      开票

                    </Button>
                  ) : (
                    ''
                  )}

                  {record.mainPath?.includes('applyInvoicing') ? (
                    <Button
                      type="link"
                      className="p-0"
                      onClick={() => {
                        let selectedSubOrders = selectedRowObj[record.id];
                        if (selectedSubOrders === undefined) {
                          selectedSubOrders = record.subOrderInformationLists;
                        }

                        setSelectedRows(selectedSubOrders);
                        for (let i = 0; i < selectedSubOrders.length; i++) {
                          if (
                            selectedSubOrders[i].invoicingStatus ===
                              'UN_INVOICE' ||
                            selectedSubOrders[i].afterInvoicingStatus ===
                              'APPLY_FOR_INVOICING'
                          ) {
                            message.error(
                              '请选择需要开票且未申请开票的子订单进行申请',
                            );
                            return;
                          }
                        }
                        setApplyForInvoicingVisible(true);

                        setIsEdit(false);

                        setIsMainOrder(false);

                      }}
                    >
                      申请开票
                    </Button>
                  ) : (
                    ''
                  )}

                  {record.mainPath?.includes('updateOrder') ? (

                    <Button
                      className="p-0"
                      type="link"
                      onClick={() => {