From f3923f7466acc2a52fb438d1aeeb66d157d17387 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 6 Jan 2025 14:00:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
=?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../custom-module/data-rendering/index.vue | 8 +++----
.../model-custom-group/index.vue | 18 +++++++-------
.../common/custom-module/model-icon/index.vue | 10 +++++---
.../custom-module/model-image/index.vue | 8 +++++--
.../custom-module/model-lines/index.vue | 8 +++++--
.../custom-module/model-panel/index.vue | 8 +++++--
.../common/custom-module/model-text/index.vue | 24 +++++++++----------
.../components/custom-config/index.vue | 6 ++++-
.../model-custom/components/index.vue | 12 +++++-----
src/components/model-custom/index.vue | 8 ++++---
.../model-custom/model-custom-content.vue | 10 +++++---
.../components/custom/index.vue | 5 +++-
.../model-data-magic-content.vue | 2 ++
src/utils/index.ts | 2 +-
14 files changed, 81 insertions(+), 48 deletions(-)
diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index 3c75041f..46b5c0d7 100644
--- a/src/components/common/custom-module/data-rendering/index.vue
+++ b/src/components/common/custom-module/data-rendering/index.vue
@@ -5,16 +5,16 @@
-
+
-
+
-
+
-
+
diff --git a/src/components/common/custom-module/model-custom-group/index.vue b/src/components/common/custom-module/model-custom-group/index.vue
index 77514287..7b777734 100644
--- a/src/components/common/custom-module/model-custom-group/index.vue
+++ b/src/components/common/custom-module/model-custom-group/index.vue
@@ -8,7 +8,7 @@
@@ -19,7 +19,7 @@
@@ -38,7 +38,7 @@
@@ -93,11 +93,11 @@ const props = defineProps({
const form = computed(() => props.value);
const new_style = computed(() => props.value.data_style);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
-const field_list: any[] | undefined = inject('field_list', []);
+const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
- return get_is_eligible(field_list, condition, props);
+ return get_is_eligible(field_list.value, condition, props);
});
//#region 自定义组真实数据
@@ -140,7 +140,7 @@ const style_chunk_img_container = computed(() => common_img_computer(new_style.v
const custom_scale = ref(1);
// 计算整体宽度和比例
watchEffect(() => {
- const { common_style, data_style, data_content_style } = new_style.value;
+ const { common_style, data_style, data_content_style, column_gap = 0 } = new_style.value;
const old_width = props.dataWidth * props.scale;
// 外层左右间距
const outer_spacing = common_style.margin_left + common_style.margin_right + common_style.padding_left + common_style.padding_right + border_width(common_style);
@@ -148,10 +148,12 @@ watchEffect(() => {
const content_spacing = data_content_style.margin_left + data_content_style.margin_right + data_content_style.padding_left + data_content_style.padding_right + border_width(data_content_style);
// 数据左右间距
const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right + border_width(data_style);
+ // 数据间距
+ const data_spacing = ['vertical', 'horizontal'].includes(form.value.data_source_direction) ? column_gap * (form.value.data_source_carousel_col - 1) : 0;
// 根据容器宽度来计算内部大小
- const new_width = old_width - outer_spacing - internal_spacing - content_spacing;
+ const new_width = old_width - outer_spacing - internal_spacing - content_spacing - data_spacing;
// 获得对应宽度的比例
- custom_scale.value = new_width / old_width;
+ custom_scale.value = new_width / props.dataWidth;
});
//#endregion
// 计算纵向显示的宽度
diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
index 43fcb803..87785781 100644
--- a/src/components/common/custom-module/model-icon/index.vue
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -36,16 +36,20 @@ const props = defineProps({
isCustom: {
type: Boolean,
default: false
- }
+ },
+ customGroupFieldId: {
+ type: String,
+ default: ''
+ },
});
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
-const field_list: any[] | undefined = inject('field_list', []);
+const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
- return get_is_eligible(field_list, condition, props);
+ return get_is_eligible(field_list.value, condition, props);
});
// 图标样式
const icon_class = computed(() => {
diff --git a/src/components/common/custom-module/model-image/index.vue b/src/components/common/custom-module/model-image/index.vue
index 207fb390..62a35308 100644
--- a/src/components/common/custom-module/model-image/index.vue
+++ b/src/components/common/custom-module/model-image/index.vue
@@ -32,6 +32,10 @@ const props = defineProps({
type: Boolean,
default: false
},
+ customGroupFieldId: {
+ type: String,
+ default: ''
+ },
imgParams: {
type: String,
default: ''
@@ -40,11 +44,11 @@ const props = defineProps({
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
-const field_list: any[] | undefined = inject('field_list', []);
+const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
- return get_is_eligible(field_list, condition, props);
+ return get_is_eligible(field_list.value, condition, props);
});
// 图片地址
const img = computed(() => {
diff --git a/src/components/common/custom-module/model-lines/index.vue b/src/components/common/custom-module/model-lines/index.vue
index d80d2ac4..ba33120b 100644
--- a/src/components/common/custom-module/model-lines/index.vue
+++ b/src/components/common/custom-module/model-lines/index.vue
@@ -26,6 +26,10 @@ const props = defineProps({
type: Boolean,
default: false
},
+ customGroupFieldId: {
+ type: String,
+ default: ''
+ },
scale: {
type: Number,
default: 1,
@@ -34,11 +38,11 @@ const props = defineProps({
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
-const field_list: any[] | undefined = inject('field_list', []);
+const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
- return get_is_eligible(field_list, condition, props);
+ return get_is_eligible(field_list.value, condition, props);
});
// 边框样式
const border_style = computed(() => {
diff --git a/src/components/common/custom-module/model-panel/index.vue b/src/components/common/custom-module/model-panel/index.vue
index 1ced10c1..35b89ffe 100644
--- a/src/components/common/custom-module/model-panel/index.vue
+++ b/src/components/common/custom-module/model-panel/index.vue
@@ -28,6 +28,10 @@ const props = defineProps({
type: Boolean,
default: false
},
+ customGroupFieldId: {
+ type: String,
+ default: ''
+ },
scale: {
type: Number,
default: 1
@@ -36,11 +40,11 @@ const props = defineProps({
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
-const field_list: any[] | undefined = inject('field_list', []);
+const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
- return get_is_eligible(field_list, condition, props);
+ return get_is_eligible(field_list.value, condition, props);
});
// 外层样式
const com_style = computed(() => {
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 868e24ea..2d45151c 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -39,10 +39,6 @@ const props = defineProps({
type: Boolean,
default: false
},
- isCustomGroup: {
- type: Boolean,
- default: false
- },
customGroupFieldId: {
type: String,
default: ''
@@ -50,21 +46,17 @@ const props = defineProps({
titleParams: {
type: String,
default: ''
- },
- options: {
- type: Array,
- default: () => [],
}
});
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
-const field_list: any[] | undefined = inject('field_list', []);
+const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
- return get_is_eligible(field_list, condition, props);
+ return get_is_eligible(field_list.value, condition, props);
});
const text_title = computed(() => {
@@ -93,9 +85,17 @@ const text_title = computed(() => {
if (!isEmpty(formValue.text_title)) {
// 存储待处理的文本标题
let new_title = cloneDeep(formValue.text_title);
+ let new_field_list = field_list.value;
+ // 判断是否是自定义组
+ if (!props.isCustom && !isEmpty(props.customGroupFieldId)) {
+ // 取出对应自定义组的内容
+ const group_option_list = new_field_list.find((item: any) => item.field === props.customGroupFieldId);
+ // 取出自定义组内部数据源参数的详细数据
+ new_field_list = group_option_list?.data || [];
+ }
// 遍历字段列表，替换文本标题中的占位符
- if (field_list) {
- field_list.forEach((item: any) => {
+ if (!isEmpty(new_field_list)) {
+ new_field_list.forEach((item: any) => {
const new_field = '${' + item.field + '}';
if (formValue.text_title.includes(new_field)) {
// 获取到字段的真实数据
diff --git a/src/components/model-custom/components/custom-config/index.vue b/src/components/model-custom/components/custom-config/index.vue
index 9d9dfc12..bc6e8525 100644
--- a/src/components/model-custom/components/custom-config/index.vue
+++ b/src/components/model-custom/components/custom-config/index.vue
@@ -2,7 +2,7 @@