# yauee-form-rendering **Repository Path**: tenney/yauee-form-rendering ## Basic Information - **Project Name**: yauee-form-rendering - **Description**: yauee-form-rendering 基于FcDesigner创建的动态表单渲染uniapp端实现， from-rendering、FormCreate、FcDesigner、动态表单、JSON表单渲染 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2026-01-15 - **Last Updated**: 2026-01-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # yauee-form-rendering 基于FcDesigner创建的动态表单渲染uniapp端实现 ## 前言 写这个东西缘起于帮朋友做一个调查表，当时看了N多的组件都不好用，最后选用了form-create，但它又不能适配uniapp，当时也想过直接web-view嵌套，但最后被我朋友堵死了这条路：要支持离线，所以才有了它，在经过一番努力后发现，这东西就像一个坑，看着容易，细节太多每一个属性的适配都得花不少功夫， 于是我就想着，既然都做了那就做成开源的算了，慢慢搞吧， 结果今天突然发现uniapp插件市场已经出现了一款了， 虽然我也没有细看他的功能，但是我瞬间又不太想继续深入搞了，总之目前自己够用了，后面看心情，看大家的需求再决定是否继续吧.. - ***关于我的环境、关于技术***： 我使用的uniapp/vue3写的，组件也是采用vue3 + ts为基础， 但说实话有时候偷懒，可能没把它的血统搞的那么正，有时候直接用any等等 - ***关于性能***： 我已尽量在省事与性能之间衡量过，中间也用了 ` ``` 数据结构： ![formDefine](https://z.wiki/u/EKmBhR "formDefine数据结构") ## 二、目前支持的组件 | 组件名 | 名称 | 说明 | |:---:|:---:|---| | input | 输入框 | 含password | | textarea | 文本域 | - | | cascader | 级联选择 | 可代替tree，不支持多选 | | Region | 省市联动 | 自定义组件，需要后端配合 | | slider | 滑块 | - | | inputNumber | 数字输入框 | - | | checkbox | 多选框 | - | | radio | 单选框 | - | | select | 选择框 | 不支持多选 | | switch | 开关 | - | | timePicker | 时间、日期 | 多格式 | | html | html渲染 | 依赖 mp-html | | div | div容器 | - | | aTag | 标签 | - | | aAlert | 警告提示 | - | | aImage | 图片展示 | - | | Position | 地图定位 | 自定义组件，需要后端配合，h5不支持 | | upload | 上传组件 | 回显可能需要改造服务端返回值的处理部分，目前尚未提供接口去配置 | | fcEditor | 富文本编辑器 | 依赖 sp-editor | | tableForm | 表格表单 | 支持动态新增行，但表格内组件不支持复杂组件，避免嵌套太深性能有影响 | | subForm | 分组子表单 | 支持子组件见下图 | tableForm支持子组件： *关于upload上传组件使用：* - 1、需要后端返回的rules中设置上传的相对地址,如: `/${contextPath}/file/upload`, 具体方法参照FcDesigner的[修改组件默认配置](https://view.form-create.com/default-rule#%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E9%BB%98%E8%AE%A4%E9%85%8D%E7%BD%AE), 结构如下： ```json { "$required": false, "display": true, "field": "F4okmakixrfrahc", "hidden": false, "info": "上传", "name": "ref_Frkjmakixrfrajc", "props": { "action": "/${contextPath}/dev/file/uploadReturnUrl", "more":"更多属性略" }, "title": "上传", "type": "upload", "_fc_drag_tag": "upload", "_fc_id": "id_F22ymakixrfraic" } ``` - 2、需要在使用upload组件时传递basePath, 如： `http://${ip:port}/${contenxtPath}`, 或者可自行修改 rendering 组件中的 actionPath 部分 - 3、上传成功后需要后端返回完整的文件路径，如: `http://127.0.0.1:8080/upload/images/4okmakixrfrahc.jpg` 或者 `http://127.0.0.1:8080/upload/images?id=4okmakixrfrahc&suffix=jpg`,如果你的地址中不带文件名称加后缀的时候(一些对象存储可能没有)，请带上`suffix=xxx`的文件类型标识，这个是为了编辑时回填数据可以回显之前上传的图片 - 4、文件上传后端返回的数据可以直接是文件地址，也可以是对象， 如果是对象时，请在upload上指定`respUrlField`字段(1.0.3版本新增)，默认为*data*，如我使用的: ```json { "code": 200, "msg": "操作成功", "data": "http://127.0.0.1:82/db-form/file/download?suffix=jpg&id=1932631534175322113" } ``` --- *特别说明：* - 1、考虑移动端的性能及页面宽度渲染问题，部分组件没有考虑完全跟PC端兼容，比如aCard组件，在此就不再实现了可考虑用其他的组件替代，比如subForm，很多的复杂组件如 tableForm、subForm、aCard等等都是组件再嵌套组件，甚至无限制嵌套 - 2、部分组件的部分属性并不完全适配官方PC端属性，比如日期组件的按季度选择等 - 3、不支持FcDesigner的PC端组件的样式设置，但支持PC端form表单配置的部分属性，表单尺寸大、小，标签宽度，标签左、右对齐等设置，但我还是建议最好是默认，毕竟基于PC端的设置在移动端会出现一些小问题，比如标签宽度设置为 130px,在PC端挺正的，到移动端就会显得很宽了，所以并没有花太多时间去调这玩意了。 ## 三、依赖说明 我已经尽量的减少依赖了，最小情况你可以只使用 *wot-design-uni* 这一个库， 其他的都只影响个别组件，如果你用不到可以不加： - *wot-design-uni* : 作用基础组件库，部分定制组件也基于该库做定制，例如：级联cascader、地区三级联动region等,推荐以uni_modules引入（感谢作者 不如摸鱼去 ：[wot-design-uni](https://gitee.com/wot-design-uni/wot-design-uni)） - *sp-editor*: 富文本编辑器,推荐以uni_modules引入（感谢作者 夏夜追凉丶：[富文本编辑器 sp-editor](https://ext.dcloud.net.cn/plugin?id=14726)） - *mp-html*: 富文本渲染,推荐以uni_modules引入 (感谢作者 jyf：[mp-html 富文本组件](https://ext.dcloud.net.cn/plugin?id=805)) - *@vant/area-data*: 省市地区三级联动数据 `npm install @vant/area-data` - 既然都感谢了，自然也不能漏掉了 Form-Creater 的无私奉献， [Form-Creater官网](https://www.form-create.com/) 项目依赖图 ## 四、权限依赖 组件中包含地理位置选择，所以需要你在`manifest.json`中开启定位与地图，并配置高德/百度地图的KEY，不使用可忽略 ``` xml ``` ## 五、入坑说明 - 暂时没有文档，你只能依靠自己理解代码，但目前看起来只要你理解了form-create官方的相关参数，使用起来应该是问题不大的。 - 不提供24小时保姆服务，我不靠开源吃饭，你有问题大多数情况靠你自己解决，我只看时间和心情帮忙，没有动手能力的慎入。 - 我个人不会花太多精力在这上面，测试不能面面俱到，质量问题我不能100%保证，用在哪里怎么用，您自己决定 - 其他。。我想到了再说 ## 六、土豪这边有专座 虽然我不靠开源吃饭，但豪哥豪弟请我抽包烟舍的，我也是不拒绝的，可能有精力了你恰好需要的话，我也可以陪你唠唠，但这不是交换！！ 想请我抽烟的兄弟，首先感谢您的好意，但这并不代表一包烟我就会24小时为你服务，下手前请考虑一下哦，别到时候再来骂我，我就想退给你我还得麻烦一回

