update

src/pages/ComplaintForwardingProcess/index.less

@@ -4,6 +4,34 @@
   此文件目前仅保留页面基础样式（如有）。
 */
 
-.print-ignore {
+.custom-steps {
-  /* 页面按钮展示样式 */
+  .ant-steps {
+    display: flex !important;
+    flex-wrap: wrap !important;
+  }
+
+  .ant-steps-item {
+    flex: none !important;
+    width: 200px !important;
+    /* 固定每个步骤的宽度，你可以根据需要调整 */
+    margin-right: 24px !important;
+    /* 每个步骤之间的固定间距 */
+    margin-bottom: 24px !important;
+    /* 换行后的行间距 */
+    padding-inline-start: 0 !important;
+
+    // 隐藏连接线，因为换行后的连线轨迹会错乱
+    .ant-steps-item-tail {
+      display: none !important;
+    }
+
+    // 调整标题和描述的布局，确保紧凑
+    .ant-steps-item-content {
+      overflow: visible;
+
+      .ant-steps-item-title {
+        white-space: nowrap;
+      }
+    }
+  }
 }

src/pages/ComplaintForwardingProcess/index.tsx

@@ -1,7 +1,7 @@
 import { ActionType, FormInstance, ProForm, ProFormSelect, ProFormText, ProFormTextArea, ProFormTreeSelect, ProFormUploadButton, ProTable } from "@ant-design/pro-components";
 import "./index.less";
 import { useRef, useState } from "react";
-import { Button, Col, message, Modal, Row, Image, Space, Popconfirm, Card, Steps, Tooltip } from "antd";
+import { Button, Col, message, Modal, Row, Image, Space, Popconfirm, Steps, Tooltip } from "antd";
 import { ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import { getFieldEnum, getFieldEnumTreeNoSession, handleDeletePicture, handleDeleteSUGGESTION, handleGetAPPLYAPPROVEList, handleGetAPPROVALROUTEList, handleGetPictureList, handleGetServerpartDDL, handleGetSUGGESTIONList, handleSynchroAPPLYAPPROVE, handleSynchroSUGGESTION, uploadAHYDPicture } from "../serverpartAssets/service";
 import moment from "moment";
@@ -286,7 +286,7 @@ const ComplaintForwardingProcess = () => {
                     formData.append('TableId', data.Result_Data.SUGGESTION_ID);
                     formData.append('TableType', "1302");
                     formData.append('ImageType', "1000"); // 1000 为 上传材料  2000的话  是 处理的附件资料
-                    let result = await uploadAHYDPicture(formData)
+                    await uploadAHYDPicture(formData)
                 }
 
                 setConfirmLoading(false)
@@ -356,7 +356,7 @@ const ComplaintForwardingProcess = () => {
                         formData.append('TableId', currentRow?.SUGGESTION_ID);
                         formData.append('TableType', "1302");
                         formData.append('ImageType', "2000"); // 1000 为 上传材料  2000的话  是 处理的附件资料
-                        let result = await uploadAHYDPicture(formData)
+                        await uploadAHYDPicture(formData)
                     }
 
                 }
@@ -420,18 +420,51 @@ const ComplaintForwardingProcess = () => {
             PageSize: 999999
         }
         const data: any = await handleGetAPPLYAPPROVEList(req)
+        console.log('当前已经走过的流程', data);
+
         setAllProcessRecord(data)
         let list: any = []
+        // 当前的流程
+        let currentStatus: number = 0
         if (data && data.length > 0) {
             data.forEach((item: any) => {
                 list.push({
                     title: item?.APPLYAPPROVE_NAME,
-                    description: item?.APPLYAPPROVE_DATE
+                    description: item?.APPLYAPPROVE_DATE,
+                    status: "finish"
                     // description: item?.APPLYAPPROVE_INFO,
                     // status: item?.APPLYAPPROVE_TYPE === 1 ? 'process' : item?.APPLYAPPROVE_TYPE === 2 ? 'wait' : 'finish',
                 })
+                currentStatus = item.APPLYAPPROVE_TYPE
             })
         }
+
+        console.log('SUGGESTIONSTATELISTSUGGESTIONSTATELIST', SUGGESTIONSTATELIST);
+        // 拿到还没到的流程 和当前的流程数据
+        let currentList: any = []
+        if (SUGGESTIONSTATELIST && SUGGESTIONSTATELIST.length > 0) {
+            SUGGESTIONSTATELIST.forEach((item: any) => {
+                if (item.APPROVALROUTE_STATE > currentStatus) {
+                    currentList.push({
+                        title: item?.APPROVALROUTE_NAME,
+                        description: "",
+                        status: "finish"
+                    })
+                }
+            })
+        }
+
+        if (currentList && currentList.length > 0) {
+            currentList.forEach((item: any, index: number) => {
+                list.push({
+                    title: item.title,
+                    description: item.description,
+                    status: index === 0 ? 'process' : "wait"
+                })
+            })
+        }
+
+        console.log('currentList', currentList);
         setProgressList(list)
     }
 
