249 lines
10 KiB
Vue
249 lines
10 KiB
Vue
<template>
|
||
<div v-if="is_show" ref="modelText" class="img-outer w h re oh" :style="com_style">
|
||
<div :style="text_style" :class="`text-word-break text-line-${ form?.width_omit_num == '0' || form.is_rich_text == '1' ? '' : form?.width_omit_num || '' }`">
|
||
<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, custom_condition_data, get_is_eligible } from '@/utils';
|
||
import { cloneDeep, 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
|
||
},
|
||
isCustomGroup: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
customGroupFieldId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
titleParams: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
configLoop: {
|
||
type: String,
|
||
default: '1'
|
||
}
|
||
});
|
||
|
||
// 用于页面判断显示
|
||
const form = computed(() => props.value);
|
||
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
|
||
const field_list: any = toRef(inject('field_list', []));
|
||
const is_show = computed(() => {
|
||
if (props.configLoop == '1') {
|
||
// 取出条件判断的内容
|
||
const condition = form.value?.condition || { field: '', type: '', value: '' };
|
||
return get_is_eligible(field_list.value, condition, props);
|
||
} else {
|
||
return true;
|
||
}
|
||
});
|
||
|
||
const text_title = computed(() => {
|
||
return (form.value?.text_captions || '') + 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 '';
|
||
}
|
||
}
|
||
// 文本信息
|
||
let text_title = '';
|
||
if (!isEmpty(formValue.text_title)) {
|
||
// 存储待处理的文本标题
|
||
let new_title = cloneDeep(formValue.text_title);
|
||
let new_field_list = field_list.value;
|
||
// 判断是否是自定义组
|
||
if (props.isCustomGroup && !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 (props.configLoop == '1' && !isEmpty(new_field_list)) {
|
||
new_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);
|
||
}
|
||
});
|
||
}
|
||
// 将内容替换为处理后的标题
|
||
text_title = new_title;
|
||
} else {
|
||
// 获取数据源ID
|
||
const data_source_id = !isEmpty(formValue?.data_source_field?.id || []) && props.configLoop == '1' ? formValue?.data_source_field?.id : [];
|
||
// 数据源内容
|
||
const option = formValue?.data_source_field?.option || [];
|
||
try {
|
||
// 多选判断
|
||
if (data_source_id.length > 0) {
|
||
text_title += form.value?.data_split?.left || '';
|
||
// 遍历取出所有的值
|
||
data_source_id.forEach((source_id: string, index: number) => {
|
||
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 (index < data_source_id.length - 1) {
|
||
text_title += form.value?.data_split?.middle || '';
|
||
}
|
||
});
|
||
text_title += form.value?.data_split?.right || '';
|
||
}
|
||
} catch (error) {
|
||
if (!props.isDisplayPanel) {
|
||
return '请在此输入文字';
|
||
} else {
|
||
return '';
|
||
}
|
||
}
|
||
}
|
||
// 确定最终返回的文本，优先使用表单值中的文本标题，如果为空则使用之前获取的标题或默认文本
|
||
if (text_title === '' && !props.isDisplayPanel) {
|
||
text_title = '请在此输入文字';
|
||
}
|
||
return text_title;
|
||
}
|
||
|
||
// 数据处理
|
||
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 (['bold', '500'].includes(form.value.text_weight)) {
|
||
style += `font-weight: bold;`;
|
||
}
|
||
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 {
|
||
const { com_width = 0, com_height = 0, is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0 } = form.value;
|
||
const new_max_width = max_width > 0 ? `max-width: ${ max_width }px;` : 'white-space: nowrap;';
|
||
const new_max_height = max_height > 0 ? `max-height: ${ max_height }px;` : '';
|
||
return `${ is_width_auto == '1' ? `width:100%;${ new_max_width }` : `width:${ com_width }px;`}${ is_height_auto == '1' ? `height:100%;${ new_max_height }` : `height: ${ com_height }px;` }`;
|
||
}
|
||
};
|
||
const emits = defineEmits(['container_change']);
|
||
// 开启自定义的时候重新计算高度和宽度
|
||
const modelText = ref<HTMLElement | null>(null);
|
||
watch(() => props.value, (value) => {
|
||
if (!props.isDisplayPanel) {
|
||
const { is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0, com_width = 0, com_height = 0 } = value;
|
||
nextTick(() => {
|
||
let new_width = com_width;
|
||
let new_height = com_height;
|
||
// 宽度自适应时 获取当前容器的宽度
|
||
if (is_width_auto == '1') {
|
||
new_width = modelText.value?.clientWidth || 0;
|
||
}
|
||
// 高度自适应时时 获取当前容器的高度
|
||
if (is_height_auto == '1') {
|
||
new_height = modelText.value?.clientHeight || 0;
|
||
}
|
||
// 如果跟历史的宽度或者高度不同，则更新
|
||
// if (new_width !== com_width || new_height !== com_height) {
|
||
emits('container_change', new_width, new_height);
|
||
// }
|
||
});
|
||
}
|
||
}, { immediate:true, deep: true });
|
||
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.rich-text-content {
|
||
// white-space: normal;
|
||
word-break:break-all;
|
||
* {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
</style>
|