From afc7e73b856de3bafb3db55b58608ecec4d4fd6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 24 Dec 2024 13:32:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-custom-group/index.vue              | 165 ++++++++++++++++++
 .../model-custom-group-style.vue              | 101 +++++++++++
 2 files changed, 266 insertions(+)
 create mode 100644 src/components/common/custom-module/model-custom-group/index.vue
 create mode 100644 src/components/common/custom-module/model-custom-group/model-custom-group-style.vue

diff --git a/src/components/common/custom-module/model-custom-group/index.vue b/src/components/common/custom-module/model-custom-group/index.vue
new file mode 100644
index 00000000..2e7f8b5d
--- /dev/null
+++ b/src/components/common/custom-module/model-custom-group/index.vue
@@ -0,0 +1,165 @@
+<template>
+    <div class="img-outer w h re oh" :style="com_style">
+        <div :style="text_style" class="text-word-break">
+            <template v-if="form.is_rich_text == '1'">
+                <div class="rich-text-content" :innerHTML="text_title"></div>
+            </template>
+            <template v-else>
+                {{ text_title }}
+            </template>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { radius_computer, padding_computer, gradient_handle, get_nested_property } from '@/utils';
+import { isEmpty } from 'lodash';
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+        required: true
+    },
+    sourceList: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    },
+    isDisplayPanel: {
+        type: Boolean,
+        default: false
+    },
+    scale: {
+        type: Number,
+        default: 1
+    },
+    isCustom: {
+        type: Boolean,
+        default: false
+    },
+    titleParams: {
+        type: String,
+        default: ''
+    },
+    options: {
+        type: Array<any>,
+        default: () => [],
+    }
+});
+
+// 用于页面判断显示
+const form = computed(() => props.value);
+const text_title = computed(() => {
+    return getTextTitle(form.value, props);
+});
+/**
+ * 根据表单值和属性获取文本标题
+ * 此函数用于根据提供的表单值和组件属性，在不同的条件下返回相应的文本标题
+ * 主要处理逻辑包括：检查表单值和数据源列表的存在性、处理数据源ID以获取标题、处理自定义标题情况、错误处理以及最终文本的确定
+ * 
+ * @param formValue 表单的当前值，包含数据源ID和可能的文本标题
+ * @param props 组件的属性，包括数据源列表、是否显示面板、是否自定义标题等
+ * @returns {string} 根据不同条件返回的文本标题
+ */
+ const getTextTitle = (formValue: any, props: any): string => {
+    // 检查表单值和数据源列表是否存在，以及是否显示面板，以确定返回的默认文本
+    if (!formValue || !props.sourceList) {
+        if (!props.isDisplayPanel) {
+            return '请在此输入文字';
+        } else {
+            return '';
+        }
+    }
+    // 获取数据源ID
+    const data_source_id = !isEmpty(formValue?.data_source_field?.id || []) ? formValue?.data_source_field?.id : [];
+    // 数据源内容
+    const option = formValue?.data_source_field?.option || [];
+    // 文本信息
+    let text_title = '';
+    try {
+        // 多选判断
+        if (data_source_id.length > 0) {
+            // 遍历取出所有的值
+            data_source_id.forEach((source_id: string) => {
+                const sourceList = option.find((item: any) => item.field == source_id);
+                // 根据数据源ID是否包含点号来区分处理方式
+                if (source_id.includes(';')) {
+                    const ids = source_id.split(';');
+                    let text = '';
+                    ids.forEach((item: string, index: number) => {
+                        text += data_handling(item) + (index != ids.length - 1 ? (sourceList?.join || '') : '');
+                    });
+                    text_title += (sourceList?.first || '') + (text == '' && !props.isDisplayPanel ? sourceList?.name || '请在此输入文字' : text ) + (sourceList?.last || '');
+                } else {
+                    text_title += (sourceList?.first || '') + (data_handling(source_id) === '' && !props.isDisplayPanel ? sourceList?.name || '请在此输入文字' : data_handling(source_id) ) + (sourceList?.last || '');
+                }
+            });
+        }
+    } catch (error) {
+        if (!props.isDisplayPanel) {
+            return '请在此输入文字';
+        } else {
+            return '';
+        }
+    }
+    // 确定最终返回的文本，优先使用表单值中的文本标题，如果为空则使用之前获取的标题或默认文本
+    let text = formValue.text_title || text_title;
+    if (text === '' && !props.isDisplayPanel) {
+        text = '请在此输入文字';
+    }
+    return text;
+}
+
+const data_handling = (data_source_id: string) => {
+    let text_title = get_nested_property(props.sourceList, data_source_id);
+    // 如果是自定义标题，进一步处理嵌套对象中的数据
+    if (props.sourceList.data && props.isCustom) {
+        if (data_source_id === props.titleParams) {
+            text_title = props.sourceList.new_title || get_nested_property(props.sourceList.data, data_source_id);
+        } else {
+            text_title = get_nested_property(props.sourceList.data, data_source_id);
+        }
+    }
+    return text_title;
+}
+
+const text_style = computed(() => {
+    let style = `font-size: ${ form.value.text_size * props.scale }px;line-height: ${ (typeof form.value.line_text_size === "number" ? form.value.line_text_size : form.value.text_size) * props.scale}px;color: ${ form.value.text_color }; text-align: ${ form.value.text_location }; transform: rotate(${form.value.text_rotate}deg);text-decoration: ${ form.value.text_option };${ padding_computer(form.value.text_padding, props.scale) };`;
+    if (form.value.text_weight == 'italic') {
+        style += `font-style: italic`;
+    } else if (form.value.text_weight == '500') {
+        style += `font-weight: 500`;
+    }
+    return style;
+});
+
+const com_style = computed(() => {
+    let style = `${ set_count() } ${ gradient_handle(form.value.color_list, form.value.direction) } ${ radius_computer(form.value.bg_radius, props.scale) }`;
+    if (form.value.border_show == '1') {
+        style += `border: ${form.value.border_size}px ${form.value.border_style} ${form.value.border_color};`;
+    }
+    // 是富文本并且开启了上下滚动的开关
+    if (form.value.is_rich_text == '1' && form.value.is_up_down == '1') {
+        style += `overflow-y: auto;`
+    }
+    return style;
+});
+const set_count = () => {
+    if (props.isDisplayPanel) {
+        return '';
+    } else {
+        return `width: ${ form.value.com_width }px; height: ${ form.value.com_height }px;`;
+    }
+};
+</script>
+<style lang="scss" scoped>
+.rich-text-content {
+    white-space: normal;
+    word-break:break-all;
+    * {
+        max-width: 100%;
+    }
+}
+</style>
diff --git a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
new file mode 100644
index 00000000..500f0256
--- /dev/null
+++ b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="w h bg-f">
+        <el-form :model="form" label-width="70">
+            <card-container>
+                <div class="mb-12">定位设置</div>
+                <el-form-item label="X轴">
+                    <slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
+                </el-form-item>
+                <el-form-item label="Y轴">
+                    <slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
+                </el-form-item>
+            </card-container>
+            <div class="bg-f5 divider-line" />
+            <card-container>
+                <div class="mb-12">自定义设置</div>
+                <el-button class="w" size="large" @click="custom_edit"><icon name="edit" size="12"></icon>自定义编辑</el-button>
+            </card-container>
+            <div class="bg-f5 divider-line" />
+            <card-container>
+                <div class="mb-12">容器设置</div>
+                <el-form-item label="容器宽度">
+                    <slider v-model="form.com_width" :max="1000"></slider>
+                </el-form-item>
+                <el-form-item label="容器高度">
+                    <slider v-model="form.com_height" :max="1000"></slider>
+                </el-form-item>
+                <el-form-item label="背景颜色">
+                    <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                </el-form-item>
+                <el-form-item label="圆角">
+                    <radius :value="form.bg_radius" @update:value="bg_radius_change"></radius>
+                </el-form-item>
+            </card-container>
+        </el-form>
+    </div>
+</template>
+<script setup lang="ts">
+import { location_compute } from '@/utils';
+import { pick, cloneDeep } from 'lodash';
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+    options: {
+        type: Array<any>,
+        default: () => [],
+    },
+});
+// 默认值
+const state = reactive({
+    diy_data: props.value,
+});
+// 如果需要解构，确保使用toRefs
+const { diy_data } = toRefs(state);
+const form = ref(diy_data.value.com_data);
+const center_height = defineModel('height', { type: Number, default: 0 });
+
+const emit = defineEmits(['custom_edit']);
+const custom_edit = () => {
+    emit('custom_edit', form.value.custom_list, form.value.com_height);
+};
+// 通用配置
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.color_list = arry;
+    form.value.direction = type.toString();
+};
+// 背景圆角配置
+const bg_radius_change = (radius: any) => {
+    form.value.bg_radius = Object.assign(form.value.bg_radius, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
+};
+// x轴变化时，更新记录的位置
+const location_x_change = (val: number) => {
+    diy_data.value.location.record_x = val;
+}
+// y轴变化时，更新记录的位置
+const location_y_change = (val: number) => {
+    diy_data.value.location.record_y = val;
+    diy_data.value.location.staging_y = val;
+}
+// 监听数据变化
+watch(
+    diy_data,
+    (val) => {
+        // 容器位置计算
+        diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
+        diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
+        diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
+        diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
+        diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
+        form.value.staging_height = form.value.com_height;
+    },
+    { immediate: true, deep: true }
+);
+</script>
+<style lang="scss" scoped>
+.border-style-item {
+    width: 3rem;
+    height: 2rem;
+}
+</style>