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

自定义逻辑修改

v1.2.0
于肖磊 2025-01-08 15:04:56 +08:00
parent 709fcd5d64
commit 0f5c580f07
9 changed files with 123 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/custom-module/condition-config/index.vue
View File

@ -3,7 +3,7 @@
<div class="mb-12">条件设置</div>
<el-form-item label="条件字段">
<el-select v-model="form.condition.field" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="operation_end">
<el-option v-for="item in options" :key="item.field" :label="item.name" :value="item.field" />
<el-option v-for="item in options" :key="item.field + '-' + item.type" :label="item.name" :value="item.field + '{|}' + item.type" />
</el-select>
</el-form-item>
<el-form-item label="条件判断">

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

@ -117,8 +117,9 @@ const text_title = computed(() => {
try {
// 多选判断
if (data_source_id.length > 0) {
text_title += form.value?.data_split?.left || '';
// 遍历取出所有的值
data_source_id.forEach((source_id: string) => {
data_source_id.forEach((source_id: string, index: number) => {
const sourceList = option.find((item: any) => item.field == source_id);
// 根据数据源ID是否包含点号来区分处理方式
if (source_id.includes(';')) {
@ -131,7 +132,11 @@ const text_title = computed(() => {
} 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) {

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

@ -19,6 +19,13 @@
<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>
<el-form-item label="拼接值">
<div class="flex-row gap-10">
<el-input v-model="form.data_split.left" placeholder="数据左侧" type="input" clearable @blur="operation_end" @input="text_change('2')"></el-input>
<el-input v-model="form.data_split.middle" placeholder="数据中间" type="input" clearable @blur="operation_end" @input="text_change('2')"></el-input>
<el-input v-model="form.data_split.right" placeholder="数据右侧" type="input" clearable @blur="operation_end" @input="text_change('2')"></el-input>
</div>
</el-form-item>
<el-form-item label="链接">
<url-value v-model="form.text_link" @update:model-value="text_link_change('1')"></url-value>
</el-form-item>
@ -164,6 +171,7 @@ const text_change = (key: string) => {
id: [],
option: [],
};
form.value.data_split = '';
}
};
// 数据字段切换时，更新另外一个数据

35
src/components/model-custom/components/custom-dialog/index.vue
View File

@ -6,7 +6,7 @@
</div>
</template>
<div class="flex-col gap-20 w h pa-20 oh">
<filter-form v-if="dialogVisible && !isEmpty(config?.filter_form_config)" :filter-data="config.filter_form_config" direction="horizontal" :data-interface="default_data" @form-change="filter_form_change"></filter-form>
<filter-form v-if="dialogVisible && !isEmpty(config?.search_filter_form_config)" :filter-data="config.search_filter_form_config" direction="horizontal" :data-interface="default_data" @form-change="filter_form_change"></filter-form>
<!-- 表格头部如果传输了数据，就渲染表格, 否则就不渲染 -->
<template v-if="!isEmpty(config?.header)">
<table-config v-loading="loading" :table-data="tableData" :multiple="multiple" :table-column-list="config.header" :table-row-class-list="tableRowClassList" @select="table_select"></table-config>
@ -25,8 +25,9 @@
</template>
<script lang="ts" setup>
import { interface_field_processing } from '@/utils';
import request from '@/utils/request';
import { isEmpty } from 'lodash';
import { isEmpty, pick } from 'lodash';
const props = defineProps({
type: {
@ -41,6 +42,10 @@ const props = defineProps({
type: Object as PropType<any>,
default: () => {},
},
extraSearchData: {
type: Object as PropType<any>,
default: () => {},
},
multiple: {
type: Boolean,
default: false,
@ -118,28 +123,13 @@ const pagination_data = ref({
watchEffect(() => {
if (!isEmpty(props.config) && dialogVisible.value) {
// 处理数据
const staging_data : any = {};
pagination_data.value = {
page: 1,
page_size: props?.config?.page_size || undefined,
data_total: 0,
}
const filter_form_config = props?.config?.filter_form_config || [];
// 将数据赋值给默认数据
if (filter_form_config.length > 0) {
// 根据不同的类型，初始化不同的数据, 并将对象处理成对应的值
filter_form_config.forEach((item: any) => {
let value : number | string | Array<any> = '';
if (item.type == 'checkbox' || item.type == 'select' && +item?.config?.is_multiple == 1) { // 多选
value = item?.config?.default ?? [];
} else if ((item.type == 'input' && item?.config?.type == 'number') || item.type == 'switch') { // 数字/开关
value = Number(item?.config?.default ?? 0);
} else { // 其他
value = item?.config?.default ?? '';
}
staging_data[item.form_name] = value;
})
}
const staging_data = interface_field_processing(props?.config?.search_filter_form_config || [], 'new', {});
// 循环完之后赋值，避免多次赋值，传递给子组件出现多次调用和回调问题
default_data.value = staging_data;
}
@ -162,12 +152,19 @@ const get_table_list = (val: any) => {
tableData.value = [];
// 判断是否有数据和配置和请求地址
if (!isEmpty(props.config) && !isEmpty(props.config.data_url)) {
// 取出自动模式所有的字段
const filter_data = interface_field_processing(props?.config?.filter_form_config, 'new', {}) || {};
// 取出所有字段的key
const filter_key = Object.keys(filter_data);
// 移除不需要的数据
const extraSearchData = pick(props?.extraSearchData || {}, filter_key) || {};
// 发送请求，获取数据
const data = {
...val,
...extraSearchData,
page: pagination_data.value.page,
page_size: pagination_data.value.page_size,
}
};
loading.value = true;
request({
url: props.config.data_url, // 请求地址

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

@ -16,6 +16,11 @@ const text_com_data = {
id: '',
option: {}
},
data_split: {
left: '',
middle: '',
right: '',
},
is_rich_text: '0',
is_up_down: '1',
text_color: '#000',

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

@ -125,7 +125,7 @@ const style_chunk_container = computed(() => common_styles_computer(new_style.va
const style_chunk_img_container = computed(() => common_img_computer(new_style.value.data_style));
// 数据来源的内容
let data_source_content_list = computed(() => {
const data_source_content_list = computed(() => {
// 是自定义数据类型的时候，显示自定义数据，否则显示数据来源的数据
if (form.value.is_custom_data == '1') {
if (Number(form.value.data_source_content.data_type) === 0) {

53
src/components/model-custom/model-custom-content.vue
View File

@ -40,9 +40,10 @@
</el-radio-group>
</el-form-item>
<template v-if="Number(form.data_source_content.data_type) === 0">
<div class="nav-list">
<drag-group :list="form.data_source_content.data_list" :img-params="form.show_data?.data_logo || ''" :title-params="form.show_data?.data_name || 'name'" type="custom" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mt-20 w" @click="add">+添加</el-button>
<div class="nav-list flex-col gap-20">
<filter-form v-if="!isEmpty(default_type_data?.appoint_config?.filter_form_config || {})" :filter-data="default_type_data?.appoint_config?.filter_form_config || {}" direction="vertical" :title-width="58" :data-interface="form.data_source_content" @form-change="filter_form_change"></filter-form>
<drag-group v-if="!isEmpty(form.data_source_content.data_list)" :list="form.data_source_content.data_list" :img-params="form.show_data?.data_logo || ''" :title-params="form.show_data?.data_name || 'name'" type="custom" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="w" @click="add">+添加</el-button>
</div>
</template>
<template v-else>
@ -63,15 +64,15 @@
<!-- 自定义内部数据内容处理 -->
<custom-config :key="drag_group_key + 'custom-group'" v-model:visible="dialogVisible_group" v-model:width="center_group_width" v-model:height="center_group_height" v-model:father-list="custom_group_father_list" config-type="custom-group" :dragkey="drag_group_key + 'custom-group'" :options="custom_group_option_list" :source-list="!isEmpty(new_group_source_list) ? new_group_source_list : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-id="center_group_id" :custom-list="custom_group_list" :custom-group-field-id="custom_group_field_id" @accomplish="accomplish"></custom-config>
<!-- 手动筛选数据弹出框 -->
<custom-dialog v-model:dialog-visible="url_value_dialog_visible" :data-list-key="form.show_data?.data_key || 'id'" :config="default_type_data.appoint_config" :multiple="url_value_multiple_bool" @confirm_event="url_value_dialog_call_back"></custom-dialog>
<custom-dialog v-model:dialog-visible="url_value_dialog_visible" :data-list-key="form.show_data?.data_key || 'id'" :config="default_type_data.appoint_config" :extra-search-data="form.data_source_content" :multiple="url_value_multiple_bool" @confirm_event="url_value_dialog_call_back"></custom-dialog>
</div>
</template>
<script setup lang="ts">
import { isEmpty, cloneDeep, omit } from 'lodash';
import { isEmpty, cloneDeep, pick } from 'lodash';
import request from '@/utils/request';
import CustomAPI from '@/api/custom';
import { DataSourceStore } from '@/store';
import { get_math, get_nested_property } from '@/utils';
import { get_math, get_nested_property, interface_field_processing } from '@/utils';
const data_source_store = DataSourceStore();
const props = defineProps({
@ -301,25 +302,26 @@ const filter_data_handling = (type: string = 'old') => {
// 类型 历史的如果不存在，就使用第一个，否则的话，使用第一个
data_type: type == 'old'? (form.value.data_source_content?.data_type ?? data_type) : data_type,
};
// 根据不同的类型，初始化不同的数据, 并将对象处理成对应的值
default_type_data.value?.filter_config?.filter_form_config.forEach((item: any) => {
let value : number | string | Array<any> = '';
if (item.type == 'checkbox' || (item.type == 'select' && +item?.config?.is_multiple == 1)) { // 多选
value = item?.config?.default ?? [];
} else if ((item.type == 'input' && item?.config?.type == 'number') || item.type == 'switch') { // 数字/开关
value = Number(item?.config?.default ?? 0);
} else {
value = item?.config?.default ?? '';
let new_data_field = {};
// 根据不同的数据初始化不同的内容
if (staging_data.data_type === 0) {
// 如果是手动模式，就取手动模式的数据为默认数据，避免两者重复导致数据冲突
new_data_field = {
...interface_field_processing(default_type_data.value?.filter_config?.filter_form_config, type, form.value?.data_source_content || {}),
...interface_field_processing(default_type_data.value?.appoint_config?.filter_form_config, type, form.value?.data_source_content || {}),
}
// 历史数据的话，需要判断一下，如果历史数据没有，那么就使用默认数据
if (type == 'old') {
staging_data[item.form_name] = form.value.data_source_content[item.form_name] == null ? value : form.value.data_source_content[item.form_name];
} else {
staging_data[item.form_name] = value;
} else {
// 如果是自动模式，就取自动模式的数据为默认数据，避免两者重复导致数据冲突
new_data_field = {
...interface_field_processing(default_type_data.value?.appoint_config?.filter_form_config, type, form.value?.data_source_content || {}),
...interface_field_processing(default_type_data.value?.filter_config?.filter_form_config, type, form.value?.data_source_content || {}),
}
})
}
// 循环完之后赋值，避免多次赋值，传递给子组件出现多次调用和回调问题
form.value.data_source_content = staging_data;
form.value.data_source_content = {
...staging_data,
...new_data_field,
};
};
// 处理显示的图片和传递到下去的数据结构
const model_data_source = ref<data_list[]>([]);
@ -468,7 +470,12 @@ const get_auto_data = () => {
} else if (isEmpty(default_type_data.value.filter_config.data_url)) {
ElMessage.error('请先配置请求地址(data_url)');
} else {
const data = omit(cloneDeep(form.value.data_source_content), ['data_ids', 'data_list', 'data_auto_list', 'data_type']);
// 取出自动模式所有的字段
const filter_data = interface_field_processing(default_type_data.value?.filter_config?.filter_form_config, 'new', {}) || {};
// 取出所有字段的key
const filter_key = Object.keys(filter_data);
// 取出对应key的数据
const data = pick(cloneDeep(form.value.data_source_content), filter_key);
request({
url: default_type_data.value.filter_config.data_url, // 请求地址
method: 'post', // 请求方式

1
src/components/model-tabs-carousel/index.vue
View File

@ -49,7 +49,6 @@ watch(
background_img: new_style.tabs_bg_background_img,
}
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content);
console.log(new_style.tabs_margin);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 轮播区域背景设置
const carousel_content_data = {

63
src/utils/index.ts
View File

@ -150,6 +150,45 @@ export const border_width = (style: BorderStyle): number => {
}
}
/**
* 接口字段数据处理函数
* 根据提供的列表和类型，处理并返回一个包含默认值或历史值的对象
* @param {any} list - 包含多项配置的列表，用于处理数据
* @param {string} type - 数据类型标识符，决定是否使用历史数据
* @param {any} data_source_content - 历史数据
* @returns {any} - 处理后的数据对象
*/
export const interface_field_processing = (list: any, type: string, data_source_content: any) => {
// 初始化一个空对象来存储处理后的数据
const staging_data: any = {};
// 如果列表不一样0，则遍历列表处理每一项
if (!isEmpty(list)) {
list.forEach((item: any) => {
// 初始化值变量，根据不同的类型将被赋予不同的默认值
let value : number | string | Array<any> = '';
// 处理多选类型，默认值为空数组
if (item.type == 'checkbox' || (item.type == 'select' && +item?.config?.is_multiple == 1)) {
value = item?.config?.default ?? [];
} else if ((item.type == 'input' && item?.config?.type == 'number') || item.type == 'switch') {
// 处理数字或开关类型，默认值为0
value = Number(item?.config?.default ?? 0);
} else {
// 其他情况，默认值为空字符串
value = item?.config?.default ?? '';
}
// 如果是历史数据，且历史数据存在，则使用历史数据；否则使用默认值
if (type == 'old') {
staging_data[item.form_name] = data_source_content[item.form_name] == null ? value : data_source_content[item.form_name];
} else {
// 如果不是历史数据，直接使用默认值
staging_data[item.form_name] = value;
}
})
}
// 返回处理后的数据对象
return staging_data;
}
/**
* 根据指定的条件类型和值，判断字段值是否满足条件
* @param fieldValue 字段值，可以是任何类型
@ -269,6 +308,11 @@ export const get_indicator_location = (new_style: indicator_data) => {
type condition_data = { field: string, type: string, value: string };
export const get_is_eligible = (field_list: any[], condition: condition_data, props: any) => {
try {
// 条件加特殊标识，避免选择的时候出现重复的
let new_field = condition.field;
if (condition.field.includes('{|}')) {
new_field = condition.field.split('{|}')[0];
}
// 获取对应条件字段的字段数据
let option: any = {};
if (field_list) {
@ -279,16 +323,21 @@ export const get_is_eligible = (field_list: any[], condition: condition_data, pr
// 取出自定义组内部数据源参数的详细数据
const new_field_list = group_option_list?.data || [];
// 通过对应条件，筛选出对应的数据
option = new_field_list.find((item: any) => item.field === condition.field);
option = new_field_list.find((item: any) => item.field === new_field);
} else {
option = field_list.find((item: any) => item.field === condition.field);
option = field_list.find((item: any) => item.field === new_field);
}
}
// 获取到字段的真实数据, option的使用主要是为了获取的他的中间参数和前缀，后缀等拼接在一起
const field_value = custom_condition_data(condition.field || '', option || {}, props.sourceList, props.isCustom);
// 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
if (!isEmpty(condition.field) && !isEmpty(condition.type) && props.isDisplayPanel) {
return custom_condition_judg(field_value, condition.type, condition.value);
// 找不到对应的字段，就直接返回为成功，条件不存在
if (!isEmpty(option)) {
// 获取到字段的真实数据, option的使用主要是为了获取的他的中间参数和前缀，后缀等拼接在一起
const field_value = custom_condition_data(new_field || '', option || {}, props.sourceList, props.isCustom);
// 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
if (!isEmpty(new_field) && !isEmpty(condition.type) && props.isDisplayPanel) {
return custom_condition_judg(field_value, condition.type, condition.value);
} else {
return true;
}
} else {
return true;
}