canrd-main / canrd-erp-front · Files

import ButtonConfirm from '@/components/ButtomConfirm';

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

import ReissueModal from '@/pages/Order/components/ReissueModal';

import {

  postKingdeeRepSalBillOutbound,
  postKingdeeRepSalOrderSave,

  postServiceOrderCancelSend,

  postServiceOrderNoNeedSend,

  postServiceOrderOrderCancel,

  postServiceOrderProcureOrder,

  postServiceOrderProcurePrint,

  postServiceOrderProvideProcurementRoles,

  postServiceOrderQueryServiceOrder,

  postServiceOrderSaleCancelInvoicing,

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

import {

  FloatAdd,

  copyToClipboard,
  enumToProTableEnumValue,
  enumValueToLabel,
  formatDateTime,

  formatdate,

  getAliYunOSSFileNameFromUrl,
  isImageName,

} from '@/utils';

import {
  getReceivingCompanyOptions,

  isAdmin,

  isExaminer,

  isFinance,
  isProcure,
  isSales,

  isSupplier,

  isWarehousekeeper,

} from '@/utils/order';

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

import {

  ClockCircleTwoTone,

  ContainerTwoTone,

  CopyOutlined,

  CopyTwoTone,

  DownOutlined,

  EditTwoTone,

  QuestionCircleOutlined,

} from '@ant-design/icons';

import {

  ActionType,

  ProColumns,

  ProFormInstance,

  ProTable,

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

import {
  Button,
  Checkbox,

  Divider,

  Dropdown,
  Flex,

  FloatButton,

  Image,

  MenuProps,

  Modal,
  Popconfirm,

  Radio,

  Space,
  Tag,

  Tooltip,

  message,
} from 'antd';

import Base64 from 'base-64';

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 ImagesViewerModal from './components/ImagesViewerModal';

import ImportModal from './components/ImportModal';

import ModifiedDiffModal from './components/ModifiedDiffModal';

import OrderDrawer from './components/OrderDrawer';

import OrderNotesEditModal from './components/OrderNotesEditModal';

import ProcureCheckModal from './components/ProcureCheckModal';

import ProcureConvertModal from './components/ProcureConvertModal';

import ProductionTimeModal from './components/ProductionTimeModal';

import ShippingWarehouseChangeModal from './components/ShippingWarehouseChangeModal';

import UploadPayBillModal from './components/UploadPayBillModal';

import {

  AFTER_INVOICING_STATUS,

  CHECK_TYPE,

  LOGISTICS_STATUS_OPTIONS,

  MAIN_ORDER_COLUMNS,

  MODIFIED_AUDIT_STATUS_OPTIONS,

  ORDER_STATUS_OPTIONS,

  PAYEE_OPTIONS,

  PAYMENT_CHANNEL_OPTIONS,

  PAYMENT_RECEIPTS_STATUS_OPTIONS,

  POST_AUDIT_OPTIONS,

  PROCURE_ORDER_STATUS,

  PROCURE_PRIMARY_ORDER_STATUS_OPTIONS,

  PRODUCT_BELONG_DEPARTMENT_OPTIONS,

  SHIPPING_WAREHOUSE_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 [imagesViewerModalVisible, setImagesViewerModalVisible] =
    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 [uploadPayBillModalVisible, setUploadPayBillModalVisible] =
    useState<boolean>(false);

  const [modifiedDiffModalVisible, setModifiedDiffModalVisible] =
    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 [reissueVisible, setReissueVisible] = 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 [productionTimeModalVisible, setProductionTimeModalVisible] =
    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] = useState<Key[]>([]);

  const [notesType, setNotesType] = useState(1);
  const [notes, setNotes] = useState(1);

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

  const userInfo = getUserInfo();

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

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

  const [mainOrderIdSubOrderIdRelationsMap] = useState(new Map()); //主订单id与子订单id的对照关系，用于主订单子订单的勾选校验，子订单全选中对应的主订单自动勾选上
  const [selectedMainOrderKeys, setSelectedMainOrderKeys] = useState<any[]>([]);
  const [selectedSubOrderKeys, setSelectedSubOrderKeys] = useState<any[]>([]);

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

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

  const [imagesViewerOptType, setImagesViewerOptType] = useState('');

  const [filterCondifion, setFilterCondition] = useState(0);

  const [mainOrderSelectedMap] = useState(new Map()); //选中的主订单Map key：主订单id value：主订单数据
  const [subOrderSelectedMap] = useState(new Map()); //选中的子订单Map key：主订单id value：选中的子订单数据集合

  const [currentOptMainId, setCurrentMainId] = useState<any>(undefined); //当前操作对象的主订单id
  const [curretnOptSubId, setCurretnOptSubId] = useState<any>(undefined); //当前操作对象的子订单id
  const [subOrderCount, setSubOrderCount] = useState(0);
  const [sorted, setSorted] = useState(false);

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

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

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

  const [
    shippingWarehouseChangeModalVisible,
    setShippingWarehouseChangeModalVisible,
  ] = useState(false);
  const [ids, setIds] = useState([]);

  const roleCode = userInfo?.roleSmallVO?.code;

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

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

  const refreshTable = () => {

    console.log('刷新表格');

    mainTableRef.current?.reload();
    //刷新表格数据的时候,取消选中行
    setSelectedRows([]);

    setSelectedSubOrderKeys([]);

  };

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

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

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

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

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

    if (!isSupplier()) {

      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 (!isSupplier()) {

        text += ' ￥' + item?.subOrderPayment;
      }

      text += ' ' + item?.id;

    });
    if (copyToClipboard(text)) {
      message.info('已复制到剪贴板');
    } else {
      message.info('无法复制到剪贴板');
    }
  }

  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;
  }

  /**
   * 财务是否选中排序
   * @param e
   */
  function financeSorted(e: any) {
    let checked = e?.target.checked;
    setSorted(checked);
    refreshTable();
  }

  /**
   * 重置当前的操作对象
   */
  function clearOptObject() {
    setCurrentMainId(undefined);
    setCurretnOptSubId(undefined);

    setIsMainOrder(false);

  }

  /**
   * 初始化当前的操作对象
   * @param subId
   * @param mainId
   */
  function createOptObject(subId: any, mainId: any) {
    setCurrentMainId(mainId);
    setCurretnOptSubId(subId);
  }

  /**
   * 检查当前操作是否异常
   */
  // function checkOptValid() {
  //   if ((currentOptMainId === undefined || currentOptMainId === null) && (curretnOptSubId === undefined || curretnOptSubId === null)) {
  //     message.error("页面错误：当前操作对象为空，请联系系统管理员");
  //     return false;
  //   }

  //   //检查数据是否存在
  //   //主订单数据
  //   if (!Array.from(mainOrderIdSubOrderIdRelationsMap.keys()).includes(currentOptMainId)) {
  //     message.error("页面错误：当前操作主订单对象为空，请联系系统管理员");
  //   }

  //   //子订单
  //   let allSubIds = [];
  //   for (const idList of mainOrderIdSubOrderIdRelationsMap.values()) {
  //     allSubIds.push(...idList);
  //   }
  //   if (!allSubIds.includes(curretnOptSubId)) {
  //     message.error("页面错误：当前操作子订单对象为空，请联系系统管理员");
  //     return false
  //   }

  //   return true;
  // }

  /**
   * 获取当前选中子订单的其中一个主订单
   */
  function getFirstMainOrder() {
    let mainId = [...subOrderSelectedMap.values()].flat()[0].mainOrderId;
    for (let item of data) {
      if (item.id === mainId) {
        return item;
      }
    }

    return null;
  }

  /**
   * 返回当前操作的主订单数据
   */
  function buildMainOrder() {
    if (currentOptMainId === undefined || currentOptMainId === null) {
      message.error('页面错误：当前操作的主订单id不存在，请联系系统管理员');
      return;
    }

    let mainOrderClone = null;
    let matchedData = data.filter((item) => {
      return item.id === currentOptMainId;
    });
    if (matchedData.length > 0) {
      mainOrderClone = cloneDeep(matchedData[0]);
    }

    if (mainOrderClone === null) {
      message.error('页面错误：当前操作的主订单数据不存在，请联系系统管理员');
    }

    return mainOrderClone;
  }

  /**
   * 返回当前操作的子订单集合
   */
  function buildSubOrders() {
    if (currentOptMainId === undefined || currentOptMainId === null) {
      message.error('页面错误：当前操作的主订单id不存在，请联系系统管理员');
      return;
    }

    let cloneSubOrders = [];

    //如果没有传当前操作的子订单id，说明是操作主订单
    if (curretnOptSubId === undefined || curretnOptSubId === null) {
      //如果有选中子订单，那么取选中的子订单为操作对象，否则取当前主订单的全部子订单为操作对象
      let currentOptSubOrders = subOrderSelectedMap.get(currentOptMainId);
      if (
        currentOptSubOrders === null ||
        currentOptSubOrders === undefined ||
        currentOptSubOrders.length === 0
      ) {
        for (let item of data) {
          if (item.id === currentOptMainId) {
            for (let subOrder of item?.subOrderInformationLists) {
              cloneSubOrders.push(cloneDeep(subOrder));
            }
          }
        }
      } else {
        cloneSubOrders = currentOptSubOrders.map((item) => {
          return cloneDeep(item);
        });
      }
    } else {
      //操作的是子订单
      for (let item of data) {
        if (item.id === currentOptMainId) {
          for (let subOrder of item?.subOrderInformationLists) {
            if (subOrder.id === curretnOptSubId) {
              cloneSubOrders.push(cloneDeep(subOrder));
              break;
            }
          }
        }
      }
    }

    if (cloneSubOrders.length === 0) {
      message.error('页面错误：当前操作的订单数据不存在，请联系系统管理员');
      return;
    }

    return cloneSubOrders;
  }

  /**

   * 获取当前操作申请开票的订单总金额
   */
  function getApplyInvoicingTotalPayment() {
    let subOrders = isMainOrder
      ? [...subOrderSelectedMap.values()].flat()
      : buildSubOrders();

    let totalPayment = 0;
    if (subOrders && subOrders.length > 0) {
      let mainIds = subOrders?.map((item: any) => {
        return item.mainOrderId;
      });

      let uniqueMainIds = [...new Set(mainIds)];

      let dataMap = data.reduce((map, obj: any) => {
        map.set(obj.id, obj);
        return map;
      }, new Map());

      uniqueMainIds.forEach((id: any) => {
        let o = dataMap.get(id);
        if (o) {
          totalPayment = FloatAdd(totalPayment, o.totalPayment);
        }
      });
    }
    return totalPayment;
  }

  /**

   * 根据主订单id，将该主订单下的所有子订单取消选中
   */
  const removeSelectedSubOrderKeysByMainOrderId = (id: any) => {
    let currentMainOrderAllSubOrderIds =
      mainOrderIdSubOrderIdRelationsMap.get(id);
    if (currentMainOrderAllSubOrderIds) {
      let newSelectedSubOrderKeys = selectedSubOrderKeys.filter((item) => {
        return !currentMainOrderAllSubOrderIds.includes(item);
      });
      setSelectedSubOrderKeys(newSelectedSubOrderKeys);
    }
  };

  /**
   * 根据主订单id取消选中主订单
   * @param id
   */
  const removeSelecetMainOrderKeyByMainOrderId = (id: any) => {
    if (selectedMainOrderKeys.includes(id)) {
      let newSelectedMainOrderKeys = selectedMainOrderKeys.filter((item) => {
        return item !== id;

      });

      setSelectedMainOrderKeys(newSelectedMainOrderKeys);
    }
  };

  const onCheckboxChange = (record: never) => {
    let newSelectedMainOrderKeys = [];
    if (selectedMainOrderKeys.includes(record.id)) {
      newSelectedMainOrderKeys = selectedMainOrderKeys.filter(
        (key) => key !== record.id,
      );
      removeSelectedSubOrderKeysByMainOrderId(record.id);

      setSelectedRows([]);

      //删除选中主订单的信息

      mainOrderSelectedMap.delete(record.id);

      //删除选中主订单附属子订单的信息
      subOrderSelectedMap.delete(record.id);
      //总选中按钮取消选中
      setAllMainChecked(false);

    } else {

      newSelectedMainOrderKeys = [...selectedMainOrderKeys, record.id];

      //子订单全部自动选中
      let subIds = record.subOrderInformationLists?.map((item) => {
        return item.id;
      });

      let newSelectedSubOrderKeys = [...selectedSubOrderKeys];
      for (let subId of subIds) {
        if (!selectedSubOrderKeys.includes(subId)) {
          newSelectedSubOrderKeys.push(subId);
        }
      }
      setSelectedSubOrderKeys(newSelectedSubOrderKeys);

      setSelectedRows(record.subOrderInformationLists);

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

      //选中子订单
      subOrderSelectedMap.set(record.id, record.subOrderInformationLists);

      //如果所有主订单都勾选上了，那么勾选上总选中按钮
      if (
        mainOrderSelectedMap?.size === mainOrderIdSubOrderIdRelationsMap.size
      ) {
        setAllMainChecked(true);
      }

    }

    setSelectedMainOrderKeys(newSelectedMainOrderKeys);

  };

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

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

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

        mainOrderSelectedMap.set(item.id, item);

        return item.id;
      });

      let subOrderIds = [];
      for (let subIdList of mainOrderIdSubOrderIdRelationsMap.values()) {
        subOrderIds.push(...subIdList);
      }

      if (data) {
        for (let item of data) {
          mainOrderSelectedMap.set(item.id, item);

          subOrderSelectedMap.set(item.id, item.subOrderInformationLists);
        }
      }

      setSelectedMainOrderKeys(mainOrderIds);
      setSelectedSubOrderKeys(subOrderIds);

    } else {

      setSelectedMainOrderKeys([]);
      setSelectedSubOrderKeys([]);
      mainOrderSelectedMap.clear();
      subOrderSelectedMap.clear();

    }

    console.log(mainOrderSelectedMap);
    console.log(subOrderSelectedMap);

  };

  //表头渲染
  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>

        {!isSupplier() ? (

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

      const paymentMethod = optRecord.paymentMethod;
      let orderStatusTagText = enumValueToLabel(
        optRecord.orderStatus,
        ORDER_STATUS_OPTIONS,
      );

      if (orderStatus === 'WAIT_CONFIRM_DELIVER_AFTER_INVOICE') {
        if (optRecord.afterInvoicingStatus !== 'COMPLETE_INVOICING') {
          orderStatusTagText = '待开票';
        } else {
          orderStatusTagText = '待确认发货';
        }
      }

      //如果是未审核或者领导已审核，付款状态为预付款则需要财务审核【财务待审核】，否则仓库审核【】

      if (orderStatus === 'UNAUDITED' || orderStatus === 'LEADER_AUDITED') {
        if (paymentMethod === 'PAYMENT_IN_ADVANCE') {
          orderStatusTagText = '财务待审核';
        } else {
          orderStatusTagText = '仓库待审核';
        }
      }

      //如果是财务已审核，显示为【仓库待审核】
      if (orderStatus === 'FINANCE_PROCESS') {
        orderStatusTagText = '仓库待审核';
      }

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

            key="key"

            title={optRecord.checkNotes + ' ' + optRecord.postAuditNotes}

            content={
              <>
                <Tag
                  color={TAGS_COLOR.get(optRecord.orderStatus)}
                  style={{ marginRight: '4px' }}
                >

                  {orderStatusTagText}

                </Tag>
                <QuestionCircleOutlined style={{ color: '#C1C1C1' }} />
              </>
            }
          />
        );
      }

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

          <Tag
            color={TAGS_COLOR.get(optRecord.orderStatus)}
            style={{ marginRight: '4px' }}
          >

            {orderStatusTagText}

          </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' }}
                >

                  {orderStatusTagText}

                </Tag>
                <QuestionCircleOutlined style={{ color: '#C1C1C1' }} />
              </>
            }
          />
        );
      }

      return (

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

          {orderStatusTagText}
        </Tag>
      );
    }

    /**
     * 获取后置审核状态标签
     * @param optRecord
     */
    function getPostAuditStatusTag(optRecord: any): import('react').ReactNode {
      return (
        <Tag key="key" color={TAGS_COLOR.get(optRecord.postAuditStatus)}>
          {enumValueToLabel(optRecord.postAuditStatus, POST_AUDIT_OPTIONS)}

        </Tag>
      );
    }

    //申请开票附件处理
    const getAfterAnnexList = () => {

      // let links = [];

      let afterAnnexList = optRecord.afterAnnexList;
      let i = 1;

      let images = [];
      let otherAnnex = [];

      if (afterAnnexList?.length > 0) {
        for (let url of afterAnnexList) {

          let name = getAliYunOSSFileNameFromUrl(url);
          if (isImageName(name)) {
            images.push({ name: name, url: url });
          } else {
            otherAnnex.push({ name: '附件' + i++, url: url });
          }

        }
      }

      return (
        <div className="pl-1">
          <Image.PreviewGroup
            className="mr-10"
            preview={{
              onChange: (current, prev) =>
                console.log(`current index: ${current}, prev index: ${prev}`),
            }}
          >
            {images.map((item, index) => (
              <React.Fragment key={index}>
                {index > 0 ? <Divider type="vertical" /> : ''}
                <Image
                  className="max-h-[50px] max-w-[70px]"
                  src={item.url}
                  title={item.name}
                />{' '}
              </React.Fragment>
            ))}
          </Image.PreviewGroup>
          {otherAnnex.map((item, index) => {
            return (
              <Popconfirm
                title="下载或预览"
                key={index}
                onConfirm={() => {
                  window.open(
                    '/previewApi/onlinePreview?url=' +

                      encodeURIComponent(Base64.encode(item.url)),

                  );
                }}
                onCancel={() => {
                  window.open(item.url);
                }}
                okText="预览"
                cancelText="下载"
              >
                <Button className="px-1" key={index} type="link">
                  {item.name}
                </Button>
              </Popconfirm>
            );
          })}
        </div>
      );

    };

    //财务审核附件处理
    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>
              <div

                className="overflow-hidden whitespace-no-wrap overflow-ellipsis hover:cursor-pointer"
                onClick={() => {
                  copyToClipboard(optRecord.productName);
                  message.info('商品名称复制成功：' + optRecord.productName);
                }}

                title={optRecord.productName}
              >
                <span className="font-medium text-black ">
                  {optRecord.productName}
                </span>
              </div>
              <div className="text-xs text-[#8C8C8C]">
                <span
                  className="cursor-pointer"
                  onClick={() => {
                    copyToClipboard(optRecord.id);
                    message.info('子订单编号复制成功：' + optRecord.id);
                  }}
                >
                  {optRecord.id}
                </span>
                {(roleCode === 'salesRepresentative' ||
                  roleCode === 'salesManager') &&

                !optRecord.isCurrentUserOrder ? (

                  <span className="text-[#f44e4e]">(非本账号订单)</span>
                ) : (
                  ''
                )}

                {optRecord.modifiedOptFlag !== null ? (
                  <span className="text-[#f44e4e] cursor-pointer">
                    {optRecord.modifiedOptFlag === 'MODIFY' ? '(修改中)' : ''}
                    {optRecord.modifiedOptFlag === 'DELETE' ? '(删除中)' : ''}
                    {optRecord.modifiedOptFlag === 'INSERT' ? '(新增中)' : ''}
                  </span>
                ) : (
                  ''
                )}

                {optRecord.modified ? (

                  <Tooltip title="点击查看详情">
                    <span
                      className="text-[#f44e4e] cursor-pointer"
                      onClick={async () => {
                        createOptObject(optRecord.id, record.id);
                        setModifiedDiffModalVisible(true);
                      }}
                    >

                      (内容有变化)

                    </span>
                  </Tooltip>

                ) : (
                  ''
                )}
                {!optRecord.logicDelete ? (
                  <span className="text-[#f44e4e]">(已作废)</span>
                ) : (
                  ''
                )}
              </div>

            </div>

            <div

              className="overflow-hidden whitespace-no-wrap overflow-ellipsis hover:cursor-pointer"

              title={optRecord.parameters}

              onClick={() => {
                copyToClipboard(optRecord.parameters);
                message.info('商品名称复制成功：' + optRecord.parameters);
              }}

            >

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

                参数：{optRecord.parameters}

              </span>

            </div>

          </Flex>
          <Flex className="w-[13%]" vertical gap="small">

            {!isSupplier() ? (

              <>
                <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>

            {!isSupplier() ? (

              <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">

            {!isSupplier() ? (

              <>
                {/* 支付方式 */}
                <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                  <span className="text-slate-700">

                    {optRecord.paymentMethodText}

                  </span>
                </div>
                {/* 支付渠道 */}
                <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                  <span className="text-slate-700">
                    {enumValueToLabel(
                      optRecord.paymentChannel,
                      PAYMENT_CHANNEL_OPTIONS,
                    )}
                  </span>
                </div>

                {/* 回款审核状态 */}
                {optRecord.paymentReceiptStatus !== null ? (
                  <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">

                    <Tag
                      className="hover:cursor-pointer"

                      onMouseEnter={(e: any) => {

                        e.target.innerText = '点击查看回款凭证';

                      }}
                      onMouseLeave={(e: any) => {

                        e.target.innerText = enumValueToLabel(
                          optRecord.paymentReceiptStatus,
                          PAYMENT_RECEIPTS_STATUS_OPTIONS,
                        );

                      }}

                      onClick={() => {
                        createOptObject(optRecord.id, record.id);
                        setImagesViewerOptType('paymentReceipt');

                        setImagesViewerModalVisible(true);
                      }}

                      key="key"
                      color={TAGS_COLOR.get(optRecord.paymentReceiptStatus)}
                    >
                      {enumValueToLabel(
                        optRecord.paymentReceiptStatus,
                        PAYMENT_RECEIPTS_STATUS_OPTIONS,
                      )}

                    </Tag>
                  </div>
                ) : (
                  ''
                )}

              </>

            ) : (
              ''
            )}

          </Flex>
          <Flex className="w-[13%]" vertical gap="small">

            {!isSupplier() ? (

              <>
                {/* 所属部门 */}
                <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>

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

                )}

                {/* 开票状态 */}

                {optRecord.afterInvoicingStatus !== null ? (

                  <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                    <Tooltip
                      title={
                        optRecord.invoicingUrgentCause !== null &&

                        optRecord.afterInvoicingStatus ===

                          'URGENT_INVOICE_AUDITING'
                          ? optRecord.invoicingUrgentCause
                          : enumValueToLabel(

                              optRecord.afterInvoicingStatus,
                              AFTER_INVOICING_STATUS,
                            )

                      }
                    >

                      <Tag
                        color={TAGS_COLOR.get(optRecord.afterInvoicingStatus)}
                      >

                        {enumValueToLabel(
                          optRecord.afterInvoicingStatus,
                          AFTER_INVOICING_STATUS,
                        )}
                      </Tag>
                    </Tooltip>
                  </div>

                ) : (
                  ''
                )}

                {/* 是否加急图标显示 */}
                {optRecord.isUrgent ? (
                  <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                    <Tooltip
                      title={'期望开票时间：' + formatdate(optRecord.deadline)}
                    >
                      <Tag color="red">加急开票</Tag>
                    </Tooltip>
                  </div>
                ) : (
                  ''
                )}

                {(roleCode === 'warehouseKeeper' || roleCode === 'admin') &&

                optRecord.shippingWarehouse !== null ? (

                  <div
                    className="overflow-hidden whitespace-no-wrap overflow-ellipsis"
                    title={enumValueToLabel(
                      optRecord.shippingWarehouse,
                      SHIPPING_WAREHOUSE_OPTIONS,
                    )}
                  >
                    <span className="text-slate-700">
                      {enumValueToLabel(
                        optRecord.shippingWarehouse,
                        SHIPPING_WAREHOUSE_OPTIONS,
                      )}
                    </span>
                  </div>
                ) : (
                  ''
                )}

                {/* 生产时间 */}
                <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                  {optRecord.productionStartTime !== null ||

                  optRecord.productionEndTime !== null ? (

                    <MyToolTip
                      title={
                        formatdate(optRecord.productionStartTime) +
                        ' 至 ' +
                        formatdate(optRecord.productionEndTime)
                      }
                      content={
                        <Button type="link" size="small" style={{ padding: 0 }}>
                          生产时间
                        </Button>
                      }
                    />
                  ) : (
                    ''

                  )}

                </div>
              </>

            ) : (
              ''
            )}

          </Flex>

          <Flex className="w-[10%]" vertical gap="small">
            {/* 开票状态 */}

            {!isSupplier() ? (

              <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.postAuditStatus !== null ? (
              <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                {getPostAuditStatusTag(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 +
                        '  ' +
                        optRecord.logisticsNotes

                  }
                  content={
                    <Button type="link" size="small" style={{ padding: 0 }}>
                      物流信息
                    </Button>
                  }
                />
              ) : (
                ''
              )}

              {/* 修改审核状态 */}

              {optRecord.modifiedAuditStatus !== null &&

              optRecord.modifiedAuditStatus !== 'AUDIT_FAILURE' ? (

                <div className="overflow-hidden whitespace-no-wrap overflow-ellipsis">
                  <Tooltip
                    title={enumValueToLabel(
                      optRecord.modifiedAuditStatus,
                      MODIFIED_AUDIT_STATUS_OPTIONS,
                    )}
                  >
                    <Tag color={TAGS_COLOR.get(optRecord.modifiedAuditStatus)}>
                      {enumValueToLabel(
                        optRecord.modifiedAuditStatus,
                        MODIFIED_AUDIT_STATUS_OPTIONS,
                      )}
                    </Tag>
                  </Tooltip>
                </div>
              ) : (
                ''
              )}

              {optRecord.modifiedAuditStatus === 'AUDIT_FAILURE' ? (
                <MyToolTip
                  key="key"
                  title={optRecord.modifiedAuditNotes}
                  content={
                    <>
                      <Tag
                        color={TAGS_COLOR.get(optRecord.modifiedAuditNotes)}
                        style={{ marginRight: '4px' }}
                      >
                        {enumValueToLabel(
                          optRecord.modifiedAuditStatus,
                          MODIFIED_AUDIT_STATUS_OPTIONS,
                        )}
                      </Tag>
                      <QuestionCircleOutlined style={{ color: '#C1C1C1' }} />
                    </>
                  }
                />
              ) : (
                ''
              )}

            </div>
          </Flex>
          <Flex className="w-[18%]" wrap="wrap" gap="small">

            {optRecord.subPath?.includes('uploadPaymentReceiptBill') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  createOptObject(optRecord.id, record.id);
                  setUploadPayBillModalVisible(true);
                }}
              >
                回款
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('reissue') ? (
              /*optRecord.afterInvoicingStatus==='PARTIAL_INVOICING'||
                optRecord.afterInvoicingStatus==='COMPLETE_INVOICING'*/
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setCurrentMainId(record.id);
                  setReissueVisible(true);
                  console.log(reissueVisible);
                }}
              >
                重新开票
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('confirmReissue') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setCurrentMainId(record.id);
                  setCurretnOptSubId(optRecord.id);
                  setCheckVisible(true);
                  setOrderCheckType(CHECK_TYPE.CONFIRM_REISSUE);
                }}
              >
                重新开票审核
              </Button>
            ) : (
              ''
            )}

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

                  console.log('here');
                  setCurrentMainId(record.id);
                  setCurretnOptSubId(optRecord.id);

                  setCheckVisible(true);
                  setOrderCheckType(CHECK_TYPE.LEADER_AUDIT);
                }}
              >
                审核
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('auditPaymentReceipt') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  createOptObject(optRecord.id, record.id);
                  setCheckVisible(true);
                  setOrderCheckType(CHECK_TYPE.PAYMENT_RECEIPTS_AUDIT);
                }}
              >
                回款审核
              </Button>
            ) : (
              ''
            )}

            {/* 加急审核 */}
            {optRecord.subPath?.includes('URGENT_INVOICE_AUDITING') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  console.log('here');
                  setCurrentMainId(record.id);
                  setCurretnOptSubId(optRecord.id);
                  setCheckVisible(true);
                  setOrderCheckType(CHECK_TYPE.URGENT_INVOICE_AUDITING);
                }}
              >
                加急审核
              </Button>
            ) : (
              ''
            )}

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

                  createOptObject(optRecord.id, record.id);

                  setCheckVisible(true);
                  setOrderCheckType(CHECK_TYPE.WAITING_FOR_POST_AUDIT);
                }}
              >
                后置审核
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('modifiedAuditRequest') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  createOptObject(optRecord.id, record.id);
                  setCheckVisible(true);

                  setOrderCheckType(CHECK_TYPE.NODE_OPERATING_AUDIT);
                }}
              >
                节点修改审核
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('applyModify') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  createOptObject(optRecord.id, record.id);
                  setOrderDrawerVisible(true);
                  setOrderOptType('order-change-normal');

                }}
              >

                申请修改
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('modifiedLeaderAuditRequest') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  createOptObject(optRecord.id, record.id);
                  setCheckVisible(true);
                  setOrderCheckType(CHECK_TYPE.MODIFY_LEADER_AUDIT);
                }}
              >
                领导修改审核

              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('shippingWarehouseChangeRequest') ? (
              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  setIds([optRecord.id]);

                  createOptObject(optRecord.id, record.id);

                  setShippingWarehouseChangeModalVisible(true);
                }}
              >
                修改仓库
              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('saleCancelInvoicing') ? (
              <ButtonConfirm
                className="p-0"
                title="确认取消申请开票？"
                text="取消申请"
                onConfirm={async () => {
                  let res = await postServiceOrderSaleCancelInvoicing({
                    data: {
                      subOrderIds: [optRecord.id],
                    },
                  });

                  if (res && res.result === RESPONSE_CODE.SUCCESS) {
                    message.success(res.message);
                    refreshTable();
                  }
                }}
              />
            ) : (
              ''
            )}

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

                  createOptObject(optRecord.id, record.id);

                  setFinancialEditVisible(true);
                  setIsMainOrder(false);
                }}
              >

                编辑时间

              </Button>
            ) : (
              ''
            )}

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

                  createOptObject(optRecord.id, record.id);

                  setDeliverVisible(true);
                  setIsSendProduct(true);

                  setOrderCheckType(CHECK_TYPE.WEARHOUSE_KEEPER);

                }}
              >
                仓库发货
              </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={() => {
                  createOptObject(optRecord.id, record.id);
                  setDeliverVisible(true);
                  setIsSendProduct(true);
                  setOrderCheckType(CHECK_TYPE.PROCURE);
                }}
              >

                {isSupplier() ? '发货' : '采购发货'}

              </Button>
            ) : (
              ''
            )}

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

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

                  createOptObject(optRecord.id, record.id);
                  setProductionTimeModalVisible(true);

                }}
              >

                生产时间

              </Button>
            ) : (
              ''
            )}

            {optRecord.subPath?.includes('queryAnnex') &&

            optRecord.listAnnex?.length > 0 ? (

              <Button
                className="p-0"
                type="link"
                onClick={() => {
                  optRecord.mainOrderId = record.id;

                  createOptObject(optRecord.id, record.id);

                  setAttachmentModalVisible(true);
                }}
              >
                附件
              </Button>
            ) : (
              ''
            )}

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

                  createOptObject(optRecord.id, record.id);

                  setDeliverVisible(true);
                  setIsSendProduct(false);
                }}
              >
                修改发货信息
              </Button>
            ) : (
              ''
            )}

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

                  createOptObject(optRecord.id, record.id);