diff --git a/src/pages/Order/index.tsx b/src/pages/Order/index.tsx index 3f75af3..71fc415 100644 --- a/src/pages/Order/index.tsx +++ b/src/pages/Order/index.tsx @@ -7,9 +7,10 @@ import { import { orderExport } from '@/services/order'; import { enumValueToLabel, formatDateTime } from '@/utils'; import { - ClockCircleOutlined, - CopyOutlined, + ClockCircleTwoTone, + CopyTwoTone, DownOutlined, + EditTwoTone, EllipsisOutlined, } from '@ant-design/icons'; import { @@ -22,6 +23,7 @@ import { Avatar, Button, Checkbox, + Divider, Dropdown, Flex, MenuProps, @@ -181,32 +183,32 @@ const OrderPage = () => { {optRecord.productName} </div> <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis"> - {optRecord.parameters} + <span className="text-gray-500">参数:{optRecord.parameters}</span> </div> - <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis"> - {optRecord.notes} - <Button - type="dashed" - size="small" + <Flex title={optRecord.notes}> + <div className="max-w-[90%] whitespace-no-wrap overflow-hidden overflow-ellipsis"> + <span className="text-gray-500">备注:{optRecord.notes}</span> + </div> + <EditTwoTone onClick={() => { setNotesEditVisible(true); setOrderRow(optRecord); setIsMainOrder(false); }} - > - 详情 - </Button> - </div> + /> + </Flex> </Flex> <Flex className="w-[16%]" vertical gap="small"> <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis"> - 单价:¥{optRecord.productPrice} + <span className="text-gray-500">单价:</span>¥ + {optRecord.productPrice} </div> <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis"> - 数量:x{optRecord.quantity} + <span className="text-gray-500">数量:</span>x{optRecord.quantity} </div> <div className="whitespace-no-wrap overflow-hidden overflow-ellipsis"> - 合计:¥{optRecord.subOrderPayment} + <span className="text-gray-500">合计:</span>¥ + {optRecord.subOrderPayment} </div> </Flex> <Flex className="w-[10%]" vertical gap="small"> @@ -448,13 +450,6 @@ const OrderPage = () => { // 主订单内容渲染 const MainOrderColumnRender = ({ record }: { record: OrderListItemType }) => { - // const handleExpand = (key: number) => { - // const newExpandedRowKeys = expandedRowKeys.includes(key) - // ? expandedRowKeys.filter((k) => k !== key) - // : [...expandedRowKeys, key]; - - // setExpandedRowKeys(newExpandedRowKeys); - // }; return ( <Flex vertical={true}> {/* 编号、时间、销售信息 */} @@ -469,43 +464,56 @@ const OrderPage = () => { onChange={() => onCheckboxChange(record.id)} checked={selectedItems.includes(record.id)} > + <Space split={<Divider type="vertical" />}> + <div> + <span className="text-gray-500">订单号:</span> + <span>{record.id}</span> + </div> + <span>{formatDateTime(record.createTime)}</span> + </Space> + </Checkbox> + <Space split={<Divider type="vertical" />}> <div> - 订单号:{record.id} - {' ' + formatDateTime(record.createTime)} + <span className="text-gray-500">代表:</span> + {record.salesCode} </div> - </Checkbox> - <div>代表:{record.salesCode}</div> - <span>单位:{record.institution}</span> - <span>联系人:{record.institutionContactName}</span> + <span> + <span className="text-gray-500">单位:</span> + {record.institution} + </span> + <span> + <span className="text-gray-500">联系人:</span> + {record.institutionContactName} + </span> + </Space> </Flex> </Flex> <Flex className="pl-6" align="center"> - <div> - 备注: - <span className="ml-2">{record.notes}</span> + <div title={record.notes}> + <div className="max-w-md whitespace-no-wrap overflow-hidden overflow-ellipsis"> + <span className="text-gray-500">备注:</span> + <span className="ml-2">{record.notes}</span> + </div> </div> - <Button - className="p-0" - type="link" + <EditTwoTone + className="hover:curcor-pointer" onClick={() => { setNotesEditVisible(true); setOrderRow(record); setIsMainOrder(true); }} - > - 备注 - </Button> + /> </Flex> </Flex> <Flex wrap="wrap" gap="middle" vertical> <Flex justify="flex-end"> <Flex wrap="wrap" gap="middle" align="center"> <div> - 总金额: + <span>总金额:</span> <span className="text-lg">{record.totalPayment}¥</span> </div> {rolePath?.includes('addOrder') ? ( - <CopyOutlined + <CopyTwoTone className="hover:cursor-pointer" onClick={() => { setOrderOptType('copy'); @@ -522,7 +530,7 @@ const OrderPage = () => { '' )} - <ClockCircleOutlined + <ClockCircleTwoTone className="hover:cursor-pointer" onClick={() => { setHistoryModalVisible(true); @@ -939,7 +947,7 @@ const OrderPage = () => { // expandable={{ expandedRowRender }} dateFormatter="string" options={false} - headerTitle="订单列表" + headerTitle="" search={{ labelWidth: 'auto', // onCollapse: resize,