初步对接消息列表

src/models/Notice.ts

@@ -30,17 +30,18 @@ export interface Notice {
 export interface NoticeData {
 
     approvalOpinion?: string;
+    /*
+      const val SUCCESS = 0. toShort()
+      const val WAITING_ FOR_ DEPARTMENT _MANAGER_ APPROVAL = 1. toShort()
+      const val WAITING_ FOR_ FINANCIAL_ APPROVAL = 2. toShort()
+      const val WAITING_ FOR_ FINANCIAL_ MANAGER_ APPROVAL = 3. toShort()
+      const vaL WAITING_ FOR_ GENERAL_ MANAGER_ APPROVAL = 4. toShort( )
+      const val REJECTED = 5. toShort()
+      const val TERMINATED = 6. toShort()
+  */
     approvalResult?: number;
     approvalStaff?: Staff;
-    /*
-       const val SUCCESS = 0. toShort()
-       const val WAITING_ FOR_ DEPARTMENT _MANAGER_ APPROVAL = 1. toShort()
-       const val WAITING_ FOR_ FINANCIAL_ APPROVAL = 2. toShort()
-       const val WAITING_ FOR_ FINANCIAL_ MANAGER_ APPROVAL = 3. toShort()
-       const vaL WAITING_ FOR_ GENERAL_ MANAGER_ APPROVAL = 4. toShort( )
-       const val REJECTED = 5. toShort()
-       const val TERMINATED = 6. toShort()
-   */
+
     noticeType: number;
     reimbursement?: Reimbursement;
     invoice?: Invoice;

src/pages/MessageList.tsx

@@ -1,11 +1,12 @@
 import {Button, Card, List, Popover, Space, Typography, Divider, Badge, Dropdown, MenuProps} from "antd";
 import {BellOutlined, CloseOutlined} from "@ant-design/icons";
 import React, {useEffect, useState} from "react";
-import {Notice} from "../models/Notice";
+import {Notice, NoticeResponse} from "../models/Notice";
 import dayjs from "dayjs";
 import 'dayjs/locale/zh-cn'
 import axiosInstance from "../utils/axiosInstance";
-import {setToken} from "../models/store";
+import {setStaff, setToken} from "../models/store";
+import {Staff} from "../models/Staff";
 
 const {Text, Title, Paragraph} = Typography
 const relativeTime = require('dayjs/plugin/relativeTime')
@@ -31,9 +32,62 @@ function MessageList() {
         }
     }
 
+    const getApprovalStep = (approvalResult?: number) => {
+        switch (approvalResult) {
+            case 1:
+                return '部门主管'
+                break
+            case 2:
+                return '财务'
+                break
+            case 3:
+                return '财务主管'
+                break
+            case 4:
+                return '总经理'
+                break
+        }
+        return ''
+    }
+
+    const getContent = (notice: Notice) => {
+        switch (notice.data.noticeType) {
+            case 0:
+                if (notice.data.approvalResult === 5)
+                    return '报销单审批未通过'
+                else
+                    return <Paragraph>{
+                        notice.data.reimbursement?.reimbursementId + '号报销单（' + notice.data.reimbursement?.reimbursementDepartureName
+                        + (notice.data.reimbursement?.roundTrip ? " ⇌ " : " → ") + notice.data.reimbursement?.reimbursementDestinationName+'）'
+                        + getApprovalStep(notice.data.approvalResult)+'『'+notice.data.approvalStaff?.staffName+'』审批通过'
+                    }<br/>{'审批意见：'+notice.data.approvalOpinion}</Paragraph>
+
+                break
+            case 1:
+                return '发票被打回'
+                break
+        }
+    }
+
+    const onMessageListOpen = () => {
+        axiosInstance({
+            url: 'common/notice',
+            method: 'get',
+            params: {
+                pageNum: 0,
+                pageSize: 10
+            }
+        }).then(response => {
+            console.log(response.data)
+            const data: NoticeResponse = response.data
+            setList(data.records)
+        }).catch(function (error) {
+            console.log(error)
+        })
+    }
 
     useEffect(() => {
-        setList([
+        /*setList([
             {
                 "noticeTargetId": "50",
                 "noticeTime": "1981-10-04 06:37:59",
@@ -100,7 +154,7 @@ function MessageList() {
                 },
                 "noticeId": "40"
             }
-        ])
+        ])*/
     }, []);
 
 
@@ -146,11 +200,11 @@ function MessageList() {
                                     <Divider type="vertical"/>
                                     <Text>{
                                         // @ts-ignore
-                                        dayjs().fromNow()
+                                        dayjs(item.noticeTime).fromNow()
                                     }</Text>
                                 </div>
                             </Dropdown>
-                            <Paragraph>{'Ant Design, a design language for background applications, is refined by Ant UED Team'}</Paragraph>
+                            {getContent(item)}
 
                         </Button>
                         <Button style={{
@@ -161,7 +215,7 @@ function MessageList() {
 
                 )}
             />
-        } title="我的消息" arrowPointAtCenter>
+        } title="我的消息" arrowPointAtCenter onOpenChange={onMessageListOpen}>
             <Button type="text" shape="circle">
                 <BellOutlined/>
             </Button>