优化体验: 缓存表单数据

src/stores/FormStore.js

@@ -1,16 +1,25 @@
 import { create } from 'zustand';
-import { RealTimeAPI } from '@/lib/realTimeAPI';
-import { olog, isEmpty } from '@/utils/utils';
-import { receivedMsgTypeMapped, handleNotification } from '@/lib/msgUtils';
-import { fetchConversationsList, fetchTemplates, fetchMessages } from '@/actions/ConversationActions';
 import { devtools } from 'zustand/middleware';
-import { WS_URL } from '@/config';
 
-export const useFormStore = create(devtools((set, get) => ({
+export const useFormStore = create(
-  // 历史记录页面
+  devtools((set, get) => ({
-  chatHistoryForm: {},
+    // 历史记录页面
-  setChatHistoryForm: (chatHistoryForm) => set({ chatHistoryForm, chatHistorySelectChat: {} }),
+    chatHistoryForm: {},
-  chatHistorySelectChat: {},
+    setChatHistoryForm: (chatHistoryForm) => set({ chatHistoryForm, chatHistorySelectChat: {} }),
-  setChatHistorySelectChat: (chatHistorySelectChat) => set({ chatHistorySelectChat }),
+    chatHistorySelectChat: {},
-})));
+    setChatHistorySelectChat: (chatHistorySelectChat) => set({ chatHistorySelectChat }),
+
+    // 订单跟踪页面
+    orderFollowForm: {
+      type: 'today',
+      orderStatus: '新状态',
+      orderNumber: '订单号',
+      orderLabel: '订单标签',
+      startDate: '走团时间',
+    },
+    setOrderFollowForm: (orderFollowForm) => set({ orderFollowForm }),
+    orderFollowAdvanceChecked: false,
+    setOrderFollowAdvanceChecked: (orderFollowAdvanceChecked) => set({ orderFollowAdvanceChecked }),
+  }))
+);
 export default useFormStore;

src/views/OrderFollow.jsx

@@ -9,10 +9,13 @@ import { Conditional } from '@/components/Conditional'
 import useOrderStore from '@/stores/OrderStore'
 import useAuthStore from '@/stores/AuthStore'
 import { copy } from '@/utils/commons'
+import useFormStore from '@/stores/FormStore';
+import { useShallow } from 'zustand/react/shallow';
 
 const { RangePicker } = DatePicker
 
-const AdvanceSearchForm = memo(function ({ onSubmit }) {
+// eslint-disable-next-line react/display-name
+const AdvanceSearchForm = memo(function ({ initialValues, onSubmit }) {
 
   const DATE_RANGE_PRESETS = [
     {
@@ -205,7 +208,7 @@ function OrderGroupTable({ formValues }) {
   const [loading, setLoading] = useState(false)
   const { orderList, fetchOrderList } = useOrderStore()
   const { loginUser } = useAuthStore()
-  
+
   useEffect(() => {
     let canSearch = true
 
@@ -301,7 +304,7 @@ function OrderGroupTable({ formValues }) {
         children: <Table key={'Order Table' + deptNo} loading={loading} dataSource={deptOrderList}
         columns={orderColumns}
         pagination={deptOrderList.length <= 10 ? false : paginationProps} />
-      } 
+      }
     )
   })
 
@@ -311,14 +314,16 @@ function OrderGroupTable({ formValues }) {
 
 function OrderFollow() {
 
-  const [advanceChecked, toggleAdvance] = useState(false)
+  // const [advanceChecked, toggleAdvance] = useState(false)
-  const [formValues, setFormValues] = useState({
+  // const [formValues, setFormValues] = useState({
-    type: 'today',
+  //   type: 'today',
-    orderStatus: '新状态',
+  //   orderStatus: '新状态',
-    orderNumber: '订单号',
+  //   orderNumber: '订单号',
-    orderLabel: '订单标签',
+  //   orderLabel: '订单标签',
-    startDate: '走团时间'
+  //   startDate: '走团时间'
-  })
+  // })
+  const [formValues, setFormValues] = useFormStore(useShallow((state) => [state.orderFollowForm, state.setOrderFollowForm]));
+  const [advanceChecked, toggleAdvance] = useFormStore(useShallow((state) => [state.orderFollowAdvanceChecked, state.setOrderFollowAdvanceChecked]));
 
   const handleSubmit = useCallback((values) => {
     setFormValues({ ...values, type: 'advance' })