zustand Notice

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",

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);

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;

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();

src/views/notice/Detail.jsx

@@ -1,42 +1,43 @@
-import { NavLink, useParams } from "react-router-dom";
+import { NavLink, useParams } from 'react-router-dom';
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
-import { observer } from "mobx-react";
+import { Row, Col, Space, Typography, Divider } from 'antd';
-import { toJS } from "mobx";
+import { useStore } from '@/stores/StoreContext.js';
-import { Row, Col, Space, Button, Table, Input, Typography, Badge, Divider } from "antd";
+import * as comm from '@/utils/commons';
-import { useStore } from "@/stores/StoreContext.js";
+import { useTranslation } from 'react-i18next';
-import * as config from "@/config";
+import { fetchNoticeDetail } from '@/stores/Notice1';
-import * as comm from "@/utils/commons";
-import dayjs from "dayjs";
 
-const { Title, Paragraph, Text } = Typography;
+const { Title, Paragraph } = Typography;
 
 function Detail() {
-	const { noticeStore, authStore } = useStore();
+  const { t } = useTranslation();
-	const { noticeInfo } = noticeStore;
+  const { authStore } = useStore();
-	const { CCP_BLID } = useParams();
+  const { CCP_BLID } = useParams();
 
-	useEffect(() => {
+  const [noticeInfo, setNoticeInfo] = useState({});
-		console.info("notice detail .useEffect " + CCP_BLID);
+  useEffect(() => {
-		noticeStore.getNoticeDetail(authStore.login.userId, CCP_BLID);
+    // console.info("notice detail .useEffect " + CCP_BLID);
-	}, []);
+    fetchNoticeDetail(authStore.login.userId, CCP_BLID).then((res) => {
+      setNoticeInfo(res);
+    });
+  }, []);
 
-	return (
+  return (
-		<Space direction="vertical" style={{ width: "100%" }}>
+    <Space direction='vertical' style={{ width: '100%' }}>
-			<Row gutter={16}>
+      <Row gutter={16}>
-				<Col span={4}></Col>
+        <Col span={4}></Col>
-				<Col span={16}>
+        <Col span={16}>
-					<Title level={1}>{noticeInfo.CCP_BLTitle}</Title>
+          <Title level={1}>{noticeInfo.CCP_BLTitle}</Title>
-					<Divider orientation="right">{noticeInfo.CCP_LastEditTime}</Divider>
+          <Divider orientation='right'>{noticeInfo.CCP_LastEditTime}</Divider>
-					<Paragraph>
+          <Paragraph>
-						<div dangerouslySetInnerHTML={{ __html: comm.escape2Html(noticeInfo.CCP_BLContent) }}></div>
+            <div dangerouslySetInnerHTML={{ __html: comm.escape2Html(noticeInfo.CCP_BLContent) }}></div>
-					</Paragraph>
+          </Paragraph>
-				</Col>
+        </Col>
-				<Col span={4}>
+        <Col span={4}>
-					<NavLink to="/notice">Back</NavLink>
+          <NavLink to='/notice'>{t('Back')}</NavLink>
-				</Col>
+        </Col>
-			</Row>
+      </Row>
-		</Space>
+    </Space>
-	);
+  );
 }
 
-export default observer(Detail);
+export default Detail;

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 { Row, Col, Space, Typography, Badge, List } from "antd";
-import { toJS } from "mobx";
-import { Row, Col, Space, Button, Table, Input, Typography, Badge, List } from "antd";
 import { useStore } from "@/stores/StoreContext.js";
-import * as config from "@/config";
+import useNoticeStore, { fetchBulletinList } from '@/stores/Notice1';
-import * as comm from "@/utils/commons";
-import dayjs from "dayjs";
-
-const { Title, Paragraph, Text } = Typography;
 
 function Index() {
-	const { noticeStore, authStore } = useStore();
+	const { authStore } = useStore();
-	const { noticeList } = noticeStore;
+  const getBulletinUnReadCount = useNoticeStore((state) => state.getBulletinUnReadCount);
 
+  const [noticeList, setNoticeList] = useState([]);
 	useEffect(() => {
-		console.info("notice.useEffect");
+		// console.info("notice.useEffect", authStore.login.userId);
-		noticeStore.getBulletinList(authStore.login.userId);
+    fetchBulletinList(authStore.login.userId).then(data => {
-		noticeStore.getBulletinUnReadCount(authStore.login.userId); //进入列表页的时候更新一下未读公告
+      setNoticeList(data);
+    });
+		getBulletinUnReadCount(authStore.login.userId); //进入列表页的时候更新一下未读公告
 	}, []);
 
 	return (
@@ -26,7 +23,7 @@ function Index() {
 				<Col span={4}></Col>
 				<Col span={16}>
 					<List
-						dataSource={toJS(noticeList)}
+						dataSource={(noticeList)}
 						renderItem={item => (
 							<List.Item>
 								<Typography.Text>[{item.CCP_LastEditTime}]</Typography.Text>
@@ -40,4 +37,4 @@ function Index() {
 	);
 }
 
-export default observer(Index);
+export default (Index);