H5-frontend/modules/common/student-prosthetics/approval-progress.vue

<script setup>
import { ref } from 'vue'
import TopNavBar from '@/business/top-nav-bar.vue'
import { getLeaveApplicationApproval, getDiagnosisAttachments } from '@/services/student-prosthetics'

const info = computed(() => {
  const storage = JSON.parse(localStorage.getItem('studentInfo') || '{}')
  return storage
})

// 审批进度数据
const progressData = ref({
  applyStatusStr: '审批中',
  name: '',
  schoolName: '',
  gradeClass: '',
  createdTime: '',
  details: {
    expectedStartDate: '',
    expectedEndDate: '',
    auditOpinion: '',
    diseaseDiagnosis: ''
  },
  progressSteps: [
    // {
    //   nodeName: '家长提交',
    //   operatorRole: '张三（家长）',
    //   lastUpdatedTime: '2024-01-15 10:30',
    //   action: '同意',
    //   comment: '情况属实',
    //   status: 'finish'
    // },
    // {
    //   nodeName: '学校审批',
    //   operatorRole: '李老师',
    //   lastUpdatedTime: '2024-01-15 14:20',
    //   action: '同意',
    //   comment: '情况属实',
    //   status: 'process'
    // },
    // {
    //   nodeName: '教育局审批',
    //   operatorRole: '',
    //   lastUpdatedTime: '',
    //   action: '',
    //   comment: '',
    //   status: 'pending'
    // }
  ],
  attachments: [
    // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
    // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg' }
  ]
})

// 计算当前激活的步骤索引
const activeStep = ref(0)

onLoad((options) => {
  for (const key in progressData.value) {
    if (!Object.hasOwn(info.value, key)) continue
    progressData.value[key] = info.value[key]
  }

  getLeaveApplicationApproval({ applicationId: info.value.applicationId, tenantId: info.value.tenantId }).then((res) => {
    if (res.success) {
      const infos = (res.infos || []).map((item, index) => {
        item.status = item.action ? 'finish' : 'process'
        return item
      })
      progressData.value.progressSteps = infos
      activeStep.value = infos.length - 1
    }
  })

  getDiagnosisAttachments({ applicationId: info.value.applicationId, tenantId: info.value.tenantId }).then((res) => {
    if (res.success) {
      const infos = (res.infos || []).map((item) => {
        if (item.fileUrl && item.fileUrl.length) {
          return { url: item.fileUrl[0].temp }
        } else {
          return { url: item.fileUrlStr }
        }
      })
      progressData.value.attachments = infos
    }
  })

})
</script>

<template>
  <div class="progress-page">
    <TopNavBar></TopNavBar>

    <!-- 申请信息头部 -->
    <div class="progress-header">
      <div class="status-tag">{{ progressData.applyStatusStr }}</div>
      <div class="apply-info">
        <div class="info-row">
          <div class="label">学生姓名</div>
          <div class="value">{{ progressData.name }}</div>
        </div>
        <div class="info-row">
          <div class="label">学校</div>
          <div class="value">{{ progressData.schoolName }}</div>
        </div>
        <div class="info-row">
          <div class="label">班级</div>
          <div class="value">{{ progressData.gradeClass }}</div>
        </div>
        <div class="info-row">
          <div class="label">提交时间</div>
          <div class="value">{{ progressData.createdTime }}</div>
        </div>
      </div>
    </div>

    <!-- 审批进度 - 使用van-steps -->
    <div class="section">
      <div class="section-title">审批进度</div>
      <div class="steps-container">
        <van-steps direction="vertical" :active="activeStep">
          <van-step v-for="(step, index) in progressData.progressSteps" :key="index">
            <div>
              <!-- 步骤标题区域 -->
              <div class="step-header">
                <div class="step-title">{{ step.nodeName }}</div>
                <div class="step-status" :class="step.status">
                  {{
                    step.status === 'finish' ? '已完成' :
                      step.status === 'process' ? '进行中' : '待处理'
                  }}
                </div>
              </div>

              <!-- 处理人信息 -->
              <div class="step-info">
                <div class="info-item">
                  <span class="info-label">处理人：</span>
                  <span class="info-value">{{ step.operatorRole || '待处理' }}</span>
                </div>
                <div v-if="step.lastUpdatedTime" class="info-item">
                  <span class="info-label">日期：</span>
                  <span class="info-value">{{ step.lastUpdatedTime }}</span>
                </div>
              </div>

              <!-- 审批意见 -->
              <div v-if="step.action || step.comment" class="step-opinion">
                {{ step.action }} {{ step.comment }}
              </div>

              <!-- 空状态提示 -->
              <div v-if="!step.operatorRole && !step.lastUpdatedTime" class="step-empty">
                等待处理中...
              </div>
            </div>
          </van-step>
        </van-steps>
      </div>
    </div>

    <!-- 申请详情 -->
    <div class="section">
      <div class="section-title">申请详情</div>
      <div class="detail-list">
        <div class="detail-item">
          <div class="label">开始日期</div>
          <div class="value">{{ progressData.details.expectedStartDate }}</div>
        </div>
        <div class="detail-item">
          <div class="label">结束日期</div>
          <div class="value">{{ progressData.details.expectedEndDate }}</div>
        </div>
        <div class="detail-item">
          <div class="label">申请原因</div>
          <div class="value">{{ progressData.details.auditOpinion }}</div>
        </div>
        <div class="detail-item">
          <div class="label">疾病诊断</div>
          <div class="value">{{ progressData.details.diseaseDiagnosis }}</div>
        </div>
      </div>
    </div>

    <!-- 证明材料 -->
    <div class="section">
      <div class="section-title">证明材料</div>
      <van-uploader v-model="progressData.attachments" multiple disabled :deletable="false" />
      <!-- <div class="attachment-images">
        <div class="image-item">
          <div class="image-placeholder">图片1: 医院诊断证明</div>
        </div>
        <div class="image-item">
          <div class="image-placeholder">图片2: 病历资料</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.progress-page {
  padding: 24rpx;
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-top: 120rpx;
}