@@ -469,13 +502,10 @@ const ComplaintForwardingProcess = () => {
                 headerTitle={'流程审批'}
                 search={{ span: 6 }}
                 request={async (params) => {
-                    let userInfo: any = {}
+                    if (!currentUser) {
-                    if (currentUser) {
-                        userInfo = currentUser
-                    } else {
                         const search = window.location.search;
                         const addressParams = Object.fromEntries(new URLSearchParams(search).entries());
-                        userInfo = await handleGetUserInfo(addressParams.UserIdEncrypted)
+                        await handleGetUserInfo(addressParams.UserIdEncrypted)
                     }
 
                     console.log('paramsparamsparams', params);
@@ -913,17 +943,7 @@ const ComplaintForwardingProcess = () => {
                                             let nextStatusObj: any = ""
                                             if (SUGGESTIONSTATELIST && SUGGESTIONSTATELIST.length > 0) {
                                                 SUGGESTIONSTATELIST.forEach((item: any) => {
-                                                    if (currentRow?.SUGGESTION_STATE === 1000) {
+                                                    if (Number(item.APPROVALROUTE_STATE) === Number(currentRow?.SUGGESTION_STATE)) {
-                                                        nextStausId = 1010
-                                                        currentObj = {
-                                                            APPROVALROUTE_NAME: "受理流程",
-                                                            APPROVALROUTE_STATE: 1000,
-                                                            APPROVALROUTE_VALID: 1,
-                                                            NEXT_STATE: 1010,
-                                                            OPERATION_TYPE: 30,
-                                                            PROVINCE_CODE: "530000"
-                                                        }
-                                                    } else if (Number(item.APPROVALROUTE_STATE) === Number(currentRow?.SUGGESTION_STATE)) {
                                                         nextStausId = Number(item.NEXT_STATE)
                                                         currentObj = item
                                                     }
@@ -992,9 +1012,10 @@ const ComplaintForwardingProcess = () => {
                     {
                         currentRow ?
                             <div style={{ marginTop: '12px', border: "1px solid #e8e7e7ff", boxSizing: 'border-box', borderRadius: '8px' }}>
-                                <div style={{ fontSize: '18px', fontWeight: 500, width: '100%', boxSizing: 'border-box', padding: "8px 12px", borderBottom: '1px solid #e8e7e7ff' }}>流程进度</div>
+                                <div style={{ fontSize: '16px', fontWeight: 500, width: '100%', boxSizing: 'border-box', padding: "8px 12px", borderBottom: '1px solid #e8e7e7ff' }}>流程进度</div>
-                                <div style={{ width: "100%", boxSizing: 'border-box', padding: "8px 12px" }}>
+                                <div style={{ width: "100%", boxSizing: 'border-box', padding: "16px 12px 0" }}>
                                     <Steps size="small"
+                                        className="custom-steps"
                                         // current={''}
                                         items={progressList}
                                     >