登录 根据 firstLogin 状态 弹出修改密码

src/pages/index/index.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Row, Col, Spin, message } from 'antd';
 import { Column, Pie, Bar } from '@ant-design/charts';
-import { 
-  getYearcountNum, 
-  getAccessTypeCountNum, 
+import ChangePasswordModal from './components/ChangePasswordModal';
+
+import {
+  changePasswordOnFirstLogin,
+  getYearcountNum,
+  getAccessTypeCountNum,
   getSupplierTypeCountNum,
   getAccessFlowCountNum, // 第四个接口
   getSupplierAuditCountNum // 第五个接口
@@ -19,6 +22,39 @@ const HomeDashboard: React.FC = () => {
   const [supplierAuditData, setSupplierAuditData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
 
+  // ======= 新增部分：弹窗控制 =======
+  const [showChangePwd, setShowChangePwd] = useState(false);
+  useEffect(() => {
+    // 检查 firstLogin
+    const userStr = sessionStorage.getItem('currentUser');
+    if (userStr) {
+      try {
+        const userObj = JSON.parse(userStr);
+        if (userObj?.supplierUser?.firstLogin === 0) {
+          setShowChangePwd(true);
+        }
+      } catch (e) { }
+    }
+  }, []);
+  // 修改密码确认回调
+  const handleChangePwd = async (values: { userId: string; newPassword: string; confirmPassword: string; }) => {
+    try {
+      await changePasswordOnFirstLogin({ ...values });
+      message.success('密码修改成功，请重新登录');
+      // 更新缓存 firstLogin=1
+      const userStr = sessionStorage.getItem('currentUser');
+      if (userStr) {
+        const userObj = JSON.parse(userStr);
+        if (userObj?.supplierUser) userObj.supplierUser.firstLogin = 1;
+        sessionStorage.setItem('currentUser', JSON.stringify(userObj));
+      }
+      setShowChangePwd(false);
+
+    } catch (e: any) {
+      message.error(e?.message || '修改密码失败');
+    }
+  };
+
   useEffect(() => {
     setLoading(true);
     Promise.all([
@@ -40,18 +76,18 @@ const HomeDashboard: React.FC = () => {
 
         // 2. 准入类别统计
         if (accessTypeRes.code === 200 && Array.isArray(accessTypeRes.data)) {
-            setAccessTypeData((accessTypeRes.data || []).map((item: AccessTypeItem) => ({
-                type: item.accessTypeText,
-                count: Number(item.countNum),
-              })));
+          setAccessTypeData((accessTypeRes.data || []).map((item: AccessTypeItem) => ({
+            type: item.accessTypeText,
+            count: Number(item.countNum),
+          })));
         } else message.error('获取准入类别统计失败');
 
         // 3. 供应商身份类别统计
         if (supplierTypeRes.code === 200 && Array.isArray(supplierTypeRes.data)) {
-            setSupplierTypeData((supplierTypeRes.data || []).map((item: SupplierTypeItem) => ({
-                type: item.supplierTypeCn,
-                count: Number(item.countNum),
-              })));
+          setSupplierTypeData((supplierTypeRes.data || []).map((item: SupplierTypeItem) => ({
+            type: item.supplierTypeCn,
+            count: Number(item.countNum),
+          })));
         } else message.error('获取身份类别统计失败');
 
         // 4. 准入流程进度统计
@@ -156,37 +192,45 @@ const HomeDashboard: React.FC = () => {
   };
 
   return (
-    <Spin spinning={loading}>
-      <Row gutter={[24, 24]}>
-        {/* 第一行：3图 */}
-        <Col xs={24} sm={24} md={8}>
-          <Card title="每年注册供应商数量" bordered={false}>
-            <Column {...yearConfig} />
-          </Card>
-        </Col>
-        <Col xs={24} sm={12} md={8}>
-          <Card title="准入类别统计" bordered={false}>
-            <Pie {...accessTypeConfig} />
-          </Card>
-        </Col>
-        <Col xs={24} sm={12} md={8}>
-          <Card title="供应商身份类别统计" bordered={false}>
-            <Bar {...supplierTypeConfig} />
-          </Card>
-        </Col>
-        {/* 第二行：2图 */}
-        <Col xs={24} sm={12} md={12}>
-          <Card title="准入流程进度统计" bordered={false}>
-            <Pie {...accessFlowConfig} />
-          </Card>
-        </Col>
-        <Col xs={24} sm={12} md={12}>
-          <Card title="供应商审核进度统计" bordered={false}>
-            <Pie {...supplierAuditConfig} />
-          </Card>
-        </Col>
-      </Row>
-    </Spin>
+    <>
+      <ChangePasswordModal
+        visible={showChangePwd}
+        onOk={handleChangePwd}
+        onCancel={() => { }}
+      />
+      <Spin spinning={loading}>
+        <Row gutter={[24, 24]}>
+          {/* 第一行：3图 */}
+          <Col xs={24} sm={24} md={8}>
+            <Card title="每年注册供应商数量" bordered={false}>
+              <Column {...yearConfig} />
+            </Card>
+          </Col>
+          <Col xs={24} sm={12} md={8}>
+            <Card title="准入类别统计" bordered={false}>
+              <Pie {...accessTypeConfig} />
+            </Card>
+          </Col>
+          <Col xs={24} sm={12} md={8}>
+            <Card title="供应商身份类别统计" bordered={false}>
+              <Bar {...supplierTypeConfig} />
+            </Card>
+          </Col>
+          {/* 第二行：2图 */}
+          <Col xs={24} sm={12} md={12}>
+            <Card title="准入流程进度统计" bordered={false}>
+              <Pie {...accessFlowConfig} />
+            </Card>
+          </Col>
+          <Col xs={24} sm={12} md={12}>
+            <Card title="供应商审核进度统计" bordered={false}>
+              <Pie {...supplierAuditConfig} />
+            </Card>
+          </Col>
+        </Row>
+      </Spin>
+    </>
+
   );
 };