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

默认数据处理

v1.1.0
于肖磊 2024-11-29 14:15:32 +08:00
parent c2794b337a
commit 028bd70576
8 changed files with 108 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,11 @@
<el-form-item label="链接">
<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-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>
<el-form-item label="背景颜色">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
@ -115,6 +120,15 @@ const location_y_change = (val: number) => {
diy_data.value.location.staging_y = val;
}
// 数据链接字段切换时，更新另外一个数据
const img_link_change = (key: string) => {
if (key == '2') {
form.value.link = {};
} else {
form.value.data_source_link = '';
}
}
watch(
diy_data,
(val) => {

96
src/components/common/filter-form/index.vue
View File

@ -1,13 +1,13 @@
<template>
<div :class="props.direction == 'vertical' ? 'flex-col gap-x-18' : 'flex-row gap-y-20 jc-e'">
<div v-for="(item, index) in props.filterData" :key="index" class="filter-style flex-row gap-12">
<div v-if="!isEmpty(item.title) && Number(props.titleWidth) > 0" class="title text-line-1" :style="`width: ${ props.titleWidth }px;`">{{ item.title }}</div>
<div class="w h filter-right">
<div v-if="!isEmpty(item.title)" :class="['title text-line-1', props.direction == 'vertical' ? '' : 'horizontal-title']" :style="`width: ${ Number(props.titleWidth) > 0 ? props.titleWidth + 'px;' : '100%' }`">{{ item.title }}</div>
<div class="w h flex-1">
<template v-if="item.type == 'select'">
<template v-if="item.config.data_level > 1">
<template v-if="item.config.is_level.toString() == '1'">
<div class="flex-row gap-10">
<el-cascader v-model="new_dataInterface[item.form_name]" :placeholder="placeholder_config(item, 'select')" clearable class="w h" collapse-tags popper-class="filter-form-cascader" placement="left" :props="{ 'expandTrigger': 'hover', 'multiple': item.config.is_multiple == '1', 'checkStrictly': true, 'emitPath': false, 'value': item.data_key, 'label': item.data_name, 'children': item.config.children }" :options="selectData(item.data, item.const_key)" />
<template v-if="item.config.is_multiple == '1'">
<el-cascader v-model="new_dataInterface[item.form_name]" :placeholder="placeholder_config(item, 'select')" clearable class="w h" collapse-tags popper-class="filter-form-cascader" placement="left" :props="{ 'expandTrigger': 'hover', 'multiple': item.config.is_multiple.toString() == '1', 'checkStrictly': true, 'emitPath': false, 'value': item.data_key, 'label': item.data_name, 'children': item.config.children }" :options="selectData(item)" />
<template v-if="item.config.is_multiple.toString() == '1'">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="父级选中包含所有子级" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
@ -15,8 +15,8 @@
</div>
</template>
<template v-else>
<el-select v-model="new_dataInterface[item.form_name]" :multiple="item.config.is_multiple == '1'" collapse-tags :placeholder="placeholder_config(item, 'select')" clearable>
<el-option v-for="item1 in selectData(item.data, item.const_key)" :key="item1[item.data_key]" :label="item1[item.data_name]" :value="item1[item.data_key]" />
<el-select v-model="new_dataInterface[item.form_name]" :multiple="item.config.is_multiple.toString() == '1'" collapse-tags :placeholder="placeholder_config(item, 'select')" clearable>
<el-option v-for="item1 in selectData(item)" :key="item1[item.data_key]" :label="item1[item.data_name]" :value="item1[item.data_key]" />
</el-select>
</template>
</template>
@ -33,12 +33,12 @@
</template>
<template v-else-if="item.type =='radio'">
<el-radio-group v-model="new_dataInterface[item.form_name]">
<el-radio v-for="item1 in selectData(item.data, item.const_key)" :key="item1[item.data_key]" :value="item1[item.data_key]">{{ item1[item.data_name] }}</el-radio>
<el-radio v-for="item1 in selectData(item)" :key="item1[item.data_key]" :value="item1[item.data_key]">{{ item1[item.data_name] }}</el-radio>
</el-radio-group>
</template>
<template v-else-if="item.type =='checkbox'">
<el-checkbox-group v-model="new_dataInterface[item.form_name]">
<el-checkbox v-for="item1 in selectData(item.data, item.const_key)" :key="item1[item.data_key]" :value="item1[item.data_key]">{{ item1[item.data_name] }}</el-checkbox>
<el-checkbox v-for="item1 in selectData(item)" :key="item1[item.data_key]" :value="item1[item.data_key]">{{ item1[item.data_name] }}</el-checkbox>
</el-checkbox-group>
</template>
</div>
@ -79,7 +79,48 @@ const props = defineProps({
default: 0,
}
});
const new_dataInterface = computed(() => props.dataInterface );
const new_dataInterface = computed(() => props.dataInterface);
// 通过类型判断从哪里取下拉框的值
const selectData = (item: any) => {
// 获取到筛选框的默认数据
let options_list = [];
if (!isEmpty(item.data)) {
options_list = item.data;
} else {
options_list = !isEmpty((common_store.common as any)[item.const_key]) ? (common_store.common as any)[item.const_key] : [];
}
return options_list;
}
onBeforeMount(() => {
props.filterData.forEach((item: any) => {
const options_list = selectData(item);
// 获取到默认值
const old_defalut = new_dataInterface.value[item.form_name];
// 默认值不为空的时候，进行处理查看当前数据是否存在默认值数据
if (old_defalut && ['select', 'radio', 'checkout'].includes(item.type)) {
if (item.type == 'select' && item.config.is_level && item.config.is_level.toString() == '1') { // 如果是级联的效果
const result = contains_value(options_list, item, [], item.config.children);
new_dataInterface.value[item.form_name] = result;
} else if (item.config.is_multiple && item.config.is_multiple.toString() == '1') { // 多选的处理逻辑
// 从中取出跟默认数据的key相同的数据
const list = options_list.filter((item1: any) => { old_defalut.length > 0 ? old_defalut.includes(item1[item.data_key]) : item1[item.data_key] == old_defalut });
if (list.length > 0) {
new_dataInterface.value[item.form_name] = list.map((item1: any) => { return item1[item.data_key] });
} else {
new_dataInterface.value[item.form_name] = [];
}
} else {
// 单选的处理逻辑
const list = options_list.filter((item1: any) => { item1[item.data_key] == old_defalut });
if (list.length > 0) {
new_dataInterface.value[item.form_name] = list[0][item.data_key];
} else {
new_dataInterface.value[item.form_name] = '';
}
}
}
})
})
// 监听新数据的变化，将对应的数据传递给父组件，用于父组件调用接口
const emit = defineEmits(['form-change']);
watch(() => new_dataInterface.value, (val) => {
@ -95,26 +136,37 @@ const placeholder_config = computed(() => {
}
}
});
// 通过类型判断从哪里取下拉框的值
const selectData = computed(() => {
return (data: any, type: string) => {
if (!isEmpty(data)) {
return data;
} else {
return !isEmpty((common_store.common as any)[type]) ? (common_store.common as any)[type] : [];
}
// 递归判断数据的处理
const contains_value = (list: any[], config: any, result: any[], children?: string) => {
if (list.length > 0) {
const old_defalut = new_dataInterface.value[config.form_name];
list.forEach((item: any) => {
if (config.config.is_multiple && config.config.is_multiple.toString() == '1') {
if ((old_defalut.length > 0 && old_defalut.includes(item[config.data_key])) || item[config.data_key] == old_defalut) {
result.push(item[config.data_key]);
}
} else {
if (item[config.data_key] == old_defalut) {
result.push(item[config.data_key]);
}
}
if (children && item[children]) {
contains_value(item[children], config, result, children);
}
});
}
});
return result;
}
</script>
<style lang="scss" scoped>
.filter-style {
min-height: 3.2rem;
}
.filter-right {
min-width: 20rem;
}
.horizontal-title {
flex-basis: max-content;
}
.title {
font-size: 1.2rem;
line-height: 3.2rem;

2
src/components/model-article-list/model-article-list-content.vue
View File

@ -200,7 +200,7 @@ const url_value_dialog_call_back = (item: any[]) => {
form.value.data_list[data_list_replace_index.value] = {
id: get_math(),
new_title: '',
new_cover: [],
new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
data: item[0],
};
}

2
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -279,7 +279,7 @@ const url_value_dialog_call_back = (item: any[]) => {
form.tabs_list[article_index.value].data_list[data_list_replace_index.value] = {
id: get_math(),
new_title: '',
new_cover: [],
new_cover: form.tabs_list[article_index.value].data_list[data_list_replace_index.value]?.new_cover || [],
data: item[0],
};
}

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

@ -5,7 +5,7 @@
<div class="tc size-16 fw">{{ config?.popup_title || '' }}</div>
</div>
</template>
<div class="flex-col gap-20 w h pa-20">
<div class="flex-col gap-20 w h pa-20 oh">
<filter-form :filter-data="config.filter_form_config" direction="horizontal" :data-interface="default_data" @form-change="filter_form_change"></filter-form>
<table-config v-loading="loading" :table-data="tableData" :multiple="multiple" :table-column-list="config.header" @select="table_select"></table-config>
<div class="flex-row jc-e">

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

@ -290,9 +290,9 @@ const changeDataSource = (key: string) => {
// 根据不同的类型，初始化不同的数据, 并将对象处理成对应的值
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') { // 多选
if (item.type == 'checkbox' || (item.type == 'select' && item.config.is_multiple == '1')) { // 多选
value = item.config.default ? item.config.default : [];
} else if (item.type == 'input' && item.config.type == 'number') { // 数字
} else if (item.type == 'input' || item.config.type == 'number') { // 数字
value = item.config.default ? item.config.default : 0;
} else if (item.type == 'switch') {
value = item.config.default ? item.config.default : "0";
@ -316,12 +316,17 @@ const data_list_replace = (index: number) => {
url_value_multiple_bool.value = false;
url_value_dialog_visible.value = true;
};
// 新增数据
const add = () => {
// 添加的时候，index为-1
data_list_replace_index.value = -1;
// 添加是单选还是多选由后台配置决定
url_value_multiple_bool.value = default_type_data.value.appoint_config.is_multiple.toString() == '1' ? true : false;
url_value_dialog_visible.value = true;
if (!isEmpty(default_type_data.value?.appoint_config?.data_url)) {
// 添加的时候，index为-1
data_list_replace_index.value = -1;
// 添加是单选还是多选由后台配置决定
url_value_multiple_bool.value = default_type_data.value.appoint_config.is_multiple.toString() == '1' ? true : false;
url_value_dialog_visible.value = true;
} else {
ElMessage.error('请先配置数据源地址');
}
};
// 拖拽更新之后，更新数据
const data_list_sort = (new_list: any) => {
@ -345,7 +350,7 @@ const url_value_dialog_call_back = (item: any[]) => {
} else {
form.value.data_source_content.data_list[data_list_replace_index.value] = {
id: get_math(),
new_cover: [],
new_cover: form.value.data_source_content.data_list[data_list_replace_index.value]?.new_cover || [],
new_title: '',
data: item[0],
};
@ -382,6 +387,8 @@ const get_auto_data = () => {
// 清空数据, 避免接口报错等显示的还是老数据
form.value.data_source_content.data_auto_list = [];
});
} else if (!isEmpty(default_type_data.value) && !isEmpty(default_type_data.value.filter_config) && isEmpty(default_type_data.value.filter_config.data_url)) {
ElMessage.error('请先配置数据源地址');
} else {
// 清空数据, 避免接口报错等显示的还是老数据
form.value.data_source_content.data_auto_list = [];

2
src/components/model-goods-list/model-goods-list-content.vue
View File

@ -148,7 +148,7 @@ const url_value_dialog_call_back = (item: any[]) => {
} else {
form.value.data_list[data_list_replace_index.value] = {
id: get_math(),
new_cover: [],
new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
new_title: '',
data: item[0],
};

2
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -236,7 +236,7 @@ const url_value_dialog_call_back = (item: any[]) => {
} else {
form.value.tabs_list[click_index].data_list[data_list_replace_index.value] = {
id: get_math(),
new_cover: [],
new_cover: form.value.tabs_list[click_index].data_list[data_list_replace_index.value]?.new_cover || [],
new_title: '',
data: item[0],
};