sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

自定义组内容

v1.2.0
于肖磊 2024-12-24 13:32:34 +08:00
parent 2d6113590c
commit afc7e73b85
2 changed files with 266 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/common/custom-module/model-custom-group/index.vue Normal file
View File

@ -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>

101
src/components/common/custom-module/model-custom-group/model-custom-group-style.vue Normal file
View File

@ -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>