+
-
+
-
-
-
-
+
+
(null);
+// 任何行动都会触发
+const on_sort = (item: SortableEvent) => {
+ let index = item?.newIndex || 0;
+ // 设置对应的位置为显示
+ set_show_tabs(index);
+};
+//#endregion
//#region 中间区域的处理逻辑
const diy_data = toRef(props.list);
@@ -149,55 +194,188 @@ const diy_data = toRef(props.list);
// on_choose(0, false);
// }
// });
+onMounted(() => {
+ // 监听点击事件
+ document.addEventListener('click', outerClick);
+});
+onUnmounted(() => {
+ // 移除监听事件
+ document.removeEventListener('click', outerClick);
+});
+const edit_index = ref(-1);
+const on_edit = (index: number) => {
+ if (edit_index.value === index) {
+ edit_close_processing(index);
+ edit_index.value = -1;
+ } else {
+ edit_index.value = index;
+ edit_processing(index);
+ }
+};
+// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
+const outerClick = (e: any) => {
+ if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
+ edit_close_processing(edit_index.value);
+ edit_index.value = -1;
+ }
+};
+const double_click = (index: number) => {
+ edit_index.value = index;
+ edit_processing(index);
+};
+// 编辑时的数据处理
+const edit_processing = (index: number) => {
+ const list = diy_data.value[index];
+ if (!isEmpty(list) && isEmpty(list.new_name)) {
+ list.new_name = list.name;
+ }
+};
+//编辑关闭前的处理
+const edit_close_processing = (index: number) => {
+ const list = diy_data.value[index];
+ if (!isEmpty(list) && !isEmpty(list.new_name) && list.new_name === list.name) {
+ list.new_name = '';
+ }
+};
// 复制
-const copy = (index: number) => {
- // 获取当前数据, 复制的时候id更换一下
- const new_data = {
- ...cloneDeep(get_diy_index_data(index)),
- id: get_math(),
- };
- // 在当前位置下插入数据
- diy_data.value.splice(index, 0, new_data);
- set_show_tabs(index + 1);
+const copy = (index: null | number) => {
+ if (typeof index === 'number' && !isNaN(index)) {
+ // 获取当前数据, 复制的时候id更换一下
+ const new_data = {
+ ...cloneDeep(get_diy_index_data(index)),
+ id: get_math(),
+ };
+ // 在当前位置下插入数据
+ diy_data.value.splice(index, 0, new_data);
+ set_show_tabs(index + 1);
+ }
};
// 删除
-const del = (index: number) => {
- app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
- ElMessage({
- type: 'success',
- message: '删除成功!',
- });
- // 调用删除接口，然后，更新数据
- diy_data.value.splice(index, 1);
- if (diy_data.value.length > 0) {
- let new_index: number = index;
- // 删除的时候如果大于0，则显示上边的数据
- if (index > 0) {
- new_index = new_index - 1;
+const del = (index: null | number) => {
+ if (typeof index === 'number' && !isNaN(index)) {
+ app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
+ ElMessage({
+ type: 'success',
+ message: '删除成功!',
+ });
+ const show_tabs_index = diy_data.value.findIndex((item: any) => item.show_tabs == '1');
+ // 删除的是当前的这个数据
+ if (show_tabs_index == index) {
+ // 调用删除接口，然后，更新数据
+ diy_data.value.splice(index, 1);
+ if (diy_data.value.length > 0) {
+ let new_index: number = index;
+ // 删除的时候如果大于0，则显示上边的数据
+ if (index > 0) {
+ new_index = new_index - 1;
+ }
+ set_show_tabs(new_index);
+ } else {
+ emits('rightUpdate', {});
+ }
+ } else {
+ diy_data.value.splice(index, 1);
}
- set_show_tabs(new_index);
- } else {
- emits('rightUpdate', {});
- }
- });
+ });
+ }
};
+//前置一层 + 1
+const previous_layer = (index: number) => {
+ if (diy_data.value.length > 0) {
+ const old_z_index = cloneDeep(diy_data.value[index].com_data.z_index);
+ // 数据排序
+ const list = cloneDeep(diy_data.value).sort((a, b) => a.com_data.z_index - b.com_data.z_index);
+ // 找到当前元素的索引
+ const regular_index = list.findIndex(item => item.com_data.z_index == old_z_index);
+ if (regular_index + 1 <= diy_data.value.length - 1) {
+ // 取出上一个的值
+ const new_z_index = list[regular_index + 1].com_data.z_index;
+ // 替换原始数组中的值
+ const new_regular_index_1 = diy_data.value.findIndex(item => item.com_data.z_index == old_z_index);
+ const new_regular_index_2 = diy_data.value.findIndex(item => item.com_data.z_index == new_z_index);
+ // 数据互换
+ diy_data.value[new_regular_index_1].com_data.z_index = new_z_index;
+ diy_data.value[new_regular_index_2].com_data.z_index = old_z_index;
+ }
+ }
+}
+
+//后置一层 - 1
+const underlying_layer = (index: number) => {
+ if (diy_data.value.length > 0) {
+ const old_z_index = cloneDeep(diy_data.value[index].com_data.z_index);
+ // 数据排序
+ const list = cloneDeep(diy_data.value).sort((a, b) => a.com_data.z_index - b.com_data.z_index);
+ // 找到当前元素的索引
+ const regular_index = list.findIndex(item => item.com_data.z_index == old_z_index);
+ if (regular_index - 1 >= 0) {
+ // 取出上一个的值
+ const new_z_index = list[regular_index - 1].com_data.z_index;
+ // 替换原始数组中的值
+ const new_regular_index_1 = diy_data.value.findIndex(item => item.com_data.z_index == old_z_index);
+ const new_regular_index_2 = diy_data.value.findIndex(item => item.com_data.z_index == new_z_index);
+ // 数据互换
+ diy_data.value[new_regular_index_1].com_data.z_index = new_z_index;
+ diy_data.value[new_regular_index_2].com_data.z_index = old_z_index;
+ }
+ }
+}
+//组件置顶
+const top_up = (index: number) => {
+ if (!isEmpty(diy_data.value[index])) {
+ const new_z_index = top_z_index.value + 1;
+ diy_data.value[index].com_data.z_index = new_z_index;
+ top_z_index.value = new_z_index;
+ }
+}
+
+//组件置底
+const bottom_up = (index: number) => {
+ if (!isEmpty(diy_data.value[index])) {
+ const new_z_index = z_index.value - 1;
+ diy_data.value[index].com_data.z_index = new_z_index;
+ z_index.value = new_z_index;
+ }
+}
+
// 获取当前传递过来的index对应的diy_data中的数据
const get_diy_index_data = (index: number) => {
return (diy_data.value)[index.toString()];
};
// 设置当前选中的是那个
const set_show_tabs = (index: number) => {
+ is_show_component_line.value = false;
diy_data.value.forEach((item, for_index) => {
// 先将全部的设置为false,再将当前选中的设置为true
item.show_tabs = '0';
if (for_index == index) {
+ select_index.value = for_index;
item.show_tabs = '1';
+ scroll();
emits('rightUpdate', item);
}
});
};
+// 左边已选组件的滚动效果
+const left_scrollTop = ref(null);
+const left_activeCard = ref(null);
+// 滚动到指定位置
+const scroll = () => {
+ nextTick(() => {
+ // 左边已选组件的滚动效果
+ left_activeCard.value = document.querySelector('.drawer-custom-drag-bg');
+ if (left_activeCard.value) {
+ // 获取选中内容的位置
+ const left_scrollY = left_activeCard.value.offsetTop;
+ if (left_scrollTop.value) {
+ // 选中的滚动到指定位置
+ left_scrollTop.value.scrollTo({ top: left_scrollY - 200, behavior: 'smooth' });
+ }
+ }
+ });
+};
// 选中和鼠标按下时候的效果
const on_choose = (index: number, show_tabs: string) => {
// 如果已经选中了, 设置为不可再次触发事件
@@ -211,6 +389,7 @@ const cancel = () => {
diy_data.value.forEach((item) => {
item.show_tabs = '0';
});
+ select_index.value = null;
emits('rightUpdate', {});
};
//#endregion
@@ -219,14 +398,17 @@ const center_height = defineModel('height', { type: Number, default: 0 });
const drag_area_height = computed(() => center_height.value + 'px');
const draggable_container = ref(true);
let data = reactive([]);
-
+// 最低的层级
+const z_index = ref(0);
+// 最高的层级
+const top_z_index = ref(0);
watch(() => center_height.value, () => {
data = diy_data.value;
// 从 DOM 中删除组件
draggable_container.value = false;
nextTick(() => {
// 在 DOM 中添加组件
- diy_data.value = data.map((item) => ({
+ diy_data.value = data.map((item, index) => ({
...item,
show_tabs: '0',
location: {
@@ -238,9 +420,27 @@ watch(() => center_height.value, () => {
},
com_data: {
...item.com_data,
+ z_index: typeof item.com_data.z_index === 'number' && !isNaN(item.com_data.z_index) ? item.com_data.z_index : 0,
com_height: item.com_data.staging_height,
},
}));
+ if (diy_data.value.length > 0) {
+ const list = diy_data.value.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
+ // 将z-index重置为初始效果
+ let list_z_index = -1;
+ // 设置默认值
+ list.forEach((item) => {
+ if (item.com_data.z_index == 0) {
+ const new_z_index = list_z_index + 1;
+ item.com_data.z_index = new_z_index;
+ list_z_index = new_z_index;
+ }
+ });
+ // 获取更新后的数据
+ const new_list = list.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
+ z_index.value = new_list[0].com_data.z_index || 0;
+ top_z_index.value = new_list[new_list.length - 1].com_data.z_index || 0;
+ }
// 容器高度变化时，组件不绑定右侧数据
emits('rightUpdate', {});
draggable_container.value = true;
@@ -250,6 +450,7 @@ watch(() => center_height.value, () => {
//#region 左侧拖拽过来的处理
let draggedItem = ref({});
const dragStart = (item: any, event: any) => {
+ const new_z_index = top_z_index.value + 1;
// 初始化拖拽的数据
draggedItem.value = {
name: item.name,
@@ -260,8 +461,12 @@ const dragStart = (item: any, event: any) => {
id: get_math(),
key: item.key,
is_hot: '0',
- com_data: cloneDeep(item.com_data),
+ com_data: {
+ ...cloneDeep(item.com_data),
+ z_index: new_z_index,
+ },
};
+ top_z_index.value = new_z_index;
// 拖拽的时候清空热区
hot_list.data = [];
};
@@ -387,6 +592,7 @@ const end_drag = (event: MouseEvent) => {
diy_data.value.forEach((item: any) => {
item.show_tabs = '0';
});
+ select_index.value = null;
emits('rightUpdate', {});
}
rect_start.value = { x: 0, y: 0, width: 0, height: 0 };
diff --git a/src/components/model-custom/components/right-side-operation/index.vue b/src/components/model-custom/components/right-side-operation/index.vue
new file mode 100644
index 00000000..03bbd88f
--- /dev/null
+++ b/src/components/model-custom/components/right-side-operation/index.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index edf1b2bf..5bc1952d 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -2,7 +2,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
([]);
-const is_show_more = ref(true);
+const is_show_more = ref(false);
const processing_data = (key: string) => {
const list = options.value.filter((item) => item.type == key);
if (list.length > 0) {
@@ -159,6 +159,19 @@ const accomplish = () => {
if (!draglist.value) {
return;
} else {
+ // 规整数据逻辑
+ const list = draglist.value.diy_data.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
+ // 将z-index重置为初始效果
+ let z_index = 0;
+ if (list.length > 0) {
+ list.forEach((item) => {
+ if (item.com_data.z_index < 0) {
+ const new_z_index = z_index - 1;
+ item.com_data.z_index = new_z_index;
+ z_index = new_z_index;
+ }
+ });
+ }
form.custom_list = draglist.value.diy_data;
}
form.height = center_height.value;
diff --git a/src/components/model-goods-list/index.vue b/src/components/model-goods-list/index.vue
index 3b5ac937..b17f78c1 100644
--- a/src/components/model-goods-list/index.vue
+++ b/src/components/model-goods-list/index.vue
@@ -265,13 +265,13 @@ const get_products = () => {
};
// 取出监听的数据
const watch_data = computed(() => {
- const { category_ids, brand, number, order_by_type, order_by_rule, data_type, data_list } = form.value;
- return { category_ids: category_ids, brand: brand, number: number, order_by_type: order_by_type, order_by_rule: order_by_rule, data_type: data_type, data_list: data_list };
+ const { category_ids, brand_ids, number, order_by_type, order_by_rule, data_type, data_list } = form.value;
+ return { category_ids: category_ids, brand_ids: brand_ids, number: number, order_by_type: order_by_type, order_by_rule: order_by_rule, data_type: data_type, data_list: data_list };
})
// 初始化的时候不执行, 监听数据变化
watch(() => watch_data.value, (val, oldVal) => {
// 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据
- if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
+ if ((JSON.stringify(val) !== JSON.stringify(oldVal)) || props.isCommonStyle) {
if (val.data_type == '0') {
if (!isEmpty(val.data_list)) {
list.value = cloneDeep(val.data_list).map((item: any) => ({
diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts
index dad9054e..956b29c7 100644
--- a/src/config/const/goods-list.ts
+++ b/src/config/const/goods-list.ts
@@ -76,7 +76,7 @@ const defaultProductList: DefaultProductList = {
is_shop_show: '1',
shop_type: 'text',
shop_button_text: '购买',
- shop_button_icon_class: '',
+ shop_button_icon_class: 'cart',
shop_button_effect: '0',
shop_button_size: '1',
},
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index 9add5985..1677bc35 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -94,7 +94,7 @@ const defaultProductList: DefaultProductList = {
is_price_solo: '1',
shop_type: 'text',
shop_button_text: '购买',
- shop_button_icon_class: '',
+ shop_button_icon_class: 'cart',
shop_button_effect: '0',
shop_button_size: '1',
},