xaboy / form-create-designer Goto Github PK

使用vue3版本的表单设计器拖动上传组件的时候会出现这个错误

官网示例可见，导入options，点击确定后，右侧表单配置不变，没有生效

请问这个表单设计器后续会出基于ant-design-vue 版本的开发吗，今年上半年会出吗？

可以参考form-generate的设计器，在每个组件的属性panel，进行定义

有一些定制化的东西希望加在基础配置中，请问是怎么增加呢
比如说加一个字段进去，是个输入框这样子的

官网可以输入

示例代码 example 无法输入

场景是，在表单中，有些组件需要显示在电脑上，有些在移动端无需要展示。大佬能否提供这样的接口，比如传入某些条件，display{ "mobile","PC"}。在组件内提供标识就可以使用form-create 来渲染。万分致谢！

vue3版本不支持按需导入element-plus组件吗

1.[{"type":"FcRow","children":[{"type":"col","props":{"span":12},"children":[{"type":"input","field":"Foii5wsnacbrh","title":"输入框","info":"","_fc_drag_tag":"input","hidden":false,"display":true}],"_fc_drag_tag":"col","hidden":false,"display":true}],"_fc_drag_tag":"row","hidden":false,"display":true}]
2.[{"type":"FcRow","children":[{"type":"col","props":{"span":12},"children":[{"type":"DragTool","props":{"dragBtn":false,"mask":false},"effect":{"_fc_tool":true},"inject":true,"on":{},"children":[{"type":"DragBox","wrap":{"show":false},"col":{"show":false},"inject":true,"props":{"rule":{"props":{"tag":"el-col","group":"default","ghostClass":"ghost","animation":150,"handle":"._fc-drag-btn","emptyInsertThreshold":0,"direction":"vertical","itemKey":"type"}},"tag":"col"},"children":[{"type":"DragTool","props":{"dragBtn":false,"mask":false},"effect":{"_fc_tool":true},"inject":true,"on":{},"children":[{"type":"DragBox","wrap":{"show":false},"col":{"show":false},"inject":true,"props":{"rule":{"props":{"tag":"el-col","group":"default","ghostClass":"ghost","animation":150,"handle":"._fc-drag-btn","emptyInsertThreshold":0,"direction":"vertical","itemKey":"type"}},"tag":"col"},"children":[{"type":"DragTool","props":{"dragBtn":true,"mask":true},"effect":{"_fc_tool":true},"inject":true,"on":{},"children":[{"type":"DragTool","props":{"dragBtn":true,"mask":true},"effect":{"_fc_tool":true},"inject":true,"on":{},"children":[{"type":"input","field":"Foii5wsnacbrh","title":"输入框","info":"","_fc_drag_tag":"input","hidden":false,"display":true,"props":{},"on":{},"options":[],"children":[],"config":{"config":{"icon":"icon-input","label":"输入框","name":"input"}},"effect":{"_fc":true}}],"options":[],"hidden":false,"display":true}],"options":[],"hidden":false,"display":true}],"on":{},"options":[],"hidden":false,"display":true}],"options":[],"hidden":false,"display":true}],"on":{},"options":[],"hidden":false,"display":true}],"options":[],"hidden":false,"display":true}],"_fc_drag_tag":"col","hidden":false,"display":true,"on":{},"options":[],"config":{"config":{"name":"col","drag":true,"dragBtn":false,"inside":true,"mask":false}},"effect":{"_fc":true}}],"_fc_drag_tag":"row","hidden":false,"display":true,"props":{},"on":{},"options":[],"config":{"config":{"icon":"icon-row","label":"栅格布局","name":"row","mask":false,"children":"col"}},"effect":{"_fc":false},"_id":"Fygc5wsnc4lti"}]

多次调用setRule方法，栅格数据结构会变的越来越复杂

table这种挺常见的

为什么输入框自定义校验规则，怎么填写都是提示输入有问题，比如我校验数字最大值是10，我输入多少，都提示我错了

代码里好像有，但是注释掉了。
请问什么时候能够打开？

element-ui版本的辅助组件-按钮，拖动到designer中，生成json串中，没有按钮field的命名，是否可以对此添加相关配置？

就是把表单可以分成多页来填报？能给写意见吗？

就算打开不填数据也提示格式有误

已经支持element-ui，为何不支持iview呢？

解析的表单json中设置了disabled: true 预览和生成时都无效。官网表单设计器即可复现bug 导入json 设置无效

