|
|
import {
|
|
|
App, Badge, Button, DatePicker, Divider, Flex, Form, Input,
|
|
|
Radio, Row, Col, Select, Space, Switch, Table, Tag, Collapse
|
|
|
} from 'antd'
|
|
|
import { memo, useCallback, useEffect, useState } from 'react'
|
|
|
import { Link } from 'react-router-dom'
|
|
|
import dayjs from 'dayjs'
|
|
|
import { Conditional } from '@/components/Conditional'
|
|
|
import { useAuthContext } from '@/stores/AuthContext'
|
|
|
import { prepareUrl, isNotEmpty } from '@/utils/commons'
|
|
|
|
|
|
const { RangePicker } = DatePicker
|
|
|
|
|
|
const AdvanceSearchForm = memo(function ({ onSubmit }) {
|
|
|
|
|
|
const DATE_RANGE_PRESETS = [
|
|
|
{
|
|
|
label: '本周',
|
|
|
value: [dayjs().startOf('w'), dayjs().endOf('w')],
|
|
|
},
|
|
|
{
|
|
|
label: '上周',
|
|
|
value: [dayjs().startOf('w').subtract(7, 'days'), dayjs().endOf('w').subtract(7, 'days')],
|
|
|
},
|
|
|
{
|
|
|
label: '本月',
|
|
|
value: [dayjs().startOf('M'), dayjs().endOf('M')],
|
|
|
},
|
|
|
{
|
|
|
label: '上月',
|
|
|
value: [dayjs().subtract(1, 'M').startOf('M'), dayjs().subtract(1, 'M').endOf('M')],
|
|
|
},
|
|
|
{
|
|
|
label: '前三月',
|
|
|
value: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
|
|
|
},
|
|
|
{
|
|
|
label: '本年',
|
|
|
value: [dayjs().startOf('y'), dayjs().endOf('y')],
|
|
|
},
|
|
|
];
|
|
|
const [form] = Form.useForm()
|
|
|
function handleSubmit(values) {
|
|
|
onSubmit?.(values)
|
|
|
}
|
|
|
return (
|
|
|
<Form
|
|
|
layout={'vertical'}
|
|
|
form={form}
|
|
|
initialValues={{
|
|
|
orderLabel: '', orderStatus: '', remindState: '',
|
|
|
startDateRange: [dayjs().startOf('M'), dayjs().endOf('M')]
|
|
|
}}
|
|
|
onFinish={handleSubmit}
|
|
|
>
|
|
|
<Row justify='start' gutter={16}>
|
|
|
<Col span={4}>
|
|
|
<Form.Item label='订单号' name='orderNumber'>
|
|
|
<Input placeholder='订单号' allowClear />
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
<Col span={4}>
|
|
|
<Form.Item label='邮件地址/客人电话' name='emailOrPhone'>
|
|
|
<Input placeholder='邮件地址/客人电话' allowClear />
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
<Col span={4}>
|
|
|
<Form.Item label='First name' name='firstName'>
|
|
|
<Input placeholder='First name' allowClear />
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
<Col span={4}>
|
|
|
<Form.Item label='Last name' name='lastName'>
|
|
|
<Input placeholder='Last name' allowClear />
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
<Row justify='start' align='middle' gutter={16}>
|
|
|
<Col span={2}>
|
|
|
<Form.Item label='标签' name='orderLabel'>
|
|
|
<Select
|
|
|
options={[
|
|
|
{ value: '', label: '全部' },
|
|
|
{ value: '240003', label: '重点' },
|
|
|
{ value: '240002', label: '次重点' },
|
|
|
{ value: '240001', label: '一般' }
|
|
|
]}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
<Col span={2}>
|
|
|
<Form.Item label='状态' name='orderStatus'>
|
|
|
<Select
|
|
|
options={[
|
|
|
{ value: '', label: '全部' },
|
|
|
{ value: '1', label: '新订单' },
|
|
|
{ value: '2', label: '报价中' },
|
|
|
{ value: '3', label: '以后联系' },
|
|
|
{ value: '4', label: '等待付订金' },
|
|
|
{ value: '5', label: '成行' },
|
|
|
{ value: '6', label: '丢失' },
|
|
|
{ value: '7', label: '取消' }
|
|
|
]}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
<Col span={2}>
|
|
|
<Form.Item label='催信' name='remindState'>
|
|
|
<Select
|
|
|
options={[
|
|
|
{ value: '', label: '全部' },
|
|
|
{ value: '1', label: '一催' },
|
|
|
{ value: '2', label: '二催' },
|
|
|
{ value: '3', label: '三催' }
|
|
|
]}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
<Col span={4}>
|
|
|
<Form.Item label='出发日期' name='startDateRange'>
|
|
|
<RangePicker
|
|
|
allowClear={false}
|
|
|
inputReadOnly={true}
|
|
|
presets={DATE_RANGE_PRESETS}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
<Col span={4}>
|
|
|
<Form.Item label='确认日期' name='confirmDateRange'>
|
|
|
<RangePicker
|
|
|
allowClear={true}
|
|
|
inputReadOnly={true}
|
|
|
presets={DATE_RANGE_PRESETS}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
</Col>
|
|
|
<Col span={1} offset={1}>
|
|
|
<Button type='primary' htmlType='submit'>搜索</Button>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</Form>
|
|
|
)
|
|
|
})
|
|
|
|
|
|
function OrderList({ formValues }) {
|
|
|
|
|
|
const orderColumns = [
|
|
|
{
|
|
|
title: '订单号',
|
|
|
dataIndex: 'COLI_ID',
|
|
|
width: 222,
|
|
|
render: (text, record) => {
|
|
|
if (record.COLI_LineGrade === 240003) return <Space>{text}<Tag color='red'>重点</Tag></Space>
|
|
|
else if (record.COLI_LineGrade === 240002) return <Space>{text}<Tag color='green'>次重点</Tag></Space>
|
|
|
else if (record.COLI_LineGrade === 240001) return <Space>{text}<Tag color='blue'>一般</Tag></Space>
|
|
|
else return <Space>{text}</Space>
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
title: '客人姓名',
|
|
|
dataIndex: 'coli_guest',
|
|
|
render: (text, record) => {
|
|
|
let regularText = ''
|
|
|
if (record.buytime > 0) regularText = '(R' + record.buytime + ')'
|
|
|
return (
|
|
|
<Space>
|
|
|
<Link to={`/order/chat/${record.COLI_SN}`} state={record}>{text + regularText}</Link>
|
|
|
<Badge
|
|
|
count={record.unread_msg}
|
|
|
style={{
|
|
|
backgroundColor: '#52c41a',
|
|
|
}}
|
|
|
/>
|
|
|
</Space>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
title: '订单状态',
|
|
|
dataIndex: 'COLI_State',
|
|
|
width: 120,
|
|
|
render: (text, record) => {
|
|
|
let extra = ''
|
|
|
if (record.RemindState === 1) extra = '(一催)'
|
|
|
if (record.RemindState === 2) extra = '(二催)'
|
|
|
if (record.RemindState === 3) extra = '(三催)'
|
|
|
return text + extra
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
title: '报价title',
|
|
|
dataIndex: 'lettertitle',
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
title: '客人最后一次回复时间',
|
|
|
dataIndex: 'last_received_time',
|
|
|
},
|
|
|
{
|
|
|
title: '附加信息',
|
|
|
dataIndex: 'COLI_Introduction',
|
|
|
},
|
|
|
]
|
|
|
const { notification } = App.useApp()
|
|
|
const [orderData, setOrderData] = useState([])
|
|
|
const [loading, setLoading] = useState(false)
|
|
|
const { loginUser } = useAuthContext()
|
|
|
let fetchOrderUrl = `https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback/getwlorder?opisn=${loginUser.userId}&otype=${formValues.type}`
|
|
|
|
|
|
if (formValues.type === 'advance') {
|
|
|
const fromDate = formValues.startDateRange[0].format('YYYY-MM-DD')
|
|
|
const thruDate = formValues.startDateRange[1].format('YYYY-MM-DD')
|
|
|
let confirmFromDate = null
|
|
|
let confirmThruDate = null
|
|
|
|
|
|
if (isNotEmpty(formValues.confirmDateRange)) {
|
|
|
confirmFromDate = formValues.confirmDateRange[0].format('YYYY-MM-DD')
|
|
|
confirmThruDate = formValues.confirmDateRange[1].format('YYYY-MM-DD')
|
|
|
}
|
|
|
fetchOrderUrl = prepareUrl('https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback/getdvancedwlorder')
|
|
|
.append('opisn', loginUser.userId)
|
|
|
.append('startdate', fromDate)
|
|
|
.append('enddate', thruDate)
|
|
|
.append('tag', formValues.orderLabel)
|
|
|
.append('orderstate', formValues.orderStatus)
|
|
|
.append('remindstate', formValues.remindState)
|
|
|
.append('coli_id', formValues.orderNumber)
|
|
|
.append('firstName', formValues.firstName)
|
|
|
.append('lastName', formValues.lastName)
|
|
|
.append('emailphone', formValues.emailOrPhone)
|
|
|
.append('ConfirmDateStart', confirmFromDate)
|
|
|
.append('ConfirmDateEnd', confirmThruDate)
|
|
|
.build()
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
|
setLoading(true)
|
|
|
fetch(fetchOrderUrl)
|
|
|
.then(response => response.json())
|
|
|
.then(json => {
|
|
|
if (json.errcode === 0) {
|
|
|
setOrderData(json.result.map((order) => { return { ...order, key: order.COLI_ID } }))
|
|
|
} else {
|
|
|
notification.error({
|
|
|
message: '查询出错',
|
|
|
description: json?.errmsg,
|
|
|
placement: 'top',
|
|
|
duration: 60,
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
.finally(() => setLoading(false))
|
|
|
.catch(reason => {
|
|
|
notification.error({
|
|
|
message: '查询出错',
|
|
|
description: reason.message,
|
|
|
placement: 'top',
|
|
|
duration: 60,
|
|
|
})
|
|
|
})
|
|
|
}, [formValues])
|
|
|
|
|
|
return (
|
|
|
<Table key='Order Table' loading={loading} dataSource={orderData}
|
|
|
columns={orderColumns}
|
|
|
pagination={{
|
|
|
showQuickJumper: true,
|
|
|
showLessItems: true,
|
|
|
showSizeChanger: true,
|
|
|
showTotal: (total) => { return `总数：${total}` }
|
|
|
}} />
|
|
|
)
|
|
|
}
|
|
|
function OrderFollow() {
|
|
|
|
|
|
const [advanceChecked, toggleAdvance] = useState(false)
|
|
|
const [formValues, setFormValues] = useState({
|
|
|
type: 'today',
|
|
|
orderStatus: '新状态',
|
|
|
orderNumber: '订单号',
|
|
|
orderLabel: '订单标签',
|
|
|
startDate: '走团时间'
|
|
|
})
|
|
|
|
|
|
const handleSubmit = useCallback((values) => {
|
|
|
setFormValues({ ...values, type: 'advance' })
|
|
|
}, [])
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
<Space direction='vertical' size='large' style={{ width: '100%' }}>
|
|
|
<Flex gap='large' justify='start' align='center' horizontal='true'>
|
|
|
<Radio.Group
|
|
|
options={[
|
|
|
{ label: '今日任务', value: 'today' },
|
|
|
{ label: '重点订单', value: 'zhongdian' },
|
|
|
{ label: '次重点客户', value: 'qianli' },
|
|
|
{ label: '成行', value: 'chengxing' },
|
|
|
{ label: '走团中', value: 'zoutuan' },
|
|
|
{ label: '走团后一月', value: 'zoutuanhou' }
|
|
|
]}
|
|
|
value={formValues.type}
|
|
|
onChange={({ target: { value } }) => {
|
|
|
setFormValues({
|
|
|
...formValues,
|
|
|
type: value
|
|
|
})
|
|
|
}}
|
|
|
optionType='button'
|
|
|
buttonStyle='solid'
|
|
|
disabled={advanceChecked}
|
|
|
/>
|
|
|
<Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
|
|
|
defaultChecked={false}
|
|
|
onChange={() => { toggleAdvance(!advanceChecked) }} />
|
|
|
</Flex>
|
|
|
<Conditional condition={advanceChecked} whenTrue={<AdvanceSearchForm onSubmit={handleSubmit} />}
|
|
|
/>
|
|
|
</Space>
|
|
|
<Divider plain orientation='left'></Divider>
|
|
|
<Collapse defaultActiveKey={['1', '2', '3']} items={[
|
|
|
{
|
|
|
key: '1',
|
|
|
label: 'AH 订单：25',
|
|
|
children: <OrderList formValues={formValues} />
|
|
|
},
|
|
|
{
|
|
|
key: '2',
|
|
|
label: 'CH 订单：25',
|
|
|
children: <OrderList formValues={formValues} />
|
|
|
},
|
|
|
{
|
|
|
key: '3',
|
|
|
label: 'GH 订单：25',
|
|
|
children: <OrderList formValues={formValues} />
|
|
|
},
|
|
|
]}
|
|
|
/>
|
|
|
</>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
export default OrderFollow
|