fuchengwei / vue-form-create Goto Github PK

View Code? Open in Web Editor NEW

337.0 337.0 96.0 746 KB

基于Vue3.0的表单设计器

License: MIT License

JavaScript 1.61% HTML 1.16% Vue 81.46% TypeScript 10.76% Stylus 4.96% Shell 0.05%

vue-form-create's People

Contributors

Stargazers

Watchers

Forkers

henrywong-fe hhy5277 quci zhouhw627 fuzi1996 lqt1990 assclb zengjuemin istommao lonhon timo534 gtiger666 lingyuchery crazy-airhead pronebel lemonl2 klk2 errorhu lowindy gcslaoli xiyeming kortin99 yueyub tczjx58520 joyce-may win-2019 wuchunfu andyhan hpl934n superglg738 cheng-l-j myreferrepos geekcheng xinjuren10 aldler xiaoguo525 salmongit bluesun925 lzh-boy webzhouyan whidy zhiyuanzmj gai871013 nunumao vueleague daizero zhangrongwu a63149300 coderguan qiuquanwu torns liuhaogui 1lmar liaowentao1016 simplechen szjhtz moodpo cengxiangfeng pansheng12580 burt1012 lanbin1017 heima8 jacobguan zh-neng link-zh 551685830 whoiszhangben cgb-formdesigner dongjmroot ky849383427 thefirework wenguanming rjwaltz promise-as jike132 cgb-formdesigner gmajip yuqiuyu123 kshdb yedao-zs hellozh4n liuchunjun work1989 dear2021888 2746755041 mrxiongyu tree522 cheparity lixinx11 gxdeng2023 maitao jackyli918

vue-form-create's Issues

远端获取数据问题

Select选择器从源端获取数据后，点击滚动出现提示:[Vue warn]: Duplicate keys found during update: "xxxx" Make sure keys are unique. 查看代码后猜测是两个v-for 中的:key 绑定同一值导致的（可能不对），请作者验证是否有同样问题。

表单属性修改后不生效

首次生成JSON后，第二次将JSON通过setJson方法赋值，表单并未发生更改

如上图中的labelCol

版本：使用的demo地址 http://fuchengwei.gitee.io/vue-form-create/example/index.html

core/element 下的 ElDesignForm 的导入JSON模块用成antd的组件了

<a-tabs
    type="card"
    v-model:activeKey="codeLanguage"
    :tabBarStyle="{ margin: 0 }"
>
  <a-tab-pane tab="Vue Component" :key="codeType.Vue">
    <CodeEditor :value="dataCodeTemplate" language="html" readonly />
  </a-tab-pane>
  <a-tab-pane tab="HTML" :key="codeType.Html">
    <CodeEditor :value="dataCodeTemplate" language="html" readonly />
  </a-tab-pane>
</a-tabs>

表单校验和type相关问题

BG：在默认必填情况下，表单验证会出现比较混乱的情况。

表现1：完全不校验

表现2：部分必填字段能校验、部分不能（number、滑块、评分等）

实例JSON

展开

