修改自定义组内容的处理逻辑显示
parent
5853970519
commit
82317d6b3e
|
|
@ -3,7 +3,7 @@
|
||||||
<el-form-item label="是否显示">
|
<el-form-item label="是否显示">
|
||||||
<div class="flex-row gap-10">
|
<div class="flex-row gap-10">
|
||||||
<el-switch v-model="form.is_show" active-value="1" inactive-value="0" @change="operation_end"/>
|
<el-switch v-model="form.is_show" active-value="1" inactive-value="0" @change="operation_end"/>
|
||||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="当数据只有一条的时候不展示指示器" raw-content placement="top">
|
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="当数据只有一屏的时候不展示指示器" raw-content placement="top">
|
||||||
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
|
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="w h re custom-other">
|
<div class="w h re custom-other">
|
||||||
<div v-for="(item, index) in list" :key="item.id" class="main-content flex-row" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
|
<div v-for="(item, index) in list" :key="item.id" class="main-content flex-row" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
|
||||||
<template v-if="item.key == 'text'">
|
<template v-if="item.key == 'text'">
|
||||||
<model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
|
<model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.key == 'img'">
|
<template v-else-if="item.key == 'img'">
|
||||||
<model-image :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :img-params="showData?.data_logo || ''" :is-display-panel="true"></model-image>
|
<model-image :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :img-params="showData?.data_logo || ''" :is-display-panel="true"></model-image>
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<model-panel :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-display-panel="true"></model-panel>
|
<model-panel :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-display-panel="true"></model-panel>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.key == 'custom-group'">
|
<template v-else-if="item.key == 'custom-group'">
|
||||||
<model-custom-group :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :data-height="item.com_data.custom_height" :data-width="item.com_data.com_width" :is-custom="isCustom" :is-display-panel="true"></model-custom-group>
|
<model-custom-group :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :group-source-list="groupSourceList" :show-data="showData" :data-height="item.com_data.custom_height" :data-width="item.com_data.com_width" :is-custom="isCustom" :is-display-panel="true"></model-custom-group>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -66,6 +66,12 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
groupSourceList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
customGroupFieldId: {
|
customGroupFieldId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
|
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
|
||||||
<div :style="style_chunk_container">
|
<div :style="style_chunk_container">
|
||||||
<div class="w h oh" :style="style_chunk_img_container">
|
<div class="w h oh" :style="style_chunk_img_container">
|
||||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="dataHeight" :scale="custom_scale" :custom-group-field-id="form?.data_source_field?.id || ''"></data-rendering>
|
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="dataHeight" :scale="custom_scale" :custom-group-field-id="form?.data_source_field?.id || ''" :is-custom-group="true" :is-custom="isCustom" :show-data="showData"></data-rendering>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
|
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
|
||||||
<div :style="style_chunk_container">
|
<div :style="style_chunk_container">
|
||||||
<div class="w h oh" :style="style_chunk_img_container">
|
<div class="w h oh" :style="style_chunk_img_container">
|
||||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="dataHeight" :scale="custom_scale" :custom-group-field-id="form?.data_source_field?.id || ''"></data-rendering>
|
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="dataHeight" :scale="custom_scale" :custom-group-field-id="form?.data_source_field?.id || ''" :is-custom-group="true" :is-custom="isCustom" :show-data="showData"></data-rendering>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div :style="style_chunk_container">
|
<div :style="style_chunk_container">
|
||||||
<div class="w h oh" :style="style_chunk_img_container">
|
<div class="w h oh" :style="style_chunk_img_container">
|
||||||
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="custom_scale"></data-rendering>
|
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="custom_scale" :is-custom-group="true" :is-custom="isCustom"></data-rendering>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -87,6 +87,23 @@ const props = defineProps({
|
||||||
isCustom: {
|
isCustom: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
groupSourceList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showData: {
|
||||||
|
type: Object as PropType<{
|
||||||
|
data_key: string;
|
||||||
|
data_name: string;
|
||||||
|
data_logo?: string;
|
||||||
|
}>,
|
||||||
|
default: () => ({
|
||||||
|
data_key: 'id',
|
||||||
|
data_name: 'name',
|
||||||
|
})
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 用于页面判断显示
|
// 用于页面判断显示
|
||||||
|
|
@ -102,19 +119,24 @@ const is_show = computed(() => {
|
||||||
|
|
||||||
//#region 自定义组真实数据
|
//#region 自定义组真实数据
|
||||||
const data_source_content_list = computed(() => {
|
const data_source_content_list = computed(() => {
|
||||||
if (!isEmpty(props.sourceList)) {
|
const data_source_id = form.value?.data_source_field?.id || '';
|
||||||
const data_source_id = form.value.data_source_field.id;
|
// 自定义组的数据源内容切换
|
||||||
let list = get_nested_property(props.sourceList, data_source_id);
|
const is_data_source_id = field_list.value.filter((item: any) => item.field == data_source_id);
|
||||||
// 如果是自定义标题,进一步处理嵌套对象中的数据
|
if (is_data_source_id.length > 0) {
|
||||||
if (props.sourceList.data) {
|
if (!isEmpty(props.sourceList)) {
|
||||||
list = get_nested_property(props.sourceList.data, data_source_id);
|
let list = get_nested_property(props.sourceList, data_source_id);
|
||||||
|
// 如果是自定义标题,进一步处理嵌套对象中的数据
|
||||||
|
if (props.sourceList.data) {
|
||||||
|
list = get_nested_property(props.sourceList.data, data_source_id);
|
||||||
|
}
|
||||||
|
return list == '' ? [] : list;
|
||||||
|
} else {
|
||||||
|
return [];
|
||||||
}
|
}
|
||||||
return list == '' ? [] : list;
|
|
||||||
} else {
|
} else {
|
||||||
return [];
|
return props.groupSourceList;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const get_nested_property = (obj: any, path: string) => {
|
const get_nested_property = (obj: any, path: string) => {
|
||||||
// 检查路径参数是否为字符串且非空,若不满足条件则返回空字符串
|
// 检查路径参数是否为字符串且非空,若不满足条件则返回空字符串
|
||||||
if (typeof path !== 'string' || !path) return [];
|
if (typeof path !== 'string' || !path) return [];
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,10 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
isCustomGroup: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
customGroupFieldId: {
|
customGroupFieldId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,10 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
isCustomGroup: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
customGroupFieldId: {
|
customGroupFieldId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,10 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
isCustomGroup: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
customGroupFieldId: {
|
customGroupFieldId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,10 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
isCustomGroup: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
customGroupFieldId: {
|
customGroupFieldId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,10 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
isCustomGroup: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
customGroupFieldId: {
|
customGroupFieldId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
@ -87,7 +91,7 @@ const text_title = computed(() => {
|
||||||
let new_title = cloneDeep(formValue.text_title);
|
let new_title = cloneDeep(formValue.text_title);
|
||||||
let new_field_list = field_list.value;
|
let new_field_list = field_list.value;
|
||||||
// 判断是否是自定义组
|
// 判断是否是自定义组
|
||||||
if (!props.isCustom && !isEmpty(props.customGroupFieldId)) {
|
if (props.isCustomGroup && !isEmpty(props.customGroupFieldId)) {
|
||||||
// 取出对应自定义组的内容
|
// 取出对应自定义组的内容
|
||||||
const group_option_list = new_field_list.find((item: any) => item.field === props.customGroupFieldId);
|
const group_option_list = new_field_list.find((item: any) => item.field === props.customGroupFieldId);
|
||||||
// 取出自定义组内部数据源参数的详细数据
|
// 取出自定义组内部数据源参数的详细数据
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="auxiliary-line common-content-height">
|
<div class="auxiliary-line common-content-height">
|
||||||
<el-form :model="form" label-width="60">
|
<el-form :model="form" label-width="60">
|
||||||
<common-content-top :value="form.content_top"></common-content-top>
|
<template v-if="isCommon">
|
||||||
<div class="divider-line"></div>
|
<common-content-top :value="form.content_top"></common-content-top>
|
||||||
|
<div class="divider-line"></div>
|
||||||
|
</template>
|
||||||
<card-container>
|
<card-container>
|
||||||
<div class="mb-12">展示设置</div>
|
<div class="mb-12">展示设置</div>
|
||||||
<el-form-item label="样式设置">
|
<el-form-item label="样式设置">
|
||||||
|
|
@ -82,6 +84,10 @@ const props = defineProps({
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {},
|
default: () => {},
|
||||||
},
|
},
|
||||||
|
isCommon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<Dialog v-model:visible="dialogVisible" :title="configType == 'custom' ? '编辑自定义' : '编辑自定义组'" @accomplish="accomplish" @close_event="close_event">
|
<Dialog v-model:visible="dialogVisible" :title="configType == 'custom' ? '编辑自定义' : '编辑自定义组'" @accomplish="accomplish" @close_event="close_event">
|
||||||
<div class="flex-row h w">
|
<div class="flex-row h w">
|
||||||
<!-- 左侧和中间区域 -->
|
<!-- 左侧和中间区域 -->
|
||||||
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="center_width" :config-type="configType" :source-list="sourceList" :custom-group-field-id="customGroupFieldId" :is-custom="configType == 'custom'? isCustom : false" :show-data="showData" :list="new_list" @right-update="right_update" @operation_end="operation_end"></DragIndex>
|
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="center_width" :config-type="configType" :source-list="sourceList" :group-source-list="groupSourceList" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :is-custom="isCustom" :show-data="showData" :list="new_list" @right-update="right_update" @operation_end="operation_end"></DragIndex>
|
||||||
<!-- 右侧配置区域 -->
|
<!-- 右侧配置区域 -->
|
||||||
<div class="settings">
|
<div class="settings">
|
||||||
<template v-if="diy_data.key === 'img'">
|
<template v-if="diy_data.key === 'img'">
|
||||||
|
|
@ -41,6 +41,7 @@ import { cloneDeep, isEqual } from "lodash";
|
||||||
const data_source_store = DataSourceStore();
|
const data_source_store = DataSourceStore();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
// 配置类型,custom:自定义,custom-group:自定义组
|
||||||
configType: {
|
configType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'custom',
|
default: 'custom',
|
||||||
|
|
@ -49,30 +50,49 @@ const props = defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
// 数据源配置项
|
||||||
options: {
|
options: {
|
||||||
type: Array<any>,
|
type: Array<any>,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
|
// 真实数据,独立的数据信息
|
||||||
sourceList: {
|
sourceList: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {},
|
default: () => {},
|
||||||
},
|
},
|
||||||
|
// 自定义组使用的真实数据,包含整个外层真实数据,如果自定义组不使用内部数据源的时候,那么就是父级的数据源
|
||||||
|
groupSourceList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 判断是否是自定义
|
||||||
isCustom: {
|
isCustom: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
// 判断是否是自定义组
|
||||||
|
isCustomGroup: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 手动模式下的显示数据
|
||||||
showData: {
|
showData: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({ data_key: 'id', data_name: 'name' }),
|
default: () => ({ data_key: 'id', data_name: 'name' }),
|
||||||
},
|
},
|
||||||
|
// 自定义组的id
|
||||||
customId: {
|
customId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
// 自定义数据源id
|
||||||
customGroupFieldId: {
|
customGroupFieldId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
// 自定义内容的渲染处理,自定义组传递的是内部的自定义内容
|
||||||
customList: {
|
customList: {
|
||||||
type: Array<any>,
|
type: Array<any>,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
|
|
@ -188,9 +208,6 @@ const operation_end = (is_compare: boolean = true) => {
|
||||||
}
|
}
|
||||||
// 新的数据
|
// 新的数据
|
||||||
const new_compare_data = cloneDeep(draglist.value.diy_data);
|
const new_compare_data = cloneDeep(draglist.value.diy_data);
|
||||||
console.log(old_compare_data);
|
|
||||||
console.log(new_compare_data);
|
|
||||||
console.log(!isEqual(old_compare_data, new_compare_data));
|
|
||||||
if (!is_compare || !isEqual(old_compare_data, new_compare_data)) {
|
if (!is_compare || !isEqual(old_compare_data, new_compare_data)) {
|
||||||
// 如果是自定点击完成,需要将数据传递给父组件
|
// 如果是自定点击完成,需要将数据传递给父组件
|
||||||
if (props.configType == 'custom') {
|
if (props.configType == 'custom') {
|
||||||
|
|
|
||||||
|
|
@ -71,22 +71,22 @@
|
||||||
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
|
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
|
||||||
<div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
|
<div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
|
||||||
<template v-if="item.key == 'text'">
|
<template v-if="item.key == 'text'">
|
||||||
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'"></model-text>
|
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'"></model-text>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.key == 'img'">
|
<template v-else-if="item.key == 'img'">
|
||||||
<model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :img-params="showData?.data_logo || ''"></model-image>
|
<model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :img-params="showData?.data_logo || ''"></model-image>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.key == 'auxiliary-line'">
|
<template v-else-if="item.key == 'auxiliary-line'">
|
||||||
<model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId"></model-lines>
|
<model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId"></model-lines>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.key == 'icon'">
|
<template v-else-if="item.key == 'icon'">
|
||||||
<model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId"></model-icon>
|
<model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId"></model-icon>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.key == 'panel'">
|
<template v-else-if="item.key == 'panel'">
|
||||||
<model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId"></model-panel>
|
<model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId"></model-panel>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.key == 'custom-group'">
|
<template v-else-if="item.key == 'custom-group'">
|
||||||
<model-custom-group :key="item.id" :value="item.com_data" :source-list="props.sourceList" :data-height="item.com_data.custom_height" :data-width="item.com_data.com_width" :is-custom="isCustom"></model-custom-group>
|
<model-custom-group :key="item.id" :value="item.com_data" :source-list="props.sourceList" :group-source-list="groupSourceList" :data-height="item.com_data.custom_height" :data-width="item.com_data.com_width" :is-custom="isCustom" :show-data="showData"></model-custom-group>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</Vue3DraggableResizable>
|
</Vue3DraggableResizable>
|
||||||
|
|
@ -128,6 +128,8 @@ interface Props {
|
||||||
isCustom: boolean;
|
isCustom: boolean;
|
||||||
showData: any;
|
showData: any;
|
||||||
customGroupFieldId: string;
|
customGroupFieldId: string;
|
||||||
|
isCustomGroup: boolean;
|
||||||
|
groupSourceList: Array<any>;
|
||||||
}
|
}
|
||||||
const props = defineProps<Props>();
|
const props = defineProps<Props>();
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
|
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
|
||||||
<div :style="style_chunk_container">
|
<div :style="style_chunk_container">
|
||||||
<div class="w h oh" :style="style_chunk_img_container">
|
<div class="w h oh" :style="style_chunk_img_container">
|
||||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
|
<data-rendering :custom-list="form.custom_list" :source-list="item1" :group-source-list="data_source_content_list" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
|
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
|
||||||
<div :style="style_chunk_container">
|
<div :style="style_chunk_container">
|
||||||
<div class="w h oh" :style="style_chunk_img_container">
|
<div class="w h oh" :style="style_chunk_img_container">
|
||||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
|
<data-rendering :custom-list="form.custom_list" :source-list="item1" :group-source-list="data_source_content_list" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
|
|
|
||||||
|
|
@ -59,9 +59,9 @@
|
||||||
<el-button class="w custom-button size-14" size="large" @click="custom_edit('custom')"><icon name="edit" size="14"></icon>自定义编辑</el-button>
|
<el-button class="w custom-button size-14" size="large" @click="custom_edit('custom')"><icon name="edit" size="14"></icon>自定义编辑</el-button>
|
||||||
</el-form>
|
</el-form>
|
||||||
<!-- 自定义内容处理 -->
|
<!-- 自定义内容处理 -->
|
||||||
<custom-config :key="dragkey + 'custom'" v-model:visible="dialogVisible" v-model:width="custom_width" v-model:height="center_height" :dragkey="dragkey + 'custom'" :options="model_data_source" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-list="custom_list" @accomplish="accomplish" @custom_edit="custom_edit"></custom-config>
|
<custom-config :key="dragkey + 'custom'" v-model:visible="dialogVisible" v-model:width="custom_width" v-model:height="center_height" :dragkey="dragkey + 'custom'" :options="model_data_source" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :group-source-list="data_source_content_list" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-list="custom_list" @accomplish="accomplish" @custom_edit="custom_edit"></custom-config>
|
||||||
<!-- 自定义内部数据内容处理 -->
|
<!-- 自定义内部数据内容处理 -->
|
||||||
<custom-config :key="drag_group_key + 'custom-group'" v-model:visible="dialogVisible_group" v-model:width="center_group_width" v-model:height="center_group_height" v-model:father-list="custom_group_father_list" config-type="custom-group" :dragkey="drag_group_key + 'custom-group'" :options="custom_group_option_list" :source-list="!isEmpty(new_group_source_list) ? new_group_source_list : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-id="center_group_id" :custom-list="custom_group_list" :custom-group-field-id="custom_group_field_id" @accomplish="accomplish"></custom-config>
|
<custom-config :key="drag_group_key + 'custom-group'" v-model:visible="dialogVisible_group" v-model:width="center_group_width" v-model:height="center_group_height" v-model:father-list="custom_group_father_list" config-type="custom-group" :dragkey="drag_group_key + 'custom-group'" :options="custom_group_option_list" :source-list="!isEmpty(new_group_source_list) ? new_group_source_list : {}" :group-source-list="data_source_content_list" :is-custom="form.is_custom_data == '1'" :is-custom-group="true" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-id="center_group_id" :custom-list="custom_group_list" :custom-group-field-id="custom_group_field_id" @accomplish="accomplish"></custom-config>
|
||||||
<!-- 手动筛选数据弹出框 -->
|
<!-- 手动筛选数据弹出框 -->
|
||||||
<custom-dialog v-model:dialog-visible="url_value_dialog_visible" :data-list-key="form.show_data?.data_key || 'id'" :config="default_type_data.appoint_config" :extra-search-data="form.data_source_content" :multiple="url_value_multiple_bool" @confirm_event="url_value_dialog_call_back"></custom-dialog>
|
<custom-dialog v-model:dialog-visible="url_value_dialog_visible" :data-list-key="form.show_data?.data_key || 'id'" :config="default_type_data.appoint_config" :extra-search-data="form.data_source_content" :multiple="url_value_multiple_bool" @confirm_event="url_value_dialog_call_back"></custom-dialog>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -153,8 +153,15 @@ const custom_edit = (type: string, id?: string, father_list?: any, list?: any, w
|
||||||
center_group_height.value = height || 0;
|
center_group_height.value = height || 0;
|
||||||
// 获取到真实数据和选项值
|
// 获取到真实数据和选项值
|
||||||
custom_group_field_id.value = data_source_field?.id || '';
|
custom_group_field_id.value = data_source_field?.id || '';
|
||||||
new_group_source_list.value = new_group_source_list_handle(data_source_field?.id || '');
|
// 自定义组的数据源内容切换, 如果选择了自定义数据源,那么就获取到自定义数据源的内容,否则的话取当前整个自定义组的数据源
|
||||||
custom_group_option_list.value = data_source_field?.option || [];
|
const is_data_source_id = model_data_source.value.filter((item: any) => item.field == data_source_field?.id);
|
||||||
|
if (is_data_source_id.length > 0) {
|
||||||
|
custom_group_option_list.value = data_source_field?.option || [];
|
||||||
|
new_group_source_list.value = new_group_source_list_handle(data_source_field?.id || '');
|
||||||
|
} else {
|
||||||
|
custom_group_option_list.value = model_data_source.value;
|
||||||
|
new_group_source_list.value = !isEmpty(data_source_content_list) ? data_source_content_list.value[0] : {};
|
||||||
|
}
|
||||||
// 设置是否是子页面
|
// 设置是否是子页面
|
||||||
data_source_store.set_is_children_custom(true);
|
data_source_store.set_is_children_custom(true);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
|
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
|
||||||
<div :style="style_container">
|
<div :style="style_container">
|
||||||
<div class="w h oh" :style="style_img_container">
|
<div class="w h oh" :style="style_img_container">
|
||||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
|
<data-rendering :custom-list="form.custom_list" :source-list="item1" :group-source-list="data_source_content_list" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
|
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
|
||||||
<div :style="style_container">
|
<div :style="style_container">
|
||||||
<div class="w h oh" :style="style_img_container">
|
<div class="w h oh" :style="style_img_container">
|
||||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
|
<data-rendering :custom-list="form.custom_list" :source-list="item1" :group-source-list="data_source_content_list" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,13 @@
|
||||||
<div class="common-content-height">
|
<div class="common-content-height">
|
||||||
<el-tabs v-model="tabs_name" class="content-tabs" @tab-change="change_tab_event">
|
<el-tabs v-model="tabs_name" class="content-tabs" @tab-change="change_tab_event">
|
||||||
<el-tab-pane label="选项卡" name="tabs">
|
<el-tab-pane label="选项卡" name="tabs">
|
||||||
<model-tabs-content :value="form" :tab-style="styles"></model-tabs-content>
|
<model-tabs-content :value="form" :tab-style="styles" :is-common="false"></model-tabs-content>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="轮播" name="carousel">
|
<el-tab-pane label="轮播" name="carousel">
|
||||||
<model-carousel-content :value="form"></model-carousel-content>
|
<model-carousel-content :value="form" :is-common="false"></model-carousel-content>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="公共" name="common">
|
||||||
|
<common-content-top :value="form.content_top"></common-content-top>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="common-content-height">
|
<div class="common-content-height">
|
||||||
<el-form :model="form" label-width="60">
|
<el-form :model="form" label-width="60">
|
||||||
<common-content-top :value="form.content_top"></common-content-top>
|
<template v-if="isCommon">
|
||||||
<div class="divider-line"></div>
|
<common-content-top :value="form.content_top"></common-content-top>
|
||||||
|
<div class="divider-line"></div>
|
||||||
|
</template>
|
||||||
<card-container>
|
<card-container>
|
||||||
<div class="mb-12">展示设置</div>
|
<div class="mb-12">展示设置</div>
|
||||||
<el-form-item label="选择风格">
|
<el-form-item label="选择风格">
|
||||||
|
|
@ -95,6 +97,10 @@ const props = defineProps({
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
|
isCommon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
|
|
||||||
|
|
@ -317,7 +317,7 @@ export const get_is_eligible = (field_list: any[], condition: condition_data, pr
|
||||||
let option: any = {};
|
let option: any = {};
|
||||||
if (field_list) {
|
if (field_list) {
|
||||||
// 判断是否是自定义组并且 自定义组选则了对应的数据源
|
// 判断是否是自定义组并且 自定义组选则了对应的数据源
|
||||||
if (!props.isCustom && !isEmpty(props.customGroupFieldId)) {
|
if (props.isCustomGroup && !isEmpty(props.customGroupFieldId)) {
|
||||||
// 取出对应自定义组的内容
|
// 取出对应自定义组的内容
|
||||||
const group_option_list = field_list.find((item: any) => item.field === props.customGroupFieldId);
|
const group_option_list = field_list.find((item: any) => item.field === props.customGroupFieldId);
|
||||||
// 取出自定义组内部数据源参数的详细数据
|
// 取出自定义组内部数据源参数的详细数据
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue