From ec20251b12170d70751f705701f4e8c336808950 Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 15 一月 2026 13:09:45 +0800
Subject: [PATCH] 1.甘特图带分页实现示例
---
src/views/gantt/甘特图不带分页.vue | 897 +++++++++++++++++++
src/views/gantt/index.vue | 874 +++++++++---------
src/views/gantt/甘特图带分页.vue | 921 ++++++++++++++++++++
src/api/GanttTask.js | 53 +
4 files changed, 2,320 insertions(+), 425 deletions(-)
diff --git a/src/api/GanttTask.js b/src/api/GanttTask.js
new file mode 100644
index 0000000..2389832
--- /dev/null
+++ b/src/api/GanttTask.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 鑾峰彇鍒嗛〉鐨勭敇鐗瑰浘浠诲姟鏁版嵁
+export function getGanttTasksPage(params) {
+ return request({
+ url: '/gantt/tasks/page',
+ method: 'get',
+ params
+ })
+}
+
+// 鑾峰彇鎵�鏈夌敇鐗瑰浘浠诲姟鏁伴噺
+export function getGanttTasksCount(params) {
+ return request({
+ url: '/gantt/tasks/count',
+ method: 'get',
+ params
+ })
+}
+
+// 鑾峰彇鐢樼壒鍥句换鍔¤鎯�
+export function getGanttTaskDetail(id) {
+ return request({
+ url: `/gantt/tasks/${id}`,
+ method: 'get'
+ })
+}
+
+// 鍒涘缓鐢樼壒鍥句换鍔�
+export function createGanttTask(data) {
+ return request({
+ url: '/gantt/tasks',
+ method: 'post',
+ data
+ })
+}
+
+// 鏇存柊鐢樼壒鍥句换鍔�
+export function updateGanttTask(id, data) {
+ return request({
+ url: `/gantt/tasks/${id}`,
+ method: 'put',
+ data
+ })
+}
+
+// 鍒犻櫎鐢樼壒鍥句换鍔�
+export function deleteGanttTask(id) {
+ return request({
+ url: `/gantt/tasks/${id}`,
+ method: 'delete'
+ })
+}
\ No newline at end of file
diff --git a/src/views/gantt/index.vue b/src/views/gantt/index.vue
index 31ac705..650d64e 100644
--- a/src/views/gantt/index.vue
+++ b/src/views/gantt/index.vue
@@ -26,32 +26,55 @@
</el-button>
</div>
- <div id="gantt_here" style="width:100%; height:90vh;" />
+ <div id="gantt_here" style="width:100%; height:calc(90vh - 50px);" />
+
+ <!-- 鍒嗛〉缁勪欢 -->
+ <div class="pagination-container">
+ <el-pagination
+ :current-page="currentPage"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="totalTasks"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</div>
</template>
<script>
import { gantt } from '@/components/dhtmlxGantt'
import '@/components/dhtmlxGantt/codebase/dhtmlxgantt.css'
-import { handleDateReduceOneDay } from '@/utils/global'
+import { handleDateReduceOneDay, handleDatetime } from '@/utils/global'
export default {
data() {
return {
value: 'default',
ganttDateRange: ['2025-04-01', '2025-05-10'],
- selectedIds: []
+ selectedIds: [],
+ // 鍒嗛〉鐩稿叧鏁版嵁
+ currentPage: 1,
+ pageSize: 10,
+ totalTasks: 0,
+ allTasks: [], // 瀛樺偍鎵�鏈変换鍔℃暟鎹�
+ paginatedTasks: [] // 褰撳墠椤电殑浠诲姟鏁版嵁
}
},
mounted() {
+ // 鍏堟敼鍙樻棩鏈熻寖鍥撮厤缃�
this.ganttDateRangeChange(this.ganttDateRange)
- this.init()
+
+ // 鍒濆鍖栫敇鐗瑰浘閰嶇疆
+ this.initGantt()
+
+ // 鐒跺悗鍔犺浇浠诲姟鏁版嵁锛堜細鑷姩娓叉煋褰撳墠椤碉級
+ this.loadTasks()
},
methods: {
- init() {
- // gantt.clearAll()
-
+ initGantt() {
gantt.plugins({
auto_scheduling: true,
critical_path: true,
@@ -250,31 +273,32 @@
},
{
name: 'owner', align: 'center', width: 75, label: '璐熻矗浜�', template: function(task) {
- if (task.type == gantt.config.types.project) {
- return ''
- }
-
- const store = gantt.getDatastore('resource')
- const assignments = task[gantt.config.resource_property]
-
- if (!assignments || !assignments.length) {
- return 'Unassigned'
- }
-
- if (assignments.length == 1) {
- return store.getItem(assignments[0].resource_id).text
- }
-
- let result = ''
- assignments.forEach(function(assignment) {
- const owner = store.getItem(assignment.resource_id)
- if (!owner) {
- return
- }
- result += '<div class=\'owner-label\' title=\'' + owner.text + '\'>' + owner.text.substr(0, 1) + '</div>'
- })
-
- return result
+ // if (task.type == gantt.config.types.project) {
+ // return ''
+ // }
+ //
+ // const store = gantt.getDatastore('resource')
+ // const assignments = task[gantt.config.resource_property]
+ //
+ // if (!assignments || !assignments.length) {
+ // return 'Unassigned'
+ // }
+ //
+ // if (assignments.length === 1) {
+ // return store.getItem(assignments[0].resource_id).text
+ // }
+ //
+ // let result = ''
+ // assignments.forEach(function(assignment) {
+ // const owner = store.getItem(assignment.resource_id)
+ // if (!owner) {
+ // return
+ // }
+ // result += '<div class=\'owner-label\' title=\'' + owner.text + '\'>' + owner.text.substr(0, 1) + '</div>'
+ // })
+ //
+ // return result
+ return '寮犱笁'
},
resize: true
},
@@ -414,311 +438,9 @@
}
gantt.init('gantt_here')
- gantt.parse({
- 'data': [
- {
+ // 娉ㄦ剰锛氳繖閲屼笉绔嬪嵆鍔犺浇鏁版嵁锛岃�屾槸绛夊緟loadTasks琚皟鐢�
- 'id': 1,
- 'text': '椤圭洰1',
- 'type': 'project',
- 'start_date': '2025-04-02 00:00',
- 'end_date': '2025-04-07 00:00',
- 'duration': 5,
- 'progress': 0.4,
- 'owner': [{ 'resource_id': '5', 'value': 3 }],
- 'parent': 0,
- 'checked': false
- },
- {
- 'id': 2,
- 'text': '椤圭洰2',
- 'type': 'project',
- 'start_date': '02-04-2025 00:00',
- 'duration': 8,
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '5', 'value': 4 }],
- 'parent': '1',
- checked: false
- },
- {
- 'id': 3,
- 'text': '椤圭洰3',
- 'type': 'project',
- 'start_date': '11-04-2025 00:00',
- 'duration': 8,
- 'parent': '1',
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '5', 'value': 2 }],
- checked: false
- },
- {
- 'id': 4,
- 'text': '椤圭洰4',
- 'type': 'project',
- 'start_date': '13-04-2025 00:00',
- 'duration': 5,
- 'parent': '1',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '5', 'value': 4 }],
- 'priority': 3,
- checked: true
- },
- {
- 'id': 5,
- 'text': '浠诲姟5',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 7,
- 'parent': '2',
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '6', 'value': 5 }],
- 'priority': 1,
- checked: true
- },
- {
- 'id': 6,
- 'text': '浠诲姟6',
- 'type': 'task',
- 'calendar_id': 'custom1',
- 'start_date': '03-04-2025 12:00',
- 'duration': 7,
- 'parent': '2',
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '7', 'value': 1 }],
- 'priority': 2,
- checked: false
- },
- {
- 'id': 7,
- 'text': '浠诲姟7',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '12-04-2025 00:00',
- 'duration': 8,
- 'parent': '3',
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '10', 'value': 2 }],
- checked: false
- },
- {
- 'id': 8,
- 'text': '浠诲姟8',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '14-04-2025 00:00',
- 'duration': 5,
- 'parent': '4',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '10', 'value': 4 }, { 'resource_id': '9', 'value': 5 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 9,
- 'text': '浠诲姟9',
- 'type': 'task',
- 'start_date': '21-04-2025 00:00',
- 'duration': 4,
- 'parent': '4',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '7', 'value': 3 }],
- checked: false
- },
- {
- 'id': 10,
- 'text': '浠诲姟10',
- 'type': 'task',
- 'start_date': '27-04-2025 00:00',
- 'duration': 3,
- 'parent': '4',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '8', 'value': 5 }],
- 'priority': 2,
- checked: false
- },
- {
- 'id': 11,
- 'text': '椤圭洰11',
- 'type': 'project',
- 'progress': 0.6,
- 'start_date': '02-04-2025 00:00',
- 'duration': 13,
- 'owner': [{ 'resource_id': '5', 'value': 4 }],
- 'parent': 0,
- checked: false
- },
- {
- 'id': 12,
- 'text': '浠诲姟12',
- 'calendar_id': 'custom2',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 5,
- 'parent': '11',
- 'progress': 1,
- 'owner': [{ 'resource_id': '7', 'value': 6 }],
- checked: false
- },
- {
- 'id': 13,
- 'text': '椤圭洰13',
- 'type': 'project',
- 'start_date': '03-04-2025 00:00',
- 'duration': 11,
- 'parent': '11',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '5', 'value': 2 }],
- checked: false
- },
- {
- 'id': 14,
- 'text': '浠诲姟14',
- 'calendar_id': 'custom2',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 6,
- 'parent': '11',
- 'owner': [],
- 'progress': 0.8,
- checked: false
- },
- {
- 'id': 15,
- 'text': '椤圭洰15',
- 'type': 'project',
- 'start_date': '03-04-2025 00:00',
- 'duration': 5,
- 'parent': '11',
- 'progress': 0.2,
- 'owner': [{ 'resource_id': '5', 'value': 5 }],
- checked: false
- },
- {
- 'id': 16,
- 'text': '浠诲姟16',
- 'calendar_id': 'custom2',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 7,
- 'parent': '11',
- 'progress': 0,
- 'owner': [{ 'resource_id': '7', 'value': 2 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 17,
- 'text': '浠诲姟17',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 2,
- 'parent': '13',
- 'progress': 1,
- 'owner': [{ 'resource_id': '8', 'value': 1 }],
- 'priority': 2,
- checked: false
- },
- {
- 'id': 25,
- 'text': '浠诲姟18',
- 'type': 'task',
- 'start_date': '06-04-2025 00:00',
- 'parent': '13',
- 'progress': 0,
- 'owner': [{ 'resource_id': '5', 'value': 1 }],
- 'duration': 2,
- checked: false
- },
- {
- 'id': 18,
- 'text': '浠诲姟19',
- 'type': 'task',
- 'start_date': '10-04-2025 00:00',
- 'duration': 2,
- 'parent': '13',
- 'progress': 0.8,
- 'owner': [{ 'resource_id': '6', 'value': 2 }],
- 'priority': 3,
- checked: false
- },
- {
- 'id': 19,
- 'text': '浠诲姟20',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '13-04-2025 00:00',
- 'duration': 4,
- 'parent': '13',
- 'progress': 0.2,
- 'owner': [{ 'resource_id': '6', 'value': 3 }],
- checked: false
- },
- {
- 'id': 20,
- 'text': '浠诲姟21',
- 'type': 'task',
- 'start_date': '13-04-2025 00:00',
- 'duration': 4,
- 'parent': '13',
- 'progress': 0,
- 'owner': [{ 'resource_id': '8', 'value': 4 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 21,
- 'text': '浠诲姟22',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 4,
- 'parent': '15',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '6', 'value': 5 }],
- checked: false
- },
- {
- 'id': 22,
- 'text': '浠诲姟23',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 4,
- 'parent': '15',
- 'progress': 0.1,
- 'owner': [{ 'resource_id': '8', 'value': 3 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 23,
- 'text': '浠诲姟24',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 5,
- 'parent': '15',
- 'progress': 0,
- 'owner': [{ 'resource_id': '8', 'value': 5 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 24,
- 'text': '浠诲姟25',
- // 'type': 'milestone',
- 'type': 'task',
- 'start_date': '20-04-2025 00:00',
- 'parent': '11',
- 'progress': 0,
- 'owner': [{ 'resource_id': '5', 'value': 3 }],
- 'duration': 2,
- checked: false
- }
- ]
-
- })
-
- // 缁戝畾鐢樼壒鍥剧偣鍑讳簨浠讹紙瀹樻柟鎺ㄨ崘鐨勪簨浠跺鎵樼敤娉曪級<span data-allow-html class='source-item source-aggregated' data-group-key='source-group-2' data-url='https://juejin.cn/post/7352376280387764278' data-id='turn0fetch0'><span data-allow-html class='source-item-num' data-group-key='source-group-2' data-id='turn0fetch0' data-url='https://juejin.cn/post/7352376280387764278'><span class='source-item-num-name' data-allow-html>https://juejin.cn/post/7352376280387764278</span></span></span>
+ // 缁戝畾鐢樼壒鍥剧偣鍑讳簨浠讹紙瀹樻柟鎺ㄨ崘鐨勪簨浠跺鎵樼敤娉曪級
gantt.attachEvent('onTaskClick', (id, e) => {
// 鎵惧埌鐐瑰嚮鐨勬槸鍚︽槸澶嶉�夋
const checkbox = e.target.closest('[data-action="check-row"]')
@@ -731,6 +453,11 @@
const task = gantt.getTask(id)
if (task) {
task.checked = !task.checked
+ // 鍚屾椂鏇存柊鍏ㄥ眬鏁版嵁
+ const globalTask = this.allTasks.find(t => t.id === id)
+ if (globalTask) {
+ globalTask.checked = task.checked
+ }
gantt.updateTask(id) // 鍙埛鏂拌繖涓�琛岋紝鎬ц兘鏇村ソ
this.syncSelected() // 鍚屾鍒� Vue 鐨� selectedIds
}
@@ -743,50 +470,416 @@
this.syncSelected()
},
+ // 鍔犺浇浠诲姟鏁版嵁
+ loadTasks() {
+ // 浣跨敤鍘熸湁鐨勭ず渚嬫暟鎹綔涓哄熀纭�
+ this.allTasks = [
+ {
+ 'id': 1,
+ 'text': '椤圭洰1',
+ 'type': 'project',
+ 'start_date': '2025-04-02 00:00',
+ 'end_date': '2025-04-07 00:00',
+ 'duration': 5,
+ 'progress': 0.4,
+ 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ 'parent': 0,
+ 'checked': false
+ },
+ {
+ 'id': 2,
+ 'text': '椤圭洰2',
+ 'type': 'project',
+ 'start_date': '02-04-2025 00:00',
+ 'duration': 8,
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'parent': '1',
+ checked: false
+ },
+ {
+ 'id': 3,
+ 'text': '椤圭洰3',
+ 'type': 'project',
+ 'start_date': '11-04-2025 00:00',
+ 'duration': 8,
+ 'parent': '1',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 4,
+ 'text': '椤圭洰4',
+ 'type': 'project',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '1',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'priority': 3,
+ checked: true
+ },
+ {
+ 'id': 5,
+ 'text': '浠诲姟5',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 7,
+ 'parent': '2',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '6', 'value': 5 }],
+ 'priority': 1,
+ checked: true
+ },
+ {
+ 'id': 6,
+ 'text': '浠诲姟6',
+ 'type': 'task',
+ 'calendar_id': 'custom1',
+ 'start_date': '03-04-2025 12:00',
+ 'duration': 7,
+ 'parent': '2',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '7', 'value': 1 }],
+ 'priority': 2,
+ checked: false
+ },
+ {
+ 'id': 7,
+ 'text': '浠诲姟7',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '12-04-2025 00:00',
+ 'duration': 8,
+ 'parent': '3',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '10', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 8,
+ 'text': '浠诲姟8',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '14-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '10', 'value': 4 }, { 'resource_id': '9', 'value': 5 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 9,
+ 'text': '浠诲姟9',
+ 'type': 'task',
+ 'start_date': '21-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '7', 'value': 3 }],
+ checked: false
+ },
+ {
+ 'id': 10,
+ 'text': '浠诲姟10',
+ 'type': 'task',
+ 'start_date': '27-04-2025 00:00',
+ 'duration': 3,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '8', 'value': 5 }],
+ 'priority': 2,
+ checked: false
+ },
+ {
+ 'id': 11,
+ 'text': '椤圭洰11',
+ 'type': 'project',
+ 'progress': 0.6,
+ 'start_date': '02-04-2025 00:00',
+ 'duration': 13,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'parent': 0,
+ checked: false
+ },
+ {
+ 'id': 12,
+ 'text': '浠诲姟12',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '11',
+ 'progress': 1,
+ 'owner': [{ 'resource_id': '7', 'value': 6 }],
+ checked: false
+ },
+ {
+ 'id': 13,
+ 'text': '椤圭洰13',
+ 'type': 'project',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 11,
+ 'parent': '11',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 14,
+ 'text': '浠诲姟14',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 6,
+ 'parent': '11',
+ 'owner': [],
+ 'progress': 0.8,
+ checked: false
+ },
+ {
+ 'id': 15,
+ 'text': '椤圭洰15',
+ 'type': 'project',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '11',
+ 'progress': 0.2,
+ 'owner': [{ 'resource_id': '5', 'value': 5 }],
+ checked: false
+ },
+ {
+ 'id': 16,
+ 'text': '浠诲姟16',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 7,
+ 'parent': '11',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '7', 'value': 2 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 17,
+ 'text': '浠诲姟17',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 2,
+ 'parent': '13',
+ 'progress': 1,
+ 'owner': [{ 'resource_id': '8', 'value': 1 }],
+ 'priority': 2,
+ checked: false
+ },
+
+ {
+ 'id': 18,
+ 'text': '浠诲姟19',
+ 'type': 'task',
+ 'start_date': '10-04-2025 00:00',
+ 'duration': 2,
+ 'parent': '13',
+ 'progress': 0.8,
+ 'owner': [{ 'resource_id': '6', 'value': 2 }],
+ 'priority': 3,
+ checked: false
+ },
+ {
+ 'id': 19,
+ 'text': '浠诲姟20',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '13',
+ 'progress': 0.2,
+ 'owner': [{ 'resource_id': '6', 'value': 3 }],
+ checked: false
+ },
+ {
+ 'id': 20,
+ 'text': '浠诲姟21',
+ 'type': 'task',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '13',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '8', 'value': 4 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 21,
+ 'text': '浠诲姟22',
+ 'type': 'project',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '0',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '6', 'value': 5 }],
+ checked: false
+ },
+ {
+ 'id': 22,
+ 'text': '浠诲姟23',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '21',
+ 'progress': 0.1,
+ 'owner': [{ 'resource_id': '8', 'value': 3 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 23,
+ 'text': '浠诲姟24',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '21',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '8', 'value': 5 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 24,
+ 'text': '浠诲姟25',
+ // 'type': 'milestone',
+ 'type': 'task',
+ 'start_date': '20-04-2025 00:00',
+ 'parent': '21',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ 'duration': 2,
+ checked: false
+ }
+ ]
+
+ // 娣诲姞鏇村绀轰緥鏁版嵁锛屼娇鍒嗛〉鏁堟灉鏇存槑鏄�
+ // for (let i = 25; i <= 100; i++) {
+ // this.allTasks.push({
+ // 'id': i,
+ // 'text': '浠诲姟' + i,
+ // 'type': 'task',
+ // // 'start_date': handleDatetime(`0${Math.floor(Math.random() * 9 + 1)}-04-2025 00:00`),
+ // 'start_date': `0${Math.floor(Math.random() * 9 + 1)}-04-2025 00:00`,
+ // 'duration': Math.floor(Math.random() * 5) + 1,
+ // 'parent': Math.floor(Math.random() * 10) + 1,
+ // 'progress': Math.random(),
+ // 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ // 'priority': Math.floor(Math.random() * 3) + 1,
+ // 'checked': false
+ // })
+ // }
+ console.log(JSON.parse(JSON.stringify(this.allTasks)))
+ this.totalTasks = this.allTasks.length
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ },
+
+ // 鏇存柊鍒嗛〉鍚庣殑浠诲姟鏁版嵁
+ updatePaginatedTasks() {
+ const startIndex = (this.currentPage - 1) * this.pageSize
+ const endIndex = Math.min(startIndex + this.pageSize, this.allTasks.length)
+ this.paginatedTasks = this.allTasks.slice(startIndex, endIndex)
+ },
+
+ // 娓叉煋鐢樼壒鍥�
+ renderGanttChart() {
+ gantt.clearAll()
+ console.log(JSON.parse(JSON.stringify(this.paginatedTasks)))
+ gantt.parse({
+ 'data': this.paginatedTasks
+ })
+ // 纭繚鐢樼壒鍥鹃噸鏂版覆鏌�
+ // gantt.render()
+ },
+
+ // 椤靛ぇ灏忔敼鍙�
+ handleSizeChange(newSize) {
+ this.pageSize = newSize
+ this.currentPage = 1 // 閲嶇疆鍒扮涓�椤�
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ this.syncSelected()
+ },
+
+ // 褰撳墠椤垫敼鍙�
+ handleCurrentChange(newPage) {
+ // 璁＄畻鏈�澶ч〉鏁帮紝闃叉瓒呭嚭鑼冨洿
+ const maxPage = Math.ceil(this.totalTasks / this.pageSize)
+ if (newPage > maxPage) {
+ this.currentPage = maxPage
+ } else if (newPage < 1) {
+ this.currentPage = 1
+ } else {
+ this.currentPage = newPage
+ }
+
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ this.syncSelected()
+ },
+ // 鐢樼壒鍥炬棩鏈熸敼鍙�
ganttDateRangeChange(val) {
gantt.config.start_date = val[0]
gantt.config.end_date = val[1]
gantt.render()
},
-
+ // 鍥為��鎷栧姩鎿嶄綔
ganttUndo() {
gantt.undo()
},
+ // 鍓嶈繘鎷栧姩鎿嶄綔
ganttRedo() {
gantt.redo()
},
+ // 鏀惧ぇ
ganttZoomIn() {
gantt.ext.zoom.zoomIn()
},
+ // 缂╁皬
ganttZoomOut() {
gantt.ext.zoom.zoomOut()
},
// 浠庣敇鐗瑰浘涓悓姝ラ�変腑鐨� id 鍒� Vue data
syncSelected() {
- const tasks = gantt.serialize().data || []
- this.selectedIds = tasks.filter(t => t.checked).map(t => t.id)
+ // 鍚屾褰撳墠椤甸潰浠诲姟鍒板叏灞�鏁版嵁
+ gantt.eachTask((task) => {
+ const globalTask = this.allTasks.find(t => t.id === task.id)
+ if (globalTask) {
+ globalTask.checked = task.checked
+ }
+ })
+
+ // 鑾峰彇鎵�鏈夐�変腑鐨勪换鍔D
+ this.selectedIds = this.allTasks.filter(t => t.checked).map(t => t.id)
console.log(this.selectedIds)
},
// 鑾峰彇閫変腑浠诲姟锛堢ず渚嬶級
handleGetSelected() {
- const tasks = gantt.serialize().data || []
- const selected = tasks.filter(t => t.checked)
+ const selected = this.allTasks.filter(t => t.checked)
this.$notify.success(`褰撳墠宸查�変腑${selected.length} 鏉′换鍔)
},
// 娓呯┖鎵�鏈夐�夋嫨
handleClearSelection() {
- // 鑾峰彇鎵�鏈変换鍔�
- const tasks = gantt.serialize().data || []
-
// 閬嶅巻鎵�鏈変换鍔★紝灏� checked 灞炴�ц缃负 false
- tasks.forEach(task => {
+ this.allTasks.forEach(task => {
task.checked = false
})
- // 鏇存柊鎵�鏈変换鍔℃樉绀�
+ // 鏇存柊褰撳墠椤甸潰鏄剧ず鐨勪换鍔�
gantt.eachTask((task) => {
task.checked = false
gantt.updateTask(task.id)
@@ -812,86 +905,17 @@
margin: unset;
}
-.local_storage {
- background: lavender;
- border: 2px dotted orange;
- font-weight: bold;
-}
-
-.gantt_grid_scale .gantt_grid_head_cell,
-.gantt_task .gantt_task_scale .gantt_scale_cell {
- font-weight: bold;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.7);
-}
-
-.resource_marker {
- text-align: center;
-}
-
-.resource_marker div {
- width: 28px;
- height: 28px;
- line-height: 29px;
- display: inline-block;
- border-radius: 15px;
- color: #FFF;
- margin: 3px;
-}
-
-.resource_marker.workday_ok div {
- background: #51c185;
-}
-
-.resource_marker.workday_over div {
- background: #ff8686;
-}
-
-.owner-label {
- width: 20px;
- height: 20px;
- line-height: 20px;
- font-size: 12px;
- display: inline-block;
- border: 1px solid #cccccc;
- border-radius: 25px;
- background: #e6e6e6;
- color: #6f6f6f;
- margin: 0 3px;
- font-weight: bold;
-}
-
-.weekend {
- background: LightGoldenrodYellow;
-}
-
-.constraint-marker {
- position: absolute;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-
- width: 56px;
- height: 56px;
- margin-top: -11px;
-
- opacity: 0.4;
- z-index: 1;
- background: url("https://docs.dhtmlx.com/gantt/samples/common/constraint-arrow.svg") center no-repeat;
- background-size: cover;
-}
-
-.constraint-marker.earliest-start {
- margin-left: -53px;
-}
-
-.constraint-marker.latest-end {
- margin-left: -3px;
- transform: rotate(180deg);
-}
-
.taskCheckBox {
cursor: pointer;
- z-index: 99999 !important;
+}
+
+/* 鍒嗛〉瀹瑰櫒鏍峰紡 */
+.pagination-container {
+ margin-top: 10px;
+ display: flex;
+ justify-content: end;
+ padding: 10px 0;
+ background-color: #fff;
+ border-top: 1px solid #ebeef5;
}
</style>
diff --git "a/src/views/gantt/\347\224\230\347\211\271\345\233\276\344\270\215\345\270\246\345\210\206\351\241\265.vue" "b/src/views/gantt/\347\224\230\347\211\271\345\233\276\344\270\215\345\270\246\345\210\206\351\241\265.vue"
new file mode 100644
index 0000000..cb4fc9d
--- /dev/null
+++ "b/src/views/gantt/\347\224\230\347\211\271\345\233\276\344\270\215\345\270\246\345\210\206\351\241\265.vue"
@@ -0,0 +1,897 @@
+<template>
+ <div style="padding: 0 10px">
+
+ <div style="padding: 10px 0;display: flex;">
+ <el-button type="primary" size="mini" @click="ganttUndo">鍥為��鎷栧姩鎿嶄綔</el-button>
+ <el-button type="primary" size="mini" @click="ganttRedo">鍓嶈繘鎷栧姩鎿嶄綔</el-button>
+ <el-button type="primary" size="mini" @click="ganttZoomIn">鏀惧ぇ</el-button>
+ <el-button type="primary" size="mini" @click="ganttZoomOut">缂╁皬</el-button>
+ <el-date-picker
+ v-model="ganttDateRange"
+ style="margin-left: 10px;"
+ size="mini"
+ value-format="yyyy-MM-dd"
+ type="daterange"
+ :clearable="false"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ @change="ganttDateRangeChange"
+ />
+ <el-button type="primary" style="margin-left: 10px;" size="mini" @click="handleGetSelected">
+ 鑾峰彇澶嶉�夋閫変腑浠诲姟
+ </el-button>
+ <el-button size="mini" @click="handleClearSelection">
+ 娓呯┖澶嶉�夋閫夋嫨
+ </el-button>
+ </div>
+
+ <div id="gantt_here" style="width:100%; height:90vh;" />
+ </div>
+</template>
+
+<script>
+import { gantt } from '@/components/dhtmlxGantt'
+import '@/components/dhtmlxGantt/codebase/dhtmlxgantt.css'
+import { handleDateReduceOneDay } from '@/utils/global'
+
+export default {
+ data() {
+ return {
+ value: 'default',
+ ganttDateRange: ['2025-04-01', '2025-05-10'],
+ selectedIds: []
+ }
+ },
+ mounted() {
+ this.ganttDateRangeChange(this.ganttDateRange)
+ this.initGantt()
+ },
+ methods: {
+
+ initGantt() {
+ // gantt.clearAll()
+
+ gantt.plugins({
+ auto_scheduling: true,
+ critical_path: true,
+ drag_timeline: true,
+ grouping: true,
+ keyboard_navigation: true,
+ marker: true,
+ multiselect: true,
+ tooltip: true,
+ undo: true
+ })
+ gantt.i18n.setLocale('cn')
+ gantt.config.multiselect = true // 寮�鍚浠诲姟閫夋嫨
+ gantt.config.show_links = false // 涓嶆樉绀鸿繛鎺ョ嚎
+ /* 鈫撯啌鈫� Auto-scheduling configuration 鈫撯啌鈫� */
+ gantt.config.auto_scheduling = true
+
+ /* 鈫撯啌鈫� Group configuration 鈫撯啌鈫� */
+ gantt.serverList('task_priority', [
+ { key: 1, label: '楂�' },
+ { key: 2, label: '涓瓑' },
+ { key: 3, label: '浣�' }
+ ])
+
+ gantt.serverList('task_status', [
+ { key: 1, label: 'Planning' },
+ { key: 2, label: 'Not started' },
+ { key: 3, label: 'In Progress' },
+ { key: 4, label: 'Complete' }
+ ])
+
+ function byId(list, id) {
+ for (let i = 0; i < list.length; i++) {
+ if (list[i].key == id) {
+ return list[i].label || ''
+ }
+ }
+ return ''
+ }
+
+ /* 鈫戔啈鈫� Group configuration 鈫戔啈鈫� */
+
+ // 鏀惧ぇ缂╁皬灞炴��
+ /* 鈫撯啌鈫� Zoom configuration 鈫撯啌鈫� */
+ const zoomConfig = {
+ levels: [
+ {
+ name: 'hour',
+ scale_height: 27,
+ min_column_width: 50,
+ scales: [
+ { unit: 'day', format: '%Y骞�%M%d鍙�' },
+ { unit: 'hour', format: '%H鏃�' }
+ ]
+ },
+ {
+ name: 'day',
+ scale_height: 27,
+ min_column_width: 80,
+ scales: [
+ // { unit: 'day', step: 1, format: '%d %M' }
+ { unit: 'day', step: 1, format: '%M%d鍙�' }
+ ]
+ },
+ {
+ name: 'week',
+ scale_height: 50,
+ min_column_width: 70,
+ scales: [
+ // {
+ // unit: 'week', step: 1, format: function(date) {
+ // const dateToStr = gantt.date.date_to_str('%d %M')
+ // const endDate = gantt.date.add(date, -6, 'day')
+ // const weekNum = gantt.date.date_to_str('%W')(date)
+ // return '绗�' + weekNum + '鍛�, ' + dateToStr(date) + ' - ' + dateToStr(endDate)
+ // }
+ // },
+ // %M
+ { unit: 'week', format: '%Y骞寸%W鍛�' },
+ { unit: 'day', step: 1, format: '%M%d鍙�' }
+ // { unit: 'day', step: 1, format: '%j %D' }
+ // { unit: 'day', step: 1, format: '鏄熸湡%D' }
+ ]
+ },
+ {
+ name: 'month',
+ scale_height: 50,
+ min_column_width: 120,
+ scales: [
+ // { unit: 'month', format: '%Y骞�%F' },
+ { unit: 'month', format: '%Y骞�%M' },
+ { unit: 'week', format: '绗�%W鍛�' }
+ ]
+ },
+ {
+ name: 'quarter',
+ height: 50,
+ min_column_width: 90,
+ scales: [
+ // {
+ // unit: 'quarter', step: 1, format: function(date) {
+ // const dateToStr = gantt.date.date_to_str('%M')
+ // const endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')
+ // return dateToStr(date) + ' - ' + dateToStr(endDate)
+ // }
+ // },
+ { unit: 'month', step: 1, format: '%Y骞�%M' }
+ ]
+ },
+ {
+ name: 'year',
+ scale_height: 50,
+ min_column_width: 30,
+ scales: [
+ { unit: 'year', step: 1, format: '%Y骞�' }
+
+ ]
+ }
+ ],
+ useKey: 'ctrlKey',
+ trigger: 'wheel',
+ element: function() {
+ return gantt.$root.querySelector('.gantt_task')
+ }
+ }
+ gantt.ext.zoom.init(zoomConfig)
+ gantt.ext.zoom.setLevel('week')
+ /* 鈫戔啈鈫� Zoom configuration 鈫戔啈鈫� */
+
+ // 鏄惁鏄伐浣滄椂闂�
+ /* 鈫撯啌鈫� Working Time configuration 鈫撯啌鈫� */
+ gantt.templates.scale_cell_class = function(date) {
+ if (!gantt.isWorkTime(date)) {
+ return 'weekend'
+ }
+ }
+
+ gantt.templates.timeline_cell_class = function(item, date) {
+ if (!gantt.isWorkTime({ date: date, task: item })) {
+ return 'weekend'
+ }
+ }
+
+ gantt.config.work_time = true
+
+ gantt.addCalendar({
+ id: 'custom1',
+ worktime: {
+ hours: ['8:00-12:30', '13:00-17:30'], // global work hours for weekdays
+ days: [0, 1, 1, 1, 1, 1, 1]
+ }
+ })
+
+ // gantt.addCalendar({
+ // id: 'custom2',
+ // hours: ['12:00-21:00'],
+ // days: [1, 0, 1, 0, 1, 0, 1]
+ // })
+ /* 鈫戔啈鈫� Working Time configuration 鈫戔啈鈫� */
+
+ // 鐢樼壒鍥惧垪鍙傛暟璁剧疆
+ /* 鈫撯啌鈫� Grid Columns configuration 鈫撯啌鈫� */
+ gantt.config.reorder_grid_columns = true
+ const textEditor = { type: 'text', map_to: 'text' }
+ const startDateEditor = { type: 'date', map_to: 'start_date' }
+ const durationEditor = { type: 'number', map_to: 'duration', min: 1, max: 100 }
+ gantt.config.columns = [
+ {
+ name: 'checked',
+ label: '閫夋嫨',
+ align: 'center',
+ width: 35,
+ resize: false,
+ // 鍏抽敭锛氱敤 template 杩斿洖涓�涓閫夋
+ template: (task) => {
+ const checked = task.checked ? 'checked' : ''
+ // data-action 鐢ㄤ簬鍦ㄤ簨浠跺鎵樻椂璇嗗埆鏄閫夋
+ return `<input type="checkbox" class="taskCheckBox" data-action="check-row" ${checked} />`
+ }
+ },
+ { name: 'wbs', label: '鑺傜偣', width: 80, template: gantt.getWBSCode },
+ { name: 'text', tree: true, label: '浠诲姟鍚嶇О', width: 200, resize: true, editor: textEditor },
+ { name: 'start_date', align: 'center', label: '寮�濮嬫棩鏈�', width: 80, resize: true, editor: startDateEditor },
+ {
+ name: 'duration',
+ width: 60,
+ align: 'center',
+ label: '宸ユ湡(澶�)',
+ resize: true,
+ editor: durationEditor,
+ template: function(task) {
+ // 濡傛灉duration鏄痭ull鎴杣ndefined锛岃繑鍥�0
+ // return (task.duration || 0) + 1 // 鍦ㄥ綋鍓峝uration鐨勫熀纭�涓婂姞1
+ return task.duration
+ }
+ },
+ {
+ name: 'owner', align: 'center', width: 75, label: '璐熻矗浜�', template: function(task) {
+ if (task.type == gantt.config.types.project) {
+ return ''
+ }
+
+ const store = gantt.getDatastore('resource')
+ const assignments = task[gantt.config.resource_property]
+
+ if (!assignments || !assignments.length) {
+ return 'Unassigned'
+ }
+
+ if (assignments.length == 1) {
+ return store.getItem(assignments[0].resource_id).text
+ }
+
+ let result = ''
+ assignments.forEach(function(assignment) {
+ const owner = store.getItem(assignment.resource_id)
+ if (!owner) {
+ return
+ }
+ result += '<div class=\'owner-label\' title=\'' + owner.text + '\'>' + owner.text.substr(0, 1) + '</div>'
+ })
+
+ return result
+ },
+ resize: true
+ },
+ {
+ name: 'priority', width: 60, label: '浼樺厛绾�', align: 'center', resize: true, template: function(task) {
+ return byId(gantt.serverList('task_priority'), task.priority)
+ }
+ },
+ { name: 'add', width: 44 }
+ ]
+ /* 鈫戔啈鈫� Grid Columns configuration 鈫戔啈鈫� */
+
+ // 姹夊寲绐楀彛
+ gantt.locale.labels = {
+ dhx_cal_today_button: '浠婂ぉ',
+ day_tab: '鏃�',
+ week_tab: '鍛�',
+ month_tab: '鏈�',
+ new_event: '鏂板缓鏃ョ▼',
+ icon_save: '淇濆瓨',
+ icon_cancel: '鍏抽棴',
+ icon_details: '璇︾粏',
+ icon_edit: '缂栬緫',
+ icon_delete: '鍒犻櫎',
+ confirm_closing: '璇风‘璁ゆ槸鍚︽挙閿�淇敼!', // Your changes will be lost, are your sure?
+ confirm_deleting: '鏄惁鍒犻櫎璁″垝?',
+ section_description: '鎻忚堪:',
+ section_resources: '鑷畾涔夐�夋嫨:',
+ section_calendar: '鑷畾涔夐�夋嫨2:',
+ section_time: '鏃堕棿鑼冨洿:',
+ section_type: '绫诲瀷:',
+ section_text: '璁″垝鍚嶇О:',
+ section_test: '娴嬭瘯:',
+ section_projectClass: '椤圭洰绫诲瀷:',
+ taskProjectType_0: '椤圭洰浠诲姟',
+ taskProjectType_1: '鏅�氫换鍔�',
+ section_head: '璐熻矗浜�:',
+ section_priority: '浼樺厛绾�:',
+ taskProgress: '浠诲姟鐘舵��',
+ taskProgress_0: '鏈紑濮�',
+ taskProgress_1: '杩涜涓�',
+ taskProgress_2: '宸插畬鎴�',
+ taskProgress_3: '宸插欢鏈�',
+ taskProgress_4: '鎼佺疆涓�',
+ section_template: 'Details',
+ /* grid columns */
+ column_text: '璁″垝鍚嶇О',
+ column_start_date: '寮�濮嬫椂闂�',
+ column_duration: '鎸佺画鏃堕棿',
+ column_add: '',
+ column_priority: '闅惧害',
+ /* link confirmation */
+ link: '鍏宠仈',
+ confirm_link_deleting: '灏嗚鍒犻櫎',
+ message_ok: '纭畾',
+ message_cancel: '鍙栨秷',
+ link_start: ' (寮�濮�)',
+ link_end: ' (缁撴潫)',
+
+ type_task: '浠诲姟',
+ type_project: '椤圭洰',
+ type_milestone: '閲岀▼纰�',
+ minutes: '鍒嗛挓',
+ hours: '灏忔椂',
+ days: '澶�',
+ weeks: '鍛�',
+ months: '鏈�',
+ years: '骞�'
+ }
+
+ gantt.config.lightbox.sections = [
+ { name: 'description', height: 38, map_to: 'text', type: 'textarea', focus: true },
+ {
+ name: 'resources', type: 'resources', map_to: 'owner', options: gantt.serverList('people'), default_value: 8
+ },
+ {
+ name: 'calendar', height: 25, map_to: 'calendar_id', type: 'select', options: [
+ { key: '', label: '榛樿' },
+ { key: 'custom1', label: '閫夐」涓�' },
+ { key: 'custom2', label: '閫夐」浜�' }
+ ]
+ },
+
+ { name: 'time', type: 'duration', map_to: 'auto' }
+ ]
+
+ gantt.config.resource_store = 'resource'
+ gantt.config.resource_property = 'owner'
+ gantt.config.order_branch = true
+ gantt.config.open_tree_initially = true
+
+ gantt.config.show_errors = false // 鍙戠敓寮傚父鏃讹紝涓嶅厑璁稿脊鍑鸿鍛婂埌 UI 鐣岄潰
+
+ const resourcesStore = gantt.createDatastore({
+ name: gantt.config.resource_store,
+ type: 'treeDatastore',
+ initItem: function(item) {
+ item.parent = item.parent || gantt.config.root_id
+ item[gantt.config.resource_property] = item.parent
+ item.open = true
+ return item
+ }
+ })
+
+ resourcesStore.attachEvent('onParse', function() {
+ const people = []
+ resourcesStore.eachItem(function(res) {
+ if (!resourcesStore.hasChild(res.id)) {
+ const copy = gantt.copy(res)
+ copy.key = res.id
+ copy.label = res.text
+ people.push(copy)
+ }
+ })
+ gantt.updateCollection('people', people)
+ })
+
+ resourcesStore.parse([
+ { id: 1, text: 'QA', parent: null },
+ { id: 2, text: 'Development', parent: null },
+ { id: 3, text: 'Sales', parent: null },
+ { id: 4, text: 'Other', parent: null },
+ { id: 5, text: 'Unassigned', parent: 4 },
+ { id: 6, text: 'John', parent: 1, unit: 'hours/day' },
+ { id: 7, text: 'Mike', parent: 2, unit: 'hours/day' },
+ { id: 8, text: 'Anna', parent: 2, unit: 'hours/day' },
+ { id: 9, text: 'Bill', parent: 3, unit: 'hours/day' },
+ { id: 10, text: 'Floe', parent: 3, unit: 'hours/day' }
+ ])
+ /* 鈫戔啈鈫� Resource configuration 鈫戔啈鈫� */
+
+ gantt.config.grid_elastic_columns = true
+
+ // 鑷畾涔夋诞鍔ㄦ鐨勬樉绀哄唴瀹� tooltip娴姩妗嗘樉绀虹殑End Date琚拷鍔�1鐨勯棶棰樹慨澶嶏紙搴旇鏄剧ず鏁版嵁搴撶殑鍘熷鍊硷級
+ gantt.templates.tooltip_text = function(start, end, task) {
+ return '<b>浠诲姟:</b> ' + task.text + '<br/><b>寮�濮嬫椂闂�:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>缁撴潫鏃堕棿:</b> ' + handleDateReduceOneDay(end)
+ }
+
+ gantt.init('gantt_here')
+ gantt.parse({
+ 'data': [
+ {
+
+ 'id': 1,
+ 'text': '椤圭洰1',
+ 'type': 'project',
+ 'start_date': '2025-04-02 00:00',
+ 'end_date': '2025-04-07 00:00',
+ 'duration': 5,
+ 'progress': 0.4,
+ 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ 'parent': 0,
+ 'checked': false
+ },
+ {
+ 'id': 2,
+ 'text': '椤圭洰2',
+ 'type': 'project',
+ 'start_date': '02-04-2025 00:00',
+ 'duration': 8,
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'parent': '1',
+ checked: false
+ },
+ {
+ 'id': 3,
+ 'text': '椤圭洰3',
+ 'type': 'project',
+ 'start_date': '11-04-2025 00:00',
+ 'duration': 8,
+ 'parent': '1',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 4,
+ 'text': '椤圭洰4',
+ 'type': 'project',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '1',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'priority': 3,
+ checked: true
+ },
+ {
+ 'id': 5,
+ 'text': '浠诲姟5',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 7,
+ 'parent': '2',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '6', 'value': 5 }],
+ 'priority': 1,
+ checked: true
+ },
+ {
+ 'id': 6,
+ 'text': '浠诲姟6',
+ 'type': 'task',
+ 'calendar_id': 'custom1',
+ 'start_date': '03-04-2025 12:00',
+ 'duration': 7,
+ 'parent': '2',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '7', 'value': 1 }],
+ 'priority': 2,
+ checked: false
+ },
+ {
+ 'id': 7,
+ 'text': '浠诲姟7',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '12-04-2025 00:00',
+ 'duration': 8,
+ 'parent': '3',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '10', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 8,
+ 'text': '浠诲姟8',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '14-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '10', 'value': 4 }, { 'resource_id': '9', 'value': 5 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 9,
+ 'text': '浠诲姟9',
+ 'type': 'task',
+ 'start_date': '21-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '7', 'value': 3 }],
+ checked: false
+ },
+ {
+ 'id': 10,
+ 'text': '浠诲姟10',
+ 'type': 'task',
+ 'start_date': '27-04-2025 00:00',
+ 'duration': 3,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '8', 'value': 5 }],
+ 'priority': 2,
+ checked: false
+ },
+ {
+ 'id': 11,
+ 'text': '椤圭洰11',
+ 'type': 'project',
+ 'progress': 0.6,
+ 'start_date': '02-04-2025 00:00',
+ 'duration': 13,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'parent': 0,
+ checked: false
+ },
+ {
+ 'id': 12,
+ 'text': '浠诲姟12',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '11',
+ 'progress': 1,
+ 'owner': [{ 'resource_id': '7', 'value': 6 }],
+ checked: false
+ },
+ {
+ 'id': 13,
+ 'text': '椤圭洰13',
+ 'type': 'project',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 11,
+ 'parent': '11',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 14,
+ 'text': '浠诲姟14',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 6,
+ 'parent': '11',
+ 'owner': [],
+ 'progress': 0.8,
+ checked: false
+ },
+ {
+ 'id': 15,
+ 'text': '椤圭洰15',
+ 'type': 'project',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '11',
+ 'progress': 0.2,
+ 'owner': [{ 'resource_id': '5', 'value': 5 }],
+ checked: false
+ },
+ {
+ 'id': 16,
+ 'text': '浠诲姟16',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 7,
+ 'parent': '11',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '7', 'value': 2 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 17,
+ 'text': '浠诲姟17',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 2,
+ 'parent': '13',
+ 'progress': 1,
+ 'owner': [{ 'resource_id': '8', 'value': 1 }],
+ 'priority': 2,
+ checked: false
+ },
+ {
+ 'id': 25,
+ 'text': '浠诲姟18',
+ 'type': 'task',
+ 'start_date': '06-04-2025 00:00',
+ 'parent': '13',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '5', 'value': 1 }],
+ 'duration': 2,
+ checked: false
+ },
+ {
+ 'id': 18,
+ 'text': '浠诲姟19',
+ 'type': 'task',
+ 'start_date': '10-04-2025 00:00',
+ 'duration': 2,
+ 'parent': '13',
+ 'progress': 0.8,
+ 'owner': [{ 'resource_id': '6', 'value': 2 }],
+ 'priority': 3,
+ checked: false
+ },
+ {
+ 'id': 19,
+ 'text': '浠诲姟20',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '13',
+ 'progress': 0.2,
+ 'owner': [{ 'resource_id': '6', 'value': 3 }],
+ checked: false
+ },
+ {
+ 'id': 20,
+ 'text': '浠诲姟21',
+ 'type': 'task',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '13',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '8', 'value': 4 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 21,
+ 'text': '浠诲姟22',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '15',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '6', 'value': 5 }],
+ checked: false
+ },
+ {
+ 'id': 22,
+ 'text': '浠诲姟23',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '15',
+ 'progress': 0.1,
+ 'owner': [{ 'resource_id': '8', 'value': 3 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 23,
+ 'text': '浠诲姟24',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '15',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '8', 'value': 5 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 24,
+ 'text': '浠诲姟25',
+ // 'type': 'milestone',
+ 'type': 'task',
+ 'start_date': '20-04-2025 00:00',
+ 'parent': '11',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ 'duration': 2,
+ checked: false
+ }
+ ]
+
+ })
+
+ // 缁戝畾鐢樼壒鍥剧偣鍑讳簨浠讹紙瀹樻柟鎺ㄨ崘鐨勪簨浠跺鎵樼敤娉曪級<span data-allow-html class='source-item source-aggregated' data-group-key='source-group-2' data-url='https://juejin.cn/post/7352376280387764278' data-id='turn0fetch0'><span data-allow-html class='source-item-num' data-group-key='source-group-2' data-id='turn0fetch0' data-url='https://juejin.cn/post/7352376280387764278'><span class='source-item-num-name' data-allow-html>https://juejin.cn/post/7352376280387764278</span></span></span>
+ gantt.attachEvent('onTaskClick', (id, e) => {
+ // 鎵惧埌鐐瑰嚮鐨勬槸鍚︽槸澶嶉�夋
+ const checkbox = e.target.closest('[data-action="check-row"]')
+ if (!checkbox) {
+ // 涓嶆槸鐐瑰閫夋锛屽氨淇濇寔榛樿琛屼负
+ return true
+ }
+
+ // 鏄閫夋锛氬垏鎹㈤�変腑鐘舵��
+ const task = gantt.getTask(id)
+ if (task) {
+ task.checked = !task.checked
+ gantt.updateTask(id) // 鍙埛鏂拌繖涓�琛岋紝鎬ц兘鏇村ソ
+ this.syncSelected() // 鍚屾鍒� Vue 鐨� selectedIds
+ }
+
+ // 闃绘榛樿鐐瑰嚮琛岃涓猴紙閬垮厤璇Е鍙戝叾浠栭�昏緫锛�
+ return false
+ })
+
+ // 鍒濆鍖栧畬鎴愬悗鍚屾涓�娆￠�変腑鐘舵��
+ this.syncSelected()
+ },
+
+ ganttDateRangeChange(val) {
+ gantt.config.start_date = val[0]
+ gantt.config.end_date = val[1]
+ gantt.render()
+ },
+
+ ganttUndo() {
+ gantt.undo()
+ },
+ ganttRedo() {
+ gantt.redo()
+ },
+ ganttZoomIn() {
+ gantt.ext.zoom.zoomIn()
+ },
+ ganttZoomOut() {
+ gantt.ext.zoom.zoomOut()
+ },
+
+ // 浠庣敇鐗瑰浘涓悓姝ラ�変腑鐨� id 鍒� Vue data
+ syncSelected() {
+ const tasks = gantt.serialize().data || []
+ this.selectedIds = tasks.filter(t => t.checked).map(t => t.id)
+ console.log(this.selectedIds)
+ },
+
+ // 鑾峰彇閫変腑浠诲姟锛堢ず渚嬶級
+ handleGetSelected() {
+ const tasks = gantt.serialize().data || []
+ const selected = tasks.filter(t => t.checked)
+ this.$notify.success(`褰撳墠宸查�変腑${selected.length} 鏉′换鍔)
+ },
+
+ // 娓呯┖鎵�鏈夐�夋嫨
+ handleClearSelection() {
+ // 鑾峰彇鎵�鏈変换鍔�
+ const tasks = gantt.serialize().data || []
+
+ // 閬嶅巻鎵�鏈変换鍔★紝灏� checked 灞炴�ц缃负 false
+ tasks.forEach(task => {
+ task.checked = false
+ })
+
+ // 鏇存柊鎵�鏈変换鍔℃樉绀�
+ gantt.eachTask((task) => {
+ task.checked = false
+ gantt.updateTask(task.id)
+ })
+
+ // 鍚屾鍒� Vue 缁勪欢鏁版嵁
+ this.syncSelected()
+
+ // 鏄剧ず鎻愮ず淇℃伅
+ this.$notify.success('宸叉竻绌烘墍鏈夐�夋嫨')
+ }
+
+ }
+}
+
+</script>
+
+<style>
+body,
+html {
+ width: 100%;
+ height: 100%;
+ margin: unset;
+}
+
+.local_storage {
+ background: lavender;
+ border: 2px dotted orange;
+ font-weight: bold;
+}
+
+.gantt_grid_scale .gantt_grid_head_cell,
+.gantt_task .gantt_task_scale .gantt_scale_cell {
+ font-weight: bold;
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.7);
+}
+
+.resource_marker {
+ text-align: center;
+}
+
+.resource_marker div {
+ width: 28px;
+ height: 28px;
+ line-height: 29px;
+ display: inline-block;
+ border-radius: 15px;
+ color: #FFF;
+ margin: 3px;
+}
+
+.resource_marker.workday_ok div {
+ background: #51c185;
+}
+
+.resource_marker.workday_over div {
+ background: #ff8686;
+}
+
+.owner-label {
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ font-size: 12px;
+ display: inline-block;
+ border: 1px solid #cccccc;
+ border-radius: 25px;
+ background: #e6e6e6;
+ color: #6f6f6f;
+ margin: 0 3px;
+ font-weight: bold;
+}
+
+.weekend {
+ background: LightGoldenrodYellow;
+}
+
+.constraint-marker {
+ position: absolute;
+
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ width: 56px;
+ height: 56px;
+ margin-top: -11px;
+
+ opacity: 0.4;
+ z-index: 1;
+ background: url("https://docs.dhtmlx.com/gantt/samples/common/constraint-arrow.svg") center no-repeat;
+ background-size: cover;
+}
+
+.constraint-marker.earliest-start {
+ margin-left: -53px;
+}
+
+.constraint-marker.latest-end {
+ margin-left: -3px;
+ transform: rotate(180deg);
+}
+
+.taskCheckBox {
+ cursor: pointer;
+ z-index: 99999 !important;
+}
+</style>
diff --git "a/src/views/gantt/\347\224\230\347\211\271\345\233\276\345\270\246\345\210\206\351\241\265.vue" "b/src/views/gantt/\347\224\230\347\211\271\345\233\276\345\270\246\345\210\206\351\241\265.vue"
new file mode 100644
index 0000000..650d64e
--- /dev/null
+++ "b/src/views/gantt/\347\224\230\347\211\271\345\233\276\345\270\246\345\210\206\351\241\265.vue"
@@ -0,0 +1,921 @@
+<template>
+ <div style="padding: 0 10px">
+
+ <div style="padding: 10px 0;display: flex;">
+ <el-button type="primary" size="mini" @click="ganttUndo">鍥為��鎷栧姩鎿嶄綔</el-button>
+ <el-button type="primary" size="mini" @click="ganttRedo">鍓嶈繘鎷栧姩鎿嶄綔</el-button>
+ <el-button type="primary" size="mini" @click="ganttZoomIn">鏀惧ぇ</el-button>
+ <el-button type="primary" size="mini" @click="ganttZoomOut">缂╁皬</el-button>
+ <el-date-picker
+ v-model="ganttDateRange"
+ style="margin-left: 10px;"
+ size="mini"
+ value-format="yyyy-MM-dd"
+ type="daterange"
+ :clearable="false"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ @change="ganttDateRangeChange"
+ />
+ <el-button type="primary" style="margin-left: 10px;" size="mini" @click="handleGetSelected">
+ 鑾峰彇澶嶉�夋閫変腑浠诲姟
+ </el-button>
+ <el-button size="mini" @click="handleClearSelection">
+ 娓呯┖澶嶉�夋閫夋嫨
+ </el-button>
+ </div>
+
+ <div id="gantt_here" style="width:100%; height:calc(90vh - 50px);" />
+
+ <!-- 鍒嗛〉缁勪欢 -->
+ <div class="pagination-container">
+ <el-pagination
+ :current-page="currentPage"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="totalTasks"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </div>
+</template>
+
+<script>
+import { gantt } from '@/components/dhtmlxGantt'
+import '@/components/dhtmlxGantt/codebase/dhtmlxgantt.css'
+import { handleDateReduceOneDay, handleDatetime } from '@/utils/global'
+
+export default {
+ data() {
+ return {
+ value: 'default',
+ ganttDateRange: ['2025-04-01', '2025-05-10'],
+ selectedIds: [],
+ // 鍒嗛〉鐩稿叧鏁版嵁
+ currentPage: 1,
+ pageSize: 10,
+ totalTasks: 0,
+ allTasks: [], // 瀛樺偍鎵�鏈変换鍔℃暟鎹�
+ paginatedTasks: [] // 褰撳墠椤电殑浠诲姟鏁版嵁
+ }
+ },
+ mounted() {
+ // 鍏堟敼鍙樻棩鏈熻寖鍥撮厤缃�
+ this.ganttDateRangeChange(this.ganttDateRange)
+
+ // 鍒濆鍖栫敇鐗瑰浘閰嶇疆
+ this.initGantt()
+
+ // 鐒跺悗鍔犺浇浠诲姟鏁版嵁锛堜細鑷姩娓叉煋褰撳墠椤碉級
+ this.loadTasks()
+ },
+ methods: {
+
+ initGantt() {
+ gantt.plugins({
+ auto_scheduling: true,
+ critical_path: true,
+ drag_timeline: true,
+ grouping: true,
+ keyboard_navigation: true,
+ marker: true,
+ multiselect: true,
+ tooltip: true,
+ undo: true
+ })
+ gantt.i18n.setLocale('cn')
+ gantt.config.multiselect = true // 寮�鍚浠诲姟閫夋嫨
+ gantt.config.show_links = false // 涓嶆樉绀鸿繛鎺ョ嚎
+ /* 鈫撯啌鈫� Auto-scheduling configuration 鈫撯啌鈫� */
+ gantt.config.auto_scheduling = true
+
+ /* 鈫撯啌鈫� Group configuration 鈫撯啌鈫� */
+ gantt.serverList('task_priority', [
+ { key: 1, label: '楂�' },
+ { key: 2, label: '涓瓑' },
+ { key: 3, label: '浣�' }
+ ])
+
+ gantt.serverList('task_status', [
+ { key: 1, label: 'Planning' },
+ { key: 2, label: 'Not started' },
+ { key: 3, label: 'In Progress' },
+ { key: 4, label: 'Complete' }
+ ])
+
+ function byId(list, id) {
+ for (let i = 0; i < list.length; i++) {
+ if (list[i].key == id) {
+ return list[i].label || ''
+ }
+ }
+ return ''
+ }
+
+ /* 鈫戔啈鈫� Group configuration 鈫戔啈鈫� */
+
+ // 鏀惧ぇ缂╁皬灞炴��
+ /* 鈫撯啌鈫� Zoom configuration 鈫撯啌鈫� */
+ const zoomConfig = {
+ levels: [
+ {
+ name: 'hour',
+ scale_height: 27,
+ min_column_width: 50,
+ scales: [
+ { unit: 'day', format: '%Y骞�%M%d鍙�' },
+ { unit: 'hour', format: '%H鏃�' }
+ ]
+ },
+ {
+ name: 'day',
+ scale_height: 27,
+ min_column_width: 80,
+ scales: [
+ // { unit: 'day', step: 1, format: '%d %M' }
+ { unit: 'day', step: 1, format: '%M%d鍙�' }
+ ]
+ },
+ {
+ name: 'week',
+ scale_height: 50,
+ min_column_width: 70,
+ scales: [
+ // {
+ // unit: 'week', step: 1, format: function(date) {
+ // const dateToStr = gantt.date.date_to_str('%d %M')
+ // const endDate = gantt.date.add(date, -6, 'day')
+ // const weekNum = gantt.date.date_to_str('%W')(date)
+ // return '绗�' + weekNum + '鍛�, ' + dateToStr(date) + ' - ' + dateToStr(endDate)
+ // }
+ // },
+ // %M
+ { unit: 'week', format: '%Y骞寸%W鍛�' },
+ { unit: 'day', step: 1, format: '%M%d鍙�' }
+ // { unit: 'day', step: 1, format: '%j %D' }
+ // { unit: 'day', step: 1, format: '鏄熸湡%D' }
+ ]
+ },
+ {
+ name: 'month',
+ scale_height: 50,
+ min_column_width: 120,
+ scales: [
+ // { unit: 'month', format: '%Y骞�%F' },
+ { unit: 'month', format: '%Y骞�%M' },
+ { unit: 'week', format: '绗�%W鍛�' }
+ ]
+ },
+ {
+ name: 'quarter',
+ height: 50,
+ min_column_width: 90,
+ scales: [
+ // {
+ // unit: 'quarter', step: 1, format: function(date) {
+ // const dateToStr = gantt.date.date_to_str('%M')
+ // const endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')
+ // return dateToStr(date) + ' - ' + dateToStr(endDate)
+ // }
+ // },
+ { unit: 'month', step: 1, format: '%Y骞�%M' }
+ ]
+ },
+ {
+ name: 'year',
+ scale_height: 50,
+ min_column_width: 30,
+ scales: [
+ { unit: 'year', step: 1, format: '%Y骞�' }
+
+ ]
+ }
+ ],
+ useKey: 'ctrlKey',
+ trigger: 'wheel',
+ element: function() {
+ return gantt.$root.querySelector('.gantt_task')
+ }
+ }
+ gantt.ext.zoom.init(zoomConfig)
+ gantt.ext.zoom.setLevel('week')
+ /* 鈫戔啈鈫� Zoom configuration 鈫戔啈鈫� */
+
+ // 鏄惁鏄伐浣滄椂闂�
+ /* 鈫撯啌鈫� Working Time configuration 鈫撯啌鈫� */
+ gantt.templates.scale_cell_class = function(date) {
+ if (!gantt.isWorkTime(date)) {
+ return 'weekend'
+ }
+ }
+
+ gantt.templates.timeline_cell_class = function(item, date) {
+ if (!gantt.isWorkTime({ date: date, task: item })) {
+ return 'weekend'
+ }
+ }
+
+ gantt.config.work_time = true
+
+ gantt.addCalendar({
+ id: 'custom1',
+ worktime: {
+ hours: ['8:00-12:30', '13:00-17:30'], // global work hours for weekdays
+ days: [0, 1, 1, 1, 1, 1, 1]
+ }
+ })
+
+ // gantt.addCalendar({
+ // id: 'custom2',
+ // hours: ['12:00-21:00'],
+ // days: [1, 0, 1, 0, 1, 0, 1]
+ // })
+ /* 鈫戔啈鈫� Working Time configuration 鈫戔啈鈫� */
+
+ // 鐢樼壒鍥惧垪鍙傛暟璁剧疆
+ /* 鈫撯啌鈫� Grid Columns configuration 鈫撯啌鈫� */
+ gantt.config.reorder_grid_columns = true
+ const textEditor = { type: 'text', map_to: 'text' }
+ const startDateEditor = { type: 'date', map_to: 'start_date' }
+ const durationEditor = { type: 'number', map_to: 'duration', min: 1, max: 100 }
+ gantt.config.columns = [
+ {
+ name: 'checked',
+ label: '閫夋嫨',
+ align: 'center',
+ width: 35,
+ resize: false,
+ // 鍏抽敭锛氱敤 template 杩斿洖涓�涓閫夋
+ template: (task) => {
+ const checked = task.checked ? 'checked' : ''
+ // data-action 鐢ㄤ簬鍦ㄤ簨浠跺鎵樻椂璇嗗埆鏄閫夋
+ return `<input type="checkbox" class="taskCheckBox" data-action="check-row" ${checked} />`
+ }
+ },
+ { name: 'wbs', label: '鑺傜偣', width: 80, template: gantt.getWBSCode },
+ { name: 'text', tree: true, label: '浠诲姟鍚嶇О', width: 200, resize: true, editor: textEditor },
+ { name: 'start_date', align: 'center', label: '寮�濮嬫棩鏈�', width: 80, resize: true, editor: startDateEditor },
+ {
+ name: 'duration',
+ width: 60,
+ align: 'center',
+ label: '宸ユ湡(澶�)',
+ resize: true,
+ editor: durationEditor,
+ template: function(task) {
+ // 濡傛灉duration鏄痭ull鎴杣ndefined锛岃繑鍥�0
+ // return (task.duration || 0) + 1 // 鍦ㄥ綋鍓峝uration鐨勫熀纭�涓婂姞1
+ return task.duration
+ }
+ },
+ {
+ name: 'owner', align: 'center', width: 75, label: '璐熻矗浜�', template: function(task) {
+ // if (task.type == gantt.config.types.project) {
+ // return ''
+ // }
+ //
+ // const store = gantt.getDatastore('resource')
+ // const assignments = task[gantt.config.resource_property]
+ //
+ // if (!assignments || !assignments.length) {
+ // return 'Unassigned'
+ // }
+ //
+ // if (assignments.length === 1) {
+ // return store.getItem(assignments[0].resource_id).text
+ // }
+ //
+ // let result = ''
+ // assignments.forEach(function(assignment) {
+ // const owner = store.getItem(assignment.resource_id)
+ // if (!owner) {
+ // return
+ // }
+ // result += '<div class=\'owner-label\' title=\'' + owner.text + '\'>' + owner.text.substr(0, 1) + '</div>'
+ // })
+ //
+ // return result
+ return '寮犱笁'
+ },
+ resize: true
+ },
+ {
+ name: 'priority', width: 60, label: '浼樺厛绾�', align: 'center', resize: true, template: function(task) {
+ return byId(gantt.serverList('task_priority'), task.priority)
+ }
+ },
+ { name: 'add', width: 44 }
+ ]
+ /* 鈫戔啈鈫� Grid Columns configuration 鈫戔啈鈫� */
+
+ // 姹夊寲绐楀彛
+ gantt.locale.labels = {
+ dhx_cal_today_button: '浠婂ぉ',
+ day_tab: '鏃�',
+ week_tab: '鍛�',
+ month_tab: '鏈�',
+ new_event: '鏂板缓鏃ョ▼',
+ icon_save: '淇濆瓨',
+ icon_cancel: '鍏抽棴',
+ icon_details: '璇︾粏',
+ icon_edit: '缂栬緫',
+ icon_delete: '鍒犻櫎',
+ confirm_closing: '璇风‘璁ゆ槸鍚︽挙閿�淇敼!', // Your changes will be lost, are your sure?
+ confirm_deleting: '鏄惁鍒犻櫎璁″垝?',
+ section_description: '鎻忚堪:',
+ section_resources: '鑷畾涔夐�夋嫨:',
+ section_calendar: '鑷畾涔夐�夋嫨2:',
+ section_time: '鏃堕棿鑼冨洿:',
+ section_type: '绫诲瀷:',
+ section_text: '璁″垝鍚嶇О:',
+ section_test: '娴嬭瘯:',
+ section_projectClass: '椤圭洰绫诲瀷:',
+ taskProjectType_0: '椤圭洰浠诲姟',
+ taskProjectType_1: '鏅�氫换鍔�',
+ section_head: '璐熻矗浜�:',
+ section_priority: '浼樺厛绾�:',
+ taskProgress: '浠诲姟鐘舵��',
+ taskProgress_0: '鏈紑濮�',
+ taskProgress_1: '杩涜涓�',
+ taskProgress_2: '宸插畬鎴�',
+ taskProgress_3: '宸插欢鏈�',
+ taskProgress_4: '鎼佺疆涓�',
+ section_template: 'Details',
+ /* grid columns */
+ column_text: '璁″垝鍚嶇О',
+ column_start_date: '寮�濮嬫椂闂�',
+ column_duration: '鎸佺画鏃堕棿',
+ column_add: '',
+ column_priority: '闅惧害',
+ /* link confirmation */
+ link: '鍏宠仈',
+ confirm_link_deleting: '灏嗚鍒犻櫎',
+ message_ok: '纭畾',
+ message_cancel: '鍙栨秷',
+ link_start: ' (寮�濮�)',
+ link_end: ' (缁撴潫)',
+
+ type_task: '浠诲姟',
+ type_project: '椤圭洰',
+ type_milestone: '閲岀▼纰�',
+ minutes: '鍒嗛挓',
+ hours: '灏忔椂',
+ days: '澶�',
+ weeks: '鍛�',
+ months: '鏈�',
+ years: '骞�'
+ }
+
+ gantt.config.lightbox.sections = [
+ { name: 'description', height: 38, map_to: 'text', type: 'textarea', focus: true },
+ {
+ name: 'resources', type: 'resources', map_to: 'owner', options: gantt.serverList('people'), default_value: 8
+ },
+ {
+ name: 'calendar', height: 25, map_to: 'calendar_id', type: 'select', options: [
+ { key: '', label: '榛樿' },
+ { key: 'custom1', label: '閫夐」涓�' },
+ { key: 'custom2', label: '閫夐」浜�' }
+ ]
+ },
+
+ { name: 'time', type: 'duration', map_to: 'auto' }
+ ]
+
+ gantt.config.resource_store = 'resource'
+ gantt.config.resource_property = 'owner'
+ gantt.config.order_branch = true
+ gantt.config.open_tree_initially = true
+
+ gantt.config.show_errors = false // 鍙戠敓寮傚父鏃讹紝涓嶅厑璁稿脊鍑鸿鍛婂埌 UI 鐣岄潰
+
+ const resourcesStore = gantt.createDatastore({
+ name: gantt.config.resource_store,
+ type: 'treeDatastore',
+ initItem: function(item) {
+ item.parent = item.parent || gantt.config.root_id
+ item[gantt.config.resource_property] = item.parent
+ item.open = true
+ return item
+ }
+ })
+
+ resourcesStore.attachEvent('onParse', function() {
+ const people = []
+ resourcesStore.eachItem(function(res) {
+ if (!resourcesStore.hasChild(res.id)) {
+ const copy = gantt.copy(res)
+ copy.key = res.id
+ copy.label = res.text
+ people.push(copy)
+ }
+ })
+ gantt.updateCollection('people', people)
+ })
+
+ resourcesStore.parse([
+ { id: 1, text: 'QA', parent: null },
+ { id: 2, text: 'Development', parent: null },
+ { id: 3, text: 'Sales', parent: null },
+ { id: 4, text: 'Other', parent: null },
+ { id: 5, text: 'Unassigned', parent: 4 },
+ { id: 6, text: 'John', parent: 1, unit: 'hours/day' },
+ { id: 7, text: 'Mike', parent: 2, unit: 'hours/day' },
+ { id: 8, text: 'Anna', parent: 2, unit: 'hours/day' },
+ { id: 9, text: 'Bill', parent: 3, unit: 'hours/day' },
+ { id: 10, text: 'Floe', parent: 3, unit: 'hours/day' }
+ ])
+ /* 鈫戔啈鈫� Resource configuration 鈫戔啈鈫� */
+
+ gantt.config.grid_elastic_columns = true
+
+ // 鑷畾涔夋诞鍔ㄦ鐨勬樉绀哄唴瀹� tooltip娴姩妗嗘樉绀虹殑End Date琚拷鍔�1鐨勯棶棰樹慨澶嶏紙搴旇鏄剧ず鏁版嵁搴撶殑鍘熷鍊硷級
+ gantt.templates.tooltip_text = function(start, end, task) {
+ return '<b>浠诲姟:</b> ' + task.text + '<br/><b>寮�濮嬫椂闂�:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>缁撴潫鏃堕棿:</b> ' + handleDateReduceOneDay(end)
+ }
+
+ gantt.init('gantt_here')
+ // 娉ㄦ剰锛氳繖閲屼笉绔嬪嵆鍔犺浇鏁版嵁锛岃�屾槸绛夊緟loadTasks琚皟鐢�
+
+ // 缁戝畾鐢樼壒鍥剧偣鍑讳簨浠讹紙瀹樻柟鎺ㄨ崘鐨勪簨浠跺鎵樼敤娉曪級
+ gantt.attachEvent('onTaskClick', (id, e) => {
+ // 鎵惧埌鐐瑰嚮鐨勬槸鍚︽槸澶嶉�夋
+ const checkbox = e.target.closest('[data-action="check-row"]')
+ if (!checkbox) {
+ // 涓嶆槸鐐瑰閫夋锛屽氨淇濇寔榛樿琛屼负
+ return true
+ }
+
+ // 鏄閫夋锛氬垏鎹㈤�変腑鐘舵��
+ const task = gantt.getTask(id)
+ if (task) {
+ task.checked = !task.checked
+ // 鍚屾椂鏇存柊鍏ㄥ眬鏁版嵁
+ const globalTask = this.allTasks.find(t => t.id === id)
+ if (globalTask) {
+ globalTask.checked = task.checked
+ }
+ gantt.updateTask(id) // 鍙埛鏂拌繖涓�琛岋紝鎬ц兘鏇村ソ
+ this.syncSelected() // 鍚屾鍒� Vue 鐨� selectedIds
+ }
+
+ // 闃绘榛樿鐐瑰嚮琛岃涓猴紙閬垮厤璇Е鍙戝叾浠栭�昏緫锛�
+ return false
+ })
+
+ // 鍒濆鍖栧畬鎴愬悗鍚屾涓�娆￠�変腑鐘舵��
+ this.syncSelected()
+ },
+
+ // 鍔犺浇浠诲姟鏁版嵁
+ loadTasks() {
+ // 浣跨敤鍘熸湁鐨勭ず渚嬫暟鎹綔涓哄熀纭�
+ this.allTasks = [
+ {
+ 'id': 1,
+ 'text': '椤圭洰1',
+ 'type': 'project',
+ 'start_date': '2025-04-02 00:00',
+ 'end_date': '2025-04-07 00:00',
+ 'duration': 5,
+ 'progress': 0.4,
+ 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ 'parent': 0,
+ 'checked': false
+ },
+ {
+ 'id': 2,
+ 'text': '椤圭洰2',
+ 'type': 'project',
+ 'start_date': '02-04-2025 00:00',
+ 'duration': 8,
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'parent': '1',
+ checked: false
+ },
+ {
+ 'id': 3,
+ 'text': '椤圭洰3',
+ 'type': 'project',
+ 'start_date': '11-04-2025 00:00',
+ 'duration': 8,
+ 'parent': '1',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 4,
+ 'text': '椤圭洰4',
+ 'type': 'project',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '1',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'priority': 3,
+ checked: true
+ },
+ {
+ 'id': 5,
+ 'text': '浠诲姟5',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 7,
+ 'parent': '2',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '6', 'value': 5 }],
+ 'priority': 1,
+ checked: true
+ },
+ {
+ 'id': 6,
+ 'text': '浠诲姟6',
+ 'type': 'task',
+ 'calendar_id': 'custom1',
+ 'start_date': '03-04-2025 12:00',
+ 'duration': 7,
+ 'parent': '2',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '7', 'value': 1 }],
+ 'priority': 2,
+ checked: false
+ },
+ {
+ 'id': 7,
+ 'text': '浠诲姟7',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '12-04-2025 00:00',
+ 'duration': 8,
+ 'parent': '3',
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '10', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 8,
+ 'text': '浠诲姟8',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '14-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '10', 'value': 4 }, { 'resource_id': '9', 'value': 5 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 9,
+ 'text': '浠诲姟9',
+ 'type': 'task',
+ 'start_date': '21-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '7', 'value': 3 }],
+ checked: false
+ },
+ {
+ 'id': 10,
+ 'text': '浠诲姟10',
+ 'type': 'task',
+ 'start_date': '27-04-2025 00:00',
+ 'duration': 3,
+ 'parent': '4',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '8', 'value': 5 }],
+ 'priority': 2,
+ checked: false
+ },
+ {
+ 'id': 11,
+ 'text': '椤圭洰11',
+ 'type': 'project',
+ 'progress': 0.6,
+ 'start_date': '02-04-2025 00:00',
+ 'duration': 13,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'parent': 0,
+ checked: false
+ },
+ {
+ 'id': 12,
+ 'text': '浠诲姟12',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '11',
+ 'progress': 1,
+ 'owner': [{ 'resource_id': '7', 'value': 6 }],
+ checked: false
+ },
+ {
+ 'id': 13,
+ 'text': '椤圭洰13',
+ 'type': 'project',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 11,
+ 'parent': '11',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 14,
+ 'text': '浠诲姟14',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 6,
+ 'parent': '11',
+ 'owner': [],
+ 'progress': 0.8,
+ checked: false
+ },
+ {
+ 'id': 15,
+ 'text': '椤圭洰15',
+ 'type': 'project',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '11',
+ 'progress': 0.2,
+ 'owner': [{ 'resource_id': '5', 'value': 5 }],
+ checked: false
+ },
+ {
+ 'id': 16,
+ 'text': '浠诲姟16',
+ 'calendar_id': 'custom2',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 7,
+ 'parent': '11',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '7', 'value': 2 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 17,
+ 'text': '浠诲姟17',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 2,
+ 'parent': '13',
+ 'progress': 1,
+ 'owner': [{ 'resource_id': '8', 'value': 1 }],
+ 'priority': 2,
+ checked: false
+ },
+
+ {
+ 'id': 18,
+ 'text': '浠诲姟19',
+ 'type': 'task',
+ 'start_date': '10-04-2025 00:00',
+ 'duration': 2,
+ 'parent': '13',
+ 'progress': 0.8,
+ 'owner': [{ 'resource_id': '6', 'value': 2 }],
+ 'priority': 3,
+ checked: false
+ },
+ {
+ 'id': 19,
+ 'text': '浠诲姟20',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '13',
+ 'progress': 0.2,
+ 'owner': [{ 'resource_id': '6', 'value': 3 }],
+ checked: false
+ },
+ {
+ 'id': 20,
+ 'text': '浠诲姟21',
+ 'type': 'task',
+ 'start_date': '13-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '13',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '8', 'value': 4 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 21,
+ 'text': '浠诲姟22',
+ 'type': 'project',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '0',
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '6', 'value': 5 }],
+ checked: false
+ },
+ {
+ 'id': 22,
+ 'text': '浠诲姟23',
+ 'calendar_id': 'custom1',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 4,
+ 'parent': '21',
+ 'progress': 0.1,
+ 'owner': [{ 'resource_id': '8', 'value': 3 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 23,
+ 'text': '浠诲姟24',
+ 'type': 'task',
+ 'start_date': '03-04-2025 00:00',
+ 'duration': 5,
+ 'parent': '21',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '8', 'value': 5 }],
+ 'priority': 1,
+ checked: false
+ },
+ {
+ 'id': 24,
+ 'text': '浠诲姟25',
+ // 'type': 'milestone',
+ 'type': 'task',
+ 'start_date': '20-04-2025 00:00',
+ 'parent': '21',
+ 'progress': 0,
+ 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ 'duration': 2,
+ checked: false
+ }
+ ]
+
+ // 娣诲姞鏇村绀轰緥鏁版嵁锛屼娇鍒嗛〉鏁堟灉鏇存槑鏄�
+ // for (let i = 25; i <= 100; i++) {
+ // this.allTasks.push({
+ // 'id': i,
+ // 'text': '浠诲姟' + i,
+ // 'type': 'task',
+ // // 'start_date': handleDatetime(`0${Math.floor(Math.random() * 9 + 1)}-04-2025 00:00`),
+ // 'start_date': `0${Math.floor(Math.random() * 9 + 1)}-04-2025 00:00`,
+ // 'duration': Math.floor(Math.random() * 5) + 1,
+ // 'parent': Math.floor(Math.random() * 10) + 1,
+ // 'progress': Math.random(),
+ // 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ // 'priority': Math.floor(Math.random() * 3) + 1,
+ // 'checked': false
+ // })
+ // }
+ console.log(JSON.parse(JSON.stringify(this.allTasks)))
+ this.totalTasks = this.allTasks.length
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ },
+
+ // 鏇存柊鍒嗛〉鍚庣殑浠诲姟鏁版嵁
+ updatePaginatedTasks() {
+ const startIndex = (this.currentPage - 1) * this.pageSize
+ const endIndex = Math.min(startIndex + this.pageSize, this.allTasks.length)
+ this.paginatedTasks = this.allTasks.slice(startIndex, endIndex)
+ },
+
+ // 娓叉煋鐢樼壒鍥�
+ renderGanttChart() {
+ gantt.clearAll()
+ console.log(JSON.parse(JSON.stringify(this.paginatedTasks)))
+ gantt.parse({
+ 'data': this.paginatedTasks
+ })
+ // 纭繚鐢樼壒鍥鹃噸鏂版覆鏌�
+ // gantt.render()
+ },
+
+ // 椤靛ぇ灏忔敼鍙�
+ handleSizeChange(newSize) {
+ this.pageSize = newSize
+ this.currentPage = 1 // 閲嶇疆鍒扮涓�椤�
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ this.syncSelected()
+ },
+
+ // 褰撳墠椤垫敼鍙�
+ handleCurrentChange(newPage) {
+ // 璁＄畻鏈�澶ч〉鏁帮紝闃叉瓒呭嚭鑼冨洿
+ const maxPage = Math.ceil(this.totalTasks / this.pageSize)
+ if (newPage > maxPage) {
+ this.currentPage = maxPage
+ } else if (newPage < 1) {
+ this.currentPage = 1
+ } else {
+ this.currentPage = newPage
+ }
+
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ this.syncSelected()
+ },
+ // 鐢樼壒鍥炬棩鏈熸敼鍙�
+ ganttDateRangeChange(val) {
+ gantt.config.start_date = val[0]
+ gantt.config.end_date = val[1]
+ gantt.render()
+ },
+ // 鍥為��鎷栧姩鎿嶄綔
+ ganttUndo() {
+ gantt.undo()
+ },
+ // 鍓嶈繘鎷栧姩鎿嶄綔
+ ganttRedo() {
+ gantt.redo()
+ },
+ // 鏀惧ぇ
+ ganttZoomIn() {
+ gantt.ext.zoom.zoomIn()
+ },
+ // 缂╁皬
+ ganttZoomOut() {
+ gantt.ext.zoom.zoomOut()
+ },
+
+ // 浠庣敇鐗瑰浘涓悓姝ラ�変腑鐨� id 鍒� Vue data
+ syncSelected() {
+ // 鍚屾褰撳墠椤甸潰浠诲姟鍒板叏灞�鏁版嵁
+ gantt.eachTask((task) => {
+ const globalTask = this.allTasks.find(t => t.id === task.id)
+ if (globalTask) {
+ globalTask.checked = task.checked
+ }
+ })
+
+ // 鑾峰彇鎵�鏈夐�変腑鐨勪换鍔D
+ this.selectedIds = this.allTasks.filter(t => t.checked).map(t => t.id)
+ console.log(this.selectedIds)
+ },
+
+ // 鑾峰彇閫変腑浠诲姟锛堢ず渚嬶級
+ handleGetSelected() {
+ const selected = this.allTasks.filter(t => t.checked)
+ this.$notify.success(`褰撳墠宸查�変腑${selected.length} 鏉′换鍔)
+ },
+
+ // 娓呯┖鎵�鏈夐�夋嫨
+ handleClearSelection() {
+ // 閬嶅巻鎵�鏈変换鍔★紝灏� checked 灞炴�ц缃负 false
+ this.allTasks.forEach(task => {
+ task.checked = false
+ })
+
+ // 鏇存柊褰撳墠椤甸潰鏄剧ず鐨勪换鍔�
+ gantt.eachTask((task) => {
+ task.checked = false
+ gantt.updateTask(task.id)
+ })
+
+ // 鍚屾鍒� Vue 缁勪欢鏁版嵁
+ this.syncSelected()
+
+ // 鏄剧ず鎻愮ず淇℃伅
+ this.$notify.success('宸叉竻绌烘墍鏈夐�夋嫨')
+ }
+
+ }
+}
+
+</script>
+
+<style>
+body,
+html {
+ width: 100%;
+ height: 100%;
+ margin: unset;
+}
+
+.taskCheckBox {
+ cursor: pointer;
+}
+
+/* 鍒嗛〉瀹瑰櫒鏍峰紡 */
+.pagination-container {
+ margin-top: 10px;
+ display: flex;
+ justify-content: end;
+ padding: 10px 0;
+ background-color: #fff;
+ border-top: 1px solid #ebeef5;
+}
+</style>
--
Gitblit v1.9.3