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

<template>
  <!-- 非遗基础表单 
    :extendFormModel="formExtendModel"
    :extendFormOptions="formExtendOptions"-->
  <Form 
    ref="formRef"
    :formModel="formModel"
    :formOptions="formOptions"
    :load="loadData"
    :model="IchInfo"
  />
</template>

<script setup lang="ts">
import { h, ref, type Ref } from 'vue';
import { useImageSimpleUploadCo } from '@/common/upload/ImageUploadCo';
import Form from './form.vue';
import InheritorContent, { IchExpandInfo, IchInfo } from '@/api/inheritor/InheritorContent';
import CommonContent from '@/api/CommonContent';
import type { IDynamicFormOptions, IDynamicFormRef } from '@imengyu/vue-dynamic-form';
import type { SelectProps } from 'ant-design-vue';
import { useBeforeUploadImageChecker, useBeforeUploadVideoChecker, type UploadImageFormItemProps } from '@/components/dynamicf/UploadImageFormItem';
import type { AddressItem } from '@/components/dynamicf/Map/AddressSercher.vue';
import { useAuthStore } from '@/stores/auth';
import { useAliOssUploadCo } from '@/common/upload/AliOssUploadCo';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

const authStore = useAuthStore();
const formRef = ref();
const formModel = ref(new IchInfo()) as Ref<IchInfo>;
const formOptions = ref<IDynamicFormOptions>({
  formLabelCol: { span: 6 },
  formWrapperCol: { span: 24 },
  formAdditionaProps: {
    layout: 'vertical',
    scrollToFirstError: true,
  },
  formNestNameGenerateType: 'array',
  formItems: [
    {
      type: 'group-flat', label: '非遗基础档案', name: 'ichInfo',
      childrenColProps: { span: 24 },
      children: [
        { 
          label: '非遗项目名称', name: 'title', type: 'text',
          additionalProps: {
            placeholder: '请输入标题',
          },
        },
        { 
          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: 'ichType', type: 'select-id',
          additionalProps: {
            placeholder: '请选择非遗类型',
            loadData: async () => (await CommonContent.getCategoryList(4)).map(p => ({ label: p.title, value: p.id, raw: p }))
          },
        },
        { 
          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: 'regionText', type: 'text', additionalProps: { placeholder: '请输入申报地区' } },
        
        { label: '非遗项目简介', name: 'intro', type: 'richtext', additionalProps: { placeholder: '请输入简介' } },
        { 
          label: '传承谱系', name: 'pedigree', type: 'richtext', 
          additionalProps: { placeholder: '请输入传承谱系' },
          formProps: {
            extra: h('div', { class: 'd-flex flex-row align-items-start mt-2' }, [
              h(ExclamationCircleOutlined),
              h('pre', { class: 'ms-2' }, `请按传承脉络顺序填写：
1、传承人：姓名（附简短介绍，如技艺特长/代表成就）
2、传承代数：标注第几代（示例：第五代传人）
3、师从关系：明确师承对象（如：师从第四代传人XXX）
注：信息需真实可考，传承脉络清晰有序`),
            ]),
          },
        },
        //{ label: '非遗详细描述', name: 'description', type: 'richtext', additionalProps: { placeholder: '请输入项目描述' } },
        //{ label: '传承值', name: 'heritage', type: 'text', 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',
          formProps: {
            extra: h('div', {}, [
              h(ExclamationCircleOutlined),
              h('span', { class: 'ms-2' }, '输入模糊地址后可以点击搜索跳转到指定位置，如果地图位置不正确，可以手动拖拽调整位置'),
            ]),
          },
        },
        
        /* {
          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: 'unit', type: 'text', additionalProps: { placeholder: '请输入保护单位' } },
        //{ label: '非遗编号', name: 'code', type: 'text', additionalProps: { placeholder: '请输入非遗编号' } },
        //{ label: '流行地区', name: 'popularRegion', type: 'text', additionalProps: { placeholder: '请输入流行地区' } },
        //{ label: '批准时间', name: 'approveTime', type: 'text', additionalProps: { placeholder: '请输入批准时间' } },     
        { 
          label: '非遗项目相关图片', name: 'images', type: 'mulit-image',
          //hidden: { callback: (_, model) => (model as IchInfo).type !== 4 },
          formProps: {
            extra: '建议分辨率：1920*1080以上',
          },
          additionalProps: {
            placeholder: '请上传图片',
            maxCount: 20,
            name: 'file',
            accept: 'image/*',
            beforeUpload: useBeforeUploadImageChecker(),
            uploadCo: useAliOssUploadCo('ich/images'),
          } as UploadImageFormItemProps,
        },
        { 
          label: '相关视频', name: 'video', type: 'single-video',
          //hidden: { callback: (_, model) => (model as IchInfo).type !== 3 },
          additionalProps: {
            placeholder: '请上传视频',
            accept: 'video/*',
            name: 'file',
            beforeUpload: useBeforeUploadVideoChecker(),
            uploadCo: useAliOssUploadCo('ich/video'),
          } as UploadImageFormItemProps,  
        },
        { 
          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', 
          hidden: { callback: (_, model) => authStore.loginType !== 0 },
          additionalProps: {
            text: authStore.userInfo?.nickname,
          }
        },
        { 
          label: '初审状态', name: 'progress', type: 'select', 
          hidden: { callback: (_, model) => authStore.loginType !== 1 },
          additionalProps: {
            options: [
              { text: '审核退回', value: -1 },
              { text: '暂未审核', value: 0 },
              { text: '初审通过', value: 1 },
            ],
          }
        },
        { 
          label: '审核意见', name: 'comment', type: 'text-area',
          disabled: { callback: (_, model) => authStore.loginType !== 1 },
          additionalProps: {
            placeholder: { callback: (_: any, model: any) => authStore.loginType === 1 ? '若审核不通过，请输入审核意见' : '暂无审核意见' },
          }
        },
      ]
    },
    /* {
      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: 'from', type: 'text',
          additionalProps: { placeholder: '请输入来源' },
        },
        { 
          label: '组图', name: 'images', type: 'mulit-image',
          hidden: { callback: (_, model) => (model as IchInfo).type !== 4 },
          additionalProps: {
            placeholder: '请上传图片',
            maxCount: 20,
            name: 'file',
            uploadCo: useImageSimpleUploadCo(),
          } as UploadImageFormItemProps,
        },
        { 
          label: '音频', name: 'audio', type: 'single-image',
          hidden: { callback: (_, model) => (model as IchInfo).type !== 2 },
          additionalProps: {
            placeholder: '请上传音频',
            name: 'file',
            uploadCo: useImageSimpleUploadCo()
          } as UploadImageFormItemProps,
        },
        { 
          label: '数字档案', name: 'archives', type: 'mulit-image',
          hidden: { callback: (_, model) => (model as IchInfo).type !== 5 },
          additionalProps: {
            placeholder: '请上传数字档案',
            maxCount: 20,
            name: 'file',
            uploadCo: useImageSimpleUploadCo()
          } 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: {
    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 IchExpandInfo()) as Ref<IchExpandInfo>;
const formExtendOptions = ref<IDynamicFormOptions>({
  formLabelCol: { span: 6 },
  formWrapperCol: { span: 24 },
  formAdditionaProps: {
    layout: 'vertical',
    scrollToFirstError: true,
  },
  formNestNameGenerateType: 'array',
  formItems: [
    { 
      type: 'select-id', label: '保护级别', name: 'protectLevel', 
      additionalProps: { 
        placeholder: '请选择保护级别', 
        loadData: async () => (await CommonContent.getCategoryList(171)).map(p => ({ label: p.title, value: p.id, raw: p })) 
      } 
    },
    { type: 'text', label: '其他名称', name: 'otherNames', additionalProps: { placeholder: '请输入其他名称' } },
    { type: 'text', label: '实践方式', name: 'practice', additionalProps: { placeholder: '请输入实践方式' } },
    { type: 'text', label: '表现形式', name: 'expression', additionalProps: { placeholder: '请输入表现形式' } },
    { type: 'text', label: '遗产持有者', name: 'holders', additionalProps: { placeholder: '请输入遗产持有者' } },
    { type: 'text', label: '列入名录时间', name: 'joinday', additionalProps: { placeholder: '请选择列入名录时间' } },
    { type: 'text', label: '形成时间', name: 'formation', additionalProps: { placeholder: '请选择形成时间' } },
    { type: 'text', label: '分布区域', name: 'area', additionalProps: { placeholder: '请输入分布区域' } },
    { type: 'text', label: '源流', name: 'origin', additionalProps: { placeholder: '请输入源流' } },
    { type: 'text', label: '主要特点', name: 'feature', additionalProps: { placeholder: '请输入主要特点' } },
    { type: 'text', label: '重要功能', name: 'functions', additionalProps: { placeholder: '请输入重要功能' } },
    { type: 'text', label: '代表作品', name: 'works', additionalProps: { placeholder: '请输入代表作品' } },
    { type: 'text', label: '保护单位', name: 'unit', additionalProps: { placeholder: '请输入保护单位' } },
    { type: 'text', label: '保护情况', name: 'protect', additionalProps: { placeholder: '请输入保护情况' } },
    { type: 'text-area', label: '综合概述', name: 'overview', additionalProps: { placeholder: '请输入综合概述' } },
    { type: 'text', label: '代表人物', name: 'figures', additionalProps: { placeholder: '请输入代表人物' } },
    { type: 'text', label: '传承群体', name: 'group', additionalProps: { placeholder: '请输入传承群体' } },
    { type: 'text', label: '传承方式', name: 'inherit', additionalProps: { placeholder: '请输入传承方式' } },
    { type: 'text', label: '发展现状', name: 'develop', additionalProps: { placeholder: '请输入发展现状' } },
    { type: 'text', label: '相关民俗', name: 'customs', additionalProps: { placeholder: '请输入相关民俗' } },
    { type: 'text', label: '相关信仰', name: 'religion', additionalProps: { placeholder: '请输入相关信仰' } },
    { type: 'text', label: '文化空间', name: 'space', additionalProps: { placeholder: '请输入文化空间' } },
    { type: 'text', label: '自然环境', name: 'natural', additionalProps: { placeholder: '请输入自然环境' } },
    { type: 'text', label: '社会环境', name: 'social', additionalProps: { placeholder: '请输入社会环境' } },
    { type: 'text', label: '历史沿革', name: 'history', additionalProps: { placeholder: '请输入历史沿革' } },
    { type: 'text', label: '续存状态', name: 'existence', additionalProps: { placeholder: '请输入续存状态' } },
    { type: 'text', label: '价值', name: 'meaning', additionalProps: { placeholder: '请输入价值' } },
    { type: 'text', label: '相关实物', name: 'prop', additionalProps: { placeholder: '请输入相关实物' } },
    { type: 'text', label: '其他基本情况', name: 'other', additionalProps: { placeholder: '请输入其他基本情况' } },
    { type: 'mulit-image', label: '相关图片', name: 'images', additionalProps: { placeholder: '请上传相关图片', uploadCo: useImageSimpleUploadCo() } },
    { type: 'text', label: '相关习俗', name: 'folkCulture', additionalProps: { placeholder: '请输入相关习俗' } },
    { type: 'text', label: '文物古迹', name: 'culturalRelic', additionalProps: { placeholder: '请输入文物古迹' } },
    { type: 'text', label: '文献资料', name: 'literature', additionalProps: { placeholder: '请输入文献资料' } },
    { type: 'text', label: '组织机构', name: 'organization', additionalProps: { placeholder: '请输入组织机构' } },
    { type: 'text-area', label: '项目描述', name: 'description', additionalProps: { placeholder: '请输入项目描述' } },
    { type: 'text-area', label: '简介', name: 'desc', additionalProps: { placeholder: '请输入简介' } },
    { type: 'text', label: '申报地区', name: 'declarationRegion', additionalProps: { placeholder: '请输入申报地区' } },
    { type: 'text', label: '流行地区', name: 'popularRegion', additionalProps: { placeholder: '请输入流行地区' } },
  ],
  formRules: { 
    protectLevel: [{ required: true, message: '请选择保护级别' }],
  }
});

async function loadData(id: number|undefined) {
  formModel.value = await InheritorContent.getIchInfo(id);
  console.log(formModel.value);
  
  formModel.value.expandInfo = await InheritorContent.getIchExpandInfo(id);
  formExtendModel.value = formModel.value.expandInfo || new IchExpandInfo();
}

</script>