lljj-x / vue-json-schema-form

基于Vue/Vue3,Json Schema 和 ElementUi/antd/iview3/naiveUi 等生成 HTML Form 表单,用于活动编辑器、h5编辑器、cms等数据配置;支持可视化生成表单Schema 。 Generate a form using Vue/Vue3, Json Schema and ElementUi/antdv/iview3/naiveUi
https://form.lljj.me/
Apache License 2.0
2.01k stars 418 forks source link

在 getDefaultFormState 的初始化逻辑中,期望 merge array类型的字段时,如果找不到json scheme中定义的default值,能直接使用原本的formData,而不是覆盖成一个空值 #358

Open linktime-koalaYuan opened 1 month ago

linktime-koalaYuan commented 1 month ago

vue和ui框架

vue2、ui框架element 、vjsf 使用版本说明:1.19.0

问题描述

json object会丢失array类型的字段值:merge逻辑判断有问题

如何复现

我有以下业务场景:在下面列举的 rawForm 和 schema中,其中simpleName 展示默认的 input, jsonEditorData 是个复杂的object,并且里面的key是不固定的,schema中我也未定义下一层级的properties内容,在我的业务场景中 以下情况(类型为复杂 object,但却没有下层的properties)我会使用自定义的 ui:field 直接展示一个jsoneditor的编辑器(如下图1),但实际上 vue-json-schema-form 会在初始化 执行 getDefaultFormState 逻辑的时候,把下面 array类型字段 subs的值给覆盖掉(如下图2)

const rawForm = {
  simpleName: 'simple name',
  jsonEditorData: {
    name: 'mock name',
    description: 'mock description',
    subs: [
      {
        name: 'mock name',
        description: 'mock description'
      },
      {
        name: 'mock name',
        description: 'mock description'
      }
    ]
  }
}

const schema = {
  type: 'object',
  properties: {
    simpleName: {
      type: 'string'
    },
    jsonEditorData: {
      type: 'object'
    }
  }
}

image

image

期望的结果

期望数据能正常展示上图1的效果。看了下代码,修改以下逻辑即可: code path:packages/lib/utils/schema/getDefaultFormState.js

function mergeDefaultsWithFormData(defaults, formData) {
    if (Array.isArray(formData)) {
        if (!Array.isArray(defaults)) {
            console.warn('无效的formData,已覆盖数据', formData);
            return defaults;
        }
        ...
    }
   ...
}

把上述逻辑中的 return defaults; 修改为 return formData; 即可满足期望

vu3 版本(https://www.npmjs.com/package/@lljj/vue3-form-element)中有同样问题,如果采纳了上述意见,希望也能同步到vue3的版本 🙏

lljj-x commented 1 month ago

看起来是你subs定义的schema 是object 而不是 array 吧?

lljj-x commented 1 month ago

明白你的意思了,要考虑下整体怎么合并更合适