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

<template>
  <!-- 传习所基础表单 
    :extendFormModel="formExtendModel"
    :extendFormOptions="formExtendOptions" -->
  <Form 
    ref="formRef"
    :formModel="formModel"
    :formOptions="formOptions"
    :load="loadData"
    :model="SeminarInfo"
  />
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import Form from './form.vue';
import InheritorContent, { SeminarExpandInfo, SeminarInfo } from '@/api/inheritor/InheritorContent';
import CommonContent from '@/api/CommonContent';
import type { IDynamicFormOptions, IDynamicFormRef } from '@imengyu/vue-dynamic-form';
import type { AddressItem } from '@/components/dynamicf/Map/AddressSercher.vue';
import { useAuthStore } from '@/stores/auth';
import { useAliOssUploadCo } from '@/common/upload/AliOssUploadCo';
import { useBeforeUploadImageChecker, type UploadImageFormItemProps } from '@/components/dynamicf/UploadImageFormItem';
import { useRoute } from 'vue-router';

const authStore = useAuthStore();
const formRef = ref();
const formModel = ref(new SeminarInfo()) as Ref<SeminarInfo>;
const formOptions = ref<IDynamicFormOptions>({
  formLabelCol: { span: 6 },
  formWrapperCol: { span: 24 },
  formAdditionaProps: {
    layout: 'vertical',
    scrollToFirstError: true,
  },
  formNestNameGenerateType: 'array',
  formItems: [
    {
      type: 'group-flat', label: '传习所/保护单位信息', name: 'seminarInfo',
      childrenColProps: { span: 24 },
      children: [
        { 
          label: '传习所名称', name: 'title', type: 'text',
          additionalProps: { placeholder: '请输入标题' },
        },
        { 
          label: '批次', name: 'batch', type: 'select-id',
          additionalProps: {
            placeholder: '请选择批次',
            loadData: async () => (await CommonContent.getCategoryList(289)).map(p => ({ label: p.title, value: p.id, raw: p }))
          },
        },
        { 
          label: '传习所级别', name: 'level', type: 'select-id',
          additionalProps: {
            placeholder: '请选择传习所级别',
            loadData: async () => (await CommonContent.getCategoryList(2)).map(p => ({ label: p.title, value: p.id, raw: p }))
          },
        },{ 
          label: '图片', name: 'image', type: 'single-image',
          additionalProps: {
            placeholder: '请上传图片',
            name: 'file',
            accept: 'image/*',
            beforeUpload: useBeforeUploadImageChecker(),
            uploadCo: useAliOssUploadCo('seminar/images')
          } as UploadImageFormItemProps,
        },
        { label: '传习所介绍', name: 'content', type: 'richtext', additionalProps: { placeholder: '请输入内容' } },
        
        { label: '传习所地址', name: 'address', type: 'address-sercher', 
          additionalProps: { placeholder: '请输入地址' },
          additionalEvents: {
            choosedAddress: (address: AddressItem) => {
              ((formRef.value?.getFormRef() as IDynamicFormRef).getFormItemControlRef('lonlat') as any).moveTo([
                address.lng, address.lat
              ], 20)
            },
          }
        },
        { label: '地图坐标', name: 'lonlat', type: 'map-pick-point' },
        
        /* {
          type: 'simple-flat', label: '', name: 'map',
          childrenColProps: { span: 12 },
          children: [
            { label: '平面坐标X', name: 'mapX', type: 'number', additionalProps: { placeholder: '请输入平面坐标X' } },
            { label: '平面坐标Y', name: 'mapY', type: 'number', additionalProps: { placeholder: '请输入平面坐标Y' } },
          ]
        }, */
        
        { label: '联系人', name: 'contact', type: 'text', additionalProps: { placeholder: '请输入联系人' } },
        { label: '联系电话', name: 'mobile', type: 'text', additionalProps: { placeholder: '请输入联系电话' } },
        { 
          label: '传习所/保护单位类型', name: 'ichSiteType', type: 'select',
          additionalProps: {
            placeholder: '请选择非遗单位类型',
            options: [
              { text: '传习所', value: 1 },
              { text: '保护单位', value: 2 }
            ]
          },
        },
        { 
          label: '是否对游客开放', name: 'visit', type: 'select',
          additionalProps: {
            placeholder: '请选择是否对游客开放',
            options: [
              { text: '否', value: 0 },
              { text: '是', value: 1 }
            ]
          },
        },
        { 
          label: '审核人员', name: 'text1', type: 'static-text', 
          additionalProps: {
            text: '黄念旭，李向群，卢志明',
            style: { color: '#999', }
          }
        },
        { 
          label: '审核状态', name: 'text2', type: 'static-text', 
          additionalProps: {
            text: '暂未审核',
            style: { color: '#999', }
          }
        },
        { 
          label: '填报人', name: 'text3', type: 'static-text', 
          additionalProps: {
            text: authStore.userInfo?.nickname,
          }
        },
      ]
    },

    /* {
      type: 'group-flat', label: '通用信息', name: 'commonInfo',
      childrenColProps: { span: 24 },
      children: [
        { 
          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: 'imageDesc', type: 'text',
          additionalProps: { placeholder: '请输入图片说明' }
        },
        { 
          label: '转自', name: 'from', type: 'text',
          additionalProps: { placeholder: '请输入来源' },
        },
        { 
          label: '组图', name: 'images', type: 'mulit-image',
          hidden: { callback: (_, model) => (model as SeminarInfo).type !== 4 },
          additionalProps: {
            placeholder: '请上传图片',
            maxCount: 20,
            name: 'file',
            accept: 'image/*',
            beforeUpload: useBeforeUploadImageChecker(),
            uploadCo: useAliOssUploadCo('seminar/images'),
          } as UploadImageFormItemProps,
        },
        { 
          label: '音频', name: 'audio', type: 'single-image',
          hidden: { callback: (_, model) => (model as SeminarInfo).type !== 2 },
          additionalProps: {
            placeholder: '请上传音频',
            name: 'file',
            accept: 'audio/*',
            beforeUpload: useBeforeUploadAudioChecker(),
            uploadCo: useAliOssUploadCo('seminar/audios')
          } as UploadImageFormItemProps,
        },
        { 
          label: '相关视频', name: 'video', type: 'single-video',
          hidden: { callback: (_, model) => (model as SeminarInfo).type !== 3 },
          additionalProps: {
            placeholder: '请上传视频',
            name: 'file',
            accept: 'video/*',
            beforeUpload: useBeforeUploadVideoChecker(),
            uploadCo: useAliOssUploadCo('seminar/videos')
          } as UploadImageFormItemProps,  
        },
        { 
          label: '数字档案', name: 'archives', type: 'mulit-image',
          hidden: { callback: (_, model) => (model as SeminarInfo).type !== 5 },
          additionalProps: {
            placeholder: '请上传数字档案',
            maxCount: 20,
            name: 'file',
            uploadCo: useAliOssUploadCo('seminar/archives')
          } as UploadImageFormItemProps,
        },
        { 
          label: '标志', name: 'flag', type: 'select',
          additionalProps: {
            mode: 'tags',
            options: [  
              { text: '热门', value: 'hot' },
              { text: '推荐', value: 'recommend' },
              { text: '置顶', value: 'top' },
            ],
            placeholder: '请输入标志' 
          } as SelectProps,
        },
        { 
          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: 'memo', type: 'text-area',
          additionalProps: { placeholder: '请输入备注' },
        },
      ]
    }, */
  ],
  formRules: {
    expandInfo: {
      protectLevel: [{ required: true, message: '请选择保护级别' }],
    },
    title: [{ required: true, message: '请输入标题' }],
    region: [{ required: true, message: '请选择地区' }],
    type: [{ required: true, message: '请选择类型' }],
    image: [{ required: true, message: '请上传图片' }],
    level: [{ required: true, message: '请选择级别' }],
    ichType: [{ required: true, message: '请选择非遗类型' }],
    batch: [{ required: true, message: '请输入批次' }]
  }
});

