sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增子表单显示逻辑

master
于肖磊 2025-07-07 18:51:53 +08:00
parent c2331d5e09
commit 64f7050e65
3 changed files with 156 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages/form-input/components/form-input/form-input.vue
View File

@ -28,6 +28,7 @@
@dataAddressChange="data_address_change"
@openRegion="open_region"
@helpIconEvent="help_icon_event"
@subformHelpIconEvent="subform_help_icon_event"
@zIndexChange="z_index_change"
/>
</view>
@ -271,6 +272,11 @@ export default {
this.setData({ popup_help_content: val });
this.$refs.popup.open();
},
// 子表单帮助图标点击事件
subform_help_icon_event(e) {
this.setData({ popup_help_content: e });
this.$refs.popup.open();
},
// 打开地区选择器
open_region(e) {
this.setData({

18
pages/form-input/components/form-input/modules/component-show/index.vue
View File

@ -2,7 +2,7 @@
<view class="wh-auto ht-auto pr">
<view v-for="(item, index) in data_list" :key="index" :class="(propIsCustom ? 'pa ' : (propDirection == 'row' ? 'row-item ' : 'column-item mb-10 ')) + (item.com_data.common_config.is_error == '1' ? ' item_error' : '')" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :style="(item.key == 'auxiliary-line' ? 'border-bottom: 0rpx; ' : '') + (propIsCustom ? ('left:' + item.location.x + 'px;top:' + item.location.y + 'px;width:' + item.com_data.com_width + 'px;height:' + item.com_data.com_height + 'px;z-index:' + (z_index_id == item.id ? '999' : (item.is_enable == '1' ? (data_list.length - 1 > 0 ? (data_list.length - 1) - index : 0) : -999)) + ';') : '')">
<view :class="'wh-auto ht-auto ' + (propDirection == 'row' ? (['video', 'img', 'upload-img', 'upload-video', 'multi-text'].includes(item.key) ? 'flex-row align-s gap-10' : 'flex-row align-b gap-10') : 'flex-col gap-10')">
<view v-if="(!propIsCustom && !['rich-text', 'auxiliary-line', 'upload-attachments'].includes(item.key)) || (propIsCustom && !['img', 'video', 'auxiliary-line', 'rect', 'round'].includes(item.key))" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle + (propDirection == 'row' && ['upload-img', 'upload-video'].includes(item.key) ? 'padding-top: 12rpx;line-height: 120rpx;' : '') + (propDirection == 'row' && ['multi-text'].includes(item.key) ? 'padding-top: 18rpx;' : '')">
<view v-if="(!propIsCustom && !['rich-text', 'auxiliary-line', 'upload-attachments', 'subform'].includes(item.key)) || (propIsCustom && !['img', 'video', 'auxiliary-line', 'rect', 'round', 'rich-text', 'upload-attachments', 'subform'].includes(item.key))" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle + (propDirection == 'row' && ['upload-img', 'upload-video'].includes(item.key) ? 'padding-top: 12rpx;line-height: 120rpx;' : '') + (propDirection == 'row' && ['multi-text'].includes(item.key) ? 'padding-top: 18rpx;' : '')">
<view class="flex-row align-c" :style="propTitleStyle">{{ item.com_data.title }}<view v-if="item.com_data.is_required == '1'" class="required">*</view></view>
<view v-if="item.com_data.common_config.help_is_show == '1' && !isEmpty(item.com_data.common_config.help_explain)" :data-value="item.com_data.common_config.help_explain" @tap="help_icon_event">
<iconfont name="icon-miaosha-hdgz" :size="propHelpIconStyle" color="#999"></iconfont>
@ -90,14 +90,17 @@
<view v-else-if="['rect', 'round'].includes(item.key)" :class="propIsCustom ? 'wh-auto ht-auto' : ''">
<component-rect-or-round :propValue="item.com_data" :propKey="propKey"></component-rect-or-round>
</view>
<view v-else-if="item.key == 'subform'">
<component-subform :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection" :propTitleStyle="propTitleStyle" :propHelpIconStyle="propHelpIconStyle" @subformHelpIconEvent="subform_help_icon_event"></component-subform>
</view>
<!-- #ifdef H5 || MP-WEIXIN || MP-QQ -->
<view v-else-if="item.key == 'upload-attachments'">
<component-upload :propValue="item.com_data" :propType="item.key == 'upload-img' ? 'img' : ( item.key == 'upload-video' ? 'video' : 'file')" :propKey="propKey" :propDataFormId="propDataFormId" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection" @dataChange="data_change"></component-upload>
<component-upload :propValue="item.com_data" propType="file" :propKey="propKey" :propDataFormId="propDataFormId" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection" @dataChange="data_change"></component-upload>
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU -->
<view v-else-if="item.key == 'rich-text'" :style="item.com_data.common_style + 'padding:0;'">
<component-rich-text :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection" @dataChange="data_change"></component-rich-text>
<component-rich-text :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection" @dataChange="data_change"></component-rich-text>
</view>
<!-- #endif -->
<view v-if="!isEmpty(item.com_data.common_config.error_text)" class="field-invalid-info">{{ item.com_data.common_config.error_text }}</view>
@ -131,6 +134,7 @@ import componentRichText from '@/pages/form-input/components/form-input/rich-tex
import componentUpload from '@/pages/form-input/components/form-input/upload.vue';
import componentPosition from '@/pages/form-input/components/form-input/position.vue';
import componentRectOrRound from '@/pages/form-input/components/form-input/rect-or-round.vue';
import componentSubform from '@/pages/form-input/components/form-input/subform.vue';
export default {
name: 'formInput',
components: {
@ -155,7 +159,8 @@ export default {
componentRichText,
componentUpload,
componentPosition,
componentRectOrRound
componentRectOrRound,
componentSubform
},
props: {
propValue: {
@ -227,9 +232,12 @@ export default {
z_index_id: '',
})
},
help_icon_event() {
help_icon_event(e) {
this.$emit('helpIconEvent', e.currentTarget.dataset.value);
},
subform_help_icon_event(e) {
this.$emit('subformHelpIconEvent', e);
},
data_change(e) {
this.$emit('dataChange', e);
},

137
pages/form-input/components/form-input/subform.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<view class="wh-auto ht-auto flex-col gap-10">
<!-- 标题显示处理 -->
<view class="flex-row align-c jc-sb">
<view class="flex-1 flex-row align-c gap-10">
<view class="flex-row align-c" :style="propTitleStyle">{{ com_data.title }}<view v-if="com_data.is_required == '1'" class="required">*</view></view>
<view v-if="com_data.common_config && com_data.common_config.help_is_show == '1' && !isEmpty(com_data.common_config.help_explain)" :data-value="com_data.common_config.help_explain" @tap="help_icon_event">
<iconfont name="icon-miaosha-hdgz" :size="propHelpIconStyle" color="#999"></iconfont>
</view>
</view>
<view class="flex-row align-c gap-10">
<button class="title_btn">
<iconfont name="icon-add" size="24rpx" color="#2196F3" propContainerDisplay="flex"></iconfont>
</button>
<button class="title_btn flex-row align-c gap-10">全部收起<iconfont name="icon-arrow-top" size="24rpx" color="#2196F3" propContainerDisplay="flex"></iconfont></button>
</view>
</view>
<view v-if="mobile.arrange == 'direction'">
<view v-for="(item, index) in form_value" :key="index" class="direction-style">
<!-- 标题操作 -->
<view class="subform-title-btns flex-row align-c jc-sb">
<span class="subform-number">{{ index + 1 }}</span>
<view class="flex-row align-c gap-10">
<view class="cr-blue size-12" :data-index="index">更多</view>
<view class="cr-blue size-12" :data-index="index">删除</view>
<view class="cr-blue size-12" :data-index="index">展开</view>
</view>
</view>
</view>
<view class="direction-bottom flex-row align-c jc-c gap-10 cr-blue">
<iconfont name="icon-add" size="32rpx" color="#2196F3" propContainerDisplay="flex"></iconfont>
添加记录
</view>
</view>
<view v-else>
</view>
</view>
</template>
<script>
import { isEmpty } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Object,
default: () => ({}),
},
propKey: {
type: [String, Number],
default: 0,
},
propDataId: {
type: String,
default: '',
},
propStyle: {
type: String,
default: '',
},
propTitleStyle: {
type: String,
default: '',
},
propHelpIconStyle: {
type: String,
default: '20rpx',
},
},
data() {
return {
com_data: {},
form_value: [],
mobile: {}
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},
methods: {
isEmpty,
// 初始化数据
init() {
const com_data = this.propValue;
this.setData({
com_data: com_data,
mobile: com_data.mobile || {},
form_value: com_data?.form_value || [],
children: com_data?.children || [],
});
},
help_icon_event(e) {
this.$emit('helpIconEvent', e.currentTarget.dataset.value);
}
},
};
</script>
<style lang="scss" scoped>
.title_btn {
font-size: 24rpx;
}
.direction-style {
border: 2rpx solid #ccc;
border-top-left-radius: 8rpx;
border-top-right-radius: 8rpx;
overflow: hidden;
}
.direction-bottom {
border: 2rpx solid #ccc;
border-top: 0;
padding: 20rpx;
border-bottom-left-radius: 8rpx;
border-bottom-right-radius: 8rpx;
overflow: hidden;
}
.subform-title-btns {
padding: 14rpx;
background: linear-gradient(180deg, #f4f6f9, #fff);
.subform-number {
width: 40rpx;
background: #2196F3;
color: #fff;
border-radius: 50%;
padding: 4rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>