gunter-kgd 1.0.0 → 1.0.2

package/components/gante_test/gante-table.vue

@@ -0,0 +1,349 @@
+<!--表格最外层-->
+<template>
+	<div ref="gante_table" @mousewheel.passive="gun" @DOMMouseScroll.passive="gun" class="gante-table">
+		<div class="gante-thead">
+			<div class="gante-th" :data-key="key" v-show="th.show != false"  @mousedown="th_down" @mousemove="th_move" @mouseout="th_out" :key="index" v-for="(th,key,index) in th_data">
+				<div class="cell" :style="{width:th.width ? th.width+'px' : '80px',textAlign: th.is_op ? 'center' : 'left'}">
+                    {{th.value}}
+<!--                    <span v-if="th.sort_type || th.sort_type == null" :class="{ascend:th.sort_type == 'asc',descend:th.sort_type == 'desc'}" class="caret-wrapper">-->
+<!--                        <i @click.stop="sortCaret(1,key)" class="sort-caret ascending"></i>-->
+<!--                        <i @click.stop="sortCaret(2,key)" class="sort-caret descending"></i>-->
+<!--                    </span>-->
+                </div>
+			</div>
+		</div>
+		<div class="gante-tbody">
+			<gante-tr :all_data="data" :data="data" :th_data="th_data"></gante-tr>
+<!--            <loading :showLoading="showLoading">没有更多了</loading>-->
+		</div>
+		<div v-show="show_proxy" :style="{left:proxy_left+'px'}" id="gante-table__column-resize-proxy"></div>
+	</div>
+</template>
+<script>
+	import ganteTr from './gante-table-tr.vue'
+    import loading from  '../../components/common/loading'
+	export default{
+		data(){
+			return{
+				oldx:0, //记录鼠标按下的位置
+				old_width:0,  //记录鼠标按下的初始宽度
+				tTD:{
+					current_index:null,
+					mouseDown:false
+				},
+				proxy_left:0,
+				show_proxy:false,
+			}
+		},
+		props:{
+			th_data:Object,
+			data:Array,
+      showLoading:Boolean,
+		},
+		methods:{
+		    //排序
+            sortCaret(mode,key){
+                let cla = 'asc',assign_key = key
+                if(mode == 2){
+                    cla = 'desc'
+                }
+                for(let i in this.th_data){
+                    if(this.th_data[i].sort_type || this.th_data[i].sort_type == null){
+                        if(i == key){
+                            //如果再次点击之前的排序，就取消排序
+                            if(this.th_data[i].sort_type == cla){
+                                this.$set(this.th_data[i], 'sort_type' , null)
+                                assign_key = ''
+                            }else{
+                                if(this.th_data[i].time_mode){
+                                    assign_key = this.th_data[i].time_mode == 1 ? 'start_time' : 'end_time'
+                                }
+                                this.$set(this.th_data[i], 'sort_type' , cla)
+                            }
+                        }else{
+                            this.$set(this.th_data[i], 'sort_type' , null)
+                        }
+                    }
+                }
+                this.$emit('sort',assign_key,cla)
+            },
+			//      获取元素距离浏览器的距离
+			getPos(ele){
+				var p=ele.offsetParent;
+				var left=ele.offsetLeft;
+				var top=ele.offsetTop
+				while(p){
+					if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
+						left+=p.offsetLeft;
+						top+=p.offsetTop;
+					}else{
+						left+=p.offsetLeft+p.clientLeft;
+						top+=p.offsetTop+p.clientTop;
+					}
+					p=p.offsetParent;
+				}
+				var obj={};
+				obj.x=left;
+				obj.y=top;
+				return obj;
+			},
+//      监听表格的鼠标滚轴事件,从而让甘特图上下滚动
+			gun(e){
+        // 检测是否为垂直滚动
+        const isVerticalScroll = Math.abs(e.wheelDeltaY || e.deltaY || e.wheelDelta) > Math.abs(e.wheelDeltaX || e.deltaX || 0);
+
+        if (!isVerticalScroll) {
+          return; // 如果是水平滚动，直接返回不处理
+        }
+				let speed = -200
+        let  scrollTop = document.getElementsByClassName('ganteview')[0].scrollTop,
+            ganteview = document.getElementsByClassName('ganteview')[0]
+        if(e.wheelDelta && e.wheelDelta < 0){//兼容IE,Opera,Chrome
+            speed = 200
+        }else if(e.detail > 0){
+            speed = 200
+        }
+        this.mark = false
+        this.autoScroll(scrollTop,scrollTop + speed ,4,(value)=>{
+            ganteview.scrollTop = value
+        })
+			},
+            /**
+             *
+             * @param start 起始位置
+             * @param end 目标位置
+             * @param rate 缓动速率
+             * @param callback 变化的位置回调，支持两个参数，value和isEnding，表示当前的位置值（数值）以及是否动画结束了（布尔值）；
+             */
+            autoScroll(start, end, rate, callback) {
+                if (start == end || typeof start != 'number') {
+                    return;
+                }
+                end = end || 0;
+                rate = rate || 2;
+                var step = function () {
+                    start = start + (end - start) / rate;
+                    if (Math.abs(start - end) <= 1) {
+                        callback(end, true);
+                        return;
+                    }
+                    callback(start, false);
+                    if(!window.requestAnimationFrame){
+                        setTimeout(step, 17);
+                    }else{
+                        requestAnimationFrame(step);
+                    }
+                };
+                step();
+            },
+            // 让表头可以拉动,改变宽度
+			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]
+					if(gante_table_box.scrollLeft){
+						cel = cel + gante_table_box.scrollLeft
+					}
+					let _left = cel - gante_left+3
+                    // 最小的宽度只能是30
+					if(_left - 30<= this.oldx + 3 -this.th_data[this.tTD.current_index].width){
+                        _left = this.oldx + 3 -this.th_data[this.tTD.current_index].width + 30
+                    }
+					this.proxy_left = _left
+					_body.style.cursor = 'col-resize'
+				}
+			},
+            // 表头鼠标按下
+			th_down(e){
+                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]
+				if(target.classList.contains('cell')){
+					target = target.parentNode
+				}
+				if(gante_table_box.scrollLeft){
+					client_x = client_x + gante_table_box.scrollLeft
+				}
+				this.oldx = client_x - table_width
+				if(client_x > this.getPos(target).x + target.offsetWidth - 10){
+					this.old_width = target.offsetWidth
+					this.show_proxy = true
+					this.tTD.current_index = target.dataset.key //记录拖动的是哪个th
+					this.proxy_left = this.oldx+3 //必须要加上3像素,不然拖动会有问题
+					this.tTD.mouseDown = true
+                    // 给document绑定事件
+					document.addEventListener('mousemove',this.doc_move,{passive:false})
+					document.addEventListener('mouseup',this.doc_up,{passive:false})
+				}
+			},
+			doc_up(){
+				document.getElementsByTagName('body')[0].style.cursor = null
+				if(this.tTD.mouseDown && this.oldx && this.tTD.current_index){
+                    // 设置拖动后的宽度
+					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;
+                    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;
+                        }
+                    }
+                    if(str < _width){
+                        this.$parent.tabe_width = (str + 2) <= 480 ? 480 : (str + 2) + 'px';
+                    }
+
+                    // 初始化所有的值
+					this.tTD.mouseDown = false
+					this.show_proxy = false
+					this.oldx = 0
+					this.old_width = 0
+					this.tTD.current_index = null
+					// 给document移除绑定事件
+					document.removeEventListener('mousemove',this.doc_move,false)
+					document.removeEventListener('mouseup',this.doc_up,false)
+				}
+			},
+//      给表格头部加上鼠标悬浮可以拉动效果
+			th_move(e){
+                if(e.target.tagName === 'SPAN' ||e.target.tagName === 'I'){
+                    return;
+                }
+
+				var target = e.target,_body = document.getElementsByTagName('body')[0],client_x = e.clientX,gante_table_box = document.getElementsByClassName('gante-table-box')[0]
+				if(target.classList.contains('cell')){
+					target = e.target.parentNode
+				}
+				if(gante_table_box.scrollLeft){
+					client_x = client_x + gante_table_box.scrollLeft
+				}
+				if(client_x > this.getPos(target).x + target.offsetWidth - 10 ){
+					_body.style.cursor = 'col-resize'
+				}else{
+					_body.style.cursor = null
+				}
+			},
+			th_out(){
+				document.getElementsByTagName('body')[0].style.cursor = null
+			}
+		},
+		components:{
+			ganteTr,loading
+		}
+	}
+
+</script>
+<style lang="less" type="text/less">
+	.gante-table{
+		font-size: 14px;
+		display: table;
+		table-layout: fixed;
+		word-break: break-all;
+		position: relative;
+        color: #666;
+        width: 100%;
+	}
+	.gante-thead{
+		position: absolute;
+		top:0;
+		left:0;
+		width: 100%;
+		z-index:2;
+
+	}
+	.gante-tbody{
+		position: relative;
+		padding-top:50px;
+	}
+	.gante-th{
+		display: table-cell;
+		white-space: nowrap;
+		overflow: hidden;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		text-align: left;
+        background: #fff;
+        box-sizing: border-box;
+	}
+	/*.gante-tr{*/
+		/*display: table-row;*/
+	/*}*/
+	.gante-td{
+		display: table-cell;
+		position: relative;
+	}
+	.gante-th,.gante-td{
+		word-break:keep-all;
+		/*padding: 12px 0;*/
+		min-width: 0;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+		-o-text-overflow: ellipsis;
+		text-overflow: ellipsis;
+		vertical-align: middle;
+		white-space: nowrap;
+		border-bottom: 1px solid #ebeef5;
+		border-right: 1px solid #ebeef5;
+		line-height: 50px;
+	}
+    .gante-th .cell ,.gante-td .cell{
+		position: relative;
+		word-wrap: normal;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		vertical-align: middle;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0 10px;
+		/*min-height: 16px;*/
+		height:50px;
+		line-height: 50px;
+	}
+    .gante-th .cell{
+        border-top: 1px solid #ebeef5;
+    }
+    .cell .caret-wrapper{
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        height: 34px;
+        width: 24px;
+        vertical-align: middle;
+        cursor: pointer;
+        overflow: initial;
+        position: relative;
+    }
+    .sort-caret {
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        position: absolute;
+        left: 7px;
+    }
+    .ascend .sort-caret.ascending{
+        border-bottom-color:#3396fb;
+    }
+    .descend .sort-caret.descending{
+        border-top-color:#3396fb;
+    }
+    .sort-caret.ascending {
+        border-bottom-color: #c0c4cc;
+        top: 5px;
+    }
+    .sort-caret.descending {
+        border-top-color: #c0c4cc;
+        bottom: 7px;
+    }
+	#gante-table__column-resize-proxy{
+		position: absolute;
+		top:0;
+		left: 0;
+		border-left: 1px solid #ebeef5;
+		width: 0;
+		bottom: 0;
+		z-index:5;
+	}
+
+</style>