流程状态数据来自后端返回数据

rain

2025-04-18 f6ff16572a11ff69554bf83ab6246ccb65d5ee63

流程状态数据来自后端返回数据

 src/views/tickets/ticket.vue

@@ -163,7 +163,7 @@
            <div class="step-title" :class="{ active: true }">
              发起任务
            </div>
            <div v-for="(status, index) in dynamicFixedStatuses" :key="index"
            <div v-for="(status, index) in stepStatusList" :key="index"
              :class="{ active: Number(currentDetail.status) >= Number(status) }" class="step-title">
              {{ mapStatus(status) }}
            </div>
@@ -181,20 +181,15 @@
                </div>
              </template>
            </el-step>
            <el-step v-for="(status, index) in dynamicFixedStatuses" :key="index">
            <el-step v-for="(status, index) in stepStatusList" :key="index">
              <template #description>
                <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: 12px;">耗时:{{ getStepTime(status) }}</span>
                  <span style="position: absolute; right: 80%; top: 50%; transform: translateY(-50%); width: 100px; margin-left: 4px; color: #666; font-size: 12px;">
                    耗时:{{ getStepTime(status) }}
                  </span>
                </div>
                <div class="step-description">
                  {{ getStepCreateTime(status) }}
@@ -714,12 +709,9 @@
      return formattedFields;
    },
    dynamicFixedStatuses() {
      // 根据当前工单work_type动态返回流程
      if (this.workType === 1) {
        return ["3", "4", "5"]; // 人工工单：处理中-已完成-已完结
      }
      return this.fixedStatuses; // 默认流程
    },
  // 直接使用接口返回的 stepInfos
  return this.stepInfos.map(step => String(step.status));
},
    ...mapGetters(['userInfo', 'permission']),
    // 动态过滤tabs，保证isShow为true/false
    filteredTabs() {
@@ -751,6 +743,17 @@
        exportBtn: this.validData(this.permission.tickets_export, false,),
        reviewBtn: this.validData(this.permission.tickets_review, false),
      };
    },
    stepStatusList() {
      // “我发起的工单”tab用默认流程，其它tab用接口返回的stepInfos
      if (this.activeTab === 'myTickets') {
        if (this.workType === 1) {
          return ["3", "4", "5"];
        }
        return this.fixedStatuses;
      }
      // 其它tab直接用接口返回的stepInfos
      return this.stepInfos.map(step => String(step.status));
    },
  },
  methods: {
@@ -1238,35 +1241,43 @@
        job_name: row.job_name || '', // 新增
      };

      let stepArr = [];
      try {
        const stepResponse = await getStepInfo(row.orderNumber);
        // 不再从stepResponse获取work_type

        // 兼容原有步骤数据
        const steps = Array.isArray(stepResponse.data.data)
          ? stepResponse.data.data
          : stepResponse.data.data?.steps || [];

        // 根据流程类型动态生成步骤
        const statusArr = this.workType === 1 ? ["3", "4", "5"] : this.fixedStatuses;
        this.stepInfos = statusArr.map(status => {
          const step = steps.find(s => String(s.status) === String(status));
          return {
            status,
            name: step ? step.name : '',
            time: step ? step.time : null,
            create_time: step ? step.create_time : null,
          };
        });

        this.currentDetail.status = row.status; // 使用行数据中的状态
        if (this.activeTab !== 'myTickets') {
          this.stepInfos = steps.map(step => ({
            status: String(step.status),
            name: step.name,
            time: step.time,
            create_time: step.create_time,
          }));
        } else {
          const statusArr = this.workType === 1 ? ["3", "4", "5"] : this.fixedStatuses;
          this.stepInfos = statusArr.map(status => {
            const step = steps.find(s => String(s.status) === String(status));
            return {
              status,
              name: step ? step.name : '',
              time: step ? step.time : null,
              create_time: step ? step.create_time : null,
            };
          });
        }
        this.currentDetail.status = row.status;
      } catch (error) {
        const statusArr = this.workType === 1 ? ["3", "4", "5"] : this.fixedStatuses;
        this.stepInfos = statusArr.map(status => ({
          status,
          name: status === row.status ? row.handler || '未分配' : '未处理',
          time: status === row.status ? row.startTime || '未知时间' : null,
        }));
        if (this.activeTab === 'myTickets') {
          const statusArr = this.workType === 1 ? ["3", "4", "5"] : this.fixedStatuses;
          this.stepInfos = statusArr.map(status => ({
            status,
            name: status === row.status ? row.handler || '未分配' : '未处理',
            time: status === row.status ? row.startTime || '未知时间' : null,
          }));
        } else {
          this.stepInfos = [];
        }
      }

      this.currentDetail = detailData;
@@ -1293,8 +1304,8 @@
      return step ? step.create_time : null;
    },
    getActiveStep() {
      // 动态流程下，步骤索引需适配
      const arr = this.dynamicFixedStatuses;
      // 步骤索引适配
      const arr = this.stepStatusList;
      const index = arr.indexOf(String(this.currentDetail.status));
      return index !== -1 ? index + 1 : 1;
    },