Commit 3b579acc45491d06454dfb21314b314c5d36c049
Merge branch 'znh231122' into 'develop'
Znh231122 See merge request !5
Showing
11 changed files
with
2090 additions
and
225 deletions
package-lock.json
... | ... | @@ -13,7 +13,8 @@ |
13 | 13 | "@umijs/max": "^4.0.87", |
14 | 14 | "antd": "^5.10.2", |
15 | 15 | "axios": "^1.6.1", |
16 | - "lodash": "^4.17.21" | |
16 | + "lodash": "^4.17.21", | |
17 | + "print-js": "^1.6.0" | |
17 | 18 | }, |
18 | 19 | "devDependencies": { |
19 | 20 | "@inspir/pluto": "^1.0.5", |
... | ... | @@ -14526,6 +14527,11 @@ |
14526 | 14527 | "renderkid": "^3.0.0" |
14527 | 14528 | } |
14528 | 14529 | }, |
14530 | + "node_modules/print-js": { | |
14531 | + "version": "1.6.0", | |
14532 | + "resolved": "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz", | |
14533 | + "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==" | |
14534 | + }, | |
14529 | 14535 | "node_modules/process": { |
14530 | 14536 | "version": "0.11.10", |
14531 | 14537 | "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", |
... | ... | @@ -29855,6 +29861,11 @@ |
29855 | 29861 | "renderkid": "^3.0.0" |
29856 | 29862 | } |
29857 | 29863 | }, |
29864 | + "print-js": { | |
29865 | + "version": "1.6.0", | |
29866 | + "resolved": "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz", | |
29867 | + "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==" | |
29868 | + }, | |
29858 | 29869 | "process": { |
29859 | 29870 | "version": "0.11.10", |
29860 | 29871 | "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", | ... | ... |
package.json
src/pages/Order/components/ConfirmReceiptModal.tsx
0 → 100644
1 | +import { postServiceOrderConfirmReceipt } from '@/services'; | |
2 | +import { UploadOutlined } from '@ant-design/icons'; | |
3 | +import { ModalForm } from '@ant-design/pro-components'; | |
4 | +import { Button, Form, Upload } from 'antd'; | |
5 | +import { RcFile, UploadFile, UploadProps } from 'antd/es/upload'; | |
6 | +import { useState } from 'react'; | |
7 | +export default ({ data, onClose }) => { | |
8 | + const [form] = Form.useForm<{ name: string; company: string }>(); | |
9 | + const [previewOpen, setPreviewOpen] = useState(false); | |
10 | + const [previewImage, setPreviewImage] = useState(''); | |
11 | + const [previewTitle, setPreviewTitle] = useState(''); | |
12 | + console.log(previewOpen); | |
13 | + console.log(previewImage); | |
14 | + console.log(previewTitle); | |
15 | + const getBase64 = (file: RcFile): Promise<string> => | |
16 | + new Promise((resolve, reject) => { | |
17 | + const reader = new FileReader(); | |
18 | + reader.readAsDataURL(file); | |
19 | + reader.onload = () => resolve(reader.result as string); | |
20 | + reader.onerror = (error) => reject(error); | |
21 | + }); | |
22 | + // const beforeUpload = (file: RcFile) => { | |
23 | + // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; | |
24 | + // if (!isJpgOrPng) { | |
25 | + // message.error('You can only upload JPG/PNG file!'); | |
26 | + // } | |
27 | + // const isLt2M = file.size / 1024 / 1024 < 2; | |
28 | + // if (!isLt2M) { | |
29 | + // message.error('Image must smaller than 2MB!'); | |
30 | + // } | |
31 | + // return isJpgOrPng && isLt2M; | |
32 | + // }; | |
33 | + const [fileList, setFileList] = useState<UploadFile[]>([]); | |
34 | + const [uploading, setUploading] = useState(false); | |
35 | + | |
36 | + const handlePreview = async (file: UploadFile) => { | |
37 | + if (!file.url && !file.preview) { | |
38 | + file.preview = await getBase64(file.originFileObj as RcFile); | |
39 | + } | |
40 | + | |
41 | + setPreviewImage(file.url || (file.preview as string)); | |
42 | + setPreviewOpen(true); | |
43 | + setPreviewTitle( | |
44 | + file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1), | |
45 | + ); | |
46 | + }; | |
47 | + | |
48 | + const handleUpload = async () => { | |
49 | + const formData = new FormData(); | |
50 | + // fileList.forEach((file) => { | |
51 | + // formData.append('files[]', file as RcFile); | |
52 | + // }); | |
53 | + formData.append('file', fileList[0] as RcFile); | |
54 | + formData.append('id', data.id); | |
55 | + setUploading(true); | |
56 | + // You can use any AJAX library you like | |
57 | + const res = await postServiceOrderConfirmReceipt({ data: formData }); | |
58 | + console.log(res); | |
59 | + | |
60 | + setUploading(false); | |
61 | + }; | |
62 | + | |
63 | + const props: UploadProps = { | |
64 | + onRemove: (file) => { | |
65 | + const index = fileList.indexOf(file); | |
66 | + const newFileList = fileList.slice(); | |
67 | + newFileList.splice(index, 1); | |
68 | + setFileList(newFileList); | |
69 | + }, | |
70 | + beforeUpload: (file) => { | |
71 | + setFileList([...fileList, file]); | |
72 | + | |
73 | + return false; | |
74 | + }, | |
75 | + onPreview: handlePreview, | |
76 | + fileList, | |
77 | + }; | |
78 | + | |
79 | + return ( | |
80 | + <ModalForm<{ | |
81 | + name: string; | |
82 | + company: string; | |
83 | + }> | |
84 | + width={500} | |
85 | + open | |
86 | + title="确认收货" | |
87 | + form={form} | |
88 | + autoFocusFirstInput | |
89 | + submitTimeout={2000} | |
90 | + onFinish={async () => { | |
91 | + onClose(); | |
92 | + }} | |
93 | + > | |
94 | + <Upload {...props}> | |
95 | + <Button icon={<UploadOutlined />}>Select File</Button> | |
96 | + </Upload> | |
97 | + <Button | |
98 | + type="primary" | |
99 | + onClick={handleUpload} | |
100 | + disabled={fileList.length === 0} | |
101 | + loading={uploading} | |
102 | + style={{ marginTop: 16 }} | |
103 | + > | |
104 | + {uploading ? 'Uploading' : 'Start Upload'} | |
105 | + </Button> | |
106 | + </ModalForm> | |
107 | + ); | |
108 | +}; | ... | ... |
src/pages/Order/components/FinancialDrawer.tsx
... | ... | @@ -14,17 +14,10 @@ import { Form, message } from 'antd'; |
14 | 14 | // }); |
15 | 15 | // }; |
16 | 16 | |
17 | -export default ({ onClose }) => { | |
18 | - // const [expandedRowKeys, setExpandedRowKeys] = useState<readonly Key[]>([]); | |
19 | - const [form] = Form.useForm<{ name: string; company: string }>(); | |
20 | - // const actionRef = useRef< | |
21 | - // FormListActionType<{ | |
22 | - // name: string; | |
23 | - // }> | |
24 | - // >(); | |
25 | - //作为商品行号 | |
26 | - // const rowRumber = useRef(0); | |
17 | +export default ({ mainOrder, subOrders, onClose }) => { | |
18 | + console.log(subOrders); | |
27 | 19 | |
20 | + const [form] = Form.useForm<{ name: string; company: string }>(); | |
28 | 21 | return ( |
29 | 22 | <DrawerForm<{ |
30 | 23 | name: string; |
... | ... | @@ -39,8 +32,7 @@ export default ({ onClose }) => { |
39 | 32 | maxWidth: window.innerWidth * 0.8, |
40 | 33 | minWidth: 400, |
41 | 34 | }} |
42 | - // layout="horizontal" | |
43 | - // labelCol={{ span: 8 }} | |
35 | + initialValues={mainOrder} | |
44 | 36 | form={form} |
45 | 37 | autoFocusFirstInput |
46 | 38 | drawerProps={{ |
... | ... | @@ -53,7 +45,7 @@ export default ({ onClose }) => { |
53 | 45 | console.log(values.name); |
54 | 46 | message.success('提交成功'); |
55 | 47 | // 不返回不会关闭弹框 |
56 | - // onClose(); | |
48 | + onClose(); | |
57 | 49 | return true; |
58 | 50 | }} |
59 | 51 | onOpenChange={(val) => { |
... | ... | @@ -62,24 +54,27 @@ export default ({ onClose }) => { |
62 | 54 | > |
63 | 55 | <ProFormText |
64 | 56 | width="lg" |
65 | - name="invoiceInformation" | |
57 | + name="invoiceIdentificationNumber" | |
66 | 58 | label="开票信息" |
67 | 59 | placeholder="请输入开票信息" |
60 | + disabled | |
68 | 61 | /> |
69 | 62 | <ProFormText |
70 | 63 | width="lg" |
71 | 64 | name="bank" |
72 | 65 | label="开户银行" |
73 | 66 | placeholder="请输入开户银行" |
67 | + disabled | |
74 | 68 | /> |
75 | 69 | <ProFormText |
76 | 70 | width="lg" |
77 | 71 | name="bankAccountNumber" |
78 | 72 | label="开户银行账号" |
79 | 73 | placeholder="请输入开户银行账号" |
74 | + disabled | |
80 | 75 | /> |
81 | - <ProFormDatePicker width="lg" name="contractTime" label="开票时间" /> | |
82 | - <ProFormDatePicker width="lg" name="contractTime" label="收款时间" /> | |
76 | + <ProFormDatePicker width="lg" name="invoicingTime" label="开票时间" /> | |
77 | + <ProFormDatePicker width="lg" name="collectMoneyTime" label="收款时间" /> | |
83 | 78 | </DrawerForm> |
84 | 79 | ); |
85 | 80 | }; | ... | ... |
src/pages/Order/components/OrderDrawer.tsx
... | ... | @@ -2,8 +2,9 @@ import { RESPONSE_CODE } from '@/constants/enum'; |
2 | 2 | import { |
3 | 3 | postServiceOrderAddOrder, |
4 | 4 | postServiceOrderQueryProductInformation, |
5 | + postServiceOrderUpdateOrder, | |
5 | 6 | } from '@/services'; |
6 | -import { enumToSelect } from '@/utils'; | |
7 | +import { enumToSelect, getUserInfo } from '@/utils'; | |
7 | 8 | import { |
8 | 9 | DrawerForm, |
9 | 10 | FormListActionType, |
... | ... | @@ -16,7 +17,7 @@ import { |
16 | 17 | ProFormTextArea, |
17 | 18 | } from '@ant-design/pro-components'; |
18 | 19 | import { Form, message } from 'antd'; |
19 | -import { useEffect, useRef } from 'react'; | |
20 | +import { useEffect, useRef, useState } from 'react'; | |
20 | 21 | import { |
21 | 22 | INVOCING_STATUS_OPTIONS, |
22 | 23 | PAYMENT_CHANNEL_OPTIONS, |
... | ... | @@ -24,7 +25,17 @@ import { |
24 | 25 | PRODUCT_BELONG_DEPARTMENT_OPTIONS, |
25 | 26 | } from '../constant'; |
26 | 27 | |
27 | -export default ({ onClose, data }) => { | |
28 | +export default ({ onClose, data, isAdd }) => { | |
29 | + const [invoicingStatus, setInvoicingStatus] = useState(''); | |
30 | + | |
31 | + //订单修改和新增的子订单列表命名是list | |
32 | + data.list = data.subOrderInformationLists; | |
33 | + if (!isAdd) { | |
34 | + data.paymentMethod = data.list[0].paymentMethod; | |
35 | + data.paymentChannel = data.list[0].paymentChannel; | |
36 | + data.invoicingStatus = data.list[0].invoicingStatus; | |
37 | + } | |
38 | + | |
28 | 39 | const [form] = Form.useForm<{ |
29 | 40 | salesCode: ''; |
30 | 41 | customerName: ''; |
... | ... | @@ -89,46 +100,11 @@ export default ({ onClose, data }) => { |
89 | 100 | }> |
90 | 101 | open |
91 | 102 | width="35%" |
92 | - title="新建订单" | |
93 | - initialValues={{ | |
94 | - customerName: '123', | |
95 | - customerContactNumber: '123', | |
96 | - institution: '123', | |
97 | - institutionContactName: '123', | |
98 | - customerShippingAddress: '123123', | |
99 | - totalPayment: '12312', | |
100 | - paymentChannel: 'BANK_TRANSFER', | |
101 | - paymentMethod: 'PAYMENT_IN_ADVANCE', | |
102 | - productBelongBusiness: 'EXPERIMENTAL_CONSUMABLES', | |
103 | - invoicingStatus: 'INVOICED', | |
104 | - invoiceIdentificationNumber: '12312', | |
105 | - invoicingTime: '2023-11-29 23:19:15', | |
106 | - bank: '123', | |
107 | - bankAccountNumber: '1231', | |
108 | - notes: '123', | |
109 | - list: [ | |
110 | - { | |
111 | - productCode: 'qweq', | |
112 | - productName: 'qweqwe', | |
113 | - quantity: '99', | |
114 | - productPrice: '12313', | |
115 | - parameters: 'qweq', | |
116 | - subOrderPayment: '1231', | |
117 | - unit: 'qweq', | |
118 | - serialNumber: 'qwewqe', | |
119 | - notes: 'qweqw', | |
120 | - }, | |
121 | - { | |
122 | - productName: 'asdsda', | |
123 | - productCode: 'dasda', | |
124 | - parameters: 'sdasa', | |
125 | - quantity: '99', | |
126 | - productPrice: '123', | |
127 | - unit: '123', | |
128 | - subOrderPayment: '123', | |
129 | - serialNumber: 'adadas', | |
130 | - }, | |
131 | - ], | |
103 | + title={isAdd ? '新建订单' : '修改订单'} | |
104 | + initialValues={() => { | |
105 | + if (!isAdd) { | |
106 | + return data; | |
107 | + } | |
132 | 108 | }} |
133 | 109 | resize={{ |
134 | 110 | onResize() { |
... | ... | @@ -146,13 +122,21 @@ export default ({ onClose, data }) => { |
146 | 122 | }} |
147 | 123 | submitTimeout={2000} |
148 | 124 | onFinish={async (values) => { |
149 | - const data = await postServiceOrderAddOrder({ data: values }); | |
125 | + let data = {}; | |
126 | + if (isAdd) { | |
127 | + message.info('add'); | |
128 | + data = await postServiceOrderAddOrder({ data: values }); | |
129 | + } else { | |
130 | + message.info('update'); | |
131 | + data = await postServiceOrderUpdateOrder({ data: values }); | |
132 | + } | |
133 | + | |
150 | 134 | if (data.result === RESPONSE_CODE.SUCCESS) { |
151 | 135 | message.success(data.message); |
136 | + // 不返回不会关闭弹框 | |
137 | + onClose(); | |
138 | + return true; | |
152 | 139 | } |
153 | - // 不返回不会关闭弹框 | |
154 | - onClose(); | |
155 | - return true; | |
156 | 140 | }} |
157 | 141 | onOpenChange={(val) => { |
158 | 142 | return !val && onClose(); |
... | ... | @@ -160,12 +144,20 @@ export default ({ onClose, data }) => { |
160 | 144 | > |
161 | 145 | <h2>订单基本信息</h2> |
162 | 146 | <ProFormText |
147 | + name="id" | |
148 | + width="lg" | |
149 | + disabled | |
150 | + label="id" | |
151 | + placeholder="id" | |
152 | + hidden | |
153 | + /> | |
154 | + <ProFormText | |
163 | 155 | name="salesCode" |
164 | 156 | width="lg" |
165 | 157 | disabled |
166 | 158 | label="销售代表" |
167 | 159 | placeholder="请输入销售代表" |
168 | - initialValue="JOJO" | |
160 | + initialValue={getUserInfo().nickName} | |
169 | 161 | /> |
170 | 162 | <ProFormText |
171 | 163 | name="customerName" |
... | ... | @@ -220,33 +212,43 @@ export default ({ onClose, data }) => { |
220 | 212 | options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)} |
221 | 213 | /> |
222 | 214 | <ProFormSelect |
223 | - placeholder="选择是否要开票" | |
215 | + placeholder="选择是否需要开票" | |
224 | 216 | name="invoicingStatus" |
225 | 217 | width="lg" |
226 | - label="是否要开票" | |
218 | + label="是否需要开票" | |
227 | 219 | options={enumToSelect(INVOCING_STATUS_OPTIONS)} |
220 | + onChange={(_, option) => { | |
221 | + setInvoicingStatus(option.value); | |
222 | + }} | |
228 | 223 | /> |
229 | 224 | <ProFormText |
230 | 225 | width="lg" |
231 | 226 | name="invoiceIdentificationNumber" |
232 | 227 | label="开票信息" |
228 | + hidden={invoicingStatus !== 'INVOICED'} | |
233 | 229 | placeholder="请输入开票信息" |
234 | 230 | /> |
235 | - <ProFormDateTimePicker | |
236 | - width="lg" | |
237 | - name="invoicingTime" | |
238 | - label="开票时间" | |
239 | - placeholder="请输入开票时间" | |
240 | - /> | |
231 | + {getUserInfo().roleSmallVO?.code === 'admin' ? ( | |
232 | + <ProFormDateTimePicker | |
233 | + width="lg" | |
234 | + name="invoicingTime" | |
235 | + label="开票时间" | |
236 | + placeholder="请输入开票时间" | |
237 | + /> | |
238 | + ) : ( | |
239 | + '' | |
240 | + )} | |
241 | 241 | <ProFormText |
242 | 242 | width="lg" |
243 | 243 | name="bank" |
244 | 244 | label="开户银行" |
245 | + hidden={invoicingStatus !== 'INVOICED'} | |
245 | 246 | placeholder="请输入开户银行" |
246 | 247 | /> |
247 | 248 | <ProFormText |
248 | 249 | width="lg" |
249 | 250 | name="bankAccountNumber" |
251 | + hidden={invoicingStatus !== 'INVOICED'} | |
250 | 252 | label="银行账号" |
251 | 253 | placeholder="请输入银行账号" |
252 | 254 | /> | ... | ... |
src/pages/Order/constant.ts
... | ... | @@ -138,48 +138,70 @@ export const MAIN_ORDER_COLUMNS = [ |
138 | 138 | ]; |
139 | 139 | |
140 | 140 | export const SUB_ORDER_COLUMNS = [ |
141 | - { title: 'ID', dataIndex: 'id', key: 'id' }, | |
142 | - { title: '商品编码', dataIndex: 'productCode', key: 'productCode' }, | |
143 | - { title: '商品名称', dataIndex: 'productName', key: 'productName' }, | |
144 | - { title: '商品参数', dataIndex: 'parameters', key: 'parameters' }, | |
145 | - { title: '商品数量', dataIndex: 'quantity', key: 'quantity' }, | |
141 | + { title: 'ID', dataIndex: 'id', key: 'id', width: 80 }, | |
142 | + { | |
143 | + title: '商品编码', | |
144 | + dataIndex: 'productCode', | |
145 | + key: 'productCode', | |
146 | + width: 80, | |
147 | + }, | |
148 | + { | |
149 | + title: '商品名称', | |
150 | + dataIndex: 'productName', | |
151 | + key: 'productName', | |
152 | + width: 80, | |
153 | + }, | |
154 | + { title: '商品参数', dataIndex: 'parameters', key: 'parameters', width: 80 }, | |
155 | + { title: '商品数量', dataIndex: 'quantity', key: 'quantity', width: 80 }, | |
146 | 156 | { |
147 | 157 | title: '子订单金额(¥)', |
148 | 158 | dataIndex: 'subOrderPayment', |
149 | 159 | key: 'subOrderPayment', |
160 | + width: 80, | |
150 | 161 | }, |
151 | 162 | { |
152 | 163 | title: '支付方式', |
153 | 164 | dataIndex: 'paymentMethod', |
154 | 165 | key: 'paymentMethod', |
166 | + width: 80, | |
155 | 167 | }, |
156 | 168 | { |
157 | 169 | title: '支付渠道', |
158 | 170 | dataIndex: 'paymentChannel', |
159 | 171 | key: 'paymentChannel', |
172 | + width: 80, | |
160 | 173 | }, |
161 | 174 | { |
162 | 175 | title: '支付流水', |
163 | 176 | dataIndex: 'paymentTransactionId', |
164 | 177 | key: 'paymentTransactionId', |
178 | + width: 80, | |
165 | 179 | }, |
166 | 180 | { |
167 | 181 | title: '物流方式', |
168 | 182 | dataIndex: 'logisticsMethod', |
169 | 183 | key: 'logisticsMethod', |
184 | + width: 80, | |
185 | + }, | |
186 | + { | |
187 | + title: '物流单号', | |
188 | + dataIndex: 'serialNumber', | |
189 | + key: 'serialNumber', | |
190 | + width: 80, | |
170 | 191 | }, |
171 | - { title: '物流单号', dataIndex: 'serialNumber', key: 'serialNumber' }, | |
172 | 192 | { |
173 | 193 | title: '开票状态', |
174 | 194 | dataIndex: 'invoicingStatus', |
175 | 195 | key: 'invoicingStatus', |
176 | 196 | component: 'tag', |
197 | + width: 80, | |
177 | 198 | }, |
178 | 199 | { |
179 | 200 | title: '订单状态', |
180 | 201 | dataIndex: 'orderStatus', |
181 | 202 | key: 'orderStatus', |
182 | 203 | component: 'tag', |
204 | + width: 80, | |
183 | 205 | }, |
184 | 206 | ]; |
185 | 207 | |
... | ... | @@ -203,8 +225,8 @@ export const PRODUCT_BELONG_DEPARTMENT_OPTIONS = { |
203 | 225 | }; |
204 | 226 | |
205 | 227 | export const INVOCING_STATUS_OPTIONS = { |
206 | - UN_INVOICE: '未开票', | |
207 | - INVOICED: '已开票', | |
228 | + UN_INVOICE: '否', | |
229 | + INVOICED: '是', | |
208 | 230 | }; |
209 | 231 | |
210 | 232 | export const LOGISTICS_STATUS_OPTIONS = { | ... | ... |
src/pages/Order/index.tsx
1 | 1 | import ButtonConfirm from '@/components/ButtomConfirm'; |
2 | 2 | import { RESPONSE_CODE } from '@/constants/enum'; |
3 | 3 | import { |
4 | - postServiceOrderExport, | |
5 | 4 | postServiceOrderOrderCancel, |
6 | 5 | postServiceOrderPrintOrder, |
7 | 6 | postServiceOrderQueryServiceOrder, |
8 | 7 | } from '@/services'; |
9 | 8 | import { orderExport } from '@/services/order'; |
10 | 9 | import { enumValueToLabel } from '@/utils'; |
11 | -import { DownOutlined } from '@ant-design/icons'; | |
10 | +import { DownOutlined, EllipsisOutlined } from '@ant-design/icons'; | |
12 | 11 | import { |
13 | 12 | PageContainer, |
14 | 13 | ProColumns, |
15 | 14 | ProTable, |
16 | 15 | } from '@ant-design/pro-components'; |
16 | +import { history } from '@umijs/max'; | |
17 | 17 | import { |
18 | + Avatar, | |
18 | 19 | Button, |
19 | 20 | Checkbox, |
20 | 21 | Divider, |
... | ... | @@ -27,8 +28,11 @@ import { |
27 | 28 | } from 'antd'; |
28 | 29 | import { cloneDeep } from 'lodash'; |
29 | 30 | import { Key, useRef, useState } from 'react'; |
31 | +import OrderPrintModal from '../OrderPrint/OrderPrintModal'; | |
30 | 32 | import CheckModal from './components/CheckModal'; |
33 | +import ConfirmReceiptModal from './components/ConfirmReceiptModal'; | |
31 | 34 | import DeliverModal from './components/DeliverModal'; |
35 | +import FinancialDrawer from './components/FinancialDrawer'; | |
32 | 36 | import OrderDrawer from './components/OrderDrawer'; |
33 | 37 | import { |
34 | 38 | INVOCING_STATUS_OPTIONS, |
... | ... | @@ -45,11 +49,17 @@ import { OrderListItemType, OrderType } from './type.d'; |
45 | 49 | const OrderPage = () => { |
46 | 50 | const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false); |
47 | 51 | const [checkVisible, setCheckVisible] = useState<boolean>(false); |
52 | + const [orderPrintVisible, setOrderPrintVisible] = useState<boolean>(false); | |
53 | + const [financialVisible, setFinancialVisible] = useState<boolean>(false); | |
54 | + const [confirmReceiptVisible, setConfirmReceiptVisible] = | |
55 | + useState<boolean>(false); | |
48 | 56 | const [deliverVisible, setDeliverVisible] = useState<boolean>(false); |
57 | + const [isOrderAddOpt, setIsOrderAddOpt] = useState<boolean>(false); | |
49 | 58 | const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]); |
50 | 59 | const [orderRow, setOrderRow] = useState<Partial<OrderType>>({}); |
51 | 60 | const [mainOrderAllItemKeys, setMainOrderAllItemKeys] = useState([]); |
52 | 61 | const [rolePath, setRolePath] = useState([]); //当前角色权限(新增跟打印按钮) |
62 | + const userInfo = JSON.parse(localStorage.getItem('userInfo')); | |
53 | 63 | |
54 | 64 | const [selectedRows, setSelectedRows] = useState({}); |
55 | 65 | const [selectedRowObj, setSelectedRowObj] = useState({}); |
... | ... | @@ -68,7 +78,6 @@ const OrderPage = () => { |
68 | 78 | setExpandedRowKeys([]); |
69 | 79 | return; |
70 | 80 | } |
71 | - | |
72 | 81 | setExpandedRowKeys(mainOrderAllItemKeys); |
73 | 82 | }; |
74 | 83 | // 主订单内容渲染 |
... | ... | @@ -169,7 +178,12 @@ const OrderPage = () => { |
169 | 178 | className="p-0" |
170 | 179 | type="link" |
171 | 180 | onClick={() => { |
172 | - window.print(); | |
181 | + if (!selectedRowObj[record.id]?.length) { | |
182 | + return message.error('请选择选择子订单'); | |
183 | + } | |
184 | + setSelectedRows(selectedRowObj[record.id]); | |
185 | + setOrderRow(record); | |
186 | + setOrderPrintVisible(true); | |
173 | 187 | }} |
174 | 188 | > |
175 | 189 | 打印 |
... | ... | @@ -177,13 +191,21 @@ const OrderPage = () => { |
177 | 191 | ) : ( |
178 | 192 | '' |
179 | 193 | )} |
180 | - {record.mainPath.includes('confirmReceipt') ? ( | |
181 | - <ButtonConfirm | |
194 | + {record.mainPath.includes('editOrder') ? ( | |
195 | + <Button | |
196 | + type="link" | |
182 | 197 | className="p-0" |
183 | - title="确认开票?" | |
184 | - text="开票" | |
185 | - onConfirm={() => {}} | |
186 | - /> | |
198 | + onClick={() => { | |
199 | + let selectedSubOrders = selectedRowObj[record.id]; | |
200 | + setSelectedRows(selectedSubOrders); | |
201 | + if (selectedSubOrders === undefined) { | |
202 | + setSelectedRows(record.subOrderInformationLists); | |
203 | + } | |
204 | + setFinancialVisible(true); | |
205 | + }} | |
206 | + > | |
207 | + 开票 | |
208 | + </Button> | |
187 | 209 | ) : ( |
188 | 210 | '' |
189 | 211 | )} |
... | ... | @@ -194,6 +216,7 @@ const OrderPage = () => { |
194 | 216 | onClick={() => { |
195 | 217 | setOrderDrawerVisible(true); |
196 | 218 | setOrderRow(record); |
219 | + setIsOrderAddOpt(false); | |
197 | 220 | }} |
198 | 221 | > |
199 | 222 | 编辑 |
... | ... | @@ -201,6 +224,7 @@ const OrderPage = () => { |
201 | 224 | ) : ( |
202 | 225 | '' |
203 | 226 | )} |
227 | + | |
204 | 228 | {record.mainPath.includes('checkOrder') ? ( |
205 | 229 | <Button |
206 | 230 | className="p-0" |
... | ... | @@ -290,10 +314,8 @@ const OrderPage = () => { |
290 | 314 | return <Tag color={color}>{label}</Tag>; |
291 | 315 | }, |
292 | 316 | }; |
293 | - } | |
294 | - | |
295 | - //枚举字段处理 | |
296 | - if ( | |
317 | + } else if ( | |
318 | + //枚举字段处理 | |
297 | 319 | item.key === 'paymentMethod' || |
298 | 320 | item.key === 'paymentChannel' || |
299 | 321 | item.key === 'logisticsMethod' |
... | ... | @@ -311,8 +333,22 @@ const OrderPage = () => { |
311 | 333 | return label; |
312 | 334 | }, |
313 | 335 | }; |
336 | + } else { | |
337 | + //普通字段,超出长度自动换行 | |
338 | + return { | |
339 | + ...item, | |
340 | + render: (text: string) => { | |
341 | + return ( | |
342 | + <div | |
343 | + style={{ wordWrap: 'break-word', wordBreak: 'break-all' }} | |
344 | + > | |
345 | + {text} | |
346 | + </div> | |
347 | + ); | |
348 | + }, | |
349 | + }; | |
314 | 350 | } |
315 | - return item; | |
351 | + // return item; | |
316 | 352 | }) |
317 | 353 | .concat([ |
318 | 354 | { |
... | ... | @@ -359,26 +395,32 @@ const OrderPage = () => { |
359 | 395 | ) : ( |
360 | 396 | '' |
361 | 397 | )} |
362 | - {optRecord.subPath.includes('confirmReceipt') ? ( | |
363 | - <ButtonConfirm | |
398 | + {optRecord.subPath.includes('editOrder') ? ( | |
399 | + <Button | |
364 | 400 | className="p-0" |
365 | - title="确认开票?" | |
366 | - text="开票" | |
367 | - onConfirm={() => {}} | |
368 | - /> | |
401 | + type="link" | |
402 | + onClick={() => { | |
403 | + setFinancialVisible(true); | |
404 | + setOrderRow(record); | |
405 | + setSelectedRows(selectedRowObj[record.id]); | |
406 | + }} | |
407 | + > | |
408 | + 编辑 | |
409 | + </Button> | |
369 | 410 | ) : ( |
370 | 411 | '' |
371 | 412 | )} |
372 | - {optRecord.subPath.includes('updateOrder') ? ( | |
413 | + {optRecord.subPath.includes('invocing') ? ( | |
373 | 414 | <Button |
374 | 415 | className="p-0" |
375 | 416 | type="link" |
376 | 417 | onClick={() => { |
377 | - setOrderDrawerVisible(true); | |
378 | - setOrderRow(optRecord); | |
418 | + setFinancialVisible(true); | |
419 | + setOrderRow(record); | |
420 | + setSelectedRows(selectedRowObj[record.id]); | |
379 | 421 | }} |
380 | 422 | > |
381 | - 编辑 | |
423 | + 开票 | |
382 | 424 | </Button> |
383 | 425 | ) : ( |
384 | 426 | '' |
... | ... | @@ -398,6 +440,21 @@ const OrderPage = () => { |
398 | 440 | '' |
399 | 441 | )} |
400 | 442 | |
443 | + {optRecord.subPath.includes('confirmReceipt') ? ( | |
444 | + <Button | |
445 | + className="p-0" | |
446 | + type="link" | |
447 | + onClick={() => { | |
448 | + setConfirmReceiptVisible(true); | |
449 | + setOrderRow(optRecord); | |
450 | + }} | |
451 | + > | |
452 | + 确认收货 | |
453 | + </Button> | |
454 | + ) : ( | |
455 | + '' | |
456 | + )} | |
457 | + | |
401 | 458 | {/* {optRecord.subPath.includes("OrderCancel") ? |
402 | 459 | <ButtonConfirm |
403 | 460 | className="p-0" |
... | ... | @@ -474,24 +531,28 @@ const OrderPage = () => { |
474 | 531 | message.error('当前没有订单'); |
475 | 532 | return; |
476 | 533 | } |
477 | - const data = await postServiceOrderExport({ | |
478 | - data: { flag: true, ids: mainOrderAllItemKeys }, | |
479 | - }); | |
480 | - if (data.result === RESPONSE_CODE.SUCCESS) { | |
481 | - message.success(data.message); | |
482 | - } | |
534 | + // const data = await postServiceOrderExport({ | |
535 | + // data: { flag: true, ids: mainOrderAllItemKeys }, | |
536 | + // }); | |
537 | + // if (data.result === RESPONSE_CODE.SUCCESS) { | |
538 | + // message.success(data.message); | |
539 | + // } | |
540 | + let body = { flag: true, ids: mainOrderAllItemKeys }; | |
541 | + orderExport(body); | |
483 | 542 | }, |
484 | 543 | }, |
485 | 544 | { |
486 | 545 | label: '导出所有订单', |
487 | 546 | key: '3', |
488 | 547 | onClick: async () => { |
489 | - const data = await postServiceOrderExport({ | |
490 | - data: { flag: false, ids: [] }, | |
491 | - }); | |
492 | - if (data.result === RESPONSE_CODE.SUCCESS) { | |
493 | - message.success(data.message); | |
494 | - } | |
548 | + // const data = await postServiceOrderExport({ | |
549 | + // data: { flag: false, ids: [] }, | |
550 | + // }); | |
551 | + // if (data.result === RESPONSE_CODE.SUCCESS) { | |
552 | + // message.success(data.message); | |
553 | + // } | |
554 | + let body = { flag: false, ids: [] }; | |
555 | + orderExport(body); | |
495 | 556 | }, |
496 | 557 | }, |
497 | 558 | ]; |
... | ... | @@ -506,7 +567,10 @@ const OrderPage = () => { |
506 | 567 | <Button |
507 | 568 | type="primary" |
508 | 569 | key="out" |
509 | - onClick={() => setOrderDrawerVisible(true)} | |
570 | + onClick={() => { | |
571 | + setOrderDrawerVisible(true); | |
572 | + setIsOrderAddOpt(true); | |
573 | + }} | |
510 | 574 | > |
511 | 575 | 新增 |
512 | 576 | </Button>, |
... | ... | @@ -544,6 +608,35 @@ const OrderPage = () => { |
544 | 608 | <PageContainer |
545 | 609 | header={{ |
546 | 610 | title: '订单管理', |
611 | + extra: [ | |
612 | + <Avatar key="0" style={{ verticalAlign: 'middle' }} size="large"> | |
613 | + {userInfo?.nickName} | |
614 | + </Avatar>, | |
615 | + <Dropdown | |
616 | + key="dropdown" | |
617 | + trigger={['click']} | |
618 | + menu={{ | |
619 | + items: [ | |
620 | + { | |
621 | + label: '退出登录', | |
622 | + key: '1', | |
623 | + onClick: () => { | |
624 | + localStorage.removeItem('token'); | |
625 | + history.push('/login'); | |
626 | + }, | |
627 | + }, | |
628 | + { | |
629 | + label: '修改密码', | |
630 | + key: '2', | |
631 | + }, | |
632 | + ], | |
633 | + }} | |
634 | + > | |
635 | + <Button key="4" style={{ padding: '0 8px' }}> | |
636 | + <EllipsisOutlined /> | |
637 | + </Button> | |
638 | + </Dropdown>, | |
639 | + ], | |
547 | 640 | }} |
548 | 641 | > |
549 | 642 | <ProTable |
... | ... | @@ -578,6 +671,7 @@ const OrderPage = () => { |
578 | 671 | filter, |
579 | 672 | data: params, |
580 | 673 | }); |
674 | + | |
581 | 675 | let mainOrderIds = data?.data?.map((d) => d.id); |
582 | 676 | if (mainOrderAllItemKeys === undefined) { |
583 | 677 | setMainOrderAllItemKeys([]); |
... | ... | @@ -603,6 +697,7 @@ const OrderPage = () => { |
603 | 697 | setOrderRow({}); |
604 | 698 | mainTableRef.current?.reload(); |
605 | 699 | }} |
700 | + isAdd={isOrderAddOpt} | |
606 | 701 | /> |
607 | 702 | )} |
608 | 703 | |
... | ... | @@ -628,6 +723,41 @@ const OrderPage = () => { |
628 | 723 | }} |
629 | 724 | /> |
630 | 725 | )} |
726 | + | |
727 | + {financialVisible && ( | |
728 | + <FinancialDrawer | |
729 | + mainOrder={orderRow} | |
730 | + subOrders={selectedRows} | |
731 | + onClose={() => { | |
732 | + setFinancialVisible(false); | |
733 | + setOrderRow({}); | |
734 | + mainTableRef.current?.reload(); | |
735 | + }} | |
736 | + /> | |
737 | + )} | |
738 | + | |
739 | + {orderPrintVisible && ( | |
740 | + <OrderPrintModal | |
741 | + mainOrder={orderRow} | |
742 | + subOrders={selectedRows} | |
743 | + onClose={() => { | |
744 | + setOrderPrintVisible(false); | |
745 | + setOrderRow({}); | |
746 | + mainTableRef.current?.reload(); | |
747 | + }} | |
748 | + /> | |
749 | + )} | |
750 | + | |
751 | + {confirmReceiptVisible && ( | |
752 | + <ConfirmReceiptModal | |
753 | + data={orderRow} | |
754 | + onClose={() => { | |
755 | + setConfirmReceiptVisible(false); | |
756 | + setOrderRow({}); | |
757 | + mainTableRef.current?.reload(); | |
758 | + }} | |
759 | + /> | |
760 | + )} | |
631 | 761 | </PageContainer> |
632 | 762 | ); |
633 | 763 | }; | ... | ... |
src/pages/OrderPrint/OrderPrintModal.tsx
0 → 100644
1 | +import '@/pages/OrderPrint/index.less'; | |
2 | +import { Modal } from 'antd'; | |
3 | +import printJS from 'print-js'; | |
4 | + | |
5 | +export default ({ mainOrder, subOrders, onClose }) => { | |
6 | + console.log(mainOrder); | |
7 | + console.log(subOrders); | |
8 | + | |
9 | + let columns = []; | |
10 | + for (let i = 0; i < subOrders.length; i++) { | |
11 | + let subOrder = subOrders[i]; | |
12 | + columns.push( | |
13 | + <tr height="30" style={{ height: '15.00pt' }}> | |
14 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
15 | + <td className="xl72">{i + 1}</td> | |
16 | + <td className="xl72">{subOrder.id}</td> | |
17 | + <td className="xl72">{subOrder.productName}</td> | |
18 | + <td className="xl72">{subOrder.parameters}</td> | |
19 | + <td className="xl72">{subOrder.unit}</td> | |
20 | + <td className="xl72">{subOrder.quantity}</td> | |
21 | + <td className="xl72">{subOrder.notes}</td> | |
22 | + </tr>, | |
23 | + ); | |
24 | + } | |
25 | + | |
26 | + //补充空白行,使表格不少于六行 | |
27 | + for (let i = subOrders.length; i < 6; i++) { | |
28 | + columns.push( | |
29 | + <tr height="30" style={{ height: '15.00pt' }}> | |
30 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
31 | + <td className="xl72"></td> | |
32 | + <td className="xl72"></td> | |
33 | + <td className="xl72"></td> | |
34 | + <td className="xl72"></td> | |
35 | + <td className="xl72"></td> | |
36 | + <td className="xl72"></td> | |
37 | + <td className="xl72"></td> | |
38 | + </tr>, | |
39 | + ); | |
40 | + } | |
41 | + | |
42 | + return ( | |
43 | + <Modal | |
44 | + title="打印出货单" | |
45 | + centered | |
46 | + open | |
47 | + onOk={() => { | |
48 | + //printJS打印出货单 | |
49 | + printJS({ | |
50 | + printable: 'printArea', // 元素id,不支持多个 | |
51 | + type: 'html', | |
52 | + targetStyle: ['* '], | |
53 | + targetStyles: ['*'], | |
54 | + style: | |
55 | + '@page{size:auto; margin: 0;}' + | |
56 | + '@media print { @page {size: landscape } }', // landscape 默认横向打印 | |
57 | + }); | |
58 | + | |
59 | + onClose(); | |
60 | + }} | |
61 | + onCancel={() => onClose()} | |
62 | + width={1000} | |
63 | + > | |
64 | + <div | |
65 | + id="printArea" | |
66 | + className="flex items-center justify-center bg-gray-100" | |
67 | + > | |
68 | + <div className="w-full max-w-4xl p-10 my-10 bg-white border border-gray-300"> | |
69 | + <table | |
70 | + className="p-10" | |
71 | + width="846" | |
72 | + border={0} | |
73 | + cellPadding={0} | |
74 | + cellSpacing={0} | |
75 | + style={{ | |
76 | + width: '423.00pt', | |
77 | + borderCollapse: 'collapse', | |
78 | + tableLayout: 'fixed', | |
79 | + }} | |
80 | + > | |
81 | + <col | |
82 | + width="25.50" | |
83 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 544 }} | |
84 | + /> | |
85 | + <col | |
86 | + width="52.50" | |
87 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 1120 }} | |
88 | + /> | |
89 | + <col | |
90 | + width="115.50" | |
91 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 2464 }} | |
92 | + /> | |
93 | + <col | |
94 | + width="169.50" | |
95 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 3616 }} | |
96 | + /> | |
97 | + <col | |
98 | + width="165" | |
99 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 3520 }} | |
100 | + /> | |
101 | + <col | |
102 | + width="96" | |
103 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 2048 }} | |
104 | + /> | |
105 | + <col | |
106 | + width="114" | |
107 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 2432 }} | |
108 | + /> | |
109 | + <col width="108" style={{ width: '54.00pt' }} /> | |
110 | + <tr height="42" style={{ height: '21.00pt' }}> | |
111 | + <td height="42" style={{ height: '21.00pt' }}></td> | |
112 | + <td | |
113 | + className="xl65" | |
114 | + colSpan="7" | |
115 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
116 | + > | |
117 | + 科 路 得 | |
118 | + </td> | |
119 | + </tr> | |
120 | + <tr height="30" style={{ height: '15.00pt' }}> | |
121 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
122 | + <td | |
123 | + className="xl66" | |
124 | + colSpan="7" | |
125 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
126 | + > | |
127 | + 网址:www.canrd.com | |
128 | + </td> | |
129 | + </tr> | |
130 | + <tr height="35" style={{ height: '17.50pt' }}> | |
131 | + <td height="35" style={{ height: '17.50pt' }}></td> | |
132 | + <td | |
133 | + className="xl67" | |
134 | + colSpan="7" | |
135 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
136 | + > | |
137 | + 销售出货单 | |
138 | + </td> | |
139 | + </tr> | |
140 | + <tr height="30" style={{ height: '15.00pt' }}> | |
141 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
142 | + <td | |
143 | + className="xl69" | |
144 | + colSpan="4" | |
145 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
146 | + > | |
147 | + 单位名称:{mainOrder.institution} | |
148 | + </td> | |
149 | + <td | |
150 | + className="xl69" | |
151 | + colSpan="3" | |
152 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
153 | + > | |
154 | + 单号:{mainOrder.id} | |
155 | + </td> | |
156 | + </tr> | |
157 | + <tr height="30" style={{ height: '15.00pt' }}> | |
158 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
159 | + <td | |
160 | + className="xl69" | |
161 | + colSpan="4" | |
162 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
163 | + > | |
164 | + 联系人:{mainOrder.customerName} | |
165 | + </td> | |
166 | + <td | |
167 | + className="xl69" | |
168 | + colSpan="3" | |
169 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
170 | + > | |
171 | + 开单日期:{mainOrder.createTime} | |
172 | + </td> | |
173 | + </tr> | |
174 | + <tr height="30" style={{ height: '15.00pt' }}> | |
175 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
176 | + <td | |
177 | + className="xl69" | |
178 | + colSpan="4" | |
179 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
180 | + > | |
181 | + 联系电话:{mainOrder.customerContactNumber} | |
182 | + </td> | |
183 | + <td | |
184 | + className="xl70" | |
185 | + colSpan={2} | |
186 | + style={{ msoIgnore: 'colSpan' }} | |
187 | + ></td> | |
188 | + <td className="xl70"></td> | |
189 | + </tr> | |
190 | + <tr height="30" style={{ height: '15.00pt' }}> | |
191 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
192 | + <td | |
193 | + className="xl69" | |
194 | + colSpan="7" | |
195 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
196 | + > | |
197 | + 送货地址:{mainOrder.customerShippingAddress} | |
198 | + </td> | |
199 | + </tr> | |
200 | + <tr height="30" style={{ height: '15.00pt' }}> | |
201 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
202 | + <td className="xl71">序号</td> | |
203 | + <td className="xl71">订单号</td> | |
204 | + <td className="xl71">货品名称</td> | |
205 | + <td className="xl71">规格</td> | |
206 | + <td className="xl71">单位</td> | |
207 | + <td className="xl71">数量</td> | |
208 | + <td className="xl71">备注</td> | |
209 | + </tr> | |
210 | + | |
211 | + {columns} | |
212 | + | |
213 | + <tr style={{ height: '19.00pt' }}> | |
214 | + <td style={{ height: '19.00pt' }}></td> | |
215 | + <td className="xl73">销货单位</td> | |
216 | + <td | |
217 | + className="xl74" | |
218 | + colSpan="3" | |
219 | + style={{ | |
220 | + borderRight: '0.5pt solid windowtext', | |
221 | + borderBottom: '0.5pt solid windowtext', | |
222 | + }} | |
223 | + > | |
224 | + 发货地址:广东省东莞市厚街镇锦丰路9号科路得产业园 | |
225 | + </td> | |
226 | + <td className="xl73">开户银行及账号</td> | |
227 | + <td | |
228 | + className="xl74" | |
229 | + colSpan={2} | |
230 | + style={{ | |
231 | + borderRight: '0.5pt solid windowtext', | |
232 | + borderBottom: '0.5pt solid windowtext', | |
233 | + }} | |
234 | + > | |
235 | + 招商银行股份有限公司东莞东骏路支行 | |
236 | + <br /> | |
237 | + 账号:769906437110802 | |
238 | + </td> | |
239 | + </tr> | |
240 | + <tr style={{ height: 30 }}> | |
241 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
242 | + <td className="xl76" colSpan={2} style={{ msoIgnore: 'colSpan' }}> | |
243 | + 客户签名: | |
244 | + </td> | |
245 | + <td className="xl76">核准:屠亚辉</td> | |
246 | + <td | |
247 | + className="xl78" | |
248 | + colSpan={2} | |
249 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
250 | + > | |
251 | + 业务员:Peter | |
252 | + </td> | |
253 | + <td | |
254 | + className="xl78" | |
255 | + colSpan={2} | |
256 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
257 | + > | |
258 | + 开单人:张玉红 | |
259 | + </td> | |
260 | + </tr> | |
261 | + <tr style={{ display: 'none', width: 0 }}> | |
262 | + <td width="26" style={{ width: 13 }}></td> | |
263 | + <td width="53" style={{ width: 26 }}></td> | |
264 | + <td width="116" style={{ width: 58 }}></td> | |
265 | + <td width="170" style={{ width: 85 }}></td> | |
266 | + <td width="165" style={{ width: 83 }}></td> | |
267 | + <td width="96" style={{ width: 48 }}></td> | |
268 | + <td width="114" style={{ width: 57 }}></td> | |
269 | + </tr> | |
270 | + </table> | |
271 | + </div> | |
272 | + </div> | |
273 | + </Modal> | |
274 | + ); | |
275 | +}; | ... | ... |
src/pages/OrderPrint/index.less
0 → 100644
1 | +tr { | |
2 | + // mso-height-source: auto; | |
3 | + // mso-ruby-visibility: none; | |
4 | +} | |
5 | + | |
6 | +col { | |
7 | + // mso-width-source: auto; | |
8 | + // mso-ruby-visibility: none; | |
9 | +} | |
10 | + | |
11 | +br { | |
12 | + // mso-data-placement: same-cell; | |
13 | +} | |
14 | + | |
15 | +.font0 { | |
16 | + color: windowtext; | |
17 | + font-size: 12pt; | |
18 | + font-weight: 400; | |
19 | + font-style: normal; | |
20 | + text-decoration: none; | |
21 | + font-family: '宋体'; | |
22 | + // //mso-generic-font-family: auto; | |
23 | + // //mso-font-charset: 134; | |
24 | +} | |
25 | + | |
26 | +.font1 { | |
27 | + color: windowtext; | |
28 | + font-size: 16pt; | |
29 | + font-weight: 400; | |
30 | + font-style: normal; | |
31 | + text-decoration: none; | |
32 | + font-family: '宋体'; | |
33 | + // //mso-generic-font-family: auto; | |
34 | + // mso-font-charset: 134; | |
35 | +} | |
36 | + | |
37 | +.font2 { | |
38 | + color: windowtext; | |
39 | + font-size: 10pt; | |
40 | + font-weight: 400; | |
41 | + font-style: normal; | |
42 | + text-decoration: none; | |
43 | + font-family: '宋体'; | |
44 | + ////mso-generic-font-family: auto; | |
45 | + //mso-font-charset: 134; | |
46 | +} | |
47 | + | |
48 | +.font3 { | |
49 | + color: windowtext; | |
50 | + font-size: 14pt; | |
51 | + font-weight: 400; | |
52 | + font-style: normal; | |
53 | + text-decoration: none; | |
54 | + font-family: '宋体'; | |
55 | + ////mso-generic-font-family: auto; | |
56 | + //mso-font-charset: 134; | |
57 | +} | |
58 | + | |
59 | +.font4 { | |
60 | + color: windowtext; | |
61 | + font-size: 8pt; | |
62 | + font-weight: 400; | |
63 | + font-style: normal; | |
64 | + text-decoration: none; | |
65 | + font-family: '宋体'; | |
66 | + ////mso-generic-font-family: auto; | |
67 | + //mso-font-charset: 134; | |
68 | +} | |
69 | + | |
70 | +.font5 { | |
71 | + color: #00f; | |
72 | + font-size: 11pt; | |
73 | + font-weight: 400; | |
74 | + font-style: normal; | |
75 | + text-decoration: underline; | |
76 | + //text-underline-style: single; | |
77 | + font-family: '宋体'; | |
78 | + ////mso-generic-font-family: auto; | |
79 | + //mso-font-charset: 134; | |
80 | +} | |
81 | + | |
82 | +.font6 { | |
83 | + color: #800080; | |
84 | + font-size: 11pt; | |
85 | + font-weight: 400; | |
86 | + font-style: normal; | |
87 | + text-decoration: underline; | |
88 | + //text-underline-style: single; | |
89 | + font-family: '宋体'; | |
90 | + ////mso-generic-font-family: auto; | |
91 | + //mso-font-charset: 134; | |
92 | +} | |
93 | + | |
94 | +.font7 { | |
95 | + color: #000; | |
96 | + font-size: 11pt; | |
97 | + font-weight: 400; | |
98 | + font-style: normal; | |
99 | + text-decoration: none; | |
100 | + font-family: '宋体'; | |
101 | + ////mso-generic-font-family: auto; | |
102 | + //mso-font-charset: 134; | |
103 | +} | |
104 | + | |
105 | +.font8 { | |
106 | + color: #f00; | |
107 | + font-size: 11pt; | |
108 | + font-weight: 400; | |
109 | + font-style: normal; | |
110 | + text-decoration: none; | |
111 | + font-family: '宋体'; | |
112 | + ////mso-generic-font-family: auto; | |
113 | + //mso-font-charset: 134; | |
114 | +} | |
115 | + | |
116 | +.font9 { | |
117 | + color: #44546a; | |
118 | + font-size: 18pt; | |
119 | + font-weight: 700; | |
120 | + font-style: normal; | |
121 | + text-decoration: none; | |
122 | + font-family: '宋体'; | |
123 | + ////mso-generic-font-family: auto; | |
124 | + //mso-font-charset: 134; | |
125 | +} | |
126 | + | |
127 | +.font10 { | |
128 | + color: #7f7f7f; | |
129 | + font-size: 11pt; | |
130 | + font-weight: 400; | |
131 | + font-style: italic; | |
132 | + text-decoration: none; | |
133 | + font-family: '宋体'; | |
134 | + ////mso-generic-font-family: auto; | |
135 | + //mso-font-charset: 134; | |
136 | +} | |
137 | + | |
138 | +.font11 { | |
139 | + color: #44546a; | |
140 | + font-size: 15pt; | |
141 | + font-weight: 700; | |
142 | + font-style: normal; | |
143 | + text-decoration: none; | |
144 | + font-family: '宋体'; | |
145 | + ////mso-generic-font-family: auto; | |
146 | + //mso-font-charset: 134; | |
147 | +} | |
148 | + | |
149 | +.font12 { | |
150 | + color: #44546a; | |
151 | + font-size: 13pt; | |
152 | + font-weight: 700; | |
153 | + font-style: normal; | |
154 | + text-decoration: none; | |
155 | + font-family: '宋体'; | |
156 | + ////mso-generic-font-family: auto; | |
157 | + //mso-font-charset: 134; | |
158 | +} | |
159 | + | |
160 | +.font13 { | |
161 | + color: #44546a; | |
162 | + font-size: 11pt; | |
163 | + font-weight: 700; | |
164 | + font-style: normal; | |
165 | + text-decoration: none; | |
166 | + font-family: '宋体'; | |
167 | + ////mso-generic-font-family: auto; | |
168 | + //mso-font-charset: 134; | |
169 | +} | |
170 | + | |
171 | +.font14 { | |
172 | + color: #3f3f76; | |
173 | + font-size: 11pt; | |
174 | + font-weight: 400; | |
175 | + font-style: normal; | |
176 | + text-decoration: none; | |
177 | + font-family: '宋体'; | |
178 | + ////mso-generic-font-family: auto; | |
179 | + //mso-font-charset: 134; | |
180 | +} | |
181 | + | |
182 | +.font15 { | |
183 | + color: #3f3f3f; | |
184 | + font-size: 11pt; | |
185 | + font-weight: 700; | |
186 | + font-style: normal; | |
187 | + text-decoration: none; | |
188 | + font-family: '宋体'; | |
189 | + ////mso-generic-font-family: auto; | |
190 | + //mso-font-charset: 134; | |
191 | +} | |
192 | + | |
193 | +.font16 { | |
194 | + color: #fa7d00; | |
195 | + font-size: 11pt; | |
196 | + font-weight: 700; | |
197 | + font-style: normal; | |
198 | + text-decoration: none; | |
199 | + font-family: '宋体'; | |
200 | + ////mso-generic-font-family: auto; | |
201 | + //mso-font-charset: 134; | |
202 | +} | |
203 | + | |
204 | +.font17 { | |
205 | + color: #fff; | |
206 | + font-size: 11pt; | |
207 | + font-weight: 700; | |
208 | + font-style: normal; | |
209 | + text-decoration: none; | |
210 | + font-family: '宋体'; | |
211 | + ////mso-generic-font-family: auto; | |
212 | + //mso-font-charset: 134; | |
213 | +} | |
214 | + | |
215 | +.font18 { | |
216 | + color: #fa7d00; | |
217 | + font-size: 11pt; | |
218 | + font-weight: 400; | |
219 | + font-style: normal; | |
220 | + text-decoration: none; | |
221 | + font-family: '宋体'; | |
222 | + ////mso-generic-font-family: auto; | |
223 | + //mso-font-charset: 134; | |
224 | +} | |
225 | + | |
226 | +.font19 { | |
227 | + color: #000; | |
228 | + font-size: 11pt; | |
229 | + font-weight: 700; | |
230 | + font-style: normal; | |
231 | + text-decoration: none; | |
232 | + font-family: '宋体'; | |
233 | + ////mso-generic-font-family: auto; | |
234 | + //mso-font-charset: 134; | |
235 | +} | |
236 | + | |
237 | +.font20 { | |
238 | + color: #006100; | |
239 | + font-size: 11pt; | |
240 | + font-weight: 400; | |
241 | + font-style: normal; | |
242 | + text-decoration: none; | |
243 | + font-family: '宋体'; | |
244 | + ////mso-generic-font-family: auto; | |
245 | + //mso-font-charset: 134; | |
246 | +} | |
247 | + | |
248 | +.font21 { | |
249 | + color: #9c0006; | |
250 | + font-size: 11pt; | |
251 | + font-weight: 400; | |
252 | + font-style: normal; | |
253 | + text-decoration: none; | |
254 | + font-family: '宋体'; | |
255 | + ////mso-generic-font-family: auto; | |
256 | + //mso-font-charset: 134; | |
257 | +} | |
258 | + | |
259 | +.font22 { | |
260 | + color: #9c6500; | |
261 | + font-size: 11pt; | |
262 | + font-weight: 400; | |
263 | + font-style: normal; | |
264 | + text-decoration: none; | |
265 | + font-family: '宋体'; | |
266 | + ////mso-generic-font-family: auto; | |
267 | + //mso-font-charset: 134; | |
268 | +} | |
269 | + | |
270 | +.font23 { | |
271 | + color: #fff; | |
272 | + font-size: 11pt; | |
273 | + font-weight: 400; | |
274 | + font-style: normal; | |
275 | + text-decoration: none; | |
276 | + font-family: '宋体'; | |
277 | + ////mso-generic-font-family: auto; | |
278 | + //mso-font-charset: 134; | |
279 | +} | |
280 | + | |
281 | +.font24 { | |
282 | + color: #000; | |
283 | + font-size: 11pt; | |
284 | + font-weight: 400; | |
285 | + font-style: normal; | |
286 | + text-decoration: none; | |
287 | + font-family: '宋体'; | |
288 | + ////mso-generic-font-family: auto; | |
289 | + //mso-font-charset: 134; | |
290 | +} | |
291 | + | |
292 | +.style0 { | |
293 | + //mso-number-format: "General"; | |
294 | + text-align: general; | |
295 | + vertical-align: middle; | |
296 | + white-space: nowrap; | |
297 | + // mso-rotate: 0; | |
298 | + // //mso-pattern: auto; | |
299 | + // mso-background-source: auto; | |
300 | + color: windowtext; | |
301 | + font-size: 12pt; | |
302 | + font-weight: 400; | |
303 | + font-style: normal; | |
304 | + text-decoration: none; | |
305 | + font-family: '宋体'; | |
306 | + ////mso-generic-font-family: auto; | |
307 | + //mso-font-charset: 134; | |
308 | + border: none; | |
309 | + //mso-protection: locked visible; | |
310 | + // mso-style-name: "常规"; | |
311 | + // mso-style-id: 0; | |
312 | +} | |
313 | + | |
314 | +.style16 { | |
315 | + // mso-number-format: "_ * \#\,\#\#0\.00_ \;_ * \\-\#\,\#\#0\.00_ \;_ * \0022-\0022??_ \;_ \@_ "; | |
316 | + // mso-style-name: "千位分隔"; | |
317 | + // mso-style-id: 3; | |
318 | +} | |
319 | + | |
320 | +.style17 { | |
321 | + // mso-number-format: "_ \0022\00A5\0022* \#\,\#\#0\.00_ \;_ \0022\00A5\0022* \\-\#\,\#\#0\.00_ \;_ \0022\00A5\0022* \0022-\0022??_ \;_ \@_ "; | |
322 | + // mso-style-name: "货币"; | |
323 | + // mso-style-id: 4; | |
324 | +} | |
325 | + | |
326 | +.style18 { | |
327 | + // mso-number-format: "0%"; | |
328 | + // mso-style-name: "百分比"; | |
329 | + // mso-style-id: 5; | |
330 | +} | |
331 | + | |
332 | +.style19 { | |
333 | + // mso-number-format: "_ * \#\,\#\#0_ \;_ * \\-\#\,\#\#0_ \;_ * \0022-\0022_ \;_ \@_ "; | |
334 | + // mso-style-name: "千位分隔[0]"; | |
335 | + // mso-style-id: 6; | |
336 | +} | |
337 | + | |
338 | +.style20 { | |
339 | + // mso-number-format: "_ \0022\00A5\0022* \#\,\#\#0_ \;_ \0022\00A5\0022* \\-\#\,\#\#0_ \;_ \0022\00A5\0022* \0022-\0022_ \;_ \@_ "; | |
340 | + // mso-style-name: "货币[0]"; | |
341 | + // mso-style-id: 7; | |
342 | +} | |
343 | + | |
344 | +.style21 { | |
345 | + color: #00f; | |
346 | + font-size: 11pt; | |
347 | + font-weight: 400; | |
348 | + font-style: normal; | |
349 | + text-decoration: underline; | |
350 | + //text-underline-style: single; | |
351 | + font-family: '宋体'; | |
352 | + ////mso-generic-font-family: auto; | |
353 | + //mso-font-charset: 134; | |
354 | + // mso-style-name: "超链接"; | |
355 | + // mso-style-id: 8; | |
356 | +} | |
357 | + | |
358 | +.style22 { | |
359 | + color: #800080; | |
360 | + font-size: 11pt; | |
361 | + font-weight: 400; | |
362 | + font-style: normal; | |
363 | + text-decoration: underline; | |
364 | + //text-underline-style: single; | |
365 | + font-family: '宋体'; | |
366 | + ////mso-generic-font-family: auto; | |
367 | + //mso-font-charset: 134; | |
368 | + // mso-style-name: "已访问的超链接"; | |
369 | + // mso-style-id: 9; | |
370 | +} | |
371 | + | |
372 | +.style23 { | |
373 | + // //mso-pattern: auto none; | |
374 | + background: #ffc; | |
375 | + border: 0.5pt solid #b2b2b2; | |
376 | + // mso-style-name: "注释"; | |
377 | +} | |
378 | + | |
379 | +.style24 { | |
380 | + color: #f00; | |
381 | + font-size: 11pt; | |
382 | + font-weight: 400; | |
383 | + font-style: normal; | |
384 | + text-decoration: none; | |
385 | + font-family: '宋体'; | |
386 | + ////mso-generic-font-family: auto; | |
387 | + //mso-font-charset: 134; | |
388 | + // mso-style-name: "警告文本"; | |
389 | +} | |
390 | + | |
391 | +.style25 { | |
392 | + color: #44546a; | |
393 | + font-size: 18pt; | |
394 | + font-weight: 700; | |
395 | + font-style: normal; | |
396 | + text-decoration: none; | |
397 | + font-family: '宋体'; | |
398 | + ////mso-generic-font-family: auto; | |
399 | + //mso-font-charset: 134; | |
400 | + // mso-style-name: "标题"; | |
401 | +} | |
402 | + | |
403 | +.style26 { | |
404 | + color: #7f7f7f; | |
405 | + font-size: 11pt; | |
406 | + font-weight: 400; | |
407 | + font-style: italic; | |
408 | + text-decoration: none; | |
409 | + font-family: '宋体'; | |
410 | + ////mso-generic-font-family: auto; | |
411 | + //mso-font-charset: 134; | |
412 | + // mso-style-name: "解释性文本"; | |
413 | +} | |
414 | + | |
415 | +.style27 { | |
416 | + color: #44546a; | |
417 | + font-size: 15pt; | |
418 | + font-weight: 700; | |
419 | + font-style: normal; | |
420 | + text-decoration: none; | |
421 | + font-family: '宋体'; | |
422 | + ////mso-generic-font-family: auto; | |
423 | + //mso-font-charset: 134; | |
424 | + border-bottom: 1pt solid #5b9bd5; | |
425 | + // mso-style-name: "标题 1"; | |
426 | +} | |
427 | + | |
428 | +.style28 { | |
429 | + color: #44546a; | |
430 | + font-size: 13pt; | |
431 | + font-weight: 700; | |
432 | + font-style: normal; | |
433 | + text-decoration: none; | |
434 | + font-family: '宋体'; | |
435 | + ////mso-generic-font-family: auto; | |
436 | + //mso-font-charset: 134; | |
437 | + border-bottom: 1pt solid #5b9bd5; | |
438 | + // mso-style-name: "标题 2"; | |
439 | +} | |
440 | + | |
441 | +.style29 { | |
442 | + color: #44546a; | |
443 | + font-size: 11pt; | |
444 | + font-weight: 700; | |
445 | + font-style: normal; | |
446 | + text-decoration: none; | |
447 | + font-family: '宋体'; | |
448 | + ////mso-generic-font-family: auto; | |
449 | + //mso-font-charset: 134; | |
450 | + border-bottom: 1pt solid #acccea; | |
451 | + //mso-style-name: "标题 3"; | |
452 | +} | |
453 | + | |
454 | +.style30 { | |
455 | + color: #44546a; | |
456 | + font-size: 11pt; | |
457 | + font-weight: 700; | |
458 | + font-style: normal; | |
459 | + text-decoration: none; | |
460 | + font-family: '宋体'; | |
461 | + ////mso-generic-font-family: auto; | |
462 | + //mso-font-charset: 134; | |
463 | + //mso-style-name: "标题 4"; | |
464 | +} | |
465 | + | |
466 | +.style31 { | |
467 | + ////mso-pattern: auto none; | |
468 | + background: #fc9; | |
469 | + color: #3f3f76; | |
470 | + font-size: 11pt; | |
471 | + font-weight: 400; | |
472 | + font-style: normal; | |
473 | + text-decoration: none; | |
474 | + font-family: '宋体'; | |
475 | + ////mso-generic-font-family: auto; | |
476 | + //mso-font-charset: 134; | |
477 | + border: 0.5pt solid #7f7f7f; | |
478 | + //mso-style-name: "输入"; | |
479 | +} | |
480 | + | |
481 | +.style32 { | |
482 | + ////mso-pattern: auto none; | |
483 | + background: #f2f2f2; | |
484 | + color: #3f3f3f; | |
485 | + font-size: 11pt; | |
486 | + font-weight: 700; | |
487 | + font-style: normal; | |
488 | + text-decoration: none; | |
489 | + font-family: '宋体'; | |
490 | + ////mso-generic-font-family: auto; | |
491 | + //mso-font-charset: 134; | |
492 | + border: 0.5pt solid #3f3f3f; | |
493 | + //mso-style-name: "输出"; | |
494 | +} | |
495 | + | |
496 | +.style33 { | |
497 | + ////mso-pattern: auto none; | |
498 | + background: #f2f2f2; | |
499 | + color: #fa7d00; | |
500 | + font-size: 11pt; | |
501 | + font-weight: 700; | |
502 | + font-style: normal; | |
503 | + text-decoration: none; | |
504 | + font-family: '宋体'; | |
505 | + ////mso-generic-font-family: auto; | |
506 | + //mso-font-charset: 134; | |
507 | + border: 0.5pt solid #7f7f7f; | |
508 | + //mso-style-name: "计算"; | |
509 | +} | |
510 | + | |
511 | +.style34 { | |
512 | + ////mso-pattern: auto none; | |
513 | + background: #a5a5a5; | |
514 | + color: #fff; | |
515 | + font-size: 11pt; | |
516 | + font-weight: 700; | |
517 | + font-style: normal; | |
518 | + text-decoration: none; | |
519 | + font-family: '宋体'; | |
520 | + ////mso-generic-font-family: auto; | |
521 | + //mso-font-charset: 134; | |
522 | + border: 2pt double #3f3f3f; | |
523 | + //mso-style-name: "检查单元格"; | |
524 | +} | |
525 | + | |
526 | +.style35 { | |
527 | + color: #fa7d00; | |
528 | + font-size: 11pt; | |
529 | + font-weight: 400; | |
530 | + font-style: normal; | |
531 | + text-decoration: none; | |
532 | + font-family: '宋体'; | |
533 | + ////mso-generic-font-family: auto; | |
534 | + //mso-font-charset: 134; | |
535 | + border-bottom: 2pt double #ff8001; | |
536 | + //mso-style-name: "链接单元格"; | |
537 | +} | |
538 | + | |
539 | +.style36 { | |
540 | + color: #000; | |
541 | + font-size: 11pt; | |
542 | + font-weight: 700; | |
543 | + font-style: normal; | |
544 | + text-decoration: none; | |
545 | + font-family: '宋体'; | |
546 | + ////mso-generic-font-family: auto; | |
547 | + //mso-font-charset: 134; | |
548 | + border-top: 0.5pt solid #5b9bd5; | |
549 | + border-bottom: 2pt double #5b9bd5; | |
550 | + //mso-style-name: "汇总"; | |
551 | +} | |
552 | + | |
553 | +.style37 { | |
554 | + ////mso-pattern: auto none; | |
555 | + background: #c6efce; | |
556 | + color: #006100; | |
557 | + font-size: 11pt; | |
558 | + font-weight: 400; | |
559 | + font-style: normal; | |
560 | + text-decoration: none; | |
561 | + font-family: '宋体'; | |
562 | + ////mso-generic-font-family: auto; | |
563 | + //mso-font-charset: 134; | |
564 | + //mso-style-name: "好"; | |
565 | +} | |
566 | + | |
567 | +.style38 { | |
568 | + ////mso-pattern: auto none; | |
569 | + background: #ffc7ce; | |
570 | + color: #9c0006; | |
571 | + font-size: 11pt; | |
572 | + font-weight: 400; | |
573 | + font-style: normal; | |
574 | + text-decoration: none; | |
575 | + font-family: '宋体'; | |
576 | + ////mso-generic-font-family: auto; | |
577 | + //mso-font-charset: 134; | |
578 | + //mso-style-name: "差"; | |
579 | +} | |
580 | + | |
581 | +.style39 { | |
582 | + ////mso-pattern: auto none; | |
583 | + background: #ffeb9c; | |
584 | + color: #9c6500; | |
585 | + font-size: 11pt; | |
586 | + font-weight: 400; | |
587 | + font-style: normal; | |
588 | + text-decoration: none; | |
589 | + font-family: '宋体'; | |
590 | + ////mso-generic-font-family: auto; | |
591 | + //mso-font-charset: 134; | |
592 | + //mso-style-name: "适中"; | |
593 | +} | |
594 | + | |
595 | +.style40 { | |
596 | + ////mso-pattern: auto none; | |
597 | + background: #5b9bd5; | |
598 | + color: #fff; | |
599 | + font-size: 11pt; | |
600 | + font-weight: 400; | |
601 | + font-style: normal; | |
602 | + text-decoration: none; | |
603 | + font-family: '宋体'; | |
604 | + ////mso-generic-font-family: auto; | |
605 | + //mso-font-charset: 134; | |
606 | + //mso-style-name: "强调文字颜色 1"; | |
607 | +} | |
608 | + | |
609 | +.style41 { | |
610 | + ////mso-pattern: auto none; | |
611 | + background: #ddebf7; | |
612 | + color: #000; | |
613 | + font-size: 11pt; | |
614 | + font-weight: 400; | |
615 | + font-style: normal; | |
616 | + text-decoration: none; | |
617 | + font-family: '宋体'; | |
618 | + ////mso-generic-font-family: auto; | |
619 | + //mso-font-charset: 134; | |
620 | + //mso-style-name: "20% - 强调文字颜色 1"; | |
621 | +} | |
622 | + | |
623 | +.style42 { | |
624 | + ////mso-pattern: auto none; | |
625 | + background: #bdd7ee; | |
626 | + color: #000; | |
627 | + font-size: 11pt; | |
628 | + font-weight: 400; | |
629 | + font-style: normal; | |
630 | + text-decoration: none; | |
631 | + font-family: '宋体'; | |
632 | + ////mso-generic-font-family: auto; | |
633 | + //mso-font-charset: 134; | |
634 | + //mso-style-name: "40% - 强调文字颜色 1"; | |
635 | +} | |
636 | + | |
637 | +.style43 { | |
638 | + ////mso-pattern: auto none; | |
639 | + background: #9bc2e6; | |
640 | + color: #fff; | |
641 | + font-size: 11pt; | |
642 | + font-weight: 400; | |
643 | + font-style: normal; | |
644 | + text-decoration: none; | |
645 | + font-family: '宋体'; | |
646 | + ////mso-generic-font-family: auto; | |
647 | + //mso-font-charset: 134; | |
648 | + //mso-style-name: "60% - 强调文字颜色 1"; | |
649 | +} | |
650 | + | |
651 | +.style44 { | |
652 | + ////mso-pattern: auto none; | |
653 | + background: #ed7d31; | |
654 | + color: #fff; | |
655 | + font-size: 11pt; | |
656 | + font-weight: 400; | |
657 | + font-style: normal; | |
658 | + text-decoration: none; | |
659 | + font-family: '宋体'; | |
660 | + ////mso-generic-font-family: auto; | |
661 | + //mso-font-charset: 134; | |
662 | + //mso-style-name: "强调文字颜色 2"; | |
663 | +} | |
664 | + | |
665 | +.style45 { | |
666 | + ////mso-pattern: auto none; | |
667 | + background: #fce4d6; | |
668 | + color: #000; | |
669 | + font-size: 11pt; | |
670 | + font-weight: 400; | |
671 | + font-style: normal; | |
672 | + text-decoration: none; | |
673 | + font-family: '宋体'; | |
674 | + ////mso-generic-font-family: auto; | |
675 | + //mso-font-charset: 134; | |
676 | + //mso-style-name: "20% - 强调文字颜色 2"; | |
677 | +} | |
678 | + | |
679 | +.style46 { | |
680 | + ////mso-pattern: auto none; | |
681 | + background: #f8cbad; | |
682 | + color: #000; | |
683 | + font-size: 11pt; | |
684 | + font-weight: 400; | |
685 | + font-style: normal; | |
686 | + text-decoration: none; | |
687 | + font-family: '宋体'; | |
688 | + ////mso-generic-font-family: auto; | |
689 | + //mso-font-charset: 134; | |
690 | + //mso-style-name: "40% - 强调文字颜色 2"; | |
691 | +} | |
692 | + | |
693 | +.style47 { | |
694 | + ////mso-pattern: auto none; | |
695 | + background: #f4b084; | |
696 | + color: #fff; | |
697 | + font-size: 11pt; | |
698 | + font-weight: 400; | |
699 | + font-style: normal; | |
700 | + text-decoration: none; | |
701 | + font-family: '宋体'; | |
702 | + ////mso-generic-font-family: auto; | |
703 | + //mso-font-charset: 134; | |
704 | + //mso-style-name: "60% - 强调文字颜色 2"; | |
705 | +} | |
706 | + | |
707 | +.style48 { | |
708 | + //mso-pattern: auto none; | |
709 | + background: #a5a5a5; | |
710 | + color: #fff; | |
711 | + font-size: 11pt; | |
712 | + font-weight: 400; | |
713 | + font-style: normal; | |
714 | + text-decoration: none; | |
715 | + font-family: '宋体'; | |
716 | + ////mso-generic-font-family: auto; | |
717 | + //mso-font-charset: 134; | |
718 | + //mso-style-name: "强调文字颜色 3"; | |
719 | +} | |
720 | + | |
721 | +.style49 { | |
722 | + //mso-pattern: auto none; | |
723 | + background: #ededed; | |
724 | + color: #000; | |
725 | + font-size: 11pt; | |
726 | + font-weight: 400; | |
727 | + font-style: normal; | |
728 | + text-decoration: none; | |
729 | + font-family: '宋体'; | |
730 | + ////mso-generic-font-family: auto; | |
731 | + //mso-font-charset: 134; | |
732 | + //mso-style-name: "20% - 强调文字颜色 3"; | |
733 | +} | |
734 | + | |
735 | +.style50 { | |
736 | + //mso-pattern: auto none; | |
737 | + background: #dbdbdb; | |
738 | + color: #000; | |
739 | + font-size: 11pt; | |
740 | + font-weight: 400; | |
741 | + font-style: normal; | |
742 | + text-decoration: none; | |
743 | + font-family: '宋体'; | |
744 | + ////mso-generic-font-family: auto; | |
745 | + //mso-font-charset: 134; | |
746 | + //mso-style-name: "40% - 强调文字颜色 3"; | |
747 | +} | |
748 | + | |
749 | +.style51 { | |
750 | + //mso-pattern: auto none; | |
751 | + background: #c9c9c9; | |
752 | + color: #fff; | |
753 | + font-size: 11pt; | |
754 | + font-weight: 400; | |
755 | + font-style: normal; | |
756 | + text-decoration: none; | |
757 | + font-family: '宋体'; | |
758 | + ////mso-generic-font-family: auto; | |
759 | + //mso-font-charset: 134; | |
760 | + //mso-style-name: "60% - 强调文字颜色 3"; | |
761 | +} | |
762 | + | |
763 | +.style52 { | |
764 | + //mso-pattern: auto none; | |
765 | + background: #ffc000; | |
766 | + color: #fff; | |
767 | + font-size: 11pt; | |
768 | + font-weight: 400; | |
769 | + font-style: normal; | |
770 | + text-decoration: none; | |
771 | + font-family: '宋体'; | |
772 | + ////mso-generic-font-family: auto; | |
773 | + //mso-font-charset: 134; | |
774 | + //mso-style-name: "强调文字颜色 4"; | |
775 | +} | |
776 | + | |
777 | +.style53 { | |
778 | + //mso-pattern: auto none; | |
779 | + background: #fff2cc; | |
780 | + color: #000; | |
781 | + font-size: 11pt; | |
782 | + font-weight: 400; | |
783 | + font-style: normal; | |
784 | + text-decoration: none; | |
785 | + font-family: '宋体'; | |
786 | + ////mso-generic-font-family: auto; | |
787 | + //mso-font-charset: 134; | |
788 | + //mso-style-name: "20% - 强调文字颜色 4"; | |
789 | +} | |
790 | + | |
791 | +.style54 { | |
792 | + //mso-pattern: auto none; | |
793 | + background: #ffe699; | |
794 | + color: #000; | |
795 | + font-size: 11pt; | |
796 | + font-weight: 400; | |
797 | + font-style: normal; | |
798 | + text-decoration: none; | |
799 | + font-family: '宋体'; | |
800 | + ////mso-generic-font-family: auto; | |
801 | + //mso-font-charset: 134; | |
802 | + //mso-style-name: "40% - 强调文字颜色 4"; | |
803 | +} | |
804 | + | |
805 | +.style55 { | |
806 | + //mso-pattern: auto none; | |
807 | + background: #ffd966; | |
808 | + color: #fff; | |
809 | + font-size: 11pt; | |
810 | + font-weight: 400; | |
811 | + font-style: normal; | |
812 | + text-decoration: none; | |
813 | + font-family: '宋体'; | |
814 | + ////mso-generic-font-family: auto; | |
815 | + //mso-font-charset: 134; | |
816 | + //mso-style-name: "60% - 强调文字颜色 4"; | |
817 | +} | |
818 | + | |
819 | +.style56 { | |
820 | + //mso-pattern: auto none; | |
821 | + background: #4472c4; | |
822 | + color: #fff; | |
823 | + font-size: 11pt; | |
824 | + font-weight: 400; | |
825 | + font-style: normal; | |
826 | + text-decoration: none; | |
827 | + font-family: '宋体'; | |
828 | + ////mso-generic-font-family: auto; | |
829 | + //mso-font-charset: 134; | |
830 | + //mso-style-name: "强调文字颜色 5"; | |
831 | +} | |
832 | + | |
833 | +.style57 { | |
834 | + //mso-pattern: auto none; | |
835 | + background: #d9e1f2; | |
836 | + color: #000; | |
837 | + font-size: 11pt; | |
838 | + font-weight: 400; | |
839 | + font-style: normal; | |
840 | + text-decoration: none; | |
841 | + font-family: '宋体'; | |
842 | + ////mso-generic-font-family: auto; | |
843 | + //mso-font-charset: 134; | |
844 | + //mso-style-name: "20% - 强调文字颜色 5"; | |
845 | +} | |
846 | + | |
847 | +.style58 { | |
848 | + //mso-pattern: auto none; | |
849 | + background: #b4c6e7; | |
850 | + color: #000; | |
851 | + font-size: 11pt; | |
852 | + font-weight: 400; | |
853 | + font-style: normal; | |
854 | + text-decoration: none; | |
855 | + font-family: '宋体'; | |
856 | + ////mso-generic-font-family: auto; | |
857 | + //mso-font-charset: 134; | |
858 | + //mso-style-name: "40% - 强调文字颜色 5"; | |
859 | +} | |
860 | + | |
861 | +.style59 { | |
862 | + //mso-pattern: auto none; | |
863 | + background: #8ea9db; | |
864 | + color: #fff; | |
865 | + font-size: 11pt; | |
866 | + font-weight: 400; | |
867 | + font-style: normal; | |
868 | + text-decoration: none; | |
869 | + font-family: '宋体'; | |
870 | + ////mso-generic-font-family: auto; | |
871 | + //mso-font-charset: 134; | |
872 | + //mso-style-name: "60% - 强调文字颜色 5"; | |
873 | +} | |
874 | + | |
875 | +.style60 { | |
876 | + //mso-pattern: auto none; | |
877 | + background: #70ad47; | |
878 | + color: #fff; | |
879 | + font-size: 11pt; | |
880 | + font-weight: 400; | |
881 | + font-style: normal; | |
882 | + text-decoration: none; | |
883 | + font-family: '宋体'; | |
884 | + ////mso-generic-font-family: auto; | |
885 | + //mso-font-charset: 134; | |
886 | + //mso-style-name: "强调文字颜色 6"; | |
887 | +} | |
888 | + | |
889 | +.style61 { | |
890 | + //mso-pattern: auto none; | |
891 | + background: #e2efda; | |
892 | + color: #000; | |
893 | + font-size: 11pt; | |
894 | + font-weight: 400; | |
895 | + font-style: normal; | |
896 | + text-decoration: none; | |
897 | + font-family: '宋体'; | |
898 | + ////mso-generic-font-family: auto; | |
899 | + //mso-font-charset: 134; | |
900 | + //mso-style-name: "20% - 强调文字颜色 6"; | |
901 | +} | |
902 | + | |
903 | +.style62 { | |
904 | + //mso-pattern: auto none; | |
905 | + background: #c6e0b4; | |
906 | + color: #000; | |
907 | + font-size: 11pt; | |
908 | + font-weight: 400; | |
909 | + font-style: normal; | |
910 | + text-decoration: none; | |
911 | + font-family: '宋体'; | |
912 | + ////mso-generic-font-family: auto; | |
913 | + //mso-font-charset: 134; | |
914 | + //mso-style-name: "40% - 强调文字颜色 6"; | |
915 | +} | |
916 | + | |
917 | +.style63 { | |
918 | + //mso-pattern: auto none; | |
919 | + background: #a9d08e; | |
920 | + color: #fff; | |
921 | + font-size: 11pt; | |
922 | + font-weight: 400; | |
923 | + font-style: normal; | |
924 | + text-decoration: none; | |
925 | + font-family: '宋体'; | |
926 | + ////mso-generic-font-family: auto; | |
927 | + ////mso-font-charset: 134; | |
928 | + //mso-style-name: "60% - 强调文字颜色 6"; | |
929 | +} | |
930 | + | |
931 | +td { | |
932 | + //mso-style-parent: style0; | |
933 | + padding-top: 1px; | |
934 | + padding-right: 1px; | |
935 | + padding-left: 1px; | |
936 | + // mso-ignore: padding; | |
937 | + //mso-number-format: "General"; | |
938 | + text-align: general; | |
939 | + vertical-align: middle; | |
940 | + white-space: nowrap; | |
941 | + // mso-rotate: 0; | |
942 | + //mso-pattern: auto; | |
943 | + // mso-background-source: auto; | |
944 | + color: windowtext; | |
945 | + font-size: 12pt; | |
946 | + font-weight: 400; | |
947 | + font-style: normal; | |
948 | + text-decoration: none; | |
949 | + font-family: '宋体'; | |
950 | + //mso-generic-font-family: auto; | |
951 | + ////mso-font-charset: 134; | |
952 | + border: none; | |
953 | + //mso-protection: locked visible; | |
954 | +} | |
955 | + | |
956 | +.xl65 { | |
957 | + //mso-style-parent: style0; | |
958 | + text-align: center; | |
959 | + font-size: 16pt; | |
960 | + ////mso-font-charset: 134; | |
961 | +} | |
962 | + | |
963 | +.xl66 { | |
964 | + //mso-style-parent: style0; | |
965 | + text-align: center; | |
966 | + font-size: 10pt; | |
967 | + ////mso-font-charset: 134; | |
968 | +} | |
969 | + | |
970 | +.xl67 { | |
971 | + //mso-style-parent: style0; | |
972 | + text-align: center; | |
973 | + font-size: 14pt; | |
974 | + //mso-font-charset: 134; | |
975 | +} | |
976 | + | |
977 | +.xl68 { | |
978 | + //mso-style-parent: style0; | |
979 | + text-align: center; | |
980 | + font-size: 14pt; | |
981 | + //mso-font-charset: 134; | |
982 | +} | |
983 | + | |
984 | +.xl69 { | |
985 | + //mso-style-parent: style0; | |
986 | + text-align: left; | |
987 | + font-size: 8pt; | |
988 | + //mso-font-charset: 134; | |
989 | +} | |
990 | + | |
991 | +.xl70 { | |
992 | + //mso-style-parent: style0; | |
993 | + text-align: left; | |
994 | + font-size: 8pt; | |
995 | + //mso-font-charset: 134; | |
996 | +} | |
997 | + | |
998 | +.xl71 { | |
999 | + //mso-style-parent: style0; | |
1000 | + text-align: center; | |
1001 | + font-size: 8pt; | |
1002 | + //mso-font-charset: 134; | |
1003 | + border: 0.5pt solid windowtext; | |
1004 | +} | |
1005 | + | |
1006 | +.xl72 { | |
1007 | + //mso-style-parent: style0; | |
1008 | + text-align: center; | |
1009 | + font-size: 8pt; | |
1010 | + //mso-font-charset: 134; | |
1011 | + border: 0.5pt solid windowtext; | |
1012 | +} | |
1013 | + | |
1014 | +.xl73 { | |
1015 | + //mso-style-parent: style0; | |
1016 | + white-space: normal; | |
1017 | + font-size: 8pt; | |
1018 | + //mso-font-charset: 134; | |
1019 | + border: 0.5pt solid windowtext; | |
1020 | +} | |
1021 | + | |
1022 | +.xl74 { | |
1023 | + //mso-style-parent: style0; | |
1024 | + text-align: center; | |
1025 | + white-space: normal; | |
1026 | + font-size: 8pt; | |
1027 | + //mso-font-charset: 134; | |
1028 | + border: 0.5pt solid windowtext; | |
1029 | +} | |
1030 | + | |
1031 | +.xl75 { | |
1032 | + //mso-style-parent: style0; | |
1033 | + text-align: center; | |
1034 | + white-space: normal; | |
1035 | + font-size: 8pt; | |
1036 | + //mso-font-charset: 134; | |
1037 | + border: 0.5pt solid windowtext; | |
1038 | +} | |
1039 | + | |
1040 | +.xl76 { | |
1041 | + //mso-style-parent: style0; | |
1042 | + font-size: 8pt; | |
1043 | + //mso-font-charset: 134; | |
1044 | +} | |
1045 | + | |
1046 | +.xl77 { | |
1047 | + //mso-style-parent: style0; | |
1048 | + font-size: 8pt; | |
1049 | + //mso-font-charset: 134; | |
1050 | +} | |
1051 | + | |
1052 | +.xl78 { | |
1053 | + //mso-style-parent: style0; | |
1054 | + text-align: center; | |
1055 | + font-size: 8pt; | |
1056 | + //mso-font-charset: 134; | |
1057 | +} | ... | ... |
src/pages/OrderPrint/index.tsx
1 | 1 | // App.js |
2 | +import '@/pages/OrderPrint/index.less'; | |
3 | +// function Header() { | |
4 | +// return ( | |
5 | +// <div className="flex items-start justify-between mb-6"> | |
6 | +// <div className="text-sm"> | |
7 | +// <p className="font-medium">网址: www.canrd.com</p> | |
8 | +// </div> | |
9 | +// <h1 className="text-3xl font-bold text-center">发票</h1> | |
10 | +// <div className="text-sm text-right"> | |
11 | +// <p className="font-medium">QQ: 2902385824</p> | |
12 | +// </div> | |
13 | +// </div> | |
14 | +// ); | |
15 | +// } | |
2 | 16 | |
3 | -function Header() { | |
4 | - return ( | |
5 | - <div className="flex items-start justify-between mb-6"> | |
6 | - <div className="text-sm"> | |
7 | - <p className="font-medium">网址: www.canrd.com</p> | |
8 | - </div> | |
9 | - <h1 className="text-3xl font-bold text-center">发票</h1> | |
10 | - <div className="text-sm text-right"> | |
11 | - <p className="font-medium">QQ: 2902385824</p> | |
12 | - </div> | |
13 | - </div> | |
14 | - ); | |
15 | -} | |
17 | +// function InvoiceDetails() { | |
18 | +// return ( | |
19 | +// <div className="grid grid-cols-2 gap-4 mb-6 text-sm"> | |
20 | +// <div> | |
21 | +// <p>单位名称: 某某科技有限公司</p> | |
22 | +// <p>联系人: 张三</p> | |
23 | +// <p>联系电话: 18583817221</p> | |
24 | +// <p>送货地址: 广东省东莞市</p> | |
25 | +// </div> | |
26 | +// <div className="text-right"> | |
27 | +// <p>编号: Canrd-DZ-2023-1101-004</p> | |
28 | +// <p>开票日期: 2023年11月1日</p> | |
29 | +// </div> | |
30 | +// </div> | |
31 | +// ); | |
32 | +// } | |
16 | 33 | |
17 | -function InvoiceDetails() { | |
18 | - return ( | |
19 | - <div className="grid grid-cols-2 gap-4 mb-6 text-sm"> | |
20 | - <div> | |
21 | - <p>单位名称: 某某科技有限公司</p> | |
22 | - <p>联系人: 张三</p> | |
23 | - <p>联系电话: 18583817221</p> | |
24 | - <p>送货地址: 广东省东莞市</p> | |
25 | - </div> | |
26 | - <div className="text-right"> | |
27 | - <p>编号: Canrd-DZ-2023-1101-004</p> | |
28 | - <p>开票日期: 2023年11月1日</p> | |
29 | - </div> | |
30 | - </div> | |
31 | - ); | |
32 | -} | |
34 | +// function ProductsTable() { | |
35 | +// return ( | |
36 | +// <div className="mb-6"> | |
37 | +// <table className="w-full text-sm border border-gray-300 table-fixed"> | |
38 | +// <thead> | |
39 | +// <tr className=""> | |
40 | +// <th className="w-1/4 p-2 border border-gray-300 border-solid"> | |
41 | +// 序号 | |
42 | +// </th> | |
43 | +// <th className="w-1/6 p-2 border border-gray-300 border-solid"> | |
44 | +// 订单号 | |
45 | +// </th> | |
46 | +// <th className="w-1/6 p-2 border border-gray-300 border-solid"> | |
47 | +// 货品名称 | |
48 | +// </th> | |
49 | +// <th className="w-1/12 p-2 border border-gray-300 border-solid"> | |
50 | +// 规格 | |
51 | +// </th> | |
52 | +// <th className="w-1/6 p-2 border border-gray-300 border-solid"> | |
53 | +// 单位 | |
54 | +// </th> | |
55 | +// <th className="w-1/6 p-2 border border-gray-300 border-solid"> | |
56 | +// 数量 | |
57 | +// </th> | |
58 | +// <th className="w-1/4 p-2 border border-gray-300 border-solid"> | |
59 | +// 备注 | |
60 | +// </th> | |
61 | +// </tr> | |
62 | +// </thead> | |
63 | +// <tbody> | |
64 | +// <tr> | |
65 | +// <td className="p-2 whitespace-normal border border-gray-300 border-solid"> | |
66 | +// 产品名称可能非常长,所以这里会自动换行 | |
67 | +// </td> | |
68 | +// <td className="p-2 border border-gray-300 border-solid"> | |
69 | +// 规格型号 | |
70 | +// </td> | |
71 | +// <td className="p-2 border border-gray-300 border-solid">单位</td> | |
72 | +// <td className="p-2 border border-gray-300 border-solid">1</td> | |
73 | +// <td className="p-2 border border-gray-300 border-solid">400</td> | |
74 | +// <td className="p-2 border border-gray-300 border-solid">400</td> | |
75 | +// <td className="p-2 whitespace-normal border border-gray-300 border-solid"> | |
76 | +// 备注信息可能也会很长,需要自动换行来适应内容 | |
77 | +// </td> | |
78 | +// </tr> | |
79 | +// {/* 其他行 */} | |
80 | +// </tbody> | |
81 | +// </table> | |
82 | +// </div> | |
83 | +// ); | |
84 | +// } | |
33 | 85 | |
34 | -function ProductsTable() { | |
35 | - return ( | |
36 | - <div className="mb-6"> | |
37 | - <table className="w-full text-sm border border-gray-300 table-fixed"> | |
38 | - <thead> | |
39 | - <tr className=""> | |
40 | - <th className="w-1/4 p-2 border border-gray-300 border-solid"> | |
41 | - 序号 | |
42 | - </th> | |
43 | - <th className="w-1/6 p-2 border border-gray-300 border-solid"> | |
44 | - 订单号 | |
45 | - </th> | |
46 | - <th className="w-1/6 p-2 border border-gray-300 border-solid"> | |
47 | - 货品名称 | |
48 | - </th> | |
49 | - <th className="w-1/12 p-2 border border-gray-300 border-solid"> | |
50 | - 规格 | |
51 | - </th> | |
52 | - <th className="w-1/6 p-2 border border-gray-300 border-solid"> | |
53 | - 单位 | |
54 | - </th> | |
55 | - <th className="w-1/6 p-2 border border-gray-300 border-solid"> | |
56 | - 数量 | |
57 | - </th> | |
58 | - <th className="w-1/4 p-2 border border-gray-300 border-solid"> | |
59 | - 备注 | |
60 | - </th> | |
61 | - </tr> | |
62 | - </thead> | |
63 | - <tbody> | |
64 | - <tr> | |
65 | - <td className="p-2 whitespace-normal border border-gray-300 border-solid"> | |
66 | - 产品名称可能非常长,所以这里会自动换行 | |
67 | - </td> | |
68 | - <td className="p-2 border border-gray-300 border-solid"> | |
69 | - 规格型号 | |
70 | - </td> | |
71 | - <td className="p-2 border border-gray-300 border-solid">单位</td> | |
72 | - <td className="p-2 border border-gray-300 border-solid">1</td> | |
73 | - <td className="p-2 border border-gray-300 border-solid">400</td> | |
74 | - <td className="p-2 border border-gray-300 border-solid">400</td> | |
75 | - <td className="p-2 whitespace-normal border border-gray-300 border-solid"> | |
76 | - 备注信息可能也会很长,需要自动换行来适应内容 | |
77 | - </td> | |
78 | - </tr> | |
79 | - {/* 其他行 */} | |
80 | - </tbody> | |
81 | - </table> | |
82 | - </div> | |
83 | - ); | |
84 | -} | |
85 | - | |
86 | -function Footer() { | |
87 | - return ( | |
88 | - <div className="text-sm"> | |
89 | - <p>备注: 一些备注文本...</p> | |
90 | - <div className="flex items-center justify-between mt-4"> | |
91 | - <div> | |
92 | - <p>销售人员: 签字</p> | |
93 | - </div> | |
94 | - <div> | |
95 | - <p>业务员: 签字</p> | |
96 | - </div> | |
97 | - <div> | |
98 | - <p>开票人: 签字</p> | |
99 | - <p className="font-medium">总计: ¥400</p> | |
100 | - </div> | |
101 | - </div> | |
102 | - </div> | |
103 | - ); | |
104 | -} | |
86 | +// function Footer() { | |
87 | +// return ( | |
88 | +// <div className="text-sm"> | |
89 | +// <p>备注: 一些备注文本...</p> | |
90 | +// <div className="flex items-center justify-between mt-4"> | |
91 | +// <div> | |
92 | +// <p>销售人员: 签字</p> | |
93 | +// </div> | |
94 | +// <div> | |
95 | +// <p>业务员: 签字</p> | |
96 | +// </div> | |
97 | +// <div> | |
98 | +// <p>开票人: 签字</p> | |
99 | +// <p className="font-medium">总计: ¥400</p> | |
100 | +// </div> | |
101 | +// </div> | |
102 | +// </div> | |
103 | +// ); | |
104 | +// } | |
105 | 105 | |
106 | 106 | function App() { |
107 | 107 | return ( |
108 | 108 | <div className="flex items-center justify-center min-h-screen bg-gray-100"> |
109 | 109 | <div className="w-full max-w-4xl p-10 bg-white border border-gray-300"> |
110 | - <Header /> | |
111 | - <InvoiceDetails /> | |
112 | - <ProductsTable /> | |
113 | - <Footer /> | |
110 | + <table | |
111 | + width="846" | |
112 | + border={0} | |
113 | + cellPadding={0} | |
114 | + cellSpacing={0} | |
115 | + style={{ | |
116 | + width: '423.00pt', | |
117 | + borderCollapse: 'collapse', | |
118 | + tableLayout: 'fixed', | |
119 | + }} | |
120 | + > | |
121 | + <col | |
122 | + width="25.50" | |
123 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 544 }} | |
124 | + /> | |
125 | + <col | |
126 | + width="52.50" | |
127 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 1120 }} | |
128 | + /> | |
129 | + <col | |
130 | + width="115.50" | |
131 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 2464 }} | |
132 | + /> | |
133 | + <col | |
134 | + width="169.50" | |
135 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 3616 }} | |
136 | + /> | |
137 | + <col | |
138 | + width="165" | |
139 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 3520 }} | |
140 | + /> | |
141 | + <col | |
142 | + width="96" | |
143 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 2048 }} | |
144 | + /> | |
145 | + <col | |
146 | + width="114" | |
147 | + style={{ msoWidthSource: 'userset', msoWidthAlt: 2432 }} | |
148 | + /> | |
149 | + <col width="108" style={{ width: '54.00pt' }} /> | |
150 | + <tr height="42" style={{ height: '21.00pt' }}> | |
151 | + <td height="42" style={{ height: '21.00pt' }}></td> | |
152 | + <td | |
153 | + className="xl65" | |
154 | + colSpan="7" | |
155 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
156 | + > | |
157 | + 科 路 得 | |
158 | + </td> | |
159 | + </tr> | |
160 | + <tr height="30" style={{ height: '15.00pt' }}> | |
161 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
162 | + <td | |
163 | + className="xl66" | |
164 | + colSpan="7" | |
165 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
166 | + > | |
167 | + 网址:www.canrd.com | |
168 | + </td> | |
169 | + </tr> | |
170 | + <tr height="35" style={{ height: '17.50pt' }}> | |
171 | + <td height="35" style={{ height: '17.50pt' }}></td> | |
172 | + <td | |
173 | + className="xl67" | |
174 | + colSpan="7" | |
175 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
176 | + > | |
177 | + 销售出货单 | |
178 | + </td> | |
179 | + </tr> | |
180 | + <tr height="30" style={{ height: '15.00pt' }}> | |
181 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
182 | + <td | |
183 | + className="xl69" | |
184 | + colSpan="4" | |
185 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
186 | + > | |
187 | + 单位名称:武汉大学 | |
188 | + </td> | |
189 | + <td | |
190 | + className="xl69" | |
191 | + colSpan="3" | |
192 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
193 | + > | |
194 | + 单号:Canrd-DZ-2023-1101-004 | |
195 | + </td> | |
196 | + </tr> | |
197 | + <tr height="30" style={{ height: '15.00pt' }}> | |
198 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
199 | + <td | |
200 | + className="xl69" | |
201 | + colSpan="4" | |
202 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
203 | + > | |
204 | + 联系人:陈程 | |
205 | + </td> | |
206 | + <td | |
207 | + className="xl69" | |
208 | + colSpan="3" | |
209 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
210 | + > | |
211 | + 开单日期:2023年11月1日 | |
212 | + </td> | |
213 | + </tr> | |
214 | + <tr height="30" style={{ height: '15.00pt' }}> | |
215 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
216 | + <td | |
217 | + className="xl69" | |
218 | + colSpan="4" | |
219 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
220 | + > | |
221 | + 联系电话:15623543176-6556 | |
222 | + </td> | |
223 | + <td | |
224 | + className="xl70" | |
225 | + colSpan={2} | |
226 | + style={{ msoIgnore: 'colspan' }} | |
227 | + ></td> | |
228 | + <td className="xl70"></td> | |
229 | + </tr> | |
230 | + <tr height="30" style={{ height: '15.00pt' }}> | |
231 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
232 | + <td | |
233 | + className="xl69" | |
234 | + colSpan="7" | |
235 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
236 | + > | |
237 | + 送货地址:广东省 深圳市龙岗区吉华街道联创科产业园3期33幢刘荣华[ | |
238 | + </td> | |
239 | + </tr> | |
240 | + <tr height="30" style={{ height: '15.00pt' }}> | |
241 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
242 | + <td className="xl71">序号</td> | |
243 | + <td className="xl71">订单号</td> | |
244 | + <td className="xl71">货品名称</td> | |
245 | + <td className="xl71">规格</td> | |
246 | + <td className="xl71">单位</td> | |
247 | + <td className="xl71">数量</td> | |
248 | + <td className="xl71">备注</td> | |
249 | + </tr> | |
250 | + <tr height="30" style={{ height: '15.00pt' }}> | |
251 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
252 | + <td className="xl72">1</td> | |
253 | + <td className="xl72">231101005</td> | |
254 | + <td className="xl71">纽扣电池检测夹具</td> | |
255 | + <td className="xl71">20系列</td> | |
256 | + <td className="xl71">个</td> | |
257 | + <td className="xl72">1</td> | |
258 | + <td className="xl72"></td> | |
259 | + </tr> | |
260 | + <tr height="30" style={{ height: '15.00pt' }}> | |
261 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
262 | + <td className="xl72">2</td> | |
263 | + <td className="xl72">231101005</td> | |
264 | + <td className="xl72">笔记本</td> | |
265 | + <td className="xl72"></td> | |
266 | + <td className="xl72">本</td> | |
267 | + <td className="xl72"></td> | |
268 | + <td className="xl72"></td> | |
269 | + </tr> | |
270 | + <tr height="30" style={{ height: '15.00pt' }}> | |
271 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
272 | + <td className="xl72"></td> | |
273 | + <td className="xl72"></td> | |
274 | + <td className="xl72"></td> | |
275 | + <td className="xl71"></td> | |
276 | + <td className="xl71"></td> | |
277 | + <td className="xl72"></td> | |
278 | + <td className="xl72"></td> | |
279 | + </tr> | |
280 | + <tr height="30" style={{ height: '15.00pt' }}> | |
281 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
282 | + <td className="xl72"></td> | |
283 | + <td className="xl72"></td> | |
284 | + <td className="xl72"></td> | |
285 | + <td className="xl72"></td> | |
286 | + <td className="xl72"></td> | |
287 | + <td className="xl72"></td> | |
288 | + <td className="xl72"></td> | |
289 | + </tr> | |
290 | + <tr height="30" style={{ height: '15.00pt' }}> | |
291 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
292 | + <td className="xl72"></td> | |
293 | + <td className="xl72"></td> | |
294 | + <td className="xl72"></td> | |
295 | + <td className="xl72"></td> | |
296 | + <td className="xl72"></td> | |
297 | + <td className="xl72"></td> | |
298 | + <td className="xl72"></td> | |
299 | + </tr> | |
300 | + <tr height="30" style={{ height: '15.00pt' }}> | |
301 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
302 | + <td className="xl72"></td> | |
303 | + <td className="xl72"></td> | |
304 | + <td className="xl72"></td> | |
305 | + <td className="xl72"></td> | |
306 | + <td className="xl72"></td> | |
307 | + <td className="xl72"></td> | |
308 | + <td className="xl72"></td> | |
309 | + </tr> | |
310 | + <tr style={{ height: '19.00pt' }}> | |
311 | + <td style={{ height: '19.00pt' }}></td> | |
312 | + <td className="xl73">销货单位</td> | |
313 | + <td | |
314 | + className="xl74" | |
315 | + colSpan="3" | |
316 | + style={{ | |
317 | + borderRight: '0.5pt solid windowtext', | |
318 | + borderBottom: '0.5pt solid windowtext', | |
319 | + }} | |
320 | + > | |
321 | + 发货地址:广东省东莞市厚街镇锦丰路9号科路得产业园 | |
322 | + </td> | |
323 | + <td className="xl73">开户银行及账号</td> | |
324 | + <td | |
325 | + className="xl74" | |
326 | + colSpan={2} | |
327 | + style={{ | |
328 | + borderRight: '0.5pt solid windowtext', | |
329 | + borderBottom: '0.5pt solid windowtext', | |
330 | + }} | |
331 | + > | |
332 | + 招商银行股份有限公司东莞东骏路支行 | |
333 | + <br /> | |
334 | + 账号:769906437110802 | |
335 | + </td> | |
336 | + </tr> | |
337 | + <tr style={{ height: 30 }}> | |
338 | + <td height="30" style={{ height: '15.00pt' }}></td> | |
339 | + <td className="xl76" colSpan={2} style={{ msoIgnore: 'colspan' }}> | |
340 | + 客户签名: | |
341 | + </td> | |
342 | + <td className="xl76">核准:屠亚辉</td> | |
343 | + <td | |
344 | + className="xl78" | |
345 | + colSpan={2} | |
346 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
347 | + > | |
348 | + 业务员:Peter | |
349 | + </td> | |
350 | + <td | |
351 | + className="xl78" | |
352 | + colSpan={2} | |
353 | + style={{ borderRight: 'none', borderBottom: 'none' }} | |
354 | + > | |
355 | + 开单人:张玉红 | |
356 | + </td> | |
357 | + </tr> | |
358 | + <tr style={{ display: 'none', width: 0 }}> | |
359 | + <td width="26" style={{ width: 13 }}></td> | |
360 | + <td width="53" style={{ width: 26 }}></td> | |
361 | + <td width="116" style={{ width: 58 }}></td> | |
362 | + <td width="170" style={{ width: 85 }}></td> | |
363 | + <td width="165" style={{ width: 83 }}></td> | |
364 | + <td width="96" style={{ width: 48 }}></td> | |
365 | + <td width="114" style={{ width: 57 }}></td> | |
366 | + </tr> | |
367 | + </table> | |
114 | 368 | </div> |
115 | 369 | </div> |
116 | 370 | ); | ... | ... |
src/utils/index.ts
... | ... | @@ -16,4 +16,14 @@ function enumValueToLabel(value: any, enumObj: any) { |
16 | 16 | return ''; |
17 | 17 | } |
18 | 18 | |
19 | -export { customMessage, enumToSelect, enumValueToLabel }; | |
19 | +//从缓存中获取用户信息 | |
20 | +function getUserInfo() { | |
21 | + let userInfoString = localStorage.getItem('userInfo'); | |
22 | + if (userInfoString === null) { | |
23 | + return {}; | |
24 | + } | |
25 | + | |
26 | + return JSON.parse(userInfoString); | |
27 | +} | |
28 | + | |
29 | +export { customMessage, enumToSelect, enumValueToLabel, getUserInfo }; | ... | ... |