refactor(diy-form&formdata): 重构表单提交与渲染逻辑

1. 为diy-form新增submit事件,支持父组件接管提交逻辑
2. 移除formdata.vue的内置提交按钮与自定义banner/tip,交由diy-form统一处理
3. 调整formdata的diyValue参数,让diy-form自主渲染banner和提示文案
This commit is contained in:
2026-06-12 14:17:57 +08:00
parent 48235c18a5
commit 12a1422470
2 changed files with 20 additions and 67 deletions

View File

@@ -277,7 +277,13 @@ export default {
return;
}
// 转为 { index: val } 提交格式(后端 /form/api/form/create 期望的紧凑结构)
// 若父级监听了 @submit,则把提交控制权交给父级(用于父级有自定义提交字段/反馈逻辑的页面,如 formdata.vue 传 uniacid)
if (this.$listeners && this.$listeners.submit) {
this.$emit('submit', this.getFormData());
return;
}
// 默认内置提交:装饰组件场景下使用,submitData 为 { index: val } 形式
var submitData = {};
this.getFormData().forEach(function(item, index) {
submitData[index] = item.val;

View File

@@ -2,22 +2,15 @@
<view :style="themeColor">
<block v-if="detail">
<view class="page">
<view class="form-banner" v-if="detail.show_banner > 0">
<image :src="$util.img(formBanner)" mode="widthFix"></image>
</view>
<view class="form-tip">
<view class="system-form-tip" v-if="detail.show_tip > 0">{{ formTip }}</view>
</view>
<view class="system-form-wrap">
<!-- 复用 diy-form 渲染表单字段:raw 模式直接透传 detail.json_data,隐藏内置 banner/tip/提交按钮(页面自己渲染) -->
<!-- 复用 diy-form:banner / tip / 表单字段 / 提交按钮 全部由其内部渲染,样式(bannerPaddingX/tipColor/submitBgColor 等)由 form_config 控制。
@submit 接管提交逻辑(带 uniacid + showModal) -->
<diy-form
ref="form"
:value="diyValue"
dataMode="raw"
:showSubmit="false"
@submit="create"
/>
<button class="button mini" style="font-size:32rpx;" type="primary" size="mini"
@click="create">提交</button>
</view>
</view>
</block>
@@ -54,24 +47,21 @@ export default {
}
},
computed: {
formBanner() {
const bannerImg = this.detail?.form_banner
return bannerImg ? bannerImg : 'public/uniapp/form/banner.png'
},
formTip() {
const tip = this.detail?.form_tip
return tip ? tip : '请填写表单所需信息'
},
// 构造 diy-form raw 模式期望的 value 形态:
// - jsonData:透传给 ns-newform(已是 ns-newform 期望的 [{ controller, value, val }])
// - formConfig:后端返回 camelCase(如 formPaddingX / formBgColor / labelFontSize),
// diy-form 内部 mergedFormConfig 同时兼容 snake_case 后再交给 ns-newform
// - 不传 show_banner / show_tip:让 diy-form 自带的 banner/tip 不渲染(页面已自渲染)
// - show_banner / form_banner:交给 diy-form 渲染 banner,样式走 form_config.bannerPaddingX;form_banner 给保底图
// - show_tip / form_tip:交给 diy-form 渲染 tip,样式走 form_config;form_tip 给保底文案
// 注:本 computed 只在 <block v-if="detail"> 内被消费,无需 null 守卫
diyValue() {
return {
jsonData: this.detail.json_data,
formConfig: this.detail.form_config
formConfig: this.detail.form_config,
show_banner: this.detail.show_banner,
form_banner: this.detail.form_banner || 'public/uniapp/form/banner.png',
show_tip: this.detail.show_tip,
form_tip: this.detail.form_tip || '请填写表单所需信息'
}
}
},
@@ -157,10 +147,8 @@ export default {
// #endif
uni.setNavigationBarTitle({ title: formName });
},
create() {
// 校验(ns-newform 校验失败时会内部 toast;返回 false 表示失败)
if (!this.$refs.form.verify()) return
// 由 diy-form 内置提交按钮触发:diy-form 已先做 verify(),仅在通过时才 emit('submit', formData)
create(formData) {
if (this.isRepeat) return
this.isRepeat = true
@@ -168,7 +156,7 @@ export default {
url: '/form/api/form/create',
data: {
form_id: this.id,
form_data: JSON.stringify(this.$refs.form.getFormData()),
form_data: JSON.stringify(formData),
uniacid: this.uniacid
},
success: res => {
@@ -197,50 +185,9 @@ page {
background: #fff;
}
.form-banner {
width: 100vw;
line-height: 1;
}
.form-banner image {
width: 100%;
line-height: 1;
}
.form-tip {
text-align: center;
}
.system-form-tip {
line-height: 120rpx;
font-weight: 600;
font-size: 30rpx;
}
.system-form-wrap {
border-radius: 32rpx;
overflow: hidden;
margin: 0 0 60rpx 0;
padding: 0 12rpx;
padding-top: 40rpx;
transform: translateY(-40rpx);
}
.system-form-wrap .button {
height: 80rpx;
line-height: 80rpx !important;
margin-top: 30rpx !important;
width: 84%;
margin-left: 28rpx !important;
border-radius: 80rpx;
background: #f4391c;
color: #fff;
}
.system-form-wrap .form-wrap {
background: #fff;
padding: 30rpx;
border-radius: 32rpx;
}
// 穿透 diy-form 包装层:消除其自带的 10rpx 圆角与白色背景,