2
0
mirror of https://github.com/tenrok/vue-ganttastic.git synced 2026-06-24 23:10:33 +03:00

feat: add bar when double click on row

This commit is contained in:
yicone
2021-01-29 22:32:04 +08:00
parent b45aa49e2b
commit b795b76e91
2 changed files with 19 additions and 3 deletions
+4 -2
View File
@@ -61,7 +61,8 @@ export default {
minGapBetweenBars: { minGapBetweenBars: {
type: Number, type: Number,
default: 0 default: 0
} },
defaultBarLength: { type: Number, default: 1 }
}, },
data(){ data(){
@@ -295,7 +296,8 @@ export default {
onDragendBar: (e, ganttBar) => this.onDragendBar(e, ganttBar), onDragendBar: (e, ganttBar) => this.onDragendBar(e, ganttBar),
shouldSnapBackOnOverlap: () => this.snapBackOnOverlap, shouldSnapBackOnOverlap: () => this.snapBackOnOverlap,
snapBackBundle: (ganttBar) => this.snapBackBundle(ganttBar), snapBackBundle: (ganttBar) => this.snapBackBundle(ganttBar),
getMinGapBetweenBars: () => this.minGapBetweenBars getMinGapBetweenBars: () => this.minGapBetweenBars,
getDefaultBarLength: () => this.defaultBarLength
} }
} }
} }
+15 -1
View File
@@ -20,6 +20,7 @@
@dragover="onDragover($event)" @dragover="onDragover($event)"
@dragleave="onDragleave($event)" @dragleave="onDragleave($event)"
@drop="onDrop($event)" @drop="onDrop($event)"
@dblclick="onDoubleClick($event)"
@mouseover="onMouseover()" @mouseover="onMouseover()"
@mouseleave="onMouseleave()" @mouseleave="onMouseleave()"
> >
@@ -69,7 +70,8 @@ export default {
"getThemeColors", "getThemeColors",
"getHourCount", "getHourCount",
"getChartStart", "getChartStart",
"getChartEnd" "getChartEnd",
"getDefaultBarLength"
], ],
data(){ data(){
@@ -125,6 +127,18 @@ export default {
this.$emit("drop", {event: e, bar, time: time.format("YYYY-MM-DD HH:mm:ss")}) this.$emit("drop", {event: e, bar, time: time.format("YYYY-MM-DD HH:mm:ss")})
}, },
onDoubleClick(e){
let barContainer = this.$refs.barContainer.getBoundingClientRect()
let xPos = e.clientX - barContainer.left
let hourDiffFromStart = (xPos/barContainer.width) * this.getHourCount()
let time = moment(this.getChartStart()).add(hourDiffFromStart, "hours")
let bar = {};
bar[this.barStart] = time.format("YYYY-MM-DD HH:mm:ss")
bar[this.barEnd] = time.add(this.getDefaultBarLength(), "hours").format("YYYY-MM-DD HH:mm:ss")
bar.ganttBarConfig = {handles: true}
this.bars.push(bar)
},
onMouseover(){ onMouseover(){
if(this.highlightOnHover){ if(this.highlightOnHover){
this.$refs["g-gantt-row"].style.backgroundColor = this.getThemeColors().hoverHighlight this.$refs["g-gantt-row"].style.backgroundColor = this.getThemeColors().hoverHighlight