From c5bfde3c7c38b9426dd5730fe06f2f6399fc5da6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Thu, 10 Jul 2025 11:02:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AD=90=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E7=BA=B5=E5=90=91=E5=9C=A8=E8=87=AA=E5=AE=9A=E4=B9=89=E9=87=8C?= =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/form-input/address.vue | 9 +- .../components/form-input/date-group.vue | 9 +- .../form-input/components/form-input/date.vue | 9 +- .../components/form-input/form-input.vue | 22 +-- .../modules/component-show/index.vue | 1 + .../components/form-input/phone.vue | 9 +- .../components/form-input/select-multi.vue | 9 +- .../components/form-input/select.vue | 9 +- .../components/form-input/subform.vue | 137 +++++++++++------- 9 files changed, 147 insertions(+), 67 deletions(-) diff --git a/pages/form-input/components/form-input/address.vue b/pages/form-input/components/form-input/address.vue index 2988eb59..499cd8be 100644 --- a/pages/form-input/components/form-input/address.vue +++ b/pages/form-input/components/form-input/address.vue @@ -161,7 +161,14 @@ * 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部 */ z_index_change(e) { - this.$emit('zIndexChange', e); + // 如果为空的时候延时关闭，避免因为关闭动画效果导致其他组件提前显示 + if (e == '') { + setTimeout(() => { + this.$emit('zIndexChange', e); + }, 200) + } else { + this.$emit('zIndexChange', e); + } } } } diff --git a/pages/form-input/components/form-input/date-group.vue b/pages/form-input/components/form-input/date-group.vue index 0bd7bfc7..f5717682 100644 --- a/pages/form-input/components/form-input/date-group.vue +++ b/pages/form-input/components/form-input/date-group.vue @@ -174,7 +174,14 @@ * 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部 */ z_index_change(e) { - this.$emit('zIndexChange', e); + // 如果为空的时候延时关闭，避免因为关闭动画效果导致其他组件提前显示 + if (e == '') { + setTimeout(() => { + this.$emit('zIndexChange', e); + }, 200) + } else { + this.$emit('zIndexChange', e); + } }, } } diff --git a/pages/form-input/components/form-input/date.vue b/pages/form-input/components/form-input/date.vue index d19fa8f5..eb7b3eef 100644 --- a/pages/form-input/components/form-input/date.vue +++ b/pages/form-input/components/form-input/date.vue @@ -113,7 +113,14 @@ * 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部 */ z_index_change(e) { - this.$emit('zIndexChange', e); + // 如果为空的时候延时关闭，避免因为关闭动画效果导致其他组件提前显示 + if (e == '') { + setTimeout(() => { + this.$emit('zIndexChange', e); + }, 200) + } else { + this.$emit('zIndexChange', e); + } } } } diff --git a/pages/form-input/components/form-input/form-input.vue b/pages/form-input/components/form-input/form-input.vue index 4a3f094a..d76c1505 100644 --- a/pages/form-input/components/form-input/form-input.vue +++ b/pages/form-input/components/form-input/form-input.vue @@ -155,16 +155,18 @@ export default { let data_list = []; com_data.form_value.forEach(item1 => { const data = JSON.parse(JSON.stringify(com_data?.children || [])); - data.forEach(child => { - child.com_data.common_style = this.get_form_border_style(child.com_data.common_config, mobile.flex_direction || 'row', overall_config.type_value); - if (!isEmpty(item1[child.id])) { - child.com_data.form_value = item1[child.id]; - } - }); - data_list.push({ - is_expand: false, - data_list: data - }); + if (data.length > 0) { + data.forEach(child => { + child.com_data.common_style = this.get_form_border_style(child.com_data.common_config, mobile.flex_direction || 'row', overall_config.type_value); + if (!isEmpty(item1[child.id])) { + child.com_data.form_value = item1[child.id]; + } + }); + data_list.push({ + is_expand: false, + data_list: data + }); + } }); item.com_data.data_list = data_list; } diff --git a/pages/form-input/components/form-input/modules/component-show/index.vue b/pages/form-input/components/form-input/modules/component-show/index.vue index 905a6211..e365458f 100644 --- a/pages/form-input/components/form-input/modules/component-show/index.vue +++ b/pages/form-input/components/form-input/modules/component-show/index.vue @@ -118,6 +118,7 @@ :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" + :propIsCustom="propIsCustom" :propStyle="propComponentStyle" :propDirection="propDirection" :propTitleStyle="propTitleStyle" diff --git a/pages/form-input/components/form-input/phone.vue b/pages/form-input/components/form-input/phone.vue index f704dcbb..3675e9e2 100644 --- a/pages/form-input/components/form-input/phone.vue +++ b/pages/form-input/components/form-input/phone.vue @@ -254,7 +254,14 @@ * 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部 */ z_index_change(e) { - this.$emit('zIndexChange', e); + // 如果为空的时候延时关闭，避免因为关闭动画效果导致其他组件提前显示 + if (e == '') { + setTimeout(() => { + this.$emit('zIndexChange', e); + }, 200) + } else { + this.$emit('zIndexChange', e); + } } } } diff --git a/pages/form-input/components/form-input/select-multi.vue b/pages/form-input/components/form-input/select-multi.vue index d702b602..bef2c8f4 100644 --- a/pages/form-input/components/form-input/select-multi.vue +++ b/pages/form-input/components/form-input/select-multi.vue @@ -281,7 +281,14 @@ * 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部 */ z_index_change(e) { - this.$emit('zIndexChange', e); + // 如果为空的时候延时关闭，避免因为关闭动画效果导致其他组件提前显示 + if (e == '') { + setTimeout(() => { + this.$emit('zIndexChange', e); + }, 200) + } else { + this.$emit('zIndexChange', e); + } } } } diff --git a/pages/form-input/components/form-input/select.vue b/pages/form-input/components/form-input/select.vue index 5bd414da..649424e0 100644 --- a/pages/form-input/components/form-input/select.vue +++ b/pages/form-input/components/form-input/select.vue @@ -186,7 +186,14 @@ * 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部 */ z_index_change(e) { - this.$emit('zIndexChange', e); + // 如果为空的时候延时关闭，避免因为关闭动画效果导致其他组件提前显示 + if (e == '') { + setTimeout(() => { + this.$emit('zIndexChange', e); + }, 200) + } else { + this.$emit('zIndexChange', e); + } } } } diff --git a/pages/form-input/components/form-input/subform.vue b/pages/form-input/components/form-input/subform.vue index 6ae3474b..a206d7d4 100644 --- a/pages/form-input/components/form-input/subform.vue +++ b/pages/form-input/components/form-input/subform.vue @@ -8,68 +8,73 @@ - + - + - - - - - {{ index + 1 }} - - 更多 - 删除 - {{ item.is_expand ? '收起' : '展开' }} + + + + + + {{ index + 1 }} + + 更多 + 删除 + {{ item.is_expand ? '收起' : '展开' }} + + + + + - - - + + + 添加记录 - - - 添加记录 + + - - - + @@ -132,10 +137,15 @@ type: Object, default: () => {}, }, + propIsCustom: { + type: Boolean, + default: false + } }, data() { return { com_data: {}, + custom_height: '100%', form_value: [], data_list: [], children_list: [], @@ -223,13 +233,21 @@ isEmpty, // 初始化数据 init() { + let custom_height = '100%'; const com_data = this.propValue; + if (this.propIsCustom) { + const filed_title_size_type = this.propMobile.filed_title_size_type || 'small'; + const text_height = filed_title_size_type == 'big' ? 31 : filed_title_size_type == 'middle' ? 22.5 : 16.5; + // 20是按钮与表格和标题与表格之间的间隔 text_height 是表头的高度 + custom_height = (com_data.com_height - 30 - text_height) * 2 + 'rpx;'; + } // 子表单数据 const children_list = JSON.parse(JSON.stringify(com_data?.children || [])); // 移动端配置参数 const mobile = com_data.mobile || {}; this.setData({ com_data: com_data, + custom_height: custom_height, direction_fixed: mobile.direction_fixed, briefing_field: mobile?.briefing_field || [], data_list: com_data?.data_list || [], @@ -440,6 +458,7 @@ font-size: 24rpx; } .direction-style { + background: #fff; border: 2rpx solid #ccc; border-radius: 16rpx; overflow: hidden; @@ -504,4 +523,20 @@ .required-error { background: #fef6e6; } +.subform-data { + width: 100%; + height: 120rpx; + background: #f0f1f4; + font-size: 32rpx; + color: #838892; + border-radius: 6rpx; + display: flex; + align-items: center; + justify-content: center; +} +.overflow-auto { + height: 100%; + width: 100%; + overflow: auto; +}