From 70e1ded3cea2c5a948eaf0dc6f44098ec6cd7a6a Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 15 一月 2026 09:24:43 +0800
Subject: [PATCH] 1.甘特图优化
---
src/views/gantt/index.vue | 751 ++++-----------------------------------------------------
1 files changed, 59 insertions(+), 692 deletions(-)
diff --git a/src/views/gantt/index.vue b/src/views/gantt/index.vue
index 702da5f..491fef9 100644
--- a/src/views/gantt/index.vue
+++ b/src/views/gantt/index.vue
@@ -1,30 +1,5 @@
<template>
<div style="padding: 0 10px">
- <!-- <input value="淇濆瓨鍒版湰鍦板瓨鍌�" class="local_storage" type="button" @click="saveToLocalStorage()">-->
- <!-- <input value="浠庢湰鍦板瓨鍌ㄥ姞杞�" class="local_storage" type="button" @click="loadFromLocalStorage()">-->
-
- <!-- <input value="鎿嶄綔鍥為��" type="button" onclick="gantt.undo()">-->
- <!-- <input value="鎿嶄綔鍓嶈繘" type="button" onclick="gantt.redo()">-->
-
- <!-- <input type="button" value="鏀惧ぇ" onclick="gantt.ext.zoom.zoomIn();">-->
- <!-- <input type="button" value="缂╁皬" onclick="gantt.ext.zoom.zoomOut();">-->
-
- <!-- <input class="start_date" type="date" value="2025-04-01" @change="changeDates()">-->
- <!-- <input class="end_date" type="date" value="2025-05-10" @change="changeDates()">-->
-
- <!-- <input type="button" value="Group by priority" @click="group('priority')">-->
- <!-- <input type="button" value="Group by resources" @click="group('owner')">-->
- <!-- <input type="button" value="Reset grouping" @click="group()">-->
-
- <!-- <label>褰撳墠甯冨眬:-->
- <!-- <select class="layout_config" name="layout" @input="changeLayout(this.value)">-->
- <!-- <option value="default">Default</option>-->
- <!-- <option value="horizontalScrollbars">Horinzontal Scrollbars</option>-->
- <!-- <option value="resource">With Resource Panel</option>-->
- <!-- <option value="universal">Universal</option>-->
- <!-- <option value="complexScrollbars">Complex with scrollbars</option>-->
- <!-- </select>-->
- <!-- </label>-->
<div style="padding: 10px 0;display: flex;">
<el-button type="primary" size="mini" @click="ganttUndo">鍥為��鎷栧姩鎿嶄綔</el-button>
@@ -35,6 +10,7 @@
v-model="ganttDateRange"
style="margin-left: 10px;"
size="mini"
+ value-format="yyyy-MM-dd"
type="daterange"
:clearable="false"
range-separator="鑷�"
@@ -45,9 +21,9 @@
<el-button type="primary" style="margin-left: 10px;" size="mini" @click="handleGetSelected">
鑾峰彇澶嶉�夋閫変腑浠诲姟
</el-button>
- <!-- <el-button size="mini" @click="handleClearSelection">-->
- <!-- 娓呯┖澶嶉�夋閫夋嫨-->
- <!-- </el-button>-->
+ <el-button size="mini" @click="handleClearSelection">
+ 娓呯┖澶嶉�夋閫夋嫨
+ </el-button>
</div>
<div id="gantt_here" style="width:100%; height:90vh;" />
@@ -55,11 +31,9 @@
</template>
<script>
-// import { gantt } from 'dhtmlx-gantt'
-// import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
-
import { gantt } from '@/components/dhtmlxGantt'
import '@/components/dhtmlxGantt/codebase/dhtmlxgantt.css'
+import { handleDateReduceOneDay } from '@/utils/global'
export default {
data() {
@@ -70,6 +44,7 @@
}
},
mounted() {
+ this.ganttDateRangeChange(this.ganttDateRange)
this.init()
},
methods: {
@@ -91,14 +66,6 @@
gantt.config.multiselect = true // 寮�鍚浠诲姟閫夋嫨
/* 鈫撯啌鈫� Auto-scheduling configuration 鈫撯啌鈫� */
gantt.config.auto_scheduling = true
-
- // gantt.config.project_start = new Date(2025, 03, 05);
- gantt.config.project_start = '2025/03/05'
-
- gantt.addMarker({
- text: '椤圭洰寮�濮�',
- start_date: gantt.config.project_start
- })
function renderDiv(task, date, className) {
const el = document.createElement('div')
@@ -181,13 +148,13 @@
min_column_width: 80,
scales: [
// { unit: 'day', step: 1, format: '%d %M' }
- { unit: 'day', step: 1, format: '%M鏈�%d鍙�' }
+ { unit: 'day', step: 1, format: '%M%d鍙�' }
]
},
{
name: 'week',
scale_height: 50,
- min_column_width: 50,
+ min_column_width: 70,
scales: [
// {
// unit: 'week', step: 1, format: function(date) {
@@ -197,9 +164,11 @@
// return '绗�' + weekNum + '鍛�, ' + dateToStr(date) + ' - ' + dateToStr(endDate)
// }
// },
- { unit: 'week', format: '%Y骞�%M绗�%W鍛�' },
+ // %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' }
+ // { unit: 'day', step: 1, format: '鏄熸湡%D' }
]
},
{
@@ -305,9 +274,21 @@
{ 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 },
{
- name: 'owner', align: 'center', width: 75, label: '浣滆��', template: function(task) {
+ 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 ''
}
@@ -521,16 +502,22 @@
/* 鈫戔啈鈫� Layout configuration 鈫戔啈鈫� */
+ // 鑷畾涔夋诞鍔ㄦ鐨勬樉绀哄唴瀹� 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',
+ 'text': '椤圭洰1',
'type': 'project',
- 'start_date': '02-04-2025 00:00',
- 'duration': 17,
+ '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,
@@ -538,7 +525,7 @@
},
{
'id': 2,
- 'text': '浠诲姟2',
+ 'text': '椤圭洰2',
'type': 'project',
'start_date': '02-04-2025 00:00',
'duration': 8,
@@ -549,7 +536,7 @@
},
{
'id': 3,
- 'text': '浠诲姟3',
+ 'text': '椤圭洰3',
'type': 'project',
'start_date': '11-04-2025 00:00',
'duration': 8,
@@ -560,7 +547,7 @@
},
{
'id': 4,
- 'text': '浠诲姟4',
+ 'text': '椤圭洰4',
'type': 'project',
'start_date': '13-04-2025 00:00',
'duration': 5,
@@ -669,7 +656,7 @@
},
{
'id': 13,
- 'text': '浠诲姟13',
+ 'text': '椤圭洰13',
'type': 'project',
'start_date': '03-04-2025 00:00',
'duration': 11,
@@ -692,7 +679,7 @@
},
{
'id': 15,
- 'text': '浠诲姟15',
+ 'text': '椤圭洰15',
'type': 'project',
'start_date': '03-04-2025 00:00',
'duration': 5,
@@ -729,13 +716,12 @@
{
'id': 25,
'text': '浠诲姟18',
- // 'type': 'milestone',
'type': 'task',
'start_date': '06-04-2025 00:00',
'parent': '13',
'progress': 0,
'owner': [{ 'resource_id': '5', 'value': 1 }],
- 'duration': 0,
+ 'duration': 2,
checked: false
},
{
@@ -819,21 +805,11 @@
'parent': '11',
'progress': 0,
'owner': [{ 'resource_id': '5', 'value': 3 }],
- 'duration': 0,
+ 'duration': 2,
checked: false
}
]
- // "links": [
- // { "id": "2", "source": "2", "target": "3", "type": "0" },
- // { "id": "3", "source": "3", "target": "4", "type": "0" },
- // { "id": "7", "source": "8", "target": "9", "type": "0" },
- // { "id": "8", "source": "9", "target": "10", "type": "0" },
- // { "id": "16", "source": "17", "target": "25", "type": "0" },
- // { "id": "17", "source": "18", "target": "19", "type": "0" },
- // { "id": "18", "source": "19", "target": "20", "type": "0" },
- // { "id": "22", "source": "13", "target": "24", "type": "0" },
- // { "id": "23", "source": "25", "target": "18", "type": "0" }
- // ]
+
})
// 缁戝畾鐢樼壒鍥剧偣鍑讳簨浠讹紙瀹樻柟鎺ㄨ崘鐨勪簨浠跺鎵樼敤娉曪級<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>
@@ -861,285 +837,6 @@
this.syncSelected()
},
- // 淇濆瓨鍒版湰鍦板瓨鍌�
- loadFromLocalStorage() {
- this.loadGeneralConfig()
- this.loadStacks()
- this.loadGridColumnsConfig()
- this.loadLayoutConfig()
- this.loadVariousConfig()
- },
- // 浠庢湰鍦板瓨鍌ㄥ姞杞�
- saveToLocalStorage() {
- this.saveGeneralConfig()
- this.saveVariousConfig()
- this.saveGridColumnsConfig()
- this.saveLayoutConfig()
- this.saveStacks()
- },
-
- saveGeneralConfig() {
- const generalConfig = {}
- // add properties that you want to save in the local storage
- const properties = [
- 'grid_width',
- 'start_date',
- 'end_date'
-
- // examples of the properties you may want to add
- // "skip_off_time",
- // "show_tasks_outside_timescale",
- // "rtl",
- // "resize_rows",
- // "keyboard_navigation",
- // "keyboard_navigation_cells",
- ]
- properties.forEach(function(prop) {
- switch (typeof gantt.config[prop]) {
- case 'number':
- case 'string':
- case 'boolean':
- generalConfig[prop] = gantt.config[prop]
- break
- case 'object':
- if (gantt.config[prop] && typeof gantt.config[prop].getMonth === 'function') {
- generalConfig[prop] = gantt.date.date_to_str(gantt.config.date_format)(gantt.config[prop])
- }
- break
- // objects and methods should be set from the application
- }
- })
-
- const storageName = `DHTMLX Gantt: General Configuration`
- const serializedConfig = JSON.stringify(generalConfig) + ''
- localStorage.setItem(storageName, serializedConfig)
- },
-
- loadGeneralConfig() {
- const storageName = `DHTMLX Gantt: General Configuration`
- const loadedConfig = localStorage.getItem(storageName)
- const generalConfig = JSON.parse(loadedConfig)
-
- const dateProperties = [
- 'start_date',
- 'end_date',
- 'project_start',
- 'project_end'
- ]
- dateProperties.forEach(function(prop) {
- if (generalConfig[prop]) {
- generalConfig[prop] = gantt.date.str_to_date(gantt.config.date_format)(generalConfig[prop])
- }
- })
- gantt.mixin(gantt.config, generalConfig, true)
- },
-
- saveVariousConfig() {
- const variousConfig = {
- scrollState: gantt.getScrollState(),
- groupMode: gantt.getState().group_mode,
- zoomLevel: gantt.ext.zoom.getCurrentLevel()
- }
-
- const storageName = `DHTMLX Gantt: Various Configuration`
- const serializedConfig = JSON.stringify(variousConfig) + ''
- localStorage.setItem(storageName, serializedConfig)
- },
-
- loadVariousConfig() {
- const storageName = `DHTMLX Gantt: Various Configuration`
- const loadedConfig = localStorage.getItem(storageName)
- const variousConfig = JSON.parse(loadedConfig)
-
- gantt.scrollTo(variousConfig.scrollState.x, variousConfig.scrollState.y)
-
- if (variousConfig.groupMode) {
- // this is a custom function. in your case, it may be a different name
- this.group(variousConfig.groupMode)
- }
-
- gantt.ext.zoom.setLevel(variousConfig.zoomLevel)
- },
-
- saveGridColumnsConfig() {
- const storageName = `DHTMLX Gantt: Grid Columns Configuration`
- const serializedConfig = JSON.stringify(gantt.config.columns) + ''
- // objects and functions cannot be saved
- localStorage.setItem(storageName, serializedConfig)
- },
-
- loadGridColumnsConfig() {
- const storageName = `DHTMLX Gantt: Grid Columns Configuration`
- const loadedConfig = localStorage.getItem(storageName)
- const gridColumnsConfig = JSON.parse(loadedConfig)
-
- // as objects and functions cannot be saved, we add them from the existing columns
- // also, this approach helps saving the column order
- gridColumnsConfig.forEach(function(column) {
- const existingColumn = gantt.getGridColumn(column.name)
- gantt.mixin(column, existingColumn, false)
- })
-
- gantt.config.columns = gridColumnsConfig
- },
-
- saveLayoutConfig() {
- const layoutConfig = {
- currentLayout,
- gridWidth: gantt.getLayoutView('grid').$state.width
- }
-
- switch (layoutConfig.currentLayout) {
- case 'resource':
- layoutConfig.ganttPanelHeight = gantt.getLayoutView('ganttPanelCell').$lastSize.y
- case 'default':
- layoutConfig.gridWidth = gantt.config.grid_width
- break
-
- case 'universal':
- case 'complexScrollbars':
- layoutConfig.ganttPanelHeight = gantt.getLayoutView('mainGrid').$lastSize.y
- break
- }
-
- const storageName = `DHTMLX Gantt: Layout Configuration`
- const serializedConfig = JSON.stringify(layoutConfig) + ''
- localStorage.setItem(storageName, serializedConfig)
- },
-
- loadLayoutConfig() {
- const storageName = `DHTMLX Gantt: Layout Configuration`
- const loadedConfig = localStorage.getItem(storageName)
- const layoutConfig = JSON.parse(loadedConfig)
-
- this.changeLayout(layoutConfig.currentLayout)
- document.querySelector('.layout_config').value = layoutConfig.currentLayout
-
- switch (layoutConfig.currentLayout) {
- case 'horizontalScrollbars':
- gantt.config.layout.cols[0].width = layoutConfig.gridWidth
-
- break
- case 'resource':
- gantt.config.layout.rows[0].height = layoutConfig.ganttPanelHeight
-
- break
- case 'universal':
- case 'complexScrollbars':
- gantt.config.layout.cols[0].width = layoutConfig.gridWidth
- gantt.config.layout.cols[0].rows[0].height = layoutConfig.ganttPanelHeight
- gantt.config.layout.cols[2].rows[0].height = layoutConfig.ganttPanelHeight
- break
- }
-
- gantt.init('gantt_here')
-
- // with the rows[cols[]] layout configuration, we need to rely
- // on the grid_width config, and it is correctly applied only
- // after we use the `render` method
- if (layoutConfig.currentLayout == 'default' || layoutConfig.currentLayout == 'resource') {
- gantt.config.grid_width = layoutConfig.gridWidth
- gantt.render()
- }
- },
-
- saveStacks() {
- this.saveStack('Undo')
- this.saveStack('Redo')
- },
-
- loadStacks() {
- this.loadStack('Undo')
- this.loadStack('Redo')
- },
-
- saveStack(stackType) {
- const stack = gantt.copy(gantt[`get${stackType}Stack`]())
- stack.forEach(function(action) {
- action.commands.forEach(function(command) {
- command.oldValue = gantt.json.serializeTask(command.oldValue)
- command.value = gantt.json.serializeTask(command.value)
- const assignments = gantt.config.resource_property
- // if (command.oldValue[assignments]) {
- // for (assignment in command.oldValue[assignments]) {
- // command.oldValue[assignments][assignment] = gantt.json.serializeTask(command.oldValue[assignments][assignment])
- // }
- // }
- // if (command.value[assignments]) {
- // for (assignment in command.value[assignments]) {
- // command.value[assignments][assignment] = gantt.json.serializeTask(command.value[assignments][assignment])
- // }
- // }
- })
- })
-
- const serializedStack = JSON.stringify(stack) + ''
- const storageName = `DHTMLX Gantt: ${stackType} Stack`
- localStorage.setItem(storageName, serializedStack)
- },
-
- loadStack(stackType) {
- const storageName = `DHTMLX Gantt: ${stackType} Stack`
- const serializedStack = localStorage.getItem(storageName)
- const loadedStack = JSON.parse(serializedStack)
-
- loadedStack.forEach(function(action) {
- action.commands.forEach(function(command) {
- convertDateProperties(command.oldValue)
- convertDateProperties(command.value)
-
- const assignments = gantt.config.resource_property
- // if (command.oldValue[assignments]) {
- // for (assignment in command.oldValue[assignments]) {
- // convertDateProperties(command.oldValue[assignments][assignment])
- // }
- // }
- // if (command.value[assignments]) {
- // for (assignment in command.value[assignments]) {
- // convertDateProperties(command.value[assignments][assignment])
- // }
- // }
- })
- })
-
- gantt[`clear${stackType}Stack`]()
-
- const stack = gantt[`get${stackType}Stack`]()
- loadedStack.forEach(function(action) {
- stack.push(action)
- })
-
- function convertDateProperties(obj) {
- const dateProperties = [
- 'start_date',
- 'end_date',
- 'constraint_date'
- ]
-
- dateProperties.forEach(function(prop) {
- if (obj[prop]) {
- obj[prop] = gantt.date.parseDate(obj[prop], gantt.config.date_format)
- }
- })
- }
- },
-
- // changeDates() {
- // const startDateEl = document.querySelector('.start_date')
- // const endDateEl = document.querySelector('.end_date')
- // const startDate = new Date(startDateEl.value)
- // const endDate = new Date(endDateEl.value)
- // console.log(startDate)
- // console.log(endDate)
- // if (!+startDate || !+endDate) {
- // return
- // }
- //
- // gantt.config.start_date = startDate
- // gantt.config.end_date = endDate
- // gantt.render()
- // },
-
ganttDateRangeChange(val) {
gantt.config.start_date = val[0]
gantt.config.end_date = val[1]
@@ -1159,339 +856,9 @@
gantt.ext.zoom.zoomOut()
},
- // 鍒嗙粍
- group(type) {
- switch (type) {
- case 'priority':
- gantt.groupBy({
- groups: gantt.serverList('task_priority'),
- relation_property: type,
- group_id: 'key',
- group_text: 'label'
- })
-
- break
- case 'owner':
- const groups = gantt.getDatastore('resource').getItems().map(function(item) {
- const group = gantt.copy(item)
- group.group_id = group.id
- group.id = gantt.uid()
- return group
- })
-
- gantt.groupBy({
- groups: groups,
- relation_property: gantt.config.resource_property,
- group_id: 'group_id',
- group_text: 'text',
- delimiter: ', ',
- default_group_label: 'Not Assigned'
- })
-
- break
-
- default:
- gantt.groupBy(false)
- break
- }
- },
- changeLayout(value) {
- console.log(value)
- // currentLayout = value
-
- const resourceConfig = {
- columns: [
- {
- name: 'name', label: 'Name', tree: true, template: function(resource) {
- return resource.text
- }
- },
- {
- name: 'workload', label: 'Workload', template: function(resource) {
- let totalDuration = 0
- if (resource.$level == 2) {
- const assignment = gantt.getResourceAssignments(resource.$resource_id, resource.$task_id)[0]
- totalDuration = resource.duration * assignment.value
- } else {
- const assignments = getResourceAssignments(resource.id)
- assignments.forEach(function(assignment) {
- const task = gantt.getTask(assignment.task_id)
- totalDuration += Number(assignment.value) * task.duration
- })
- }
-
- return (totalDuration || 0) + 'h'
- }
- }
- ]
- }
-
- const defaultLayout = {
- css: 'gantt_container',
- rows: [
- {
- cols: [
- {
- // the default grid view
- view: 'grid',
- scrollX: 'scrollHor',
- scrollY: 'scrollVer'
- },
- { resizer: true, width: 1 },
- {
- // the default timeline view
- view: 'timeline',
- scrollX: 'scrollHor',
- scrollY: 'scrollVer'
- },
- {
- view: 'scrollbar',
- id: 'scrollVer'
- }
- ]
- },
- {
- view: 'scrollbar',
- id: 'scrollHor'
- }
- ]
- }
-
- const gridWidthScrollbarLayout = {
- css: 'gantt_container',
- cols: [
- {
- rows: [
- {
- view: 'grid',
- scrollable: true,
- scrollX: 'scrollHor1',
- scrollY: 'scrollVer'
- },
- {
- view: 'scrollbar',
- id: 'scrollHor1',
- scroll: 'x',
- group: 'hor'
- }
- ]
- },
- { resizer: true, width: 1 },
- {
- rows: [
- {
- view: 'timeline',
- scrollX: 'scrollHor',
- scrollY: 'scrollVer'
- },
- {
- view: 'scrollbar',
- id: 'scrollHor',
- scroll: 'x',
- group: 'hor'
- }
- ]
- },
- {
- view: 'scrollbar',
- id: 'scrollVer'
- }
- ]
- }
-
- const resourceLayoutGeneral = {
- css: 'gantt_container',
- rows: [
- {
- id: 'ganttPanelCell',
- cols: [
- { view: 'grid', group: 'grids', scrollY: 'scrollVer' },
- { resizer: true, width: 1 },
- { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
- { view: 'scrollbar', id: 'scrollVer', group: 'vertical' }
- ],
- gravity: 2
- },
- { resizer: true, width: 1 },
- {
- config: resourceConfig,
- cols: [
- { view: 'resourceGrid', group: 'grids', width: 435, scrollY: 'resourceVScroll' },
- { resizer: true, width: 1 },
- { view: 'resourceTimeline', scrollX: 'scrollHor', scrollY: 'resourceVScroll' },
- { view: 'scrollbar', id: 'resourceVScroll', group: 'vertical' }
- ],
- gravity: 1
- },
- { view: 'scrollbar', id: 'scrollHor' }
- ]
- }
-
- const universalLayout = {
- css: 'gantt_container',
- cols: [
- {
- width: 400,
- rows: [
- {
- id: 'mainGrid',
- linkedView: 'mainTimeline',
- group: 'gantt',
- cols: [
- {
- rows: [
- { view: 'grid', scrollX: 'gridScrollX', scrollable: true, scrollY: 'scrollVer' }
- ]
- }
- ]
- },
- { resizer: true, width: 1 },
- {
- id: 'resourceGrid',
- linkedView: 'resourceTimeline',
- group: 'resourceLoad',
- config: resourceConfig,
- cols: [
- {
- rows: [
- { view: 'resourceGrid', scrollY: 'scrollVer2', scrollX: 'gridScrollX', scrollable: true },
- { view: 'scrollbar', id: 'gridScrollX' }
- ]
- }
- ]
- }
- ]
- },
- { resizer: true, width: 1 },
- {
- rows: [
- {
- id: 'mainTimeline',
- linkedView: 'mainGrid',
- group: 'gantt',
- cols: [
- {
- rows: [
- { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' }
- ]
- },
- { view: 'scrollbar', id: 'scrollVer' }
- ]
- },
- { resizer: true, width: 1 },
- {
- id: 'resourceTimeline',
- linkedView: 'resourceGrid',
- group: 'resourceLoad',
- cols: [
- {
- rows: [
- { view: 'resourceTimeline', scrollX: 'scrollHor', scrollY: 'scrollVer2' },
- { view: 'scrollbar', id: 'scrollHor' }
- ]
- },
- { view: 'scrollbar', id: 'scrollVer2' }
- ]
- }
- ]
- }
- ]
- }
-
- const complexLayoutWithScrollbars = {
- css: 'gantt_container',
- cols: [
- {
- width: 400,
- // min_width: 100,
- rows: [
- {
- id: 'mainGrid',
- group: 'gantt',
- cols: [
- {
- rows: [
- { view: 'grid', scrollX: 'gridScrollX', scrollable: true, scrollY: 'gridScrollY' },
- { view: 'scrollbar', id: 'gridScrollX', group: 'mainGantt' }
- ]
- },
- { view: 'scrollbar', id: 'gridScrollY' }
- ]
- },
- { resizer: true, width: 1 },
- {
- group: 'resources',
- config: resourceConfig,
- cols: [
- {
- rows: [
- { view: 'resourceGrid', scrollY: 'gridScrollY2', scrollX: 'gridScrollX2', scrollable: true },
- { view: 'scrollbar', id: 'gridScrollX2', group: 'resourcePanel' }
- ]
- },
- { view: 'scrollbar', id: 'gridScrollY2' }
- ]
- }
-
- ]
- },
- // {view: "scrollbar", id: "grid",scrollX: "grid"},
- { resizer: true, width: 1 },
- {
- rows: [
- {
- group: 'gantt',
- cols: [
- {
- rows: [
- { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
- { view: 'scrollbar', id: 'scrollHor', group: 'mainGantt' }
- ]
- },
- { view: 'scrollbar', id: 'scrollVer' }
- ]
- },
- { resizer: true, width: 1 },
- {
- group: 'resources',
- cols: [
- {
- rows: [
- { view: 'resourceTimeline', scrollX: 'scrollHor2', scrollY: 'scrollVer2' },
- { view: 'scrollbar', id: 'scrollHor2', group: 'resourcePanel' }
- ]
- },
- { view: 'scrollbar', id: 'scrollVer2' }
- ]
- }
- ]
- }
- ]
- }
-
- switch (value) {
- case 'default':
- gantt.config.layout = defaultLayout
- break
- case 'horizontalScrollbars':
- gantt.config.layout = gridWidthScrollbarLayout
- break
- case 'resource':
- gantt.config.layout = resourceLayoutGeneral
- break
- case 'universal':
- gantt.config.layout = universalLayout
- break
- case 'complexScrollbars':
- gantt.config.layout = complexLayoutWithScrollbars
- break
- }
- gantt.init('gantt_here')
- },
// 浠庣敇鐗瑰浘涓悓姝ラ�変腑鐨� id 鍒� Vue data
syncSelected() {
const tasks = gantt.serialize().data || []
- console.log(tasks)
this.selectedIds = tasks.filter(t => t.checked).map(t => t.id)
console.log(this.selectedIds)
},
@@ -1500,30 +867,30 @@
handleGetSelected() {
const tasks = gantt.serialize().data || []
const selected = tasks.filter(t => t.checked)
- this.$message.info(`褰撳墠宸查�変腑${selected.length} 鏉′换鍔)
+ this.$notify.success(`褰撳墠宸查�変腑${selected.length} 鏉′换鍔)
},
// 娓呯┖鎵�鏈夐�夋嫨
handleClearSelection() {
- // gantt.unselectAll();
- // this.selectedIds = [];
- // 鏇存柊鎵�鏈夊閫夋鐘舵�佷负鏈�変腑
-
+ // 鑾峰彇鎵�鏈変换鍔�
const tasks = gantt.serialize().data || []
- tasks.forEach(t => {
- if (t.checked) {
- console.log(t, '鎵ц')
- t.checked = false
- gantt.updateTask(t.id)
- }
- })
- const checkboxes = gantt.$container.querySelectorAll('.taskCheckBox')
- checkboxes.forEach(checkbox => {
- checkbox.checked = false
+
+ // 閬嶅巻鎵�鏈変换鍔★紝灏� checked 灞炴�ц缃负 false
+ tasks.forEach(task => {
+ task.checked = false
})
+ // 鏇存柊鎵�鏈変换鍔℃樉绀�
+ gantt.eachTask((task) => {
+ task.checked = false
+ gantt.updateTask(task.id)
+ })
+
+ // 鍚屾鍒� Vue 缁勪欢鏁版嵁
this.syncSelected()
- // gantt.render()
+
+ // 鏄剧ず鎻愮ず淇℃伅
+ this.$notify.success('宸叉竻绌烘墍鏈夐�夋嫨')
}
}
--
Gitblit v1.9.3