gunter-kgd 1.0.4 → 1.0.5

package/components/gante_test/gante-gc-item.vue

@@ -14,6 +14,26 @@
                     :time_mode="time_mode"
                     :toast-render="toastRender"
                     :toast-class="toastClass"></ganteGcItemContent>
+                <button
+                    v-if="shouldShowLocateStart(item)"
+                    type="button"
+                    class="gc-locate-btn gc-locate-btn--left"
+                    title="定位到开始时间"
+                    @mousedown.stop.prevent
+                    @click.stop="locateItem(item,'start')"
+                    :style="getLocateBtnStyle('left')">
+                    <span class="gc-locate-btn__arrow">&lt;</span>
+                </button>
+                <button
+                    v-if="shouldShowLocateEnd(item)"
+                    type="button"
+                    class="gc-locate-btn gc-locate-btn--right"
+                    title="定位到结束时间"
+                    @mousedown.stop.prevent
+                    @click.stop="locateItem(item,'end')"
+                    :style="getLocateBtnStyle('right')">
+                    <span class="gc-locate-btn__arrow">&gt;</span>
+                </button>
                 <!--<ganteDragCircle :current_data="item"></ganteDragCircle>-->
             </div>
             <ganteview-item
@@ -36,6 +56,7 @@
 </template>
 <script>
     import ganteGcItemContent from './gante-gc-item-content'
+    import commitEmit from './commit'
     // import ganteDragCircle from './gante-drag-circle'
     export default {
         name: 'ganteview-item',
@@ -46,6 +67,10 @@
             return {
                 canAnimation: false,
                 bol: false,
+                scrollInfo:{
+                    scrollLeft: 0,
+                    clientWidth: 0,
+                }
             }
         },
         props: {
@@ -58,7 +83,127 @@
             toastRender: Function,
             toastClass: String,
         },
