minnan-website/pages/inheritor/submit.vue

<template>
  <!-- 项目申报 -->
  <div class="about main-background main-background-type0">
    <div class="nav-placeholder"></div>
    <!-- 表单 -->
    <section class="main-section ">
      <div class="content">
        <div class="title">
          <h2>项目申报</h2>
        </div>
        <DynamicForm 
          ref="form"
          :model="formModel" 
          :options="formOptions"
        />
        <a-button type="primary" block @click="handleSubmit">提交</a-button>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import CommonContent from '@/api/CommonContent';
import { RecommendForm } from '@/api/inheritor/SubmitApi';
import type { IdAsValueDropdownProps } from '@/components/dynamicf/Dropdown/IdAsValueDropdown';
import type { DataModel } from '@imengyu/js-request-transform';
import { DynamicForm, type IDynamicFormOptions, type IDynamicFormRef } from '@imengyu/vue-dynamic-form';
import { Modal, type FormInstance } from 'ant-design-vue';
import { ref } from 'vue';

const form = ref<IDynamicFormRef>();
const formModel = ref(new RecommendForm());
const formOptions = ref<IDynamicFormOptions>({
  formLabelCol: { span: 6 },
  formWrapperCol: { span: 24 },
  formAdditionaProps: {
    layout: 'vertical'
  },
  formItems: [
    { 
      label: '证件照', 
      name: 'idPhoto',
      type: 'single-image',
      additionalProps: {

      },
    },
    {
      label: '传承人姓名',
      name: 'name',
      type: 'text',
      additionalProps: {
        placeholder: '请输入姓名'
      },
    },
    {
      label: '项目名称',
      name: 'ichName',
      type: 'text',
      additionalProps: {
        placeholder: '请输入项目名称' 
      }
    },
    {
      label: '类型',
      name: 'type',
      type: 'select-id',
      additionalProps: {
        placeholder: '请选择类型',
        loadData: async () =>
          (await CommonContent.getCategoryList(4)).map(p => ({
            label: p.title,
            value: p.id,
            raw: p
          }))
      } as IdAsValueDropdownProps<DataModel>,
    },
    {
      label: '保护单位',
      name: 'unit',
      type: 'text',
      additionalProps: {
        placeholder: '请输入保护单位' 
      }
    },
    {
      label: '性别',
      name: 'gender',
      type: 'select',
      additionalProps: {
        options: [
          { text: '男', value: '男' },
          { text: '女', value: '女' },
        ]
      },
    },
    {
      label: '生日',
      name: 'birthday',
      type: 'date',
      additionalProps: {
        placeholder: '请输入出生日期' 
      }
    },
    {
      label: '民族',
      name: 'nation',
      type: 'text',
      additionalProps: {
        placeholder: '请输入民族' 
      }
    },
    {
      label: '传承人姓名',
      name: 'name',
      type: 'text',
      additionalProps: {
        placeholder: '请输入姓名' 
      }
    },
    {
      label: '职业',
      name: 'job',
      type: 'text',
      additionalProps: {
        placeholder: '请输入职业' 
      }
    },
    {
      label: '职务职称',
      name: 'jobTitle',
      type: 'text',
      additionalProps: {
        placeholder: '请输入职务职称' 
      }
    },
  ],
  formRules: {
    name: [
      { required: true, message: '请输入姓名' },
      { min: 2, max: 5, message: '长度在 2 到 5 个字符' }
    ],
    // idPhoto: [
    //   { required: true, message: '请上传证件照' }
    // ],
    ichName: [
      { required: true, message: '请输入项目名称' }
    ],
    type: [
      { required: true, message: '请选择类型' }
    ],
    unit: [
      { required: true, message: '请输入保护单位' }
    ],
    gender: [
      { required: true, message: '请选择性别' }
    ],
    birthday: [
      { required: true, message: '请输入出生日期' }
    ],
    job: [
      { required: true, message: '请输入职业' }
    ],
    jobTitle: [
      { required: true, message: '请输入职业' } 
    ],
    nation: [
      { required: true, message: '请输入民族' }
    ]
  },

});

function handleSubmit() {
  (form.value?.getFormRef() as FormInstance).validate().then(() => { 
    Modal.success({
      title: '提交成功',
      content: '您的项目申报已提交成功。请耐心等待审核！',
    });
  });
}
</script>