@dongjuntao/dynamic-form

Vue 3 动态表单填写组件，从 auth-pc 自研表单（FormFiller）迁移而来。

安装

npm install @dongjuntao/dynamic-form ant-design-vue @ant-design/icons-vue vue

快速开始

// main.ts
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
import { createDynamicForm } from '@dongjuntao/dynamic-form'
import '@dongjuntao/dynamic-form/style.css'
import axios from 'axios'

const app = createApp(App)
app.use(Antd)
app.use(
  createDynamicForm({
    apis: {
      orgTree: () => axios.get('/server-system/org/tree').then(r => r.data),
      empPage: params =>
        axios.get('/server-system/emp/page', { params }).then(r => r.data),
      upload: (formData, params) =>
        axios
          .post('/server-system/aliyun/oss/upload', formData, { params })
          .then(r => r.data),
    },
    uploadBusinessType: 'auth_hub_emp_avatar',
    amapKey: 'your-amap-key',
  })
)
app.mount('#app')

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { FormFiller } from '@dongjuntao/dynamic-form'
import axios from 'axios'

const fillerRef = ref()
const formConfig = ref({ fields: [], layout: 'left' })

onMounted(async () => {
  const { payload } = await axios.get('/server-system/form/field/list', {
    params: { formId: 'YOUR_FORM_ID' },
  })
  formConfig.value = JSON.parse(payload.array[0].extAttr)
})

async function submit() {
  const { values } = await fillerRef.value.getFormData()
  await axios.post('/server-system/form/submit/YOUR_FORM_ID', values)
}
</script>

<template>
  <FormFiller ref="fillerRef" :form-config="formConfig" device-type="pc" />
  <a-button type="primary" @click="submit">提交</a-button>
</template>

API

createDynamicForm(options)

| 选项 | 说明 | |------|------| | apis.orgTree | 部门树（department 字段） | | apis.empPage | 员工列表（user-select 字段） | | apis.upload | 图片/文件上传 | | uploadBusinessType | 上传业务类型，默认 auth_hub_emp_avatar | | amapKey | 高德地图 Key（location 字段） |

FormFiller Props

| Prop | 类型 | 默认 | |------|------|------| | formConfig | FormConfig | 必填 | | deviceType | 'pc' \| 'mobile' | 'pc' |

FormFiller Methods（ref 调用）

| 方法 | 说明 | |------|------| | getFormData() | 校验并返回 { values, fieldValues } | | resetForm() | 重置表单 | | updateFieldStates() | 刷新字段联动状态 |

数据格式

与 auth-pc 后端 extAttr 完全兼容：

{
  "fields": [
    {
      "id": "field_1",
      "key": "field_1",
      "type": "input",
      "label": "姓名",
      "required": true,
      "colSpan": 24,
      "props": {}
    }
  ],
  "layout": "left"
}

本地开发

cd packages/dynamic-form
npm install
npm run build

发布

npm login
npm publish --access public

后续计划

• [ ] FormDesigner（表单设计器）迁移
• [ ] 独立 @dongjuntao/dynamic-form-designer 分包