You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
12 KiB
JavaScript
383 lines
12 KiB
JavaScript
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 useAuthStore from '@/stores/AuthStore'
|
|
import { prepareUrl, isNotEmpty } from '@/utils/commons'
|
|
import { API_HOST } from '@/config'
|
|
|
|
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: 150,
|
|
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 } = useAuthStore()
|
|
let fetchOrderUrl = `${API_HOST}/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_server/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])
|
|
|
|
const paginationProps = {
|
|
showQuickJumper: true,
|
|
showLessItems: true,
|
|
showSizeChanger: true,
|
|
showTotal: (total) => { return `总数：${total}` }
|
|
}
|
|
|
|
function groupByParam(array, param) {
|
|
return array.reduce((result, item) => {
|
|
(result[item[param]] = result[item[param]] || []).push(item);
|
|
return result;
|
|
}, {});
|
|
}
|
|
|
|
const deptMap = new Map([
|
|
['1', 'CH直销组'],
|
|
['2', 'CH大客户组'],
|
|
['7', '市场推广'],
|
|
['8', '德语市场'],
|
|
['9', '日语市场'],
|
|
['10', '商旅市场'],
|
|
['11', '法语市场'],
|
|
['12', '西语市场'],
|
|
['13', '英文在线组'],
|
|
['14', '商务Biztravel'],
|
|
['15', 'CH产品'],
|
|
['16', 'APP移动项目组'],
|
|
['17', 'ChinaTravel组'],
|
|
['18', 'CT市场'],
|
|
['20', '俄语市场'],
|
|
['21', '意语市场'],
|
|
['22', '爱游网'],
|
|
['23', '三峡站'],
|
|
['24', '桂林站'],
|
|
['25', '上海站'],
|
|
['26', '北京站'],
|
|
['27', '西藏站'],
|
|
['28', 'AH亚洲项目组'],
|
|
['29', 'DMC地接组'],
|
|
['30', 'Trippest项目组'],
|
|
['31', '花梨鹰'],
|
|
['32', 'Daytours板块'],
|
|
['33', 'GH项目组'],
|
|
['34', 'trippest网站'],
|
|
['35', 'newsletter营销'],
|
|
])
|
|
|
|
const groupOrderData = groupByParam(orderData, 'OPI_DEI_SN')
|
|
const deptKeys = Object.keys(groupOrderData)
|
|
const collapseItems = []
|
|
|
|
deptKeys.forEach((deptNo, index) => {
|
|
const deptOrderList = groupOrderData[deptNo]
|
|
collapseItems.push(
|
|
{
|
|
key: index,
|
|
label: deptMap.get(deptNo) + '订单',
|
|
children: <Table key={'Order Table' + deptNo} loading={loading} dataSource={deptOrderList}
|
|
columns={orderColumns}
|
|
pagination={paginationProps} />
|
|
}
|
|
)
|
|
})
|
|
|
|
return (<Collapse bordered={false} defaultActiveKey={0} items={collapseItems} />)
|
|
}
|
|
|
|
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} />}
|
|
/>
|
|
<OrderList formValues={formValues} />
|
|
</Space>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default OrderFollow
|