xiangyuan-app/src/pages/dig/admin/data/volunteer.ts

import CommonContent from "@/api/CommonContent";
import VillageApi from "@/api/inhert/VillageApi";
import { useAliOssUploadCo } from "@/common/components/upload/AliOssUploadCo";
import type { IDynamicFormItemCallbackAdditionalProps, IDynamicFormOptions, IDynamicFormRef } from "@/components/dynamic";
import type { CheckBoxTreeListProps } from "@/components/dynamic/wrappers/CheckBoxTreeList.vue";
import type { PickerIdFieldProps } from "@/components/dynamic/wrappers/PickerIdField";
import type { RadioValueProps } from "@/components/dynamic/wrappers/RadioValue";
import type { FieldProps } from "@/components/form/Field.vue";
import type { FormProps } from "@/components/form/Form.vue";
import type { UploaderFieldProps } from "@/components/form/UploaderField.vue";
import type { RuleItem } from "async-validator";
import type { Ref } from "vue";

export function getVolunteerForm(options: {
  canSetCatalog: boolean,
  villageId: number,
  onlyPassword?: boolean,
  noPassword?: boolean,
  isNew: Ref<boolean>,
  formRef: Ref<IDynamicFormRef|undefined>,
}) : IDynamicFormOptions {
  return {
    formItems: [
      {
        name: 'groupBase',
        type: 'flat-simple',
        show: { callback: () => !options.noPassword },
        children: [
          { 
            label: '登录账号', name: 'username', type: 'text',
            additionalProps: { 
              placeholder: '请输入登录账号',
            },
            rules: [{ required: true, message: '请输入登录账号' }],
            show: { callback: () => options.isNew.value },
          },
          {
            label: '密码',
            name: 'password',
            type: 'text',
            additionalProps: { 
              placeholder: '请输入密码',
              type: 'password',
            } as FieldProps,
            rules: [{ required: true, message: '请输入密码' }],
            show: { callback: () => options.isNew.value || options.onlyPassword === true },
          },
          {
            label: '确认密码',
            name: 'passwordRepeat',
            type: 'text',
            additionalProps: { 
              placeholder: '请再输入一次密码',
              type: 'password',
            } as FieldProps,
            rules: [
              { required: true, message: '请再输入一次密码' },
              {
                async validator(rule, value) {
                  if (value != options.formRef.value?.getValueByPath('password'))
                    throw '两次输入密码不一致，请检查';
                },
              }
            ] as RuleItem[],
            show: { callback: () => options.isNew.value || options.onlyPassword === true },
          },
        ]
      },
      {
        name: 'groupExtra',
        type: 'flat-simple',
        show: { callback: () => options.onlyPassword !== true },
        childrenColProps: {
          span: 24,
        },
        children: [
          {
            label: '真实名称', name: 'name', type: 'text',
            additionalProps: { placeholder: '请输入真实名称' },
            rules: [{ required: true, message: '请输入真实名称' }],
          },
          {
            label: '手机号', name: 'mobile', type: 'text',
            additionalProps: { placeholder: '请输入手机号' },
            rules: [{ required: true, message: '请输入手机号' }],
          },
          { 
            label: '区域', name: 'regionId', type: 'select-id',
            additionalProps: {
              placeholder: '请选择区域',
              disabled: { callback: () => !options.isNew.value },
              loadData: async () => (await CommonContent.getCategoryList(1)).map(p => ({ text: p.title, value: p.id, raw: p }))
            } as IDynamicFormItemCallbackAdditionalProps<PickerIdFieldProps>,
            rules: [{ required: true, message: '请选择区域' }],
          },
          {
            label: '性别', name: 'sex', type: 'radio-value',
            additionalProps: {
              options: [
                { text: '男', value: 1 },
                { text: '女', value: 2 }
              ]
            } as RadioValueProps,
          },
          { 
            label: '头像', name: 'image', type: 'uploader',
            additionalProps: {
              single: true,
              maxFileSize: 1024 * 1024 * 10,
              upload: useAliOssUploadCo('xiangyuan/volunteer/images')
            } as UploaderFieldProps,
          },
          {
            label: '类型', name: 'type', type: 'radio-value',
            additionalProps: {
              options: [
                { text: '志愿者', value: 'volunteer' },
                { text: '社区工作者', value: 'staff' }
              ]
            } as RadioValueProps,
            rules: [{ required: true, message: '请选择类型' }],
          },
          { 
            label: '工作单位', name: 'unit', type: 'text', additionalProps: { placeholder: '请输入手机号' } ,
            rules: [{ required: true, message: '请输入手机号' }],
            show: { callback: () => options.formRef.value?.getValueByPath('type') === 'staff' },
          },
          { 
            label: '职位', name: 'job', type: 'text', additionalProps: { placeholder: '请输入手机号' } ,
            rules: [{ required: true, message: '请输入手机号' }],
            show: { callback: () => options.formRef.value?.getValueByPath('type') === 'staff' },
          },
          { 
            label: '手机号', name: 'mobile', type: 'text', additionalProps: { placeholder: '请输入手机号' } ,
            rules: [{ required: true, message: '请输入手机号' }],
          },
          { label: '现居地址', name: 'address', type: 'text', additionalProps: { placeholder: '请输入现居地址' } },
          { 
            label: '个人介绍', 
            name: 'intro', 
            type: 'textarea', 
            additionalProps: { 
              placeholder: '请输入个人介绍',
              showWordLimit: true,
              maxLength: 500,
            } as FieldProps,
          },
          ...(options.canSetCatalog ? [{ 
            label: '采集版块', name: 'catalogIds', type: 'check-box-tree', 
            additionalProps: { 
              placeholder: '请选择采集版块',
              vertical: true,
              multiple: true,
              loadData: async (pid) => (await VillageApi.getCatalogList(options.villageId, undefined, pid)).map((p) => ({
                text: p.title,
                value: p.id,
                hasChildren: p.haschild,
              })),
            } as CheckBoxTreeListProps,
          }]: []),
          { 
            label: '村社认领说明', name: 'claimReason', type: 'text', 
            additionalProps: { placeholder: '请输入村社认领说明' } ,
            show: { callback: () => options.isNew.value },
          },
        ]
      },
    ],
    formAdditionaProps: {
      labelWidth: '160rpx',
      labelAlign: 'right',
      innerStyle: {
        radius: '10rpx',
      },
    } as Omit<FormProps, 'model'>,
  }

}