From 3336d7d83ffd48d319dc3bd0b2ff1291575ed11e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 26 Feb 2025 18:55:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-custom/components/index.vue         | 40 ++++++++++---------
 src/utils/index.ts                            | 26 +++++++++---
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 97d56a7d..0efd8964 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -112,7 +112,7 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep, isEmpty, property, isEqual } from 'lodash';
-import { get_math, adjustPosition, getPlatform, get_history_name, diy_data_handle, new_location_handle, location_compute } from '@/utils';
+import { get_math, adjustPosition, getPlatform, get_history_name, diy_data_handle, new_location_handle, location_compute, is_show_message_warning, get_container_location } from '@/utils';
 import { defaultComData, isRectangleIntersecting } from "./index-default";
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import { commonStore, DataSourceStore } from '@/store';
@@ -587,7 +587,7 @@ const dragEndHandle = (new_val: any, index: number) => {
     const { location: old_location, com_data, id: old_id } = cloneDeep(diy_data.value[index])
     const { data_follow = {}, com_width, com_height, is_data_update } = com_data;
     // 处理后的x、y坐标
-    const { new_x, new_y } = new_location_handle(old_location, data_follow, new_val);
+    const { new_x, new_y } = new_location_handle(old_location, data_follow, new_val, 0, 0);
     if (data_follow?.id == '') {
         // 如果有跟随的模版，则需要更新跟随的模版的位置
         const index = diy_data.value.findIndex(item => old_id == item.com_data?.data_follow?.id);
@@ -606,38 +606,37 @@ const dragEndHandle = (new_val: any, index: number) => {
 };
 // 拖拽放大缩小结束时触发的事件 {x: number, y: number, w: number, h: number}
 const resizingHandle = (new_location: any, key: string, index: number, type: string) => {
-    const { location: old_location, id: old_id } = cloneDeep(diy_data.value[index]);
+    const { location: old_location, id: old_id, com_data: old_com_data } = cloneDeep(diy_data.value[index]);
     // 获取到当前更新的内容
     const com_data = diy_data.value[index].com_data;
     const { data_follow } = com_data;
-    const { w, h } = new_location;
-    // 处理后的x、y坐标
-    const { new_x, new_y } = new_location_handle(old_location, data_follow, new_location);
+    // 处理后的x、y坐标，宽度和高度
+    const { new_x, new_y, new_w, new_h} = new_location_handle(old_location, data_follow, new_location, old_com_data.com_width, old_com_data.com_height);
     if (data_follow.id == '') {
         // 如果有跟随的模版，则需要更新跟随的模版的位置
         const index = diy_data.value.findIndex(item => old_id == item.com_data.data_follow.id);
         if (index != -1) {
-            diy_data_handle(diy_data.value, old_id, new_location, w, h);
+            diy_data_handle(diy_data.value, old_id, new_location, new_w, new_h);
         }
     }
     // 对应位置的定位修改为当前更新的位置
     diy_data.value[index].location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
     // const com_data = diy_data.value[index].com_data;
     // 更新组件的宽高
-    com_data.com_width = w;
-    com_data.com_height = h;
-    com_data.staging_height = h;
+    com_data.com_width = new_w;
+    com_data.com_height = new_h;
+    com_data.staging_height = new_h;
     if (key == 'text') {
-        com_data.max_width = w;
-        com_data.max_height = w;
+        com_data.max_width = new_w;
+        com_data.max_height = new_w;
     }
     // 图片和线的宽高需要重新计算
     if (key == 'img') {
-        const { img_width, img_height } = handleImg(com_data, w, h);
+        const { img_width, img_height } = handleImg(com_data, new_w, new_h);
         com_data.img_width = img_width;
         com_data.img_height = img_height;
     } else if (key == 'auxiliary-line') {
-        const { line_width, line_size } = handleAuxiliaryLine(com_data, w, h);
+        const { line_width, line_size } = handleAuxiliaryLine(com_data, new_w, new_h);
         com_data.line_width = line_width;
         com_data.line_size = line_size;
     }
@@ -1112,16 +1111,21 @@ const handleKeyUp = (e: KeyboardEvent) => {
         // 遍历自定义数据，更新组件位置
         diy_data.value.forEach(item => {
             const rect2 = { x: item.location.x, y: item.location.y, width: item.com_data.com_width, height: item.com_data.com_height };
+            const { id = '', type = 'left' } = item.com_data?.data_follow || { id: '', type: 'left' };
             // 如果交集或者包裹，返回为1，否则为0
             if (isRectangleIntersecting(rect1, rect2) == '1') {
                 // x 轴不小于0 并且不大于容器宽度
-                if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390)) {
+                if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390) && (id === '' || (id != '' && type == 'top'))) {
                     item.location.x += x;
+                } else if (id != '' && type == 'left' && x !== 0) {
+                    is_show_message_warning('当前组件已经左跟随其他组件，x轴不允许修改');
                 }
                 // Y轴不小于0 并且不大于容器高度
-                if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value)) {
+                if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value) && (id === '' || (id != '' && type == 'left'))) {
                     item.location.y += y;
                     item.location.staging_y += y;
+                } else if (id != '' && type == 'top' && y !== 0) {
+                    is_show_message_warning('当前组件已经上跟随其他组件，y轴不允许修改');
                 }
             }
         });
