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

Write Preview
Loading…
Cancel
Save