Element Plus

<template>
    <FormGenerator v-bind="{ ...formAttrs }"/>
  </template>

  <script lang="tsx" setup>
  import { ref } from 'vue'
  import type { FormAttrs } from 'element-plus-generator/lib/type'

  const formAttrs = ref<FormAttrs>({
    model:{},
    formOption:[
      {
        type: 'input',
        formItem: {
          prop: 'name',
          label: 'Activity name',
        },
      },
    ],
    onSubmit:()=>{
      console.log('submit!')
    }
  })
  </script>

<template>
    <el-form :model="form">
      <el-form-item label="Activity name">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button>取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
  </template>

  <script lang="ts" setup>
  import { reactive } from 'vue'

  const form = reactive({
    name: '',
  })
  const onSubmit = () => {
    console.log('submit!')
  }
  </script>

<template>
    <FormGenerator ref="RefFormGenerator" v-bind="{ ...formAttrs }"/>
  </template>

  <script lang="tsx" setup>
  import { FormGenerator, GeneratorUtils } from 'element-plus-generator'
  import type { FormAttrs,RefFormGenerator } from 'element-plus-generator/lib/type'
  import { ref } from 'vue'

  let RefFormGenerator = ref<RefFormGenerator>()
  const formAttrs = ref<FormAttrs>({
    labelWidth:'120px',
    statusIcon:true,
    model:{
      name: '',
      region: '',
      count: '',
      date: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    },
    formOption:[
      {
        type: 'input',
        formItem: {
          prop: 'name',
          label: 'Activity name',
        },
      },
      {
        type: 'select',
        formItem: {
          prop: 'region',
          label: 'Activity zone',
        },
        control: {
          option: [
            {label: 'Option1',value: 'Option1'},
            {label: 'Option2',value: 'Option2'},
          ]
        },
      },
      {
        type: 'datetime',
        formItem: {
          prop: 'date',
          label: 'Activity time',
        },
        control: {
          type: "datetime"
        },
      },
      {
        type: 'switch',
        formItem: {
          prop: 'delivery',
          label: 'Instant delivery',
        },
      },
      {
        type: 'checkbox',
        formItem: {
          prop: 'type',
          label: 'Activity type',
        },
        control: {
          checkboxGroup: [
            {label: 'Online activities',value: 'Online activities'},
            {label: 'Promotion activities',value: 'Promotion activities'},
            {label: 'Offline activities',value: 'Offline activities'},
            {label: 'Simple brand exposure',value: 'Simple brand exposure'},
          ]
        },
      },
      {
        type: 'radio',
        formItem: {
          prop: 'resource',
          label: 'Resources',
        },
        control: {
          radioGroup: [
            {label: 'Sponsor',value: 'Sponsor'},
            {label: 'Venue',value: 'Venue'},
          ]
        },
      },
      {
        type: 'input',
        formItem: {
          prop: 'form',
          label: 'Activity form',
        },
        control: {
          type: 'textarea'
        }
      },
    ],
    onSubmit:()=>{
      console.log(RefFormGenerator.value());
    }
  })
  GeneratorUtils.setRequired(formAttrs.value.formOption)
  </script>

<template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      status-icon
    >
      <el-form-item label="Activity name" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="Activity zone" prop="region">
        <el-select v-model="ruleForm.region" placeholder="Activity zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time" required>
        <el-col>
          <el-form-item prop="date">
            <el-date-picker
              v-model="ruleForm.date"
              type="datetime"
              placeholder="Pick a date"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery" prop="delivery">
        <el-switch v-model="ruleForm.delivery" />
      </el-form-item>
      <el-form-item label="Activity type" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="Online activities" name="type" />
          <el-checkbox label="Promotion activities" name="type" />
          <el-checkbox label="Offline activities" name="type" />
          <el-checkbox label="Simple brand exposure" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="Sponsorship" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form" prop="desc">
        <el-input v-model="ruleForm.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </el-form-item>
    </el-form>
  </template>

  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'

  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    name: '',
    region: '',
    count: '',
    date: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })

  const rules = reactive<FormRules>({
    name: [
      {
        required: true,
        message: 'Please input Activity name',
        trigger: 'change'
      },
    ],
    region: [
      {
        required: true,
        message: 'Please select Activity zone',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: 'Please select Activity count',
        trigger: 'change',
      },
    ],
    date1: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a date',
        trigger: 'change',
      },
    ],
    date2: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
    type: [
      {
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
      },
    ],
    resource: [
      {
        required: true,
        message: 'Please select activity resource',
        trigger: 'change',
      },
    ],
    desc: [
      {
        required: true,
        message: 'Please input activity form',
        trigger: 'blur'
      },
    ],
  })

  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  </script>