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

新增自定义组内容

v1.2.0
于肖磊 2024-12-25 11:58:33 +08:00
parent 5a70790f5d
commit 1a0623d6e3
5 changed files with 119 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
View File

@ -12,31 +12,23 @@
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">自定义设置</div>
<div class="mb-20">自定义设置</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-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form.data_content"></tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<model-custom-styles :value="form.data_style" :content="form.data_content"></model-custom-styles>
</el-tab-pane>
</el-tabs>
</el-form>
</div>
</template>
<script setup lang="ts">
import { location_compute } from '@/utils';
import { pick, cloneDeep } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -54,20 +46,13 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { diy_data } = toRefs(state);
const form = ref(diy_data.value.com_data);
const tabs_name = 'content';
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']));
const { custom_list, com_width, custom_height } = form.value;
emit('custom_edit', diy_data.value.id, custom_list, com_width, custom_height);
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {

42
src/components/model-custom/components/custom-config/index.vue
View File

@ -2,7 +2,7 @@
<Dialog v-model:visible="dialogVisible" @accomplish="accomplish">
<div class="flex-row h w">
<!-- 左侧和中间区域 -->
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="center_width" :source-list="sourceList" :options="options" :is-custom="isCustom" :show-data="showData" :list="customList" @right-update="right_update"></DragIndex>
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="center_width" :config-type="configType" :source-list="sourceList" :options="options" :is-custom="isCustom" :show-data="showData" :list="customList" @right-update="right_update"></DragIndex>
<!-- 右侧配置区域 -->
<div class="settings">
<template v-if="diy_data.key === 'img'">
@ -20,7 +20,7 @@
<template v-else-if="diy_data.key == 'panel'">
<model-panel-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-panel-style>
</template>
<template v-else-if="diy_data.key == 'custom-group'">
<template v-else-if="diy_data.key == 'custom-group' && configType == 'custom'">
<model-custom-group-style :key="key" v-model:height="center_height" :options="options" :value="diy_data" @custom_edit="custom_edit"></model-custom-group-style>
</template>
<template v-else>
@ -36,6 +36,10 @@
import Dialog from '@/components/model-custom/components/dialog.vue';
import DragIndex from '@/components/model-custom/components/index.vue';
const props = defineProps({
configType: {
type: String,
default: 'custom',
},
dragkey: {
type: String,
default: '',
@ -56,11 +60,17 @@ const props = defineProps({
type: Object,
default: () => ({ data_key: 'id', data_name: 'name' }),
},
customId: {
type: String,
default: '',
},
customList: {
type: Array<any>,
default: () => [],
},
})
});
// 自定义组的父组件数据
const custom_father_list = defineModel('fatherList', { type: Array, default: () => [] });
// 中间区域的宽高
const center_width = defineModel('width', { type: Number, default: 390 });
const center_height = defineModel('height', { type: Number, default: 0 });
@ -85,18 +95,36 @@ const right_update = (item: any) => {
// 生成随机id
key.value = Math.random().toString(36).substring(2);
};
const draglist = ref<diy_data | null>(null);
const emits = defineEmits(['accomplish', 'custom_edit']);
// 点击完成按钮
const accomplish = () => {
// 如果没有数据，直接返回
if (!draglist.value) {
return;
} else {
emits('accomplish', draglist.value.diy_data);
// 如果是自定点击完成，需要将数据传递给父组件
if (props.configType == 'custom') {
emits('accomplish', props.configType, draglist.value.diy_data);
} else {
// 如果是自定义组点击完成，需要将值赋值给对应的父组件数据中，再将完整的数据渲染出来
custom_father_list.value.forEach((item: any) => {
if (item.id == props.customId) {
item.com_data.custom_height = center_height.value;
item.com_data.custom_list = draglist.value?.diy_data || [];
}
});
emits('accomplish', 'custom-group', custom_father_list.value);
}
}
};
const custom_edit = (list: diy, height: number) => {
emits('custom_edit', list, height);
// 自定义组编辑
const custom_edit = (id: string, list: diy, width: number, height: number) => {
let father_list : any = [];
if (props.configType == 'custom') {
father_list = draglist.value?.diy_data || [];
}
emits('custom_edit', 'custom-group', id, father_list, list, width, height);
};
</script>

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

@ -1,3 +1,4 @@
import defaultCustom from '@/config/const/custom';
// 文本的默认值
const text_com_data = {
com_width: 150,
@ -174,7 +175,19 @@ const panel_com_data = {
}
const custom_group_com_data = {
com_width: 100,
com_height: 100,
staging_height: 100,
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
direction: '90deg',
custom_list: [],
custom_height: 100, // 自定义高度
data_content: {
},
data_style: {
...defaultCustom
}
}
// 判断两个矩形是否有交集或者被包裹
export const isRectangleIntersecting = (rect1: react1, rect2: react1) => {

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

@ -5,7 +5,7 @@
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(com, i) in components" :key="i" :title="com.title" :name="com.key">
<div class="component flex-row flex-wrap">
<div v-for="item in com.item" :key="item.key" class="item">
<div v-for="item in com.item.filter(item => item.is_show)" :key="item.key" class="item">
<div class="siderbar-item flex-col jc-c align-c gap-4 draggable" draggable="true" @dragstart="dragStart(item, $event)" @dragend="dragEnd">
<img class="img radius-xs" :src="url_computer(item.key)" />
<div>{{ item.name }}</div>
@ -118,6 +118,7 @@ const app = getCurrentInstance();
//#region 传递参数和传出数据的处理
const emits = defineEmits(['rightUpdate']);
interface Props {
configType: string;
list: diy_content[];
sourceList: object;
isCustom: boolean;
@ -136,36 +137,42 @@ const components = reactive([
{
key: 'text',
name: '文本',
is_show: true,
new_name: '',
com_data: defaultComData.text_com_data
},
{
key: 'img',
name: '图片',
is_show: true,
new_name: '',
com_data: defaultComData.img_com_data,
},
{
key: 'auxiliary-line',
name: '线条',
is_show: true,
new_name: '',
com_data: defaultComData.line_com_data,
},
{
key: 'icon',
name: '图标',
is_show: true,
new_name: '',
com_data: defaultComData.icon_com_data,
},
{
key: 'panel',
name: '面板',
is_show: true,
new_name: '',
com_data: defaultComData.panel_com_data,
},
{
key: 'custom-group',
name: '自定义组',
is_show: props.configType == 'custom' ? true : false,
new_name: '',
com_data: defaultComData.custom_group_com_data,
},
@ -195,8 +202,10 @@ const on_sort = (item: SortableEvent) => {
};
//#endregion
//#region 中间区域的处理逻辑
const diy_data = toRef(props.list);
const diy_data = ref<any[]>([]);
watch(props.list, (newVal) => {
diy_data.value = newVal;
}, {immediate: true, deep: true});
// 因为容器变更的话，需要重新计算高度，所以不能默认选中第一个
// onMounted(() => {
// // 如果默认不等于空的话，则默认选中第一个

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

@ -59,9 +59,9 @@
</card-container>
</el-form>
<!-- 自定义内容处理 -->
<custom-config v-model:visible="dialogVisible" v-model:width="custom_width" v-model:height="center_height" :dragkey="dragkey" :options="model_data_source" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-list="custom_list" @accomplish="accomplish"></custom-config>
<custom-config :key="dragkey + 'custom'" v-model:visible="dialogVisible" v-model:width="custom_width" v-model:height="center_height" :dragkey="dragkey + 'custom'" :options="model_data_source" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-list="custom_list" @accomplish="accomplish" @custom_edit="custom_edit"></custom-config>
<!-- 自定义内部数据内容处理 -->
<custom-config v-model:visible="dialogVisible" v-model:width="custom_width" v-model:height="center_height" :dragkey="dragkey" :options="model_data_source" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-list="custom_list" @accomplish="accomplish"></custom-config>
<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="model_data_source" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :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" @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>
</div>
@ -75,6 +75,10 @@ import { get_math } from '@/utils';
const data_source_store = DataSourceStore();
const props = defineProps({
configType: {
type: String,
default: 'custom',
},
value: {
type: Object,
default: () => {},
@ -95,36 +99,62 @@ const custom_width = computed(() => {
return center_width.value;
}
})
// 外层自定义的弹出框
const dialogVisible = ref(false);
// 自定义组的弹出框
const dialogVisible_group = ref(false);
const form = ref(props.value);
// 外层的内容
let custom_list = reactive([]);
// 外层自定义的弹出框
const dragkey = ref('');
const dialogVisible = ref(false);
const custom_list = ref([]);
const center_height = ref(0);
// 自定义组的内容
let custom_group_list = reactive([]);
// 自定义组的弹出框
const dialogVisible_group = ref(false);
// 自定义组数据
const custom_group_list = ref([]);
// 自定义组的默认宽高
const center_group_height = ref(0);
const dragkey = ref('');
const center_group_width = ref(0);
// 自定义组的id
const center_group_id = ref('');
// 自定义组的父级数据
const custom_group_father_list = ref([]);
// 自定义组的弹出框的key值
const drag_group_key = ref('');
// 自定义编辑的逻辑
const custom_edit = (type: string, list?: any, height?: number) => {
dragkey.value = Math.random().toString(36).substring(2);
const custom_edit = (type: string, id?: string, father_list?: any, list?: any, width?: number, height?: number) => {
// 如果是自定义点击编辑
if (type == 'custom') {
dragkey.value = Math.random().toString(36).substring(2);
dialogVisible.value = true;
custom_list = cloneDeep(form.value.custom_list);
// 主自定义的数据
custom_list.value = cloneDeep(form.value.custom_list);
// 主自定义的高度
center_height.value = cloneDeep(form.value.height);
} else {
drag_group_key.value = Math.random().toString(36).substring(2);
// 自定义组的弹出框
dialogVisible_group.value = true;
custom_group_list = list;
// 自定义组数据
custom_group_list.value = list;
// 自定义组的父级数据，因为父级没有点击完成数据不会记录，所以需要子级点击完成的时候传递过来
custom_group_father_list.value = father_list;
// 自定义组的id，避免多个组的赋值失败
center_group_id.value = id || '';
// 自定义组的默认宽高
center_group_width.value = width || 0;
center_group_height.value = height || 0;
}
};
// 点击完成的处理逻辑
const accomplish = (list: any) => {
form.value.custom_list = list;
form.value.height = center_height.value;
const accomplish = (type: string, list: any) => {
// 如果是自定义点击完成，就更新主数据
if (type == 'custom') {
form.value.custom_list = list;
form.value.height = center_height.value;
} else {
// 自定义组点击完成，更新自定义内的数据
custom_list.value = list;
}
};
//#endregion
// 弹出框里的内容