gunter-kgd 1.0.3 → 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-td.vue

@@ -11,18 +11,24 @@
             padding:th.shrink ? '0 18px' : '0 10px',
             paddingLeft:th.shrink ? (td_data.level + 1)*18+'px' : null}">
 			<span :style="{color:td_data.color ? td_data.color[key_value] : null}" class="cell-value">
-                <span class="trigger"  @click.stop="opens()" v-if="th.shrink && td_data.children">
-                     <span v-show="td_data.children" style="cursor: pointer;"
-                          >
-                         <span style="display: inline-block"
-                               :style="{transform: !td_data.open ? 'rotateZ(-90deg)' : null}"
-                               class="open-icon"></span>
-                     </span>
-                    <!--<span v-show="td_data.showLoading" class="el-icon-loading"></span>-->
-                </span>
-                <span v-if="td_data.level >= 1 && th.shrink && !td_data.children" class="spot"></span>
-                <span v-if="th.format">{{myPublic.dateFormat.format(td_data.params[key_value],th.format)}}</span>
-                <span v-else v-html="td_data.params[key_value]"></span>
+                <slot-renderer
+                    v-if="customSlot"
+                    :slot-fn="customSlot"
+                    :slot-props="slotProps" />
+                <template v-else>
+                    <span class="trigger"  @click.stop="opens()" v-if="th.shrink && td_data.children">
+                         <span v-show="td_data.children" style="cursor: pointer;"
+                              >
+                             <span style="display: inline-block"
+                                   :style="{transform: !td_data.open ? 'rotateZ(-90deg)' : null}"
+                                   class="open-icon"></span>
+                         </span>
+                        <!--<span v-show="td_data.showLoading" class="el-icon-loading"></span>-->
+                    </span>
+                    <span v-if="td_data.level >= 1 && th.shrink && !td_data.children" class="spot"></span>
+                    <span v-if="th.format">{{myPublic.dateFormat.format(td_data.params[key_value],th.format)}}</span>
+                    <span v-else v-html="td_data.params[key_value]"></span>
+                </template>
             </span>
         </div>
         <input class="gante_edit_input_liu" @click="change_calendar($refs.cells,td_data.params[key_value])"
@@ -34,7 +40,21 @@
     import commitEmit from './commit'
     import myPublic from '../../utils/public';
 