rt

form-create-design生成规则只有最基础的配置，没有绑定事件的设置，导致生成的rule里面没有emit等相关属性

[](url

)

[
{
"info": "",
"link": [
""
],
"type": "input",
"field": "remainingAmount",
"props": {
"disabled": false,
"readonly": true
},
"title": "Remaining Amount",
"hidden": false,
"update": "[[FORM-CREATE-PREFIX-function update(val, rule, fApi) {\n console.log("循环")\n var totalAmount = fApi.getValue("totalAmount");\n var waivedAmount=fApi.getValue("waivedAmount");\n var m = null;\n fApi.setValue("remainingAmount",m)\n}-FORM-CREATE-SUFFIX]]",
"display": true,
"validate": [
{
"required": false
}
],
"_fc_drag_tag": "input"
}
]

fApi.setValue如果设置值为null会循环触发update，旧版本不会循环触发

在配置页面，如何匹配两个组件联动？

// 自定义了一个生成组件的方法 可以通过传参批量生成组件
createTag(icon, label, name) {
const tag = {
icon: icon,
label: label,
name: name,
rule() {
console.log(label);
return {
type: name,
field: Math.random(),
title: label,
info: '',
effect: {
fetch: '',
},
value: '',
props: {},
options: [
{value: '1', label: '选项1'},
{value: '2', label: '选项2'},
]
};
},
props() {
return [
FcDesigner.makeOptionsRule('options'),
{
type: 'switch',
field: 'type',
title: '按钮类型',
props: { activeValue: 'button', inactiveValue: 'default' },
},
{ type: 'switch', field: 'disabled', title: '是否禁用' },
{
type: 'inputNumber',
field: 'min',
title: '输入的最小长度',
},
{
type: 'inputNumber',
field: 'max',
title: '输入的最大长度',
}
];
},
};
return tag;
}

// 这块是应用

// data里的数据
singleTag: [
{
icon: 'icon-input',
label: '主题',
name: 'input',
},
{
icon: 'icon-select',
label: '描述',
name: 'select',
},
{
icon: 'icon-input',
label: '备注',
name: 'input',
}
],

//生成组件
const singleTags = this.singleTag.map(i => {
return this.createTag(i.icon, i.label, i.name);
});
singleTags.forEach(tag => {
this.$refs.designer.addComponent(tag);
this.$refs.designer.appendMenuItem('group1', {
icon: tag.icon,
name: tag.name,
label: tag.label,
});
});
按道理生成的每个组件的title都不一样，但现实是只要用的是同一种组件 ，比如说主题和备注这两个都用的是input组件 他俩的标题就会变成一样的 都是备注 连原来菜单里的输入框标题都变成了备注。我不理解的是每创建一个组件都会有对应的rule，为什么还会被覆盖，请求解答，万分感谢。

版本1.0.3

this.$refs.designer.setOption回显的报错，请问怎么回事

许多业务上需要用到table表格，请问作者有计划出table吗

这个可以把自己自定义的一些组件放进去吗？

1.这个组件联动数据的作用是什么？
2.这个组件联动数据的格式怎么填？（在数组中填入任何都会报格式错误）

vue3版本，多选框的选项无法修改。

“form-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。”

有基于ant-design-vue的designer吗？

在操作的时候，清空容易误点，若在清空操作加上二次确认，会更保险些。

import formCreate from '@form-create/element-ui';
请问下，放拖拽容器的中间的那个formCreate这个组件是怎么来的，看了下你的源码，没看到，直接import引用的

想在左侧的组件列表中添加group的组件按钮，但是group.js不知道怎么写。

const label = '数组组件';
const name = 'group';
export default {
icon: 'icon-group',
label,
name,
drag: true,
dragBtn: true,
rule() {
return {
field: uniqueId(),
title: label,
type: 'group',
props:{
rules: []
}
};
},
props() {
return [];
}
};
`
这样写没有办法向group里拖入其他组件。

如题

vue3版本，element-plus,vite构建
报错如下：

是在构建后的这块

对应的源码好像是

这个位置

fc-designer的选择器组件，在加载异步数据的时候怎么操作才能解决待token得问题？？？就是访问异步数据接口的时候能自带vue中的token？？？ 如: $store.user.token ，这种方式

请问如何实现表单加载时调用后端接口获取数据，并在表单中的多个组件中使用返回的数据？