gunter-kgd 1.0.5 → 1.0.6

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

@@ -3,6 +3,7 @@
     <div
         @mousemove.passive="showToast"
         @mouseleave="hideToast"
+        @click.stop="handleClick"
         @mousedown="dragDown($event,'drag')"
         :style="{
                     cursor: DragObject.mouseDown ? 'grabbing' : 'grab',
@@ -30,6 +31,7 @@
                 requestId: '',
                 canShow: false,// 是否可以显示toast ,为了防止触发了mouseout事件后立马触发showToast事件
                 toastClassResolved: '',
+                justDragged: false,
                 DragObject:{
                     startX: 0, // 开始的位置
                     mouseDown: false,// 是否按下了鼠标
@@ -56,6 +58,19 @@
             toastClass: String,
         },
         methods:{
+            handleClick(){
+                if(this.DragObject.mouseDown || this.justDragged){
+                    return;
+                }
+                if(!this.current_data){
+                    return;
+                }
+                emitter.$emit('on-click', {
+                    argument: 'taskBar',
+                    value: this.current_data.gunter_id,
+                    data: JSON.parse(JSON.stringify(this.current_data))
+                });
+            },
             buildToastContent() {
                 if (!this.current_data || !this.current_data.params) {
                     this.toastClassResolved = (this.toastClass || '').trim();
@@ -159,6 +174,7 @@
             dragDown(e,type){
                 if(this.current_data){
                     if(this.current_data.params){
+                        this.justDragged = false;
                         this.DragObject.mouseDown = true;
                         this.DragObject.startX = e.clientX;
                         this.DragObject.move_type = type;
@@ -198,6 +214,7 @@
             // 拖动时间
             doc_move(e){
                 if(this.DragObject.mouseDown){
+                    this.justDragged = true;
                     this.hideToast();
                     let move_mode_width = 0, // 宽度基值
                         move_mode_left = 0; // left基值
@@ -325,6 +342,11 @@
                     move_type: null,
                 };
                 this.hideToast();
+                if(this.justDragged){
+                    setTimeout(() => {
+                        this.justDragged = false;
+                    }, 30);
+                }
             }
         }
     }

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

@@ -13,7 +13,8 @@
                     :time_1px="time_1px"
                     :time_mode="time_mode"
                     :toast-render="toastRender"
-                    :toast-class="toastClass"></ganteGcItemContent>
+                    :toast-class="toastClass"
+                    :instance-id="instanceId"></ganteGcItemContent>
                 <button
                     v-if="shouldShowLocateStart(item)"
                     type="button"
@@ -46,7 +47,8 @@
                 :time_mode="time_mode"
                 :toast-render="toastRender"
                 :toast-class="toastClass"
-                :gante_data="item.children">
+                :gante_data="item.children"
+                :instance-id="instanceId">
                 <span style="display: none">1</span>
             </ganteview-item>
         </div>
@@ -82,10 +84,11 @@
             end_time: {},
             toastRender: Function,
             toastClass: String,
+            instanceId: String,
         },
         created() {
             this._onGcScroll = (info = {}) => {
-                if(info && typeof info === 'object'){
+                if(info && typeof info === 'object' && (!info.instanceId || info.instanceId === this.instanceId)){
                     this.scrollInfo.scrollLeft = Number(info.scrollLeft) || 0
                     this.scrollInfo.clientWidth = Number(info.clientWidth) || 0
                 }

package/components/gante_test/gante-gc.vue

@@ -3,7 +3,7 @@
     <div ref="ganteview" class="ganteview-box">
         <div @scroll.passive="ganteview_scroll" class="ganteview">
 <!--            <div class="current_move_time">{{current_move_time}}</div>-->
-            <div class="ganteview-header">
+            <div class="ganteview-header" :style="{width: header_width + 'px'}">
                 <div class="ganteview-toptime">
                     <div class="ganteview-headercell" :title="item.date" v-for="item in top_time_data"
                          :style="{width:item.width+'px',left:item.left+'px'}">{{item.date}}
@@ -23,6 +23,7 @@
                 :time_mode="time_mode"
                 :toast-render="toastRender"
                 :toast-class="toastClass"
+                :instance-id="instanceId"
                 :style="{width:header_width+'px'}"
                 v-if="show_item"
                 class="ganteview-content-box"
@@ -73,6 +74,7 @@
             end_time: {},
             toastRender: Function,
             toastClass: String,
+            instanceId: String,
         },
         methods: {
             remove_before(item){
@@ -80,11 +82,18 @@
             },
             ganteview_scroll(e) {
 //        让左侧表格跟随滚动
-                document.getElementsByClassName('gante-tbody')[0].style.top = -(e.target.scrollTop) + 'px'
-                document.getElementsByClassName('ganteview-header')[0].style.left = -(e.target.scrollLeft) + 'px'
+                const container = this.$el && this.$el.closest ? this.$el.closest('.gante-box') : null
+                const tbody = container ? container.querySelector('.gante-tbody') : null
+                const header = this.$el ? this.$el.querySelector('.ganteview-header') : null
+                if(tbody){
+                    tbody.style.top = -(e.target.scrollTop) + 'px'
+                }
+                if(header){
+                    header.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 })
+                commitEmit.$emit('gc-scroll', { scrollLeft: scrollEl.scrollLeft, clientWidth: scrollEl.clientWidth, instanceId: this.instanceId })
                 if(scrollEl.scrollHeight <= scrollEl.scrollTop + scrollEl.clientHeight && this.requestBol){
                     this.requestBol = false
                     commitEmit.$emit('on-load')
@@ -190,7 +199,7 @@
                 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 })
+                        commitEmit.$emit('gc-scroll', { scrollLeft: el.scrollLeft, clientWidth: el.clientWidth, instanceId: this.instanceId })
                     }
                 })
                 return {time: time, start_time: start_time}
@@ -387,6 +396,7 @@
         height: 25px;
         font-size: 13px;
         z-index: 2;
+        background: #fff;
     }
 
     .ganteview-toptime, .ganteview-bottomtime {

package/components/gante_test/gante-split.vue

@@ -25,7 +25,10 @@
 		mounted(){
 
 		},
-		methods:{
+        methods:{
+            getContainer(){
+                return this.$el && this.$el.closest ? this.$el.closest('.gante-box') : null;
+            },
 			//      获取元素距离浏览器的距离
 			getPos(ele){
 				var p=ele.offsetParent;
@@ -49,9 +52,15 @@
 			doc_move(e){
 				if(this.mouseDown){
 					var _body = document.getElementsByTagName('body')[0];
+                    const container = this.getContainer();
+                    const tableBox = container ? container.querySelector('.gante-table-box') : null;
+                    const gcBox = container ? container.querySelector('.ganteview-box') : null;
+                    if(!tableBox || !gcBox){
+                        return;
+                    }
 					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; // 图表的宽度
+                        _width = tableBox.offsetWidth, // 表格的宽度
+                        _width_gc = gcBox.offsetWidth; // 图表的宽度
 					if(_left + _width <= 480){
                         _left = 480 - _width
                     }
@@ -65,8 +74,11 @@
 			doc_up(){
 				if(this.mouseDown){
 					var _body = document.getElementsByTagName('body')[0]
-                    const baseTableWidth = document.getElementsByClassName('gante-table-box')[0].offsetWidth;
-                    const baseGanttWidth = document.getElementsByClassName('ganteview-box')[0].offsetWidth;
+                    const container = this.getContainer();
+                    const tableBox = container ? container.querySelector('.gante-table-box') : null;
+                    const gcBox = container ? container.querySelector('.ganteview-box') : null;
+                    const baseTableWidth = tableBox ? tableBox.offsetWidth : 0;
+                    const baseGanttWidth = gcBox ? gcBox.offsetWidth : 0;
                     const delta = this.split_resize_left;
 					this.$parent.tabe_width = delta + baseTableWidth;
                     this.find_attr(this.$parent.tabe_width,this.th_data)

package/components/gante_test/gante-table.vue

@@ -45,6 +45,13 @@
       onColumnResize: Function,
 		},
 		methods:{
+            getContainer(){
+                return this.$el && this.$el.closest ? this.$el.closest('.gante-box') : null;
+            },
+            getTableBox(){
+                const container = this.getContainer();
+                return container ? container.querySelector('.gante-table-box') : null;
+            },
             collectColumnWidths(changedKey,changedWidth){
                 const columnWidths = {}
                 let tableWidth = 0
@@ -137,8 +144,12 @@
           return; // 如果是水平滚动，直接返回不处理
         }
 				let speed = -200
-        let  scrollTop = document.getElementsByClassName('ganteview')[0].scrollTop,
-            ganteview = document.getElementsByClassName('ganteview')[0]
+        const container = this.$el && this.$el.closest ? this.$el.closest('.gante-box') : null
+        const ganteview = container ? container.querySelector('.ganteview') : null
+        if(!ganteview){
+            return;
+        }
+        let  scrollTop = ganteview.scrollTop
         if(e.wheelDelta && e.wheelDelta < 0){//兼容IE,Opera,Chrome
             speed = 200
         }else if(e.detail > 0){
@@ -181,7 +192,11 @@
 			doc_move(e){
 				var _body = document.getElementsByTagName('body')[0]
 				if(this.tTD.mouseDown){
-					var gante_left = this.getPos(this.$refs.gante_table).x,cel = e.clientX,gante_table_box = document.getElementsByClassName('gante-table-box')[0]
+                    const gante_table_box = this.getTableBox()
+                    if(!gante_table_box){
+                        return;
+                    }
+					var gante_left = this.getPos(this.$refs.gante_table).x,cel = e.clientX
 					if(gante_table_box.scrollLeft){
 						cel = cel + gante_table_box.scrollLeft
 					}
@@ -199,7 +214,11 @@
                 if(e.target.tagName === 'SPAN' ||e.target.tagName === 'I'){
                     return;
                 }
-				var table_width = this.getPos(this.$refs.gante_table).x,target=e.target,client_x = e.clientX,gante_table_box = document.getElementsByClassName('gante-table-box')[0]
+                const gante_table_box = this.getTableBox()
+                if(!gante_table_box){
+                    return;
+                }
+				var table_width = this.getPos(this.$refs.gante_table).x,target=e.target,client_x = e.clientX
 				if(target.classList.contains('cell')){
 					target = target.parentNode
 				}
@@ -224,7 +243,9 @@
                     // 设置拖动后的宽度
 					this.th_data[this.tTD.current_index].width = this.old_width+(this.proxy_left - this.oldx)
                     // 获取到左边表格所有td加起来的宽度
-                    let str = 0,_width = document.getElementsByClassName('gante-table-box')[0].offsetWidth;
+                    const gante_table_box = this.getTableBox()
+                    const _width = gante_table_box ? gante_table_box.offsetWidth : 0;
+                    let str = 0;
                     for(let key in this.th_data){
                         if(this.th_data[key].show != false){
                             str += this.th_data[key].width ? Number(this.th_data[key].width) + 1 : 81;

package/components/gante_test/gante.vue

@@ -33,7 +33,8 @@
                     :th_data="th_data"
                     :gante_data="ganteData"
                     :toast-render="toastRender"
-                    :toast-class="toastClass"></gante-gc>
+                    :toast-class="toastClass"
+                    :instance-id="instanceId"></gante-gc>
             </div>
             <gante-split :left="tabe_width" :th_data="th_data" :onSplitResize="onSplitResize"></gante-split>
         </div>
@@ -84,6 +85,7 @@
                 onDragChangeTime: () => {}, // 拖动改变时间
                 onSplitResize: () => {}, // 拖动分割线改变宽度回调
                 onColumnResize: () => {}, // 拖动列宽回调
+                instanceId: `gante-${Math.random().toString(36).slice(2)}`,
                 dropdownOptions: [
                     { value: 1, label: '日' },
                     { value: 2, label: '周' },
@@ -335,7 +337,12 @@
 //      初始化
             init(params,mode = true) {
 
-                Object.assign(this.$data, params);
+                const cloneParams = Object.assign({}, params);
+                if(params.th_data){
+                    cloneParams.th_data = JSON.parse(JSON.stringify(params.th_data));
+                }
+
+                Object.assign(this.$data, cloneParams);
 
                 if(params.ganteData == undefined){
                     let ganteData = JSON.parse(JSON.stringify(this.ganteData));

package/gante.vue

@@ -34,7 +34,8 @@
                     :th_data="th_data"
                     :gante_data="ganteData"
                     :toast-render="toastRender"
-                    :toast-class="toastClass"></gante-gc>
+                    :toast-class="toastClass"
+                    :instance-id="instanceId"></gante-gc>
             </div>
             <gante-split :left="tabe_width" :th_data="th_data" :onSplitResize="onSplitResize"></gante-split>
         </div>
@@ -87,6 +88,7 @@
                 onDragChangeTime: () => {}, // 拖动改变时间
                 onSplitResize: () => {}, // 拖动分割线改变宽度回调
                 onColumnResize: () => {}, // 拖动列宽回调
+                instanceId: `gante-${Math.random().toString(36).slice(2)}`,
                 dropdownOptions: [
                     { value: 1, label: '日' },
                     { value: 2, label: '周' },
@@ -350,7 +352,12 @@
 //      初始化
             init(params,mode = true) {
 
-                Object.assign(this.$data, params);
+                const cloneParams = Object.assign({}, params);
+                if(params.th_data){
+                    cloneParams.th_data = JSON.parse(JSON.stringify(params.th_data));
+                }
+
+                Object.assign(this.$data, cloneParams);
 
                 if(params.ganteData == undefined){
                     let ganteData = JSON.parse(JSON.stringify(this.ganteData));

package/package.json

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