修改商品逻辑处理

src/components/base/icon/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color.indexOf('#') != -1 || props.color.indexOf('rgba') != -1 ? 'color:' + props.color + ';' : '') + styles" @click="onClick">
+    <i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color && (props.color.indexOf('#') != -1 || props.color.indexOf('rgba') != -1) ? 'color:' + props.color + ';' : '') + styles" @click="onClick">
         <slot></slot>
     </i>
 </template>

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`;

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 {

src/components/model-custom/components/index.scss

@@ -249,3 +249,31 @@
     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;
+    }
+}

src/components/model-custom/components/index.vue

@@ -20,13 +20,23 @@
             <slider v-model="center_height" :max="1000">组件高度</slider>
         </card-container>
         <card-container class="h selected">
-            <div class="mb-12 flex-row align-c jc-sb">已选组件<span class="clear-selection" @click="cancel">清除选中</span></div>
+            <div class="flex-col gap-10 drawer-container">
-            <div class="assembly">
+                <div class="flex-row align-c jc-sb">已选组件<span class="clear-selection" @click="cancel">清除选中</span></div>
-                <div v-if="!isEmpty(diy_data)" class="flex-row flex-wrap gap-10">
+                <div ref="left_scrollTop" class="drawer-drag-area">
-                    <div v-for="(item, index) in diy_data" :key="index" class="item flex jc-sb align-c size-14 cr-3" :class="{ 'item-active': item.show_tabs == '1' }" @click="on_choose(index, item.show_tabs)">{{ item.name }}<icon name="close" color="3" size="10" class="c-pointer" @click="del(index)"></icon></div>
+                    <VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" @sort="on_sort">
-                </div>
+                        <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col">
-                <div v-else class="w h flex jc-c align-c">
+                            <template v-if="!isEmpty(diy_data)">
-                    <no-data></no-data>
+                                <li v-for="(item, index) in diy_data" :key="index" :class="['flex-row ptb-12 plr-10 gap-y-8 re align-c drawer-drag', { 'drawer-custom-drag-bg': item.show_tabs == '1' }]" @click="on_choose(index, item.show_tabs)">
+                                    <el-icon class="iconfont icon-drag size-16 cr-d" />
+                                    <span class="size-12 cr-6">{{ item.name }}</span>
+                                    <el-icon class="iconfont icon-close-b size-16 abs" :style="[item.show_tabs == '1' ? '' : 'display:none']" @click.stop="del(index)" />
+                                </li>
+                            </template>
+                            <div v-else class="w h flex jc-c align-c">
+                                <no-data></no-data>
+                            </div>
+                        </TransitionGroup>
+                    </VueDraggable>
                 </div>
             </div>
         </card-container>
@@ -34,6 +44,10 @@
     <!-- 视图渲染 -->
     <div class="main">
         <div class="model-content">
+            <div class="plug-in-right" chosenClass="close">
+                <el-icon class="iconfont icon-del" @click.stop="del(select_index)" />
+                <el-icon class="iconfont icon-copy" @click.stop="copy(select_index)" />
+            </div>
             <!-- 拖拽区 -->
             <div class="model-drag">
                 <div class="model-wall">
@@ -41,12 +55,8 @@
                         <div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
                             <DraggableContainer v-if="draggable_container" :reference-line-visible="true" :disabled="false" reference-line-color="#ddd" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
                                 <!-- @mouseover="on_choose(index)" -->
-                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{ 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1'}" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
+                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{ 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1', 'z-index': item.com_data.bottom_up == '1' ? 0 : 1}" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
-                                    <div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
+                                    <div :class="['main-content', { 'plug-in-border': item.show_tabs == '1' }]">
-                                        <el-icon class="iconfont icon-del" @click.stop="del(index)" />
-                                        <el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
-                                    </div>
-                                    <div :class="['main-content', { 'plug-in-border': item.show_tabs == '1' }]" :style="{ 'z-index': item.com_data.bottom_up == '1' ? 0 : 1 }">
                                         <template v-if="item.key == 'text'">
                                             <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-text>
                                         </template>
@@ -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 | number>(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) => {
+const copy = (index: null | number) => {
-    // 获取当前数据, 复制的时候id更换一下
+    if (index) {
-    const new_data = {
+        // 获取当前数据, 复制的时候id更换一下
-        ...cloneDeep(get_diy_index_data(index)),
+        const new_data = {
-        id: get_math(),
+            ...cloneDeep(get_diy_index_data(index)),
-    };
+            id: get_math(),
-    // 在当前位置下插入数据
+        };
-    diy_data.value.splice(index, 0, new_data);
+        // 在当前位置下插入数据
-    set_show_tabs(index + 1);
+        diy_data.value.splice(index, 0, new_data);
+        set_show_tabs(index + 1);
+    }
 };
 
 // 删除
-const del = (index: number) => {
+const del = (index: null | number) => {
-    app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
+    if (index) {
-        ElMessage({
+        app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
-            type: 'success',
+            ElMessage({
-            message: '删除成功!',
+                type: 'success',
-        });
+                message: '删除成功!',
-        // 调用删除接口，然后，更新数据
+            });
-        diy_data.value.splice(index, 1);
+            // 调用删除接口，然后，更新数据
-        if (diy_data.value.length > 0) {
+            diy_data.value.splice(index, 1);
-            let new_index: number = index;
+            if (diy_data.value.length > 0) {
-            // 删除的时候如果大于0，则显示上边的数据
+                let new_index: number = index;
-            if (index > 0) {
+                // 删除的时候如果大于0，则显示上边的数据
-                new_index = new_index - 1;
+                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<HTMLElement | null>(null);
+const left_activeCard = ref<HTMLElement | null>(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 };

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;
+    const { category_ids, brand_ids, 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 };
+    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) => ({