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

<template>
  <view class="container">
    <view class="header">
      <text class="title">上传测评报告</text>
      <text class="subtitle">上传PDF测评报告，自动解析数据</text>
    </view>

    <view class="form" v-if="step === 1">
      <view class="form-item">
        <text class="label">孩子</text>
        <view class="child-select" @click="selectChild">
          <text class="select-text" v-if="selectedChild">{{ selectedChild.nickname || selectedChild.name }}</text>
          <text class="select-placeholder" v-else>请选择孩子</text>
          <text class="select-arrow">›</text>
        </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>

      <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.overallScore">
          <text class="preview-label">综合得分</text>
          <text class="preview-value">{{ parsedData.overallScore }}</text>
        </view>
        <view class="preview-row" v-if="reportDateStr">
          <text class="preview-label">报告日期</text>
          <text class="preview-value">{{ reportDateStr }}</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="form-item" v-if="!parsedData || !parsedData.reportDate">
        <text class="label">报告日期（手动输入）</text>
        <picker mode="date" :value="manualDate" @change="onDateChange">
          <view class="picker-input">{{ manualDate || '请选择日期' }}</view>
        </picker>
      </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, createGrowthRecordFromUpload, checkGrowthDuplicate, getChildren } from '../../utils/api.js'

export default {
  data() {
    return {
      step: 1,
      children: [],
      selectedChild: null,
      fileName: '',
      filePath: '',
      sourceFileUrl: '',
      parsedData: null,
      reportDateStr: '',
      manualDate: ''
    }
  },
  computed: {
    canUpload() {
      return this.selectedChild && this.filePath
    }
  },
  onLoad(options) {
    this.loadChildren(options.childId)
  },
  methods: {
    async loadChildren(targetChildId) {
      try {
        var res = await getChildren()
        if (res.code === 200) {
          this.children = res.data || []
          var target = null
          if (targetChildId) {
            target = this.children.find(function(c) { return String(c.id) === String(targetChildId) })
          }
          if (!target && this.children.length > 0) {
            target = this.children[0]
          }
          if (target) {
            this.selectedChild = target
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    selectChild() {
      var items = this.children.map(function(c) { return c.nickname || c.name })
      var self = this
      uni.showActionSheet({
        itemList: items,
        success: function(res) {
          var idx = res.tapIndex
          if (idx >= 0 && idx < self.children.length) {
            self.selectedChild = self.children[idx]
          }
        }
      })
    },
    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
          this.reportDateStr = res.data.reportDateStr
          this.step = 2
        } else {
          uni.showToast({ title: res.message || '解析失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '上传失败', icon: 'none' })
      }
    },
    onDateChange(e) {
      this.manualDate = e.detail.value
    },
    async confirmCreate() {
      var reportDate = this.manualDate || this.reportDateStr
      if (!reportDate && (!this.parsedData || !this.parsedData.reportDate)) {
        uni.showToast({ title: '请输入报告日期', icon: 'none' })
        return
      }
      uni.showLoading({ title: '创建中...' })
      try {
        var submitData = {
          childId: this.selectedChild.id,
          sourceFileUrl: this.sourceFileUrl
        }
        if (this.parsedData) {
          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
        }
        if (this.manualDate) {
          submitData.manualReportDate = this.manualDate
        }
        var res = await createGrowthRecordFromUpload(submitData)
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '创建成功', icon: 'success' })
          setTimeout(function() {
            uni.navigateTo({ url: '/pages/growth/detail?recordId=' + res.data.id })
          }, 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
      this.reportDateStr = ''
      this.manualDate = ''
    }
  }
}
</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;
}
.child-select {
  display: flex;
  align-items: center;
  height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
}
.select-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.select-placeholder {
  flex: 1;
  font-size: 28rpx;
  color: #ccc;
}
.select-arrow {
  font-size: 32rpx;
  color: #ccc;
}
.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;
}
.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;
}
.picker-input {
  height: 76rpx;
  line-height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}
.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>