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

修改自定义数据拼接内容

v1.1.0
于肖磊 2024-12-10 16:34:15 +08:00
parent c980584158
commit 42d7c62b94
10 changed files with 194 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/common/custom-module/model-icon/index.vue
View File

@ -47,29 +47,39 @@ const icon_class = computed(() => {
} else {
if (!isEmpty(props.sourceList)) {
let icon = '';
// 获取数据源ID
const data_source_id = form.value.data_source_id;
if (!data_source_id.includes('.')) {
// 不输入商品， 文章和品牌时，从外层处理数据
icon = props.sourceList[data_source_id];
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (!isEmpty(props.sourceList.data) && props.isCustom) {
icon = props.sourceList.data[data_source_id];
}
// 取出数据源ID
const data_source_id = !isEmpty(form.value?.data_source_field?.id || '') ? form.value?.data_source_field?.id : form.value.data_source_id;
// 数据源内容
const option = form.value?.data_source_field?.option || {};
if (data_source_id.includes(';')) {
// 取出所有的字段，使用;分割
const ids = data_source_id.split(';');
let text = '';
ids.forEach((item: string, index: number) => {
text += data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
});
icon = text;
} else {
// 不输入商品， 文章和品牌时，从外层处理数据
icon = get_nested_property(props.sourceList, data_source_id);
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (!isEmpty(props.sourceList.data) && props.isCustom) {
icon = get_nested_property(props.sourceList.data, data_source_id);
}
icon = data_handling(data_source_id);
}
return icon;
return (option?.first || '') + icon + (option?.last || '');
} else {
return '';
}
}
});
const data_handling = (data_source_id: string) => {
// 不输入商品， 文章和品牌时，从外层处理数据
let icon = get_nested_property(props.sourceList, data_source_id);
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (!isEmpty(props.sourceList.data) && props.isCustom) {
icon = get_nested_property(props.sourceList.data, data_source_id);
}
return icon;
}
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) };transform: rotate(${form.value.icon_rotate}deg);${ padding_computer(form.value.icon_padding, props.scale) };`;
if (form.value.border_show == '1') {

12
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -17,7 +17,7 @@
<upload v-model:icon-value="form.icon_class" :limit="1" size="50" is-icon type="icon" @update:model-value="icon_change('1')"></upload>
</el-form-item>
<el-form-item label="数据字段">
<el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="icon_change('2')">
<el-select v-model="form.data_source_field.id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="icon_change('2')">
<el-option v-for="item in options.filter((item) => item.type == 'icon')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -25,7 +25,7 @@
<url-value v-model="form.icon_link" @update:model-value="link_change('1')"></url-value>
</el-form-item>
<el-form-item label="数据链接">
<el-select v-model="form.data_source_link" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="link_change('2')">
<el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="link_change('2')">
<el-option v-for="item in options.filter((item) => item.type == 'link')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -100,7 +100,7 @@
</div>
</template>
<script setup lang="ts">
import { location_compute } from '@/utils';
import { get_data_fields, location_compute } from '@/utils';
import { pick, cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -131,15 +131,17 @@ const bg_radius_change = (radius: any) => {
const icon_change = (key: string) => {
if (key == '2') {
form.value.icon_title = '';
form.value.data_source_field = get_data_fields(props.options, 'icon', form.value.data_source_field.id);
} else {
form.value.data_source_id = '';
form.value.data_source_field = get_data_fields([], 'icon', '');
}
};
const link_change = (key: string) => {
if (key == '2') {
form.value.icon_link = {};
form.value.data_source_link_field = get_data_fields(props.options, 'icon', form.value.data_source_link_field.id);
} else {
form.value.data_source_link = '';
form.value.data_source_link_field = get_data_fields([], 'icon', '');
}
};
const mult_color_picker_event = (arry: color_list[], type: number) => {

50
src/components/common/custom-module/model-image/index.vue
View File

@ -47,37 +47,43 @@ const img = computed(() => {
if (!isEmpty(props.sourceList)) {
let image_url = '';
// 取出数据源ID
const data_source_id = form.value.data_source_id;
if (!data_source_id.includes('.')) {
// 不输入商品， 文章和品牌时，从外层处理数据
image_url = props.sourceList[data_source_id];
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (!isEmpty(props.sourceList.data) && props.isCustom) {
if (data_source_id == props.imgParams) {
image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : props.sourceList.data[data_source_id];
} else {
image_url = props.sourceList.data[data_source_id];
}
}
const data_source_id = !isEmpty(form.value?.data_source_field?.id || '') ? form.value?.data_source_field?.id : form.value.data_source_id;
// 数据源内容
const option = form.value?.data_source_field?.option || {};
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (data_source_id.includes(';')) {
// 取出所有的字段，使用;分割
const ids = data_source_id.split(';');
let url = '';
ids.forEach((item: string, index: number) => {
url += data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
});
image_url = url;
} else {
// 循环取值,使用reduce 累加函数循环取值
image_url = get_nested_property(props.sourceList, data_source_id);
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (!isEmpty(props.sourceList.data) && props.isCustom) {
if (data_source_id == props.imgParams) {
image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : get_nested_property(props.sourceList.data, data_source_id);
} else {
image_url = get_nested_property(props.sourceList.data, data_source_id);
}
}
image_url = data_handling(data_source_id);
}
return image_url;
return (option?.first || '') + image_url + (option?.last || '');
} else {
return '';
}
}
});
const data_handling = (data_source_id: string) => {
// 循环取值,使用reduce 累加函数循环取值
let image_url = get_nested_property(props.sourceList, data_source_id);
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (!isEmpty(props.sourceList.data) && props.isCustom) {
if (data_source_id == props.imgParams) {
image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : get_nested_property(props.sourceList.data, data_source_id);
} else {
image_url = get_nested_property(props.sourceList.data, data_source_id);
}
}
return image_url;
}
const image_style = computed(() => {
return `${ set_count() };transform: rotate(${form.value.img_rotate}deg); ${ radius_computer(form.value.img_radius, props.scale) };`;
});

12
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -17,7 +17,7 @@
<upload v-model="form.img" :limit="1" size="50" @update:model-value="img_src_change('1')"></upload>
</el-form-item>
<el-form-item label="数据字段">
<el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="img_src_change('2')">
<el-select v-model="form.data_source_field.id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="img_src_change('2')">
<el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -25,7 +25,7 @@
<url-value v-model="form.link" @update:model-value="img_link_change('1')"></url-value>
</el-form-item>
<el-form-item label="数据链接">
<el-select v-model="form.data_source_link" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
<el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
<el-option v-for="item in options.filter((item) => item.type == 'link')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -74,7 +74,7 @@
</div>
</template>
<script setup lang="ts">
import { location_compute } from '@/utils';
import { get_data_fields, location_compute } from '@/utils';
import { pick } from 'lodash';
const props = defineProps({
value: {
@ -105,16 +105,18 @@ const border_radius_change = (radius: any) => {
const img_src_change = (key: string) => {
if (key == '2') {
form.value.img = [];
form.value.data_source_field = get_data_fields(props.options, 'images', form.value.data_source_field.id);
} else {
form.value.data_source_id = '';
form.value.data_source_field = get_data_fields([], 'images', '');
}
}
// 数据链接字段切换时，更新另外一个数据
const img_link_change = (key: string) => {
if (key == '2') {
form.value.link = {};
form.value.data_source_link_field = get_data_fields(props.options, 'link', form.value.data_source_link_field.id);
} else {
form.value.data_source_link = '';
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
}

7
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -17,7 +17,7 @@
<url-value v-model="form.link"></url-value>
</el-form-item>
<el-form-item label="数据链接">
<el-select v-model="form.data_source_link" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
<el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
<el-option v-for="item in options.filter((item) => item.type == 'link')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -80,7 +80,7 @@
</div>
</template>
<script setup lang="ts">
import { location_compute } from '@/utils';
import { get_data_fields, location_compute } from '@/utils';
import { pick, cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -124,8 +124,9 @@ const location_y_change = (val: number) => {
const img_link_change = (key: string) => {
if (key == '2') {
form.value.link = {};
form.value.data_source_link_field = get_data_fields(props.options, 'link', form.value.data_source_link_field.id);
} else {
form.value.data_source_link = '';
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
}

59
src/components/common/custom-module/model-text/index.vue
View File

@ -73,35 +73,31 @@ const text_title = computed(() => {
}
}
// 获取数据源ID
const data_source_id = formValue.data_source_id;
const data_source_id = !isEmpty(formValue?.data_source_field?.id || '') ? formValue?.data_source_field?.id : [ formValue.data_source_id ];
// 数据源内容
const option = formValue?.data_source_field?.option || {};
// 文本信息
let text_title = '';
try {
// 根据数据源ID是否包含点号来区分处理方式
if (!data_source_id.includes('.')) {
// 从数据源列表中获取标题
text_title = props.sourceList[data_source_id];
// 如果是自定义标题，进一步处理
if (props.sourceList.data && props.isCustom) {
if (data_source_id === props.titleParams) {
text_title = props.sourceList.new_title || props.sourceList.data[data_source_id];
// 多选判断
if (data_source_id.length > 0) {
// 遍历取出所有的值
data_source_id.forEach((source_id: string) => {
const sourceList = option.filter((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 + (sourceList?.last || '');
} else {
text_title = props.sourceList.data[data_source_id];
text_title += (sourceList?.first || '') + data_handling(source_id) + (sourceList?.last || '');
}
}
} else {
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);
}
}
});
}
} catch (error) {
// 错误处理：打印错误信息，并根据是否显示面板返回默认文本
console.error('Error in getTextTitle:', error);
if (!props.isDisplayPanel) {
return '请在此输入文字';
} else {
@ -109,13 +105,26 @@ const text_title = computed(() => {
}
}
// 确定最终返回的文本，优先使用表单值中的文本标题，如果为空则使用之前获取的标题或默认文本
let text = formValue.text_title || text_title;
if (text === '' && !props.isDisplayPanel) {
let text = formValue.text_title || text_title || '';
if (text == '' && !props.isDisplayPanel) {
text = props.options.find((item: any) => item.field === data_source_id)?.name || '请在此输入文字';
}
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') {

17
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -17,7 +17,7 @@
<el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
</el-form-item>
<el-form-item label="数据字段">
<el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')">
<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')">
<el-option v-for="item in options.filter((item) => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -25,7 +25,7 @@
<url-value v-model="form.text_link" @update:model-value="text_link_change('1')"></url-value>
</el-form-item>
<el-form-item label="数据链接">
<el-select v-model="form.data_source_link" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="text_link_change('2')">
<el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="text_link_change('2')">
<el-option v-for="item in options.filter((item) => item.type == 'link')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
@ -123,7 +123,7 @@
</div>
</template>
<script setup lang="ts">
import { location_compute } from '@/utils';
import { location_compute, get_data_fields } from '@/utils';
import { pick, cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -160,16 +160,23 @@ onBeforeMount(() => {
const text_change = (key: string) => {
if (key == '2') {
form.value.text_title = '';
if (form.value.data_source_field.id.length > 0) {
form.value.data_source_field.option = props.options.filter((item) => item.type == 'text' && form.value.data_source_field.id.includes(item.field))
} else {
form.value.data_source_field = get_data_fields([], 'text', '');
}
} else {
form.value.data_source_id = '';
// 如果没有数据，就赋值为空
form.value.data_source_field = get_data_fields([], 'text', '');
}
};
// 数据字段切换时，更新另外一个数据
const text_link_change = (key: string) => {
if (key == '2') {
form.value.text_link = {};
form.value.data_source_link_field = get_data_fields(props.options, 'link', form.value.data_source_link_field.id);
} else {
form.value.data_source_link = '';
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
};
// 文字大小变化时，同步更新行间距

32
src/components/model-custom/components/index-default.ts
View File

@ -1,3 +1,4 @@
import { id } from "element-plus/es/locale"
// 文本的默认值
const text_com_data = {
@ -5,9 +6,16 @@ const text_com_data = {
com_height: 17,
staging_height: 17,
text_title: '文本',
data_source_id: '',
data_source_field: {
id: [],
option: []
},
data_source_list: {},
text_link: {},
data_source_link_field: {
id: '',
option: {}
},
is_rich_text: '0',
is_up_down: '1',
text_color: '#000',
@ -45,9 +53,16 @@ const img_com_data = {
com_height: 50,
staging_height: 50,
img: [],
data_source_id: '',
data_source_field: {
id: '',
option: {}
},
data_source_list: {},
link: {},
data_source_link_field: {
id: '',
option: {}
},
img_radius: {
radius: 0,
radius_top_left: 0,
@ -90,9 +105,16 @@ const icon_com_data = {
com_height: 36,
staging_height: 36,
icon_class: '',
data_source_id: '',
data_source_field: {
id: '',
option: {}
},
data_source_list: {},
icon_link: {},
data_source_link_field: {
id: '',
option: {}
},
is_rich_icon: '0',
is_up_down: '1',
icon_color: '#000',
@ -130,6 +152,10 @@ const panel_com_data = {
com_height: 100,
staging_height: 100,
link: {},
data_source_link_field: {
id: '',
option: {}
},
icon_rotate: 0,
background_img_style: '2',
background_img: [],

8
src/components/model-custom/components/index.vue
View File

@ -418,6 +418,14 @@ watch(() => center_height.value, () => {
// 规整历史数据，避免有新增字段丢失
...Object.assign({}, cloneDeep((defaultComData as any)[`${item.key}_com_data`]), item.com_data),
com_height: item.com_data.staging_height,
data_source_field: {
...item.com_data?.data_source_field ?? { id:'', option: {} },
id: !isEmpty(item.com_data?.data_source_field?.id || '')? item.com_data.data_source_field.id : item.com_data.data_source_id,
},
data_source_link_field: {
...item.com_data?.data_source_link_field ?? { id: '', option: {} },
id: !isEmpty(item.com_data?.data_source_link_field?.id || '')? item.com_data.data_source_link_field.id : item.com_data.data_source_link,
},
},
}));
// 容器高度变化时，组件不绑定右侧数据

40
src/utils/index.ts
View File

@ -45,6 +45,46 @@ export function get_nested_property(obj: any, path: string): string {
// 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
}
/**
* 定义一个ListItem类型，用于描述列表项的结构
*/
type ListItem = { type: string; field: string; option?: Record<string, any> };
/**
* 根据指定的类型和字段从列表中获取数据字段
*
* @param list 列表项数组，每个项包含type和field属性
* @param type 要匹配的类型
* @param field 要匹配的字段名称
* @returns 返回一个包含id和option的对象，id为匹配的字段名，option为匹配项的option属性
*/
export const get_data_fields = (list: Array<ListItem>, type: string, field: string) => {
// 定义默认返回结果
const defaultResult = { id: '', option: {} };
try {
// 如果列表为空，直接返回默认结果
if (list.length === 0) {
return defaultResult;
}
// 过滤列表，找出类型和字段都匹配的项
const new_list = list.filter((item) => item.type === type && item.field === field);
// 如果找到匹配的项，返回第一个匹配项的字段名和全部信息
if (new_list.length > 0) {
return {
id: new_list[0].field,
option: new_list[0],
};
} else {
// 如果没有找到匹配的项，返回默认结果
return defaultResult;
}
} catch (error) {
// 捕获异常，返回默认结果
return defaultResult;
}
}
/**
* 将对象或数组中的字符串转换为数字
* 此函数递归地遍历给定对象或数组，将所有能转换为数字的字符串转换成数字类型