From 0668d9e222802b373bc64166e73f438b49684f56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Mon, 14 Oct 2024 11:47:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E9=80=BB?= =?UTF-8?q?=E8=BE=91=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/icon/index.vue | 2 +- .../common/custom-module/model-text/index.vue | 1 - src/components/model-article-list/index.vue | 2 +- .../model-custom/components/index.scss | 28 ++++ .../model-custom/components/index.vue | 126 ++++++++++++------ src/components/model-goods-list/index.vue | 6 +- 6 files changed, 119 insertions(+), 46 deletions(-) diff --git a/src/components/base/icon/index.vue b/src/components/base/icon/index.vue index 1d1ed7a1..9fc94ccd 100644 --- a/src/components/base/icon/index.vue +++ b/src/components/base/icon/index.vue @@ -1,5 +1,5 @@ diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue index a17c8792..5c5f48e2 100644 --- a/src/components/common/custom-module/model-text/index.vue +++ b/src/components/common/custom-module/model-text/index.vue @@ -51,7 +51,6 @@ const text_title = computed(() => { }); const text_style = computed(() => { - console.log(form.text_size * props.scale); let style = `font-size: ${ form.text_size * props.scale }px;line-height: ${ form.text_size * props.scale}px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding, props.scale) };`; if (form.text_weight == 'italic') { style += `font-style: italic`; diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue index 1e96014c..c0eed159 100644 --- a/src/components/model-article-list/index.vue +++ b/src/components/model-article-list/index.vue @@ -179,7 +179,7 @@ watch( () => data_list_computer.value, (new_value, old_value) => { // 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据 - if (JSON.stringify(new_value) !== JSON.stringify(old_value)) { + if ((JSON.stringify(new_value) !== JSON.stringify(old_value)) || props.isCommonStyle) { if (new_value.data_type == '1') { get_auto_data_list(); } else { diff --git a/src/components/model-custom/components/index.scss b/src/components/model-custom/components/index.scss index 73b6ff02..98646f3c 100644 --- a/src/components/model-custom/components/index.scss +++ b/src/components/model-custom/components/index.scss @@ -248,4 +248,32 @@ .clear-selection { cursor: pointer; color: $cr-main; +} + +.drawer-container { + position: relative; + height: 100%; + overflow: hidden; + .drawer-custom-drag-bg { + background: #f2f8ff; + } + .drawer-drag-area { + height: 100%; + overflow-y: auto; + } + .drawer-drag { + cursor: move; + } + .drawer-drag:hover { + background: #f2f8ff; + .iconfont.icon-close-b { + display: block !important; + } + } + .iconfont.icon-close-b { + right: 1rem; + top: 1.4rem; + color: #8a8a8a; + cursor: pointer; + } } \ No newline at end of file diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue index 14f5ae51..bd3a2bd5 100644 --- a/src/components/model-custom/components/index.vue +++ b/src/components/model-custom/components/index.vue @@ -20,13 +20,23 @@ 组件高度 -
已选组件清除选中
-
-
-
{{ item.name }}
-
-
- +
+
已选组件清除选中
+
+ + + +
+ +
+
+
@@ -34,6 +44,10 @@
+
+ + +
@@ -41,12 +55,8 @@
- -
- - -
-
+ +
@@ -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) => ({