minnan/src/pages/collect/assessment/evaluation-form.vue

<template>
  <CommonRoot>
    <FlexCol padding="space.lg">
      <SimplePageContentLoader :loader="loader">
        <template v-if="loader.isFinished.value">
          <Result
            v-if="!currentForm"
            status="info"
            title="您还未填写评估表"
          >
            <Height :height="30" />
            <Button type="primary" @click="createForm">去填写评估表</Button>
          </Result>
          <FlexCol v-else gap="gap.lg">
            <EvaluationFormBlock
              :currentForm="(currentForm as SelfAssessmentDetail)"
              :formOptions="formOptions"
              :checkItemList="(checkItemList as CheckItemInfo[])"
              :currentFormCheckItems="(currentFormCheckItems as SelfAssessmentCheckItemAnswer[])"
            />
            <Divider />
            <FlexRow align="flex-end" justify="space-between">
              <H3>自评总分</H3>
              <Text fontSize="50rpx" color="#315816" fontFamily="HUNdin1451" :text="`${totalPoints}分`" />
            </FlexRow>
            <Divider />
            <FlexCol gap="gap.lg">
              <FlexCol v-for="(title, secIdx) in externalReviewSectionTitles" :key="secIdx" gap="gap.sm">
                <Text bold :text="title.title" />
                <Field v-model="title.suggestion" :disabled="title.disabled" placeholder="(待终审填写)" />
                <FlexRow wrap align="center" gap="gap.md">
                  <CheckBox
                    v-for="(label, i) in externalReviewScoreRow1"
                    :key="`${secIdx}-r1-${i}`"
                    disabled
                    :model-value="false"
                    :text="label"
                    :check-size="28"
                  />
                </FlexRow>
                <FlexRow wrap align="center" gap="gap.md">
                  <CheckBox
                    v-for="(label, i) in externalReviewScoreRow2"
                    :key="`${secIdx}-r2-${i}`"
                    disabled
                    :model-value="false"
                    :text="label"
                    :check-size="28"
                  />
                </FlexRow>
                <FlexCol align="flex-end">
                  <Text color="text.second" text="填写单位（盖章）" />
                  <Text color="text.second" text="年　月　日" />
                </FlexCol>
              </FlexCol>
            </FlexCol>
            <Divider />
            <H3>佐证资料上传</H3>
            <Result v-if="!currentForm?.id" status="info" title="请先保存评估表后再上传佐证资料" />
            <Uploader
              v-else
              ref="uploaderRef"
              :upload="assessmentAnnexUpload"
              :max-upload-count="100"
              :max-file-size="20 * 1024 * 1024"
              :group-type="true"
              chooseType="file"
              list-type="list"
            />
            <Height :height="30" />
            <Divider />
            <Button type="primary" block :loading="submitLoading" @click="saveForm">保存评估表</Button>
            <Button :loading="submitLoading" @click="downloadForm">下载评估表PDF</Button>
          </FlexCol>
        </template>
      </SimplePageContentLoader>
      <XBarSpace />
    </FlexCol>
  </CommonRoot>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useAuthStore } from '@/store/auth';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useAliOssUploadCo } from '@/common/components/upload/AliOssUploadCo';
import { assertNotNull, formatError, StringUtils, waitTimeOut } from '@imengyu/imengyu-utils';
import { toast, alert } from '@/components/dialog/CommonRoot';
import AssessmentContentApi, {
  SelfAssessmentDetail,
  CheckItemInfo,
  SelfAssessmentCheckItemAnswer,
  getCheckAnnexType,
} from '@/api/collect/AssessmentContent';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import Button from '@/components/basic/Button.vue';
import Result from '@/components/feedback/Result.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import H3 from '@/components/typography/H3.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Text from '@/components/basic/Text.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
import type { RadioValueProps } from '@/components/dynamic/wrappers/RadioValue';
import type { FieldProps } from '@/components/form/Field.vue';
import type { SignatureFieldProps } from '@/components/form/SignatureField.vue';
import { useImageSimpleUploadCo } from '@/common/components/upload/ImageUploadCo';
import EvaluationFormBlock from './components/EvaluationFormBlock.vue';
import Uploader, { type UploaderInstance } from '@/components/form/Uploader.vue';
import { getMimeType } from '@/common/components/upload/mimes';
import Divider from '@/components/display/Divider.vue';
import { stringUrlToUploaderItem } from '@/components/form/Uploader';
import CheckBox from '@/components/form/CheckBox.vue';
import Field from '@/components/form/Field.vue';

