feat: update

zhongnanhuang
1 parent 1f27d82a
Showing 1 changed file with 140 additions and 61 deletions
src/pages/Order/components/MessageListDrawer.tsx
 import { RESPONSE_CODE } from '@/constants/enum';
-import { postOrderErpMessageQueryMyMessage } from '@/services';
+import {
+  postOrderErpMessageQueryMyMessage,
+  postOrderErpMessageRead,
+} from '@/services';
 import { formatDateTime, getUserInfo } from '@/utils';
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Badge, Drawer, Flex, List } from 'antd';
-import VirtualList from 'rc-virtual-list';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Checkbox,
+  Drawer,
+  Flex,
+  List,
+  message,
+} from 'antd';
 import { useEffect, useState } from 'react';
  
 export default ({ setVisible }) => {
   const userInfo = getUserInfo();
-  const current = useState<number>(1); //当前页码
-  // const [total, setTotal] = useState(0);
+  const [current, setCurrent] = useState<number>(1); //当前页码
+  const [total, setTotal] = useState(0);
   const [messageListData, setMessageListData] = useState<any[]>([]); //列表数据
-  const ContainerHeight = 400;
+  const [loading, setLoading] = useState(false);
+  const [initLoading, setInitLoading] = useState(true);
+  const [onlyUnread, setOnlyUnread] = useState(false);
+  const [unreadNumList, setUnreadNumList] = useState<any[]>([]); //消息未读标识
+
   /**
    * 获取消息列表
    */
   async function getMessageListData() {
+    setLoading(true);
     let res = await postOrderErpMessageQueryMyMessage({
-      data: { username: userInfo.username, current: current[0] },
+      data: {
+        username: userInfo.username,
+        current: current,
+        isReaded: onlyUnread,
+      },
+    }).finally(() => {
+      setLoading(false);
     });
     if (res && res.result === RESPONSE_CODE.SUCCESS) {
       setMessageListData([...messageListData, ...res?.data?.data]);
-      // setTotal(res?.data?.total);
+      let reqReadNumList = res?.data?.data?.map((item: any) => {
+        return item.unreadNum;
+      });
+      setUnreadNumList([...unreadNumList, ...reqReadNumList]);
+      setTotal(res?.data?.total);
     }
   }
  
@@ -32,22 +58,59 @@ export default ({ setVisible }) =&gt; {
     window.open('/order?id=' + mainOrderId, '_blank');
   }
  
-  const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
-    // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
-    if (
-      Math.abs(
-        e.currentTarget.scrollHeight -
-          e.currentTarget.scrollTop -
-          ContainerHeight,
-      ) <= 1
-    ) {
-      getMessageListData();
+  /**
+   * 仅展示未读
+   */
+  function onlyUnreadChange() {
+    setOnlyUnread(!onlyUnread);
+    setCurrent(1);
+    setMessageListData([]);
+    setUnreadNumList([]);
+  }
+
+  /**
+   * 仅展示未读
+   */
+  async function read(ids: any[]) {
+    let res = await postOrderErpMessageRead({
+      data: ids,
+    });
+
+    if (res && res.result === RESPONSE_CODE.SUCCESS) {
+      message.success('已读');
+      return true;
     }
-  };
+
+    return false;
+  }
+
+  const loadMore =
+    !initLoading && !loading && messageListData.length < total ? (
+      <div
+        style={{
+          textAlign: 'center',
+          marginTop: 12,
+          height: 32,
+          lineHeight: '32px',
+        }}
+      >
+        <Button
+          onClick={() => {
+            setCurrent(current + 1);
+          }}
+        >
+          加载更多
+        </Button>
+      </div>
+    ) : messageListData.length >= total ? (
+      <span>没有更多消息了</span>
+    ) : null;
  
   useEffect(() => {
-    getMessageListData();
-  }, []);
+    getMessageListData().finally(() => {
+      setInitLoading(false);
+    });
+  }, [onlyUnread, current]);
  
   return (
     <>
@@ -60,48 +123,64 @@ export default ({ setVisible }) =&gt; {
         width={450}
         styles={{ body: { paddingTop: 0 } }}
       >
-        <List>
-          <VirtualList
-            data={messageListData}
-            height={400}
-            itemHeight={47}
-            itemKey="email"
-            onScroll={onScroll}
-          >
-            {(item: any) => (
-              <List.Item key={item.id}>
-                <List.Item.Meta
-                  avatar={
-                    <Badge dot={item.unreadNum > 0}>
-                      <Avatar shape="square" icon={<UserOutlined />} />
-                    </Badge>
+        <Flex align="center" justify="space-between">
+          <div>
+            <Checkbox onChange={onlyUnreadChange} checked={onlyUnread}>
+              仅展示未读
+            </Checkbox>
+          </div>
+
+          <Button className="p-0" type="link">
+            全部标为已读
+          </Button>
+        </Flex>
+
+        <List
+          className="demo-loadmore-list"
+          loading={initLoading}
+          itemLayout="horizontal"
+          loadMore={loadMore}
+          dataSource={messageListData}
+          renderItem={(item: any, index: any) => (
+            <List.Item key={item.id}>
+              <List.Item.Meta
+                avatar={
+                  <Badge dot={unreadNumList[index] > 0}>
+                    <Avatar shape="square" icon={<UserOutlined />} />
+                  </Badge>
+                }
+              />
+              <Flex
+                vertical
+                className="hover:cursor-pointer"
+                onClick={async () => {
+                  toOrderList(item.mainOrderId);
+
+                  let readSuccess = await read([item.id]);
+                  if (readSuccess) {
+                    let newUnreadNumList = [...unreadNumList];
+                    newUnreadNumList[index] = 0;
+                    setUnreadNumList([...newUnreadNumList]);
                   }
-                />
-                <Flex
-                  vertical
-                  className="hover:cursor-pointer"
-                  onClick={() => {
-                    toOrderList(item.mainOrderId);
-                  }}
-                >
-                  <Flex>
-                    <div>
-                      {item.content}
-                      <span className="text-[#8C8C8C]">
-                        （点击跳转到对应主订单）
-                      </span>
-                    </div>
-                  </Flex>
-                  <Flex>
-                    <span className="text-xs text-[#8C8C8C] pt-1">
-                      {formatDateTime(item.createTime)}
-                    </span>
-                  </Flex>
+                }}
+              >
+                <Flex>
+                  <div>
+                    {item.content}
+                    {/* <span className="text-[#8C8C8C]">
+                  （点击跳转到对应主订单）
+                </span> */}
+                  </div>
+                </Flex>
+                <Flex>
+                  <span className="text-xs text-[#8C8C8C] pt-1">
+                    {formatDateTime(item.createTime)}
+                  </span>
                 </Flex>
-              </List.Item>
-            )}
-          </VirtualList>
-        </List>
+              </Flex>
+            </List.Item>
+          )}
+        />
       </Drawer>
     </>
   );