klp-oa/klp-ui/src/views/wms/post/objection/components/FlowOverviewSection.vue

<template>
  <div v-if="enabled" class="section-container">
    <div class="section-title">
      <i class="el-icon-s-order"></i>
      <span>流程总览 <span class="en-sub">· Process Overview</span></span>
    </div>
    <el-steps :active="activeStep" align-center class="flow-steps">
      <el-step title="待审核" icon="el-icon-document" />
      <el-step title="意见填写" icon="el-icon-edit-outline" />
      <el-step title="汇总方案" icon="el-icon-s-data" />
      <el-step title="全部办结" icon="el-icon-circle-check" />
    </el-steps>
    <div class="current-status">
      <span class="status-label">当前阶段：</span>
      <el-tag :type="tagType" size="small">{{ flowStatusText }}</el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlowOverviewSection',
  props: {
    enabled: {
      type: Boolean,
      default: true
    },
    flowStatus: {
      type: [Number, String],
      default: undefined
    }
  },
  computed: {
    /**
     * el-steps active 从 0 开始。
     * 1=待审核→0, 2=意见填写→1, 3=汇总方案→2, 4=全部办结→3
     */
    activeStep() {
      if (this.flowStatus == null) return -1;
      const v = Number(this.flowStatus);
      if (v >= 4) return 3;
      return v - 1;
    },
    flowStatusText() {
      const map = {
        1: '待审核',
        2: '意见填写中',
        3: '待汇总方案',
        4: '全部办结'
      };
      return map[this.flowStatus] || '未知';
    },
    tagType() {
      const map = {
        1: 'info',
        2: 'warning',
        3: '',
        4: 'success'
      };
      return map[this.flowStatus] || '';
    }
  }
}
</script>

<style scoped>
.section-container {
  margin-bottom: 4px;
}

.section-title {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin: 20px 0 10px 0;
  padding: 0 0 8px 0;
  border-bottom: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}

.section-title .en-sub {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  letter-spacing: 0.2px;
}

.section-title i {
  font-size: 14px;
  color: #475569;
}

.flow-steps {
  padding: 6px 0 4px;
}

.flow-steps >>> .el-step.is-wait .el-step__icon-inner,
.flow-steps >>> .el-step.is-wait .el-step__title {
  color: #94a3b8;
}

.flow-steps >>> .el-step.is-process .el-step__icon-inner,
.flow-steps >>> .el-step.is-process .el-step__title {
  color: #2563eb;
}

.flow-steps >>> .el-step.is-finish .el-step__icon-inner,
.flow-steps >>> .el-step.is-finish .el-step__title {
  color: #52c41a;
}

.flow-steps >>> .el-step__description {
  display: none;
}

.current-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}

.status-label {
  font-size: 11px;
  color: #64748b;
  letter-spacing: 0.2px;
}
</style>