From 64f32d909345fc2913f535251bc7a86ab680bc9a Mon Sep 17 00:00:00 2001 From: Lei OT Date: Mon, 3 Jun 2024 10:49:34 +0800 Subject: [PATCH] zustand Notice --- package.json | 3 +- src/stores/Auth.js | 4 ++- src/stores/Notice1.js | 51 ++++++++++++++++++++++++++ src/utils/request.js | 18 +++++++++- src/views/notice/Detail.jsx | 71 +++++++++++++++++++------------------ src/views/notice/Index.jsx | 27 +++++++------- 6 files changed, 121 insertions(+), 53 deletions(-) create mode 100644 src/stores/Notice1.js diff --git a/package.json b/package.json index 8809e6d..c25796d 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "react-dom": "^18.2.0", "react-i18next": "^14.1.2", "react-router-dom": "^6.10.0", - "react-to-pdf": "^1.0.1" + "react-to-pdf": "^1.0.1", + "zustand": "^4.5.2" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/src/stores/Auth.js b/src/stores/Auth.js index 0110238..1b4d2f4 100644 --- a/src/stores/Auth.js +++ b/src/stores/Auth.js @@ -1,5 +1,5 @@ import { makeAutoObservable, runInAction } from "mobx"; -import { fetchJSON, postForm } from '@/utils/request'; +import { appendRequestParams, fetchJSON, postForm } from '@/utils/request'; import { HT_HOST } from "@/config"; import { isNotEmpty, prepareUrl } from '@/utils/commons'; import { loadPageSpy } from '@/pageSpy'; @@ -17,6 +17,7 @@ class Auth { this.login.userId = root.getSession(KEY_USER_ID); this.login.travelAgencyId = root.getSession(KEY_TRAVEL_AGENCY_ID); if (isNotEmpty(this.login.token)) { + appendRequestParams('token', this.login.token); this.fetchUserDetail(); } } @@ -35,6 +36,7 @@ class Auth { this.login.timeout = false; }); this.root.putSession(KEY_LOGIN_TOKEN, json.Result.token); + appendRequestParams('token', json.Result.token); return json.Result.WU_LMI_SN; } else { throw new Error(json.errmsg + ': ' + json.errcode); diff --git a/src/stores/Notice1.js b/src/stores/Notice1.js new file mode 100644 index 0000000..c9ea0b3 --- /dev/null +++ b/src/stores/Notice1.js @@ -0,0 +1,51 @@ +import { create } from 'zustand'; +import { devtools } from 'zustand/middleware'; + +import { fetchJSON, postForm, } from '@/utils/request'; +import { HT_HOST } from '@/config'; + +/** + * Notice 相关的请求 + */ + +export const fetchBulletinList = async (LMI_SN) => { + const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinList`, { LMI_SN }); + return errcode !== 0 ? [] : Result; +}; + +export const fetchBulletinUnReadCount = async (LMI_SN) => { + const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinUnReadCount`, { LMI_SN }); + return errcode !== 0 ? 0 : Result.CCP_BulletinCount; +} + +export const fetchNoticeDetail = async (LMI_SN, CCP_BLID) => { + const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinDetail`, { LMI_SN, CCP_BLID }); + return errcode !== 0 ? {} : Result; +} + +/** + * Notice Store + */ +const initialState = { + noticeUnRead: 0, //未读公告数量 +}; +export const useNoticeStore = create( + devtools((set, get) => ({ + // 初始化状态 + ...initialState, + + // state actions + setNoticeUnRead: (noticeUnRead) => set(() => ({ noticeUnRead })), + + reset: () => set(initialState), + + // side effects + getBulletinUnReadCount: async (LMI_SN) => { + const { setNoticeUnRead } = get(); + const noticeUnRead = await fetchBulletinUnReadCount(LMI_SN); + setNoticeUnRead(noticeUnRead); + }, + + })) +); +export default useNoticeStore; diff --git a/src/utils/request.js b/src/utils/request.js index e56af36..dcd6def 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -18,6 +18,20 @@ function getRequestHeader() { }, {}); } +const initParams = []; +export function appendRequestParams(n, v) { + initParams.push({ + name: n, + value: v + }) +} +function getRequestInitParams() { + return initParams.reduce((acc, item) => { + acc[item.name] = item.value; + return acc; + }, {}); +} + function checkStatus(response) { if (response.status >= 200 && response.status < 300) { return response @@ -46,7 +60,9 @@ export function fetchText(url) { }) } -export function fetchJSON(url, data) { +export function fetchJSON(url, data = {}) { + const initParams = getRequestInitParams(); + Object.assign(data, initParams); const params = data ? new URLSearchParams(data).toString() : ''; const ifp = url.includes('?') ? '&' : '?'; const headerObj = getRequestHeader(); diff --git a/src/views/notice/Detail.jsx b/src/views/notice/Detail.jsx index 2006a07..5a0d708 100644 --- a/src/views/notice/Detail.jsx +++ b/src/views/notice/Detail.jsx @@ -1,42 +1,43 @@ -import { NavLink, useParams } from "react-router-dom"; -import { useEffect, useState } from "react"; -import { observer } from "mobx-react"; -import { toJS } from "mobx"; -import { Row, Col, Space, Button, Table, Input, Typography, Badge, Divider } from "antd"; -import { useStore } from "@/stores/StoreContext.js"; -import * as config from "@/config"; -import * as comm from "@/utils/commons"; -import dayjs from "dayjs"; +import { NavLink, useParams } from 'react-router-dom'; +import { useEffect, useState } from 'react'; +import { Row, Col, Space, Typography, Divider } from 'antd'; +import { useStore } from '@/stores/StoreContext.js'; +import * as comm from '@/utils/commons'; +import { useTranslation } from 'react-i18next'; +import { fetchNoticeDetail } from '@/stores/Notice1'; -const { Title, Paragraph, Text } = Typography; +const { Title, Paragraph } = Typography; function Detail() { - const { noticeStore, authStore } = useStore(); - const { noticeInfo } = noticeStore; - const { CCP_BLID } = useParams(); + const { t } = useTranslation(); + const { authStore } = useStore(); + const { CCP_BLID } = useParams(); - useEffect(() => { - console.info("notice detail .useEffect " + CCP_BLID); - noticeStore.getNoticeDetail(authStore.login.userId, CCP_BLID); - }, []); + const [noticeInfo, setNoticeInfo] = useState({}); + useEffect(() => { + // console.info("notice detail .useEffect " + CCP_BLID); + fetchNoticeDetail(authStore.login.userId, CCP_BLID).then((res) => { + setNoticeInfo(res); + }); + }, []); - return ( - - - - - {noticeInfo.CCP_BLTitle} - {noticeInfo.CCP_LastEditTime} - -
- - - - Back - - - - ); + return ( + + + + + {noticeInfo.CCP_BLTitle} + {noticeInfo.CCP_LastEditTime} + +
+ + + + {t('Back')} + + + + ); } -export default observer(Detail); +export default Detail; diff --git a/src/views/notice/Index.jsx b/src/views/notice/Index.jsx index 6330078..c3ede70 100644 --- a/src/views/notice/Index.jsx +++ b/src/views/notice/Index.jsx @@ -1,23 +1,20 @@ import { NavLink } from "react-router-dom"; import { useEffect, useState } from "react"; -import { observer } from "mobx-react"; -import { toJS } from "mobx"; -import { Row, Col, Space, Button, Table, Input, Typography, Badge, List } from "antd"; +import { Row, Col, Space, Typography, Badge, List } from "antd"; import { useStore } from "@/stores/StoreContext.js"; -import * as config from "@/config"; -import * as comm from "@/utils/commons"; -import dayjs from "dayjs"; - -const { Title, Paragraph, Text } = Typography; +import useNoticeStore, { fetchBulletinList } from '@/stores/Notice1'; function Index() { - const { noticeStore, authStore } = useStore(); - const { noticeList } = noticeStore; + const { authStore } = useStore(); + const getBulletinUnReadCount = useNoticeStore((state) => state.getBulletinUnReadCount); + const [noticeList, setNoticeList] = useState([]); useEffect(() => { - console.info("notice.useEffect"); - noticeStore.getBulletinList(authStore.login.userId); - noticeStore.getBulletinUnReadCount(authStore.login.userId); //进入列表页的时候更新一下未读公告 + // console.info("notice.useEffect", authStore.login.userId); + fetchBulletinList(authStore.login.userId).then(data => { + setNoticeList(data); + }); + getBulletinUnReadCount(authStore.login.userId); //进入列表页的时候更新一下未读公告 }, []); return ( @@ -26,7 +23,7 @@ function Index() { ( [{item.CCP_LastEditTime}] @@ -40,4 +37,4 @@ function Index() { ); } -export default observer(Index); +export default (Index);