{
  "list": [
    {
      "label": "单行文本",
      "type": "input",
      "options": {
        "width": "100%",
        "defaultValue": "",
        "placeholder": "",
        "maxlength": null,
        "prefix": "",
        "suffix": "",
        "addonBefore": "",
        "addonAfter": "",
        "disabled": false,
        "allowClear": false,
        "readonly": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "fd6d679eb8cf42638afe571753a54fa7",
      "model": "input_fd6d679eb8cf42638afe571753a54fa7",
      "rules": []
    },
    {
      "label": "密码框",
      "type": "password",
      "options": {
        "width": "100%",
        "defaultValue": "",
        "placeholder": "",
        "maxlength": null,
        "prefix": "",
        "suffix": "",
        "addonBefore": "",
        "addonAfter": "",
        "visibilityToggle": true,
        "disabled": false,
        "allowClear": false,
        "readonly": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "ae14e0e289cd4b029598436ec45adaee",
      "model": "password_ae14e0e289cd4b029598436ec45adaee",
      "rules": []
    },
    {
      "label": "多行文本",
      "type": "textarea",
      "options": {
        "width": "100%",
        "defaultValue": "",
        "placeholder": "",
        "maxlength": null,
        "rows": 4,
        "autoSize": false,
        "showCount": false,
        "disabled": false,
        "allowClear": false,
        "readonly": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "8292786db614451b9c3989a5cedccb8e",
      "model": "textarea_8292786db614451b9c3989a5cedccb8e",
      "rules": []
    },
    {
      "label": "计数器",
      "type": "number",
      "options": {
        "width": "",
        "defaultValue": 0,
        "min": 0,
        "max": 100,
        "step": 1,
        "readonly": false,
        "disabled": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "daf534a29bf8498e9c63ab4ce4a840b0",
      "model": "number_daf534a29bf8498e9c63ab4ce4a840b0",
      "rules": []
    },
    {
      "label": "多选框组",
      "type": "checkbox",
      "options": {
        "defaultValue": [],
        "width": "",
        "inline": true,
        "remote": false,
        "showLabel": false,
        "remoteFunc": "https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json",
        "options": [
          {
            "label": "Option 1",
            "value": "Option 1"
          },
          {
            "label": "Option 2",
            "value": "Option 2"
          },
          {
            "label": "Option 3",
            "value": "Option 3"
          }
        ],
        "remoteOptions": [],
        "props": {
          "value": "value",
          "label": "label"
        },
        "disabled": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "2a14bc11cfcb4f39ab55a73d6aba34d0",
      "model": "checkbox_2a14bc11cfcb4f39ab55a73d6aba34d0",
      "rules": []
    },
    {
      "label": "单选框组",
      "type": "radio",
      "options": {
        "defaultValue": "",
        "width": "",
        "inline": true,
        "remote": false,
        "showLabel": false,
        "remoteFunc": "https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json",
        "options": [
          {
            "value": "Option 1",
            "label": "Option 1"
          },
          {
            "value": "Option 2",
            "label": "Option 2"
          },
          {
            "value": "Option 3",
            "label": "Option 3"
          }
        ],
        "remoteOptions": [],
        "props": {
          "value": "value",
          "label": "label"
        },
        "disabled": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "298a875f5aff456bbff7c69aadb54d5e",
      "model": "radio_298a875f5aff456bbff7c69aadb54d5e",
      "rules": []
    },
    {
      "label": "时间选择器",
      "type": "time",
      "options": {
        "defaultValue": "",
        "width": "",
        "placeholder": "请选择时间",
        "format": "HH:mm:ss",
        "valueFormat": "HH:mm:ss",
        "readonly": false,
        "allowClear": true,
        "disabled": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "8f0049f84cf648d1b1555a8db5c36187",
      "model": "time_8f0049f84cf648d1b1555a8db5c36187",
      "rules": []
    },
    {
      "label": "日期选择器",
      "type": "date",
      "options": {
        "defaultValue": "",
        "width": "",
        "placeholder": "请选择时间",
        "format": "YYYY-MM-DD",
        "readonly": false,
        "allowClear": true,
        "disabled": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "35f14f31a50f46479aeb8859cea04680",
      "model": "date_35f14f31a50f46479aeb8859cea04680",
      "rules": []
    },
    {
      "label": "评分",
      "type": "rate",
      "options": {
        "defaultValue": null,
        "max": 5,
        "allowClear": true,
        "allowHalf": false,
        "disabled": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "1d633f90b7d74a80b5e8f871c3b38391",
      "model": "rate_1d633f90b7d74a80b5e8f871c3b38391",
      "rules": []
    },
    {
      "label": "下拉选择框",
      "type": "select",
      "options": {
        "defaultValue": [],
        "width": "200px",
        "mode": null,
        "placeholder": "",
        "remote": false,
        "showLabel": false,
        "showSearch": false,
        "clearable": false,
        "disabled": false,
        "props": {
          "label": "label",
          "value": "value"
        },
        "options": [
          {
            "label": "Option 1",
            "value": "Option 1"
          },
          {
            "label": "Option 2",
            "value": "Option 2"
          },
          {
            "label": "Option 3",
            "value": "Option 3"
          }
        ],
        "remoteOptions": [],
        "remoteFunc": "https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json",
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "f0b1e2dbfe53435dac0aff6f5d88f0fd",
      "model": "select_f0b1e2dbfe53435dac0aff6f5d88f0fd",
      "rules": []
    },
    {
      "label": "开关",
      "type": "switch",
      "options": {
        "defaultValue": false,
        "disabled": false,
        "checkedChildren": "",
        "unCheckedChildren": "",
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "a155223ac4704b30934307af972f7140",
      "model": "switch_a155223ac4704b30934307af972f7140",
      "rules": []
    },
    {
      "label": "滑块",
      "type": "slider",
      "options": {
        "defaultValue": 0,
        "width": "",
        "min": 0,
        "max": 100,
        "step": 1,
        "disabled": false,
        "range": false,
        "reverse": false,
        "rules": {
          "trigger": "blur",
          "enum": "",
          "message": "",
          "pattern": "",
          "required": true,
          "type": "any"
        }
      },
      "key": "e7a0f246908d4e959997597505795981",
      "model": "slider_e7a0f246908d4e959997597505795981",
      "rules": []
    }
  ],
  "config": {
    "size": "default",
    "hideRequiredMark": false,
    "layout": "horizontal",
    "labelAlign": "right",
    "labelCol": {
      "span": 3,
      "offset": 0
    }
  }
}

提几个小建议

1、是否可以支持自定义组件注入（我觉得这个可以带来更多用户）
2、右侧的字段是否可以自定义配置
3、如果布局字段传入[]情况下是否可以隐藏标题
4、是否可以增加保存按钮暴露保存按钮回调

打包后报错：ReferenceError: designForm is not defined

打包后预览报错

启动后报警告 runtime-core.esm-bundler.js:38 [Vue warn]: resolveComponent can only be used in render() or setup(). warn @ runtime-core.esm-bundler.js:38 resolveAsset @ runtime-core.esm-bundler.js:2861 resolveComponent @ runtime-core.esm-bundler.js:2805 (anonymous) @ menuItem.vue:8 5error.ts:14 ElementPlusError: [props] [API] type.text is about to be deprecated in version 3.0.0, please use type.link instead. For more detail, please visit: https://element-plus.org/en-US/component/button.html#button-attributes

runtime-core.esm-bundler.js:38 [Vue warn]: resolveComponent can only be used in render() or setup().
warn @ runtime-core.esm-bundler.js:38
resolveAsset @ runtime-core.esm-bundler.js:2861
resolveComponent @ runtime-core.esm-bundler.js:2805
(anonymous) @ menuItem.vue:8
5error.ts:14 ElementPlusError: [props] [API] type.text is about to be deprecated in version 3.0.0, please use type.link instead.
For more detail, please visit: https://element-plus.org/en-US/component/button.html#button-attributes

在grid布局里面的输入框默认值会相互影响

下载源码在本地编译不成功

我在git 上下了源码之后，本地用
npm instll
npm run serve
之后界元素出不来，请问一下是什么原因，除了官网说的，还需要其它设置吗？
谢谢！

使用element的时候会出现多选框选一个其他全选的情况

点击一个多选，会全部选中，预览的时候和表单展示的时候都会被全选

element-plus在2.2.1版本弃用了button中type属性的text值

產出JSON

請問這個套件有沒有支援生成完 JSON 之後可以獨自取出那一包 JSON 的功能
我需要把那包 JSON 轉成 API 發出去
有的話該怎麼寫

前缀、后缀怎么设置？

设置前缀、后缀没有效果，应该如何设置？

栅格布局的整体复制

在栅格布局中放入了一些组件，然后支持复制整个栅格布局及其中的组件

img-upload组件出现排版错误

如图

不知道什么情况，这个扁了。。。
附源码，求大佬帮忙看看嘻嘻嘻

https://github.com/shandongtlb/vue.git

另外，对于392行的 state.generateFormRef 会报错 Object is possibly 'null'

遇到了一个重复调用vue的问题

npm安装本仓库后，页面上设计器没有展示，得到报错：

Cannot read property 'isCE' of null

查了下相关链接 vuejs/core#4344

应该是重复声明 vue 实例导致的这个问题

另外看包的容量，感觉是把 Vue、AntDesignVue、Element 都打包装入最终的dist？

这块有看到其它插件（Vant）是把 Vue 放在 peerDependencies 中的，不过由于自己没有深入了解过这块导致无法实际解决，希望能处理成比较轻

新年快乐

引用渲染失败

页面渲染失败

vue版本3.2
element-plus 版本 2.0.5

其他配置

main.js

页面代码

可以贴个微信交流群不

缺少自定义组件的方法

大佬是不是什么时候有空加一下自定义的方法呢

表单校验没有

表单必填校验不生效blur 的时候

表单属性是否支持自定义拓展?

比如,我想加一个表单名称或者表单key之类的,还有,顶部的按钮可以自定义添加吗?

json回填后组件标题无法编辑

官方例子，拖拽组件，生成json数据，复制后关闭编辑器，打开编辑器导入json，粘贴刚才复制的json，编辑组件的标题，无法修改（只有回填json后默认选中那个改不了，切换选中就可以改了）

后期考虑加入控件事件吗？

有没有计划加入控件事件的设置

使用富文本报错卡死问题

VM27428:1 Uncaught (in promise) SyntaxError: "undefined" is not valid JSON

建议改为按需引入elment-plus 无需全局引入 elment-plus

样式为什么直接设置给 #app 应该设置为自己独有的class才对

支持 vue3 js 语法吗

表单必填校验相关问题

在单选、复选组件设置 “必填” 后，表单项校验出现了问题，如图

请问我该从哪方面着手解决这个问题呢？

下面是配置JSON

{
  "list": [
    {
      "label": "单选框组",
      "type": "radio",
      "options": {
        "defaultValue": "",
        "width": "",
        "inline": true,
        "remote": false,
        "showLabel": false,
        "remoteFunc": "https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json",
        "options": [
          {
            "value": "Option 1",
            "label": "Option 1"
          },
          {
            "value": "Option 2",
            "label": "Option 2"
          },
          {
            "value": "Option 3",
            "label": "Option 3"
          }
        ],
        "remoteOptions": [],
        "props": {
          "value": "value",
          "label": "label"
        },
        "disabled": false,
        "rules": {
          "trigger": "change",
          "enum": "",
          "message": "111",
          "pattern": "",
          "required": true,
          "type": "string"
        }
      },
      "key": "61df14ee07cf40b797f5b680c1396b8e",
      "model": "radio_61df14ee07cf40b797f5b680c1396b8e",
      "rules": []
    },
    {
      "label": "多选框组",
      "type": "checkbox",
      "options": {
        "defaultValue": [],
        "width": "",
        "inline": true,
        "remote": false,
        "showLabel": false,
        "remoteFunc": "https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json",
        "options": [
          {
            "label": "Option 1",
            "value": "Option 1"
          },
          {
            "label": "Option 2",
            "value": "Option 2"
          },
          {
            "label": "Option 3",
            "value": "Option 3"
          }
        ],
        "remoteOptions": [],
        "props": {
          "value": "value",
          "label": "label"
        },
        "disabled": false,
        "rules": {
          "trigger": "change",
          "enum": "",
          "message": "222",
          "pattern": "",
          "required": true,
          "type": "array"
        }
      },
      "key": "51b51667efe54d41809e64b8fb40951c",
      "model": "checkbox_51b51667efe54d41809e64b8fb40951c",
      "rules": []
    }
  ],
  "config": {
    "size": "default",
    "hideRequiredMark": false,
    "layout": "horizontal",
    "labelAlign": "right",
    "labelCol": {
      "span": 3,
      "offset": 0
    }
  }
}

依赖问题导致运行报错

ERROR in ./node_modules/vue-form-create/dist/formCreate.umd.min.js 1:3668-3682
Module not found: Error: [CaseSensitivePathsPlugin] C:\vue3\vue3-admin-front\node_modules\vue-form-create\node_modules\Vue\index.js does not match the corresponding path on disk vue.
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/windicss-webpack-plugin/dist/loaders/windicss-template.js!./node_modules/unplugin/dist/webpack/loaders/transform.js??ruleSet[1].rules[46].use[0]!./src/views/xianlu/luru.vue?vue&type=script&lang=ts 3:0-51 6:4-20
@ ./src/views/xianlu/luru.vue?vue&type=script&lang=ts 1:0-417 1:0-417 1:418-824 1:418-824
@ ./src/views/xianlu/luru.vue 2:0-55 3:0-50 3:0-50 6:49-55
@ ./src/router/asyncModules/xianlu.ts 3:32-65
@ ./src/router/asyncModules/ sync .ts$ ./xianlu.ts
@ ./src/router/asyncModules/index.ts 6:21-56
@ ./src/router/generator-router.tsx 22:0-65 90:24-48
@ ./src/store/modules/user.ts 13:0-67 117:32-54
@ ./src/router/router-guards.ts 7:0-52 22:24-36
@ ./src/router/index.ts 7:0-53 42:10-28
@ ./src/main.ts 93:0-39 131:17-28

webpack compiled with 1 error

请大佬看看，我是没有装什么依赖项吗