canrd-main / canrd-erp-front · Commits

Commit 8d2303cabb4a6eae255e7b314a17761a55cbd998

Authored by sanmu
1 parent fcb83e73

chore: test

Inline Side-by-side
Showing 1 changed file with 191 additions and 96 deletions
src/pages/Order/index.tsx
  View file @8d2303c
1 import { postErpOrderListByPage } from '@/services'; 1 import { postErpOrderListByPage } from '@/services';
2 import { 2 import {
3 PageContainer, 3 PageContainer,
4 - ProTable, ProColumns 4 + ProColumns,
  5 + ProTable,
5 } from '@ant-design/pro-components'; 6 } from '@ant-design/pro-components';
6 -import { Button, Checkbox, Flex, Space, Divider } from 'antd';  
7 -import React, {useState, Key } from 'react';  
8 -import './index.less' 7 +import { Button, Checkbox, Divider, Flex, Space } from 'antd';
  8 +import React, { Key, useState } from 'react';
9 import OrderDrawer from './components/OrderDrawer'; 9 import OrderDrawer from './components/OrderDrawer';
  10 +import './index.less';
10 11
11 const TableList: React.FC<unknown> = () => { 12 const TableList: React.FC<unknown> = () => {
12 const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false); 13 const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
13 const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]); 14 const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
14 const [selectedItems, setSelectedItems] = useState([]); 15 const [selectedItems, setSelectedItems] = useState([]);
15 - const [orderRow,setOrderRow] = useState<[]>([]);  
16 - const [subOrderShowText,setSubOrderShowText] = useState("订单详情"); 16 + const [orderRow, setOrderRow] = useState<[]>([]);
  17 + const [subOrderShowText, setSubOrderShowText] = useState('订单详情');
17 18
18 const onCheckboxChange = (itemKey: never) => { 19 const onCheckboxChange = (itemKey: never) => {
19 const newSelectedItems = selectedItems.includes(itemKey) 20 const newSelectedItems = selectedItems.includes(itemKey)
@@ -23,55 +24,96 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -23,55 +24,96 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
23 setSelectedItems(newSelectedItems); 24 setSelectedItems(newSelectedItems);
24 }; 25 };
25 26
  27 + const a = 2;
  28 + if (a == 2) {
  29 + }
  30 +
