minnan-collect-web/src/pages/forms/works.vue

<template>
  <!-- 传承人作品采集 -->
  <Form 
    :formModel="formModel"
    :formOptions="formOptions"
    :load="loadData"
  />
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import { useImageSimpleUploadCo } from '@/common/upload/ImageUploadCo';
import Form from './form.vue';
import InheritorContent, { InheritorWorkInfo } from '@/api/inheritor/InheritorContent';
import CommonContent from '@/api/CommonContent';
import type { IDynamicFormOptions } from '@imengyu/vue-dynamic-form';
import type { SelectProps } from 'ant-design-vue';
import type { UploadImageFormItemProps } from '@/components/dynamicf/UploadImageFormItem';
import { useRoute } from 'vue-router';

const formModel = ref(new InheritorWorkInfo()) as Ref<InheritorWorkInfo>;
const formOptions = ref<IDynamicFormOptions>({
  formLabelCol: { span: 6 },
  formWrapperCol: { span: 24 },
  formAdditionaProps: {
    layout: 'vertical',
    scrollToFirstError: true,
  },
  formNestNameGenerateType: 'array',
  formItems: [
      {
        type: 'group-flat', label: '作品信息', name: 'baseInfo',
        childrenColProps: { span: 24 },
        children: [
          { label: '标题', name: 'title', type: 'text', additionalProps: { placeholder: '请输入标题' } },
          { label: '地区', name: 'region', type: 'select-id', additionalProps: { placeholder: '请选择地区', loadData: async () => (await CommonContent.getCategoryList(1)).map(p => ({ label: p.title, value: p.id, raw: p })) } },
          { label: '类型', name: 'type', type: 'select', additionalProps: { placeholder: '请选择类型', options: [{ text: '文章', value: 1 }, { text: '音频', value: 2 }, { text: '视频', value: 3 }, { text: '相册', value: 4 }, { text: '数字档案', value: 5 }] } },
          { label: '图片', name: 'image', type: 'single-image', additionalProps: { placeholder: '请上传图片', uploadCo: useImageSimpleUploadCo(), name: 'file', accept: 'image/*' } as UploadImageFormItemProps },
          { label: '图片说明', name: 'imageDesc', type: 'text', additionalProps: { placeholder: '请输入图片说明' } },
          { label: '组图', name: 'images', type: 'mulit-image', additionalProps: { placeholder: '请上传组图', uploadCo: useImageSimpleUploadCo(), name: 'file', accept: 'image/*', maxCount: 20 } as UploadImageFormItemProps },
          { label: '内容介绍', name: 'content', type: 'richtext', additionalProps: { placeholder: '请输入内容介绍' } },
          { 
            label: '音频', name: 'audio', type: 'single-image', 
            hidden: { callback: (_, model) => (model as InheritorWorkInfo).type !== 2 },
            additionalProps: { 
              placeholder: '请上传音频', 
              uploadCo: useImageSimpleUploadCo(), name: 'file' 
            } as UploadImageFormItemProps 
          },
          { 
            label: '视频', name: 'video', type: 'single-video', 
            hidden: { callback: (_, model) => (model as InheritorWorkInfo).type !== 3 },
            additionalProps: { 
              placeholder: '请上传视频', uploadCo: useImageSimpleUploadCo(), name: 'file' 
            } as UploadImageFormItemProps 
          },
          { 
            label: '数字档案', name: 'archives', type: 'mulit-image', 
            hidden: { callback: (_, model) => (model as InheritorWorkInfo).type !== 5 },
            additionalProps: { placeholder: '请上传数字档案', uploadCo: useImageSimpleUploadCo(), name: 'file', maxCount: 20 } as UploadImageFormItemProps 
          },
        ]
      },
      {
        type: 'group-flat', label: '扩展信息', name: 'extendInfo',
        childrenColProps: { span: 24 },
        children: [
          { label: '转自', name: 'from', type: 'text', additionalProps: { placeholder: '请输入转自' } },
          { label: '关键字', name: 'keywords', type: 'select', additionalProps: { mode: 'tags', options: [], placeholder: '请输入关键字，回车添加' } as SelectProps },
          { label: '描述', name: 'desc', type: 'text-area', additionalProps: { placeholder: '请输入描述' } },
          { label: 'TAG', name: 'tags', type: 'text', additionalProps: { placeholder: '请输入TAG' } },
          { label: '分类', name: 'category', type: 'text', additionalProps: { placeholder: '请输入分类' } },
          { label: '特点', name: 'feature', type: 'text', additionalProps: { placeholder: '请输入特点' } },
          { label: '别名别称', name: 'otherName', type: 'text', additionalProps: { placeholder: '请输入别名别称' } },
          { label: '创作者', name: 'creator', type: 'text', additionalProps: { placeholder: '请输入创作者' } },
          { label: '语言', name: 'language', type: 'text', additionalProps: { placeholder: '请输入语言' } },
          { label: '内容概览', name: 'overview', type: 'text', additionalProps: { placeholder: '请输入内容概览' } },
          { label: '族属', name: 'ethnicGroup', type: 'text', additionalProps: { placeholder: '请输入族属' } },
          { label: '形成或记录年代', name: 'creationEra', type: 'text', additionalProps: { placeholder: '请输入形成或记录年代' } },
          { label: '主要演述人', name: 'mainPerformer', type: 'text', additionalProps: { placeholder: '请输入主要演述人' } },
          { label: '其他代表人物', name: 'otherPerformers', type: 'text', additionalProps: { placeholder: '请输入其他代表人物' } },
          { label: '作品全文', name: 'fullString', type: 'text-area', additionalProps: { placeholder: '请输入作品全文' } },
          { label: '曲调', name: 'tune', type: 'text', additionalProps: { placeholder: '请输入曲调' } },
          { label: '发展演变', name: 'development', type: 'text', additionalProps: { placeholder: '请输入发展演变' } },
          { label: '流传情况', name: 'spread', type: 'text', additionalProps: { placeholder: '请输入流传情况' } },
          { label: '影响力', name: 'influence', type: 'text', additionalProps: { placeholder: '请输入影响力' } },
          { label: '采集人', name: 'collector', type: 'text', additionalProps: { placeholder: '请输入采集人' } },
          { label: '采集时间', name: 'collectionTime', type: 'date-time', additionalProps: { placeholder: '请选择采集时间' } },
          { label: '采集地点', name: 'collectionLocation', type: 'text', additionalProps: { placeholder: '请输入采集地点' } },
        ]
      }
    ],
  formRules: {
    title: [{ required: true, message: '请输入标题' }],
    region: [{ required: true, message: '请选择地区' }],
    image: [{ required: true, message: '请上传图片' }],
    type: [{ required: true, message: '请选择类型' }],
    images: [{ required: true, message: '请上传组图' }],
    content: [{ required: true, message: '请输入内容介绍' }],
  }
});

const route = useRoute();

async function loadData() {
  const id = parseFloat(route.query.id as string);
  if (id) {
    const works = await InheritorContent.getInheritorInfo();
    formModel.value = works.works.find((item) => item.id === id) || new InheritorWorkInfo();
  }
}

</script>