+
@@ -89,6 +99,7 @@
import { cloneDeep, isEmpty } from 'lodash';
import { get_math } from '@/utils';
import { text_com_data, img_com_data, line_com_data, icon_com_data, panel_com_data, isRectangleIntersecting } from "./index-default";
+import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
// 删除
const app = getCurrentInstance();
//#region 传递参数和传出数据的处理
@@ -139,6 +150,15 @@ const url_computer = (name: string) => {
return new_url;
};
//#endregion
+//#region 左侧处理逻辑
+const select_index = ref(null);
+// 任何行动都会触发
+const on_sort = (item: SortableEvent) => {
+ let index = item?.newIndex || 0;
+ // 设置对应的位置为显示
+ set_show_tabs(index);
+};
+//#endregion
//#region 中间区域的处理逻辑
const diy_data = toRef(props.list);
@@ -151,37 +171,41 @@ const diy_data = toRef(props.list);
// });
// 复制
-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 (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 (index) {
+ 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;
+ }
+ set_show_tabs(new_index);
+ } else {
+ emits('rightUpdate', {});
}
- set_show_tabs(new_index);
- } else {
- emits('rightUpdate', {});
- }
- });
+ });
+ }
};
// 获取当前传递过来的index对应的diy_data中的数据
const get_diy_index_data = (index: number) => {
@@ -193,11 +217,31 @@ const set_show_tabs = (index: number) => {
// 先将全部的设置为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 +255,7 @@ const cancel = () => {
diy_data.value.forEach((item) => {
item.show_tabs = '0';
});
+ select_index.value = null;
emits('rightUpdate', {});
};
//#endregion
@@ -387,6 +432,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-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) => ({