+    const SlotRenderer = {
+        functional: true,
+        props: {
+            slotFn: Function,
+            slotProps: Object
+        },
+        render(h, { props }) {
+            return props.slotFn ? props.slotFn(props.slotProps) : null
+        }
+    }
+
     export default {
+        components: {
+            SlotRenderer
+        },
         data() {
             return {
               myPublic,
@@ -47,7 +67,25 @@
             th: Object,
             index: Number,
             key_value: String,
-            is_load_child: Boolean
+            is_load_child: Boolean,
+            cellSlots: Object
+        },
+        computed: {
+            customSlot(){
+                return this.cellSlots && this.cellSlots[this.key_value]
+            },
+            slotProps(){
+                return {
+                    td_data: this.td_data,
+                    th: this.th,
+                    value: this.td_data.params[this.key_value],
+                    index: this.index,
+                    key_value: this.key_value,
+                    row: this.td_data,
+                    columnKey: this.key_value,
+                    toggle: this.opens
+                }
+            }
         },
         methods: {
 //      获取元素距离浏览器的距离
@@ -72,7 +110,6 @@
             },
 //      编辑任务
             to_edit(e, value) {
-                console.log('this.th_data', this.td_data)
                 if (this.th.edit || this.th.chooseTime) {
                     this.edit = true
                     if (this.th.chooseTime) {

package/components/gante_test/gante-table-tr.vue

@@ -1,7 +1,7 @@
 <!--表格tr-->
 <template>
     <div class="gante-tr-box">
-        <!--为了设置母子显示线 gante-cell_after  gante-cell_after_first gante-cell_after_last-->
+        <!--为了设置每个子显示线 gante-cell_after  gante-cell_after_first gante-cell_after_last-->
         <div class="gante-tr-one"
              :key="index"
              v-for="(tr,index) in data">
@@ -9,19 +9,21 @@
             <div class="gante-tr" :class="{gj_hover_class: tr.is_hover}" @mouseenter="enterTr($event,tr)"
                  @mouseleave="leaveTr($event,tr)" >
                 <div class="gante-td" v-show="th.show != false" v-for="(th,key) in th_data"
-                     :style="{textAlign:th.value == '编号'?'center':'null'}">
+                     :style="{textAlign:th.value == '编码'?'center':'null'}">
                     <td-cell :td_data="tr" :index="index" :key_value="key"
-                             :th="th"></td-cell>
+                             :th="th"
+                             :cell-slots="cellSlots"></td-cell>
                 </div>
             </div>
             <gante-tr v-if="tr.children && tr.open" :parent_data="tr"
                       :all_data="all_data"
-                      :data="tr.children" :th_data="th_data"></gante-tr>
+                      :data="tr.children" :th_data="th_data" :cell-slots="cellSlots"></gante-tr>
         </div>
     </div>
 </template>
 <script>
     import tdCell from './gante-table-td.vue'
+    import {mapState, mapMutations} from 'vuex';
 
     export default {
         name: 'gante-tr',
@@ -29,6 +31,7 @@
             all_data: Array,
             data: Array,
             th_data: Object,
+            cellSlots: Object,
             // 父级数据
             parent_data: {
                 type: Object,
@@ -42,7 +45,7 @@
             opens(data) {
                 this.$set(data, 'open', !data.open)
             },
-            // 进入到了tr上
+            // 进入到了tr里
             enterTr(ev, tr) {
                 this.$set(tr, 'is_hover', true)
             },

package/components/gante_test/gante-table.vue

@@ -13,7 +13,7 @@
 			</div>
 		</div>
 		<div class="gante-tbody">
-			<gante-tr :all_data="data" :data="data" :th_data="th_data"></gante-tr>
+			<gante-tr :all_data="data" :data="data" :th_data="th_data" :cell-slots="cellSlots || $scopedSlots"></gante-tr>
 <!--            <loading :showLoading="showLoading">没有更多了</loading>-->
 		</div>
 		<div v-show="show_proxy" :style="{left:proxy_left+'px'}" id="gante-table__column-resize-proxy"></div>
@@ -33,14 +33,55 @@
 				},
 				proxy_left:0,
 				show_proxy:false,
+                rafId: 0,
+                lastResizePayload: null,
 			}
 		},
 		props:{
 			th_data:Object,
 			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
@@ -192,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/components/gante_test/search_last_width.js

@@ -17,8 +17,15 @@ export default {
             }
         },
         find_last_attr(num,th_data){
-            if(!th_data[Object.keys(th_data)[Object.keys(th_data).length - num]].is_op && th_data[Object.keys(th_data)[Object.keys(th_data).length - num]].show != false){
-                 return th_data[Object.keys(th_data)[Object.keys(th_data).length - num]]
+            const keys = Object.keys(th_data)
+            const index = keys.length - num
+            if(index < 0){
+                return {}
+            }
+            const attr = th_data[keys[index]] || {}
+            // 兼容未设置 is_op 的列
+            if(attr.show !== false && attr.is_op !== true){
+                 return attr
             }else{
                 return this.find_last_attr(num+1,th_data)
             }

package/gante.vue

@@ -18,7 +18,9 @@
                     @sort="sortGunter"
                     :th_data="th_data"
                     :showLoading="showLoading"
-                    :data="ganteData">
+                    :data="ganteData"
+                    :onColumnResize="onColumnResize"
+                    :cell-slots="$scopedSlots">
 
                 </gante-table>
             </div>
@@ -34,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"
@@ -55,6 +57,7 @@
     export default {
         name: 'gante',
         mixins: [searchLastWidth,ganteOp],
+        inheritAttrs: false,
         data() {
             return {
                 checkModel: 1,
@@ -82,6 +85,8 @@
                 onClick: () => {},
                 onLoad: () => {},//懒加载
                 onDragChangeTime: () => {}, // 拖动改变时间
+                onSplitResize: () => {}, // 拖动分割线改变宽度回调
+                onColumnResize: () => {}, // 拖动列宽回调
                 dropdownOptions: [
                     { value: 1, label: '日' },
                     { value: 2, label: '周' },
@@ -150,6 +155,7 @@
             })
         },
         mounted() {
+            this.init(this.getInitParams(), true)
             this.$nextTick(function () {
                 setTimeout(() => {
                     // 获取到左边表格所有td加起来的宽度
@@ -158,7 +164,18 @@
             })
 
         },
+        watch: {
+            $attrs: {
+                handler() {
+                    this.init(this.getInitParams(), true)
+                },
+                deep: true
+            }
+        },
         methods: {
+            getInitParams(){
+                return Object.assign({}, this.$attrs)
+            },
             //设置加载提示
             setShowLoading(data) {
                 this.showLoading = data

package/gunter.js

@@ -2,27 +2,30 @@ import Gante from './gante.vue'
 export default {
     install(Vue, options = {}) {
         const VueGante = Vue.extend(Gante)
+        Vue.component(Gante.name || 'gante', VueGante)
         let gante = null
 
-        function $gante(params) {
+        function $gante(params = {}) {
             return new Promise(resolve => {
-                //   console.log(gante)
-                let container = 'body'
-                if (params.container) {
-                    container = params.container
-                }
-                gante = new VueGante()
+                const { container = 'body', scopedSlots, ...rest } = params
+
+                const vm = new Vue({
+                    parent: this,
+                    render(h){
+                        return h(VueGante,{ scopedSlots })
+                    }
+                })
+
+                vm.$mount();
+                gante = vm.$children[0]
                 gante.$store = this.$root.$store;
-                gante.$mount();
                 let ganteLiuBox=document.querySelector('#gante .ganteLiuBox');
-                // console.log('ganteLiuBox',ganteLiuBox);
                 if(ganteLiuBox){
                     document.querySelector(container).replaceChild(gante.$el,ganteLiuBox);
                 }else{
                     document.querySelector(container).appendChild(gante.$el);
                 }
-                // }
-                gante.init(params);
+                gante.init(rest);
                 resolve(gante)
             })
         }

package/package.json

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