/** 评估表下方展示用：各级审核意见（不接数据、禁用） */
const externalReviewSectionTitles = ref([
  { title: '1. 项目保护单位意见', suggestion: '', disabled: false },
  { title: '2. 县（区）文旅部门审核意见', suggestion: '', disabled: true },
  { title: '3. 设区市文旅部门、省非遗中心审核意见', suggestion: '', disabled: true },
]);
const externalReviewScoreRow1 = ['优秀', '合格', '不合格'] as const;
const externalReviewScoreRow2 = ['丧失传承能力', '取消资格'] as const;

let loaded = false;

const { querys } = useLoadQuerys({
  id: 0,
  userId: 0,
}, () => {
  if (loaded)
    return;
  loaded = true;
  loader.load();
});

const currentForm = ref<SelfAssessmentDetail | null>(null);
const currentFormCheckItems = ref<SelfAssessmentCheckItemAnswer[]>([]);
const authStore = useAuthStore();

const assessmentAnnexUpload = useAliOssUploadCo('assessment/annex', async (res, item) => {
  assertNotNull(currentForm.value, 'currentForm is null');
  const mimetype = getMimeType(item.filePath);
  await AssessmentContentApi.saveAnnex({
    name: item.name,
    formId: currentForm.value.id,
    url: res,
    type: getCheckAnnexType(mimetype),
    mimetype: mimetype,
    fileSize: item.size
      ? Math.max(1, Math.ceil(item.size / 1024))
      : undefined,
  });
});

const currentYear = new Date().getFullYear();

