gunter-kgd 1.0.3 → 1.0.4
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.
|
@@ -11,18 +11,24 @@
|
|
|
11
11
|
padding:th.shrink ? '0 18px' : '0 10px',
|
|
12
12
|
paddingLeft:th.shrink ? (td_data.level + 1)*18+'px' : null}">
|
|
13
13
|
<span :style="{color:td_data.color ? td_data.color[key_value] : null}" class="cell-value">
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
14
|
+
<slot-renderer
|
|
15
|
+
v-if="customSlot"
|
|
16
|
+
:slot-fn="customSlot"
|
|
17
|
+
:slot-props="slotProps" />
|
|
18
|
+
<template v-else>
|
|
19
|
+
<span class="trigger" @click.stop="opens()" v-if="th.shrink && td_data.children">
|
|
20
|
+
<span v-show="td_data.children" style="cursor: pointer;"
|
|
21
|
+
>
|
|
22
|
+
<span style="display: inline-block"
|
|
23
|
+
:style="{transform: !td_data.open ? 'rotateZ(-90deg)' : null}"
|
|
24
|
+
class="open-icon"></span>
|
|
25
|
+
</span>
|
|
26
|
+
<!--<span v-show="td_data.showLoading" class="el-icon-loading"></span>-->
|
|
27
|
+
</span>
|
|
28
|
+
<span v-if="td_data.level >= 1 && th.shrink && !td_data.children" class="spot"></span>
|
|
29
|
+
<span v-if="th.format">{{myPublic.dateFormat.format(td_data.params[key_value],th.format)}}</span>
|
|
30
|
+
<span v-else v-html="td_data.params[key_value]"></span>
|
|
31
|
+
</template>
|
|
26
32
|
</span>
|
|
27
33
|
</div>
|
|
28
34
|
<input class="gante_edit_input_liu" @click="change_calendar($refs.cells,td_data.params[key_value])"
|
|
@@ -34,7 +40,21 @@
|
|
|
34
40
|
import commitEmit from './commit'
|
|
35
41
|
import myPublic from '../../utils/public';
|
|
36
42
|
|
|
43
|
+
const SlotRenderer = {
|
|
44
|
+
functional: true,
|
|
45
|
+
props: {
|
|
46
|
+
slotFn: Function,
|
|
47
|
+
slotProps: Object
|
|
48
|
+
},
|
|
49
|
+
render(h, { props }) {
|
|
50
|
+
return props.slotFn ? props.slotFn(props.slotProps) : null
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
37
54
|
export default {
|
|
55
|
+
components: {
|
|
56
|
+
SlotRenderer
|
|
57
|
+
},
|
|
38
58
|
data() {
|
|
39
59
|
return {
|
|
40
60
|
myPublic,
|
|
@@ -47,7 +67,25 @@
|
|
|
47
67
|
th: Object,
|
|
48
68
|
index: Number,
|
|
49
69
|
key_value: String,
|
|
50
|
-
is_load_child: Boolean
|
|
70
|
+
is_load_child: Boolean,
|
|
71
|
+
cellSlots: Object
|
|
72
|
+
},
|
|
73
|
+
computed: {
|
|
74
|
+
customSlot(){
|
|
75
|
+
return this.cellSlots && this.cellSlots[this.key_value]
|
|
76
|
+
},
|
|
77
|
+
slotProps(){
|
|
78
|
+
return {
|
|
79
|
+
td_data: this.td_data,
|
|
80
|
+
th: this.th,
|
|
81
|
+
value: this.td_data.params[this.key_value],
|
|
82
|
+
index: this.index,
|
|
83
|
+
key_value: this.key_value,
|
|
84
|
+
row: this.td_data,
|
|
85
|
+
columnKey: this.key_value,
|
|
86
|
+
toggle: this.opens
|
|
87
|
+
}
|
|
88
|
+
}
|
|
51
89
|
},
|
|
52
90
|
methods: {
|
|
53
91
|
// 获取元素距离浏览器的距离
|
|
@@ -72,7 +110,6 @@
|
|
|
72
110
|
},
|
|
73
111
|
// 编辑任务
|
|
74
112
|
to_edit(e, value) {
|
|
75
|
-
console.log('this.th_data', this.td_data)
|
|
76
113
|
if (this.th.edit || this.th.chooseTime) {
|
|
77
114
|
this.edit = true
|
|
78
115
|
if (this.th.chooseTime) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!--表格tr-->
|
|
2
2
|
<template>
|
|
3
3
|
<div class="gante-tr-box">
|
|
4
|
-
|
|
4
|
+
<!--为了设置每个子显示线 gante-cell_after gante-cell_after_first gante-cell_after_last-->
|
|
5
5
|
<div class="gante-tr-one"
|
|
6
6
|
:key="index"
|
|
7
7
|
v-for="(tr,index) in data">
|
|
@@ -9,19 +9,21 @@
|
|
|
9
9
|
<div class="gante-tr" :class="{gj_hover_class: tr.is_hover}" @mouseenter="enterTr($event,tr)"
|
|
10
10
|
@mouseleave="leaveTr($event,tr)" >
|
|
11
11
|
<div class="gante-td" v-show="th.show != false" v-for="(th,key) in th_data"
|
|
12
|
-
:style="{textAlign:th.value == '
|
|
12
|
+
:style="{textAlign:th.value == '编码'?'center':'null'}">
|
|
13
13
|
<td-cell :td_data="tr" :index="index" :key_value="key"
|
|
14
|
-
:th="th"
|
|
14
|
+
:th="th"
|
|
15
|
+
:cell-slots="cellSlots"></td-cell>
|
|
15
16
|
</div>
|
|
16
17
|
</div>
|
|
17
18
|
<gante-tr v-if="tr.children && tr.open" :parent_data="tr"
|
|
18
19
|
:all_data="all_data"
|
|
19
|
-
:data="tr.children" :th_data="th_data"></gante-tr>
|
|
20
|
+
:data="tr.children" :th_data="th_data" :cell-slots="cellSlots"></gante-tr>
|
|
20
21
|
</div>
|
|
21
22
|
</div>
|
|
22
23
|
</template>
|
|
23
24
|
<script>
|
|
24
25
|
import tdCell from './gante-table-td.vue'
|
|
26
|
+
import {mapState, mapMutations} from 'vuex';
|
|
25
27
|
|
|
26
28
|
export default {
|
|
27
29
|
name: 'gante-tr',
|
|
@@ -29,6 +31,7 @@
|
|
|
29
31
|
all_data: Array,
|
|
30
32
|
data: Array,
|
|
31
33
|
th_data: Object,
|
|
34
|
+
cellSlots: Object,
|
|
32
35
|
// 父级数据
|
|
33
36
|
parent_data: {
|
|
34
37
|
type: Object,
|
|
@@ -42,7 +45,7 @@
|
|
|
42
45
|
opens(data) {
|
|
43
46
|
this.$set(data, 'open', !data.open)
|
|
44
47
|
},
|
|
45
|
-
// 进入到了tr
|
|
48
|
+
// 进入到了tr里
|
|
46
49
|
enterTr(ev, tr) {
|
|
47
50
|
this.$set(tr, 'is_hover', true)
|
|
48
51
|
},
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
15
|
<div class="gante-tbody">
|
|
16
|
-
<gante-tr :all_data="data" :data="data" :th_data="th_data"></gante-tr>
|
|
16
|
+
<gante-tr :all_data="data" :data="data" :th_data="th_data" :cell-slots="cellSlots || $scopedSlots"></gante-tr>
|
|
17
17
|
<!-- <loading :showLoading="showLoading">没有更多了</loading>-->
|
|
18
18
|
</div>
|
|
19
19
|
<div v-show="show_proxy" :style="{left:proxy_left+'px'}" id="gante-table__column-resize-proxy"></div>
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
th_data:Object,
|
|
40
40
|
data:Array,
|
|
41
41
|
showLoading:Boolean,
|
|
42
|
+
cellSlots: Object,
|
|
42
43
|
},
|
|
43
44
|
methods:{
|
|
44
45
|
//排序
|
|
@@ -17,8 +17,15 @@ export default {
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
find_last_attr(num,th_data){
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
const keys = Object.keys(th_data)
|
|
21
|
+
const index = keys.length - num
|
|
22
|
+
if(index < 0){
|
|
23
|
+
return {}
|
|
24
|
+
}
|
|
25
|
+
const attr = th_data[keys[index]] || {}
|
|
26
|
+
// 兼容未设置 is_op 的列
|
|
27
|
+
if(attr.show !== false && attr.is_op !== true){
|
|
28
|
+
return attr
|
|
22
29
|
}else{
|
|
23
30
|
return this.find_last_attr(num+1,th_data)
|
|
24
31
|
}
|
package/gante.vue
CHANGED
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
@sort="sortGunter"
|
|
19
19
|
:th_data="th_data"
|
|
20
20
|
:showLoading="showLoading"
|
|
21
|
-
:data="ganteData"
|
|
21
|
+
:data="ganteData"
|
|
22
|
+
:cell-slots="$scopedSlots">
|
|
22
23
|
|
|
23
24
|
</gante-table>
|
|
24
25
|
</div>
|
|
@@ -55,6 +56,7 @@
|
|
|
55
56
|
export default {
|
|
56
57
|
name: 'gante',
|
|
57
58
|
mixins: [searchLastWidth,ganteOp],
|
|
59
|
+
inheritAttrs: false,
|
|
58
60
|
data() {
|
|
59
61
|
return {
|
|
60
62
|
checkModel: 1,
|
|
@@ -150,6 +152,7 @@
|
|
|
150
152
|
})
|
|
151
153
|
},
|
|
152
154
|
mounted() {
|
|
155
|
+
this.init(this.getInitParams(), true)
|
|
153
156
|
this.$nextTick(function () {
|
|
154
157
|
setTimeout(() => {
|
|
155
158
|
// 获取到左边表格所有td加起来的宽度
|
|
@@ -158,7 +161,18 @@
|
|
|
158
161
|
})
|
|
159
162
|
|
|
160
163
|
},
|
|
164
|
+
watch: {
|
|
165
|
+
$attrs: {
|
|
166
|
+
handler() {
|
|
167
|
+
this.init(this.getInitParams(), true)
|
|
168
|
+
},
|
|
169
|
+
deep: true
|
|
170
|
+
}
|
|
171
|
+
},
|
|
161
172
|
methods: {
|
|
173
|
+
getInitParams(){
|
|
174
|
+
return Object.assign({}, this.$attrs)
|
|
175
|
+
},
|
|
162
176
|
//设置加载提示
|
|
163
177
|
setShowLoading(data) {
|
|
164
178
|
this.showLoading = data
|
package/gunter.js
CHANGED
|
@@ -2,27 +2,30 @@ import Gante from './gante.vue'
|
|
|
2
2
|
export default {
|
|
3
3
|
install(Vue, options = {}) {
|
|
4
4
|
const VueGante = Vue.extend(Gante)
|
|
5
|
+
Vue.component(Gante.name || 'gante', VueGante)
|
|
5
6
|
let gante = null
|
|
6
7
|
|
|
7
|
-
function $gante(params) {
|
|
8
|
+
function $gante(params = {}) {
|
|
8
9
|
return new Promise(resolve => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
const { container = 'body', scopedSlots, ...rest } = params
|
|
11
|
+
|
|
12
|
+
const vm = new Vue({
|
|
13
|
+
parent: this,
|
|
14
|
+
render(h){
|
|
15
|
+
return h(VueGante,{ scopedSlots })
|
|
16
|
+
}
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
vm.$mount();
|
|
20
|
+
gante = vm.$children[0]
|
|
15
21
|
gante.$store = this.$root.$store;
|
|
16
|
-
gante.$mount();
|
|
17
22
|
let ganteLiuBox=document.querySelector('#gante .ganteLiuBox');
|
|
18
|
-
// console.log('ganteLiuBox',ganteLiuBox);
|
|
19
23
|
if(ganteLiuBox){
|
|
20
24
|
document.querySelector(container).replaceChild(gante.$el,ganteLiuBox);
|
|
21
25
|
}else{
|
|
22
26
|
document.querySelector(container).appendChild(gante.$el);
|
|
23
27
|
}
|
|
24
|
-
|
|
25
|
-
gante.init(params);
|
|
28
|
+
gante.init(rest);
|
|
26
29
|
resolve(gante)
|
|
27
30
|
})
|
|
28
31
|
}
|