## 七、其他 ### 1、组件中用到的工具类 ```ts // tool.ts const tool: Record = {} /** * 判断值是否为空 * - null * - undefined * - NaN * - 空字符串 (含全空格) * - 空数组 * - 空对象 (不包含原型链上的属性) */ function isNullish(value: unknown): boolean { if (value === null || value === undefined) return true; if (Number.isNaN(value)) return true; if (typeof value === 'string' && value.trim() === '') return true; if (Array.isArray(value) && value.length === 0) return true; if (value instanceof Object && !Array.isArray(value) && Object.keys(value).length === 0) return true; return false; } /** * 判断值是否非空 */ function isNotEmpty(value: unknown): boolean { return !isNullish(value); } /** * 如果值为空则返回默认值 */ function nullable(value: T, fallback: U): T | U { return isNullish(value) ? fallback : value; } function startWith(source: string, str: string) { return new RegExp("^" + str).test(source); } tool.string = { isNullish, isNotEmpty, nullable, startWith } export default tool; ``` ### 2、后端套组件 主要包括 省市三级联动、地理位置选择等，这部分代码嵌套在我其他代码中，现在不想去动它，年纪大了啥都不想动， 就连这个组件我都懒得去git上面搞一下，甚至连个demo都不想写， 如果哪位兄弟实在需要的话，给我点动力到时候我看想办法抽出来吧 ### 3、多图欣赏