feat(approve): 添加审批进度展示功能并获取审批节点数据

- 在审批详情页面中添加审批进度部分，展示审批节点信息
- 实现获取审批进度的 API 调用，并处理返回数据
- 增加样式以支持审批进度的横向滚动展示

assets/css/approve/detail.scss

@@ -170,6 +170,144 @@
     word-break: break-all;
   }
 
+  .process-scroll {
+    width: 100%;
+    padding: 8rpx 0 20rpx;
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+
+  .process-list {
+    display: inline-flex;
+    min-width: 100%;
+    padding: 20rpx 20rpx 6rpx;
+    box-sizing: border-box;
+  }
+
+  .process-item {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    width: 238rpx;
+    white-space: normal;
+
+    & + .process-item {
+      margin-left: 24rpx;
+    }
+
+    &.current {
+      .process-node {
+        background: #2563eb;
+        border-color: #bfdbfe;
+        box-shadow: 0 0 0 8rpx rgba(37, 99, 235, 0.12);
+      }
+
+      .process-card {
+        background: #eff6ff;
+        border-color: #93c5fd;
+      }
+
+      .process-name,
+      .process-status {
+        color: #1d4ed8;
+      }
+    }
+
+    &.finished {
+      .process-node {
+        background: #16a34a;
+        border-color: #bbf7d0;
+      }
+
+      .process-line {
+        background: #93c5fd;
+      }
+
+      .process-status {
+        color: #16a34a;
+      }
+    }
+  }
+
+  .process-line {
+    position: absolute;
+    left: -148rpx;
+    top: 15rpx;
+    width: 160rpx;
+    height: 4rpx;
+    border-radius: 999rpx;
+    background: #dbe4f0;
+  }
+
+  .process-node {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32rpx;
+    height: 32rpx;
+    margin-left: 4rpx;
+    border: 6rpx solid #e2e8f0;
+    border-radius: 50%;
+    background: #cbd5e1;
+    color: #ffffff;
+    box-sizing: border-box;
+  }
+
+  .process-index,
+  .process-check {
+    font-size: 18rpx;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .process-card {
+    margin-top: 14rpx;
+    padding: 14rpx;
+    border: 1rpx solid transparent;
+    border-radius: 12rpx;
+    background: #f7faff;
+    box-sizing: border-box;
+  }
+
+  .process-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .process-name {
+    max-width: 128rpx;
+    font-size: 25rpx;
+    font-weight: 600;
+    color: #18263c;
+    line-height: 32rpx;
+    word-break: break-all;
+  }
+
+  .process-status {
+    margin-left: 8rpx;
+    font-size: 22rpx;
+    color: #64748b;
+    line-height: 32rpx;
+    flex-shrink: 0;
+  }
+
+  .process-user,
+  .process-time {
+    display: block;
+    margin-top: 6rpx;
+    font-size: 23rpx;
+    color: #64748b;
+    line-height: 30rpx;
+    word-break: break-all;
+  }
+
+  .process-time {
+    color: #94a3b8;
+  }
+
   .timeline-wrap {
     padding: 8rpx 20rpx 20rpx;
   }

pages/approve/detail.vue

@@ -79,6 +79,29 @@
             </view>
         </view>
 
+        <view class="section" v-if="approveProcess.length > 0">
+            <view class="section-title">审批进度</view>
+            <scroll-view class="process-scroll" scroll-x>
+                <view class="process-list">
+                    <view :class="['process-item', getProcessClass(item, index)]" v-for="(item, index) in approveProcess" :key="index">
+                        <view class="process-line" v-if="index > 0"></view>
+                        <view class="process-node">
+                            <text class="process-index" v-if="!isFinishedProcess(item)">{{ index + 1 }}</text>
+                            <text class="process-check" v-else>✓</text>
+                        </view>
+                        <view class="process-card">
+                            <view class="process-head">
+                                <text class="process-name">{{ item.node_name }}</text>
+                                <text class="process-status">{{ item.approval_status_text }}</text>
+                            </view>
+                            <text class="process-user">{{ item.approval_names }}</text>
+                            <text class="process-time">{{ item.approval_time || '等待处理' }}</text>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+
         <view class="section" v-if="detail.items && detail.items.length > 0">
             <view class="section-title">审批日志</view>
             <view class="timeline-wrap">
@@ -138,6 +161,7 @@
                 bill_id: '',
                 detail: {},
                 orderInfo: {},
+                approveProcess: [],
                 showModal: false,
                 modalStatus: 1,
                 remark: '',
@@ -192,6 +216,7 @@
         onShow() {
             if (this.id) {
                 this.getData();
+                this.getApproveProcess();
             }
         },
         methods: {
@@ -227,6 +252,38 @@
                 });
             },
             /**
+             * 获取审批进度
+             * @return {void}
+             */
+            getApproveProcess() {
+                this.request(API.getApproveProcess, 'GET', { approve_id: this.id }).then(res => {
+                    if (res.code === 0) {
+                        this.approveProcess = res.data || [];
+                    }
+                }).catch(() => {
+                    this.approveProcess = [];
+                });
+            },
+            /**
+             * 是否已处理节点
+             * @param {Object} item - 审批节点
+             * @return {boolean} 判断结果
+             */
+            isFinishedProcess(item) {
+                return !!item.approval_time;
+            },
+            /**
+             * 获取审批节点样式
+             * @param {Object} item - 审批节点
+             * @param {number} index - 节点索引
+             * @return {string} 样式名称
+             */
+            getProcessClass(item, index) {
+                if (Number(item.is_current) === 1) return 'current';
+                if (this.isFinishedProcess(item)) return 'finished';
+                return index === 0 ? 'pending first' : 'pending';
+            },
+            /**
              * 返回上一页
              * @return {void}
              */

util/api.js

@@ -101,7 +101,11 @@ const API = {
   /**
   * 猎芯供应链SCM历史单价
   */
-  goodsHistoryPriceList: API_BASE_SCM + '/approve/goodsHistoryPriceList'
+  goodsHistoryPriceList: API_BASE_SCM + '/approve/goodsHistoryPriceList',
+  /**
+ * 获取审核节点
+ */
+  getApproveProcess: API_BASE + '/api/approve/getApproveProcess'
 }