Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev/2025a' into dev/2025a

Browse Source
dev/ckeditor
Lei OT 1 month ago
parent fe3cde0c89 0b37f1a9a0
commit 0529cce11b
1 changed files with 147 additions and 143 deletions
Show Stats Download Patch File Download Diff File

290
src/components/OrderProfile.jsx
Unescape Escape View File

@ -1,168 +1,172 @@
import { import { WhatsAppOutlined, FileAddOutlined, MailOutlined, PhoneOutlined, UserOutlined, FieldNumberOutlined, CompassOutlined, CalendarOutlined, EditOutlined, CheckOutlined } from '@ant-design/icons'
WhatsAppOutlined, FileAddOutlined, MailOutlined,
PhoneOutlined,
UserOutlined,
FieldNumberOutlined,
SaveOutlined, CompassOutlined, CalendarOutlined,
HeartTwoTone,
MoneyCollectTwoTone,
FolderOutlined,
DeleteOutlined, EditOutlined,
FormOutlined
} from '@ant-design/icons'
import { useCallback, useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { import { App, Flex, Select, Tooltip, Tabs, Button, Divider, Typography, Skeleton, Checkbox } from 'antd'
Flex,Select,Tooltip, import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
Button, Space, Divider, Typography, import { copy } from '@/utils/commons'
Input, Radio,Skeleton ,Checkbox, const OrderProfile = ({ coliSN, ...props }) => {
} from 'antd' const { notification, message } = App.useApp()
import { InboxIcon, MailCheckIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions, fetchSetRemindStateAction, remindStatusOptionsMapped } from "@/stores/OrderStore";
import { copy, isEmpty } from "@/utils/commons";
const OrderProfile = ({coliSN, ...props}) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false)
const orderLabelOptions = copy(OrderLabelDefaultOptions); const orderLabelOptions = copy(OrderLabelDefaultOptions)
orderLabelOptions.unshift({ value: 0, label: "未设置", disabled: true }); orderLabelOptions.unshift({ value: 0, label: '未设置', disabled: true })
const orderStatusOptions = copy(OrderStatusDefaultOptions); const orderStatusOptions = copy(OrderStatusDefaultOptions)
const [ const [orderDetail, customerDetail, fetchOrderDetail, setOrderPropValue, appendOrderComment] = useOrderStore((s) => [
orderDetail, customerDetail, lastQuotation, quotationList, fetchOrderDetail, setOrderPropValue, appendOrderComment, fetchOtherEmail, otherEmailList, fetchHistoryOrder s.orderDetail,
] = useOrderStore(s => [ s.customerDetail,
s.orderDetail, s.customerDetail, s.lastQuotation, s.quotationList, s.fetchOrderDetail, s.setOrderPropValue, s.appendOrderComment, s.fetchOtherEmail, s.otherEmailList, s.fetchHistoryOrder s.fetchOrderDetail,
s.setOrderPropValue,
s.appendOrderComment,
]) ])
useEffect(() => { useEffect(() => {
if (coliSN) { if (coliSN) {
setLoading(true); setLoading(true)
fetchOrderDetail(coliSN) fetchOrderDetail(coliSN)
.then(result => { .then((result) => {
console.info(result) console.info(result)
}) })
.finally(() => setLoading(false)) .finally(() => setLoading(false))
// .catch(reason => { .catch((reason) => {
// notification.error({ notification.error({
// message: "查询出错", message: '查询出错',
// description: reason.message, description: reason.message,
// placement: "top", placement: 'top',
// duration: 60, duration: 60,
// }); })
// }); })
} }
return () => {} return () => {}
}, [coliSN]); }, [coliSN])
const regularText = () => { const regularText = () => {
if (orderDetail.buytime > 0) return "(R" + orderDetail.buytime + ")" if (orderDetail.buytime > 0) return '(R' + orderDetail.buytime + ')'
return '' return ''
} }
return ( return (
<> <>
<Skeleton active loading={loading}> {/* <Tabs
<Flex gap='small' vertical={true} justify='space-between'> tabPosition={'right'}
<Typography.Text> onTabClick={(key) => {
<FieldNumberOutlined className='pr-1' /> console.info(key)
{orderDetail.order_no} }}
</Typography.Text> items={Array.from({ length: 3 }).map((_, i) => {
<Typography.Text> const id = String(i + 1)
<UserOutlined className=' pr-1' /> return {
{customerDetail.name + regularText()} label: `Tab ${id}`,
</Typography.Text> key: id,
<Typography.Text> children: `Content of Tab ${id}`,
<CompassOutlined className=' pr-1' /> }
Thailand })}
</Typography.Text> /> */}
<Typography.Text> <Skeleton active loading={loading}>
<PhoneOutlined className=' pr-1' /> <Flex gap='small' vertical={true} justify='space-between'>
<Button type='link' size={'small'} onClick={() => {}}> <Typography.Text>
<FieldNumberOutlined className='pr-1' />
{orderDetail.order_no}
</Typography.Text>
<Typography.Text>
<UserOutlined className=' pr-1' />
{customerDetail.name + regularText()}
</Typography.Text>
<Typography.Text>
<CompassOutlined className=' pr-1' />
Thailand
</Typography.Text>
<Typography.Link href={'/callcenter/call/' + customerDetail.phone}>
<PhoneOutlined className=' pr-1' />
{customerDetail.phone} {customerDetail.phone}
</Button> </Typography.Link>
</Typography.Text> <Typography.Text>
<Typography.Text> <MailOutlined className='pr-1' />
<MailOutlined className=' pr-1' /> {customerDetail.email}
{customerDetail.email} </Typography.Text>
</Typography.Text> <Typography.Link
<Typography.Text> href='#'
<WhatsAppOutlined className='pr-1' /> onClick={() => {
<Button type='link' size={'small'} onClick={() => {}}> console.info('whatsapp clicked.')
}}>
<WhatsAppOutlined className=' pr-1' />
{customerDetail.whatsapp_phone_number} {customerDetail.whatsapp_phone_number}
</Button> </Typography.Link>
</Typography.Text> <Typography.Text>
<Typography.Text> <Tooltip title='出发日期'>
<CalendarOutlined className='pr-1' /> <CalendarOutlined className='pr-1' />
<span>出发日期：</span>2025-09-18，已下计划 2025-09-18
</Typography.Text> </Tooltip>
</Typography.Text>
</Flex> <Typography.Text>
<Divider orientation="left"> <Tooltip title='计划'>
<Typography.Text strong>订单状态</Typography.Text> <CheckOutlined className='pr-1' />
</Divider> 已下计划
<Flex gap='small' vertical={true} justify='space-between'> </Tooltip>
<Select className={`[&_.ant-select-selection-item]:text-gray-950`} </Typography.Text>
key={"orderlabel"} </Flex>
size="small" <Divider orientation='left'>
style={{ <Typography.Text strong>订单状态</Typography.Text>
width: "100%", </Divider>
}} <Flex gap='small' vertical={false} justify='space-between'>
variant="underlined" <Select
onSelect={value => { className={`[&_.ant-select-selection-item]:text-gray-950`}
}} key={'orderlabel'}
value={orderDetail.tags} size='small'
options={orderLabelOptions} style={{
/> width: '100%',
<Select className={`[&_.ant-select-selection-item]:text-gray-950`} }}
key={"orderstatus"} variant='underlined'
size="small" onSelect={(value) => {}}
style={{ value={orderDetail.tags}
width: "100%", options={orderLabelOptions}
}} />
variant="underlined" <Select
onSelect={value => { className={`[&_.ant-select-selection-item]:text-gray-950`}
}} key={'orderstatus'}
value={orderDetail.states} size='small'
options={orderStatusOptions} style={{
/> width: '100%',
</Flex> }}
variant='underlined'
<Divider orientation="left"> onSelect={(value) => {}}
<Typography.Text strong>催信</Typography.Text> value={orderDetail.states}
</Divider> options={orderStatusOptions}
<Checkbox.Group key='substatus' className="px-2" options={remindStatusOptions} /> />
</Flex>
<Divider orientation='left'> <Divider orientation='left'>
<Typography.Text strong>表单信息</Typography.Text> <Typography.Text strong>催信</Typography.Text>
<Tooltip title='添加'> </Divider>
<FileAddOutlined className='pl-1' /> <Checkbox.Group key='substatus' className='px-2' options={remindStatusOptions} />
</Tooltip>
</Divider>
<p className="p-2 overflow-auto m-0 break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
<Divider orientation="left"> <Divider orientation='left'>
<Typography.Text strong>特殊要求</Typography.Text> <Typography.Text strong>表单信息</Typography.Text>
</Divider> <Tooltip title='添加'>
<Typography.Text> <FileAddOutlined className='pl-1' />
{orderDetail.customer_request} </Tooltip>
</Typography.Text> </Divider>
<Divider orientation="left"> <p className='p-2 overflow-auto m-0 break-words whitespace-pre-wrap' dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
<Typography.Text strong>外联备注</Typography.Text>
</Divider>
<Typography.Text>
{orderDetail.wl_memo}
</Typography.Text>
<Divider orientation='left'>
<Typography.Text strong>特殊要求</Typography.Text>
</Divider>
<Typography.Text>{orderDetail.customer_request}</Typography.Text>
<Divider orientation='left'>
<Typography.Text strong>外联备注</Typography.Text>
<Tooltip title='修改'>
<EditOutlined className='pl-1' />
</Tooltip>
</Divider>
<Typography.Text>{orderDetail.wl_memo}</Typography.Text>
<Divider orientation='left'> <Divider orientation='left'>
<Typography.Text strong>附加信息</Typography.Text> <Typography.Text strong>附加信息</Typography.Text>
<Tooltip title='修改'> <Tooltip title='修改'>
<EditOutlined className='pl-1' /> <EditOutlined className='pl-1' />
</Tooltip> </Tooltip>
</Divider> </Divider>
<Typography.Text> <Typography.Text>泰国马来水灯节</Typography.Text>
泰国马来水灯节
</Typography.Text>
</Skeleton> </Skeleton>
</> </>
) )

Write Preview
Loading…
Cancel
Save