xiangyuan-app/src/pages/dig/forms/data/element.ts

import VillageInfoApi, { CommonInfoModel } from "@/api/inhert/VillageInfoApi";
import { useAliOssUploadCo } from "@/common/components/upload/AliOssUploadCo";
import type { PickerIdFieldProps } from "@/components/dynamic/wrappers/PickerIdField";
import type { FieldProps } from "@/components/form/Field.vue";
import type { StepperProps } from "@/components/form/Stepper.vue";
import type { UploaderFieldProps } from "@/components/form/UploaderField.vue";
import type { SingleForm } from "../forms";
import { villageCommonContent } from "./common";

export const vilElementForm : SingleForm = [CommonInfoModel, (r) => ({
  formItems: [
    {
      label: '基础信息',
      name: 'baseInfo',
      type: 'flat-group',
      childrenColProps: { span: 24 },
      children: [
        {
          label: '名称', 
          name: 'name', 
          type: 'text', 
          defaultValue: '',
          additionalProps: {
            placeholder: '请输入名称',
          },
          rules:  [{
            required: true,
            message: '请输入名称',
          }] 
        }, 
        {
          label: '编号', 
          name: 'code', 
          type: 'text', 
          defaultValue: '',
          additionalProps: {
            placeholder: '（可选）请输入编号',
          },
        },
        {
          label: '年代', 
          name: 'age',
          type: 'select-id', 
          additionalProps: {
            loadData: async () => 
            (await VillageInfoApi.getCategoryChildList(103))
              .map((p) => ({
                value: p.id,
                text: p.title,
              }))
            ,
          } as PickerIdFieldProps,
          formProps: { showRightArrow: true } as FieldProps,
          rules: [{
            required: true,
            message: '请选择年代',
          }],
        },
        {
          label: '要素类型', 
          name: 'elementType',
          type: 'select-id', 
          additionalProps: {
            loadData: async () => 
            (await VillageInfoApi.getCategoryChildList(178))
              .map((p) => ({
                value: p.id,
                text: p.title,
              }))
            ,
          } as PickerIdFieldProps,
          formProps: { showRightArrow: true } as FieldProps,
          rules: [{
            required: true,
            message: '请选择要素类型',
          }],
        },
      ]
    },
    {
      label: '详细信息',
      name: 'detailInfo',
      type: 'flat-group',
      childrenColProps: { span: 24 },
      children: [
        {
          label: '环境特点', 
          name: 'environment', 
          type: 'richtext', 
          defaultValue: '',
          additionalProps: {
            placeholder: '请输入环境特点',
            maxLength: 500,
            showWordLimit: true, 
          } as FieldProps,
          rules:  [] 
        },
        {
          label: '功能特点', 
          name: 'funcFeatures', 
          type: 'richtext', 
          defaultValue: '',
          additionalProps: {
            placeholder: '请输入功能特点',
            maxLength: 300,
            showWordLimit: true, 
          } as FieldProps,
          rules:  [] 
        },
        {
          label: '保存状况', 
          name: 'condition', 
          type: 'richtext', 
          defaultValue: '',
          additionalProps: {
            placeholder: '请输入保存状况',
            maxLength: 500,
            showWordLimit: true, 
          } as FieldProps,
          rules:  [] 
        },
        {
          label: '文化故事', 
          name: 'story', 
          type: 'richtext', 
          defaultValue: '',
          additionalProps: {
            placeholder: '请输入文化故事',
            maxLength: 1000,
            showWordLimit: true, 
          } as FieldProps,
          rules:  [] 
        },
        {
          label: '图片', 
          name: 'images', 
          type: 'uploader', 
          defaultValue: '',
          additionalProps: {
            upload: useAliOssUploadCo('xiangyuan/element'),
            maxFileSize: 1024 * 1024 * 20,
            maxUploadCount: 20,
          } as UploaderFieldProps,
          rules:  [] 
        },
        ...villageCommonContent(r, {
          title: '环境要素',
          showContent: false,
          showTitle: false,
        }).formItems
      ]
    },
    {
      label: '位置信息',
      name: 'locationInfo',
      type: 'flat-group',
      childrenColProps: { span: 24 },
      children: [
        {
          label: '位置', 
          name: 'position', 
          type: 'text', 
          defaultValue: '',
          additionalProps: {
            placeholder: '请输入位置',
          },
          rules:  [{
            required: true,
            message: '请输入位置',
          }] 
        },
        {
          label: '经纬度', 
          name: 'lonlat', 
          type: 'select-lonlat', 
          defaultValue: '',
          additionalProps: {},
          formProps: { showRightArrow: true } as FieldProps,
          rules:  [{
            required: true,
            message: '请输入经纬度',
          }]
        }, 
        {
          label: '地址', 
          name: 'address', 
          type: 'select-address', 
          defaultValue: '',
          additionalProps: {},
          rules:  [{
            required: true,
            message: '请输入地址',
          }] 
        },
        {
          label: '方位', 
          name: 'orientation', 
          type: 'text', 
          defaultValue: '',
          additionalProps: { placeholder: '方位' },
          rules: []
        },
        {
          label: '相对距离', 
          name: 'distance', 
          type: 'text', 
          defaultValue: '',
          additionalProps: { placeholder: '相对距离' },
          rules: []
        },
        {
          name: '',
          label: '平面坐标XY',
          type: 'flat-simple',
          children: [
            { 
              label: '', 
              name: 'mapX', 
              type: 'number', 
              defaultValue: 0,
              additionalProps: {
                min: -250,
                max: 250,
              } as StepperProps,
              formProps: {
                labelWidth: '0rpx',
                labelPosition: 'left',
                showBottomBorder: false,
              },
              rules:  [{
                required: true,
                message: '请输入X',
              }] 
            },
            { 
              label: '', 
              name: 'mapY', 
              type: 'number', 
              defaultValue: 0,
              additionalProps: {
                min: -250,
                max: 250,
              } as StepperProps,
              formProps: {
                labelWidth: '0rpx',
                labelPosition: 'left',
                showBottomBorder: false,
              },
              rules:  [{
                required: true,
                message: '请输入Y',
              }] 
            },
          ]
        },
      ]
    },
  ] 
})]