From eb7d93af8738354bdec9b2c92839dedad86b9961 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sat, 1 Jun 2024 10:19:35 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=94=98=E7=89=B9=E5=9B=BE=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/components/GanttView.vue  | 93 +++++++++++--------
 .../pages/manage/components/ProjectGantt.vue  | 10 +-
 .../sass/pages/components/project-gantt.scss  |  2 +
 3 files changed, 63 insertions(+), 42 deletions(-)

diff --git a/resources/assets/js/components/GanttView.vue b/resources/assets/js/components/GanttView.vue
index f7a6f1b24..f5e5a5fce 100644
--- a/resources/assets/js/components/GanttView.vue
+++ b/resources/assets/js/components/GanttView.vue
@@ -21,17 +21,18 @@
                 <i v-if="maximize" class="taskfont">&#xe7d4;</i>
                 <i v-else class="taskfont">&#xe7d3;</i>
             </div>
-            <div class="gantt-chart">
+            <div
+                ref="ganttChart"
+                class="gantt-chart"
+                @touchstart="dateTouchstart"
+                @touchmove="dateTouchmove"
+                @touchend="dateTouchend">
                 <ul class="gantt-month">
                     <li v-for="(item, key) in monthNum" :key="key" :style="monthStyle(key)">
                         <div class="month-format">{{monthFormat(key)}}</div>
                     </li>
                 </ul>
-                <ul class="gantt-date"
-                    @touchstart="dateTouchstart"
-                    @touchmove="dateTouchmove"
-                    @touchend="dateTouchend"
-                    @mousedown="dateMouseDown">
+                <ul class="gantt-date" @mousedown="dateMouseDown">
                     <li v-for="(item, key) in dateNum" :key="key" :style="dateStyle(key)">
                         <div class="date-format">
                             <div class="format-day">{{dateFormat(key, 'day')}}</div>
@@ -43,7 +44,7 @@
                     class="gantt-timeline"
                     @scroll="timelineScrollListener"
                     @mouseenter="mouseType='timeline'">
-                    <li v-for="(item, key) in lists" :key="key">
+                    <li v-for="(item, key) in lists" :key="key" :data-id="item.id">
                         <div
                             class="timeline-item"
                             :style="itemStyle(item)"