@@ -1136,14 +1140,14 @@ const handleKeyUp = (e: KeyboardEvent) => {
                 if (isWithinBounds(item.location.x + x, item.com_data.com_width, 390) && (id === '' || (id != '' && type == 'top'))) {
                     item.location.x += x;
                 } else if (id != '' && type == 'left' && x !== 0) {
-                    ElMessage.warning('当前组件已经左跟随其他组件，x轴不允许修改');
+                    is_show_message_warning('当前组件已经左跟随其他组件，x轴不允许修改');
                 }
                 // Y轴不小于0 并且不大于容器高度
                 if (isWithinBounds(item.location.y + y, item.com_data.com_height, center_height.value) && (id === '' || (id != '' && type == 'left'))) {
                     item.location.y += y;
                     item.location.staging_y += y;
                 } else if (id != '' && type == 'top' && y !== 0) {
-                    ElMessage.warning('当前组件已经上跟随其他组件，y轴不允许修改');
+                    is_show_message_warning('当前组件已经上跟随其他组件，y轴不允许修改');
                 }
                 operation_end(get_history_name(item));
             }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index cdb14e06..5d2d1a46 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -884,33 +884,41 @@ export function formatDate(format: string = 'YYYY-MM-DD HH:mm:ss'): string {
 type Location = {
     x: number;
     y: number;
+    w?: number;
+    h?: number;
 }
 type DataFollow = {
     id: string;
     type: string;
 }
-export const new_location_handle = (old_location: Location, data_follow: DataFollow, location: Location) => {
+export const new_location_handle = (old_location: Location, data_follow: DataFollow, location: Location, com_width: number, com_height: number) => {
     let new_x = old_location.x;
     let new_y = old_location.y;
-    const { x, y } = location;
+    let new_w = com_width;
+    let new_h = com_height;
+    const { x, y, w = com_width, h = com_height } = location;
     // 如果是跟随的模版,根据选中的内容 x或者y不变
     if (data_follow.id != '') {
         if (data_follow.type == 'left') {
             if (old_location.x !== x) {
-                ElMessage.warning('当前组件已经左跟随其他组件，x轴不允许修改');
+                is_show_message_warning('当前组件已经左跟随其他组件，x轴不允许修改');
             }
             new_y = y;
+            new_h = location?.h || com_height;
         } else if (data_follow.type == 'top') {
             if (old_location.y !== y) {
-                ElMessage.warning('当前组件已经上跟随其他组件，y轴不允许修改');
+                is_show_message_warning('当前组件已经上跟随其他组件，y轴不允许修改');
             }
             new_x = x;
+            new_w = location?.w || com_width;
         }
     } else {
         new_x = x;
         new_y = y;
+        new_w = w;
+        new_h = h;
     }
-    return { new_x, new_y }
+    return { new_x, new_y, new_w, new_h }
 }
 
 /**
@@ -996,4 +1004,10 @@ export const get_container_location = (list: Item[], id: string, type: 'left' |
 
     // 返回更新后的坐标
     return { x, y };
-}
\ No newline at end of file
+}
+// 只有没有其他提示warning的时候才提示
+export const is_show_message_warning = (message: string) => {
+    if (document.querySelectorAll(".el-message.el-message--warning").length < 3) {
+        ElMessage.warning(message);
+    }
+};
\ No newline at end of file