前端问卷系统评分题保存草稿报错解决方案

方案二：添加最小分值 UI 控件

<template>
  <view v-for="(question, index) in surveyForm.questions" :key="index">
    <!-- 问题内容 -->
    <view>
      <text>问题内容</text>
      <input
        v-model="question.questionContent"
        placeholder="请输入问题内容"
        :class="{ 'input-error': question.questionError }"
      />
    </view>

    <!-- 问题类型选择 -->
    <view>
      <text>问题类型</text>
      <view>
        <view
          v-for="type in questionTypes"
          :key="type.value"
          :class="['type-option', { active: question.questionType === type.value }]"
          @click="setQuestionType(index, type.value)"
        >
          {{ type.label }}
        </view>
      </view>
    </view>

    <!-- 单选/多选的选项列表 -->
    <view v-if="question.questionType !== 3">
      <view v-for="(option, optIndex) in question.options" :key="optIndex">
        <input
          v-model="option.optionName"
          placeholder="请输入选项内容"
          :class="{ 'input-error': option.hasError }"
        />
        <button @click="removeOption(index, optIndex)">删除</button>
      </view>
      <button @click="addOption(index)">添加选项</button>
    </view>

    <!-- 评分题配置 -->
    <view v-if="question.questionType === 3">
      <!-- 最大分值 -->
      <view>
        <text>最大分值：</text>
        <input
          type="number"
          v-model.number="question.maxScore"
          :class="{ 'input-error': question.maxScoreError }"
          placeholder="请输入最大分值 (1-10)"
          @blur="handleMaxScoreChange($event, index)"
          @input="clearMaxScoreError(index)"
        />
        <text v-if="question.maxScoreError">{{ question.maxScoreErrorText }}</text>
      </view>

      <!-- 最小分值（新增） -->
      <view>
        <text>最小分值：</text>
        <input
          type="number"
          v-model.number="question.minScore"
          :class="{ 'input-error': question.minScoreError }"
          placeholder="请输入最小分值 (1-10)"
          @blur="handleMinScoreChange($event, index)"
          @input="clearMinScoreError(index)"
        />
        <text v-if="question.minScoreError">{{ question.minScoreErrorText }}</text>
      </view>

      <!-- 评分预览 -->
      <view>
        <text>评分范围预览：{{ question.minScore }} - {{ question.maxScore }} 分</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const questionTypes = [
  { label: '单选', value: 1 },
  { label: '多选', value: 2 },
  { label: '评分', value: 3 },
];

const surveyForm = ref({
  title: '',
  description: '',
  questions: [createEmptyQuestion()],
});

// 创建空问题
function createEmptyQuestion() {
  return {
    questionContent: '',
    questionType: 1,
    options: [{ optionName: '', hasError: false }],
    maxScore: 5,
    minScore: 1,
    maxScoreError: false,
    maxScoreErrorText: '',
    minScoreError: false,
    minScoreErrorText: '',
    questionError: false,
  };
}

// 设置问题类型
const setQuestionType = (questionIndex, type) => {
  const question = surveyForm.value.questions[questionIndex];
  question.questionType = type;
  if (type === 3) {
    // 评分题：设置默认分值，清空选项
    question.maxScore = 5;
    question.minScore = 1;
    question.maxScoreError = false;
    question.maxScoreErrorText = '';
    question.minScoreError = false;
    question.minScoreErrorText = '';
    question.options = [];
  } else {
    // 非评分题：确保有选项
    if (!question.options.length) {
      question.options = [{ optionName: '', hasError: false }];
    }
  }
};

// 清除最大分值错误
const clearMaxScoreError = (questionIndex) => {
  const question = surveyForm.value.questions[questionIndex];
  question.maxScoreError = false;
  question.maxScoreErrorText = '';
};

// 清除最小分值错误
const clearMinScoreError = (questionIndex) => {
  const question = surveyForm.value.questions[questionIndex];
  question.minScoreError = false;
  question.minScoreErrorText = '';
};

// 处理最大分值变化
const handleMaxScoreChange = (event, questionIndex) => {
  const question = surveyForm.value.questions[questionIndex];
  const value = parseInt(event.detail?.value || event.target?.value, 10);
  // 清除错误状态
  question.maxScoreError = false;
  question.maxScoreErrorText = '';
  // 验证
  if (isNaN(value) || value < 1) {
    question.maxScoreError = true;
    question.maxScoreErrorText = '请输入大于 0 的整数';
    return;
  }
  if (value > 10) {
    question.maxScoreError = true;
    question.maxScoreErrorText = '最大值不能超过 10';
    question.maxScore = 10;
    return;
  }
  // 验证最大值必须大于最小值
  if (question.minScore && value <= question.minScore) {
    question.maxScoreError = true;
    question.maxScoreErrorText = '最大分值必须大于最小分值';
    return;
  }
  question.maxScore = value;
};

