gunter-kgd 1.0.1 → 1.0.3

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.
@@ -25,7 +25,7 @@
25
25
  </div>
26
26
  </template>
27
27
  <script>
28
- import outclick from '../../../utils/click-outside'
28
+ import outclick from '../../utils/click-outside'
29
29
  export default{
30
30
  data(){
31
31
  return{
@@ -20,7 +20,7 @@
20
20
  </template>
21
21
 
22
22
  <script>
23
- import myPublic from '../../../utils/public';
23
+ import myPublic from '../../utils/public';
24
24
  import emitter from './commit'
25
25
  export default {
26
26
  name: "gante-gc-item-content",
@@ -36,7 +36,7 @@
36
36
  </div>
37
37
  </template>
38
38
  <script>
39
- import ganteGcItem from '../gante_test/gante-gc-item.vue';
39
+ import ganteGcItem from './gante-gc-item.vue';
40
40
  import commitEmit from './commit.js';
41
41
  import { mapState,mapMutations } from 'vuex';
42
42
  export default {
@@ -32,7 +32,7 @@
32
32
  </template>
33
33
  <script>
34
34
  import commitEmit from './commit'
35
- import myPublic from '../../../utils/public';
35
+ import myPublic from '../../utils/public';
36
36
 
37
37
  export default {
38
38
  data() {
@@ -22,7 +22,6 @@
22
22
  </template>
23
23
  <script>
24
24
  import tdCell from './gante-table-td.vue'
25
- import {mapState, mapMutations} from 'vuex';
26
25
 
27
26
  export default {
28
27
  name: 'gante-tr',
@@ -20,8 +20,8 @@
20
20
  </div>
21
21
  </template>
22
22
  <script>
23
- import ganteTr from '../gante_test/gante-table-tr.vue'
24
- import loading from '@/components/common/loading'
23
+ import ganteTr from './gante-table-tr.vue'
24
+ import loading from '../../components/common/loading'
25
25
  export default{
26
26
  data(){
27
27
  return{
@@ -1,5 +1,4 @@
1
1
 
2
- import {mapState,mapMutations} from 'vuex';
3
2
  export default {
4
3
  data(){
5
4
  return{
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //package/index.js
2
- import gante from "../package/gante.vue"; // 引入封装好的组件
2
+ import gante from "./gante.vue"; // 引入封装好的组件
3
3
  import gunter from "./gunter";
4
4
  const coms = [gante]; // 将来如果有其它组件,都可以写到这个数组里
5
5
 
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "gunter-kgd",
3
- "version": "1.0.1",
4
- "main": "index.js",
3
+ "version": "1.0.3",
4
+ "main": "gante-vue.common.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
7
7
  },
8
+ "keywords": [],
8
9
  "author": "",
9
10
  "license": "ISC",
10
11
  "description": ""
@@ -1,35 +0,0 @@
1
- /**
2
- * Created by Administrator on 2018/12/27.
3
- */
4
- import Gante from './gante.vue'
5
- export default {
6
- install(Vue, options = {}) {
7
- const VueGante = Vue.extend(Gante)
8
- let gante = null
9
-
10
- function $gante(params) {
11
- return new Promise(resolve => {
12
- // console.log(gante)
13
- let container = 'body'
14
- if (params.container) {
15
- container = params.container
16
- }
17
- gante = new VueGante()
18
- gante.$store = this.$root.$store;
19
- gante.$mount();
20
- let ganteLiuBox=document.querySelector('#gante .ganteLiuBox');
21
- // console.log('ganteLiuBox',ganteLiuBox);
22
- if(ganteLiuBox){
23
- document.querySelector(container).replaceChild(gante.$el,ganteLiuBox);
24
- }else{
25
- document.querySelector(container).appendChild(gante.$el);
26
- }
27
- // }
28
- gante.init(params);
29
- resolve(gante)
30
- })
31
- }
32
-
33
- Vue.prototype.$gante = $gante
34
- }
35
- }
@@ -1,258 +0,0 @@
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>