+        created() {
+            this._onGcScroll = (info = {}) => {
+                if(info && typeof info === 'object'){
+                    this.scrollInfo.scrollLeft = Number(info.scrollLeft) || 0
+                    this.scrollInfo.clientWidth = Number(info.clientWidth) || 0
+                }
+            }
+            commitEmit.$on('gc-scroll', this._onGcScroll)
+        },
+        destroyed() {
+            if(this._onGcScroll){
+                commitEmit.$off('gc-scroll', this._onGcScroll)
+                this._onGcScroll = null
+            }
+        },
         methods: {
+            getScroller(){
+                if(this.$el && this.$el.closest){
+                    const found = this.$el.closest('.ganteview')
+                    if(found){
+                        return found
+                    }
+                }
+                return document.getElementsByClassName('ganteview')[0] || null
+            },
+            getItemRange(item){
+                const start = Number(item && item.left) || 0
+                const width = Number(item && item.width) || 0
+                const end = start + width
+                return { start, end }
+            },
+            getLocateBtnStyle(side){
+                const padding = 6
+                const btnWidth = 18
+                const viewLeft = Number(this.scrollInfo.scrollLeft) || 0
+                const viewWidth = Number(this.scrollInfo.clientWidth) || 0
+                if(!viewWidth){
+                    return {}
+                }
+                let left = viewLeft + padding
+                if(side === 'right'){
+                    left = viewLeft + viewWidth - btnWidth - padding
+                    if(left < viewLeft + padding){
+                        left = viewLeft + padding
+                    }
+                }
+                return { left: left + 'px' }
+            },
+            shouldShowLocateStart(item){
+                if(!item || item.left == null || !this.scrollInfo.clientWidth){
+                    return false
+                }
+                const { start, end } = this.getItemRange(item)
+                const barEnd = end || start
+                const padding = 20
+                const viewStart = this.scrollInfo.scrollLeft
+                const viewEnd = viewStart + this.scrollInfo.clientWidth
+                const fullyLeft = barEnd < viewStart
+                const fullyRight = start > viewEnd
+                if(fullyLeft){
+                    return true
+                }
+                if(fullyRight){
+                    return false
+                }
+                return start < viewStart + padding
+            },
+            shouldShowLocateEnd(item){
+                if(!item || item.left == null || !this.scrollInfo.clientWidth){
+                    return false
+                }
+                const { start, end } = this.getItemRange(item)
+                const barEnd = end || start
+                const padding = 20
+                const viewStart = this.scrollInfo.scrollLeft
+                const viewEnd = viewStart + this.scrollInfo.clientWidth
+                const fullyLeft = barEnd < viewStart
+                const fullyRight = start > viewEnd
+                if(fullyRight){
+                    return true
+                }
+                if(fullyLeft){
+                    return false
+                }
+                return barEnd > viewEnd - padding
+            },
+            locateItem(item,edge){
+                const scroller = this.getScroller()
+                if(!scroller){
+                    return
+                }
+                const { start, end } = this.getItemRange(item)
+                const viewStart = scroller.scrollLeft
+                const viewEnd = viewStart + scroller.clientWidth
+                const padding = 20
+                let nextScroll = null
+
+                if(edge === 'start'){
+                    if(start < viewStart + padding || start > viewEnd - padding){
+                        nextScroll = Math.max(start - padding,0)
+                    }
+                }else{
+                    const targetEdge = end || start
+                    if(targetEdge > viewEnd - padding || targetEdge < viewStart + padding){
+                        nextScroll = Math.max(targetEdge - scroller.clientWidth + padding,0)
+                    }
+                }
+                if(nextScroll === null){
+                    return
+                }
+                const maxScroll = Math.max(0,(scroller.scrollWidth || 0) - scroller.clientWidth)
+                const resolved = Math.min(nextScroll,maxScroll)
+                if(Math.abs(resolved - viewStart) < 1){
+                    return
+                }
+                if(scroller.scrollTo){
+                    scroller.scrollTo({left: resolved,behavior:'smooth'})
+                }else{
+                    scroller.scrollLeft = resolved
+                }
+            },
             // 进入到了tr上
             enterTr(ev, tr) {
                 this.$set(tr, 'is_hover', true)
@@ -91,5 +236,38 @@
     .ganteview-content-one.gj_hover_class{
         background: rgba(246, 246, 246, 0.7);
     }
+    .gc-locate-btn{
+        position: absolute;
+        top: 9px;
+        width: 18px;
+        height: 22px;
+        border-radius: 4px;
+        border: 1px solid rgba(0,0,0,0.12);
+        background: rgba(255,255,255,0.92);
+        cursor: pointer;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: #00a578;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        z-index: 4;
+        &:hover{
+            background: #fff;
+            border-color: rgba(0,165,120,0.4);
+        }
+        .gc-locate-btn__arrow{
+            font-weight: 700;
+            font-size: 12px;
+            line-height: 1;
+        }
+    }
+    .gc-locate-btn--left{
+        margin-right: 6px;
+    }
+    .gc-locate-btn--right{
+        margin-left: 6px;
+        margin-right: 6px;
+    }
 
 </style>

package/components/gante_test/gante-gc.vue

@@ -84,6 +84,7 @@
                 document.getElementsByClassName('ganteview-header')[0].style.left = -(e.target.scrollLeft) + 'px'
                 this.$parent.show_calendar = false
                 let scrollEl = e.target
+                commitEmit.$emit('gc-scroll', { scrollLeft: scrollEl.scrollLeft, clientWidth: scrollEl.clientWidth })
                 if(scrollEl.scrollHeight <= scrollEl.scrollTop + scrollEl.clientHeight && this.requestBol){
                     this.requestBol = false
                     commitEmit.$emit('on-load')
@@ -186,6 +187,12 @@
                 this.get_top_time(mode, this.first_day, time, all_time, time_mode)
                 this.time_1px = time;
                 this.time_mode = time_mode;
+                this.$nextTick(() => {
+                    const el = this.$el && this.$el.querySelector ? this.$el.querySelector('.ganteview') : null
+                    if(el){
+                        commitEmit.$emit('gc-scroll', { scrollLeft: el.scrollLeft, clientWidth: el.clientWidth })
+                    }
+                })
                 return {time: time, start_time: start_time}
             },
             /**

package/components/gante_test/gante-split.vue

@@ -1,11 +1,6 @@
 <!--中间分割线，分割左侧表格和右侧图表-->
 <template>
 	<div @mousedown="down"  ref="split_liu" :style="{left:Number(left)?left+'px':left}" class="gante-split-liu">
-		<!--<div class="gante-split-column">-->
-			<!--<div></div>-->
-			<!--<div></div>-->
-			<!--<div></div>-->
-		<!--</div>-->
 		<div v-show="show_split" :style="{left:split_resize_left+'px'}" class="gante-split-liu-resize"></div>
 	</div>
 </template>
@@ -17,10 +12,16 @@
 			return{
 				show_split:false,
 				split_resize_left:0,
-				mouseDown:false
+				mouseDown:false,
+                rafId: 0,
+                lastResizePayload: null,
 			}
 		},
-		props:['left','th_data'],
+		props:{
+            left: [Number,String],
+            th_data: Object,
+            onSplitResize: Function,
+        },
 		mounted(){
 
 		},
@@ -51,7 +52,6 @@
 					let _left = e.pageX - this.$refs.split_liu.getBoundingClientRect().left +3, // 移动的距离
                         _width = document.getElementsByClassName('gante-table-box')[0].offsetWidth, // 表格的宽度
                         _width_gc = document.getElementsByClassName('ganteview-box')[0].offsetWidth; // 图表的宽度
-					console.log(_left)
 					if(_left + _width <= 480){
                         _left = 480 - _width
                     }
@@ -65,7 +65,10 @@
 			doc_up(){
 				if(this.mouseDown){
 					var _body = document.getElementsByTagName('body')[0]
-					this.$parent.tabe_width = this.split_resize_left + document.getElementsByClassName('gante-table-box')[0].offsetWidth;
+                    const baseTableWidth = document.getElementsByClassName('gante-table-box')[0].offsetWidth;
+                    const baseGanttWidth = document.getElementsByClassName('ganteview-box')[0].offsetWidth;
+                    const delta = this.split_resize_left;
+					this.$parent.tabe_width = delta + baseTableWidth;
                     this.find_attr(this.$parent.tabe_width,this.th_data)
 					this.show_split = false
 					this.split_resize_left = 0
@@ -74,8 +77,34 @@
 					_body.style.cursor = null
 					document.removeEventListener('mousemove',this.doc_move,false)
 					document.removeEventListener('mouseup',this.doc_up,false)
+
+                    this.emitResize(this.$parent.tabe_width, baseGanttWidth - delta, true)
 				}
 			},
+            emitResize(tableWidth,ganttWidth,isFinal){
+                if(!isFinal){
+                    return
+                }
+                if(typeof this.onSplitResize !== 'function'){
+                    return
+                }
+                this.lastResizePayload = {
+                    tableWidth,
+                    ganttWidth,
+                    isFinal,
+                }
+                if(this.rafId){
+                    return
+                }
+                this.rafId = requestAnimationFrame(() => {
+                    this.rafId = 0
+                    if(!this.lastResizePayload){
+                        return
+                    }
+                    this.onSplitResize(this.lastResizePayload)
+                    this.lastResizePayload = null
+                })
+            },
 			down(){
 				this.mouseDown = true
 				this.show_split = true

package/components/gante_test/gante-table.vue

@@ -33,6 +33,8 @@
 				},
 				proxy_left:0,
 				show_proxy:false,
+                rafId: 0,
+                lastResizePayload: null,
 			}
 		},
 		props:{
@@ -40,8 +42,46 @@
 			data:Array,
       showLoading:Boolean,
       cellSlots: Object,
+      onColumnResize: Function,
 		},
 		methods:{
+            collectColumnWidths(changedKey,changedWidth){
+                const columnWidths = {}
+                let tableWidth = 0
+                for(let key in this.th_data){
+                    const th = this.th_data[key] || {}
+                    if(th.show === false){
+                        continue
+                    }
+                    let width = th.width ? Number(th.width) : 80
+                    if(changedKey && key === changedKey && typeof changedWidth === 'number' && !Number.isNaN(changedWidth)){
+                        width = changedWidth
+                    }
+                    columnWidths[key] = width
+                    tableWidth += width
+                }
+                return { columnWidths, tableWidth }
+            },
+            emitColumnResize(payload){
+                if(!payload || payload.isFinal !== true){
+                    return
+                }
+                if(typeof this.onColumnResize !== 'function'){
+                    return
+                }
+                this.lastResizePayload = payload
+                if(this.rafId){
+                    return
+                }
+                this.rafId = requestAnimationFrame(() => {
+                    this.rafId = 0
+                    if(!this.lastResizePayload){
+                        return
+                    }
+                    this.onColumnResize(this.lastResizePayload)
+                    this.lastResizePayload = null
+                })
+            },
 		    //排序
             sortCaret(mode,key){
                 let cla = 'asc',assign_key = key
@@ -193,6 +233,12 @@
                     if(str < _width){
                         this.$parent.tabe_width = (str + 2) <= 480 ? 480 : (str + 2) + 'px';
                     }
+                    const widths = this.collectColumnWidths()
+                    this.emitColumnResize({
+                        changedKey: this.tTD.current_index,
+                        isFinal: true,
+                        ...widths
+                    })
 
                     // 初始化所有的值
 					this.tTD.mouseDown = false

package/components/gante_test/gante.vue

@@ -18,7 +18,8 @@
                     @sort="sortGunter"
                     :th_data="th_data"
                     :showLoading="showLoading"
-                    :data="ganteData">
+                    :data="ganteData"
+                    :onColumnResize="onColumnResize">
 
                 </gante-table>
             </div>
@@ -34,7 +35,7 @@
                     :toast-render="toastRender"
                     :toast-class="toastClass"></gante-gc>
             </div>
-            <gante-split :left="tabe_width" :th_data="th_data"></gante-split>
+            <gante-split :left="tabe_width" :th_data="th_data" :onSplitResize="onSplitResize"></gante-split>
         </div>
         <!--日历-->
         <calendar :left="calendar_left" :choose_date="checkDate" v-model="show_calendar" @change="chooseDate"
@@ -81,6 +82,8 @@
                 onClick: () => {},
                 onLoad: () => {},//懒加载
                 onDragChangeTime: () => {}, // 拖动改变时间
+                onSplitResize: () => {}, // 拖动分割线改变宽度回调
+                onColumnResize: () => {}, // 拖动列宽回调
                 dropdownOptions: [
                     { value: 1, label: '日' },
                     { value: 2, label: '周' },

package/gante.vue

@@ -19,6 +19,7 @@
                     :th_data="th_data"
                     :showLoading="showLoading"
                     :data="ganteData"
+                    :onColumnResize="onColumnResize"
                     :cell-slots="$scopedSlots">
 
                 </gante-table>
@@ -35,7 +36,7 @@
                     :toast-render="toastRender"
                     :toast-class="toastClass"></gante-gc>
             </div>
-            <gante-split :left="tabe_width" :th_data="th_data"></gante-split>
+            <gante-split :left="tabe_width" :th_data="th_data" :onSplitResize="onSplitResize"></gante-split>
         </div>
         <!--日历-->
         <calendar :left="calendar_left" :choose_date="checkDate" v-model="show_calendar" @change="chooseDate"
@@ -84,6 +85,8 @@
                 onClick: () => {},
                 onLoad: () => {},//懒加载
                 onDragChangeTime: () => {}, // 拖动改变时间
+                onSplitResize: () => {}, // 拖动分割线改变宽度回调
+                onColumnResize: () => {}, // 拖动列宽回调
                 dropdownOptions: [
                     { value: 1, label: '日' },
                     { value: 2, label: '周' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gunter-kgd",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "gante-vue.common.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"