|
|
1
|
import { RESPONSE_CODE } from '@/constants/enum';
|
|
|
2
|
import '@/pages/OrderPrint/index.less';
|
|
|
3
4
5
|
import { postServiceOrderPrintOrder } from '@/services';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Modal, Select, Space, message } from 'antd';
|
|
|
6
|
import printJS from 'print-js';
|
|
|
7
8
9
10
|
import { useState } from 'react';
import DalangPrinter from './components/DalangPrinter';
import HoujiePrinter from './components/HoujiePrinter';
import ZhuguangPrinter from './components/ZhuguangPrinter';
|
|
|
11
12
13
14
15
|
export default ({ mainOrder, subOrders, onClose }) => {
console.log(mainOrder);
console.log(subOrders);
|
|
|
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
|
const [printerType, setPrinterType] = useState('Houjie');
const { confirm } = Modal;
const handleChange = (value: string) => {
setPrinterType(value);
};
const showPropsConfirm = () => {
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('取消打印出货单');
},
});
};
|
|
|
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
return (
<Modal
title="打印出货单"
centered
open
onOk={() => {
//printJS打印出货单
printJS({
printable: 'printArea', // 元素id,不支持多个
type: 'html',
targetStyle: ['* '],
targetStyles: ['*'],
style:
'@page{size:auto; margin: 0;}' +
'@media print { @page {size: landscape } }', // landscape 默认横向打印
|
|
|
63
64
65
|
onPrintDialogClose: () => {
showPropsConfirm();
},
|
|
|
66
67
|
});
|
|
|
68
|
// onClose();
|
|
|
69
70
71
72
|
}}
onCancel={() => onClose()}
width={1000}
>
|
|
|
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<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} />
) : (
''
)}
|
|
|
92
|
|
|
|
93
94
95
96
97
|
{printerType === 'Zhuguang' ? (
<ZhuguangPrinter mainOrder={mainOrder} subOrders={subOrders} />
) : (
''
)}
|
|
|
98
|
|
|
|
99
100
101
102
103
|
{printerType === 'Dalang' ? (
<DalangPrinter mainOrder={mainOrder} subOrders={subOrders} />
) : (
''
)}
|
|
|
104
105
106
|
</Modal>
);
};
|