.progress-header {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  position: relative;

  .status-tag {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    background-color: #ff9800;
    color: #fff;
    font-size: 24rpx;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
  }

  .apply-info {
    .info-row {
      display: flex;
      padding: 12rpx 0;

      .label {
        width: 180rpx;
        font-size: 28rpx;
        color: #666;
        flex-shrink: 0;
      }

      .value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #eee;
  }
}

.steps-container {

  .van-step {
    padding: 32rpx 0 32rpx 0;
    position: relative;

    &:first-child {
      &::before {
        top: 72rpx;
      }
    }

    &:last-child {
      &::before {
        bottom: auto;
        height: 72rpx;
      }
    }

    .van-step__circle {
      width: 24rpx;
      height: 24rpx;
      background-color: #fff;
      border: 2rpx solid #666;
      box-shadow: 0 0 0 4rpx #fff;
      z-index: 1;

      &.van-step__circle--finish {
        background-color: #4caf50;
        border-color: #4caf50;
      }

      &.van-step__circle--process {
        background-color: #ff9800;
        border-color: #ff9800;
      }
    }

    .van-step__line {
      background-color: #e0e0e0;

      &.van-step__line--vertical {
        width: 2rpx;
        left: 21rpx;
      }
    }
  }

  .van-step__title {
    font-size: 0;
    line-height: 0;
  }

}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;

  .step-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }

  .step-status {
    font-size: 26rpx;
    padding: 4rpx 12rpx;
    border-radius: 12rpx;

    &.finish {
      background-color: #e8f5e9;
      color: #4caf50;
    }

    &.process {
      background-color: #fff3e0;
      color: #ff9800;
    }

    &.wait {
      background-color: #f5f5f5;
      color: #999;
    }
  }
}

.step-info {
  margin-bottom: 16rpx;

  .info-item {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 8rpx;
    line-height: 1.4;

    &:last-child {
      margin-bottom: 0;
    }

    .info-label {
      color: #888;
    }

    .info-value {
      color: #333;
    }
  }
}

.step-opinion {
  background: #f9f9f9;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
  color: #333;
  border-left: 4rpx solid #4caf50;
  margin-bottom: 8rpx;
}

.step-empty {
  color: #999;
  font-size: 26rpx;
  padding: 16rpx 0;
  font-style: italic;
}

.detail-list {
  .detail-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .label {
      width: 200rpx;
      font-size: 28rpx;
      color: #666;
      flex-shrink: 0;
    }

    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.attachment-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;

  .image-item {
    aspect-ratio: 1;
    background: #f0f0f0;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx dashed #ddd;

    .image-placeholder {
      font-size: 26rpx;
      color: #888;
      text-align: center;
      padding: 16rpx;
    }
  }
}
</style>