minnan/src/pages/collect/assessment/components/SelfAssessmentResultBlock.vue

<template>
  <FlexCol gap="gap.lg">
    <FlexCol v-for="sec in reviewSections" :key="sec.key" gap="gap.lg">
      <Text bold :text="sec.title" />
      <FlexRow wrap align="center" gap="gap.md">
        <CheckBox
          v-for="opt in opinionOptions"
          :key="`${sec.key}-${opt.value}`"
          disabled
          :model-value="currentForm[sec.opinionField] === opt.value"
          :text="opt.label"
          :check-size="28"
        />
      </FlexRow>
      <FlexRow align="center" gap="gap.sm">
        <Text text="评分：" />
        <Text v-if="currentForm[sec.pointsField]" :text="String(currentForm[sec.pointsField])" />
        <Text v-else color="text.second" text="(待审核填写)" />
      </FlexRow>
    </FlexCol>
  </FlexCol>
</template>

<script setup lang="ts">
import type { SelfAssessmentDetail } from '@/api/collect/AssessmentContent';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Text from '@/components/basic/Text.vue';
import CheckBox from '@/components/form/CheckBox.vue';

type OpinionField = 'ichUnit' | 'county' | 'district' | 'province';
type PointsField = 'unitPoints' | 'countyPoints' | 'districtPoints' | 'provincePoints';

defineProps<{
  currentForm: SelfAssessmentDetail;
}>();

const opinionOptions = [
  { label: '优秀', value: 1 },
  { label: '合格', value: 2 },
  { label: '不合格', value: 3 },
  { label: '丧失传承能力', value: 4 },
  { label: '取消资格', value: 5 },
];
const reviewSections: { key: string; title: string; opinionField: OpinionField; pointsField: PointsField }[] = [
  { key: 'ichUnit', title: '1. 项目保护单位意见', opinionField: 'ichUnit', pointsField: 'unitPoints' },
  { key: 'county', title: '2. 县（区）文旅部门审核意见', opinionField: 'county', pointsField: 'countyPoints' },
  { key: 'district', title: '3. 设区市文旅部门、省非遗中心审核意见', opinionField: 'district', pointsField: 'districtPoints' },
  { key: 'province', title: '4. 省文化和旅游厅意见', opinionField: 'province', pointsField: 'provincePoints' },
];
</script>