|
|
|
|
@ -1,33 +1,14 @@
|
|
|
|
|
import useAuthStore from '@/stores/AuthStore'
|
|
|
|
|
import useFormStore from '@/stores/FormStore'
|
|
|
|
|
import { useOrderStore } from '@/stores/OrderStore'
|
|
|
|
|
import { isEmpty, groupBy, buildTree, readIndexDB, writeIndexDB, pick } from '@/utils/commons'
|
|
|
|
|
import { StarTwoTone, CalendarTwoTone, FolderOutlined, DeleteOutlined, ClockCircleOutlined, FormOutlined, DatabaseOutlined, UnorderedListOutlined, LeftOutlined } from '@ant-design/icons'
|
|
|
|
|
import { Flex, Drawer, Radio, Divider, Segmented, Tree, Typography, Checkbox, Layout, Row, Col, Empty, Splitter, Button } from 'antd'
|
|
|
|
|
import { pick } from '@/utils/commons'
|
|
|
|
|
import { UnorderedListOutlined, LeftOutlined } from '@ant-design/icons'
|
|
|
|
|
import { Flex, Segmented, Tree, Typography, Layout, Splitter, Button } from 'antd'
|
|
|
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
|
|
|
import { InboxIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
|
|
|
|
|
import { useShallow } from 'zustand/react/shallow'
|
|
|
|
|
import EmailDetailInline from '../Conversations/Online/Components/EmailDetailInline'
|
|
|
|
|
import { getEmailDirAction, queryEmailListAction } from '@/actions/EmailActions'
|
|
|
|
|
import OrderProfile from '@/components/OrderProfile'
|
|
|
|
|
import Mailbox from './components/Mailbox'
|
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
import { DATE_FORMAT, DATETIME_FORMAT } from '@/config'
|
|
|
|
|
import { MailboxDirIcon } from './components/MailboxDirIcon'
|
|
|
|
|
|
|
|
|
|
const todoTypes = {
|
|
|
|
|
// 1新订单；2未读消息；3需一催；4需二催；5需三催；6未处理邮件；入境提醒coli_ordertype=7，余款提醒coli_ordertype=8
|
|
|
|
|
1: '新订单',
|
|
|
|
|
2: '未读',
|
|
|
|
|
3: '一催',
|
|
|
|
|
4: '二催',
|
|
|
|
|
5: '三催',
|
|
|
|
|
6: '未处理',
|
|
|
|
|
7: '入境提醒',
|
|
|
|
|
8: '余款提醒',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const deptMap = new Map([
|
|
|
|
|
['1', 'CH'], // CH直销组
|
|
|
|
|
['2', 'CH大客户组'],
|
|
|
|
|
@ -62,8 +43,6 @@ const deptMap = new Map([
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
function Follow() {
|
|
|
|
|
const orderList = useOrderStore((state) => state.orderList)
|
|
|
|
|
const fetchOrderList = useOrderStore((state) => state.fetchOrderList)
|
|
|
|
|
|
|
|
|
|
const [collapsed, setCollapsed] = useState(false)
|
|
|
|
|
|
|
|
|
|
@ -73,30 +52,6 @@ function Follow() {
|
|
|
|
|
const accountDEI = useMemo(() => {
|
|
|
|
|
return accountList.map((ele) => ({ key: ele.OPI_DEI_SN, value: ele.OPI_DEI_SN, label: deptMap.get(`${ele.OPI_DEI_SN}`) }))
|
|
|
|
|
}, [accountList])
|
|
|
|
|
const defaultStickyTree = useMemo(() => {
|
|
|
|
|
return accountList.reduce(
|
|
|
|
|
(a, ele) => ({
|
|
|
|
|
...a,
|
|
|
|
|
[ele.OPI_DEI_SN]: [
|
|
|
|
|
{
|
|
|
|
|
title: '今日任务',
|
|
|
|
|
key: ele.OPI_DEI_SN + '-today',
|
|
|
|
|
getMails: false, iconIndex: 'star',
|
|
|
|
|
icon: <StarTwoTone />,
|
|
|
|
|
children: [], COLI_SN: 0,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '待办任务',
|
|
|
|
|
key: ele.OPI_DEI_SN + '-todo',
|
|
|
|
|
getMails: false, iconIndex: 'calendar',
|
|
|
|
|
icon: <CalendarTwoTone />,
|
|
|
|
|
children: [], COLI_SN: 0,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}),
|
|
|
|
|
{},
|
|
|
|
|
)
|
|
|
|
|
}, [accountList])
|
|
|
|
|
|
|
|
|
|
const [getOPIEmailDir] = useConversationStore(state => [state.getOPIEmailDir]);
|
|
|
|
|
const [currentMailboxDEI, setCurrentMailboxDEI, mailboxNestedDirsActive] = useConversationStore(state => [state.currentMailboxDEI, state.setCurrentMailboxDEI, state.mailboxNestedDirsActive]);
|
|
|
|
|
@ -113,18 +68,12 @@ function Follow() {
|
|
|
|
|
return x
|
|
|
|
|
}, [mailboxActiveNode.VKey])
|
|
|
|
|
|
|
|
|
|
// const [activeEmailId, setActiveEmailId] = useState(0)
|
|
|
|
|
|
|
|
|
|
const [deiStickyTree, setDeiStickyTree] = useState({})
|
|
|
|
|
const [stickyTree, setStickyTree] = useState([])
|
|
|
|
|
const [expandTree, setExpandTree] = useState([])
|
|
|
|
|
|
|
|
|
|
const handleSwitchAccount = (value) => {
|
|
|
|
|
setActiveEmailId(0);
|
|
|
|
|
|
|
|
|
|
setCurrentMailboxDEI(value)
|
|
|
|
|
setStickyTree(deiStickyTree[value] || [])
|
|
|
|
|
setExpandTree([`${value}-today`, `${value}-todo`])
|
|
|
|
|
const opi = accountListDEIMapped[value].OPI_SN
|
|
|
|
|
getOPIEmailDir(opi)
|
|
|
|
|
setCurrentMailboxOPI(opi);
|
|
|
|
|
@ -140,66 +89,14 @@ function Follow() {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
fetchOrderList({ type: 'today' }, loginUser)
|
|
|
|
|
return () => {}
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
// 1新订单；2未读消息；3需一催；4需二催；5需三催；6未处理邮件；入境提醒coli_ordertype=7，余款提醒coli_ordertype=8
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log('orderList render', currentMailboxDEI, currentMailboxOPI)
|
|
|
|
|
const byDEI = groupBy(orderList, 'OPI_DEI_SN')
|
|
|
|
|
// console.log(byDEI, 'byDEI')
|
|
|
|
|
const byState = Object.keys(byDEI).reduce((acc, key) => {
|
|
|
|
|
// const stickyIndex0 = byDEI[key].filter(ele => [1, 2, 6].includes(ele.COLI_StateCode))
|
|
|
|
|
// const stickyIndex1 = byDEI[key].filter(ele => ![1, 2, 6].includes(ele.COLI_StateCode))
|
|
|
|
|
const sticky = groupBy(byDEI[key], (ele) => ([1, 2, 6].includes(ele.coli_ordertype) ? 0 : 1))
|
|
|
|
|
// const sticky = groupBy(byDEI[key], ele => [1, 2, 6].includes(ele.COLI_StateCode) ? 'today' : 'todo');
|
|
|
|
|
// console.log(sticky, ';;;;');
|
|
|
|
|
// const deiName = deptMap.get(`${key}`);
|
|
|
|
|
const treeNode = [
|
|
|
|
|
{
|
|
|
|
|
title: '今日任务',
|
|
|
|
|
key: key + '-today',
|
|
|
|
|
getMails: false,iconIndex: 'star',
|
|
|
|
|
icon: <StarTwoTone />, _raw: {COLI_SN: 0, IsTrue: 0,},
|
|
|
|
|
children: (sticky[0] || []).map((o) => ({
|
|
|
|
|
key: `today-${o.COLI_SN}`,
|
|
|
|
|
title: `(${todoTypes[o.coli_ordertype] || o.COLI_State}) ${o.COLI_ID}`,
|
|
|
|
|
iconIndex: 13,
|
|
|
|
|
parent: key + '-today',
|
|
|
|
|
parentTitle: '今日任务',
|
|
|
|
|
parentIconIndex: 'star',
|
|
|
|
|
_raw: { ...o, VKey: o.COLI_SN, VName: o.COLI_ID, VParent:-1, IsTrue: 0, ApplyDate: '', OrderSourceType: 227001, parent: -1 },
|
|
|
|
|
})),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '待办任务',
|
|
|
|
|
key: key + '-todo',
|
|
|
|
|
getMails: false,iconIndex: 'calendar',
|
|
|
|
|
icon: <CalendarTwoTone />,_raw: {COLI_SN: 0, IsTrue: 0,},
|
|
|
|
|
children: (sticky[1] || []).map((o) => ({
|
|
|
|
|
key: `todo-${o.COLI_SN}`,
|
|
|
|
|
title: `(${todoTypes[o.coli_ordertype] || o.COLI_State}) ${o.COLI_ID}`,
|
|
|
|
|
iconIndex: 13,
|
|
|
|
|
parent: key + '-todo',
|
|
|
|
|
parentTitle: '待办任务',
|
|
|
|
|
parentIconIndex: 'calendar',
|
|
|
|
|
_raw: { ...o, VKey: o.COLI_SN, VName: o.COLI_ID, VParent:-1, IsTrue: 0, ApplyDate: '', OrderSourceType: 227001, parent: -1 },
|
|
|
|
|
})),
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
// { key, title: deiName, children: sticky[0] };
|
|
|
|
|
return { ...acc, [key]: treeNode }
|
|
|
|
|
}, defaultStickyTree)
|
|
|
|
|
// console.log('tree 0', byState);
|
|
|
|
|
setDeiStickyTree(byState)
|
|
|
|
|
const first = currentMailboxDEI || accountDEI[0].value
|
|
|
|
|
setExpandTree([`${first}-today`, `${first}-todo`, mailboxActiveNode.key])
|
|
|
|
|
setStickyTree(byState[first] || [])
|
|
|
|
|
const opi = accountListDEIMapped[first].OPI_SN
|
|
|
|
|
setExpandTree([`${opi}-today`, `${opi}-todo`])
|
|
|
|
|
|
|
|
|
|
return () => {}
|
|
|
|
|
}, [orderList])
|
|
|
|
|
}, [currentMailboxDEI, mailboxNestedDirsActive])
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
@ -208,7 +105,7 @@ function Follow() {
|
|
|
|
|
<Flex justify='start' align='start' vertical className='h-full'>
|
|
|
|
|
<Segmented className='w-full' block shape='round' options={accountDEI} value={currentMailboxDEI} onChange={handleSwitchAccount} />
|
|
|
|
|
<div className='overflow-y-auto flex-auto w-full [&_.ant-tree-switcher]:me-0 [&_.ant-tree-node-content-wrapper]:px-0 [&_.ant-tree-node-content-wrapper]:text-ellipsis [&_.ant-tree-node-content-wrapper]:overflow-hidden [&_.ant-tree-node-content-wrapper]:whitespace-nowrap'>
|
|
|
|
|
<Tree
|
|
|
|
|
<Tree className='[&_.ant-typography-ellipsis]:max-w-44 [&_.ant-typography-ellipsis]:min-w-36'
|
|
|
|
|
key='sticky-today'
|
|
|
|
|
blockNode
|
|
|
|
|
showIcon
|
|
|
|
|
@ -219,10 +116,9 @@ function Follow() {
|
|
|
|
|
onExpand={(expandedKeys) => setExpandTree(expandedKeys)}
|
|
|
|
|
expandedKeys={expandTree}
|
|
|
|
|
defaultExpandedKeys={expandTree}
|
|
|
|
|
treeData={[...(stickyTree || []), ...mailboxNestedDirsActive]}
|
|
|
|
|
// treeData={mergedTree}
|
|
|
|
|
treeData={mailboxNestedDirsActive}
|
|
|
|
|
icon={(node) => <MailboxDirIcon type={node?.iconIndex} />}
|
|
|
|
|
titleRender={(node) => <Typography.Text ellipsis={{ tooltip: node.title }}>{node.title}</Typography.Text>}
|
|
|
|
|
titleRender={(node) => <Typography.Text ellipsis={{ tooltip: node.title }} className={`${node?._raw?.IsSuccess===1 ? 'text-primary' : ''}`}>{node.title}</Typography.Text>}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</Flex>
|
|
|
|
|
|
Lei OT
4 months ago