基于 Vue3.0 + TS 的自定义表单生成器。支持 npm 引入的方式。UI 库支持 ant-design-vue 。
- 动态数据源配置
- 文件上传
- 富文本编辑器
- 生成 JSON
- 生成代码
- 扩展控件
我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。
npm install vue3-form-ant3 --save
yarn add vue3-form-ant3
-
不想在全局安装也可以在组件内直接使用相应的组件。
import { AntDesignForm, AntGenerateForm, } from 'vue3-form-ant3'
npm 引入
import { createApp } from 'vue'
import antd from 'ant-design-vue'
import App from './App.vue'
import DesignForm from 'vue3-form-ant3'
import 'ant-design-vue/dist/antd.css'
createApp(App)
.use(antd)
.use(DesignForm)
.mount('#app')
<template>
<AntDesignForm ref="designForm" />
</template>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
preview | 设计器预览操作按钮 | boolean | true |
generateCode | 设计器生成代码按钮 | boolean | true |
generateJson | 设计器生成 Json 按钮 | boolean | true |
uploadJson | 设计器导入 JSON 按钮 | boolean | true |
clearable | 设计器清空按钮 | boolean | true |
basicFields | 设计器左侧基础字段配置 | array | - |
advanceFields | 设计器左侧高级字段配置 | array | - |
extendConfig | 扩展配置 | array | - |
uploadConfig | 上传配置 | object | - |
remoteFalg | 动态数据开关 | array | ['radio', 'checkbox', 'select'] |
export const extendConfig = [
{
source: 'extend', // 来源扩展
label: '关联孪生体',
type: 'releative',
options: {
defaultValue: '[]',
width: '200px',
placeholder: '请选择',
clearable: false,
disabled: false,
twins: {
twinClassCode: undefined,
props: []
}
},
model: '',
key: ''
}
]
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
action | 上传地址 | string | null |
headers | 请求头 | object | - |
data | 携带数据 | object | - |
通过 ref 可以获取到实例并调用实例方法
方法名 | 说明 | 参数 |
---|---|---|
getJson() | 获取设计器配置的 JSON 数据 | - |
setJson(value) | 设置设计器的配置信息 | 通过 getJson 获取的数据 |
clear() | 清空设计器 | |
getTemplate(type) | 获取设计器生成的可以直接使用的代码 | type 的类型为 'vue' 或 'html' |
基础字段(basicFields)
type | 字段名 |
---|---|
input | 输入框 |
textarea | 文本框 |
number | 数字计数框 |
radio | 单选框组 |
checkbox | 多选框组 |
date | 时间选择器 |
select | 下拉选择框 |
高级字段(advanceFields)
type | 字段名 |
---|---|
uploadFile | 文件上传 |
editor | 富文本 |
扩展控件(extendConfig)
type | 字段名 |
---|---|
releative | 关联孪生体 |
其它 | ... |
<AntDesignForm :extendConfig="config" :uploadConfig="uploadConfig">
<template v-slot:extendContent="{element,data,disable,onBack}">
<div>
<!-- 根据element.type可设置不同的扩展控件内容 -->
<AssociatedTwins
:disabled="disable"
:model-value="data"
:clearable="element.options.clearable"
:width="element.options.width"
:twins="element.options.twins"
:placeholder="element.options.placeholder"
:el-key="element.key"
@onBack="(res)=>onBack(res)"
v-if="element.type==='releative'"
/>
</div>
</template>
<template v-slot:extendConfig="{data}">
<div>
<!--根据data.type可设置不同的扩展控件属性设置 -->
<AssociatedConfig :source="data" v-if="data.type==='releative'"/>
</div>
</template>
</AntDesignForm>
</template>
<script lang="ts" setup>
import { defineComponent, reactive, toRefs, defineEmits, ref } from 'vue'
import AssociatedTwins from './extent/AssociatedTwins.vue' //扩展的关联孪生体内容
import AssociatedConfig from './extent/AssociatedConfig.vue'//扩展的关联孪生体的控制属性设置
// 扩展控件配置
const config = [
{
source: 'extend', // 来源扩展
label: '关联孪生体',
type: 'releative',
options: {
defaultValue: '[]',
width: '200px',
placeholder: '请选择',
clearable: false,
disabled: false,
twins: {
twinClassCode: undefined,
props: []
}
},
model: '',
key: ''
}
]
</script>
<template>
<AntGenerateForm ref="generateForm" />
</template>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 表单 json 配置数据(从表单设计器获取的 json) | object | - |
value | 表单数据(从表单生成器获取的 value) | object | - |
disabled | 是否禁用 | boolean | false |
uploadConfig | 上传配置 | object | - |
通过 ref 可以获取到实例并调用实例方法
方法名 | 说明 | 参数 |
---|---|---|
getData() | 获取表单数据(返回 Promise) | - |
reset() | 重置表单数据 | 通过 getJson 获取的数据 |
单选框,多选框,下拉选择框-等选择项需要通过数据生成,这时可以分别配置动态数据。
<template>
<AntDesignForm :remoteFalg="remoteFalg" >
<!-- 扩展单选框,下拉框,多选框的动态数据扩展 -->
<template v-slot:extendRemote="{data}">
<!-- 这里可以结合是否配置了单选框,下拉框,多选框动态数据以及data.type: 'radio', 'checkbox', 'select',来分别扩展各自的动态数据 -->
<Remote :source="data"/>
</template>
</AntDesignForm>
</template>
<script lang="ts" setup>
import Remote from './extend/remote.vue'
const remoteFalg = ['radio', 'checkbox', 'select']
</script>
<style scoped>
</style>
<template>
<div class="remote">
<a-tree-select tree-default-expand-all allow-clear :fieldNames="replaceFields" style="width: 100%" @change="changeRemote" :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" :tree-data="treeData" placeholder="动态选择数据源">
</a-tree-select>
<div class="sel_list" v-if="data.options.options.length>0">
<div v-if="
data.type === 'radio' ||
(data.type === 'select' && !data.options.multiple)
">
<a-radio-group v-model:value="data.options.defaultValue">
<div v-for="item in data.options.options" :key="item.value"><a-radio :value="item.value" >{{ data.options.showLabel?item.label:item.value }}</a-radio></div>
</a-radio-group>
</div>
<div v-if="
data.type === 'checkbox' ||
(data.type === 'select' && data.options.multiple)
">
<a-checkbox-group v-model:value="data.options.defaultValue">
<div v-for="item in data.options.options" :key="item.value"><a-checkbox :value="item.value" >{{ data.options.showLabel?item.label:item.value }}</a-checkbox></div>
</a-checkbox-group>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, defineProps } from 'vue'
// 接受来自父组件的传参
const props = defineProps({
source: {
type: Object
}
})
const data = ref<any>(props.source)
const replaceFields = ref({
children: 'children',
label: 'name',
value: 'code'
})
// 从接口获取
const treeData = ref([
{
name: '测试',
code: 'code1',
disabled: true,
children: [
{
name: '测试1',
code: 'code2',
disabled: false,
children: []
},
{
name: '测试2',
code: 'code3',
disabled: false,
children: []
}
]
}
])
// 从接口获取
const dataList = ref([
{
code: 'A',
name: 'A1'
},
{
code: 'B',
name: 'B1'
},
{
code: 'C',
name: 'C1'
}
])
// 动态数据源改变
const changeRemote = (value:any, label:any, extra:any) => {
// 根据value查询设置dataList并赋值给data.value.options.options
data.value.options.options = dataList.value.map((item:any) => {
return {
value: item.code,
label: item.name
}
})
}
</script>
<style lang="scss" scoped>
.remote {
width: 100%;
.sel_list{
margin-top: 10px;
div{
margin:4px 0;
}
}
}
</style>