const uploaderRef = ref<UploaderInstance | null>(null);
const formRef = ref<IDynamicFormRef | null>(null);
const formOptions : IDynamicFormOptions = {
  formAdditionaProps: {
    labelFlex: 4,
    inputFlex: 8,
  },
  formItems: [
    {
      type: 'flat-group',
      label: '传承人自查评估',
      name: 'selfAssessmentGroup',
      childrenColProps: { span: 24 },
      children: [
        {
          label: '传承人名称',
          name: 'inheritor',
          type: 'text',
          additionalProps: { placeholder: '请输入传承人名称' },
        },
        {
          label: '项目保护单位',
          name: 'unit',
          type: 'text',
          additionalProps: { placeholder: '请输入项目保护单位' },
        },
        {
          label: '项目名称',
          name: 'ichName',
          type: 'text',
          additionalProps: { placeholder: '请输入项目名称' },
        },
        {
          label: '联系电话',
          name: 'mobile',
          type: 'text',
          additionalProps: { placeholder: '请输入联系电话' },
        },
        {
          label: '身份证号',
          name: 'idCard',
          type: 'text',
          additionalProps: { placeholder: '请输入身份证号' },
        },
        {
          label: '级别',
          name: 'level',
          type: 'select-id',
          additionalProps: {
            placeholder: '请选择级别',
            loadData: async () => [
              { text: '国家级', value: 23 },
              { text: '省级', value: 24 },
              { text: '市级', value: 25 },
            ],
          },
          formProps: {
            showRightArrow: true,
          },
        },
        {
          label: '家庭住址',
          name: 'address',
          type: 'text',
          additionalProps: { placeholder: '请输入家庭住址' },
        },
        {
          label: '获评时间',
          name: 'awardTime',
          type: 'date',
          additionalProps: { 
            placeholder: '请选择获评时间',
            shouldUpdateValueImmediately: true,
          },
          formProps: {
            showRightArrow: true,
          },
        },
        {
          label: '自评报告',
          name: 'content',
          type: 'object',
          children: [
            {
              label: '',
              name: 'title',
              type: 'static-text',
            },
            {
              label: '(一)开展传承活动，培养后继人才情况;',
              name: 'item0',
              type: 'textarea',
              formProps: {
                labelPosition: 'top',
              },
              additionalProps: { 
                placeholder: '请填写',
                maxLength: 1000,
                colon: false,
                showWordLimit: true,
              },
            },
            {
              label: '(二)妥善保存相关实物、资料情况;',
              name: 'item1',
              type: 'textarea',
              formProps: {
                labelPosition: 'top',
              },
              additionalProps: { 
                placeholder: '请填写',
                maxLength: 1000,
                colon: false,
                showWordLimit: true,
              },
            },
            {
              label: '(三)配合进行非物质文化遗产调查情况;',
              name: 'item2',
              type: 'textarea',
              formProps: {
                labelPosition: 'top',
              },
              additionalProps: { 
                placeholder: '请填写',
                maxLength: 1000,
                colon: false,
                showWordLimit: true,
              },
            },
            {
              label: '(四)参加非物质文化遗产公益性宣传情况;',
              name: 'item3',
              type: 'textarea',
              formProps: {
                labelPosition: 'top',
              },
              additionalProps: { 
                placeholder: '请填写',
                maxLength: 1000,
                colon: false,
                showWordLimit: true,
              },
            },
            {
              label: '(五)补助经费使用情况;',
              name: 'item4',
              type: 'textarea',
              formProps: {
                labelPosition: 'top',
              },
              additionalProps: { 
                placeholder: '请填写',
                maxLength: 1000,
                colon: false,
                showWordLimit: true,
              },
            },
            {
              label: '(六)参加培训情况',
              name: 'item5',
              type: 'textarea',
              formProps: {
                labelPosition: 'top',
              },
              additionalProps: { 
                placeholder: '请填写',
                maxLength: 1000,
                colon: false,
                showWordLimit: true,
              },
            },
            {
              label: '(七)其他相关情况;',
              name: 'item6',
              type: 'textarea',
              formProps: {
                labelPosition: 'top',
              },
              additionalProps: { 
                placeholder: '请填写',
                maxLength: 1000,
                colon: false,
                showWordLimit: true,
              } as FieldProps,
            },  
            {
              label: '(八)存在的问题及原因分析。',
              name: 'item7',
              type: 'textarea',
              formProps: {
                labelPosition: 'top',
              },
              additionalProps: { 
                placeholder: '请填写',
                maxLength: 1000,
                colon: false,
                showWordLimit: true,
              },
            }
          ],
        },
      ],
    },
    {
      type: 'insertion',
      name: 'insertCheckList',
    },
    {
      type: 'flat-group',
      label: '传承人自查评估',
      name: 'selfAssessmentGroup2',
      childrenColProps: { span: 24 },
      children: [
        {
          label: '其他相关情况(扣分内容)',
          name: 'deductContent',
          type: 'text',
          additionalProps: {
            showWordLimit: true,
            maxlength: 260,
            placeholder: '请输入其他相关情况(扣分内容)',
          } as FieldProps,
        },
        {
          label: '其他相关情况(扣分分值)',
          name: 'deductPoints',
          type: 'number',
          additionalProps: {
            placeholder: '请输入其他相关情况(扣分分值)',
            min: 0,
            max: 100,
          },
        },
        {
          label: '自我评估',
          name: 'self',
          type: 'radio-value',
          additionalProps: {
            options: [
              { text: '优秀', value: 1 },
              { text: '合格', value: 2 },
              { text: '不合格', value: 3 },
              { text: '丧失传承能力', value: 4 },
              { text: '取消资格', value: 5 },
            ],
            vertical: true,
          } as RadioValueProps,
        },
        {
          label: '传承人签名',
          name: 'inheritorSign',
          type: 'sign',
          formProps: {
            showRightArrow: true,
          },
          additionalProps: {
            upload: useImageSimpleUploadCo(),
            previewImageProps: {
              width: '400rpx',
            }
          } as SignatureFieldProps,
        }
      ],
    },
  ],
  formRules: {
    inheritor: [{ required: true, message: '请输入传承人名称' }],
    unit: [{ required: true, message: '请输入项目保护单位' }],
    ichName: [{ required: true, message: '请输入项目名称' }],
    mobile: [{ required: true, message: '请输入联系电话' }],
    idCard: [{ required: true, message: '请输入身份证号' }],
    level: [{ required: true, message: '请选择级别' }],
    address: [{ required: true, message: '请输入家庭住址' }],
    content: [{ required: true, message: '请填写自评报告' }],
    self: [{ required: true, message: '请选择自我评估' }],
    sign: [{ required: true, message: '请传承人签名' }],
    awardTime: [{ required: true, message: '请选择获评时间' }],
  },
};

const checkItemList = ref<CheckItemInfo[]>([]);
const editorTitle = ref('');
let checkItemMap = new Map<number, CheckItemInfo>();

const totalPoints = computed(() => {
  if (!currentForm.value) 
    return 0;
  return currentFormCheckItems.value
    .filter((item) => {
      const checkItem = checkItemMap.get(item.id);
      return checkItem && !checkItem.isTitle;
    })
    .reduce((acc, item) => acc + (item.count * item.points), 0)
    - (currentForm.value.deductPoints ?? 0);
});
const levelTitle = computed(() => {
  if (currentForm.value?.level === 23) return '国家级';
  if (currentForm.value?.level === 24) return '省级';
  if (currentForm.value?.level === 25) return '市级';
  return '国家级';
});

