From fe9cbcd21d6d3371d2d707abf4713887d6a084bb Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 12 Jun 2026 11:09:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor(form,=20diy-form):=20=E9=87=8D?=
=?UTF-8?q?=E6=9E=84=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6=E5=A4=8D=E7=94=A8?=
=?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E6=96=B0=E5=A2=9Eraw=E6=A8=A1?=
=?UTF-8?q?=E5=BC=8F=E9=80=82=E9=85=8D=E7=8E=B0=E6=9C=89=E8=A1=A8=E5=8D=95?=
=?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
1. 新增diy-form组件的raw数据源模式，支持直接透传ns-newform格式的表单数据
2. 新增showSubmit配置项，支持隐藏内置提交按钮由父页面自行实现提交逻辑
3. 暴露verify和getFormData方法供父组件调用
4. 替换pages_tool/form/formdata.vue的旧表单组件为diy-form，适配新的调用方式
5. 新增样式穿透修复diy-form默认样式与原有页面风格不一致的问题
---
components-diy/diy-form.vue | 59 +++++++++++++++++++++++++++---------
pages_tool/form/form.vue | 2 +-
pages_tool/form/formdata.vue | 33 +++++++++++++++++---
3 files changed, 75 insertions(+), 19 deletions(-)
diff --git a/components-diy/diy-form.vue b/components-diy/diy-form.vue
index d2dd806..10a6974 100644
--- a/components-diy/diy-form.vue
+++ b/components-diy/diy-form.vue
@@ -14,8 +14,9 @@
:formConfig="mergedFormConfig"
ref="nsNewform"
>
-
-
+
+
{{ submitText }}
@@ -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({
diff --git a/pages_tool/form/form.vue b/pages_tool/form/form.vue
index 7edcab5..c352bd4 100644
--- a/pages_tool/form/form.vue
+++ b/pages_tool/form/form.vue
@@ -6,7 +6,7 @@
请填写表单所需信息
-
+
diff --git a/pages_tool/form/formdata.vue b/pages_tool/form/formdata.vue
index 7e190c7..8431cfb 100644
--- a/pages_tool/form/formdata.vue
+++ b/pages_tool/form/formdata.vue
@@ -9,7 +9,13 @@
{{ formTip }}
-
+
+
@@ -25,11 +31,11 @@