-
+
![]()
([]);
+watch(props.list, (newVal) => {
+ diy_data.value = newVal;
+}, {immediate: true, deep: true});
// 因为容器变更的话，需要重新计算高度，所以不能默认选中第一个
// onMounted(() => {
// // 如果默认不等于空的话，则默认选中第一个
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 3a35ac15..1dbe9dae 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -59,9 +59,9 @@
-
@@ -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
// 弹出框里的内容
{{ item.name }}
@@ -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