// 处理最小分值变化
const handleMinScoreChange = (event, questionIndex) => {
  const question = surveyForm.value.questions[questionIndex];
  const value = parseInt(event.detail?.value || event.target?.value, 10);
  // 清除错误状态
  question.minScoreError = false;
  question.minScoreErrorText = '';
  // 验证
  if (isNaN(value) || value < 1) {
    question.minScoreError = true;
    question.minScoreErrorText = '请输入大于 0 的整数';
    return;
  }
  if (value > 10) {
    question.minScoreError = true;
    question.minScoreErrorText = '最大值不能超过 10';
    question.minScore = 10;
    return;
  }
  // 验证最小值必须小于最大值
  if (question.maxScore && value >= question.maxScore) {
    question.minScoreError = true;
    question.minScoreErrorText = '最小分值必须小于最大分值';
    return;
  }
  question.minScore = value;
};
</script>

方案三：完善表单验证逻辑

// 表单验证函数
const validateForm = () => {
  const errors = [];
  let firstErrorField = null;

  // 验证标题
  if (!surveyForm.value.title.trim()) {
    errors.push('title');
    if (!firstErrorField) firstErrorField = 'title';
  }

  // 验证每个问题
  surveyForm.value.questions.forEach((question, index) => {
    // 验证问题内容
    if (!question.questionContent.trim()) {
      question.questionError = true;
      errors.push(`question_${index}_content`);
      if (!firstErrorField) firstErrorField = `question_${index}_content`;
    } else {
      question.questionError = false;
    }

    // 根据问题类型验证
    if (question.questionType === 3) {
      // 评分题验证
      validateScoreQuestion(question, index, errors, firstErrorField);
    } else {
      // 选择题验证
      validateOptionsQuestion(question, index, errors, firstErrorField);
    }
  });

  return {
    isValid: errors.length === 0,
    errors,
    firstErrorField,
  };
};

// 验证评分题
const validateScoreQuestion = (question, index, errors, firstErrorField) => {
  // 验证最大分值
  if (
    question.maxScore === undefined ||
    question.maxScore === null ||
    question.maxScore === '' ||
    question.maxScore < 1 ||
    question.maxScore > 10
  ) {
    question.maxScoreError = true;
    question.maxScoreErrorText = '请输入 1-10 的整数';
    errors.push(`question_${index}_maxScore`);
    if (!firstErrorField) firstErrorField = `question_${index}_maxScore`;
  } else {
    question.maxScoreError = false;
    question.maxScoreErrorText = '';
  }

  // 验证最小分值
  if (
    question.minScore === undefined ||
    question.minScore === null ||
    question.minScore === '' ||
    question.minScore < 1 ||
    question.minScore > 10
  ) {
    question.minScoreError = true;
    question.minScoreErrorText = '请输入 1-10 的整数';
    errors.push(`question_${index}_minScore`);
    if (!firstErrorField) firstErrorField = `question_${index}_minScore`;
  } else {
    question.minScoreError = false;
    question.minScoreErrorText = '';
  }

  // 验证分值范围关系
  if (
    !question.maxScoreError &&
    !question.minScoreError &&
    question.maxScore <= question.minScore
  ) {
    question.maxScoreError = true;
    question.maxScoreErrorText = '最大分值必须大于最小分值';
    errors.push(`question_${index}_scoreRange`);
    if (!firstErrorField) firstErrorField = `question_${index}_maxScore`;
  }
};

// 验证选择题
const validateOptionsQuestion = (question, index, errors, firstErrorField) => {
  if (!question.options || question.options.length < 2) {
    errors.push(`question_${index}_options`);
    if (!firstErrorField) firstErrorField = `question_${index}_options`;
    return;
  }
  question.options.forEach((option, optIndex) => {
    if (!option.optionName.trim()) {
      option.hasError = true;
      errors.push(`question_${index}_option_${optIndex}`);
      if (!firstErrorField) firstErrorField = `question_${index}_option_${optIndex}`;
    } else {
      option.hasError = false;
    }
  });
};

方案四：完善数据提交逻辑

// 收集表单数据
const collectFormData = () => {
  return {
    title: surveyForm.value.title,
    description: surveyForm.value.description,
    questions: surveyForm.value.questions.map((question) => ({
      questionContent: question.questionContent,
      questionType: question.questionType,
      // 选择题提交选项
      options:
        question.questionType !== 3
          ? question.options.map((opt) => ({ optionName: opt.optionName }))
          : [],
      // 评分题提交分值范围（关键修复点）
      maxScore:
        question.questionType === 3 ? question.maxScore : undefined,
      minScore:
        question.questionType === 3 ? question.minScore : undefined,
    })),
  };
};

