修改页面显示逻辑
于肖磊
parent
822233d626
commit
731082d6ee
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
// 数据处理
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ const custom_width = computed(() => {
|
|||
}
|
||||
})
|
||||
const form = ref(props.value);
|
||||
provide('field_list', form.value.field_list);
|
||||
// 外层的内容
|
||||
// 外层自定义的弹出框
|
||||
const dragkey = ref('');
|
||||
|
|
|
|||
Loading…
Reference in New Issue