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 1 import { postErpOrderListByPage } from '@/services';
2 2 import {
3 3 PageContainer,
4   - ProTable, ProColumns
  4 + ProColumns,
  5 + ProTable,
5 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 9 import OrderDrawer from './components/OrderDrawer';
  10 +import './index.less';
10 11  
11 12 const TableList: React.FC<unknown> = () => {
12 13 const [orderDrawerVisible, setOrderDrawerVisible] = useState<boolean>(false);
13 14 const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([]);
14 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 19 const onCheckboxChange = (itemKey: never) => {
19 20 const newSelectedItems = selectedItems.includes(itemKey)
... ... @@ -23,55 +24,96 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
23 24 setSelectedItems(newSelectedItems);
24 25 };
25 26  
  27 + const a = 2;
  28 + if (a == 2) {
  29 + }
  30 +
26 31 // 主订单内容渲染
27 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 112 </Flex>
70   - </Flex>
71   - }
  113 + );
  114 + };
72 115 const [data, setData] = useState([]);
73 116  
74   -
75 117 const tableListDataSource: TableListItem[] = [];
76 118  
77 119 // 主订单列表
... ... @@ -82,104 +124,104 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
82 124 dataIndex: 'name',
83 125 search: false,
84 126 render: (text, record) => {
85   - return <MainOrderColunmRender record={record} />
86   - }
  127 + return <MainOrderColunmRender record={record} />;
  128 + },
87 129 },
88 130 {
89 131 title: '订单编号',
90 132 dataIndex: 'id',
91 133 valueType: 'text',
92   - hideInTable: true
  134 + hideInTable: true,
93 135 },
94 136 {
95 137 title: '销售代表',
96 138 dataIndex: 'salesCode',
97 139 valueType: 'text',
98   - hideInTable: true
  140 + hideInTable: true,
99 141 },
100 142 {
101 143 title: '收货人',
102 144 dataIndex: 'customerName',
103 145 valueType: 'text',
104   - hideInTable: true
  146 + hideInTable: true,
105 147 },
106 148 {
107 149 title: '收货人联系电话',
108 150 dataIndex: 'customerContactNumber',
109 151 valueType: 'text',
110   - hideInTable: true
  152 + hideInTable: true,
111 153 },
112 154 {
113 155 title: '单位',
114 156 dataIndex: 'institution',
115 157 valueType: 'text',
116   - hideInTable: true
  158 + hideInTable: true,
117 159 },
118 160 {
119 161 title: '单位联系人',
120 162 dataIndex: 'institutionContactName',
121 163 valueType: 'text',
122   - hideInTable: true
  164 + hideInTable: true,
123 165 },
124 166 {
125 167 title: '收货人地址',
126 168 dataIndex: 'customerShippingAddress',
127 169 valueType: 'text',
128   - hideInTable: true
  170 + hideInTable: true,
129 171 },
130 172 {
131 173 title: '商品名称',
132 174 dataIndex: 'productName',
133 175 valueType: 'text',
134   - hideInTable: true
  176 + hideInTable: true,
135 177 },
136 178 {
137 179 title: '商品参数',
138 180 dataIndex: 'parameters',
139 181 valueType: 'text',
140   - hideInTable: true
  182 + hideInTable: true,
141 183 },
142 184 {
143 185 title: '订单状态',
144 186 dataIndex: 'orderStatus',
145 187 valueType: 'text',
146   - hideInTable: true
  188 + hideInTable: true,
147 189 },
148 190 {
149 191 title: '支付方式',
150 192 dataIndex: 'paymentStatus',
151 193 valueType: 'text',
152   - hideInTable: true
  194 + hideInTable: true,
153 195 },
154 196 {
155 197 title: '物流方式',
156 198 dataIndex: 'logisticsMethod',
157 199 valueType: 'text',
158   - hideInTable: true
  200 + hideInTable: true,
159 201 },
160 202 {
161 203 title: '支付渠道',
162 204 dataIndex: 'paymentChannel',
163 205 valueType: 'text',
164   - hideInTable: true
  206 + hideInTable: true,
165 207 },
166 208 {
167 209 title: '银行名称',
168 210 dataIndex: 'bank',
169 211 valueType: 'text',
170   - hideInTable: true
  212 + hideInTable: true,
171 213 },
172 214 {
173 215 title: '支付流水',
174 216 dataIndex: 'paymentTransactionId',
175 217 valueType: 'text',
176   - hideInTable: true
  218 + hideInTable: true,
177 219 },
178 220 {
179 221 title: '所属部门',
180 222 dataIndex: 'productBelongBusiness',
181 223 valueType: 'text',
182   - hideInTable: true
  224 + hideInTable: true,
183 225 },
184 226 {
185 227 title: '创建日期',
... ... @@ -199,7 +241,7 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
199 241 title: '开票状态',
200 242 dataIndex: 'invoicingStatus',
201 243 valueType: 'text',
202   - hideInTable: true
  244 + hideInTable: true,
203 245 },
204 246 {
205 247 title: '开票日期',
... ... @@ -214,13 +256,13 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
214 256 };
215 257 },
216 258 },
217   - }
  259 + },
