移动端和桌面端统一使用钉钉 OAuth 验证

src/main.jsx

@@ -17,7 +17,7 @@ import ErrorPage from '@/components/ErrorPage'
 import Conversations from '@/views/Conversations/ChatWindow'
 import MobileConversation from '@/views/mobile/Conversation'
 import MobileChat from '@/views/mobile/Chat'
-import MobileLogin from '@/views/mobile/Login'
+import DingdingLogin from '@/views/dingding/Login'
 import useAuthStore from '@/stores/AuthStore'
 import '@/assets/index.css'
 
@@ -61,10 +61,11 @@ const router = createBrowserRouter([
     path: '/p',
     element: <Standlone />,
     children: [
-      { path: 'dingding/qrcode', element: isMobileApp ? <MobileLogin /> : <DingdingQRCode /> },
-      { path: 'dingding/callback', element: <DingdingCallback /> },
+      { path: 'dingding/login', element: <DingdingLogin /> },
       { path: 'dingding/logout', element: <DingdingLogout /> },
-      { path: 'mobile-login', element: <MobileLogin /> },
+      { path: 'dingding/qrcode', element: isMobileApp ? <DingdingLogin /> : <DingdingQRCode /> },
+      { path: 'dingding/callback', element: <DingdingCallback /> },
+      { path: 'mobile-login', element: <DingdingLogin /> },
     ],
   },
 ]);

src/views/AuthApp.jsx

@@ -43,7 +43,7 @@ function AuthApp() {
   useEffect(() => {
     // 除了路由 /p...以外都需要登陆系统
     if ((loginUser.userId === -1) && (href.indexOf('/p/') === -1)) {
-      navigate('/p/dingding/qrcode')
+      navigate('/p/dingding/login')
     }
 	}, [href])
 

src/views/Standlone.jsx

@@ -24,7 +24,7 @@ function Standlone() {
                 <img src={AppLogo} className='logo' alt='App logo' />
               </NavLink>
               <Title level={3}>
-              聊天式销售平台
+              销售平台
               </Title>
             </Col>
           </Row>

src/views/dingding/Callback.jsx

@@ -1,10 +1,8 @@
 import useAuthStore from '@/stores/AuthStore'
 import { isNotEmpty } from '@/utils/commons'
-import { Flex, Result, Spin, Typography } from 'antd'
+import { Flex, Result, Spin } from 'antd'
 import { useEffect } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-
-const { Title } = Typography
+import { useNavigate } from 'react-router-dom'
 
 // 钉钉扫码开发文档：https://open.dingtalk.com/document/orgapp/obtain-identity-credentials#title-4up-u8w-5ug
 // OAuth 登录授权回调
@@ -13,7 +11,8 @@ function Callback() {
 
   const navigate = useNavigate()
   
-  const { loginStatus, login, logout, setLoginStatus } = useAuthStore()
+  const login = useAuthStore((state) => state.login)
+  const loginStatus = useAuthStore((state) => state.loginStatus)
   const urlSearch = new URLSearchParams(location.search)
   
   const authCode = urlSearch.get('authCode')
@@ -42,7 +41,12 @@ function Callback() {
       </Flex>
     )
   } else if (loginStatus === 302) {
-    navigate('/m/conversation')
+    const isMobileApp = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) !== null
+    if (isMobileApp) {
+      navigate('/m/conversation')
+    } else {
+      navigate('/')
+    }
   } else if (loginStatus === 403) {
     return (
       <Flex justify='center' align='center' gap='middle' vertical>

src/views/dingding/Login.jsx

@@ -1,6 +1,6 @@
 import { Flex, Result, Spin } from 'antd'
 
-function Chat() {
+function Login() {
   
   window.location = 'https://login.dingtalk.com/oauth2/auth?redirect_uri=https%3A%2F%2Fsales.mycht.cn%2Fp%2Fdingding%2Fcallback&response_type=code&client_id=dingwgdx6emlxr3fcrg8&scope=openid&state=global-saels&prompt=consent'
 
@@ -11,11 +11,11 @@ function Chat() {
         title='欢迎使用'
         subTitle='正在跳转到钉钉登录页面'
         extra={[
-          <Spin key='mobile-login' size='small' />
+          <Spin key='dingding-login' size='small' />
         ]}
       />
     </Flex>
   )
 }
 
-export default Chat
+export default Login

src/views/dingding/Logout.jsx

@@ -14,7 +14,7 @@ function Logout() {
   useEffect(() => {
     logout()
     reset();
-    navigate('/p/dingding/qrcode')
+    navigate('/p/dingding/login')
 	}, [])
 
   return (

src/views/dingding/QRCode.jsx

@@ -11,7 +11,10 @@ function QRCode() {
 
   const navigate = useNavigate()
   
-  const { loginStatus, loginUser, login, setLoginStatus } = useAuthStore()
+  const loginStatus = useAuthStore((state) => state.loginStatus)
+  const setLoginStatus = useAuthStore((state) => state.setLoginStatus)
+  const loginUser = useAuthStore((state) => state.loginUser)
+  const login = useAuthStore((state) => state.login)
 
   useEffect(() => {
     if (loginUser.userId > 0) {

src/views/orders/Follow.jsx

@@ -2,7 +2,7 @@ import { Conditional } from '@/components/Conditional'
 import useAuthStore from '@/stores/AuthStore'
 import useFormStore from '@/stores/FormStore'
 import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, RemindStateDefaultOptions } from '@/stores/OrderStore'
-import { copy, isNotEmpty } from '@/utils/commons'
+import { copy, isNotEmpty, isEmpty } from '@/utils/commons'
 import { InfoCircleTwoTone, MailTwoTone, MessageTwoTone, PhoneTwoTone, WhatsAppOutlined } from '@ant-design/icons'
 import {
   App, Badge, Button,
@@ -228,7 +228,13 @@ function OrderGroupTable({ formValues }) {
       title: '出发日期',
       dataIndex: 'COLI_OrderStartDate',
       width: 120,
-      hidden: false
+      hidden: false,
+      sortDirections: ['ascend', 'descend'],
+      sorter: (a, b, sortOrder) => {
+        const datejsA = isEmpty(a.COLI_OrderStartDate) ? dayjs(0) : new dayjs(a.COLI_OrderStartDate)
+        const datejsB = isEmpty(b.COLI_OrderStartDate) ? dayjs(0) : new dayjs(b.COLI_OrderStartDate)
+        return datejsA.isAfter(datejsB)
+      }
     },
     {
       title: '客人最后一次回复时间',