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

Merge remote-tracking branch 'origin/main' into dev/chat

Browse Source
dev/chat
Lei OT 2 years ago
parent 58198062ff f2768df484
commit 5d83ce7662
1 changed files with 143 additions and 123 deletions
Show Stats Download Patch File Download Diff File

266
src/views/OrderFollow.jsx
Unescape Escape View File

@ -1,13 +1,14 @@
import { useNavigate } from 'react-router-dom'
import { useRef, useEffect, useState } from 'react'
import { memo, useMemo, useCallback, useEffect, useState } from 'react'
import {
Row, Col, Divider, Table, Card, Button, Input,
Space, Segmented, Radio, Select, AutoComplete, Spin, Typography, Switch, DatePicker, List, Avatar
Space, Segmented, Radio, Select, Flex, Spin, Form, Switch, DatePicker, List, Avatar
} from 'antd'
import {
StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
} from '@ant-design/icons'
import { Conditional } from '@/components/Conditional'
import { useGetJson } from '@/hooks/userFetch'
const { RangePicker } = DatePicker;
@ -178,142 +179,161 @@ const columns = [
dataIndex: 'comment',
key: 'comment',
},
];
]
const AdvanceSearchForm = memo(function AdvanceSearch({ onSubmit }) {
const [form] = Form.useForm()
console.info('AdvanceSearch: ')
function handleSubmit(values) {
onSubmit(values);
}
return (
<Form
layout={'inline'}
form={form}
initialValues={{ orderLabel: '全部' }}
onFinish={handleSubmit}
style={{
maxWidth: 'none',
}}
>
<Form.Item label='标签' name='orderLabel'>
<Select
style={{
width: 100,
}}
options={[
{
value: '潜力',
label: '潜力',
},
{
value: '重点',
label: '重点',
},
{
value: '休眠',
label: '休眠',
}
]}
/>
</Form.Item>
<Form.Item label='状态' name='orderStatus'>
<Select
style={{
width: 100,
}}
options={[
{
value: '新订单',
label: '新订单',
},
{
value: '报价中',
label: '报价中',
},
{
value: '丢失',
label: '丢失',
},
{
value: '一催',
label: '一催',
},
{
value: '二催',
label: '二催',
},
{
value: '三催',
label: '三催',
},
]}
/>
</Form.Item>
<Form.Item label='订单号' name='orderNumber'>
<Input placeholder='订单号' allowClear />
</Form.Item>
<Form.Item label='出发日期' name='startDate'>
<RangePicker />
</Form.Item>
<Form.Item >
<Button type='primary' htmlType='submit'>搜索</Button>
</Form.Item>
</Form>
)
})
function OrderFollow() {
const [taskCategory, setTaskCategory] = useState('today')
const [advanceChecked, toggleAdvance] = useState(false)
const [searchCriteria, setSearchCriteria] = useState({
type: 'today',
orderStatus: '新状态',
orderNumber: '订单号',
orderLabel: '订单标签',
startDate: '走团时间'
})
const orderListMemo = useMemo(() => <OrderList searchCriteria={searchCriteria} />, [searchCriteria])
const handleSubmit = useCallback((criteria) => {
console.info('onSubmit.searchCriteria: ')
console.info(criteria)
setSearchCriteria({
...criteria,
type: 'advance'
})
}, [])
useEffect(() => {
}, [])
return (
<Spin spinning={false} delay={500}>
<Space direction='vertical' style={{ width: '100%' }}>
<Row gutter={[16, 16]} justify='start' align='middle'>
<Col span={10}>
<Radio.Group
options={[
{ label: '今日任务', value: 'today' },
{ label: '潜力客户', value: 'star' },
{ label: '重点订单', value: 'important' },
{ label: '成行', value: 'myfavorites' },
{ label: '走团中', value: 'ing' },
{ label: '走团后一月', value: 'lastMonth' }
]}
value={taskCategory}
onChange={({ target: { value } }) => {
setTaskCategory(value)
}}
optionType='button'
buttonStyle='solid'
/>
</Col>
<Col span={4}>
<Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
defaultChecked={false}
onChange={() => {toggleAdvance(!advanceChecked)}} />
</Col>
</Row>
<Conditional condition={advanceChecked} whenTrue={<AdvanceCriteria />} />
<>
<Space direction='vertical' size='large' style={{ width: '100%' }}>
<Flex gap='large' justify='start' align='center' horizontal>
<Radio.Group
options={[
{ label: '今日任务', value: 'today' },
{ label: '潜力客户', value: 'star' },
{ label: '重点订单', value: 'important' },
{ label: '成行', value: 'myfavorites' },
{ label: '走团中', value: 'ing' },
{ label: '走团后一月', value: 'lastMonth' }
]}
value={searchCriteria.type}
onChange={({ target: { value } }) => {
setSearchCriteria({
...searchCriteria,
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>
<Space
direction='vertical'
size='middle'
style={{
display: 'flex',
}}
>
<OrderList taskCategory={taskCategory} />
</Space>
</Spin>
{orderListMemo}
</>
)
function OrderList({ taskCategory }) {
console.info('taskCategory: ' + taskCategory)
return (
<>
<Table dataSource={dataSource} columns={columns} />
</>
)
}
function OrderList({ searchCriteria }) {
function AdvanceCriteria() {
const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
console.info(countryList)
console.info('OrderList.searchCriteria: ')
console.info(searchCriteria)
return (
<Space direction='vertical' style={{ width: '100%' }}>
<Row gutter={[16, 16]} justify='start' align='middle'>
<Col span={2}>
<Select
defaultValue='全部'
style={{
width: 100,
}}
options={[
{
value: '潜力',
label: '潜力',
},
{
value: '重点',
label: '重点',
},
{
value: '休眠',
label: '休眠',
}
]}
/>
</Col>
<Col span={2}>
<Select
defaultValue='全部'
style={{
width: 100,
}}
options={[
{
value: '新订单',
label: '新订单',
},
{
value: '报价中',
label: '报价中',
},
{
value: '丢失',
label: '丢失',
},
{
value: '一催',
label: '一催',
},
{
value: '二催',
label: '二催',
},
{
value: '三催',
label: '三催',
},
]}
/>
</Col>
<Col span={6}>
<Input placeholder='订单号' allowClear />
</Col>
<Col span={4}>
<RangePicker />
</Col>
<Col span={2}>
<Button icon={<SearchOutlined />} onClick={() => {
search()
}}>搜索</Button>
</Col>
</Row>
</Space>
<Table loading={countryList === null} dataSource={dataSource} columns={columns} />
)
}
}

Write Preview
Loading…
Cancel
Save