218 260 ];
219 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 267 const newExpandedRowKeys = expandedRowKeys.includes(key)
226 268 ? expandedRowKeys.filter((k) => k !== key)
... ... @@ -240,13 +282,37 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
240 282 { title: '商品名称', dataIndex: 'productName', key: 'productName' },
241 283 { title: '商品参数', dataIndex: 'parameters', key: 'parameters' },
242 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 310 { title: '物流单号', dataIndex: 'serialNumber', key: 'serialNumber' },
249   - { title: '开票状态', dataIndex: 'invoicingStatus', key: 'invoicingStatus' },
  311 + {
  312 + title: '开票状态',
  313 + dataIndex: 'invoicingStatus',
  314 + key: 'invoicingStatus',
  315 + },
250 316 { title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus' },
251 317 {
252 318 title: '操作',
... ... @@ -254,19 +320,49 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
254 320 key: 'operation',
255 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 357 title: '备注',
266 358 dataIndex: 'notes',
267 359 key: 'notes',
268 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 368 rowSelection={{
... ... @@ -285,7 +381,6 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
285 381 );
286 382 };
287 383  
288   -
289 384 return (
290 385 <PageContainer
291 386 header={{
... ... @@ -317,14 +412,15 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
317 412 current: 1;
318 413 },
319 414 sorter,
320   - filter,) => {
  415 + filter,
  416 + ) => {
321 417 const { data } = await postErpOrderListByPage({
322 418 // ...params,
323 419 // FIXME: remove @ts-ignore
324 420 // @ts-ignore
325 421 sorter,
326 422 filter,
327   - body: JSON.stringify(params)
  423 + body: JSON.stringify(params),
328 424 });
329 425 console.log(data);
330 426 return {
... ... @@ -333,17 +429,16 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
333 429 }}
334 430 toolBarRender={() => [
335 431 <Button key="show">一键展开</Button>,
336   - <Button key="out" onClick={()=>setOrderDrawerVisible(true)}>
  432 + <Button key="out" onClick={() => setOrderDrawerVisible(true)}>
337 433 新增
338 434 </Button>,
339 435 <Button key="primary" type="primary">
340 436 导出
341   - </Button>
342   -
  437 + </Button>,
343 438 ]}
344 439 />
345 440  
346   - {orderDrawerVisible &&
  441 + {orderDrawerVisible && (
347 442 <OrderDrawer
348 443 data={orderRow}
349 444 onClose={() => {
... ... @@ -351,9 +446,9 @@ const TableList: React.FC&lt;unknown&gt; = () =&gt; {
351 446 setOrderRow({});
352 447 }}
353 448 />
354   - }
  449 + )}
355 450 </PageContainer>
356 451 );
357 452 };
358 453  
359   -export default TableList;
360 454 \ No newline at end of file
  455 +export default TableList;
... ...