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

新增子表单纵向显示

master
于肖磊 2025-07-10 14:58:01 +08:00
parent c5bfde3c7c
commit 7a4104ec87
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<template>
<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 pr ' + (propIsTable ? 'flex-row ' : 'flex-col')">
<view v-for="(item, index) in data_list" :key="index" :class="(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; ' : '')">
<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', '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 v-if="!['rich-text', 'auxiliary-line', '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>
@ -71,12 +71,12 @@
<component-score :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection" @dataCheck="data_check" @dataChange="data_change"></component-score>
</view>
<!-- 图片 -->
<view v-else-if="item.key == 'img'" :class="propIsCustom ? 'wh-auto ht-auto' : ''">
<component-image :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection" :propIsCustom="propIsCustom"></component-image>
<view v-else-if="item.key == 'img'">
<component-image :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection"></component-image>
</view>
<!-- 视频 -->
<view v-else-if="item.key == 'video'" :class="propIsCustom ? 'wh-auto ht-auto' : ''">
<component-video :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection" :propIsCustom="propIsCustom"></component-video>
<view v-else-if="item.key == 'video'">
<component-video :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="propMobile" :propStyle="propComponentStyle" :propDirection="propDirection"></component-video>
</view>
<!-- 文本 -->
<view v-else-if="item.key == 'text'">
@ -200,14 +200,18 @@ export default {
type: String,
default: '',
},
propIsCustom: {
type: Boolean,
default: false,
},
propIndex: {
type: Number,
default: 0,
},
propIsTable: {
type: Boolean,
default: false,
},
propIsTableTitle: {
type: Boolean,
default: false,
},
},
data() {
return {

11
pages/form-input/components/form-input/subform.vue
View File

@ -90,7 +90,7 @@
</template>
<script>
import { isEmpty } from '@/common/js/common/common.js';
import { isEmpty, common_form_styles_computer } from '@/common/js/common/common.js';
import subformComponentShow from '@/pages/form-input/components/form-input/modules/subform-component-show/index.vue';
export default {
components: {
@ -243,6 +243,9 @@
}
// 子表单数据
const children_list = JSON.parse(JSON.stringify(com_data?.children || []));
children_list.forEach(item => {
item.com_data.common_style = this.get_form_border_style(item.com_data.common_config, this.propDirection);
})
// 移动端配置参数
const mobile = com_data.mobile || {};
this.setData({
@ -256,6 +259,11 @@
children_list: children_list,
});
},
// 获取子表单样式
get_form_border_style(item, flex_direction) {
// 如果是默认模式需要区分是上下还是左右来判断是否显示边框
return flex_direction == 'row' ? '' : common_form_styles_computer(item) + 'padding: 0px 22rpx;box-sizing:content-box;';
},
help_icon_event(e) {
this.$emit('helpIconEvent', e.currentTarget.dataset.value);
},
@ -389,6 +397,7 @@
add_item() {
const data = [...this.data_list];
const list = this.data_list.filter(item => item.is_expand);
console.log(this.children_list);
data.push({
is_expand: list.length == this.data_list.length,
data_list: JSON.parse(JSON.stringify(this.children_list))