OrderPrintModal.tsx
4.12 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
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) {
//printJS打印出货单
printJS({
printable: 'printArea', // 元素id,不支持多个
scanStyles: false,
type: 'html',
targetStyle: ['* '],
targetStyles: ['*'],
style: printerCSS(),
});
message.success(res.message);
onClose();
}
},
onCancel() {
message.info('取消打印出货单');
},
});
};
return (
<Modal
title="打印出货单"
centered
open
onOk={() => {
if (isRePrint) {
printJS({
printable: 'printArea', // 元素id,不支持多个
scanStyles: false,
type: 'html',
targetStyle: ['* '],
targetStyles: ['*'],
style: printerCSS(),
});
setVisible(false);
}
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>
);
};