From 731082d6eea71e92ddebf453b804651243d29eeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 3 Jan 2025 16:39:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=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/model-text/field_dialog.vue | 52 ++++++++++++
 .../common/custom-module/model-text/index.vue | 80 ++++++++++++-------
 .../model-text/model-text-style.vue           | 11 ++-
 .../model-custom/model-custom-content.vue     |  1 +
 4 files changed, 113 insertions(+), 31 deletions(-)
 create mode 100644 src/components/common/custom-module/model-text/field_dialog.vue

diff --git a/src/components/common/custom-module/model-text/field_dialog.vue b/src/components/common/custom-module/model-text/field_dialog.vue
new file mode 100644
index 00000000..835fb64f
--- /dev/null
+++ b/src/components/common/custom-module/model-text/field_dialog.vue
@@ -0,0 +1,52 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="字段选择" class="radius-lg" width="600" draggable append-to-body :close-on-click-modal="false" @close="dialogVisible = false;">
+        <div class="flex-col gap-20 w h pa-20 oh align-e">
+            <el-input v-model="search" class="search-w" placeholder="请输入搜索内容" @input="handle_search"></el-input>
+            <!-- 表格头部如果传输了数据，就渲染表格, 否则就不渲染 -->
+            <el-table :data="table_data" style="width: 100%; height: 400px;">
+                <el-table-column prop="name" label="字段名称" />
+                <el-table-column prop="field" label="字段值" />
+                <el-table-column fixed="right" label="操作" width="60">
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="copy(scope.row.field)">复制</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    option: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+    }
+});
+const dialogVisible = defineModel('dialogVisible', { type: Boolean, default: false });
+const table_data = ref(props.option);
+const search = ref('');
+const handle_search = () => {
+    table_data.value = props.option.filter((item: any) => item.field.includes(search.value) || item.name.includes(search.value));
+};
+
+const copy = (val: string) => {
+  const text = '${' + val + '}';
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+        ElMessage({ type: 'success', message: '复制成功!'});
+    })
+    .catch((error) => {
+        ElMessage({ type: 'error', message: '复制失败!'});
+    });
+    dialogVisible.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.search-w {
+    width: 20rem;
+    right: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 1b61c45d..781419fb 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -12,7 +12,7 @@
 </template>
 <script setup lang="ts">
 import { radius_computer, padding_computer, gradient_handle, get_nested_property, custom_condition_judg, custom_condition_data } from '@/utils';
-import { isEmpty } from 'lodash';
+import { cloneDeep, isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -92,44 +92,64 @@ const text_title = computed(() => {
             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 || '');
+    if (!isEmpty(formValue.text_title)) {
+        // 存储待处理的文本标题
+        let new_title = cloneDeep(formValue.text_title);
+        // 遍历字段列表，替换文本标题中的占位符
+        if (field_list) {
+            field_list.forEach((item: any) => {
+                const new_field = '${' +  item.field + '}';
+                if (formValue.text_title.includes(new_field)) {
+                    // 获取到字段的真实数据
+                    const field_value = custom_condition_data(item.field, item, props.sourceList, props.isCustom);
+                    // 使用正则表达式替换文本标题
+                    const regular = new RegExp(`\\$\\{\\s*${item.field}\\s*\\}`, 'g');
+                    // 替换后的内容赋值给原内容, 确保后续可以继续替换
+                    new_title = new_title.replace(regular, field_value);
                 }
             });
         }
-    } catch (error) {
-        if (!props.isDisplayPanel) {
-            return '请在此输入文字';
-        } else {
-            return '';
+        // 将内容替换为处理后的标题
+        text_title = new_title;
+    } else {
+        // 获取数据源ID
+        const data_source_id = !isEmpty(formValue?.data_source_field?.id || []) ? formValue?.data_source_field?.id : [];
+        // 数据源内容
+        const option = formValue?.data_source_field?.option || [];
+        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 = '请在此输入文字';
+    if (text_title === '' && !props.isDisplayPanel) {
+        text_title = '请在此输入文字';
     }
-    return text;
+    return text_title;
 }
 
 // 数据处理
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index e0d35dfd..439b6248 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -9,7 +9,10 @@
                     <el-input v-model="form.text_captions" placeholder="请输入文本内容" type="input" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="文本内容">
-                    <el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
+                    <div class="flex-row gap-5 align-s w">
+                        <el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
+                        <el-button @click="copy_field">复制字段</el-button>
+                    </div>
                 </el-form-item>
                 <el-form-item label="数据字段">
                     <el-select v-model="form.data_source_field.id" value-key="id" multiple collapse-tags clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')">
@@ -117,6 +120,7 @@
                 </template>
             </card-container>
         </el-form>
+        <field_dialog v-model:dialog-visible="copy_field_visiable" :option="options"></field_dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -190,6 +194,11 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.color_list = arry;
     form.value.direction = type.toString();
 };
+// 复制字段
+const copy_field_visiable = ref(false);
+const copy_field = () => {
+    copy_field_visiable.value = true;
+};
 // #region 位置计算
 // 监听数据变化
 watch(
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index dd498760..33170341 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -100,6 +100,7 @@ const custom_width = computed(() => {
     }
 })
 const form = ref(props.value);
+provide('field_list', form.value.field_list);
 // 外层的内容
 // 外层自定义的弹出框
 const dragkey = ref('');