26 // 主订单内容渲染 31 // 主订单内容渲染
27 const MainOrderColunmRender = ({ record }) => { 32 const MainOrderColunmRender = ({ record }) => {
28 - return <Flex vertical={true}>  
29 - {/* 编号、时间、销售信息 */}  
30 - <Flex justify='space-between' className='py-4 px-2 bg-gray-100'>  
31 - <Checkbox onChange={() => onCheckboxChange(record.id)}  
32 - checked={selectedItems.includes(record.id)}>  
33 - <Flex wrap="wrap" gap="middle">  
34 - <div>{record.createTime}</div>  
35 - <div>订单编号：{record.id}</div>  
36 - </Flex>  
37 - </Checkbox>  
38 - </Flex>  
39 - {/* 收货、开票、备注信息 */}  
40 - <Flex justify='space-between' className='px-2 py-4'>  
41 - <Space split={<Divider type="vertical" align="center" />}>  
42 - <Space.Compact direction="vertical" className='gap-2'>  
43 - <div>  
44 - 收货信息：收货人：{record.customerName} 联系方式：{record.customerContactNumber} 单位联系人：{record.institutionContactName} 单位名称：{record.institution} 收货地址：{record.customerShippingAddress}  
45 - </div>  
46 - <div>开票信息：开户银行：{record.bank} 银行账号：{record.bankAccountNumber} 识别号：{record.invoiceIdentificationNumber}</div>  
47 - <div>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：{record.notes}</div>  
48 - </Space.Compact>  
49 - </Space>  
50 - {/* 总金额、操作按钮信息 */}  
51 - <Space>  
52 - <Space.Compact direction="vertical" align="end">  
53 - <div>总金额：<span className='text-lg'>{record.totalPayment}￥</span></div>  
54 - <div>  
55 - <Button className='p-0 pe-2' type="link">确认收货</Button>  
56 - <Button className='p-0 pe-2' type="link">发货</Button>  
57 - <Button className='p-0 pe-2' type="link">打印</Button>  
58 - <Button className='p-0 pe-2' type="link">开票</Button>  
59 - <Button className='p-0 pe-2' type="link" onClick={()=>setOrderDrawerVisible(true)}>编辑</Button>  
60 - <Button className='p-0 pe-2' type="link">审核</Button>  
61 - <Button className='p-0' type="link">作废</Button>  
62 - </div>  
63 - </Space.Compact>  
64 - <Space.Compact direction="vertical">  
65 - <Button type="primary" onClick={() => handleExpand(record.id)} size='small'>{subOrderShowText}</Button>  
66 - </Space.Compact>  
67 - </Space>  
68 - 33 + return (
  34 + <Flex vertical={true}>
  35 + {/* 编号、时间、销售信息 */}
  36 + <Flex justify="space-between" className="px-2 py-4 bg-gray-100">
  37 + <Checkbox
  38 + onChange={() => onCheckboxChange(record.id)}
  39 + checked={selectedItems.includes(record.id)}
  40 + >
  41 + <Flex wrap="wrap" gap="middle">
  42 + <div>{record.createTime}</div>
  43 + <div>订单编号：{record.id}</div>
  44 + </Flex>
  45 + </Checkbox>
  46 + </Flex>
  47 + {/* 收货、开票、备注信息 */}
  48 + <Flex justify="space-between" className="px-2 py-4">
  49 + <Space split={<Divider type="vertical" align="center" />}>
  50 + <Space.Compact direction="vertical" className="gap-2">
  51 + <div>
  52 + 收货信息：收货人：{record.customerName} 联系方式：
  53 + {record.customerContactNumber} 单位联系人：
  54 + {record.institutionContactName} 单位名称：{record.institution}{' '}
  55 + 收货地址：{record.customerShippingAddress}
  56 + </div>
  57 + <div>
  58 + 开票信息：开户银行：{record.bank} 银行账号：
  59 + {record.bankAccountNumber} 识别号：
  60 + {record.invoiceIdentificationNumber}
  61 + </div>
  62 + <div>
  63 + 备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：{record.notes}
  64 + </div>
  65 + </Space.Compact>
  66 + </Space>
  67 + {/* 总金额、操作按钮信息 */}
  68 + <Space>
  69 + <Space.Compact direction="vertical" align="end">
  70 + <div>
  71 + 总金额：<span className="text-lg">{record.totalPayment}￥</span>
  72 + </div>
  73 + <div>
  74 + <Button className="p-0 pe-2" type="link">
  75 + 确认收货
  76 + </Button>
  77 + <Button className="p-0 pe-2" type="link">
  78 + 发货
  79 + </Button>
  80 + <Button className="p-0 pe-2" type="link">
  81 + 打印
  82 + </Button>
  83 + <Button className="p-0 pe-2" type="link">
  84 + 开票
  85 + </Button>
  86 + <Button
  87 + className="p-0 pe-2"
  88 + type="link"
  89 + onClick={() => setOrderDrawerVisible(true)}
  90 + >
  91 + 编辑
  92 + </Button>
  93 + <Button className="p-0 pe-2" type="link">
  94 + 审核
  95 + </Button>
  96 + <Button className="p-0" type="link">
  97 + 作废
  98 + </Button>
  99 + </div>
  100 + </Space.Compact>
  101 + <Space.Compact direction="vertical">
  102 + <Button
  103 + type="primary"
  104 + onClick={() => handleExpand(record.id)}
  105 + size="small"
  106 + >
  107 + {subOrderShowText}
  108 + </Button>
  109 + </Space.Compact>
  110 + </Space>
  111 + </Flex>
69 </Flex> 112 </Flex>
70 - </Flex>  
71 - } 113 + );
  114 + };
72 const [data, setData] = useState([]); 115 const [data, setData] = useState([]);
73 116
74 -  
75 const tableListDataSource: TableListItem[] = []; 117 const tableListDataSource: TableListItem[] = [];
76 118
77 // 主订单列表 119 // 主订单列表
@@ -82,104 +124,104 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -82,104 +124,104 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
82 dataIndex: 'name', 124 dataIndex: 'name',
83 search: false, 125 search: false,
84 render: (text, record) => { 126 render: (text, record) => {
85 - return <MainOrderColunmRender record={record} />  
86 - } 127 + return <MainOrderColunmRender record={record} />;
  128 + },
