cfc/cfc-frontend/pages/growth/supplement.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">补充测评材料</text>
      <text class="subtitle">为已有成长档案补充额外报告</text>
    </view>

    <view class="form" v-if="step === 1">
      <view class="form-item">
        <text class="label">报告日期</text>
        <picker mode="date" :value="reportDate" @change="onDateChange">
          <view class="picker-input">{{ reportDate || '请选择日期' }}</view>
        </view>
      </view>

      <view class="form-item">
        <text class="label">选择报告文件</text>
        <view class="upload-area" @click="chooseFile">
          <text class="upload-icon" v-if="!fileName">+</text>
          <text class="upload-text" v-if="!fileName">点击选择PDF文件</text>
          <text class="file-name" v-if="fileName">{{ fileName }}</text>
        </view>
      </view>

      <view class="form-item">
        <text class="label">DAN等级（选填）</text>
        <input class="input" v-model="formData.danLevel" placeholder="A/B/C/D" />
      </view>

      <view class="form-item">
        <text class="label">综合得分（选填）</text>
        <input class="input" v-model="formData.overallScore" type="number" placeholder="0-100" />
      </view>

      <button class="btn-submit" @click="uploadAndParse" :disabled="!canUpload">上传并解析</button>
    </view>

    <view class="form" v-if="step === 2">
      <view class="form-item">
        <text class="label">解析结果预览</text>
      </view>

      <view class="preview-card" v-if="parsedData">
        <view class="preview-row" v-if="parsedData.danLevel">
          <text class="preview-label">DAN等级</text>
          <text class="preview-value">{{ parsedData.danLevel }}</text>
        </view>
        <view class="preview-row" v-if="parsedData.overallScore">
          <text class="preview-label">综合得分</text>
          <text class="preview-value">{{ parsedData.overallScore }}</text>
        </view>
        <view class="preview-row" v-if="parsedData.assessmentSummary">
          <text class="preview-label">测评总结</text>
          <text class="preview-value summary">{{ parsedData.assessmentSummary }}</text>
        </view>
      </view>

      <view class="btn-group">
        <button class="btn-secondary" @click="reset">重新上传</button>
        <button class="btn-submit" @click="confirmCreate">确认补充</button>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadAndParseReport, createGrowthSupplement, getChildren } from '../../utils/api.js'

export default {
  data() {
    return {
      step: 1,
      parentRecordId: null,
      childId: null,
      reportDate: '',
      fileName: '',
      filePath: '',
      sourceFileUrl: '',
      parsedData: null,
      formData: {
        danLevel: '',
        overallScore: ''
      }
    }
  },
  computed: {
    canUpload() {
      return this.reportDate && this.filePath
    }
  },
  onLoad(options) {
    this.parentRecordId = options.recordId || null
    this.childId = options.childId || null
    if (!this.parentRecordId) {
      uni.showToast({ title: '缺少档案ID', icon: 'none' })
    }
  },
  methods: {
    onDateChange(e) {
      this.reportDate = e.detail.value
    },
    chooseFile() {
      var self = this
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['pdf'],
        success: function(res) {
          if (res.tempFiles && res.tempFiles.length > 0) {
            self.fileName = res.tempFiles[0].name
            self.filePath = res.tempFiles[0].path
          }
        },
        fail: function() {
          uni.showToast({ title: '请选择PDF文件', icon: 'none' })
        }
      })
    },
    async uploadAndParse() {
      if (!this.canUpload) return
      uni.showLoading({ title: '上传解析中...' })
      try {
        var res = await uploadAndParseReport(this.filePath)
        uni.hideLoading()
        if (res.code === 200) {
          this.sourceFileUrl = res.data.sourceFileUrl
          this.parsedData = res.data.parsed
          if (this.parsedData && this.parsedData.danLevel && !this.formData.danLevel) {
            this.formData.danLevel = this.parsedData.danLevel
          }
          if (this.parsedData && this.parsedData.overallScore && !this.formData.overallScore) {
            this.formData.overallScore = String(this.parsedData.overallScore)
          }
          this.step = 2
        } else {
          uni.showToast({ title: res.message || '解析失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '上传失败', icon: 'none' })
      }
    },
    async confirmCreate() {
      uni.showLoading({ title: '创建中...' })
      try {
        var submitData = {
          parentRecordId: this.parentRecordId,
          childId: this.childId,
          sourceFileUrl: this.sourceFileUrl,
          reportDate: this.reportDate
        }
        if (this.parsedData) {
          if (this.parsedData.danLevel) submitData.danLevel = this.parsedData.danLevel
          if (this.parsedData.overallScore) submitData.overallScore = this.parsedData.overallScore
          if (this.parsedData.attentionScore) submitData.attentionScore = this.parsedData.attentionScore
          if (this.parsedData.focusScore) submitData.focusScore = this.parsedData.focusScore
          if (this.parsedData.memoryScore) submitData.memoryScore = this.parsedData.memoryScore
          if (this.parsedData.logicScore) submitData.logicScore = this.parsedData.logicScore
          if (this.parsedData.perceptionScore) submitData.perceptionScore = this.parsedData.perceptionScore
          if (this.parsedData.spatialScore) submitData.spatialScore = this.parsedData.spatialScore
          if (this.parsedData.processingSpeedScore) submitData.processingSpeedScore = this.parsedData.processingSpeedScore
          if (this.parsedData.emotionScore) submitData.emotionScore = this.parsedData.emotionScore
          if (this.parsedData.resilienceScore) submitData.resilienceScore = this.parsedData.resilienceScore
          if (this.parsedData.assessmentSummary) submitData.assessmentSummary = this.parsedData.assessmentSummary
          if (this.parsedData.growthSuggestions) submitData.growthSuggestions = this.parsedData.growthSuggestions
        } else {
          if (this.formData.danLevel) submitData.danLevel = this.formData.danLevel
          if (this.formData.overallScore) submitData.overallScore = parseInt(this.formData.overallScore)
        }
        var res = await createGrowthSupplement(submitData)
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '补充成功', icon: 'success' })
          setTimeout(function() {
            uni.navigateBack()
          }, 500)
        } else {
          uni.showToast({ title: res.message || '创建失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '创建失败', icon: 'none' })
      }
    },
    reset() {
      this.step = 1
      this.fileName = ''
      this.filePath = ''
      this.sourceFileUrl = ''
      this.parsedData = null
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0 30rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.subtitle {
  font-size: 26rpx;
  color: #999;
}
.form {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}
.form-item {
  margin-bottom: 30rpx;
}
.label {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
  font-weight: bold;
}
.input {
  width: 100%;
  height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  border: 2rpx dashed #ccc;
  border-radius: 16rpx;
  background: #fafafa;
}
.upload-icon {
  font-size: 64rpx;
  color: #999;
  line-height: 1;
}
.upload-text {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
}
.file-name {
  font-size: 28rpx;
  color: #667eea;
  word-break: break-all;
  text-align: center;
}
.picker-input {
  height: 76rpx;
  line-height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}
.btn-submit {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}
.btn-submit[disabled] {
  opacity: 0.5;
}
.preview-card {
  background: #f9f9ff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
}
.preview-row {
  display: flex;
  margin-bottom: 16rpx;
}
.preview-label {
  font-size: 26rpx;
  color: #666;
  width: 160rpx;
  flex-shrink: 0;
}
.preview-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}
.preview-value.summary {
  max-height: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.btn-group {
  display: flex;
  gap: 20rpx;
}
.btn-secondary {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  background: #fff;
  color: #667eea;
  border: 2rpx solid #667eea;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
}
.btn-group .btn-submit {
  flex: 1;
}
</style>