@@ -299,38 +300,58 @@ export default {
             if (this.windowPortrait) {
                 this.maximize = true
             }
-            this.mouseItem = null;
-            this.dateMove = {
-                clientX: e.touches[0].clientX
-            };
-        },
-        dateTouchmove(e) {
-            if (this.mouseItem != null) {
+            let parent = e.target.parentNode
+            let item = null
+            while (parent) {
+                if (!parent || parent === this.$refs.ganttChart) {
+                    break
+                }
+                if (parent.tagName === 'LI') {
+                    const itemId = parent.getAttribute('data-id')
+                    if (itemId) {
+                        item = this.lists.find(({id}) =>  itemId == id)
+                    }
+                }
+                parent = parent.parentNode
+            }
+            if (!item) {
+                this.onDateMove(e.touches[0].clientX);
                 return
             }
-            if (this.dateMove != null) {
-                let moveX = (this.dateMove.clientX - e.touches[0].clientX) * 5;
-                this.dateMove.clientX = e.touches[0].clientX;
-                this.mouseWidth+= moveX;
-                this.mouseScaleWidth+= moveX * (100 / this.dateWidth);
-            }
+            this.onItemMove(item, e.target, e.touches[0].clientX);
+        },
+        dateTouchmove(e) {
+            this.onMoving(e.touches[0].clientX)
         },
         dateTouchend() {
-            if (this.dateMove != null) {
-                this.dateMove = null;
-            }
+            this.onMoveOver(null);
         },
         dateMouseDown(e) {
             e.preventDefault();
-            this.mouseItem = null;
-            this.dateMove = {
-                clientX: e.clientX
-            };
+            this.onDateMove(e.clientX);
         },
         itemMouseDown(e, item) {
             e.preventDefault();
+            this.onItemMove(item, e.target, e.clientX);
+        },
+        itemMouseMove(e) {
+            if (this.mouseItem != null || this.dateMove != null) {
+                e.preventDefault();
+                this.onMoving(e.clientX);
+            }
+        },
+        itemMouseUp(e) {
+            this.onMoveOver(e.target);
+        },
+        onDateMove(clientX) {
+            this.mouseItem = null;
+            this.dateMove = {
+                clientX
+            };
+        },
+        onItemMove(item, target, clientX) {
             let type = 'moveX';
-            if (e.target.className == 'timeline-resizer') {
+            if (target.classList.contains('timeline-resizer')) {
                 type = 'moveW';
             }
             if (typeof item[type] !== "number") {
@@ -338,16 +359,15 @@ export default {
             }
             this.mouseBak = {
                 type: type,
-                clientX: e.clientX,
+                clientX: clientX,
                 value: item[type],
             };
             this.mouseItem = item;
             this.dateMove = null;
         },
-        itemMouseMove(e) {
+        onMoving(clientX) {
             if (this.mouseItem != null) {
-                e.preventDefault();
-                const diff = this.mouseBak.value + (e.clientX - this.mouseBak.clientX);
+                const diff = this.mouseBak.value + (clientX - this.mouseBak.clientX);
                 if (this.mouseBak.type === 'moveW') {
                     const oneWidthTime = 86400000 / this.dateWidth;
                     const {start, end} = this.mouseItem.time;
@@ -360,14 +380,13 @@ export default {
                 return;
             }
             if (this.dateMove != null) {
-                e.preventDefault();
-                let moveX = (this.dateMove.clientX - e.clientX) * 5;
-                this.dateMove.clientX = e.clientX;
+                let moveX = (this.dateMove.clientX - clientX) * 5;
+                this.dateMove.clientX = clientX;
                 this.mouseWidth+= moveX;
                 this.mouseScaleWidth+= moveX * (100 / this.dateWidth);
             }
         },
-        itemMouseUp(e) {
+        onMoveOver(target) {
             if (this.mouseItem != null) {
                 const {start, end} = this.mouseItem.time;
                 let isM = false;
@@ -391,7 +410,7 @@ export default {
                 //
                 if (isM) {
                     this.$emit("on-change", this.mouseItem)
-                } else if (e.target.className == 'timeline-title') {
+                } else if (target && target.className == 'timeline-title') {
                     this.clickItem(this.mouseItem);
                 }
                 this.mouseItem = null;
diff --git a/resources/assets/js/pages/manage/components/ProjectGantt.vue b/resources/assets/js/pages/manage/components/ProjectGantt.vue
index a92f7b00d..c3f00023b 100644
--- a/resources/assets/js/pages/manage/components/ProjectGantt.vue
+++ b/resources/assets/js/pages/manage/components/ProjectGantt.vue
@@ -27,8 +27,8 @@
             <div class="project-gstc-edit-info">
                 <Table max-height="600" :columns="editColumns" :data="editData"></Table>
                 <div class="project-gstc-edit-btns">
-                    <Button :loading="editLoad > 0" size="small" type="text" @click="editSubmit(false)">{{$L('取消')}}</Button>
-                    <Button :loading="editLoad > 0" size="small" type="primary" @click="editSubmit(true)">{{$L('保存')}}</Button>
+                    <Button :loading="editLoad > 0" type="text" @click="editSubmit(false)">{{$L('取消')}}</Button>
+                    <Button :loading="editLoad > 0" type="primary" @click="editSubmit(true)">{{$L('保存')}}</Button>
                     <Icon type="md-arrow-dropright" class="zoom" @click="editShowInfo=false"/>
                 </div>
             </div>
@@ -67,11 +67,11 @@ export default {
                 {
                     title: this.$L('任务名称'),
                     key: 'label',
-                    minWidth: 150,
+                    minWidth: 100,
                     ellipsis: true,
                 }, {
                     title: this.$L('原计划时间'),
-                    minWidth: 135,
+                    width: 140,
                     align: 'center',
                     render: (h, {row}) => {
                         if (row.notime === true) {
@@ -86,7 +86,7 @@ export default {
                     }
                 }, {
                     title: this.$L('新计划时间'),
-                    minWidth: 135,
+                    width: 140,
                     align: 'center',
                     render: (h, {row}) => {
                         return h('div', {
diff --git a/resources/assets/sass/pages/components/project-gantt.scss b/resources/assets/sass/pages/components/project-gantt.scss
index 149afe22d..72d7337ce 100644
--- a/resources/assets/sass/pages/components/project-gantt.scss
+++ b/resources/assets/sass/pages/components/project-gantt.scss
@@ -48,6 +48,7 @@
         position: absolute;
         bottom: 6px;
         right: 6px;
+        max-width: calc(100% - 6px);
         background: #ffffff;
         border-radius: 4px;
         opacity: 0;
@@ -76,6 +77,7 @@
             padding: 6px;
             border-radius: 4px;
             width: 500px;
+            max-width: 100%;
 
             .project-gstc-edit-btns {
                 margin: 12px 6px 4px;