steps流程状态显示优化

rain

2025-04-14 ff04fd971026ffacaf291ef99440d43bf8c18866

steps流程状态显示优化

 src/views/tickets/ticket.vue

@@ -160,11 +160,23 @@
        <!-- 工单状态流程 -->
        <div class="status-flow">
          <el-steps :active="getActiveStep()" align-center finish-status="success" process-status="success" class="custom-steps">
            <el-step title="发起任务">
              <template #description>
                <div class="init-step-info">
                  <div class="creator-name">
                    {{ currentDetail.creator || '未知' }}
                  </div>
                  <div class="create-time">
                    {{ currentDetail.startTime || '未知时间' }}
                  </div>
                </div>
              </template>
            </el-step>
            <el-step v-for="(status, index) in fixedStatuses" :key="index" :title="mapStatus(status)">
              <template #description>
                <div class="step-info">
                  <div class="process-time" v-if="getStepTime(status)">
                    耗时:{{ getStepTime(status) }}
                  <div class="process-time" >
                    <span v-if="getStepTime(status)">耗时:{{ getStepTime(status) }}</span>
                  </div>
                  <div class="handler-name">
                    {{ getStepHandler(status) }}
@@ -1077,9 +1089,9 @@
    },

    getActiveStep() {
      // 根据当前工单状态，返回对应的步骤索引
      // 由于新增了发起任务步骤，需要调整步骤索引
      const index = this.fixedStatuses.indexOf(String(this.currentDetail.status));
      return index !== -1 ? index : 0;
      return index !== -1 ? index + 1 : 1; // 加1是因为多了发起任务这一步
    },

    openMap() {
@@ -1702,34 +1714,56 @@
  .custom-steps {
    .el-step__description {
      position: relative;
      margin: 0;        /* 取消所有外边距 */
      padding: 0;       /* 取消所有内边距 */
      margin: 0;
      padding: 0;
    }

    // 添加发起任务步骤的特殊样式
    .init-step-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 130px;

      .creator-name {
        font-size: 14px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 4px;
      }

      .create-time {
        font-size: 10px;
        color: #909399;
      }
    }

    // 保持其他步骤的原有样式
    .step-info {
    display: flex;
    margin: 0;        /* 取消所有外边距 */
    padding: 0;       /* 取消所有内边距 */
    justify-content: space-between;
    align-items: center;
    width: 130px;
}
      display: flex;
      margin: 0;
      padding: 0;
      justify-content: space-between;
      align-items: center;
      width: 200px;

    .process-time {
      font-size: 10px;
      color: #909399;
      text-align: left;
      margin-left: 0%;
      padding-left: 0%;
      flex: 1; /* 左对齐时间 */
    }
      .process-time {
        font-size: 10px;
        color: #909399;
        text-align: left;
        margin-left: -50%;
        padding-left: 0%;
        flex: 1;
      }

    .handler-name {
      font-size: 14px;
      font-weight: bold;
      color: #303133;
      text-align: left;
      flex: 1; /* 右对齐名字 */
      .handler-name {
        font-size: 14px;
        font-weight: bold;
        color: #303133;
        text-align: left;
        flex: 1;
      }
    }
  }
}