// 保存草稿
const saveDraft = async () => {
  try {
    // 验证表单
    const { isValid, firstErrorField } = validateForm();
    if (!isValid) {
      showToast('请完善表单信息');
      // 滚动到第一个错误字段
      scrollToError(firstErrorField);
      return;
    }
    showLoading('保存中...');

    // 收集数据
    const formData = collectFormData();

    // 调用保存草稿接口
    const result = await saveSurveyDraft({ ...formData, isDraft: true });

    hideLoading();
    if (result.success) {
      showToast('草稿保存成功');
      // 可选：返回列表页
      // navigateBack();
    } else {
      showToast(result.message || '保存失败');
    }
  } catch (error) {
    hideLoading();
    console.error('保存草稿失败:', error);
    showToast('保存失败，请重试');
  }
};

// 提交调查
const submitSurvey = async () => {
  try {
    const { isValid, firstErrorField } = validateForm();
    if (!isValid) {
      showToast('请完善表单信息');
      scrollToError(firstErrorField);
      return;
    }
    showLoading('提交中...');
    const formData = collectFormData();
    const result = await createSurvey({ ...formData, isDraft: false });
    hideLoading();
    if (result.success) {
      showToast('创建成功');
      navigateBack();
    } else {
      showToast(result.message || '创建失败');
    }
  } catch (error) {
    hideLoading();
    showToast('提交失败，请重试');
  }
};

方案五：加载草稿时的数据处理

// 加载草稿数据
const loadDraftData = async (draftId) => {
  try {
    showLoading('加载中...');
    const response = await getSurveyDetail({ id: draftId });
    hideLoading();
    if (response.success && response.data) {
      const data = response.data;
      // 填充表单数据
      surveyForm.value.title = data.title || '';
      surveyForm.value.description = data.description || '';

      // 处理问题列表，确保字段完整
      surveyForm.value.questions = (data.questions || []).map((question) => ({
        questionContent: question.questionContent || '',
        questionType: question.questionType || 1,
        options: (question.options || []).map((opt) => ({
          optionName: opt.optionName || '',
          hasError: false,
        })),
        // 关键：确保评分题有默认的最大/最小分值
        maxScore: question.maxScore ?? (question.questionType === 3 ? 5 : undefined),
        minScore: question.minScore ?? (question.questionType === 3 ? 1 : undefined),
        maxScoreError: false,
        maxScoreErrorText: '',
        minScoreError: false,
        minScoreErrorText: '',
        questionError: false,
      }));

      // 如果没有问题，添加一个默认问题
      if (surveyForm.value.questions.length === 0) {
        surveyForm.value.questions.push(createEmptyQuestion());
      }
    }
  } catch (error) {
    hideLoading();
    showToast('加载失败');
  }
};

完整数据结构对比

修复前（不完整）

// 评分题数据 - 缺少 minScore
{
  questionContent: "请对服务评分",
  questionType: 3,
  options: [],
  maxScore: 5 // minScore 字段缺失，导致后端校验失败
}

修复后（完整）

// 评分题数据 - 包含完整的分值范围
{
  questionContent: "请对服务评分",
  questionType: 3,
  options: [],
  maxScore: 5,
  minScore: 1 // 新增：最小分值
}

最佳实践总结

1. 数据模型设计要完整

设计数据结构时，考虑所有必要字段：

• 评分题需要 minScore 和 maxScore
• 为字段设置合理的默认值

2. UI 与数据模型保持一致

数据模型有的字段，UI 也要有对应的控件让用户填写。

3. 验证逻辑要全面

• 验证单个字段的有效性
• 验证字段之间的关系（如 maxScore > minScore）
• 提供友好的错误提示

4. 数据提交前再次检查

在 collectFormData 时确保所有必要字段都被正确收集。

5. 加载数据时设置默认值

从后端加载数据时，使用 ?? 或 || 为可能缺失的字段设置默认值。

// 使用 nullish coalescing 设置默认值
maxScore: data.maxScore ?? 5,
minScore: data.minScore ?? 1,

常见问题类型数据结构参考

// TypeScript 类型定义
interface Question {
  questionContent: string;
  questionType: 1 | 2 | 3; // 1=单选，2=多选，3=评分
  // 选择题字段
  options?: Array<{
    optionName: string;
    hasError?: boolean;
  }>;
  // 评分题字段
  maxScore?: number;
  minScore?: number;
  // 错误状态
  questionError?: boolean;
  maxScoreError?: boolean;
  maxScoreErrorText?: string;
  minScoreError?: boolean;
  minScoreErrorText?: string;
}

interface Survey {
  id?: string;
  title: string;
  description: string;
  questions: Question[];
  isDraft: boolean;
  createTime?: string;
  updateTime?: string;
}

关键词：问卷调查、评分题、数据模型、表单验证、草稿保存

适用场景：满意度调查、问卷系统、投票功能、评价系统等需要评分类型问题的业务场景