const formExtendModel = ref(new SeminarExpandInfo()) as Ref<SeminarExpandInfo>;
const formExtendOptions = ref<IDynamicFormOptions>({
  formLabelCol: { span: 6 },
  formWrapperCol: { span: 24 },
  formAdditionaProps: {
    layout: 'vertical',
    scrollToFirstError: true,
  },
  formNestNameGenerateType: 'array',
  formItems: [
    { label: '持有者', name: 'holders', 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: 'lonlat', type: 'map-pick-point' },
    {
      type: 'simple-flat', label: '', name: 'map',
      childrenColProps: { span: 12 },
      children: [
        { label: '平面坐标X', name: 'mapX', type: 'number', additionalProps: { placeholder: '请输入平面坐标X' } },
        { label: '平面坐标Y', name: 'mapY', type: 'number', additionalProps: { placeholder: '请输入平面坐标Y' } },
      ]
    },
    { label: '成立时间', name: 'openTime', type: 'date-time', additionalProps: { placeholder: '请选择成立时间' } },
    { label: '图片', name: 'image', type: 'single-image', additionalProps: { placeholder: '请上传图片', uploadCo: useAliOssUploadCo('seminar/images') } },
    { label: '相关图片', name: 'images', type: 'mulit-image', additionalProps: { placeholder: '请上传相关图片', uploadCo: useAliOssUploadCo('seminar/images') } },
    { label: '地址', name: 'address', type: 'text', additionalProps: { placeholder: '请输入地址' } },
    { label: '描述', name: 'intro', type: 'text-area', additionalProps: { placeholder: '请输入描述' } },
    { label: '简介', name: 'desc', type: 'text-area', additionalProps: { placeholder: '请输入简介' } }
  ],
  formRules: {
    region: [{ required: true, message: '请选择地区' }]
  }
});

const route = useRoute();

async function loadData(id: number|undefined) {
  formModel.value = id === undefined || id > 0 ? await InheritorContent.getSeminarInfo(id) : new SeminarInfo();
  if (id === -1)
    formModel.value.associationId = (route.query.ichId ? parseFloat(route.query.ichId as string) : undefined) ?? 0;
  formModel.value.expandInfo = id ? await InheritorContent.getSeminarExpandInfo(id) : new SeminarExpandInfo();
  formExtendModel.value = formModel.value.expandInfo || new SeminarExpandInfo(); 
}

</script>