function loadEditorContent() {
  if (!currentForm.value)
    return;
  if (typeof currentForm.value.content !== 'object' || currentForm.value.content === null) {
    currentForm.value!.content = {};
  }
  currentForm.value!.content.title = `传承人填写${currentYear}年1月1日至${currentYear}年12月31日${levelTitle.value}非遗传承人义务履行和传承补助经费使用情况等，不超过1000字，如未履行职责请进行说明。参考提纲如下:`;
  for (let i = 0; i < 8; i++) {
    if (typeof currentForm.value.content[`item${i}`] !== 'string') {
      currentForm.value.content[`item${i}`] = '';
    }
  }
}
async function loadBasicInfo() {
  const basicInfo = await AssessmentContentApi.getInheritorBasic(authStore.userInfo?.id);
  assertNotNull(currentForm.value, 'currentForm is null');
  currentForm.value.inheritor = basicInfo.name;
  currentForm.value.unit = basicInfo.unit;
  currentForm.value.ichName = basicInfo.ichName;
  currentForm.value.mobile = basicInfo.mobile;
  currentForm.value.level = basicInfo.level;
  currentForm.value.idCard = basicInfo.idCard;
  currentForm.value.address = basicInfo.address;
}
async function loadCheckItems() {
  assertNotNull(currentForm.value, 'currentForm is null');
  const { top, map } = await AssessmentContentApi.getCheckItems(Number(currentForm.value.level));
  checkItemList.value = top;
  checkItemMap = map;
  currentFormCheckItems.value = currentForm.value.checkItems.concat();
}
async function loadAnnexList() {
  assertNotNull(currentForm.value, 'currentForm is null');
  console.log('awardTime', currentForm.value.awardTime);
  const annexList = await AssessmentContentApi.getAnnexList(currentForm.value.id);
  setTimeout(() => {
    if (uploaderRef.value) {  
      uploaderRef.value.setList(annexList.data.map((item) => stringUrlToUploaderItem(item.url, item.name)));
    }
  }, 1000);
}

const submitLoading = ref(false);

async function createForm() {
  const detail = new SelfAssessmentDetail();
  detail.userId = authStore.userInfo!.id;
  detail.year = new Date().getFullYear();
  detail.checkItems = [];
  currentForm.value = detail;
  loadEditorContent();
  await loadBasicInfo();
  await loadCheckItems();
}
async function saveForm() {
  const detail = currentForm.value;
  try {
    await formRef.value?.validate();
  } catch (error) {
    toast('请填写完整信息');
    return;
  }

  submitLoading.value = true;
  currentForm.value!.checkItems = currentFormCheckItems.value;
  try {
    assertNotNull(detail, 'currentForm is null');
    await AssessmentContentApi.saveSelfAssessment(detail as SelfAssessmentDetail);
    toast('保存评估表成功');

    await waitTimeOut(1000);
    await loader.reload();
  } catch (error) {
    alert({
      title: '保存评估表失败',
      content: formatError(error),
    });
  }

  submitLoading.value = false;
}
async function downloadForm() {
  if (!currentForm.value?.id) {
    toast('请先保存评估表后再下载PDF');
    return;
  }
  try {
    assertNotNull(currentForm.value, 'currentForm is null');
    const pdfPath = await AssessmentContentApi.downloadSelfAssessmentPdf(currentForm.value.id);
    uni.openDocument({
      filePath: pdfPath,
      fileType: 'pdf',
      showMenu: true,
    });
  } catch (error) {
    alert({
      title: '下载评估表失败',
      content: formatError(error),
    });
  }
}

const loader = useSimpleDataLoader(async () => {
  await waitTimeOut(1000);
  
  if (querys.value.id > 0) {
    const detail = await AssessmentContentApi.getSelfAssessmentDetail(querys.value.id, querys.value.userId);
    currentForm.value = detail;
    loadEditorContent();
    await loadCheckItems();
    await loadAnnexList();
    return;
  }
  const basicInfo = await AssessmentContentApi.getInheritorBasic(authStore.userInfo?.id);
  if (basicInfo.checkId > 0) {
    const detail = await AssessmentContentApi.getSelfAssessmentDetail(
      basicInfo.checkId,
      authStore.userInfo?.id
    );
    currentForm.value = detail;
    loadEditorContent();
    await loadAnnexList();
    await loadCheckItems();
  } else {
    currentForm.value = null;
  }
  return currentForm.value;
}, false);
</script>