更新记录

1.0.3（2025-06-11） 下载此版本

【优化】upload组件支持 http://xxxx/aa/bb/file.jpg 或 http://xxx/aa/bb?id=xxxx&subfix=jpg两种格式 【新增】upload组件respUrlField字段，用于指定文件上传response对象中url地址字段，默认为 data

1.0.2（2025-06-10） 下载此版本

更新文档

1.0.1（2025-06-10） 下载此版本

更新文档

平台兼容性

uni-app

其他

yauee-form-rendering 基于FcDesigner创建的动态表单渲染uniapp端实现

前言

写这个东西缘起于帮朋友做一个调查表，当时看了N多的组件都不好用，最后选用了form-create，但它又不能适配uniapp，当时也想过直接web-view嵌套，但最后被我朋友堵死了这条路：要支持离线，所以才有了它，在经过一番努力后发现，这东西就像一个坑，看着容易，细节太多每一个属性的适配都得花不少功夫， 于是我就想着，既然都做了那就做成开源的算了，慢慢搞吧， 结果今天突然发现uniapp插件市场已经出现了一款了， 虽然我也没有细看他的功能，但是我瞬间又不太想继续深入搞了，总之目前自己够用了，后面看心情，看大家的需求再决定是否继续吧..

• 关于我的环境、关于技术： 我使用的uniapp/vue3写的，组件也是采用vue3 + ts为基础， 但说实话有时候偷懒，可能没把它的血统搞的那么正，有时候直接用any等等
• 关于性能： 我已尽量在省事与性能之间衡量过，中间也用了 <component is ..等方式，但毕竟最终是基于 web-view 的，在大量数据面前都是不堪的， 后续如果确需要可以采用分屏加载来优化 , 我自己测试过50个字段的渲染，在一般配置的（3年前的红米手机）基本能秒加载，但如果用了复杂组伯件再嵌套组件就会慢一点了
• 关于兼容： 我开发测试是 手机 + chrome 配合测试的， 其他小程序没有全面测试过，因为我不用小程序， 已知在微信小程序中有几个样式不兼容，因为我用了 :deep 语法， 如果你们需要可以自行调整，问题不大

【特别说明：】 下方提示的支持情况基本都不打勾是因为我个人没有精力去测试，按常理应该是问题不大，比如微信小程序

关键词

from-rendering、FormCreate、FcDesigner、动态表单、JSON表单渲染

一、使用说明

    <!-- 动态表单
        base-path：表单基础路径，用于获取表单配置，一般用于文件上传时 baseUrl 传递
        options：表单配置，表单配置项，用于表单初始化
        rules：表单规则，表单规则项，用于表单验证
        form-data：表单默认数据，用于表单初始化（若不提供v-model，则默认使用form-data）
        header：请求头，一般用于文件上传时 token 传递
        v-model：表单数据，用于表单数据双向绑定回填，一般用于加载后端数据，保存时可以直接通过 @save 获取
        @onSave：表单保存事件回调，组件内部不处理数据发送，需要自行处理
        -->
      <yauee-form-rendering ref="formRef" :options="formDefine.options" :rules="formDefine.fields || formDefine.rules"
        :form-data="formDefine.formData" :base-path="'http://' + settingsStore.config.server" :header="header"
        v-model="formData" @onSave="onSave" v-if="formDefine"></yauee-form-rendering>

数据结构：

二、目前支持的组件

tableForm支持子组件：

关于upload上传组件使用：

• 1、需要后端返回的rules中设置上传的相对地址,如: /${contextPath}/file/upload, 具体方法参照FcDesigner的修改组件默认配置, 结构如下：

    {
        "$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，如我使用的:

{
    "code": 200,
    "msg": "操作成功",
    "data": "http://127.0.0.1:82/db-form/file/download?suffix=jpg&id=75322113"
}

特别说明：

• 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）
• sp-editor: 富文本编辑器,推荐以uni_modules引入（感谢作者 夏夜追凉丶：富文本编辑器 sp-editor）
• mp-html: 富文本渲染,推荐以uni_modules引入 (感谢作者 jyf：mp-html 富文本组件)
• @vant/area-data: 省市地区三级联动数据 npm install @vant/area-data
• 既然都感谢了，自然也不能漏掉了 Form-Creater 的无私奉献， Form-Creater官网

四、权限依赖

组件中包含地理位置选择，所以需要你在manifest.json中开启定位与地图，并配置高德/百度地图的KEY，不使用可忽略

 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

五、入坑说明

• 暂时没有文档，你只能依靠自己理解代码，但目前看起来只要你理解了form-create官方的相关参数，使用起来应该是问题不大的。
• 不提供24小时保姆服务，我不靠开源吃饭，你有问题大多数情况靠你自己解决，我只看时间和心情帮忙，没有动手能力的慎入。
• 我个人不会花太多精力在这上面，测试不能面面俱到，质量问题我不能100%保证，用在哪里怎么用，您自己决定
• 其他。。我想到了再说

六、土豪这边有专座

虽然我不靠开源吃饭，但豪哥豪弟请我抽包烟舍的，我也是不拒绝的，可能有精力了你恰好需要的话，我也可以陪你唠唠，但这不是交换！！

想请我抽烟的兄弟，首先感谢您的好意，但这并不代表一包烟我就会24小时为你服务，下手前请考虑一下哦，别到时候再来骂我，我就想退给你我还得麻烦一回

七、其他

1、组件中用到的工具类

//  tool.ts

const tool: Record<string, any> = {}

/**
 * 判断值是否为空
 * - 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<T, U>(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、多图欣赏