refactor(form, diy-form): 重构表单组件复用逻辑,新增raw模式适配现有表单数据

1. 新增diy-form组件的raw数据源模式,支持直接透传ns-newform格式的表单数据
2. 新增showSubmit配置项,支持隐藏内置提交按钮由父页面自行实现提交逻辑
3. 暴露verify和getFormData方法供父组件调用
4. 替换pages_tool/form/formdata.vue的旧表单组件为diy-form,适配新的调用方式
5. 新增样式穿透修复diy-form默认样式与原有页面风格不一致的问题
This commit is contained in:
2026-06-12 11:09:08 +08:00
parent 87fbda698c
commit fe9cbcd21d
3 changed files with 75 additions and 19 deletions

View File

@@ -14,8 +14,9 @@
:formConfig="mergedFormConfig"
ref="nsNewform"
></ns-newform>
<!-- 提交按钮(外层 = form-bg + form-padding-x;按钮 = submit-bg + submit-color + input-height + input-radius) -->
<view class="form-submit-wrap" :style="submitWrapStyle">
<!-- 提交按钮(外层 = form-bg + form-padding-x;按钮 = submit-bg + submit-color + input-height + input-radius)。
showSubmit=false 时由父级页面渲染自己的提交按钮并通过 ref 调用本组件的 verify()/getFormData()。 -->
<view v-if="showSubmit" class="form-submit-wrap" :style="submitWrapStyle">
<view @click.stop="submitForm" class="form-submit" :style="submitStyle">{{ submitText }}</view>
</view>
</view>
@@ -32,6 +33,20 @@ export default {
props: {
value: {
type: Object
},
// 数据源模式:
// 'diy'(默认):value.formComponents 是 [{ type, value }],组件内部转换为 ns-newform 期望的 [{ controller, value, val }]
// 'raw' :value.jsonData / value.json_data 已经是 ns-newform 期望的格式,直接透传给 ns-newform
// 用途:让 formdata 等"已是 ns-newform 格式"的页面也能复用本组件的 banner/tip/样式系统
dataMode: {
type: String,
default: 'diy',
validator: (v) => ['diy', 'raw'].includes(v)
},
// 是否渲染内置提交按钮。false 时由父级调用 ref 上的 verify()/getFormData() 自行实现提交
showSubmit: {
type: Boolean,
default: true
}
},
mixins: [DiyMinx],
@@ -47,6 +62,8 @@ export default {
'value': {
deep: true,
handler() {
// raw 模式:formData 由父级透传,跳过重跑 initForm(避免每次父组件 re-render 触发 ns-newform 的深拷贝 initFormData)
if (this.dataMode === 'raw') return;
this.initForm();
}
}
@@ -192,6 +209,11 @@ export default {
this.formComponents = [];
return;
}
// raw 模式:value.jsonData / value.json_data 已经是 ns-newform 期望的 [{ controller, value, val }],直接透传
if (this.dataMode === 'raw') {
this.formComponents = this.value.jsonData || this.value.json_data || [];
return;
}
var components = this.value.formComponents || this.value.form_components || [];
// 转换格式:type -> controller
this.formComponents = (components || []).map(function(item) {
@@ -203,6 +225,20 @@ export default {
});
},
// 暴露给父级:触发 ns-newform 校验。校验失败时 ns-newform 内部会 toast;返回 false 表示失败,返回 formData 数组表示成功
verify() {
if (this.$refs.nsNewform && this.$refs.nsNewform.verify) {
return this.$refs.nsNewform.verify();
}
return false;
},
// 暴露给父级:获取 ns-newform 当前的 formData 数组(含 val / option_lists / img_lists 等全部字段)
// 后端 /form/api/form/create 的 form_data 字段约定是 JSON.stringify 整个数组(与 form.vue 保持一致),
// 父级若需要 { index: val } 形式可自行 map
getFormData() {
return (this.$refs.nsNewform && this.$refs.nsNewform.formData) || [];
},
// 数字保底:undefined/空串/非数字时返回兜底值
_num(v, fb) {
if (v === '' || v === null || v === undefined) return fb;
@@ -220,21 +256,16 @@ export default {
// 提交表单
submitForm() {
var self = this;
// 使用 ns-newform 的验证
if (this.$refs.nsNewform && this.$refs.nsNewform.verify) {
var verifyResult = this.$refs.nsNewform.verify();
if (!verifyResult) {
return;
}
// 校验(同时返回 formData 数组;校验失败时 ns-newform 内部 toast 提示)
if (!this.verify()) {
return;
}
// 获取表单数据
// 转为 { index: val } 提交格式(后端 /form/api/form/create 期望的紧凑结构)
var submitData = {};
if (this.$refs.nsNewform && this.$refs.nsNewform.formData) {
this.$refs.nsNewform.formData.forEach(function(item, index) {
submitData[index] = item.val;
});
}
this.getFormData().forEach(function(item, index) {
submitData[index] = item.val;
});
// 提交到后端
this.$api.sendRequest({