From ff04fd971026ffacaf291ef99440d43bf8c18866 Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Mon, 14 Apr 2025 13:54:35 +0800
Subject: [PATCH] steps流程状态显示优化
---
src/views/tickets/ticket.vue | 88 ++++++++++++++++++++++++++++++-------------
1 files changed, 61 insertions(+), 27 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index aa45fa6..fd1ae75 100644
--- a/src/views/tickets/ticket.vue
+++ b/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;
+ }
}
}
}
--
Gitblit v1.9.3