OrderPrintModal.tsx
2.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { RESPONSE_CODE } from '@/constants/enum';
import '@/pages/OrderPrint/index.less';
import { postServiceOrderPrintOrder } 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 { printerCSS } from './PrinterCSS';
import DalangPrinter from './components/DalangPrinter';
import HoujiePrinter from './components/HoujiePrinter';
import ZhuguangPrinter from './components/ZhuguangPrinter';
export default ({ mainOrder, subOrders, isRePrint, onClose }) => {
const [printerType, setPrinterType] = useState('Houjie');
const { confirm } = Modal;
const handleChange = (value: string) => {
setPrinterType(value);
};
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;
}),
};
const 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={() => onClose()}
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>
);
};