| | |
| | | <el-dialog v-model="detailVisible" title="工单详情" width="80%" append-to-body> |
| | | <div class="detail-container"> |
| | | <!-- 工单状态流程 --> |
| | | <div class="status-flow"> |
| | | <el-steps :active="getActiveStep()" align-center finish-status="success" process-status="success" class="custom-steps"> |
| | | <el-step title="发起任务"> |
| | | <div class="custom-steps-container"> |
| | | <!-- 标题行 --> |
| | | <div class="steps-titles"> |
| | | <div |
| | | class="step-title" |
| | | :class="{ active: true }" |
| | | > |
| | | 发起任务 |
| | | </div> |
| | | <div |
| | | v-for="(status, index) in fixedStatuses" |
| | | :key="index" |
| | | :class="{ active: Number(currentDetail.status) >= Number(status) }" |
| | | class="step-title" |
| | | > |
| | | {{ mapStatus(status) }} |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- Element Steps 组件 --> |
| | | <el-steps :active="getActiveStep()" align-center class="custom-steps"> |
| | | <el-step> |
| | | <template #description> |
| | | <div class="init-step-info"> |
| | | <div class="creator-name"> |
| | | {{ currentDetail.creator || '未知' }} |
| | | </div> |
| | | <div class="create-time"> |
| | | {{ currentDetail.startTime || '未知时间' }} |
| | | </div> |
| | | <span class="step-description"> |
| | | {{ currentDetail.creator || '未知' }} |
| | | </span> |
| | | <div class="step-description"> |
| | | {{ currentDetail.startTime || '未知时间' }} |
| | | </div> |
| | | </template> |
| | | </el-step> |
| | | <el-step v-for="(status, index) in fixedStatuses" :key="index" :title="mapStatus(status)"> |
| | | <el-step v-for="(status, index) in fixedStatuses" :key="index"> |
| | | <template #description> |
| | | <div class="step-info"> |
| | | <div class="process-time" > |
| | | <span v-if="getStepTime(status)">耗时:{{ getStepTime(status) }}</span> |
| | | </div> |
| | | <div class="handler-name"> |
| | | {{ getStepHandler(status) }} |
| | | </div> |
| | | <span class="step-description"> |
| | | {{ getStepHandler(status) }} |
| | | </span> |
| | | <div class="step-description" v-if="getStepTime(status)"> |
| | | <span style=" position: absolute; |
| | | right: 80%; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | width: 100px; |
| | | margin-left: 4px; |
| | | color: #666; |
| | | font-size: 10px;">耗时: {{ getStepTime(status) }}</span> |
| | | </div> |
| | | </template> |
| | | </el-step> |
| | |
| | | min-height: 40px; |
| | | color: #606266; |
| | | line-height: 1.5; |
| | | display: block; |
| | | text-align: left; |
| | | |
| | | &:first-child { |
| | | font-weight: bold; |
| | | margin-bottom: 4px; |
| | | } |
| | | } |
| | | |
| | | // 添加删除按钮样式 |
| | |
| | | .danger-button:hover { |
| | | color: #f78989; |
| | | } |
| | | |
| | | .custom-steps-container { |
| | | width: 100%; |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | .steps-titles { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 16px; |
| | | position: relative; |
| | | } |
| | | |
| | | .step-title { |
| | | text-align: center; |
| | | flex: 1; |
| | | font-size: 16px; |
| | | color: #999; |
| | | position: relative; |
| | | padding-bottom: 10px; |
| | | } |
| | | |
| | | .step-title.active { |
| | | color: #409eff; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .custom-steps { |
| | | margin-top: -20px; |
| | | |
| | | :deep(.el-step__description) { |
| | | margin-top: 8px; |
| | | padding: 0 20px; |
| | | } |
| | | } |
| | | |
| | | .step-description { |
| | | font-size: 14px; |
| | | color: #666; |
| | | line-height: 1.5; |
| | | display: block; |
| | | text-align: center; |
| | | |
| | | &:first-child { |
| | | font-weight: bold; |
| | | margin-bottom: 4px; |
| | | } |
| | | } |
| | | |
| | | // 覆盖其他相关样式 |
| | | .status-flow { |
| | | .custom-steps { |
| | | .el-step__description { |
| | | position: relative; |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | |
| | | // 移除之前的样式 |
| | | .init-step-info, |
| | | .step-info { |
| | | display: block; |
| | | width: auto; |
| | | text-align: center; |
| | | } |
| | | } |
| | | } |
| | | </style> |