gunter-kgd 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/common/dropdown.vue +227 -0
- package/components/common/loading.vue +67 -0
- package/components/gante_test/auto-scroll.js +32 -0
- package/components/gante_test/calendar.vue +257 -0
- package/components/gante_test/commit.js +2 -0
- package/components/gante_test/gante-drag-circle.vue +151 -0
- package/components/gante_test/gante-gc-item-content.vue +442 -0
- package/components/gante_test/gante-gc-item.vue +95 -0
- package/components/gante_test/gante-gc.vue +534 -0
- package/components/gante_test/gante-split.vue +125 -0
- package/components/gante_test/gante-table-td.vue +263 -0
- package/components/gante_test/gante-table-tr.vue +160 -0
- package/components/gante_test/gante-table.vue +349 -0
- package/components/gante_test/gante.js +35 -0
- package/components/gante_test/gante.vue +894 -0
- package/components/gante_test/gante_op.js +113 -0
- package/components/gante_test/gante_test.vue +258 -0
- package/components/gante_test/requestAnimation.js +49 -0
- package/components/gante_test/resize.js +80 -0
- package/components/gante_test/search_last_width.js +27 -0
- package/gante.vue +9 -9
- package/package.json +1 -1
- package/utils/click-outside.js +18 -0
- package/utils/public.js +94 -0
- package/utils/requestAnimation.js +49 -0
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
|
|
2
|
+
import {mapState,mapMutations} from 'vuex';
|
|
3
|
+
export default {
|
|
4
|
+
data(){
|
|
5
|
+
return{
|
|
6
|
+
fullScreen: false,//是否全屏模式
|
|
7
|
+
today: '今天',
|
|
8
|
+
buttonList: [
|
|
9
|
+
{
|
|
10
|
+
value: 1,
|
|
11
|
+
text: '天'
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
value: 2,
|
|
15
|
+
text: '周'
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
value: 3,
|
|
19
|
+
text: '月'
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
value: 4,
|
|
23
|
+
text: '季'
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
value: 5,
|
|
27
|
+
text: '年'
|
|
28
|
+
},
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
mounted(){
|
|
33
|
+
document.addEventListener('fullscreenchange',this.changeScreen);
|
|
34
|
+
},
|
|
35
|
+
methods: {
|
|
36
|
+
// 回到今天
|
|
37
|
+
toToday(){
|
|
38
|
+
let today = document.getElementById('today-ganteview-column');
|
|
39
|
+
let ganteview = document.getElementsByClassName('ganteview')[0];
|
|
40
|
+
if(ganteview){
|
|
41
|
+
let left = today.offsetLeft - ganteview.clientHeight/2;
|
|
42
|
+
if(left<0){
|
|
43
|
+
left = 0
|
|
44
|
+
}
|
|
45
|
+
ganteview.scrollLeft = left;
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
//切换模式
|
|
49
|
+
trickMode(item) {
|
|
50
|
+
const nextMode = Number(item) || 1;
|
|
51
|
+
this.time_mode = nextMode;
|
|
52
|
+
this.init({time_mode: nextMode}, false);
|
|
53
|
+
},
|
|
54
|
+
//切換模式
|
|
55
|
+
op_time_mode(mode){
|
|
56
|
+
const current = Number(this.time_mode) || 1;
|
|
57
|
+
let next = current + mode;
|
|
58
|
+
if(next<=1){
|
|
59
|
+
next = 1;
|
|
60
|
+
}
|
|
61
|
+
if(next>=5){
|
|
62
|
+
next=5
|
|
63
|
+
}
|
|
64
|
+
this.time_mode = next;
|
|
65
|
+
this.init({time_mode: next}, false);
|
|
66
|
+
},
|
|
67
|
+
//全屏 退出全屏
|
|
68
|
+
toFullScreen(){
|
|
69
|
+
let element = document.documentElement;
|
|
70
|
+
// 判断是否已经是全屏
|
|
71
|
+
// 如果是全屏,退出
|
|
72
|
+
if (this.fullScreen) {
|
|
73
|
+
if (document.exitFullscreen) {
|
|
74
|
+
document.exitFullscreen();
|
|
75
|
+
} else if (document.webkitCancelFullScreen) {
|
|
76
|
+
document.webkitCancelFullScreen();
|
|
77
|
+
} else if (document.mozCancelFullScreen) {
|
|
78
|
+
document.mozCancelFullScreen();
|
|
79
|
+
} else if (document.msExitFullscreen) {
|
|
80
|
+
document.msExitFullscreen();
|
|
81
|
+
}
|
|
82
|
+
console.log('已还原!');
|
|
83
|
+
} else { // 否则,进入全屏
|
|
84
|
+
if (element.requestFullscreen) {
|
|
85
|
+
element.requestFullscreen();
|
|
86
|
+
} else if (element.webkitRequestFullScreen) {
|
|
87
|
+
element.webkitRequestFullScreen();
|
|
88
|
+
} else if (element.mozRequestFullScreen) {
|
|
89
|
+
element.mozRequestFullScreen();
|
|
90
|
+
} else if (element.msRequestFullscreen) {
|
|
91
|
+
// IE11
|
|
92
|
+
element.msRequestFullscreen();
|
|
93
|
+
}
|
|
94
|
+
console.log('已全屏!');
|
|
95
|
+
}
|
|
96
|
+
// 改变当前全屏状态
|
|
97
|
+
this.fullScreen = !this.fullScreen;
|
|
98
|
+
},
|
|
99
|
+
changeScreen(){
|
|
100
|
+
if (document.fullscreenElement) {
|
|
101
|
+
this.fullScreen = true;
|
|
102
|
+
} else {
|
|
103
|
+
this.fullScreen = false;
|
|
104
|
+
}
|
|
105
|
+
setTimeout(()=>{
|
|
106
|
+
this.init({}, false);
|
|
107
|
+
},500)
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
destroyed(){
|
|
111
|
+
document.removeEventListener('fullscreenchange',this.changeScreen);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="gante">
|
|
4
|
+
</div>
|
|
5
|
+
<button @click="refresh" class="refresh">更新数据</button>
|
|
6
|
+
</div>
|
|
7
|
+
</template>
|
|
8
|
+
<script>
|
|
9
|
+
/*
|
|
10
|
+
import gante from './components/gante_test/gante'
|
|
11
|
+
Vue.use(gante)
|
|
12
|
+
1.全局调用方法:
|
|
13
|
+
this.$gante({
|
|
14
|
+
container:'.gante',
|
|
15
|
+
ganteData:data,
|
|
16
|
+
start_time:new Date('2018/12/15').getTime(),
|
|
17
|
+
end_time:new Date('2019/2/4').getTime(),
|
|
18
|
+
open:true,
|
|
19
|
+
height:400,
|
|
20
|
+
time_mode:1,
|
|
21
|
+
th_data:th_data,
|
|
22
|
+
onEdit(data){
|
|
23
|
+
console.log(data)
|
|
24
|
+
},
|
|
25
|
+
onClick(data){
|
|
26
|
+
console.log(data)
|
|
27
|
+
},
|
|
28
|
+
onDragChangeTime(data,resolve){
|
|
29
|
+
resolve(false) // 取消刚才拖动的时间,如果不取消就不用执行
|
|
30
|
+
},
|
|
31
|
+
onLoad(resolve){
|
|
32
|
+
resolve(false,data,start_time,end_time)
|
|
33
|
+
}
|
|
34
|
+
})
|
|
35
|
+
其中
|
|
36
|
+
container: 要加载到哪个元素下面(默认为body)
|
|
37
|
+
ganteData: 要加在的数据(必须要设置)
|
|
38
|
+
start_time: 最小的开始时间(必须要设置,时间戳格式)
|
|
39
|
+
end_time: 最大的结束时间(必须要设置,时间戳格式)
|
|
40
|
+
tabe_width: 表格的宽度(默认是甘特图的一半) 支持calc()写法或百分比写法,在没有具体宽度的情况下很有用
|
|
41
|
+
open: 子任务是否打开的状态(默认为true)
|
|
42
|
+
openLoad: true 是否开启懒加载模式
|
|
43
|
+
height: 甘特图的高度(默认是300)支持calc()写法或百分比写法,在没有具体高度的情况下很有用
|
|
44
|
+
time_mode: 显示的刻度(时间刻度 1:日,2周,3月,4季,5年,默认是1)
|
|
45
|
+
th_data: 表格头部的属性值(必须要设置)
|
|
46
|
+
onEdit: 编辑过了所触发的事件
|
|
47
|
+
onClick: 点击了listen_click设为true的th所触发的事件(只有listen_click设为true才能触发)
|
|
48
|
+
onDragChangeTime: 拖动改变时间的事件,(data,resolve) data:当前的数据 resolve回调执行的函数,这个函数有个参数(bol)为false时,取消刚才拖动的时间。
|
|
49
|
+
onLoad(resolve): 懒加载 resolve回调函数 其中包含4个参数requestBol: 是否还可以请求 data: 加载的数据 start_time: 最小开始时间 end_time: 最大的结束时间
|
|
50
|
+
2.th_data示例{
|
|
51
|
+
title:{value:'任务名称',width:80,showToast:false,listen_click:true},
|
|
52
|
+
startTime:{value:'开始时间',width:150,showToast:true,chooseTime:true,time_mode:1,sort_type:'asc'},
|
|
53
|
+
endTime:{value:'结束时间',width:150,showToast:true,chooseTime:true,time_mode:2},
|
|
54
|
+
biaoti:{value:'内容',width:450,shrink:true,showToast:true,edit:true}
|
|
55
|
+
}
|
|
56
|
+
其中
|
|
57
|
+
value:th的名称,
|
|
58
|
+
width:th的宽度(默认是80), 不支持calc()写法或百分比写法
|
|
59
|
+
showToast:鼠标悬浮到右侧图例上时显示的toast里是否显示该属性值,
|
|
60
|
+
time_mode:1(是开始时间),2(结束时间)*注:(必须要有开始时间和结束时间标示)
|
|
61
|
+
edit: 该内容是否可编辑,
|
|
62
|
+
chooseTime: 是否启动选择时间控件 ,
|
|
63
|
+
shrink: 该项显示收缩的图例(只用设置其中某一项)
|
|
64
|
+
listen_click: 是否监听点击事件
|
|
65
|
+
sort_type: 排序 desc: 倒序 asc:正序(只能放在没有懒加载的模式中)
|
|
66
|
+
|
|
67
|
+
th_data里的属性必须要和ganteData里params里的属性相对应,属性名要一样
|
|
68
|
+
3.ganteData示例[
|
|
69
|
+
{
|
|
70
|
+
gunter_id:1,
|
|
71
|
+
params:{title:'项目制作任务',startTime:'2018-12-19',endTime:'2019-1-3',biaoti:'这是任务标题内容'},
|
|
72
|
+
start_time:new Date(2018,11,19).getTime(),
|
|
73
|
+
end_time:new Date(2019,0,3).getTime(),
|
|
74
|
+
level:1,
|
|
75
|
+
children:[
|
|
76
|
+
{
|
|
77
|
+
gunter_id:2,
|
|
78
|
+
params:{title:'子任务',startTime:'2018-12-17',endTime:'2019-1-1',biaoti:'这是第一级子任务内容'},
|
|
79
|
+
start_time:new Date(2018,11,17).getTime(),
|
|
80
|
+
end_time:new Date(2019,0,1).getTime(),
|
|
81
|
+
bg_color:'yellow',
|
|
82
|
+
level:2
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
gunter_id: 每个任务的标示id(不能有重复的id,可以是字符串和数字)
|
|
87
|
+
params: 表格要显示的内容,其中属性名要和th_data一致
|
|
88
|
+
start_time: 该任务的开始时间(必须要设置,时间戳格式)
|
|
89
|
+
end_time: 该任务的结束时间(必须要设置,时间戳格式)
|
|
90
|
+
bg_color: 图例的颜色(默认为#00b0ff)
|
|
91
|
+
level: 任务的层级(1代表第一层,2代表第二层)
|
|
92
|
+
children: 子任务数据
|
|
93
|
+
*/
|
|
94
|
+
export default{
|
|
95
|
+
data(){
|
|
96
|
+
return{
|
|
97
|
+
GANTT: null
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
mounted(){
|
|
101
|
+
let data=[
|
|
102
|
+
{
|
|
103
|
+
gunter_id:1,
|
|
104
|
+
params:{title:'项目制作任务',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:'100%',status:'紧急',craft_status: 1},
|
|
105
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
106
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
107
|
+
level:1,
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
gunter_id:3,
|
|
111
|
+
params:{title:'项目制作任务1',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:10,craft_status: 2},
|
|
112
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
113
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
114
|
+
level:1,
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
gunter_id:6,
|
|
118
|
+
params:{title:'项目制作任务2',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:20,craft_status: 3},
|
|
119
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
120
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
121
|
+
level:1,
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
gunter_id:8,
|
|
125
|
+
params:{title:'项目制作任务3',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:30,craft_status: 4},
|
|
126
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
127
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
128
|
+
level:1,
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
gunter_id:18,
|
|
132
|
+
params:{title:'项目制作任务3',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容',progress:40},
|
|
133
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
134
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
135
|
+
level:1,
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
gunter_id:28,
|
|
139
|
+
params:{title:'项目制作任务3',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:50},
|
|
140
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
141
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
142
|
+
level:1,
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
gunter_id:38,
|
|
146
|
+
params:{title:'项目制作任务3',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:60},
|
|
147
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
148
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
149
|
+
level:1,
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
gunter_id:48,
|
|
153
|
+
params:{title:'项目制作任务3',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:70},
|
|
154
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
155
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
156
|
+
level:1,
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
gunter_id:58,
|
|
160
|
+
params:{title:'项目制作任务3',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:80},
|
|
161
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
162
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
163
|
+
level:1,
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
gunter_id:68,
|
|
167
|
+
params:{title:'项目制作任务3',startTime:'2025-10-1',endTime:'2025-11-25',biaoti:'这是任务标题内容', progress:90},
|
|
168
|
+
start_time:new Date(2025,9,1).getTime(),
|
|
169
|
+
end_time:new Date(2025,10,25).getTime(),
|
|
170
|
+
level:1,
|
|
171
|
+
},
|
|
172
|
+
|
|
173
|
+
],
|
|
174
|
+
th_data = {
|
|
175
|
+
title:{value:'加工单号',width:100},
|
|
176
|
+
startTime:{value:'计划开始',width:150,chooseTime:true,time_mode:1,format:'YYYY-MM-DD'},
|
|
177
|
+
endTime:{value:'计划结束',width:150,chooseTime:true,time_mode:2,format:'YYYY-MM-DD'},
|
|
178
|
+
biaoti:{value:'优先级',width:150,},
|
|
179
|
+
goods:{value:'商品名称',width:150},
|
|
180
|
+
|
|
181
|
+
}
|
|
182
|
+
this.$gante({
|
|
183
|
+
container:'.gante',
|
|
184
|
+
ganteData:data,
|
|
185
|
+
start_time:new Date('2025/10/1').getTime(),
|
|
186
|
+
end_time:new Date('2026/10/1').getTime(),
|
|
187
|
+
tabe_width:'calc(100% - 800px)',
|
|
188
|
+
open:true,
|
|
189
|
+
openLoad:true,
|
|
190
|
+
height:'400px',
|
|
191
|
+
time_mode:1,
|
|
192
|
+
th_data:th_data,
|
|
193
|
+
toastClass:'custom-toast',
|
|
194
|
+
toastRender:this.renderCustomToast,
|
|
195
|
+
onEdit(data){
|
|
196
|
+
console.log(data)
|
|
197
|
+
},
|
|
198
|
+
onClick(data){
|
|
199
|
+
console.log(data)
|
|
200
|
+
},
|
|
201
|
+
onDragChangeTime(data){
|
|
202
|
+
console.log(data)
|
|
203
|
+
}
|
|
204
|
+
}).then(data =>{
|
|
205
|
+
this.GANTT = data;
|
|
206
|
+
})
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
},
|
|
210
|
+
methods:{
|
|
211
|
+
renderCustomToast({ currentData }){
|
|
212
|
+
const info = currentData.params;
|
|
213
|
+
console.log('数据表格行内数据',info);
|
|
214
|
+
return `
|
|
215
|
+
<div class="custom-toast__card">
|
|
216
|
+
自定义
|
|
217
|
+
</div>
|
|
218
|
+
`;
|
|
219
|
+
},
|
|
220
|
+
refresh(){
|
|
221
|
+
let datas = [{
|
|
222
|
+
gunter_id:1,
|
|
223
|
+
params:{title:'项目制作任务',startTime:'',endTime:'2019-1-3',biaoti:'这是任务标题内容'},
|
|
224
|
+
start_time:0,
|
|
225
|
+
end_time:new Date(2019,0,3).getTime(),
|
|
226
|
+
level:1,
|
|
227
|
+
children:[
|
|
228
|
+
{
|
|
229
|
+
gunter_id:2,
|
|
230
|
+
params:{title:'子任务',startTime:'2018-12-19',endTime:'2019-1-1',biaoti:'这是第一级子任务内容'},
|
|
231
|
+
start_time:new Date(2018,11,19).getTime(),
|
|
232
|
+
end_time:new Date(2019,0,1).getTime(),
|
|
233
|
+
bg_color:'yellow',
|
|
234
|
+
level:2
|
|
235
|
+
}
|
|
236
|
+
]
|
|
237
|
+
}]
|
|
238
|
+
this.GANTT.init({ganteData: datas},false)
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
</script>
|
|
243
|
+
<style>
|
|
244
|
+
.custom-toast {
|
|
245
|
+
padding: 0 !important;
|
|
246
|
+
border-radius: 12px !important;
|
|
247
|
+
}
|
|
248
|
+
.custom-toast__card{
|
|
249
|
+
min-width: 240px;
|
|
250
|
+
max-width: 320px;
|
|
251
|
+
background: #0f172a;
|
|
252
|
+
color: #e2e8f0;
|
|
253
|
+
border-radius: 10px;
|
|
254
|
+
padding: 12px 14px;
|
|
255
|
+
box-shadow: 0 8px 18px rgba(0,0,0,0.25);
|
|
256
|
+
border: 1px solid rgba(255,255,255,0.08);
|
|
257
|
+
}
|
|
258
|
+
</style>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
const callbackList = []
|
|
2
|
+
|
|
3
|
+
const find = (list, predicate) => {
|
|
4
|
+
for (let index = 0; index < list.length; index++) {
|
|
5
|
+
if (predicate(list[index], index, list)) {
|
|
6
|
+
return list[index]
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
return null
|
|
10
|
+
}
|
|
11
|
+
const findIndex = (list, predicate) => {
|
|
12
|
+
for (let index = 0; index < list.length; index++) {
|
|
13
|
+
if (predicate(list[index], index, list)) {
|
|
14
|
+
return index
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return -1
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function raf(callback) {
|
|
21
|
+
const entry = find(callbackList, item => item.callback === callback)
|
|
22
|
+
if (entry) {
|
|
23
|
+
return entry.requestId
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
const requestId = requestAnimationFrame(ts => {
|
|
27
|
+
const index = findIndex(callbackList, item => item.callback === callback)
|
|
28
|
+
callbackList.splice(index, 1)
|
|
29
|
+
callback(ts)
|
|
30
|
+
})
|
|
31
|
+
callbackList.push({
|
|
32
|
+
callback,
|
|
33
|
+
requestId,
|
|
34
|
+
})
|
|
35
|
+
return requestId
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
function caf(requestId) {
|
|
39
|
+
const index = findIndex(callbackList, item => item.requestId === requestId)
|
|
40
|
+
if (~index) {
|
|
41
|
+
callbackList.splice(index, 1)
|
|
42
|
+
}
|
|
43
|
+
cancelAnimationFrame(requestId)
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export {
|
|
47
|
+
raf as requestAnimationFrame,
|
|
48
|
+
caf as cancelAnimationFrame,
|
|
49
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Created by Administrator on 2018/12/29.
|
|
3
|
+
*/
|
|
4
|
+
var passiveEvents = false
|
|
5
|
+
try {
|
|
6
|
+
var opts = Object.defineProperty({}, 'passive', {
|
|
7
|
+
get: function () {
|
|
8
|
+
passiveEvents = { passive: true }
|
|
9
|
+
}
|
|
10
|
+
})
|
|
11
|
+
window.addEventListener('test', null, opts)
|
|
12
|
+
} catch (e) {}
|
|
13
|
+
|
|
14
|
+
const resize = {
|
|
15
|
+
onelresize (el, handler) {
|
|
16
|
+
if (!(el instanceof HTMLElement)) {
|
|
17
|
+
throw new TypeError("Parameter 1 is not instance of 'HTMLElement'.")
|
|
18
|
+
}
|
|
19
|
+
// https://www.w3.org/TR/html/syntax.html#writing-html-documents-elements
|
|
20
|
+
if (/^(area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style|textarea|title)$/i.test(el.tagName)) {
|
|
21
|
+
throw new TypeError('Unsupported tag type. Change the tag or wrap it in a supported tag(e.g. div).')
|
|
22
|
+
}
|
|
23
|
+
if (typeof handler !== 'function') { throw new TypeError("Parameter 2 is not of type 'function'.") }
|
|
24
|
+
|
|
25
|
+
var lastWidth = el.offsetWidth || 1
|
|
26
|
+
var lastHeight = el.offsetHeight || 1
|
|
27
|
+
var maxWidth = 10000 * (lastWidth)
|
|
28
|
+
var maxHeight = 10000 * (lastHeight)
|
|
29
|
+
|
|
30
|
+
var expand = document.createElement('div')
|
|
31
|
+
expand.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;z-index=-10000;overflow:hidden;visibility:hidden;'
|
|
32
|
+
var shrink = expand.cloneNode(false)
|
|
33
|
+
|
|
34
|
+
var expandChild = document.createElement('div')
|
|
35
|
+
expandChild.style.cssText = 'transition:0s;animation:none;'
|
|
36
|
+
var shrinkChild = expandChild.cloneNode(false)
|
|
37
|
+
|
|
38
|
+
expandChild.style.width = maxWidth + 'px'
|
|
39
|
+
expandChild.style.height = maxHeight + 'px'
|
|
40
|
+
shrinkChild.style.width = '250%'
|
|
41
|
+
shrinkChild.style.height = '250%'
|
|
42
|
+
|
|
43
|
+
expand.appendChild(expandChild)
|
|
44
|
+
shrink.appendChild(shrinkChild)
|
|
45
|
+
el.appendChild(expand)
|
|
46
|
+
el.appendChild(shrink)
|
|
47
|
+
|
|
48
|
+
if (expand.offsetParent !== el) {
|
|
49
|
+
el.style.position = 'relative'
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
expand.scrollTop = shrink.scrollTop = maxHeight
|
|
53
|
+
expand.scrollLeft = shrink.scrollLeft = maxWidth
|
|
54
|
+
|
|
55
|
+
var newWidth = 0
|
|
56
|
+
var newHeight = 0
|
|
57
|
+
function onResize () {
|
|
58
|
+
if (newWidth !== lastWidth || newHeight !== lastHeight) {
|
|
59
|
+
lastWidth = newWidth
|
|
60
|
+
lastHeight = newHeight
|
|
61
|
+
handler()
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function onScroll () {
|
|
66
|
+
newWidth = el.offsetWidth || 1
|
|
67
|
+
newHeight = el.offsetHeight || 1
|
|
68
|
+
if (newWidth !== lastWidth || newHeight !== lastHeight) {
|
|
69
|
+
requestAnimationFrame(onResize)
|
|
70
|
+
}
|
|
71
|
+
expand.scrollTop = shrink.scrollTop = maxHeight
|
|
72
|
+
expand.scrollLeft = shrink.scrollLeft = maxWidth
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
expand.addEventListener('scroll', onScroll, passiveEvents)
|
|
76
|
+
shrink.addEventListener('scroll', onScroll, passiveEvents)
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
export {resize}
|
|
80
|
+
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
methods:{
|
|
3
|
+
find_attr(_width,th_data){
|
|
4
|
+
let str = 0;
|
|
5
|
+
for(let key in th_data){
|
|
6
|
+
if(th_data[key].show != false){
|
|
7
|
+
str += th_data[key].width ? Number(th_data[key].width) + 1 : 81;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
if(str < _width){
|
|
11
|
+
let last_attr = this.find_last_attr(1,th_data)
|
|
12
|
+
//为了预防不能拖动最后一个菜单所以-2\
|
|
13
|
+
console.log(last_attr)
|
|
14
|
+
let last_width = last_attr.width ? Number(last_attr.width) - 2 : 78
|
|
15
|
+
this.$set(last_attr,'width', _width - (str - last_width))
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
find_last_attr(num,th_data){
|
|
20
|
+
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){
|
|
21
|
+
return th_data[Object.keys(th_data)[Object.keys(th_data).length - num]]
|
|
22
|
+
}else{
|
|
23
|
+
return this.find_last_attr(num+1,th_data)
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
package/gante.vue
CHANGED
|
@@ -42,15 +42,15 @@
|
|
|
42
42
|
</div>
|
|
43
43
|
</template>
|
|
44
44
|
<script>
|
|
45
|
-
import ganteTable from '
|
|
46
|
-
import ganteGc from '
|
|
47
|
-
import ganteSplit from '
|
|
48
|
-
import commitEmit from '
|
|
49
|
-
import calendar from '
|
|
50
|
-
import searchLastWidth from '
|
|
51
|
-
import ganteOp from '
|
|
52
|
-
import myPublic from '
|
|
53
|
-
import dropdown from '
|
|
45
|
+
import ganteTable from './components/gante_test/gante-table.vue'
|
|
46
|
+
import ganteGc from './components/gante_test/gante-gc.vue'
|
|
47
|
+
import ganteSplit from './components/gante_test/gante-split.vue'
|
|
48
|
+
import commitEmit from './components/gante_test/commit'
|
|
49
|
+
import calendar from './components/gante_test/calendar.vue'
|
|
50
|
+
import searchLastWidth from './components/gante_test/search_last_width';
|
|
51
|
+
import ganteOp from './components/gante_test/gante_op';
|
|
52
|
+
import myPublic from './utils/public'
|
|
53
|
+
import dropdown from './components/common/dropdown.vue'
|
|
54
54
|
let number = 0 //序号
|
|
55
55
|
export default {
|
|
56
56
|
name: 'gante',
|
package/package.json
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 点击元素外部触发事件
|
|
3
|
+
*/
|
|
4
|
+
export default {
|
|
5
|
+
bind: function (el, { value }) {
|
|
6
|
+
let onClickOutside = value
|
|
7
|
+
el.handler = function (e) {
|
|
8
|
+
if (el && !el.contains(e.target)) {
|
|
9
|
+
onClickOutside(e)
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
document.addEventListener('click', el.handler, true)
|
|
13
|
+
},
|
|
14
|
+
unbind: function (el) {
|
|
15
|
+
document.removeEventListener('click', el.handler, true)
|
|
16
|
+
el.handler = null
|
|
17
|
+
}
|
|
18
|
+
}
|
package/utils/public.js
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
//时间封装
|
|
3
|
+
dateFormat: {
|
|
4
|
+
//日期格式化
|
|
5
|
+
/**
|
|
6
|
+
*
|
|
7
|
+
* @param date 标准时间日期格式
|
|
8
|
+
* @param fmt 格式化格式
|
|
9
|
+
* @returns {string}
|
|
10
|
+
*/
|
|
11
|
+
format(date, fmt = 'YYYY-MM-DD HH:mm:ss') {
|
|
12
|
+
date = new Date(date).getTime();
|
|
13
|
+
date = new Date(date);
|
|
14
|
+
var o = {
|
|
15
|
+
'M+': date.getMonth() + 1,
|
|
16
|
+
'D+': date.getDate(),
|
|
17
|
+
'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
|
|
18
|
+
'H+': date.getHours(),
|
|
19
|
+
'm+': date.getMinutes(),
|
|
20
|
+
's+': date.getSeconds(),
|
|
21
|
+
'q+': Math.floor((date.getMonth() + 3) / 3),
|
|
22
|
+
'S': date.getMilliseconds()
|
|
23
|
+
}
|
|
24
|
+
var week = {
|
|
25
|
+
'0': '\u65e5',
|
|
26
|
+
'1': '\u4e00',
|
|
27
|
+
'2': '\u4e8c',
|
|
28
|
+
'3': '\u4e09',
|
|
29
|
+
'4': '\u56db',
|
|
30
|
+
'5': '\u4e94',
|
|
31
|
+
'6': '\u516d'
|
|
32
|
+
}
|
|
33
|
+
if (/(Y+)/.test(fmt)) {
|
|
34
|
+
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
35
|
+
}
|
|
36
|
+
if (/(E+)/.test(fmt)) {
|
|
37
|
+
fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + ''])
|
|
38
|
+
}
|
|
39
|
+
for (var k in o) {
|
|
40
|
+
if (new RegExp('(' + k + ')').test(fmt)) {
|
|
41
|
+
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
return fmt
|
|
45
|
+
},
|
|
46
|
+
//格式日期兼容苹果端日期获取
|
|
47
|
+
dateReplace(date) {
|
|
48
|
+
return date.replace(/-/g, '/');
|
|
49
|
+
},
|
|
50
|
+
//首页列表格式化时间
|
|
51
|
+
getDateDiff(time, bool = false) {
|
|
52
|
+
var dateTimeStamp = Date.parse(time.replace(/-/g, '/'))
|
|
53
|
+
var minute = 1000 * 60;
|
|
54
|
+
var hour = minute * 60;
|
|
55
|
+
var day = hour * 24;
|
|
56
|
+
var halfamonth = day * 15;
|
|
57
|
+
var month = day * 30;
|
|
58
|
+
var year = month * 12;
|
|
59
|
+
var now = new Date().getTime();
|
|
60
|
+
var diffValue = now - dateTimeStamp;
|
|
61
|
+
var yearC = diffValue / year;
|
|
62
|
+
var dayC = diffValue / day;
|
|
63
|
+
var hourC = diffValue / hour;
|
|
64
|
+
var minC = diffValue / minute;
|
|
65
|
+
var result = ''
|
|
66
|
+
if (diffValue < 0) {
|
|
67
|
+
return getDayName(dateTimeStamp, hourC, minC, time)
|
|
68
|
+
} else {
|
|
69
|
+
// console.log('yearC',yearC,dateTimeStamp,year);
|
|
70
|
+
if (yearC >= 1) {
|
|
71
|
+
let year=parseInt(yearC)==1?i18n.t('common.time.year'):i18n.t('common.time.years');
|
|
72
|
+
result = parseInt(yearC) + ' ' + year;
|
|
73
|
+
} else if (dayC >= 1) {
|
|
74
|
+
let day=parseInt(dayC)==1?i18n.t('common.time.day'):i18n.t('common.time.days');
|
|
75
|
+
result = parseInt(dayC) + ' ' + day;
|
|
76
|
+
} else if (hourC >= 1) {
|
|
77
|
+
let hour=parseInt(hourC)==1?i18n.t('common.time.hour'):i18n.t('common.time.hours');
|
|
78
|
+
result = parseInt(hourC) + ' ' + hour;
|
|
79
|
+
} else if (minC >= 0) {
|
|
80
|
+
var mini = parseInt(minC)
|
|
81
|
+
if (parseInt(minC) == 0) {
|
|
82
|
+
mini = 1
|
|
83
|
+
}
|
|
84
|
+
let min=parseInt(hourC)==1?i18n.t('common.time.minute'):i18n.t('common.time.minutes');
|
|
85
|
+
result = mini + ' ' + min;
|
|
86
|
+
}
|
|
87
|
+
if (!bool) {
|
|
88
|
+
result = i18n.t('common.time.overdue') + ' ' + result
|
|
89
|
+
}
|
|
90
|
+
return result;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
}
|