canrd-main / canrd-erp-front · Files

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

import '@/pages/OrderPrint/index.less';

import {
  postServiceOrderPrintOrder,

  postServiceOrderProcurePrint,

  postServiceOrderSupplierPrint,
} from '@/services';

import { ExclamationCircleFilled } from '@ant-design/icons';
import { Modal, Select, Space, message } from 'antd';

import printJS from 'print-js';

import { useState } from 'react';

import { CHECK_TYPE } from '../Order/constant';

import { printerCSS } from './PrinterCSS';

import DalangPrinter from './components/DalangPrinter';
import HoujiePrinter from './components/HoujiePrinter';
import ZhuguangPrinter from './components/ZhuguangPrinter';

export default ({
  mainOrder,
  subOrders,
  isRePrint,
  setVisible,
  printOptType,
  onClose,
}) => {

  const [printerType, setPrinterType] = useState('Houjie');
  const { confirm } = Modal;
  const handleChange = (value: string) => {
    setPrinterType(value);
  };

  /**
   * 是供应商打印还是普通打印
   * @param typeString
   * @returns
   */
  function optType(typeString: string) {
    if (printOptType === typeString) {
      return true;
    }

    return false;
  }

  const showPropsConfirm = () => {

    if (isRePrint) {
      return;
    }

    confirm({
      title: '确认打印出货单',
      icon: <ExclamationCircleFilled />,
      content: '您是否已打印出货单？',
      okText: '是的我已打印',
      okType: 'primary',
      okButtonProps: {},
      cancelText: '取消',
      async onOk() {
        let body = {
          subIds: subOrders.map((item) => {
            return item.id;
          }),
        };

        let res;
        if (optType(CHECK_TYPE.SUPPLIER)) {
          res = await postServiceOrderSupplierPrint({
            data: {
              ids: subOrders.map((item) => {
                return item.id;
              }),
            },
          });

        } else if (optType(CHECK_TYPE.PROCURE)) {
          res = await postServiceOrderProcurePrint({
            data: {
              ids: subOrders.map((item) => {
                return item.id;
              }),
            },
          });

        } else {
          res = await postServiceOrderPrintOrder({ data: body });
        }

        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          onClose();
        }
      },
      onCancel() {
        message.info('取消打印出货单');
      },
    });
  };

  return (
    <Modal
      title="打印出货单"
      centered
      open
      onOk={() => {
        //printJS打印出货单
        printJS({
          printable: 'printArea', // 元素id,不支持多个

          scanStyles: false,

          type: 'html',
          targetStyle: ['* '],
          targetStyles: ['*'],

          style: printerCSS(),

          onPrintDialogClose: () => {
            showPropsConfirm();
          },

        });

        // onClose();

      }}

      onCancel={() => setVisible(false)}

      width={1000}
    >

      <Space direction="vertical" className="py-2">
        <span>打印类型</span>
        <Select
          defaultValue="Houjie"
          style={{ width: 'auto' }}
          onChange={handleChange}
          options={[

            { value: 'Houjie', label: '科路得出货单-厚街' },
            { value: 'Dalang', label: '科路得出货单-大朗' },

            { value: 'Zhuguang', label: '烛光出货单' },
          ]}
        />
      </Space>

      {printerType === 'Houjie' ? (
        <HoujiePrinter mainOrder={mainOrder} subOrders={subOrders} />
      ) : (
        ''
      )}

      {printerType === 'Zhuguang' ? (
        <ZhuguangPrinter mainOrder={mainOrder} subOrders={subOrders} />
      ) : (
        ''
      )}

      {printerType === 'Dalang' ? (
        <DalangPrinter mainOrder={mainOrder} subOrders={subOrders} />
      ) : (
        ''
      )}

    </Modal>
  );
};