form-generate-vue3 v1.0.3

使用样例

本组件旨在可以根据配置文件，快速生成可验证表单 @TODO 条件组件递归显示实现 @TODO 自定义表单验证组件实现

<template>
   <div>
      <el-form ref="ruleFormRef" :model="formData" label-width="120px">
         <form-generate 
            :columnList="formOptions"
            :formData = "formData"
            :columnSpan="12"
         />
         <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
               Create
            </el-button>
         </el-form-item>
      </el-form>
   </div>
</template>

<script setup name="User">
import { reactive } from 'vue';
const ruleFormRef  = ref()
const formOptions = [
   {
   "name": "name1",
   "type": "text",
   "title": "栏目标题",
   "rules": [
      {required: true,  trigger: 'change', message: '请输入'}
   ]
   },
   {
   "name": "name",
   "type": "text",
   "title": "栏目名称"
   },
   {
   "name": "total",
   "type": "number",
   "title": "栏目数量",
   
   "rules": [
      {required: true,  trigger: 'change'}
   ]
   },
   {
   "name": "count",
   "type": "number",
   "title": "浏览数量"
   },
   {
   "name": "descript",
   "type": "textarea",
   "title": "备注",
   "rows": 3,
   "rules": [
      {required: true,  trigger: 'change'}
   ]
   },
   {
      "name": "content",
      "type": "textarea",
      "title": "内容",
      "rows": 3
   },
   {
      "name": "startDate",
      "type": "date",
      "title": "开始日期",
      "required": true
   },
   {
      "name": "endDate",
      "type": "date",
      "title": "结束日期"
   },
   {
      "name": "isValid",
      "type": "switch",
      "title": "是否有效"
   },
   {
      "name": "isExpired",
      "type": "switch",
      "title": "是否过期",
      "required": true
   },
   {
   "name": "type",
   "type": "radio",
   "dictionary": [
      {
         "code": 1,
         "name": "横版栏目"
      },
      {
         "code": 2,
         "name": "竖版栏目"
      }
   ],
   "title": "栏目类型",
   "controls": [
      {
         "value": 1,
         "showCondition": [
            {
               "name": "show",
               "type": "radio",
               "dictionary": [
                  {
                  "code": 1,
                  "name": "China"
                  },
                  {
                  "code": 2,
                  "name": "English"
                  }
               ],
               "title": "测试类型",
               "required": true
            }
         ]
      },
      {
         "value": 2,
         "showCondition": [
         {
            "name": "isValids",
            "type": "switch",
            "title": "是否有效"
         }
         ]
      }
   ]
   },
   {
   "name": "requireType",
   "type": "radio",
   "dictionary": [
      {
         "code": 1,
         "name": "类型一"
      },
      {
         "code": 2,
         "name": "类型二"
      }
   ],
   "title": "图文类型",
   "required": true
   },
   {
   "name": "range",
   "type": "checkbox",
   "title": "发布范围",
   "dictionary": [
      {
         "code": 1,
         "name": "范围一"
      },
      {
         "code": 2,
         "name": "范围二"
      }
   ],
   "required": true
   },
   {
   "name": "dateRange",
   "type": "daterange",
   "title": "日期范围"
   },
   {
   "name": "creType",
   "type": "select",
   "dictionary": [
      {
         "code": 1,
         "name": "身份证"
      },
      {
         "code": 2,
         "name": "居住证"
      }
   ],
   "title": "证件类型"
   },
   {
   "name": "image",
   "type": "image",
   "title": "头像"
   }
]
const formData = reactive({
   "name1": '',
   "name": "主菜单栏目",
   "total": null,
   "count": null,
   "createDate": 1606730360386,
   "type": 1,
   "creType": "",
   "range": [],
   "isExpired": false,
   "isValid": true
})
const submitForm = async (formEl) => {
  if (!formEl) return
  console.log(formData)
  await formEl.validate((valid, fields) => {
    if (valid) {

      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>