form-create-wot

form-create JSON 动态表单渲染引擎，基于 wot-design-uni，适用于 uni-app 移动端

将管理端 form-create（Ant Design Vue / Element Plus）设计的 JSON 表单配置，在 uni-app 移动端（H5 / 小程序 / App）使用 wot-design-uni 组件渲染。

安装

npm install form-create-wot

前置依赖：项目中需已安装 wot-design-uni 和 sass

配置

1. 注册插件

// main.ts
import { createSSRApp } from 'vue'
import App from './App.vue'
import FormCreateWot from 'form-create-wot'

export function createApp() {
  const app = createSSRApp(App)
  app.use(FormCreateWot)
  return { app }
}

2. 配置 easycom（pages.json）

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue",
      "^fc-form$": "form-create-wot/src/fc/components/FcForm.vue",
      "^fc-form-item$": "form-create-wot/src/fc/components/FcFormItem.vue",
      "^fc-select$": "form-create-wot/src/fc/adapter/fc-select.vue",
      "^fc-radio$": "form-create-wot/src/fc/adapter/fc-radio.vue",
      "^fc-checkbox$": "form-create-wot/src/fc/adapter/fc-checkbox.vue",
      "^fc-date-picker$": "form-create-wot/src/fc/adapter/fc-date-picker.vue"
    }
  }
}

使用

基础用法

<template>
  <fc-form
    :rule="rules"
    :option="option"
    v-model:api="fApi"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormApi, FormRule, FormOption } from 'form-create-wot'

const fApi = ref<FormApi | null>(null)

const rules = ref<FormRule[]>([
  {
    type: 'input',
    field: 'name',
    title: '姓名',
    props: { placeholder: '请输入姓名' },
    validate: [{ required: true, message: '请输入姓名' }]
  },
  {
    type: 'select',
    field: 'gender',
    title: '性别',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  },
  {
    type: 'switch',
    field: 'vip',
    title: 'VIP',
    value: false
  }
])

const option = ref<FormOption>({
  submitBtn: { text: '提交', show: true },
  resetBtn: { text: '重置', show: true }
})

const onSubmit = (data: Record<string, any>) => {
  console.log('表单数据:', data)
}
</script>

从后端 API 加载 JSON

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { parseJsonString } from 'form-create-wot'

const rules = ref([])

onMounted(async () => {
  // 从芋道后端获取 form-create 的 JSON 配置
  const [err, res] = await uni.request({ url: '/api/bpm/form/get?id=1' })
  if (res?.data?.data?.conf) {
    rules.value = parseJsonString(res.data.data.conf)
  }
})
</script>

fApi 操作

// 获取表单数据
const data = fApi.value.formData()

// 设置字段值
fApi.value.setValue('name', '张三')

// 批量设置
fApi.value.setValues({ name: '张三', gender: 'male' })

// 校验
await fApi.value.validate()

// 禁用/启用
fApi.value.disabled(true)
fApi.value.disabled(false, 'name')

// 显隐
fApi.value.hidden(true, 'gender')

// 重置
fApi.value.resetFields()

支持的组件类型

| type | 说明 | wot 组件 | |---|---|---| | input | 文本输入 | wd-input | | textarea | 文本域 | wd-textarea | | InputNumber | 数字输入 | wd-input-number | | select | 下拉选择 | wd-select-picker | | radio | 单选 | wd-radio-group | | checkbox | 多选 | wd-checkbox-group | | switch | 开关 | wd-switch | | datePicker | 日期选择 | wd-datetime-picker | | timePicker | 时间选择 | wd-datetime-picker | | rate | 评分 | wd-rate | | slider | 滑块 | wd-slider |

同时兼容 antdv 别名（如 a-input、a-select 等）

平台兼容性

| 平台 | 状态 | |---|---| | H5 | ✅ | | 微信小程序 | ✅ | | 支付宝小程序 | ✅ | | Android App | ✅ | | iOS App | ✅ |

License

MIT