@leevan/jtui 2.0.3 → 2.0.7-npm
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/examples/App.vue +1 -1
- package/examples/assets/icon/iconfont.css +532 -7
- package/examples/assets/icon/iconfont.eot +0 -0
- package/examples/assets/icon/iconfont.svg +1083 -1230
- package/examples/assets/icon/iconfont.ttf +0 -0
- package/examples/assets/icon/iconfont.woff +0 -0
- package/examples/assets/icon/iconfont.woff2 +0 -0
- package/examples/tableTest/table-ptbg.vue +13 -1
- package/lib/jtui.common.js +447 -146
- package/lib/jtui.css +1 -1
- package/lib/jtui.umd.js +447 -146
- package/lib/jtui.umd.min.js +1 -1
- package/package.json +1 -1
- package/packages/jt-table/comp.js +12 -0
- package/packages/jt-table/components/tableColumn.vue +119 -0
- package/packages/jt-table/components/tabsCheckbox.vue +70 -0
- package/packages/jt-table/index.vue +87 -67
- package/packages/jt-table-pc/JtTablePc.vue +31 -39
- package/packages/jt-table-pc/components/tableColumn.vue +118 -0
- package/packages/jt-table-pc/data2.js +1843 -1787
package/package.json
CHANGED
|
@@ -3,8 +3,10 @@ import VXETable from 'vxe-table';
|
|
|
3
3
|
import XEUtils from 'xe-utils'
|
|
4
4
|
|
|
5
5
|
import TabsBtn from './components/tabsBtn.vue';
|
|
6
|
+
import TabsCheckbox from './components/tabsCheckbox.vue';
|
|
6
7
|
|
|
7
8
|
Vue.component(TabsBtn.name, TabsBtn)
|
|
9
|
+
Vue.component(TabsCheckbox.name,TabsCheckbox)
|
|
8
10
|
|
|
9
11
|
VXETable.renderer.add('TabsBtn',{
|
|
10
12
|
renderDefault (h, renderOpts, params) {
|
|
@@ -14,4 +16,14 @@ VXETable.renderer.add('TabsBtn',{
|
|
|
14
16
|
></tabs-btn>
|
|
15
17
|
]
|
|
16
18
|
}
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
VXETable.renderer.add('TabsCheckbox',{
|
|
22
|
+
renderDefault (h, renderOpts, params) {
|
|
23
|
+
const { events , parentRow } = renderOpts;
|
|
24
|
+
return [
|
|
25
|
+
<tabs-checkbox params={ params } events={ events } parentRow={ parentRow }
|
|
26
|
+
></tabs-checkbox>
|
|
27
|
+
]
|
|
28
|
+
}
|
|
17
29
|
})
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<!-- 后台数据列 -->
|
|
2
|
+
<template>
|
|
3
|
+
<!-- <template v-for="(item,index) in data.retjson.header"> -->
|
|
4
|
+
<vxe-colgroup
|
|
5
|
+
v-if="item.children && item.children.length"
|
|
6
|
+
:title="item.label"
|
|
7
|
+
:key="index"
|
|
8
|
+
>
|
|
9
|
+
<template v-for="(subItem, subIndex) in item.children">
|
|
10
|
+
<vxe-colgroup
|
|
11
|
+
v-if="subItem.children && subItem.children.length"
|
|
12
|
+
:title="subItem.label"
|
|
13
|
+
:key="subIndex"
|
|
14
|
+
>
|
|
15
|
+
<vxe-table-column
|
|
16
|
+
v-for="(subSubItem, subSubIndex) in subItem.children"
|
|
17
|
+
:edit-render="subSubItem.edit"
|
|
18
|
+
:key="subSubIndex"
|
|
19
|
+
show-overflow
|
|
20
|
+
:field="subSubItem.prop"
|
|
21
|
+
:align="subSubItem.align"
|
|
22
|
+
:title="subSubItem.label"
|
|
23
|
+
:type="subSubItem.html ? 'html' : ''"
|
|
24
|
+
:min-width="subSubItem.width"
|
|
25
|
+
:sortable="subSubItem.isSort"
|
|
26
|
+
:visible="subSubItem.width != 0"
|
|
27
|
+
:fixed="subSubItem.isFixed"
|
|
28
|
+
:filters="filterData(subSubItem.filterRender)"
|
|
29
|
+
:filter-render="{ name: subSubItem.filterRender }"
|
|
30
|
+
:formatter="formatEnum"
|
|
31
|
+
:cell-render="cellRenderData(subSubItem.cellRender)"
|
|
32
|
+
>
|
|
33
|
+
</vxe-table-column>
|
|
34
|
+
</vxe-colgroup>
|
|
35
|
+
<vxe-table-column
|
|
36
|
+
v-else
|
|
37
|
+
:edit-render="subItem.edit"
|
|
38
|
+
:key="subIndex"
|
|
39
|
+
show-overflow
|
|
40
|
+
:field="subItem.prop"
|
|
41
|
+
:align="subItem.align"
|
|
42
|
+
:title="subItem.label"
|
|
43
|
+
:type="subItem.html ? 'html' : ''"
|
|
44
|
+
:min-width="subItem.width"
|
|
45
|
+
:sortable="subItem.isSort"
|
|
46
|
+
:visible="subItem.width != 0"
|
|
47
|
+
:fixed="subItem.isFixed"
|
|
48
|
+
:filters="filterData(subItem.filterRender)"
|
|
49
|
+
:filter-render="{ name: subItem.filterRender }"
|
|
50
|
+
:formatter="formatEnum"
|
|
51
|
+
:cell-render="cellRenderData(subItem.cellRender)"
|
|
52
|
+
>
|
|
53
|
+
</vxe-table-column>
|
|
54
|
+
</template>
|
|
55
|
+
</vxe-colgroup>
|
|
56
|
+
<vxe-table-column
|
|
57
|
+
v-else
|
|
58
|
+
:edit-render="item.edit"
|
|
59
|
+
:key="index"
|
|
60
|
+
show-overflow
|
|
61
|
+
:field="item.prop"
|
|
62
|
+
:align="item.align"
|
|
63
|
+
:title="item.label"
|
|
64
|
+
:type="item.html ? 'html' : ''"
|
|
65
|
+
:min-width="item.width"
|
|
66
|
+
:sortable="item.isSort"
|
|
67
|
+
:visible="item.width != 0"
|
|
68
|
+
:fixed="item.isFixed"
|
|
69
|
+
:filters="filterData(item.filterRender)"
|
|
70
|
+
:filter-render="{ name: item.filterRender }"
|
|
71
|
+
:formatter="formatEnum"
|
|
72
|
+
:cell-render="cellRenderData(item.cellRender)"
|
|
73
|
+
>
|
|
74
|
+
</vxe-table-column>
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
<script>
|
|
79
|
+
export default {
|
|
80
|
+
name: "tableColumn",
|
|
81
|
+
|
|
82
|
+
data() {
|
|
83
|
+
return {
|
|
84
|
+
|
|
85
|
+
};
|
|
86
|
+
},
|
|
87
|
+
props: {
|
|
88
|
+
item: Object,
|
|
89
|
+
filterData: {
|
|
90
|
+
type: Function,
|
|
91
|
+
default: () => {
|
|
92
|
+
return {};
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
cellRenderData: {
|
|
96
|
+
type: Function,
|
|
97
|
+
default: () => {
|
|
98
|
+
return {};
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
formatEnum: {
|
|
102
|
+
type: Function,
|
|
103
|
+
default: () => {
|
|
104
|
+
return {};
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
index: {
|
|
108
|
+
type: Number,
|
|
109
|
+
default: 0
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
|
|
113
|
+
methods: {
|
|
114
|
+
},
|
|
115
|
+
};
|
|
116
|
+
</script>
|
|
117
|
+
|
|
118
|
+
<style lang="scss" scoped>
|
|
119
|
+
</style>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<el-checkbox-group v-model="radio_value" size="mini" @change="btnsClick"
|
|
4
|
+
v-if="dataType !== 'string'">
|
|
5
|
+
<el-checkbox-button
|
|
6
|
+
v-for="(item, index) in fullData"
|
|
7
|
+
:key="index"
|
|
8
|
+
:label="item.value"
|
|
9
|
+
>{{ item.label }}</el-checkbox-button
|
|
10
|
+
>
|
|
11
|
+
</el-checkbox-group>
|
|
12
|
+
<div v-else>
|
|
13
|
+
{{rowData}}
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
name: "TabsCheckbox",
|
|
21
|
+
data() {
|
|
22
|
+
return {
|
|
23
|
+
radio_value: [],
|
|
24
|
+
fullData: [],
|
|
25
|
+
oldValue: "",
|
|
26
|
+
dataType: '',
|
|
27
|
+
rowData: ''
|
|
28
|
+
};
|
|
29
|
+
},
|
|
30
|
+
props: {
|
|
31
|
+
params: Object,
|
|
32
|
+
},
|
|
33
|
+
created() {
|
|
34
|
+
this.load();
|
|
35
|
+
},
|
|
36
|
+
methods: {
|
|
37
|
+
load() {
|
|
38
|
+
const { row, column } = this.params;
|
|
39
|
+
if (row) {
|
|
40
|
+
this.rowData = row[column.property];
|
|
41
|
+
this.dataType = typeof this.rowData;
|
|
42
|
+
}
|
|
43
|
+
if (this.rowData && this.rowData.enum) {
|
|
44
|
+
this.fullData = this.rowData.enum;
|
|
45
|
+
this.radio_value = this.rowData.selected;
|
|
46
|
+
this.oldValue = this.rowData.selected;
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
async btnsClick(val) {
|
|
50
|
+
const { row, column } = this.params;
|
|
51
|
+
const { events, parentRow } = this.$attrs;
|
|
52
|
+
const result = await events.checkboxChange({
|
|
53
|
+
row,
|
|
54
|
+
property: column.property,
|
|
55
|
+
val,
|
|
56
|
+
params: parentRow,
|
|
57
|
+
});
|
|
58
|
+
if (result) {
|
|
59
|
+
this.oldValue = val;
|
|
60
|
+
} else {
|
|
61
|
+
this.radio_value = this.oldValue;
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<style lang="scss" scoped>
|
|
69
|
+
|
|
70
|
+
</style>
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
:loading="loading"
|
|
37
37
|
:row-style="rowStyle"
|
|
38
38
|
:cell-style="cellStyle_m"
|
|
39
|
+
:header-cell-class-name="headerClass"
|
|
39
40
|
:span-method="spanMethod"
|
|
40
41
|
:scroll-y="{ mode: 'wheel' }"
|
|
41
42
|
:sort-config="{ sortMethod: sortMethod }"
|
|
@@ -94,25 +95,16 @@
|
|
|
94
95
|
></vxe-table-column>
|
|
95
96
|
<!-- 后台数据列 -->
|
|
96
97
|
<template v-for="(item, index) in data.retjson.header">
|
|
97
|
-
<
|
|
98
|
-
:
|
|
99
|
-
:key="index"
|
|
100
|
-
|
|
101
|
-
:
|
|
102
|
-
:
|
|
103
|
-
:
|
|
104
|
-
|
|
105
|
-
:min-width="item.width"
|
|
106
|
-
:sortable="item.isSort"
|
|
107
|
-
:visible="item.width != 0"
|
|
108
|
-
:fixed="item.isFixed"
|
|
109
|
-
:filters="filterData(item.filterRender)"
|
|
110
|
-
:filter-render="{ name: item.filterRender }"
|
|
111
|
-
:formatter="formatEnum"
|
|
112
|
-
:cell-render="cellRenderData(item.cellRender)"
|
|
113
|
-
>
|
|
114
|
-
</vxe-table-column>
|
|
98
|
+
<table-column
|
|
99
|
+
:item="item"
|
|
100
|
+
:key="index"
|
|
101
|
+
:index="index"
|
|
102
|
+
:cellRenderData="cellRenderData"
|
|
103
|
+
:filterData="filterData"
|
|
104
|
+
:formatEnum="formatEnum"
|
|
105
|
+
></table-column>
|
|
115
106
|
</template>
|
|
107
|
+
|
|
116
108
|
<!-- 展开行 -->
|
|
117
109
|
<vxe-table-column
|
|
118
110
|
v-if="expandConfig.isOpen"
|
|
@@ -165,16 +157,17 @@
|
|
|
165
157
|
:key="index"
|
|
166
158
|
size="mini"
|
|
167
159
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
160
|
+
:style="btnHover(item.bgColor)"
|
|
168
161
|
>
|
|
169
162
|
<i
|
|
170
163
|
class="jtIcon ht-icon"
|
|
171
164
|
:style="{
|
|
172
|
-
color: item.color ? item.color : '#
|
|
165
|
+
color: item.color ? item.color : '#379FF2',
|
|
173
166
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
174
167
|
}"
|
|
175
|
-
:class="item.icon ? item.icon : '
|
|
168
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
176
169
|
></i>
|
|
177
|
-
<span class="ht-text" style="color: #
|
|
170
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
178
171
|
</el-button>
|
|
179
172
|
<el-button
|
|
180
173
|
type="text"
|
|
@@ -182,16 +175,17 @@
|
|
|
182
175
|
:key="index"
|
|
183
176
|
size="mini"
|
|
184
177
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
178
|
+
:style="btnHover(item.bgColor)"
|
|
185
179
|
>
|
|
186
180
|
<i
|
|
187
181
|
class="jtIcon ht-icon"
|
|
188
182
|
:style="{
|
|
189
|
-
color: item.color ? item.color : '#
|
|
183
|
+
color: item.color ? item.color : '#379FF2',
|
|
190
184
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
191
185
|
}"
|
|
192
|
-
:class="item.icon ? item.icon : '
|
|
186
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
193
187
|
></i>
|
|
194
|
-
<span class="ht-text" style="color: #
|
|
188
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
195
189
|
</el-button>
|
|
196
190
|
</template>
|
|
197
191
|
</template>
|
|
@@ -210,6 +204,7 @@
|
|
|
210
204
|
highlight-current-column
|
|
211
205
|
keep-source
|
|
212
206
|
v-if="tableType === 'bigData'"
|
|
207
|
+
:header-cell-class-name="headerClass"
|
|
213
208
|
:id="id"
|
|
214
209
|
:ref="id"
|
|
215
210
|
:data="data.DataArray"
|
|
@@ -271,24 +266,12 @@
|
|
|
271
266
|
></vxe-table-column>
|
|
272
267
|
<!-- 后台数据列 -->
|
|
273
268
|
<template v-for="(item, index) in data.retjson.header">
|
|
274
|
-
<
|
|
275
|
-
:
|
|
276
|
-
:key="index"
|
|
277
|
-
|
|
278
|
-
:
|
|
279
|
-
|
|
280
|
-
:title="item.label"
|
|
281
|
-
:type="item.html ? 'html' : ''"
|
|
282
|
-
:min-width="item.width"
|
|
283
|
-
:sortable="item.isSort"
|
|
284
|
-
:visible="item.width != 0"
|
|
285
|
-
:fixed="item.isFixed"
|
|
286
|
-
:filters="filterData(item.filterRender)"
|
|
287
|
-
:filter-render="{ name: item.filterRender }"
|
|
288
|
-
:formatter="formatEnum"
|
|
289
|
-
:cell-render="cellRenderData(item.cellRender)"
|
|
290
|
-
>
|
|
291
|
-
</vxe-table-column>
|
|
269
|
+
<table-column
|
|
270
|
+
:item="item"
|
|
271
|
+
:key="index"
|
|
272
|
+
:cellRenderData="cellRenderData"
|
|
273
|
+
:filterData="filterData"
|
|
274
|
+
></table-column>
|
|
292
275
|
</template>
|
|
293
276
|
<!-- 展开行 -->
|
|
294
277
|
<vxe-table-column
|
|
@@ -342,16 +325,17 @@
|
|
|
342
325
|
:key="index"
|
|
343
326
|
size="mini"
|
|
344
327
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
328
|
+
:style="btnHover(item.bgColor)"
|
|
345
329
|
>
|
|
346
330
|
<i
|
|
347
331
|
class="jtIcon ht-icon"
|
|
348
332
|
:style="{
|
|
349
|
-
color: item.color ? item.color : '#
|
|
333
|
+
color: item.color ? item.color : '#379FF2',
|
|
350
334
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
351
335
|
}"
|
|
352
|
-
:class="item.icon ? item.icon : '
|
|
336
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
353
337
|
></i>
|
|
354
|
-
<span class="ht-text" style="color: #
|
|
338
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
355
339
|
</el-button>
|
|
356
340
|
<el-button
|
|
357
341
|
type="text"
|
|
@@ -359,16 +343,17 @@
|
|
|
359
343
|
:key="index"
|
|
360
344
|
size="mini"
|
|
361
345
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
346
|
+
:style="btnHover(item.bgColor)"
|
|
362
347
|
>
|
|
363
348
|
<i
|
|
364
349
|
class="jtIcon ht-icon"
|
|
365
350
|
:style="{
|
|
366
|
-
color: item.color ? item.color : '#
|
|
351
|
+
color: item.color ? item.color : '#379FF2',
|
|
367
352
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
368
353
|
}"
|
|
369
|
-
:class="item.icon ? item.icon : '
|
|
354
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
370
355
|
></i>
|
|
371
|
-
<span class="ht-text" style="color: #
|
|
356
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
372
357
|
</el-button>
|
|
373
358
|
</template>
|
|
374
359
|
</template>
|
|
@@ -477,16 +462,17 @@
|
|
|
477
462
|
:key="'s' + index"
|
|
478
463
|
size="mini"
|
|
479
464
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
465
|
+
:style="btnHover(item.bgColor)"
|
|
480
466
|
>
|
|
481
467
|
<i
|
|
482
468
|
class="jtIcon ht-icon"
|
|
483
469
|
:style="{
|
|
484
|
-
color: item.color ? item.color : '#
|
|
470
|
+
color: item.color ? item.color : '#379FF2',
|
|
485
471
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
486
472
|
}"
|
|
487
|
-
:class="item.icon ? item.icon : '
|
|
473
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
488
474
|
></i>
|
|
489
|
-
<span class="ht-text" style="color: #
|
|
475
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
490
476
|
</el-button>
|
|
491
477
|
</template>
|
|
492
478
|
<template v-for="(item, index) in row.inBottons">
|
|
@@ -496,16 +482,17 @@
|
|
|
496
482
|
:key="index"
|
|
497
483
|
size="mini"
|
|
498
484
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
485
|
+
:style="btnHover(item.bgColor)"
|
|
499
486
|
>
|
|
500
487
|
<i
|
|
501
488
|
class="jtIcon ht-icon"
|
|
502
489
|
:style="{
|
|
503
|
-
color: item.color ? item.color : '#
|
|
490
|
+
color: item.color ? item.color : '#379FF2',
|
|
504
491
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
505
492
|
}"
|
|
506
|
-
:class="item.icon ? item.icon : '
|
|
493
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
507
494
|
></i>
|
|
508
|
-
<span class="ht-text" style="color: #
|
|
495
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
509
496
|
</el-button>
|
|
510
497
|
</template>
|
|
511
498
|
</template>
|
|
@@ -723,16 +710,17 @@
|
|
|
723
710
|
:key="'s' + index"
|
|
724
711
|
size="mini"
|
|
725
712
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
713
|
+
:style="btnHover(item.bgColor)"
|
|
726
714
|
>
|
|
727
715
|
<i
|
|
728
716
|
class="jtIcon ht-icon"
|
|
729
717
|
:style="{
|
|
730
|
-
color: item.color ? item.color : '#
|
|
718
|
+
color: item.color ? item.color : '#379FF2',
|
|
731
719
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
732
720
|
}"
|
|
733
|
-
:class="item.icon ? item.icon : '
|
|
721
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
734
722
|
></i>
|
|
735
|
-
<span class="ht-text" style="color: #
|
|
723
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
736
724
|
</el-button>
|
|
737
725
|
</template>
|
|
738
726
|
<template v-for="(item, index) in row.inBottons">
|
|
@@ -742,16 +730,17 @@
|
|
|
742
730
|
:key="index"
|
|
743
731
|
size="mini"
|
|
744
732
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
733
|
+
:style="btnHover(item.bgColor)"
|
|
745
734
|
>
|
|
746
735
|
<i
|
|
747
736
|
class="jtIcon ht-icon"
|
|
748
737
|
:style="{
|
|
749
|
-
color: item.color ? item.color : '#
|
|
738
|
+
color: item.color ? item.color : '#379FF2',
|
|
750
739
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
751
740
|
}"
|
|
752
|
-
:class="item.icon ? item.icon : '
|
|
741
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
753
742
|
></i>
|
|
754
|
-
<span class="ht-text" style="color: #
|
|
743
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
755
744
|
</el-button>
|
|
756
745
|
</template>
|
|
757
746
|
</template>
|
|
@@ -763,8 +752,12 @@
|
|
|
763
752
|
|
|
764
753
|
<script>
|
|
765
754
|
import XEUtils from "xe-utils";
|
|
755
|
+
import tableColumn from './components/tableColumn.vue'
|
|
766
756
|
export default {
|
|
767
757
|
name: "jt-table-pc",
|
|
758
|
+
components: {
|
|
759
|
+
tableColumn,
|
|
760
|
+
},
|
|
768
761
|
created() {
|
|
769
762
|
if (this.isPage) {
|
|
770
763
|
this.tDataCopy = JSON.parse(JSON.stringify(this.data.DataArray));
|
|
@@ -936,6 +929,7 @@ export default {
|
|
|
936
929
|
default: () => ({
|
|
937
930
|
parentRow: Object,
|
|
938
931
|
radioChange: () => {},
|
|
932
|
+
checkBoxChange: () => {}
|
|
939
933
|
}),
|
|
940
934
|
},
|
|
941
935
|
//展开行配置
|
|
@@ -958,6 +952,7 @@ export default {
|
|
|
958
952
|
data() {
|
|
959
953
|
return {
|
|
960
954
|
tableData: this.data.DataArray, //表格数据
|
|
955
|
+
headerClass: (this.data.retjson.header || []).find(i => (i.children || []).length) ? 'has-sub-header' : 'normal-header',
|
|
961
956
|
colNum: 0, //当前列的数量
|
|
962
957
|
leftCol: 0, //从左起计算合并列的基数
|
|
963
958
|
//分组表格的配置
|
|
@@ -989,10 +984,16 @@ export default {
|
|
|
989
984
|
pageTotal: 0,
|
|
990
985
|
dataTotal: 0,
|
|
991
986
|
dataTreeObj: {},
|
|
992
|
-
treeTempData: []
|
|
987
|
+
treeTempData: []
|
|
993
988
|
};
|
|
994
989
|
},
|
|
995
990
|
methods: {
|
|
991
|
+
btnHover(color){
|
|
992
|
+
return {
|
|
993
|
+
backgroundColor:color ? color : '',
|
|
994
|
+
"--background-color-hover":color ? color + 'B3' : '#EAF5FE' + 'B3'
|
|
995
|
+
}
|
|
996
|
+
},
|
|
996
997
|
//指定位置插入数据
|
|
997
998
|
insertAt(records, row) {
|
|
998
999
|
this.$refs[this.id].insertAt(records, row);
|
|
@@ -1036,6 +1037,12 @@ export default {
|
|
|
1036
1037
|
events: { radioChange: this.cellRenderMethods.radioChange },
|
|
1037
1038
|
parentRow: this.cellRenderMethods?.parentRow,
|
|
1038
1039
|
};
|
|
1040
|
+
case "TabsCheckbox":
|
|
1041
|
+
return {
|
|
1042
|
+
name:'TabsCheckbox',
|
|
1043
|
+
events:{checkboxChange:this.cellRenderMethods.checkboxChange},
|
|
1044
|
+
parentRow: this.cellRenderMethods?.parentRow,
|
|
1045
|
+
}
|
|
1039
1046
|
}
|
|
1040
1047
|
},
|
|
1041
1048
|
//枚举转换
|
|
@@ -1274,7 +1281,14 @@ export default {
|
|
|
1274
1281
|
},
|
|
1275
1282
|
//操作列点击事件派发
|
|
1276
1283
|
handlerColClick(value, row, rowIndex) {
|
|
1277
|
-
|
|
1284
|
+
//检索
|
|
1285
|
+
if(value === 'stcd_search'){
|
|
1286
|
+
this.$set(row, "activeValue", value);
|
|
1287
|
+
}
|
|
1288
|
+
//刷新
|
|
1289
|
+
if(value === 'reflash'){
|
|
1290
|
+
this.reloadTreeChilds(row);
|
|
1291
|
+
};
|
|
1278
1292
|
this.$emit("handlerClick", value, row, rowIndex);
|
|
1279
1293
|
},
|
|
1280
1294
|
//普通表格转树表（仅支持一层）
|
|
@@ -1381,7 +1395,6 @@ export default {
|
|
|
1381
1395
|
this.dataTreeObj[idx + 1]
|
|
1382
1396
|
);
|
|
1383
1397
|
},
|
|
1384
|
-
//树 懒加载方法
|
|
1385
1398
|
// async loadChildrenMethod({ row }){
|
|
1386
1399
|
// const { data } = await this.$axios.post(this.treeTypeConfig.path + row.path);
|
|
1387
1400
|
// return new Promise((resolve) => {
|
|
@@ -1400,9 +1413,10 @@ export default {
|
|
|
1400
1413
|
// }
|
|
1401
1414
|
// })
|
|
1402
1415
|
// },
|
|
1416
|
+
//树 懒加载方法
|
|
1403
1417
|
loadChildrenMethod({ row }) {
|
|
1404
1418
|
return new Promise(async (resolve) => {
|
|
1405
|
-
if (row.activeValue
|
|
1419
|
+
if (row && row.activeValue && row.activeValue.indexOf("search") !== -1 ) {
|
|
1406
1420
|
resolve(this.treeTempData);
|
|
1407
1421
|
} else {
|
|
1408
1422
|
const { data } = await this.$axios.post(
|
|
@@ -1604,9 +1618,12 @@ export default {
|
|
|
1604
1618
|
right: 2px;
|
|
1605
1619
|
top: 1px;
|
|
1606
1620
|
}
|
|
1607
|
-
.jt-table-class-only .el-button
|
|
1608
|
-
|
|
1609
|
-
|
|
1621
|
+
.jt-table-class-only .el-button{
|
|
1622
|
+
background:#EAF5FE;
|
|
1623
|
+
padding:4px 10px;
|
|
1624
|
+
}
|
|
1625
|
+
.jt-table-class-only .el-button:hover{
|
|
1626
|
+
background-color:var(--background-color-hover) !important;
|
|
1610
1627
|
}
|
|
1611
1628
|
.jt-table-class-only .vxe-cell--tree-node {
|
|
1612
1629
|
cursor: pointer;
|
|
@@ -1642,4 +1659,7 @@ export default {
|
|
|
1642
1659
|
.isWrap .vxe-header--row .vxe-cell {
|
|
1643
1660
|
flex-wrap: wrap;
|
|
1644
1661
|
}
|
|
1662
|
+
.has-sub-header {
|
|
1663
|
+
background: #fff;
|
|
1664
|
+
}
|
|
1645
1665
|
</style>
|