From 65ed8a4d4862374a27d5090f710323176d6994f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 15 Oct 2024 11:36:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=B1=82=E7=BA=A7=E9=80=BB=E8=BE=91=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-custom/components/index.vue         | 91 ++++++-------------
 .../components/right-side-operation/index.vue | 35 ++++---
 src/components/model-custom/index.vue         |  2 +-
 .../model-custom/model-custom-content.vue     | 13 ---
 src/config/const/seckill.ts                   |  2 +-
 5 files changed, 52 insertions(+), 91 deletions(-)

diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index d3913144..f6bba971 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -59,7 +59,7 @@
     <!-- 视图渲染 -->
     <div class="main">
         <div class="model-content">
-            <right-side-operation v-if="typeof select_index === 'number' && !isNaN(select_index)" v-model="select_index" @del="del" @copy="copy" @previous_layer="previous_layer" @underlying_layer="underlying_layer" @top_up="top_up" @bottom_up="bottom_up"></right-side-operation>
+            <right-side-operation v-if="typeof select_index === 'number' && !isNaN(select_index)" v-model:index="select_index" v-model:dataLength="diy_data.length" @del="del" @copy="copy" @previous_layer="previous_layer" @underlying_layer="underlying_layer" @top_up="top_up" @bottom_up="bottom_up"></right-side-operation>
             <!-- 拖拽区 -->
             <div class="model-drag">
                 <div class="model-wall">
@@ -67,7 +67,7 @@
                         <div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
                             <DraggableContainer v-if="draggable_container" style="z-index:0" :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-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': item.com_data.z_index }" :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-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :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 :class="['main-content', { 'plug-in-border': item.show_tabs == '1' }]">
                                         <template v-if="item.key == 'text'">
                                             <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-text>
@@ -284,59 +284,49 @@ const del = (index: null | number) => {
 //前置一层 + 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;
-        }
+        const old_data = get_diy_index_data(index);
+        // 删除当前位置信息
+        diy_data.value.splice(index, 1);
+        // 将数据插入上一层数据中
+        diy_data.value.splice(index + 1, 0, old_data);
+        // 设置对应的位置为显示
+        set_show_tabs(index + 1);
     }
 }
 
 //后置一层 - 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 old_data = get_diy_index_data(index);
+        // 删除当前位置信息
+        diy_data.value.splice(index, 1);
+        // 将数据插入下一层数据中
+        diy_data.value.splice(index - 1, 0, old_data);
+        set_show_tabs(index - 1);
     }
 }
 //组件置顶
 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 old_data = get_diy_index_data(index);
+        // 删除当前位置信息
+        diy_data.value.splice(index, 1);
+        // 将数据插入下一层数据中
+        diy_data.value.splice(0, 0, old_data);
+        set_show_tabs(0);
     }
 }
 
 //组件置底
 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;
+        const old_data = get_diy_index_data(index);
+        const old_length = diy_data.value.length - 1;
+        // 删除当前位置信息
+        diy_data.value.splice(index, 1);
+        // 将数据插入下一层数据中
+        diy_data.value.splice(old_length, 0, old_data);
+        set_show_tabs(old_length);
     }
 }
 
