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

2025-08-04 16:51:53 +08:00
parent b5cb08deb5
commit 434765def2
3 changed files with 184 additions and 42 deletions
--- a/src/pages/index/components/ChangePasswordModal.tsx
+++ b/src/pages/index/components/ChangePasswordModal.tsx
@ -0,0 +1,85 @@
+import React, { useEffect }  from 'react';
+import { Modal, Form, Input } from 'antd';
+// props: visible, onOk, onCancel
+const ChangePasswordModal: React.FC<{
+  visible: boolean;
+  onOk: (values: { userId: string; newPassword: string; confirmPassword: string }) => Promise<void>;
+  onCancel: () => void;
+}> = ({ visible, onOk, onCancel }) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    const userinfo = JSON.parse(sessionStorage.getItem('Userinfo') ?? '{}');
+    form.setFieldsValue({
+        userId: userinfo.userId,
+        userName:  userinfo.loginName
+    })
+
+  },[form])
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      await onOk({ ...values });
+      form.resetFields();
+    } catch (err) {}
+  };
+
+  return (
+    <Modal
+      title="首次登录请修改密码"
+      visible={visible}
+      onOk={handleOk}
+      onCancel={onCancel}
+      okText="确认修改"
+      cancelText="取消"
+      maskClosable={false}
+      closable={false}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        labelCol={{ flex: '100px' }}
+        initialValues={{ newPassword: '', confirmPassword: '' }}
+      >
+        <Form.Item name="userId" noStyle>
+            <Input type="hidden" />
+        </Form.Item>
+        <Form.Item
+          label="用户"
+          name="userName"
+        >
+          <Input readOnly />
+        </Form.Item>
+      
+        <Form.Item
+          label="新密码"
+          name="newPassword"
+          rules={[
+            { required: true, message: '请输入新密码' },
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
+        <Form.Item
+          label="确认新密码"
+          name="confirmPassword"
+          dependencies={['newPassword']}
+          rules={[
+            { required: true, message: '请确认新密码' },
+            ({ getFieldValue }) => ({
+              validator(_, value) {
+                if (!value || getFieldValue('newPassword') === value) return Promise.resolve();
+                return Promise.reject('两次输入密码不一致');
+              },
+            }),
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default ChangePasswordModal;
--- a/src/pages/index/index.tsx
+++ b/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>
+    </>
+
  );
 };

--- a/src/pages/index/servers.ts
+++ b/src/pages/index/servers.ts
@ -1,5 +1,18 @@
 import request from '@/utils/request';

+/**
+ * 
+ * @param params 
+ * @returns 
+ *  
+ */
+interface PasswordOnFirstLogin {
+    userId:string;
+    newPassword:string;
+    confirmPassword:string;
+}
+export const changePasswordOnFirstLogin = (data:PasswordOnFirstLogin) => request.post(`/v1/login/supplier/changePasswordOnFirstLogin`, { data});
+
 /**
 * 
 * @param params