OrderPrintModal.tsx
3.53 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
import { RESPONSE_CODE } from '@/constants/enum';
import '@/pages/OrderPrint/index.less';
import {
postServiceOrderPrintOrder,
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 {
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>
);
};