87 }, 129 },
88 { 130 {
89 title: '订单编号', 131 title: '订单编号',
90 dataIndex: 'id', 132 dataIndex: 'id',
91 valueType: 'text', 133 valueType: 'text',
92 - hideInTable: true 134 + hideInTable: true,
93 }, 135 },
94 { 136 {
95 title: '销售代表', 137 title: '销售代表',
96 dataIndex: 'salesCode', 138 dataIndex: 'salesCode',
97 valueType: 'text', 139 valueType: 'text',
98 - hideInTable: true 140 + hideInTable: true,
99 }, 141 },
100 { 142 {
101 title: '收货人', 143 title: '收货人',
102 dataIndex: 'customerName', 144 dataIndex: 'customerName',
103 valueType: 'text', 145 valueType: 'text',
104 - hideInTable: true 146 + hideInTable: true,
105 }, 147 },
106 { 148 {
107 title: '收货人联系电话', 149 title: '收货人联系电话',
108 dataIndex: 'customerContactNumber', 150 dataIndex: 'customerContactNumber',
109 valueType: 'text', 151 valueType: 'text',
110 - hideInTable: true 152 + hideInTable: true,
111 }, 153 },
112 { 154 {
113 title: '单位', 155 title: '单位',
114 dataIndex: 'institution', 156 dataIndex: 'institution',
115 valueType: 'text', 157 valueType: 'text',
116 - hideInTable: true 158 + hideInTable: true,
117 }, 159 },
118 { 160 {
119 title: '单位联系人', 161 title: '单位联系人',
120 dataIndex: 'institutionContactName', 162 dataIndex: 'institutionContactName',
121 valueType: 'text', 163 valueType: 'text',
122 - hideInTable: true 164 + hideInTable: true,
123 }, 165 },
124 { 166 {
125 title: '收货人地址', 167 title: '收货人地址',
126 dataIndex: 'customerShippingAddress', 168 dataIndex: 'customerShippingAddress',
127 valueType: 'text', 169 valueType: 'text',
128 - hideInTable: true 170 + hideInTable: true,
129 }, 171 },
130 { 172 {
131 title: '商品名称', 173 title: '商品名称',
132 dataIndex: 'productName', 174 dataIndex: 'productName',
133 valueType: 'text', 175 valueType: 'text',
134 - hideInTable: true 176 + hideInTable: true,
135 }, 177 },
136 { 178 {
137 title: '商品参数', 179 title: '商品参数',
138 dataIndex: 'parameters', 180 dataIndex: 'parameters',
139 valueType: 'text', 181 valueType: 'text',
140 - hideInTable: true 182 + hideInTable: true,
141 }, 183 },
142 { 184 {
143 title: '订单状态', 185 title: '订单状态',
144 dataIndex: 'orderStatus', 186 dataIndex: 'orderStatus',
145 valueType: 'text', 187 valueType: 'text',
146 - hideInTable: true 188 + hideInTable: true,
147 }, 189 },
148 { 190 {
149 title: '支付方式', 191 title: '支付方式',
150 dataIndex: 'paymentStatus', 192 dataIndex: 'paymentStatus',
151 valueType: 'text', 193 valueType: 'text',
152 - hideInTable: true 194 + hideInTable: true,
153 }, 195 },
154 { 196 {
155 title: '物流方式', 197 title: '物流方式',
156 dataIndex: 'logisticsMethod', 198 dataIndex: 'logisticsMethod',
157 valueType: 'text', 199 valueType: 'text',
158 - hideInTable: true 200 + hideInTable: true,
159 }, 201 },
160 { 202 {
161 title: '支付渠道', 203 title: '支付渠道',
162 dataIndex: 'paymentChannel', 204 dataIndex: 'paymentChannel',
163 valueType: 'text', 205 valueType: 'text',
164 - hideInTable: true 206 + hideInTable: true,
165 }, 207 },
166 { 208 {
167 title: '银行名称', 209 title: '银行名称',
168 dataIndex: 'bank', 210 dataIndex: 'bank',
169 valueType: 'text', 211 valueType: 'text',
170 - hideInTable: true 212 + hideInTable: true,
171 }, 213 },
172 { 214 {
173 title: '支付流水', 215 title: '支付流水',
174 dataIndex: 'paymentTransactionId', 216 dataIndex: 'paymentTransactionId',
175 valueType: 'text', 217 valueType: 'text',
176 - hideInTable: true 218 + hideInTable: true,
177 }, 219 },
178 { 220 {
179 title: '所属部门', 221 title: '所属部门',
180 dataIndex: 'productBelongBusiness', 222 dataIndex: 'productBelongBusiness',
181 valueType: 'text', 223 valueType: 'text',
182 - hideInTable: true 224 + hideInTable: true,
183 }, 225 },
184 { 226 {
185 title: '创建日期', 227 title: '创建日期',
@@ -199,7 +241,7 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -199,7 +241,7 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
199 title: '开票状态', 241 title: '开票状态',
200 dataIndex: 'invoicingStatus', 242 dataIndex: 'invoicingStatus',
201 valueType: 'text', 243 valueType: 'text',
202 - hideInTable: true 244 + hideInTable: true,
203 }, 245 },
204 { 246 {
205 title: '开票日期', 247 title: '开票日期',
@@ -214,13 +256,13 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -214,13 +256,13 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
214 }; 256 };
215 }, 257 },
216 }, 258 },
217 - } 259 + },
218 ]; 260 ];
219 const handleExpand = (key: number) => { 261 const handleExpand = (key: number) => {
220 - if(expandedRowKeys.includes(key)){  
221 - setSubOrderShowText("订单详情");  
222 - }else{  
223 - setSubOrderShowText("收起订单"); 262 + if (expandedRowKeys.includes(key)) {
  263 + setSubOrderShowText('订单详情');
  264 + } else {
  265 + setSubOrderShowText('收起订单');
224 } 266 }
225 const newExpandedRowKeys = expandedRowKeys.includes(key) 267 const newExpandedRowKeys = expandedRowKeys.includes(key)
226 ? expandedRowKeys.filter((k) => k !== key) 268 ? expandedRowKeys.filter((k) => k !== key)
@@ -240,13 +282,37 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -240,13 +282,37 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
240 { title: '商品名称', dataIndex: 'productName', key: 'productName' }, 282 { title: '商品名称', dataIndex: 'productName', key: 'productName' },
241 { title: '商品参数', dataIndex: 'parameters', key: 'parameters' }, 283 { title: '商品参数', dataIndex: 'parameters', key: 'parameters' },
242 { title: '商品数量', dataIndex: 'quantity', key: 'quantity' }, 284 { title: '商品数量', dataIndex: 'quantity', key: 'quantity' },
243 - { title: '子订单金额(￥)', dataIndex: 'subOrderPayment', key: 'subOrderPayment' },  
244 - { title: '支付方式', dataIndex: 'paymentMethod', key: 'paymentMethod' },  
245 - { title: '支付渠道', dataIndex: 'paymentChannel', key: 'paymentChannel' },  
246 - { title: '支付流水', dataIndex: 'paymentTransactionId', key: 'paymentTransactionId' },  
247 - { title: '物流方式', dataIndex: 'logisticsMethod', key: 'logisticsMethod' }, 285 + {
  286 + title: '子订单金额(￥)',
  287 + dataIndex: 'subOrderPayment',
  288 + key: 'subOrderPayment',
  289 + },
  290 + {
  291 + title: '支付方式',
  292 + dataIndex: 'paymentMethod',
  293 + key: 'paymentMethod',
  294 + },
  295 + {
  296 + title: '支付渠道',
  297 + dataIndex: 'paymentChannel',
  298 + key: 'paymentChannel',
  299 + },
  300 + {
  301 + title: '支付流水',
  302 + dataIndex: 'paymentTransactionId',
  303 + key: 'paymentTransactionId',
  304 + },
  305 + {
  306 + title: '物流方式',
  307 + dataIndex: 'logisticsMethod',
  308 + key: 'logisticsMethod',
  309 + },
248 { title: '物流单号', dataIndex: 'serialNumber', key: 'serialNumber' }, 310 { title: '物流单号', dataIndex: 'serialNumber', key: 'serialNumber' },
249 - { title: '开票状态', dataIndex: 'invoicingStatus', key: 'invoicingStatus' }, 311 + {
  312 + title: '开票状态',
  313 + dataIndex: 'invoicingStatus',
  314 + key: 'invoicingStatus',
  315 + },
250 { title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus' }, 316 { title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus' },
251 { 317 {
252 title: '操作', 318 title: '操作',
@@ -254,19 +320,49 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -254,19 +320,49 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
254 key: 'operation', 320 key: 'operation',
255 align: 'center', 321 align: 'center',
256 322
257 - render: () => <Flex>  
258 - <Button type="link" size='small' style={{ 'paddingLeft': 0, paddingRight: '4px' }}>编辑</Button>  
259 - <Button type="link" size='small' style={{ 'paddingLeft': 0, paddingRight: '4px' }}>审核</Button>  
260 - <Button type="link" size='small' style={{ 'paddingLeft': 0, paddingRight: '4px' }}>备注</Button>  
261 - <Button type="link" size='small' style={{ 'paddingLeft': 0, paddingRight: 0 }}>作废</Button>  
262 - </Flex> 323 + render: () => (
  324 + <Flex>
  325 + <Button
  326 + type="link"
  327 + size="small"
  328 + style={{ paddingLeft: 0, paddingRight: '4px' }}
  329 + >
  330 + 编辑
  331 + </Button>
  332 + <Button
  333 + type="link"
  334 + size="small"
  335 + style={{ paddingLeft: 0, paddingRight: '4px' }}
  336 + >
  337 + 审核
  338 + </Button>
  339 + <Button
  340 + type="link"
  341 + size="small"
  342 + style={{ paddingLeft: 0, paddingRight: '4px' }}
  343 + >
  344 + 备注
  345 + </Button>
  346 + <Button
  347 + type="link"
  348 + size="small"
  349 + style={{ paddingLeft: 0, paddingRight: 0 }}
  350 + >
  351 + 作废
  352 + </Button>
  353 + </Flex>
  354 + ),
263 }, 355 },
264 { 356 {
265 title: '备注', 357 title: '备注',
266 dataIndex: 'notes', 358 dataIndex: 'notes',
267 key: 'notes', 359 key: 'notes',
268 align: 'center', 360 align: 'center',
269 - render: () =>[<Button type="dashed" size='small'>详情</Button>], 361 + render: () => [
  362 + <Button type="dashed" size="small">
  363 + 详情
  364 + </Button>,
  365 + ],
270 }, 366 },
271 ]} 367 ]}
272 rowSelection={{ 368 rowSelection={{
@@ -285,7 +381,6 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -285,7 +381,6 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
285 ); 381 );
286 }; 382 };
287 383
288 -  
289 return ( 384 return (
290 <PageContainer 385 <PageContainer
291 header={{ 386 header={{
@@ -317,14 +412,15 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -317,14 +412,15 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
317 current: 1; 412 current: 1;
318 }, 413 },
319 sorter, 414 sorter,
320 - filter,) => { 415 + filter,
  416 + ) => {
321 const { data } = await postErpOrderListByPage({ 417 const { data } = await postErpOrderListByPage({
322 // ...params, 418 // ...params,
323 // FIXME: remove @ts-ignore 419 // FIXME: remove @ts-ignore
324 // @ts-ignore 420 // @ts-ignore
325 sorter, 421 sorter,
326 filter, 422 filter,
327 - body: JSON.stringify(params) 423 + body: JSON.stringify(params),
328 }); 424 });
329 console.log(data); 425 console.log(data);
330 return { 426 return {
@@ -333,17 +429,16 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -333,17 +429,16 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
333 }} 429 }}
334 toolBarRender={() => [ 430 toolBarRender={() => [
335 <Button key="show">一键展开</Button>, 431 <Button key="show">一键展开</Button>,
336 - <Button key="out" onClick={()=>setOrderDrawerVisible(true)}> 432 + <Button key="out" onClick={() => setOrderDrawerVisible(true)}>
337 新增 433 新增
338 </Button>, 434 </Button>,
339 <Button key="primary" type="primary"> 435 <Button key="primary" type="primary">
340 导出 436 导出
341 - </Button>  
342 - 437 + </Button>,
343 ]} 438 ]}
344 /> 439 />
345 440
346 - {orderDrawerVisible && 441 + {orderDrawerVisible && (
347 <OrderDrawer 442 <OrderDrawer
348 data={orderRow} 443 data={orderRow}
349 onClose={() => { 444 onClose={() => {
@@ -351,9 +446,9 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; { @@ -351,9 +446,9 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
351 setOrderRow({}); 446 setOrderRow({});
352 }} 447 }}
353 /> 448 />
354 - } 449 + )}
355 </PageContainer> 450 </PageContainer>
356 ); 451 );
357 }; 452 };
358 453
359 -export default TableList;  
360 \ No newline at end of file 454 \ No newline at end of file
  455 +export default TableList;