@@ -398,10 +388,6 @@ 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<diy_content[]>([]);
-// 最低的层级
-const z_index = ref(0);
-// 最高的层级
-const top_z_index = ref(0);
 watch(() => center_height.value, () => {
     data = diy_data.value;
     // 从 DOM 中删除组件
@@ -420,27 +406,9 @@ 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;
@@ -450,7 +418,6 @@ watch(() => center_height.value, () => {
 //#region 左侧拖拽过来的处理
 let draggedItem = ref<any>({});
 const dragStart = (item: any, event: any) => {
-    const new_z_index = top_z_index.value + 1;
     // 初始化拖拽的数据
     draggedItem.value = {
         name: item.name,
@@ -463,10 +430,8 @@ const dragStart = (item: any, event: any) => {
         is_hot: '0',
         com_data: {
             ...cloneDeep(item.com_data),
-            z_index: new_z_index,
         },
     };
-    top_z_index.value = new_z_index;
     // 拖拽的时候清空热区
     hot_list.data = [];
 };
diff --git a/src/components/model-custom/components/right-side-operation/index.vue b/src/components/model-custom/components/right-side-operation/index.vue
index 03bbd88f..92bc5f3d 100644
--- a/src/components/model-custom/components/right-side-operation/index.vue
+++ b/src/components/model-custom/components/right-side-operation/index.vue
@@ -8,22 +8,23 @@
                 <el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
             </el-tooltip>
             <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="前置一层" placement="right">
-                <el-icon class="iconfont icon-arrow-top" @click.stop="previous_layer(index)" />
+                <el-icon :class="['iconfont icon-arrow-top', { 'disabled': index === dataLength - 1 }]" @click.stop="previous_layer(index, index === dataLength - 1)" />
             </el-tooltip>
             <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="后置一层" placement="right">
-                <el-icon class="iconfont icon-arrow-bottom" @click.stop="underlying_layer(index)" />
+                <el-icon :class="['iconfont icon-arrow-bottom', { 'disabled': index === 0 }]" @click.stop="underlying_layer(index, index === 0)" />
             </el-tooltip>
             <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置顶" placement="right">
-                <el-icon class="iconfont icon-top-up" @click.stop="top_up(index)" />
+                <el-icon :class="['iconfont icon-top-up', { 'disabled': index === 0 }]" @click.stop="top_up(index, index === 0)" />
             </el-tooltip>
             <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置底" placement="right">
-                <el-icon class="iconfont icon-bottom-up" @click.stop="bottom_up(index)" />
+                <el-icon :class="['iconfont icon-bottom-up', { 'disabled': index === dataLength - 1 }]" @click.stop="bottom_up(index, index === dataLength - 1)" />
             </el-tooltip>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-const index = defineModel({ type: Number , default: null });
+const index = defineModel('index', { type: Number , default: null });
+const dataLength = defineModel('dataLength', { type: Number , default: 0 });
 const emits = defineEmits(['del', 'copy', 'previous_layer', 'underlying_layer', 'top_up', 'bottom_up']);
 // 删除
 const del = (index: number) => {
@@ -34,20 +35,28 @@ const copy = (index: number) => {
     emits('copy', index)
 }
 //前置一层
-const previous_layer = (index: number) => {
-    emits('previous_layer', index)
+const previous_layer = (index: number, flag: boolean) => {
+    if (!flag) {
+        emits('previous_layer', index);
+    }
 }
 //后置一层
-const underlying_layer = (index: number) => {
-    emits('underlying_layer', index)
+const underlying_layer = (index: number, flag: boolean) => {
+    if (!flag) {
+        emits('underlying_layer', index)
+    }
 }
 //组件置顶
-const top_up = (index: number) => {
-    emits('top_up', index)
+const top_up = (index: number, flag: boolean) => {
+    if (!flag) {
+        emits('top_up', index)
+    }
 }
 //组件置底
-const bottom_up = (index: number) => {
-    emits('bottom_up', index)
+const bottom_up = (index: number, flag: boolean) => {
+    if (!flag) {
+        emits('bottom_up', index)
+    }
 }
 </script>
 
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 5bc1952d..40c698a4 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -2,7 +2,7 @@
     <div ref="container" class="custom-other" :style="style_container">
         <div class="w h" :style="style_img_container">
             <div class="w h re">
-                <div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x * scale, div_width) , 'top': percentage_count(item.location.y * scale, form.height), 'width': percentage_count(item.com_data.com_width * scale, div_width), 'height': percentage_count(item.com_data.com_height * scale, form.height), 'z-index': item.com_data.z_index}">
+                <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x * scale, div_width) , 'top': percentage_count(item.location.y * scale, form.height), 'width': percentage_count(item.com_data.com_width * scale, div_width), 'height': percentage_count(item.com_data.com_height * scale, form.height), 'z-index': (form.custom_list.length - 1) - index}">
                     <template v-if="item.key == 'text'">
                         <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-text>
                     </template>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index b563f5c7..425ca0ed 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -159,19 +159,6 @@ 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/config/const/seckill.ts b/src/config/const/seckill.ts
index 414874b1..17628cfa 100644
--- a/src/config/const/seckill.ts
+++ b/src/config/const/seckill.ts
@@ -86,7 +86,7 @@ const defaultSeckill: DefaultSeckill = {
         is_shop_show: '1',
         shop_type: 'text',
         shop_button_text: '去抢购',
-        shop_button_icon_class: '',
+        shop_button_icon_class: 'cart',
         seckill_subscript_show: '1',
         subscript_text: '秒杀',
     },