@leevan/jtui 2.0.2 → 2.0.6

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.
Files changed (21) hide show
  1. package/examples/assets/icon/iconfont.css +532 -7
  2. package/examples/assets/icon/iconfont.eot +0 -0
  3. package/examples/assets/icon/iconfont.svg +1083 -1230
  4. package/examples/assets/icon/iconfont.ttf +0 -0
  5. package/examples/assets/icon/iconfont.woff +0 -0
  6. package/examples/assets/icon/iconfont.woff2 +0 -0
  7. package/examples/data2.js +6 -0
  8. package/examples/tableTest/table-ptbg.vue +13 -1
  9. package/examples/tableTest/table-tree.vue +6 -0
  10. package/examples/tableTest/tree-table.vue +13 -5
  11. package/lib/jtui.common.js +597 -174
  12. package/lib/jtui.css +1 -1
  13. package/lib/jtui.umd.js +597 -174
  14. package/lib/jtui.umd.min.js +1 -1
  15. package/package.json +4 -4
  16. package/packages/jt-table/comp.js +12 -0
  17. package/packages/jt-table/components/tabsBtn.vue +59 -44
  18. package/packages/jt-table/components/tabsCheckbox.vue +70 -0
  19. package/packages/jt-table/index.vue +1609 -1374
  20. package/packages/jt-table-pc/components/tabsBtn.vue +59 -44
  21. package/packages/jt-table-pc/data2.js +11 -5
package/packages/jt-table/index.vue CHANGED
@@ -1,1441 +1,1676 @@
1
1
  <template>
2
- <div class="tableStyle-2"
2
+ <div
3
+ class="tableStyle-2"
3
4
  :class="isWrap ? 'isWrap' : ''"
4
- style="position:absolute;top:1px;left:1px;right:1px;bottom:1px;">
5
- <!-- 普通表格 -->
6
- <div style="position:relative" v-if="isTool">
7
- <vxe-toolbar class="jt-toolbar" :custom="{icon:'jtIcon iconpeizhi41 colStyle'}"></vxe-toolbar>
8
- </div>
9
- <vxe-table
10
- class="jt-table-class-only"
11
- height="auto"
12
- size="mini"
5
+ style="position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px"
6
+ >
7
+ <!-- 普通表格 -->
8
+ <div style="position: relative" v-if="isTool">
9
+ <vxe-toolbar
10
+ class="jt-toolbar"
11
+ :custom="{ icon: 'jtIcon iconpeizhi41 colStyle' }"
12
+ ></vxe-toolbar>
13
+ </div>
14
+ <vxe-table
15
+ class="jt-table-class-only"
16
+ height="auto"
17
+ size="mini"
18
+ show-overflow
19
+ show-header-overflow
20
+ auto-resize
21
+ resizable
22
+ highlight-current-row
23
+ highlight-current-column
24
+ keep-source
25
+ v-if="tableType === 'default'"
26
+ :id="id"
27
+ :ref="id"
28
+ :data="data.DataArray"
29
+ :stripe="stripe"
30
+ :border="border"
31
+ :max-height="maxHeight"
32
+ :show-footer="isFooter"
33
+ :footer-method="footerMethod"
34
+ :footer-span-method="footerColspanMethod"
35
+ :footer-cell-class-name="footerCellClassName"
36
+ :loading="loading"
37
+ :row-style="rowStyle"
38
+ :cell-style="cellStyle_m"
39
+ :span-method="spanMethod"
40
+ :scroll-y="{ mode: 'wheel' }"
41
+ :sort-config="{ sortMethod: sortMethod }"
42
+ :radio-config="{ checkRowKey: null }"
43
+ :keyboard-config="{ isArrow: true }"
44
+ :checkbox-config="{ highlight: true }"
45
+ :export-config="{
46
+ type: 'xlsx',
47
+ types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
48
+ }"
49
+ :custom-config="{ storage: true, checkMethod: checkColumnMethod }"
50
+ :edit-config="{
51
+ trigger: 'dblclick',
52
+ mode: 'cell',
53
+ showStatus: true,
54
+ activeMethod: activeCellMethod,
55
+ }"
56
+ :expand-config="{
57
+ visibleMethod,
58
+ loadMethod: expandConfig.loadMethod,
59
+ toggleMethod,
60
+ lazy: true,
61
+ accordion: expandConfig.accordion,
62
+ }"
63
+ @scroll="scroll"
64
+ @checkbox-change="selectChangeEvent"
65
+ @checkbox-all="selectChangeEvent"
66
+ @radio-change="radioSelectChangeEvent"
67
+ @cell-click="cellClickEvent"
68
+ @keydown="keyEnter"
69
+ >
70
+ <!-- 复选框列 -->
71
+ <vxe-table-column
72
+ v-if="checkbox"
73
+ type="checkbox"
74
+ width="38"
75
+ align="center"
76
+ fixed="left"
77
+ ></vxe-table-column>
78
+ <!-- 单选框列 -->
79
+ <vxe-table-column
80
+ v-if="radio"
81
+ type="radio"
82
+ width="38"
83
+ align="center"
84
+ fixed="left"
85
+ ></vxe-table-column>
86
+ <!-- 序号列 -->
87
+ <vxe-table-column
88
+ v-if="isSeq && data"
89
+ type="seq"
90
+ align="center"
91
+ :width="req + 'px'"
92
+ title="序号"
93
+ fixed="left"
94
+ ></vxe-table-column>
95
+ <!-- 后台数据列 -->
96
+ <template v-for="(item, index) in data.retjson.header">
97
+ <vxe-table-column
98
+ :edit-render="item.edit"
99
+ :key="index"
13
100
  show-overflow
14
- show-header-overflow
15
- auto-resize
16
- resizable
17
- highlight-current-row
18
- highlight-current-column
19
- keep-source
20
- v-if="tableType === 'default'"
21
- :id="id"
22
- :ref="id"
23
- :data="data.DataArray"
24
- :stripe="stripe"
25
- :border="border"
26
- :max-height="maxHeight"
27
- :show-footer="isFooter"
28
- :footer-method="footerMethod"
29
- :footer-span-method="footerColspanMethod"
30
- :footer-cell-class-name="footerCellClassName"
31
- :loading="loading"
32
- :row-style="rowStyle"
33
- :cell-style="cellStyle_m"
34
- :span-method="spanMethod"
35
- :scroll-y="{mode: 'wheel'}"
36
- :sort-config="{sortMethod:sortMethod}"
37
- :radio-config="{checkRowKey: null}"
38
- :keyboard-config="{isArrow: true}"
39
- :checkbox-config="{highlight:true}"
40
- :export-config="{type: 'xlsx',types:['xlsx', 'csv', 'html', 'xml', 'txt']}"
41
- :custom-config="{storage: true,checkMethod: checkColumnMethod}"
42
- :edit-config="{trigger: 'dblclick', mode: 'cell', showStatus: true,activeMethod: activeCellMethod}"
43
- :expand-config="{visibleMethod,loadMethod:expandConfig.loadMethod,toggleMethod,lazy:true,accordion: expandConfig.accordion}"
44
- @scroll="scroll"
45
- @checkbox-change="selectChangeEvent"
46
- @checkbox-all="selectChangeEvent"
47
- @radio-change="radioSelectChangeEvent"
48
- @cell-click="cellClickEvent"
49
- @keydown="keyEnter"
50
- >
51
- <!-- 复选框列 -->
52
- <vxe-table-column v-if="checkbox"
53
- type="checkbox"
54
- width="38"
55
- align="center"
56
- fixed="left"
57
- ></vxe-table-column>
58
- <!-- 单选框列 -->
59
- <vxe-table-column
60
- v-if="radio"
61
- type="radio"
62
- width="38"
63
- align="center"
64
- fixed="left"
65
- ></vxe-table-column>
66
- <!-- 序号列 -->
67
- <vxe-table-column
68
- v-if="isSeq && data"
69
- type="seq"
70
- align="center"
71
- :width="req+'px'"
72
- title="序号"
73
- fixed="left"
74
- ></vxe-table-column>
75
- <!-- 后台数据列 -->
76
- <template v-for="(item,index) in data.retjson.header">
77
- <vxe-table-column
78
- :edit-render="item.edit"
101
+ :field="item.prop"
102
+ :align="item.align"
103
+ :title="item.label"
104
+ :type="item.html ? 'html' : ''"
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>
115
+ </template>
116
+ <!-- 展开行 -->
117
+ <vxe-table-column
118
+ v-if="expandConfig.isOpen"
119
+ type="expand"
120
+ fixed="right"
121
+ :width="expandConfig.width"
122
+ >
123
+ <template #default="{ row }">
124
+ <span style="position: relative; top: 2px; right: 6px; color: #333">
125
+ {{ isExpandText(row) ? expandConfig.text : "" }}</span
126
+ >
127
+ </template>
128
+ <template #content="{ row }">
129
+ <slot name="expandContent" :slot-scope="row"></slot>
130
+ </template>
131
+ </vxe-table-column>
132
+ <!-- 操作列 -->
133
+ <vxe-table-column
134
+ title="操作"
135
+ :visible="handlerConfig.show"
136
+ :align="handlerConfig.align"
137
+ :width="handlerConfig.width"
138
+ :fixed="handlerConfig.fixed"
139
+ show-overflow
140
+ >
141
+ <template v-slot="{ row, rowIndex }">
142
+ <el-dropdown v-if="handlerConfig.btnGroup">
143
+ <el-button size="mini" type="primary">
144
+ 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
145
+ </el-button>
146
+ <el-dropdown-menu slot="dropdown">
147
+ <el-dropdown-item
148
+ @click.native="handlerColClick(item.funcode, row, rowIndex)"
149
+ v-for="(item, index) in data.retjson.inBottons"
150
+ :key="'s' + index"
151
+ >{{ item.name }}</el-dropdown-item
152
+ >
153
+ <el-dropdown-item
154
+ v-for="(item, index) in row.inBottons"
79
155
  :key="index"
80
- show-overflow
81
- :field="item.prop"
82
- :align="item.align"
83
- :title="item.label"
84
- :type="item.html ? 'html': ''"
85
- :min-width="item.width"
86
- :sortable="item.isSort"
87
- :visible="item.width!=0"
88
- :fixed="item.isFixed"
89
- :filters="filterData(item.filterRender)"
90
- :filter-render="{name: item.filterRender}"
91
- :formatter="formatEnum"
92
- :cell-render="cellRenderData(item.cellRender)"
93
- >
94
- </vxe-table-column>
95
- </template>
96
- <!-- 展开行 -->
97
- <vxe-table-column
98
- v-if="expandConfig.isOpen"
99
- type="expand"
100
- fixed="right"
101
- :width="expandConfig.width"
156
+ @click.native="handlerColClick(item.funcode, row, rowIndex)"
157
+ >{{ item.name }}</el-dropdown-item
158
+ >
159
+ </el-dropdown-menu>
160
+ </el-dropdown>
161
+ <template v-if="!handlerConfig.btnGroup">
162
+ <el-button
163
+ type="text"
164
+ v-for="(item, index) in data.retjson.inBottons"
165
+ :key="index"
166
+ size="mini"
167
+ @click="handlerColClick(item.funcode, row, rowIndex)"
168
+ :style="btnHover(item.bgColor)"
102
169
  >
103
- <template #default="{row}">
104
- <span style="position:relative;top:2px;right:6px;color:#333">
105
- {{isExpandText(row) ? expandConfig.text : ''}}</span>
106
- </template>
107
- <template #content="{ row }">
108
- <slot name="expandContent" :slot-scope="row"></slot>
109
- </template>
110
- </vxe-table-column>
111
- <!-- 操作列 -->
112
- <vxe-table-column title="操作"
113
- :visible="handlerConfig.show"
114
- :align="handlerConfig.align"
115
- :width="handlerConfig.width"
116
- :fixed="handlerConfig.fixed"
117
- show-overflow>
118
- <template v-slot="{ row , rowIndex }">
119
- <el-dropdown v-if="handlerConfig.btnGroup">
120
- <el-button size="mini" type="primary">
121
- 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
122
- </el-button>
123
- <el-dropdown-menu slot="dropdown">
124
- <el-dropdown-item
125
- @click.native="handlerColClick(item.funcode,row,rowIndex)"
126
- v-for="(item,index) in data.retjson.inBottons"
127
- :key="'s' + index"
128
- >{{item.name}}</el-dropdown-item>
129
- <el-dropdown-item
130
- v-for="(item,index) in row.inBottons"
131
- :key="index"
132
- @click.native="handlerColClick(item.funcode,row,rowIndex)"
133
- >{{item.name}}</el-dropdown-item>
134
- </el-dropdown-menu>
135
- </el-dropdown>
136
- <template v-if="!handlerConfig.btnGroup">
137
- <el-button
138
- type="text"
139
- v-for="(item,index) in data.retjson.inBottons"
140
- :key="index"
141
- size="mini"
142
- @click="handlerColClick(item.funcode,row,rowIndex)"
143
- >
144
- <i class="jtIcon ht-icon"
145
- :style="{color:item.color ? item.color : '#666',
146
- fontSize:item.size ? item.size + 'px' : '16px'}"
147
- :class="item.icon?item.icon:'iconcaidan'"></i>
148
- <span class="ht-text" style="color:#666;">{{item.name}}</span>
149
- </el-button>
150
- <el-button
151
- type="text"
152
- v-for="(item,index) in row.inBottons"
153
- :key="index"
154
- size="mini"
155
- @click="handlerColClick(item.funcode,row,rowIndex)"
156
- >
157
- <i class="jtIcon ht-icon"
158
- :style="{color:item.color ? item.color : '#666',
159
- fontSize:item.size ? item.size + 'px' : '16px'}"
160
- :class="item.icon?item.icon:'iconcaidan'"></i>
161
- <span class="ht-text" style="color:#666;">{{item.name}}</span>
162
- </el-button>
163
- </template>
164
- </template>
165
- </vxe-table-column>
166
- </vxe-table>
167
- <!-- 大数据 -->
168
- <vxe-table
169
- class="jt-table-class-only"
170
- height="auto"
171
- size="mini"
170
+ <i
171
+ class="jtIcon ht-icon"
172
+ :style="{
173
+ color: item.color ? item.color : '#379FF2',
174
+ fontSize: item.size ? item.size + 'px' : '16px',
175
+ }"
176
+ :class="item.icon ? item.icon : 'iconxiangqing'"
177
+ ></i>
178
+ <span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
179
+ </el-button>
180
+ <el-button
181
+ type="text"
182
+ v-for="(item, index) in row.inBottons"
183
+ :key="index"
184
+ size="mini"
185
+ @click="handlerColClick(item.funcode, row, rowIndex)"
186
+ :style="btnHover(item.bgColor)"
187
+ >
188
+ <i
189
+ class="jtIcon ht-icon"
190
+ :style="{
191
+ color: item.color ? item.color : '#379FF2',
192
+ fontSize: item.size ? item.size + 'px' : '16px',
193
+ }"
194
+ :class="item.icon ? item.icon : 'iconxiangqing'"
195
+ ></i>
196
+ <span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
197
+ </el-button>
198
+ </template>
199
+ </template>
200
+ </vxe-table-column>
201
+ </vxe-table>
202
+ <!-- 大数据 -->
203
+ <vxe-table
204
+ class="jt-table-class-only"
205
+ height="auto"
206
+ size="mini"
207
+ show-overflow
208
+ show-header-overflow
209
+ auto-resize
210
+ resizable
211
+ highlight-current-row
212
+ highlight-current-column
213
+ keep-source
214
+ v-if="tableType === 'bigData'"
215
+ :id="id"
216
+ :ref="id"
217
+ :data="data.DataArray"
218
+ :stripe="stripe"
219
+ :border="border"
220
+ :max-height="maxHeight"
221
+ :loading="loading"
222
+ :row-style="rowStyle"
223
+ :cell-style="cellStyle_m"
224
+ :span-method="spanMethod"
225
+ :scroll-x="{ gt: 20 }"
226
+ :scroll-y="{ gt: 40, mode: 'wheel' }"
227
+ :sort-config="{ sortMethod: sortMethod }"
228
+ :radio-config="{ checkRowKey: null }"
229
+ :keyboard-config="{ isArrow: true }"
230
+ :checkbox-config="{ highlight: true }"
231
+ :export-config="{
232
+ type: 'xlsx',
233
+ types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
234
+ }"
235
+ :custom-config="{ storage: true, checkMethod: checkColumnMethod }"
236
+ :edit-config="{
237
+ trigger: 'dblclick',
238
+ mode: 'cell',
239
+ showStatus: true,
240
+ activeMethod: activeCellMethod,
241
+ }"
242
+ @scroll="scroll"
243
+ @checkbox-change="selectChangeEvent"
244
+ @checkbox-all="selectChangeEvent"
245
+ @radio-change="radioSelectChangeEvent"
246
+ @cell-click="cellClickEvent"
247
+ @keydown="keyEnter"
248
+ >
249
+ <!-- 复选框列 -->
250
+ <vxe-table-column
251
+ v-if="checkbox"
252
+ type="checkbox"
253
+ width="38"
254
+ align="center"
255
+ fixed="left"
256
+ ></vxe-table-column>
257
+ <!-- 单选框列 -->
258
+ <vxe-table-column
259
+ v-if="radio"
260
+ type="radio"
261
+ width="38"
262
+ align="center"
263
+ fixed="left"
264
+ ></vxe-table-column>
265
+ <!-- 序号列 -->
266
+ <vxe-table-column
267
+ v-if="isSeq && data"
268
+ type="seq"
269
+ align="center"
270
+ :width="req + 'px'"
271
+ title="序号"
272
+ fixed="left"
273
+ ></vxe-table-column>
274
+ <!-- 后台数据列 -->
275
+ <template v-for="(item, index) in data.retjson.header">
276
+ <vxe-table-column
277
+ :edit-render="item.edit"
278
+ :key="index"
172
279
  show-overflow
173
- show-header-overflow
174
- auto-resize
175
- resizable
176
- highlight-current-row
177
- highlight-current-column
178
- keep-source
179
- v-if="tableType === 'bigData'"
180
- :id="id"
181
- :ref="id"
182
- :data="data.DataArray"
183
- :stripe="stripe"
184
- :border="border"
185
- :max-height="maxHeight"
186
- :loading="loading"
187
- :row-style="rowStyle"
188
- :cell-style="cellStyle_m"
189
- :span-method="spanMethod"
190
- :scroll-x="{gt: 20}"
191
- :scroll-y="{gt: 40,mode: 'wheel'}"
192
- :sort-config="{sortMethod:sortMethod}"
193
- :radio-config="{checkRowKey: null}"
194
- :keyboard-config="{isArrow: true}"
195
- :checkbox-config="{highlight:true}"
196
- :export-config="{type: 'xlsx',types:['xlsx', 'csv', 'html', 'xml', 'txt']}"
197
- :custom-config="{storage: true,checkMethod: checkColumnMethod}"
198
- :edit-config="{trigger: 'dblclick', mode: 'cell', showStatus: true,activeMethod: activeCellMethod}"
199
- @scroll="scroll"
200
- @checkbox-change="selectChangeEvent"
201
- @checkbox-all="selectChangeEvent"
202
- @radio-change="radioSelectChangeEvent"
203
- @cell-click="cellClickEvent"
204
- @keydown="keyEnter"
205
- >
206
- <!-- 复选框列 -->
207
- <vxe-table-column v-if="checkbox"
208
- type="checkbox"
209
- width="38"
210
- align="center"
211
- fixed="left"
212
- ></vxe-table-column>
213
- <!-- 单选框列 -->
214
- <vxe-table-column
215
- v-if="radio"
216
- type="radio"
217
- width="38"
218
- align="center"
219
- fixed="left"
220
- ></vxe-table-column>
221
- <!-- 序号列 -->
222
- <vxe-table-column
223
- v-if="isSeq && data"
224
- type="seq"
225
- align="center"
226
- :width="req+'px'"
227
- title="序号"
228
- fixed="left"
229
- ></vxe-table-column>
230
- <!-- 后台数据列 -->
231
- <template v-for="(item,index) in data.retjson.header">
232
- <vxe-table-column
233
- :edit-render="item.edit"
280
+ :field="item.prop"
281
+ :align="item.align"
282
+ :title="item.label"
283
+ :type="item.html ? 'html' : ''"
284
+ :min-width="item.width"
285
+ :sortable="item.isSort"
286
+ :visible="item.width != 0"
287
+ :fixed="item.isFixed"
288
+ :filters="filterData(item.filterRender)"
289
+ :filter-render="{ name: item.filterRender }"
290
+ :formatter="formatEnum"
291
+ :cell-render="cellRenderData(item.cellRender)"
292
+ >
293
+ </vxe-table-column>
294
+ </template>
295
+ <!-- 展开行 -->
296
+ <vxe-table-column
297
+ v-if="expandConfig.isOpen"
298
+ type="expand"
299
+ fixed="right"
300
+ :width="expandConfig.width"
301
+ >
302
+ <template #default="{ row }">
303
+ <span style="position: relative; top: 2px; right: 6px; color: #333">
304
+ {{ isExpandText(row) ? expandConfig.text : "" }}</span
305
+ >
306
+ </template>
307
+ <template #content="{ row }">
308
+ <slot name="expandContent" :slot-scope="row"></slot>
309
+ </template>
310
+ </vxe-table-column>
311
+ <!-- 操作列 -->
312
+ <vxe-table-column
313
+ title="操作"
314
+ :visible="handlerConfig.show"
315
+ :align="handlerConfig.align"
316
+ :width="handlerConfig.width"
317
+ :fixed="handlerConfig.fixed"
318
+ show-overflow
319
+ >
320
+ <template v-slot="{ row, rowIndex }">
321
+ <el-dropdown v-if="handlerConfig.btnGroup">
322
+ <el-button size="mini" type="primary">
323
+ 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
324
+ </el-button>
325
+ <el-dropdown-menu slot="dropdown">
326
+ <el-dropdown-item
327
+ @click.native="handlerColClick(item.funcode, row, rowIndex)"
328
+ v-for="(item, index) in data.retjson.inBottons"
329
+ :key="'s' + index"
330
+ >{{ item.name }}</el-dropdown-item
331
+ >
332
+ <el-dropdown-item
333
+ v-for="(item, index) in row.inBottons"
234
334
  :key="index"
235
- show-overflow
236
- :field="item.prop"
237
- :align="item.align"
238
- :title="item.label"
239
- :type="item.html ? 'html': ''"
240
- :min-width="item.width"
241
- :sortable="item.isSort"
242
- :visible="item.width!=0"
243
- :fixed="item.isFixed"
244
- :filters="filterData(item.filterRender)"
245
- :filter-render="{name: item.filterRender}"
246
- :formatter="formatEnum"
247
- :cell-render="cellRenderData(item.cellRender)"
335
+ @click.native="handlerColClick(item.funcode, row, rowIndex)"
336
+ >{{ item.name }}</el-dropdown-item
337
+ >
338
+ </el-dropdown-menu>
339
+ </el-dropdown>
340
+ <template v-if="!handlerConfig.btnGroup">
341
+ <el-button
342
+ type="text"
343
+ v-for="(item, index) in data.retjson.inBottons"
344
+ :key="index"
345
+ size="mini"
346
+ @click="handlerColClick(item.funcode, row, rowIndex)"
347
+ :style="btnHover(item.bgColor)"
348
+ >
349
+ <i
350
+ class="jtIcon ht-icon"
351
+ :style="{
352
+ color: item.color ? item.color : '#379FF2',
353
+ fontSize: item.size ? item.size + 'px' : '16px',
354
+ }"
355
+ :class="item.icon ? item.icon : 'iconxiangqing'"
356
+ ></i>
357
+ <span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
358
+ </el-button>
359
+ <el-button
360
+ type="text"
361
+ v-for="(item, index) in row.inBottons"
362
+ :key="index"
363
+ size="mini"
364
+ @click="handlerColClick(item.funcode, row, rowIndex)"
365
+ :style="btnHover(item.bgColor)"
366
+ >
367
+ <i
368
+ class="jtIcon ht-icon"
369
+ :style="{
370
+ color: item.color ? item.color : '#379FF2',
371
+ fontSize: item.size ? item.size + 'px' : '16px',
372
+ }"
373
+ :class="item.icon ? item.icon : 'iconxiangqing'"
374
+ ></i>
375
+ <span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
376
+ </el-button>
377
+ </template>
378
+ </template>
379
+ </vxe-table-column>
380
+ </vxe-table>
381
+ <!-- 分组表格 -->
382
+ <vxe-table
383
+ size="mini"
384
+ class="jt-table-class-only"
385
+ :id="id"
386
+ :ref="id"
387
+ v-if="tableType === 'group'"
388
+ :custom-config="{ storage: true, checkMethod: checkColumnMethod }"
389
+ :border="border"
390
+ show-overflow
391
+ show-header-overflow
392
+ height="auto"
393
+ :max-height="maxHeight"
394
+ auto-resize
395
+ resizable
396
+ highlight-current-row
397
+ :tree-config="groupConfig"
398
+ :row-class-name="rowClassName"
399
+ :cell-class-name="gcellClassName"
400
+ :keyboard-config="{ isArrow: true }"
401
+ highlight-current-column
402
+ @checkbox-change="treeSelectChangeEvent"
403
+ :checkbox-config="{
404
+ highlight: true,
405
+ }"
406
+ @checkbox-all="treeSelectChangeEvent"
407
+ @cell-click="cellClickEvent"
408
+ :row-style="rowStyle"
409
+ :cell-style="cellStyle_m"
410
+ :loading="loading"
411
+ :data="data.DataArray"
412
+ >
413
+ <vxe-table-column
414
+ v-if="checkbox"
415
+ type="checkbox"
416
+ width="38"
417
+ fixed="left"
418
+ align="center"
419
+ ></vxe-table-column>
420
+ <vxe-table-column
421
+ v-if="isSeq && data"
422
+ type="seq"
423
+ align="center"
424
+ :width="req + 'px'"
425
+ title="序号"
426
+ fixed="left"
427
+ ></vxe-table-column>
428
+ <template v-for="(item, index) in data.retjson.header">
429
+ <vxe-table-column
430
+ :key="index"
431
+ show-overflow
432
+ :tree-node="item.prop == treeField"
433
+ :field="item.prop"
434
+ :align="item.align"
435
+ :type="item.html ? 'html' : ''"
436
+ :title="item.label"
437
+ :min-width="item.width"
438
+ :visible="item.width != 0"
439
+ :formatter="formatEnum"
440
+ >
441
+ </vxe-table-column>
442
+ </template>
443
+ <!-- 操作列 -->
444
+ <vxe-table-column
445
+ title="操作"
446
+ v-if="handlerConfig.show"
447
+ :align="handlerConfig.align"
448
+ :width="handlerConfig.width"
449
+ :fixed="handlerConfig.fixed"
450
+ show-overflow
451
+ >
452
+ <template v-slot="{ row, rowIndex }">
453
+ <el-dropdown v-if="handlerConfig.btnGroup">
454
+ <el-button size="mini" type="primary">
455
+ 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
456
+ </el-button>
457
+ <el-dropdown-menu slot="dropdown">
458
+ <template v-for="(item, index) in data.retjson.inBottons">
459
+ <el-dropdown-item
460
+ @click.native="handlerColClick(item.funcode, row, rowIndex)"
461
+ v-if="isShowAddButton(row.path, item.name)"
462
+ :key="'s' + index"
463
+ >{{ item.name }}</el-dropdown-item
464
+ >
465
+ </template>
466
+ <template v-for="(item, index) in row.inBottons">
467
+ <el-dropdown-item
468
+ v-if="isShowAddButton(row.path, item.name)"
469
+ :key="index"
470
+ @click.native="handlerColClick(item.funcode, row, rowIndex)"
471
+ >{{ item.name }}</el-dropdown-item
248
472
  >
249
- </vxe-table-column>
473
+ </template>
474
+ </el-dropdown-menu>
475
+ </el-dropdown>
476
+ <template v-if="!handlerConfig.btnGroup">
477
+ <template v-for="(item, index) in data.retjson.inBottons">
478
+ <el-button
479
+ type="text"
480
+ v-if="isShowAddButton(row.path, item.name)"
481
+ :key="'s' + index"
482
+ size="mini"
483
+ @click="handlerColClick(item.funcode, row, rowIndex)"
484
+ :style="btnHover(item.bgColor)"
485
+ >
486
+ <i
487
+ class="jtIcon ht-icon"
488
+ :style="{
489
+ color: item.color ? item.color : '#379FF2',
490
+ fontSize: item.size ? item.size + 'px' : '16px',
491
+ }"
492
+ :class="item.icon ? item.icon : 'iconxiangqing'"
493
+ ></i>
494
+ <span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
495
+ </el-button>
250
496
  </template>
251
- <!-- 展开行 -->
252
- <vxe-table-column
253
- v-if="expandConfig.isOpen"
254
- type="expand"
255
- fixed="right"
256
- :width="expandConfig.width"
257
- >
258
- <template #default="{row}">
259
- <span style="position:relative;top:2px;right:6px;color:#333">
260
- {{isExpandText(row) ? expandConfig.text : ''}}</span>
261
- </template>
262
- <template #content="{ row }">
263
- <slot name="expandContent" :slot-scope="row"></slot>
264
- </template>
265
- </vxe-table-column>
266
- <!-- 操作列 -->
267
- <vxe-table-column title="操作"
268
- :visible="handlerConfig.show"
269
- :align="handlerConfig.align"
270
- :width="handlerConfig.width"
271
- :fixed="handlerConfig.fixed"
272
- show-overflow>
273
- <template v-slot="{ row , rowIndex }">
274
- <el-dropdown v-if="handlerConfig.btnGroup">
275
- <el-button size="mini" type="primary">
276
- 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
277
- </el-button>
278
- <el-dropdown-menu slot="dropdown">
279
- <el-dropdown-item
280
- @click.native="handlerColClick(item.funcode,row,rowIndex)"
281
- v-for="(item,index) in data.retjson.inBottons"
282
- :key="'s' + index"
283
- >{{item.name}}</el-dropdown-item>
284
- <el-dropdown-item
285
- v-for="(item,index) in row.inBottons"
286
- :key="index"
287
- @click.native="handlerColClick(item.funcode,row,rowIndex)"
288
- >{{item.name}}</el-dropdown-item>
289
- </el-dropdown-menu>
290
- </el-dropdown>
291
- <template v-if="!handlerConfig.btnGroup">
292
- <el-button
293
- type="text"
294
- v-for="(item,index) in data.retjson.inBottons"
295
- :key="index"
296
- size="mini"
297
- @click="handlerColClick(item.funcode,row,rowIndex)"
298
- >
299
- <i class="jtIcon ht-icon"
300
- :style="{color:item.color ? item.color : '#666',
301
- fontSize:item.size ? item.size + 'px' : '16px'}"
302
- :class="item.icon?item.icon:'iconcaidan'"></i>
303
- <span class="ht-text" style="color:#666;">{{item.name}}</span>
304
- </el-button>
305
- <el-button
306
- type="text"
307
- v-for="(item,index) in row.inBottons"
308
- :key="index"
309
- size="mini"
310
- @click="handlerColClick(item.funcode,row,rowIndex)"
311
- >
312
- <i class="jtIcon ht-icon"
313
- :style="{color:item.color ? item.color : '#666',
314
- fontSize:item.size ? item.size + 'px' : '16px'}"
315
- :class="item.icon?item.icon:'iconcaidan'"></i>
316
- <span class="ht-text" style="color:#666;">{{item.name}}</span>
317
- </el-button>
318
- </template>
319
- </template>
320
- </vxe-table-column>
321
- </vxe-table>
322
- <!-- 分组表格 -->
323
- <vxe-table
324
- size="mini"
325
- class="jt-table-class-only"
326
- :id="id"
327
- :ref="id"
328
- v-if="tableType === 'group'"
329
- :custom-config="{storage: true,checkMethod: checkColumnMethod}"
330
- :border="border"
331
- show-overflow
332
- show-header-overflow
333
- height="auto"
334
- :max-height="maxHeight"
335
- auto-resize
336
- resizable
337
- highlight-current-row
338
- :tree-config="groupConfig"
339
- :row-class-name="rowClassName"
340
- :cell-class-name="gcellClassName"
341
- :keyboard-config="{isArrow: true}"
342
- highlight-current-column
343
- @checkbox-change="treeSelectChangeEvent"
344
- :checkbox-config="{
345
- highlight:true
346
- }"
347
- @checkbox-all="treeSelectChangeEvent"
348
- @cell-click="cellClickEvent"
349
- :row-style="rowStyle"
350
- :cell-style="cellStyle_m"
351
- :loading="loading"
352
- :data="data.DataArray">
353
- <vxe-table-column v-if="checkbox"
354
- type="checkbox"
355
- width="38"
356
- fixed="left"
357
- align="center"></vxe-table-column>
358
- <vxe-table-column
359
- v-if="isSeq && data"
360
- type="seq"
361
- align="center"
362
- :width="req+'px'"
363
- title="序号"
364
- fixed="left"
365
- ></vxe-table-column>
366
- <template v-for="(item,index) in data.retjson.header">
367
- <vxe-table-column
497
+ <template v-for="(item, index) in row.inBottons">
498
+ <el-button
499
+ type="text"
500
+ v-if="isShowAddButton(row.path, item.name)"
368
501
  :key="index"
369
- show-overflow
370
- :tree-node="item.prop == treeField"
371
- :field="item.prop"
372
- :align="item.align"
373
- :type="item.html ? 'html': ''"
374
- :title="item.label"
375
- :min-width="item.width"
376
- :visible="item.width!=0"
377
- :formatter="formatEnum"
378
- >
379
- </vxe-table-column>
502
+ size="mini"
503
+ @click="handlerColClick(item.funcode, row, rowIndex)"
504
+ :style="btnHover(item.bgColor)"
505
+ >
506
+ <i
507
+ class="jtIcon ht-icon"
508
+ :style="{
509
+ color: item.color ? item.color : '#379FF2',
510
+ fontSize: item.size ? item.size + 'px' : '16px',
511
+ }"
512
+ :class="item.icon ? item.icon : 'iconxiangqing'"
513
+ ></i>
514
+ <span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
515
+ </el-button>
380
516
  </template>
381
- <!-- 操作列 -->
382
- <vxe-table-column title="操作"
383
- v-if="handlerConfig.show"
384
- :align="handlerConfig.align"
385
- :width="handlerConfig.width"
386
- :fixed="handlerConfig.fixed"
387
- show-overflow>
388
- <template v-slot="{ row , rowIndex }">
389
- <el-dropdown v-if="handlerConfig.btnGroup">
390
- <el-button size="mini" type="primary">
391
- 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
392
- </el-button>
393
- <el-dropdown-menu slot="dropdown">
394
- <template v-for="(item,index) in data.retjson.inBottons">
395
- <el-dropdown-item
396
- @click.native="handlerColClick(item.funcode,row,rowIndex)"
397
- v-if="isShowAddButton(row.path,item.name)"
398
- :key="'s' + index"
399
- >{{item.name}}</el-dropdown-item>
400
- </template>
401
- <template v-for="(item,index) in row.inBottons">
402
- <el-dropdown-item
403
- v-if="isShowAddButton(row.path,item.name)"
404
- :key="index"
405
- @click.native="handlerColClick(item.funcode,row,rowIndex)"
406
- >{{item.name}}</el-dropdown-item>
407
- </template>
408
- </el-dropdown-menu>
409
- </el-dropdown>
410
- <template v-if="!handlerConfig.btnGroup">
411
- <template v-for="(item,index) in data.retjson.inBottons">
412
- <el-button
413
- type="text"
414
- v-if="isShowAddButton(row.path,item.name)"
415
- :key="'s' + index"
416
- size="mini"
417
- @click="handlerColClick(item.funcode,row,rowIndex)"
418
- >
419
- <i class="jtIcon ht-icon"
420
- :style="{color:item.color ? item.color : '#666',
421
- fontSize:item.size ? item.size + 'px' : '16px'}"
422
- :class="item.icon?item.icon:'iconcaidan'"></i>
423
- <span class="ht-text" style="color:#666;">{{item.name}}</span>
424
- </el-button>
425
- </template>
426
- <template v-for="(item,index) in row.inBottons">
427
- <el-button
428
- type="text"
429
- v-if="isShowAddButton(row.path,item.name)"
430
- :key="index"
431
- size="mini"
432
- @click="handlerColClick(item.funcode,row,rowIndex)"
433
- >
434
- <i class="jtIcon ht-icon"
435
- :style="{color:item.color ? item.color : '#666',
436
- fontSize:item.size ? item.size + 'px' : '16px'}"
437
- :class="item.icon?item.icon:'iconcaidan'"></i>
438
- <span class="ht-text" style="color:#666;">{{item.name}}</span>
439
- </el-button>
440
- </template>
441
- </template>
442
- </template>
443
- </vxe-table-column>
444
- </vxe-table>
445
- <!-- 树形表格 and 树 -->
446
- <vxe-table
447
- size="mini"
448
- class="jt-table-class-only"
449
- :id="id"
450
- :ref="id"
451
- :stripe="stripe"
452
- :show-header="treeTypeConfig.type == 'treeTable'"
453
- v-if="tableType === 'tree'"
454
- :max-height="maxHeight"
455
- :border="border"
456
- show-overflow
457
- show-header-overflow
458
- height="auto"
459
- auto-resize
460
- :cell-style="cellStyle_m"
461
- :row-style="rowStyle"
462
- :span-method="spanMethod"
463
- resizable
464
- highlight-current-row
465
- :tree-config="treeConfig"
466
- :row-key="true"
467
- row-id="pkid"
468
- :radio-config="{labelField:treeTypeConfig.type !== 'treeTable' ? 'name' : '',
469
- checkMethod:treeRadioMethod}"
470
- :checkbox-config="{labelField:treeTypeConfig.type !== 'treeTable' ? 'name' : '',
471
- checkRowKeys: this.treeTypeConfig.checkRowKeys,
472
- highlight:true,
473
- checkMethod:checCheckboxkMethod2}"
474
- @checkbox-change="treeCheckChange"
475
- @checkbox-all="treeCheckChange"
476
- @radio-change="radioSelectChangeEvent"
477
- @cell-click="cellClickEvent"
478
- :edit-config="{trigger: 'dblclick', mode: 'cell', showStatus: true,activeMethod: activeCellMethod}"
479
- keep-source
480
- :loading="loading"
481
- @keydown="keyEnter"
482
- @scroll="scroll1"
483
- :expand-config="{visibleMethod,loadMethod:expandConfig.loadMethod,
484
- toggleMethod,
485
- lazy:true,accordion: expandConfig.accordion}"
486
- :data="data.DataArray">
487
- <!-- 复选框列 -->
488
- <vxe-table-column v-if="treeTypeConfig.type === 'treeTable' && treeTypeConfig.checkbox"
489
- type="checkbox"
490
- width="38"
491
- align="center"
492
- fixed="left"
517
+ </template>
518
+ </template>
519
+ </vxe-table-column>
520
+ </vxe-table>
521
+ <!-- 树形表格 and 树 -->
522
+ <vxe-table
523
+ size="mini"
524
+ class="jt-table-class-only"
525
+ :id="id"
526
+ :ref="id"
527
+ :stripe="stripe"
528
+ :show-header="treeTypeConfig.type == 'treeTable'"
529
+ v-if="tableType === 'tree'"
530
+ :max-height="maxHeight"
531
+ :border="border"
532
+ show-overflow
533
+ show-header-overflow
534
+ height="auto"
535
+ auto-resize
536
+ :cell-style="cellStyle_m"
537
+ :row-style="rowStyle"
538
+ :span-method="spanMethod"
539
+ resizable
540
+ highlight-current-row
541
+ :tree-config="treeConfig"
542
+ :row-key="true"
543
+ row-id="pkid"
544
+ :radio-config="{
545
+ labelField: treeTypeConfig.type !== 'treeTable' ? 'name' : '',
546
+ checkMethod: treeRadioMethod,
547
+ }"
548
+ :checkbox-config="{
549
+ labelField: treeTypeConfig.type !== 'treeTable' ? 'name' : '',
550
+ checkRowKeys: this.treeTypeConfig.checkRowKeys,
551
+ highlight: true,
552
+ checkMethod: checCheckboxkMethod2,
553
+ }"
554
+ @checkbox-change="treeCheckChange"
555
+ @checkbox-all="treeCheckChange"
556
+ @radio-change="radioSelectChangeEvent"
557
+ @cell-click="cellClickEvent"
558
+ :edit-config="{
559
+ trigger: 'dblclick',
560
+ mode: 'cell',
561
+ showStatus: true,
562
+ activeMethod: activeCellMethod,
563
+ }"
564
+ keep-source
565
+ :loading="loading"
566
+ @keydown="keyEnter"
567
+ @scroll="scroll1"
568
+ :expand-config="{
569
+ visibleMethod,
570
+ loadMethod: expandConfig.loadMethod,
571
+ toggleMethod,
572
+ lazy: true,
573
+ accordion: expandConfig.accordion,
574
+ }"
575
+ :data="data.DataArray"
576
+ >
577
+ <!-- 复选框列 -->
578
+ <vxe-table-column
579
+ v-if="treeTypeConfig.type === 'treeTable' && treeTypeConfig.checkbox"
580
+ type="checkbox"
581
+ width="38"
582
+ align="center"
583
+ fixed="left"
584
+ >
585
+ </vxe-table-column>
586
+ <!-- 单选框列 -->
587
+ <vxe-table-column
588
+ v-if="treeTypeConfig.type === 'treeTable' && treeTypeConfig.radio"
589
+ type="radio"
590
+ width="38"
591
+ align="center"
592
+ fixed="left"
593
+ ></vxe-table-column>
594
+ <!-- 序号列 -->
595
+ <vxe-table-column
596
+ v-if="isSeq && treeTypeConfig.type === 'treeTable'"
597
+ type="seq"
598
+ align="center"
599
+ :width="req + 'px'"
600
+ title="序号"
601
+ fixed="left"
602
+ ></vxe-table-column>
603
+ <template v-for="(item, index) in data.retjson.header">
604
+ <vxe-table-column
605
+ v-if="treeTypeConfig.type !== 'treeTable'"
606
+ :edit-render="item.edit"
607
+ :type="treeTypeConfig.colType"
608
+ :tree-node="index == 0"
609
+ :key="index"
610
+ show-overflow
611
+ :field="item.prop"
612
+ align="left"
613
+ :title="item.label"
614
+ :min-width="item.width"
615
+ :cell-render="cellRenderData(item.cellRender)"
616
+ :visible="index === 0"
617
+ >
618
+ <template v-slot="{ row }">
619
+ <span
620
+ @click="treeTxtClick(row)"
621
+ style="position: relative; top: 2px"
493
622
  >
494
- </vxe-table-column>
495
- <!-- 单选框列 -->
496
- <vxe-table-column
497
- v-if="treeTypeConfig.type === 'treeTable' && treeTypeConfig.radio"
498
- type="radio"
499
- width="38"
500
- align="center"
501
- fixed="left"
502
- ></vxe-table-column>
503
- <!-- 序号列 -->
504
- <vxe-table-column
505
- v-if="isSeq && treeTypeConfig.type === 'treeTable'"
506
- type="seq"
507
- align="center"
508
- :width="req+'px'"
509
- title="序号"
510
- fixed="left"
511
- ></vxe-table-column>
512
- <template v-for="(item,index) in data.retjson.header">
513
- <vxe-table-column
514
- v-if="treeTypeConfig.type !== 'treeTable'"
515
- :edit-render="item.edit"
516
- :type="treeTypeConfig.colType"
517
- :tree-node="index == 0"
518
- :key="index"
519
- show-overflow
520
- :field="item.prop"
521
- align="left"
522
- :title="item.label"
523
- :min-width="item.width"
524
- :cell-render="cellRenderData(item.cellRender)"
525
- :visible="index === 0"
623
+ <template v-if="row.path && row.path !== undefined">
624
+ <i
625
+ class="jtIcon"
626
+ :class="row.icon ? row.icon : 'jt-iconClose2 iconwenjianjia'"
627
+ ></i>
628
+ </template>
629
+ <template v-else>
630
+ <i
631
+ class="jtIcon jt-iconFile"
632
+ :class="row.icon ? row.icon : 'icon21file'"
633
+ ></i>
634
+ </template>
635
+ <span>{{ row.name }}</span>
636
+ </span>
637
+ </template>
638
+ </vxe-table-column>
639
+ <vxe-table-column
640
+ v-if="treeTypeConfig.type === 'treeTable'"
641
+ :edit-render="item.edit"
642
+ :tree-node="index == 0"
643
+ :key="index"
644
+ show-overflow
645
+ :field="item.prop"
646
+ :align="item.align"
647
+ :title="item.label"
648
+ :min-width="item.width"
649
+ :visible="item.width !== 0"
650
+ :type="item.html ? 'html' : ''"
651
+ :cell-render="cellRenderData(item.cellRender)"
652
+ :formatter="formatEnum"
653
+ >
654
+ <template v-slot="{ row }" v-if="index === 0">
655
+ <span
656
+ @click="treeTxtClick(row)"
657
+ style="position: relative; top: 2px"
658
+ >
659
+ <template v-if="row.path && row.path !== undefined">
660
+ <i
661
+ class="jtIcon"
662
+ :class="row.icon ? row.icon : 'jt-iconClose2 iconwenjianjia'"
663
+ ></i>
664
+ </template>
665
+ <template v-else>
666
+ <i
667
+ class="jtIcon jt-iconFile"
668
+ :class="row.icon ? row.icon : 'icon21file'"
669
+ ></i>
670
+ </template>
671
+ <span>{{ row[item.prop] }}</span>
672
+ </span>
673
+ </template>
674
+ </vxe-table-column>
675
+ </template>
676
+ <!-- 展开行 -->
677
+ <vxe-table-column
678
+ v-if="expandConfig.isOpen"
679
+ type="expand"
680
+ :width="expandConfig.width"
681
+ >
682
+ <template #default="{ row }">
683
+ <span style="position: relative; top: 2px; right: 6px; color: #333">
684
+ {{ isExpandText(row) ? expandConfig.text : "" }}</span
685
+ >
686
+ </template>
687
+ <template #content="{ row }">
688
+ <slot name="expandContent" :slot-scope="row"></slot>
689
+ </template>
690
+ </vxe-table-column>
691
+ <!-- 操作列 -->
692
+ <vxe-table-column
693
+ title="操作"
694
+ v-if="handlerConfig.show"
695
+ :align="handlerConfig.align"
696
+ :width="handlerConfig.width"
697
+ :fixed="handlerConfig.fixed"
698
+ show-overflow
699
+ >
700
+ <template v-slot="{ row, rowIndex }">
701
+ <el-dropdown v-if="handlerConfig.btnGroup">
702
+ <el-button size="mini" type="primary">
703
+ 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
704
+ </el-button>
705
+ <el-dropdown-menu slot="dropdown">
706
+ <template v-for="(item, index) in data.retjson.inBottons">
707
+ <el-dropdown-item
708
+ @click.native="handlerColClick(item.funcode, row, rowIndex)"
709
+ v-if="isShowAddButton(row.path, item.name)"
710
+ :key="'s' + index"
711
+ >{{ item.name }}</el-dropdown-item
526
712
  >
527
- <template v-slot="{ row }">
528
- <span @click="treeTxtClick(row)" style="position:relative;top:2px;">
529
- <template v-if="row.path && row.path !== undefined">
530
- <i class="jtIcon" :class="row.icon ? row.icon : 'jt-iconClose2 iconwenjianjia'"></i>
531
- </template>
532
- <template v-else>
533
- <i class="jtIcon jt-iconFile" :class="row.icon ? row.icon : 'icon21file'"></i>
534
- </template>
535
- <span>{{ row.name }}</span>
536
- </span>
537
- </template>
538
- </vxe-table-column>
539
- <vxe-table-column
540
- v-if="treeTypeConfig.type === 'treeTable'"
541
- :edit-render="item.edit"
542
- :tree-node="index == 0"
543
- :key="index"
544
- show-overflow
545
- :field="item.prop"
546
- :align="item.align"
547
- :title="item.label"
548
- :min-width="item.width"
549
- :visible="item.width !== 0"
550
- :type="item.html ? 'html': ''"
551
- :cell-render="cellRenderData(item.cellRender)"
552
- :formatter="formatEnum"
713
+ </template>
714
+ <template v-for="(item, index) in row.inBottons">
715
+ <el-dropdown-item
716
+ v-if="isShowAddButton(row.path, item.name)"
717
+ :key="index"
718
+ @click.native="handlerColClick(item.funcode, row, rowIndex)"
719
+ >{{ item.name }}</el-dropdown-item
553
720
  >
554
- <template v-slot="{ row }" v-if="index === 0">
555
- <span @click="treeTxtClick(row)" style="position:relative;top:2px;">
556
- <template v-if="row.path && row.path !== undefined">
557
- <i class="jtIcon" :class="row.icon ? row.icon : 'jt-iconClose2 iconwenjianjia'"></i>
558
- </template>
559
- <template v-else>
560
- <i class="jtIcon jt-iconFile" :class="row.icon ? row.icon : 'icon21file'"></i>
561
- </template>
562
- <span>{{ row[item.prop] }}</span>
563
- </span>
564
- </template>
565
- </vxe-table-column>
721
+ </template>
722
+ </el-dropdown-menu>
723
+ </el-dropdown>
724
+ <template v-if="!handlerConfig.btnGroup">
725
+ <template v-for="(item, index) in data.retjson.inBottons">
726
+ <el-button
727
+ type="text"
728
+ v-if="isShowAddButton(row.path, item.name)"
729
+ :key="'s' + index"
730
+ size="mini"
731
+ @click="handlerColClick(item.funcode, row, rowIndex)"
732
+ :style="btnHover(item.bgColor)"
733
+ >
734
+ <i
735
+ class="jtIcon ht-icon"
736
+ :style="{
737
+ color: item.color ? item.color : '#379FF2',
738
+ fontSize: item.size ? item.size + 'px' : '16px',
739
+ }"
740
+ :class="item.icon ? item.icon : 'iconxiangqing'"
741
+ ></i>
742
+ <span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
743
+ </el-button>
566
744
  </template>
567
- <!-- 展开行 -->
568
- <vxe-table-column
569
- v-if="expandConfig.isOpen"
570
- type="expand"
571
- :width="expandConfig.width"
572
- >
573
- <template #default="{row}">
574
- <span style="position:relative;top:2px;right:6px;color:#333">
575
- {{isExpandText(row) ? expandConfig.text : ''}}</span>
576
- </template>
577
- <template #content="{ row }">
578
- <slot name="expandContent" :slot-scope="row"></slot>
579
- </template>
580
- </vxe-table-column>
581
- <!-- 操作列 -->
582
- <vxe-table-column title="操作"
583
- v-if="handlerConfig.show"
584
- :align="handlerConfig.align"
585
- :width="handlerConfig.width"
586
- :fixed="handlerConfig.fixed"
587
- show-overflow>
588
- <template v-slot="{ row , rowIndex }">
589
- <el-dropdown v-if="handlerConfig.btnGroup">
590
- <el-button size="mini" type="primary">
591
- 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
592
- </el-button>
593
- <el-dropdown-menu slot="dropdown">
594
- <template v-for="(item,index) in data.retjson.inBottons">
595
- <el-dropdown-item
596
- @click.native="handlerColClick(item.funcode,row,rowIndex)"
597
- v-if="isShowAddButton(row.path,item.name)"
598
- :key="'s' + index"
599
- >{{item.name}}</el-dropdown-item>
600
- </template>
601
- <template v-for="(item,index) in row.inBottons">
602
- <el-dropdown-item
603
- v-if="isShowAddButton(row.path,item.name)"
604
- :key="index"
605
- @click.native="handlerColClick(item.funcode,row,rowIndex)"
606
- >{{item.name}}</el-dropdown-item>
607
- </template>
608
- </el-dropdown-menu>
609
- </el-dropdown>
610
- <template v-if="!handlerConfig.btnGroup">
611
- <template v-for="(item,index) in data.retjson.inBottons">
612
- <el-button
613
- type="text"
614
- v-if="isShowAddButton(row.path,item.name)"
615
- :key="'s' + index"
616
- size="mini"
617
- @click="handlerColClick(item.funcode,row,rowIndex)"
618
- >
619
- <i class="jtIcon ht-icon"
620
- :style="{color:item.color ? item.color : '#666',
621
- fontSize:item.size ? item.size + 'px' : '16px'}"
622
- :class="item.icon?item.icon:'iconcaidan'"></i>
623
- <span class="ht-text" style="color:#666;">{{item.name}}</span>
624
- </el-button>
625
- </template>
626
- <template v-for="(item,index) in row.inBottons">
627
- <el-button
628
- type="text"
629
- v-if="isShowAddButton(row.path,item.name)"
630
- :key="index"
631
- size="mini"
632
- @click="handlerColClick(item.funcode,row,rowIndex)"
633
- >
634
- <i class="jtIcon ht-icon"
635
- :style="{color:item.color ? item.color : '#666',
636
- fontSize:item.size ? item.size + 'px' : '16px'}"
637
- :class="item.icon?item.icon:'iconcaidan'"></i>
638
- <span class="ht-text" style="color:#666;">{{item.name}}</span>
639
- </el-button>
640
- </template>
641
- </template>
642
- </template>
643
- </vxe-table-column>
644
- </vxe-table>
645
- </div>
745
+ <template v-for="(item, index) in row.inBottons">
746
+ <el-button
747
+ type="text"
748
+ v-if="isShowAddButton(row.path, item.name)"
749
+ :key="index"
750
+ size="mini"
751
+ @click="handlerColClick(item.funcode, row, rowIndex)"
752
+ :style="btnHover(item.bgColor)"
753
+ >
754
+ <i
755
+ class="jtIcon ht-icon"
756
+ :style="{
757
+ color: item.color ? item.color : '#379FF2',
758
+ fontSize: item.size ? item.size + 'px' : '16px',
759
+ }"
760
+ :class="item.icon ? item.icon : 'iconxiangqing'"
761
+ ></i>
762
+ <span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
763
+ </el-button>
764
+ </template>
765
+ </template>
766
+ </template>
767
+ </vxe-table-column>
768
+ </vxe-table>
769
+ </div>
646
770
  </template>
647
771
 
648
772
  <script>
649
- import XEUtils from 'xe-utils';
650
- export default {
651
- name: 'jt-table-pc',
652
- created(){
653
- if(this.isPage){
654
- this.tDataCopy = JSON.parse(JSON.stringify(this.data.DataArray));
655
- this.dataTotal = this.tableData.length;
656
- this.pageTotal = Math.ceil(this.dataTotal / 50);
657
- for(let i = 1; i <= this.pageTotal; i++){
658
- this.dataTreeObj[i] = this.tDataCopy.slice((i-1) * 50, i * 50);
659
- }
660
- this.data.DataArray = [...this.dataTreeObj[this.pageIndex],...this.dataTreeObj[this.pageIndex+1]] ;
661
- }
662
- if('header' in this.data.retjson){
663
- this.treeField = this.data.retjson.header[0].prop;
664
- }
665
- },
666
- props:{
667
- //表格ID
668
- id:{
669
- type:String,
670
- required:true
671
- },
672
- //表格数据源
673
- data:{
674
- type:Object,
675
- required:true
676
- },
677
- //序号width
678
- req:{
679
- type:[Number,String],
680
- default:60
681
- },
682
- //表格类型，默认default为普通表格、tree为树表
683
- tableType:{
684
- type:String,
685
- default:'default'
686
- },
687
- //是否显示单选框
688
- radio:{
689
- type:Boolean,
690
- default:false
691
- },
692
- //是否显示复选框
693
- checkbox:{
694
- type:Boolean,
695
- default:false
696
- },
697
- //操作列配置
698
- handlerConfig:{
699
- type:Object,
700
- default:() => {
701
- return {
702
- show:false,
703
- width:250,
704
- align:'center',
705
- fixed:'right',
706
- btnGroup:true
707
- }
708
- }
709
- },
710
- //是否显示表尾
711
- isFooter:{
712
- type:Boolean,
713
- default:false
714
- },
715
- //表尾显示项控制
716
- footConfig:{
717
- type:Object,
718
- default:() => {
719
- return {
720
- filed:[]
721
- }
722
- }
723
- },
724
- //树 or 树表控制项
725
- treeTypeConfig:{
726
- type:Object,
727
- default:() => {
728
- return {
729
- colType:'checkbox',
730
- type:'tree',
731
- checkbox:true,
732
- line:true,
733
- expandAll:false,
734
- checkRowKeys:[]
735
- }
736
- }
737
- },
738
- treeLazy:{
739
- type:Boolean,
740
- default:true
741
- },
742
- //加载动画
743
- loading:{
744
- type:Boolean,
745
- default:false
746
- },
747
- //显示、隐藏列开关
748
- isTool:{
749
- type:Boolean,
750
- default:false
751
- },
752
- //行样式控制函数
753
- rowStyle:{
754
- type:Function
755
- },
756
- //单元格样式控制函数
757
- cellStyle:{
758
- type:Function
759
- },
760
- //分组表格是否开启连线模式
761
- groupLine:{
762
- type:Boolean,
763
- default:false
764
- },
765
- //合并行和列函数
766
- spanMethod:{
767
- type:Function
768
- },
769
- //斑马线开关
770
- stripe:{
771
- type:Boolean,
772
- default:false
773
- },
774
- //表格最大高度
775
- maxHeight:{
776
- type:[String,Number],
777
- default:0
778
- },
779
- //分组表格是否默认展开所有
780
- groupExpandAll:{
781
- type:Boolean,
782
- default:false
783
- },
784
- //表格边线
785
- border:{
786
- type:String,
787
- default:'full'
788
- },
789
- //树、树表是否禁用非最后一级
790
- isParent:{
791
- type:Boolean,
792
- default:true
793
- },
794
- //是否开启序号
795
- isSeq:{
796
- type:Boolean,
797
- default:true
798
- },
799
- //分组表格默认展开所有
800
- isExpand:{
801
- type:Boolean,
802
- default:true
803
- },
804
- //前端滚动分页加载
805
- isPage:{
806
- type:Boolean,
807
- default:false
808
- },
809
- //表头是否换行
810
- isWrap:{
811
- type:Boolean,
812
- default:false
813
- },
814
- //单元格自定义组件events
815
- cellRenderMethods:{
816
- type:Object,
817
- default:()=>({
818
- parentRow:Object,
819
- radioChange:()=>{}
820
- })
821
- },
822
- //展开行配置
823
- expandConfig:{
824
- type:Object,
825
- default:()=>({
826
- isOpen:false,
827
- width:120,
828
- text:'',
829
- accordion:true, //手风琴模式
830
- loadMethod:()=>{}
831
- })
832
- },
833
- //树手风琴开关
834
- treeAccordion:{
835
- type:Boolean,
836
- default:false
837
- }
838
- },
839
- data(){
840
- return {
841
- tableData:this.data.DataArray, //表格数据
842
- colNum:0,//当前列的数量
843
- leftCol:0,//从左起计算合并列的基数
844
- //分组表格的配置
845
- groupConfig:{
846
- children: 'children',
847
- iconOpen: 'jtIcon iconwenjianjia1 jt-iconOpen1',
848
- iconClose: 'jtIcon iconwenjianjia jt-iconClose1',
849
- expandAll: this.groupExpandAll,
850
- line:this.groupLine
851
- },
852
- //树 or 树表 配置
853
- treeConfig:{
854
- lazy: this.treeLazy,
855
- children: 'children',
856
- expandAll: this.treeTypeConfig.expandAll,
857
- hasChild: 'path',
858
- iconOpen: 'jtIcon iconjianshao jt-iconOpen',
859
- iconClose: 'jtIcon iconjia1 jt-iconClose',
860
- loadMethod: this.loadChildrenMethod,
861
- line:this.treeTypeConfig.line,
862
- accordion:this.treeAccordion
863
- },
864
- treeField:'', //分组列的字段
865
- timeOut:null,//滚动翻页定时器Id
866
- pageIndex:1,
867
- sp:0,//当前滚动的位置
868
- tPageIndex:1, //树表分页当前页数
869
- tDataCopy:[], //树表分页数据拷贝
870
- pageTotal:0,
871
- dataTotal:0,
872
- dataTreeObj:{}
873
- }
874
- },
875
- methods:{
876
- //加载数据
877
- loadData(data){
878
- return this.$refs[this.id].loadData(data);
879
- },
880
- //根据类型返回筛选框源数据
881
- filterData(type){
882
- switch(type){
883
- case 'FilterInput' : return [{ data: ''}];
884
- case 'FilterContent' : return [{data: {vals: [], sVal: ''}}];
885
- case 'FilterExcel' : return [{data: {f1Type:'1', f1Val: '', fMode: 'and', f2Type: '1', f2Val: ''}}];
886
- case 'FilterComplex' : return [{data: {type: 'eq', value: ''}},{data: {type: 'eq', value: ''}}];
887
- }
888
- },
889
- //单元格自定义渲染根据类型返回配置
890
- cellRenderData(type){
891
- switch(type){
892
- case 'TabsBtn' : return {
893
- name:'TabsBtn',
894
- events:{radioChange:this.cellRenderMethods.radioChange},
895
- parentRow:this.cellRenderMethods?.parentRow
896
- }
897
- }
898
- },
899
- //枚举转换
900
- formatEnum({column,cellValue}){
901
- try {
902
- let data = this.data.retjson.header.find(item => item.prop == column.property);
903
- if(data && "html" in data && 'htmlType' in data){
904
- if(data.htmlType == 'icon'){
905
- if(Array.isArray(cellValue)){
906
- let str = '';
907
- cellValue.forEach(i => {
908
- let item = data.html.find(im => {
909
- return im.value == i});
910
- if(item){
911
- str += `<span
773
+ import XEUtils from "xe-utils";
774
+ export default {
775
+ name: "jt-table-pc",
776
+ created() {
777
+ if (this.isPage) {
778
+ this.tDataCopy = JSON.parse(JSON.stringify(this.data.DataArray));
779
+ this.dataTotal = this.tableData.length;
780
+ this.pageTotal = Math.ceil(this.dataTotal / 50);
781
+ for (let i = 1; i <= this.pageTotal; i++) {
782
+ this.dataTreeObj[i] = this.tDataCopy.slice((i - 1) * 50, i * 50);
783
+ }
784
+ this.data.DataArray = [
785
+ ...this.dataTreeObj[this.pageIndex],
786
+ ...this.dataTreeObj[this.pageIndex + 1],
787
+ ];
788
+ }
789
+ if ("header" in this.data.retjson) {
790
+ this.treeField = this.data.retjson.header[0].prop;
791
+ }
792
+ },
793
+ props: {
794
+ //表格ID
795
+ id: {
796
+ type: String,
797
+ required: true,
798
+ },
799
+ //表格数据源
800
+ data: {
801
+ type: Object,
802
+ required: true,
803
+ },
804
+ //序号width
805
+ req: {
806
+ type: [Number, String],
807
+ default: 60,
808
+ },
809
+ //表格类型，默认default为普通表格、tree为树表
810
+ tableType: {
811
+ type: String,
812
+ default: "default",
813
+ },
814
+ //是否显示单选框
815
+ radio: {
816
+ type: Boolean,
817
+ default: false,
818
+ },
819
+ //是否显示复选框
820
+ checkbox: {
821
+ type: Boolean,
822
+ default: false,
823
+ },
824
+ //操作列配置
825
+ handlerConfig: {
826
+ type: Object,
827
+ default: () => {
828
+ return {
829
+ show: false,
830
+ width: 250,
831
+ align: "center",
832
+ fixed: "right",
833
+ btnGroup: true,
834
+ };
835
+ },
836
+ },
837
+ //是否显示表尾
838
+ isFooter: {
839
+ type: Boolean,
840
+ default: false,
841
+ },
842
+ //表尾显示项控制
843
+ footConfig: {
844
+ type: Object,
845
+ default: () => {
846
+ return {
847
+ filed: [],
848
+ };
849
+ },
850
+ },
851
+ //树 or 树表控制项
852
+ treeTypeConfig: {
853
+ type: Object,
854
+ default: () => {
855
+ return {
856
+ colType: "checkbox",
857
+ type: "tree",
858
+ checkbox: true,
859
+ line: true,
860
+ expandAll: false,
861
+ checkRowKeys: [],
862
+ };
863
+ },
864
+ },
865
+ treeLazy: {
866
+ type: Boolean,
867
+ default: true,
868
+ },
869
+ //加载动画
870
+ loading: {
871
+ type: Boolean,
872
+ default: false,
873
+ },
874
+ //显示、隐藏列开关
875
+ isTool: {
876
+ type: Boolean,
877
+ default: false,
878
+ },
879
+ //行样式控制函数
880
+ rowStyle: {
881
+ type: Function,
882
+ },
883
+ //单元格样式控制函数
884
+ cellStyle: {
885
+ type: Function,
886
+ },
887
+ //分组表格是否开启连线模式
888
+ groupLine: {
889
+ type: Boolean,
890
+ default: false,
891
+ },
892
+ //合并行和列函数
893
+ spanMethod: {
894
+ type: Function,
895
+ },
896
+ //斑马线开关
897
+ stripe: {
898
+ type: Boolean,
899
+ default: false,
900
+ },
901
+ //表格最大高度
902
+ maxHeight: {
903
+ type: [String, Number],
904
+ default: 0,
905
+ },
906
+ //分组表格是否默认展开所有
907
+ groupExpandAll: {
908
+ type: Boolean,
909
+ default: false,
910
+ },
911
+ //表格边线
912
+ border: {
913
+ type: String,
914
+ default: "full",
915
+ },
916
+ //树、树表是否禁用非最后一级
917
+ isParent: {
918
+ type: Boolean,
919
+ default: true,
920
+ },
921
+ //是否开启序号
922
+ isSeq: {
923
+ type: Boolean,
924
+ default: true,
925
+ },
926
+ //分组表格默认展开所有
927
+ isExpand: {
928
+ type: Boolean,
929
+ default: true,
930
+ },
931
+ //前端滚动分页加载
932
+ isPage: {
933
+ type: Boolean,
934
+ default: false,
935
+ },
936
+ //表头是否换行
937
+ isWrap: {
938
+ type: Boolean,
939
+ default: false,
940
+ },
941
+ //单元格自定义组件events
942
+ cellRenderMethods: {
943
+ type: Object,
944
+ default: () => ({
945
+ parentRow: Object,
946
+ radioChange: () => {},
947
+ checkBoxChange: () => {}
948
+ }),
949
+ },
950
+ //展开行配置
951
+ expandConfig: {
952
+ type: Object,
953
+ default: () => ({
954
+ isOpen: false,
955
+ width: 120,
956
+ text: "",
957
+ accordion: true, //手风琴模式
958
+ loadMethod: () => {},
959
+ }),
960
+ },
961
+ //树手风琴开关
962
+ treeAccordion: {
963
+ type: Boolean,
964
+ default: false,
965
+ },
966
+ },
967
+ data() {
968
+ return {
969
+ tableData: this.data.DataArray, //表格数据
970
+ colNum: 0, //当前列的数量
971
+ leftCol: 0, //从左起计算合并列的基数
972
+ //分组表格的配置
973
+ groupConfig: {
974
+ children: "children",
975
+ iconOpen: "jtIcon iconwenjianjia1 jt-iconOpen1",
976
+ iconClose: "jtIcon iconwenjianjia jt-iconClose1",
977
+ expandAll: this.groupExpandAll,
978
+ line: this.groupLine,
979
+ },
980
+ //树 or 树表 配置
981
+ treeConfig: {
982
+ lazy: this.treeLazy,
983
+ children: "children",
984
+ expandAll: this.treeTypeConfig.expandAll,
985
+ hasChild: "path",
986
+ iconOpen: "jtIcon iconjianshao jt-iconOpen",
987
+ iconClose: "jtIcon iconjia1 jt-iconClose",
988
+ loadMethod: this.loadChildrenMethod,
989
+ line: this.treeTypeConfig.line,
990
+ accordion: this.treeAccordion,
991
+ },
992
+ treeField: "", //分组列的字段
993
+ timeOut: null, //滚动翻页定时器Id
994
+ pageIndex: 1,
995
+ sp: 0, //当前滚动的位置
996
+ tPageIndex: 1, //树表分页当前页数
997
+ tDataCopy: [], //树表分页数据拷贝
998
+ pageTotal: 0,
999
+ dataTotal: 0,
1000
+ dataTreeObj: {},
1001
+ treeTempData: []
1002
+ };
1003
+ },
1004
+ methods: {
1005
+ btnHover(color){
1006
+ return {
1007
+ backgroundColor:color ? color : '',
1008
+ "--background-color-hover":color ? color + 'B3' : '#EAF5FE' + 'B3'
1009
+ }
1010
+ },
1011
+ //指定位置插入数据
1012
+ insertAt(records, row) {
1013
+ this.$refs[this.id].insertAt(records, row);
1014
+ },
1015
+ //加载数据
1016
+ loadData(data) {
1017
+ return this.$refs[this.id].loadData(data);
1018
+ },
1019
+ //根据类型返回筛选框源数据
1020
+ filterData(type) {
1021
+ switch (type) {
1022
+ case "FilterInput":
1023
+ return [{ data: "" }];
1024
+ case "FilterContent":
1025
+ return [{ data: { vals: [], sVal: "" } }];
1026
+ case "FilterExcel":
1027
+ return [
1028
+ {
1029
+ data: {
1030
+ f1Type: "1",
1031
+ f1Val: "",
1032
+ fMode: "and",
1033
+ f2Type: "1",
1034
+ f2Val: "",
1035
+ },
1036
+ },
1037
+ ];
1038
+ case "FilterComplex":
1039
+ return [
1040
+ { data: { type: "eq", value: "" } },
1041
+ { data: { type: "eq", value: "" } },
1042
+ ];
1043
+ }
1044
+ },
1045
+ //单元格自定义渲染根据类型返回配置
1046
+ cellRenderData(type) {
1047
+ switch (type) {
1048
+ case "TabsBtn":
1049
+ return {
1050
+ name: "TabsBtn",
1051
+ events: { radioChange: this.cellRenderMethods.radioChange },
1052
+ parentRow: this.cellRenderMethods?.parentRow,
1053
+ };
1054
+ case "TabsCheckbox":
1055
+ return {
1056
+ name:'TabsCheckbox',
1057
+ events:{checkboxChange:this.cellRenderMethods.checkboxChange},
1058
+ parentRow: this.cellRenderMethods?.parentRow,
1059
+ }
1060
+ }
1061
+ },
1062
+ //枚举转换
1063
+ formatEnum({ column, cellValue }) {
1064
+ try {
1065
+ let data = this.data.retjson.header.find(
1066
+ (item) => item.prop == column.property
1067
+ );
1068
+ if (data && "html" in data && "htmlType" in data) {
1069
+ if (data.htmlType == "icon") {
1070
+ if (Array.isArray(cellValue)) {
1071
+ let str = "";
1072
+ cellValue.forEach((i) => {
1073
+ let item = data.html.find((im) => {
1074
+ return im.value == i;
1075
+ });
1076
+ if (item) {
1077
+ str += `<span
912
1078
  class="jtIcon ${item.icon}" style="
913
1079
  color:${item.color};
914
1080
  font-size:${item.size}px;
915
- margin-right:${item.margin || '8'}px"
1081
+ margin-right:${item.margin || "8"}px"
916
1082
  onclick="iconItem(${i})"
917
- ></span>`
918
- }
919
- })
920
- return str ? str : cellValue
921
- }else{
922
- let item = data.html.find(item => item.value == cellValue);
923
- return item ? `<span class="jtIcon ${item.icon}" style="color:${item.color};font-size:${item.size}px"></span>` : cellValue
924
- }
925
-
926
- }else if(data.htmlType == 'a'){
927
- let item = data.html.find(item => item.value == cellValue);
928
- return item ?`<a href="javascript:">${cellValue}</a>` : cellValue
1083
+ ></span>`;
929
1084
  }
930
- }else if(data && "enum" in data){
931
- let item = data.enum.find(item => item.value == cellValue)
932
- return item ? item.label : cellValue
933
- }else{
934
- return cellValue;
935
- }
936
- } catch (error) {
937
- console.log(error)
938
- return cellValue;
1085
+ });
1086
+ return str ? str : cellValue;
1087
+ } else {
1088
+ let item = data.html.find((item) => item.value == cellValue);
1089
+ return item
1090
+ ? `<span class="jtIcon ${item.icon}" style="color:${item.color};font-size:${item.size}px"></span>`
1091
+ : cellValue;
939
1092
  }
940
- },
941
- //全局排序自定义排序方法
942
- sortMethod({ data, column, property, order }){
943
- let data1 = data.filter(item => {
944
- return property in item;
945
- })
946
- let data2 = data.filter(item => {
947
- return !(property in item);
948
- })
949
- let list = [];
950
- if (order === 'asc' || order === 'desc') {
951
- list = data1.sort((a,b)=>{
952
- return a[property]-b[property];
953
- });
954
- }
955
- if (order === 'desc') {
956
- list.reverse()
957
- }
958
- return list.concat(data2);
959
- },
960
- //筛选列默认禁用处理
961
- checkColumnMethod({column}){
962
- if(column.width == 0 || column.title == '序号'){
963
- return false
964
- }
965
- return true
966
- },
967
- //表尾统计，（计算平均值和求和）
968
- footerMethod({ columns, data }){
969
- const means = []
970
- const sums = []
971
- columns.forEach((column, columnIndex) => {
972
- if (columnIndex === 0) {
973
- means.push('平均')
974
- sums.push('求和')
975
- } else {
976
- let meanCell = null
977
- let sumCell = null
978
- this.footConfig.filed.forEach(i => {
979
- switch (column.property) {
980
- case i:
981
- meanCell = parseInt(XEUtils.mean(data, column.property))
982
- sumCell = XEUtils.sum(data, column.property)
983
- break
984
- }
985
- })
986
-
987
- means.push(meanCell)
988
- sums.push(sumCell)
989
- }
990
- })
991
- return [ means, sums ]
992
- },
993
- //表尾单元格合并
994
- footerColspanMethod({ rowIndex, columnIndex }){
995
- if(columnIndex === 0 && this.checkbox){
996
- return {
997
- rowspan: 1,
998
- colspan: 2
999
- }
1000
- }
1001
- if(columnIndex === 1 && this.checkbox){
1002
- return {
1003
- rowspan: 1,
1004
- colspan: 0
1005
- }
1006
- }
1007
- },
1008
- //表尾单元格样式控制
1009
- footerCellClassName ({ $rowIndex, column, columnIndex }) {
1010
- if (columnIndex === 0) {
1011
- if ($rowIndex === 0) {
1012
- return 'jt-table-col-green'
1013
- } else {
1014
- return 'jt-table-col-red'
1015
- }
1016
- }
1017
- },
1018
- //树编辑禁用回调
1019
- activeCellMethod({column}){
1020
- let data = this.data.retjson.header.find(item => item.prop === column.property)
1021
- if(data.edit.name){
1022
- return true;
1023
- }
1024
- return false;
1025
- },
1026
- //展开行权限控制
1027
- visibleMethod({column,row}){
1028
- if(row.isExpand === '1'){
1029
- return true
1030
- }else{
1031
- return false
1032
- }
1033
- },
1034
- //展开行展开收起
1035
- toggleMethod({ expanded,row }){
1036
- if(expanded){
1037
- return true
1038
- }else{
1039
- this.$refs[this.id].clearRowExpandLoaded(row);
1040
- return false
1041
- }
1042
- },
1043
- //扩展单元格样式
1044
- cellStyle_m(param){
1045
- let cssObj = {}
1046
- if(param.row._rowcss == 'css0'){
1047
- cssObj = {color:'#000'}
1048
- }else if(param.row._rowcss == 'css1'){
1049
- cssObj = {color:'#1E90FF'}
1050
- }else if(param.row._rowcss == 'css2'){
1051
- cssObj = {color:'#FF8C00'}
1052
- }else if(param.row._rowcss == 'css3'){
1053
- cssObj = {color:' #FF0000'}
1054
- }
1055
- if(this.cellStyle){
1056
- return Object.assign(cssObj,this.cellStyle(param));
1057
- }else{
1058
- return cssObj;
1059
- }
1060
- },
1061
- //滚动到底事件派发
1062
- scroll(param){
1063
- let {scrollTop,$event} = param;
1064
- clearTimeout(this.timeOut);
1065
- this.timeOut = setTimeout(()=>{
1066
- let ch = $event.target.clientHeight;
1067
- let sh = $event.target.scrollHeight;
1068
- if(scrollTop + ch >= sh){
1069
- this.$emit('scrollBottom',++this.pageIndex);
1070
- }
1071
- },200)
1072
- },
1073
- //checkbox改变事件派发
1074
- selectChangeEvent({records}){
1075
- this.$emit('checkbox',records);
1076
- },
1077
- //单选改变事件派发
1078
- radioSelectChangeEvent({row}){
1079
- this.$emit('radio',row);
1080
- },
1081
- //单元格点击事件派发，返回当前行的数据
1082
- cellClickEvent({row , column}){
1083
- let treePath = [];
1084
- if(this.tableType === 'tree'){
1085
- const result = XEUtils.findTree(this.data.DataArray,
1086
- item=>{
1087
- return item.pkid === row.pkid
1088
- },
1089
- {children: 'children'});
1090
- if(result){
1091
- treePath = result.nodes.map(item => item.name);
1092
- }
1093
- this.$emit('cellClick',row,treePath,column);
1094
- }else{
1095
- this.$emit('cellClick',row,column);
1096
- }
1097
- },
1098
- //回车事件派发
1099
- keyEnter({$event}){
1100
- if($event.keyCode === 13){
1101
- this.$emit('enter',this.getEditData());
1102
- };
1103
- },
1104
- //获取编辑过的数据
1105
- getEditData(){
1106
- const {updateRecords} = this.$refs[this.id].getRecordset();
1107
- return updateRecords;
1108
- },
1109
- //展开行说明文字显示控制
1110
- isExpandText(row){
1111
- if(row.isExpand === '1'){
1112
- return true
1113
- }else{
1114
- return false
1115
- }
1116
- },
1117
- //导出数据
1118
- exportTableData(){
1119
- this.$refs[this.id].openExport({ isPrint: false });
1120
- },
1121
- //导入数据
1122
- importTableData(){
1123
- this.$refs[this.id].importData()
1124
- },
1125
- //操作列点击事件派发
1126
- handlerColClick(value,row,rowIndex){
1127
- this.$emit('handlerClick',value,row,rowIndex);
1128
- },
1129
- //普通表格转树表（仅支持一层）
1130
- default2tree(data,field){
1131
- const result = []
1132
- this.treeField = this.data.retjson.header[0].prop;
1133
- XEUtils.each(XEUtils.groupBy(data, field), (childs, key) => {
1134
- result.push({
1135
- [this.treeField]: key + `（ ${childs.length} ）`,
1136
- children: childs
1137
- })
1138
- })
1139
- this.data.DataArray = result;
1140
- if(this.isExpand){
1141
- this.$nextTick(()=>{
1142
- this.setAllTreeExpand();
1143
- });
1144
- }
1145
- },
1146
- //树展开所有节点
1147
- setAllTreeExpand(){
1148
- this.$refs[this.id].setAllTreeExpand(true);
1149
- },
1150
- //树、树表判断不是文件夹的不能有新增按钮
1151
- isShowAddButton(p1,p2){
1152
- if(p1){
1153
- return true
1154
- }else{
1155
- if(p2 === '新增'){
1156
- return false
1157
- }else{
1158
- return true
1159
- }
1160
- }
1161
- },
1162
- rowClassName({ row, rowIndex }){
1163
- if('children' in row){
1164
- return 'f-col'
1165
- }
1166
- },
1167
- gcellClassName({row, column}){
1168
- if('children' in row && column.title == '操作'){
1169
- return 'h-col'
1170
- }
1171
- },
1172
- //树表checkbox改变事件派发，过滤有子集的数据
1173
- treeSelectChangeEvent({records,indeterminates}){
1174
- const temp = records.filter(item => !item.children)
1175
- this.$emit('treeCheckbox',temp);
1176
- this.$emit('treeCheckboxAll',[...records,...indeterminates]);
1177
- },
1178
- //树 非最后一级禁用
1179
- treeRadioMethod({row}){
1180
- if(this.isParent){
1181
- return true;
1182
- }else{
1183
- return !row.path
1184
- }
1185
- },
1186
- checCheckboxkMethod2({ row }){
1187
- if(this.isParent){
1188
- return true
1189
- }else{
1190
- return row.children.length === 0
1191
- }
1192
- },
1193
- //树 checkbox改变事件派发，过滤有子集的数据
1194
- treeCheckChange({records,indeterminates}){
1195
- const temp = records.filter(item => !item.path);
1196
- this.$emit('treeCheckbox',temp);
1197
- this.$emit('treeCheckboxAll',[...records,...indeterminates]);
1198
- },
1199
- //树表滚动分页+性能优化
1200
- scroll1(param){
1201
- let {scrollTop,$event} = param;
1202
- clearTimeout(this.timeOut);
1203
- this.timeOut = setTimeout(()=>{
1204
- let ch = $event.target.clientHeight;
1205
- let sh = $event.target.scrollHeight;
1206
- let temp = scrollTop - this.sp;
1207
- this.sp = scrollTop;
1208
- if(temp < 0 && scrollTop <= 0){
1209
- if(this.tPageIndex > 1){
1210
- this.tPageIndex--;
1211
- this.dataSliceUp(this.tPageIndex);
1212
- this.$refs[this.id].scrollTo(null,(sh-ch) / 2);
1213
- }
1214
- }else if(temp >= 0 && scrollTop + ch >= sh){
1215
- if(this.tPageIndex < this.pageTotal){
1216
- this.tPageIndex++;
1217
- this.dataSliceDown(this.tPageIndex);
1218
- this.$refs[this.id].scrollTo(null,(sh-ch) / 2);
1219
- }
1220
- }
1221
- },200)
1222
- },
1223
- dataSliceUp(idx){
1224
- this.data.DataArray = this.dataTreeObj[idx-1].concat(this.dataTreeObj[idx]);
1225
- },
1226
- dataSliceDown(idx){
1227
- this.data.DataArray = this.dataTreeObj[idx].concat(this.dataTreeObj[idx+1]);
1228
- },
1229
- //树 懒加载方法
1230
- async loadChildrenMethod({ row }){
1231
- const { data } = await this.$axios.post(this.treeTypeConfig.path + row.path);
1232
- return new Promise((resolve) => {
1233
- if(data[0].Result>0){
1234
- resolve(data[0].DataArray)
1235
- }else{
1236
- const tempObj = {};
1237
- data[0].retjson.header.forEach((item,index)=>{
1238
- if(index === 0){
1239
- tempObj[item.prop] = '无数据'
1240
- }else{
1241
- tempObj[item.prop] = ''
1242
- }
1243
- })
1244
- resolve([tempObj]);
1245
- }
1246
- })
1247
- },
1248
- //表格组件实例
1249
- jtTable(){
1250
- return this.$refs[this.id];
1251
- },
1252
- //树更新字节点，懒加载
1253
- reloadTreeChilds(row){
1254
- this.$refs[this.id].reloadTreeChilds(row);
1255
- },
1256
- //重载行数据
1257
- reloadRow(row){
1258
- this.$refs[this.id].reloadRow(row);
1259
- },
1260
- //树点击图标和文字事件
1261
- treeTxtClick(row){
1262
- let treePath = [];
1263
- const result = XEUtils.findTree(this.data.DataArray,
1264
- item=>{
1265
- return item.pkid === row.pkid
1266
- },
1267
- {children: 'children'});
1268
- if(result){
1269
- treePath = result.nodes.map(item => item.name);
1270
- }
1271
- this.$emit('treeTxtClick',row,treePath);
1272
- },
1273
- //初始化隐藏列
1274
- hideColumn(arr){
1275
- this.$nextTick(()=>{
1276
- arr.forEach(item=>{
1277
- let col = this.$refs[this.id].getColumnByField(item);
1278
- this.$refs[this.id].hideColumn(col);
1279
- })
1280
- })
1281
- },
1282
- //树判断行是否展开
1283
- isTreeExpandByRow(row){
1284
- return this.$refs[this.id].isTreeExpandByRow(row);
1285
- },
1286
- //树清空所有节点
1287
- clearTreeExpand(){
1288
- this.$refs[this.id].clearTreeExpand();
1289
- },
1290
- //设置表格选中
1291
- setCheckboxRow(ary,status=true){
1292
- this.$refs[this.id].setCheckboxRow(ary,status);
1293
- },
1294
- //清空所有选中
1295
- clearCheckboxRow(){
1296
- this.$refs[this.id].clearCheckboxRow();
1297
- },
1298
- //切换选中状态
1299
- toggleCheckboxRow(row){
1300
- this.$refs[this.id].toggleCheckboxRow(row);
1301
- },
1302
- //树删除数据方法
1303
- treeDelete(id){
1304
- let matchObj = XEUtils.findTree(this.data.DataArray, item => {
1305
- return item.pkid === id}, {
1306
- children: 'children'
1307
- })
1308
- if (matchObj) {
1309
- let { items, index } = matchObj
1310
- items.splice(index, 1);
1311
- }
1312
- this.$refs[this.id].syncData();
1313
- },
1314
- //获取树的信息
1315
- getTreeData(id){
1316
- let matchObj = XEUtils.findTree(this.data.DataArray, item => {
1317
- return item.pkid == id}, {
1318
- children: 'children'
1319
- })
1320
- if(matchObj){
1321
- return {key:'ok',data:matchObj.item};
1322
- }else{
1323
- return {key:'notFind'};
1324
- }
1325
- },
1326
- //树添加数据方法
1327
- treeAdd(id,obj){
1328
- let xTree = this.$refs[this.id];
1329
- xTree.createRow(obj).then(newRow => {
1330
- let matchObj = XEUtils.findTree(this.data.DataArray, item => {
1331
- return item.pkid === id}, {
1332
- children: 'children'
1333
- })
1334
- if (matchObj) {
1335
- matchObj.item.children.splice(matchObj.index, 0, newRow);
1336
- xTree.syncData()
1337
- }
1338
- })
1339
- },
1340
- syncData(){
1341
- this.$refs[this.id].syncData();
1342
- },
1093
+ } else if (data.htmlType == "a") {
1094
+ let item = data.html.find((item) => item.value == cellValue);
1095
+ return item ? `<a href="javascript:">${cellValue}</a>` : cellValue;
1096
+ }
1097
+ } else if (data && "enum" in data) {
1098
+ let item = data.enum.find((item) => item.value == cellValue);
1099
+ return item ? item.label : cellValue;
1100
+ } else {
1101
+ return cellValue;
1343
1102
  }
1344
- }
1103
+ } catch (error) {
1104
+ console.log(error);
1105
+ return cellValue;
1106
+ }
1107
+ },
1108
+ //全局排序自定义排序方法
1109
+ sortMethod({ data, column, property, order }) {
1110
+ let data1 = data.filter((item) => {
1111
+ return property in item;
1112
+ });
1113
+ let data2 = data.filter((item) => {
1114
+ return !(property in item);
1115
+ });
1116
+ let list = [];
1117
+ if (order === "asc" || order === "desc") {
1118
+ list = data1.sort((a, b) => {
1119
+ return a[property] - b[property];
1120
+ });
1121
+ }
1122
+ if (order === "desc") {
1123
+ list.reverse();
1124
+ }
1125
+ return list.concat(data2);
1126
+ },
1127
+ //筛选列默认禁用处理
1128
+ checkColumnMethod({ column }) {
1129
+ if (column.width == 0 || column.title == "序号") {
1130
+ return false;
1131
+ }
1132
+ return true;
1133
+ },
1134
+ //表尾统计，（计算平均值和求和）
1135
+ footerMethod({ columns, data }) {
1136
+ const means = [];
1137
+ const sums = [];
1138
+ columns.forEach((column, columnIndex) => {
1139
+ if (columnIndex === 0) {
1140
+ means.push("平均");
1141
+ sums.push("求和");
1142
+ } else {
1143
+ let meanCell = null;
1144
+ let sumCell = null;
1145
+ this.footConfig.filed.forEach((i) => {
1146
+ switch (column.property) {
1147
+ case i:
1148
+ meanCell = parseInt(XEUtils.mean(data, column.property));
1149
+ sumCell = XEUtils.sum(data, column.property);
1150
+ break;
1151
+ }
1152
+ });
1153
+
1154
+ means.push(meanCell);
1155
+ sums.push(sumCell);
1156
+ }
1157
+ });
1158
+ return [means, sums];
1159
+ },
1160
+ //表尾单元格合并
1161
+ footerColspanMethod({ rowIndex, columnIndex }) {
1162
+ if (columnIndex === 0 && this.checkbox) {
1163
+ return {
1164
+ rowspan: 1,
1165
+ colspan: 2,
1166
+ };
1167
+ }
1168
+ if (columnIndex === 1 && this.checkbox) {
1169
+ return {
1170
+ rowspan: 1,
1171
+ colspan: 0,
1172
+ };
1173
+ }
1174
+ },
1175
+ //表尾单元格样式控制
1176
+ footerCellClassName({ $rowIndex, column, columnIndex }) {
1177
+ if (columnIndex === 0) {
1178
+ if ($rowIndex === 0) {
1179
+ return "jt-table-col-green";
1180
+ } else {
1181
+ return "jt-table-col-red";
1182
+ }
1183
+ }
1184
+ },
1185
+ //树编辑禁用回调
1186
+ activeCellMethod({ column }) {
1187
+ let data = this.data.retjson.header.find(
1188
+ (item) => item.prop === column.property
1189
+ );
1190
+ if (data.edit.name) {
1191
+ return true;
1192
+ }
1193
+ return false;
1194
+ },
1195
+ //展开行权限控制
1196
+ visibleMethod({ column, row }) {
1197
+ if (row.isExpand === "1") {
1198
+ return true;
1199
+ } else {
1200
+ return false;
1201
+ }
1202
+ },
1203
+ //展开行展开收起
1204
+ toggleMethod({ expanded, row }) {
1205
+ if (expanded) {
1206
+ return true;
1207
+ } else {
1208
+ this.$refs[this.id].clearRowExpandLoaded(row);
1209
+ return false;
1210
+ }
1211
+ },
1212
+ //扩展单元格样式
1213
+ cellStyle_m(param) {
1214
+ let cssObj = {};
1215
+ if (param.row._rowcss == "css0") {
1216
+ cssObj = { color: "#000" };
1217
+ } else if (param.row._rowcss == "css1") {
1218
+ cssObj = { color: "#1E90FF" };
1219
+ } else if (param.row._rowcss == "css2") {
1220
+ cssObj = { color: "#FF8C00" };
1221
+ } else if (param.row._rowcss == "css3") {
1222
+ cssObj = { color: " #FF0000" };
1223
+ }
1224
+ if (this.cellStyle) {
1225
+ return Object.assign(cssObj, this.cellStyle(param));
1226
+ } else {
1227
+ return cssObj;
1228
+ }
1229
+ },
1230
+ //滚动到底事件派发
1231
+ scroll(param) {
1232
+ let { scrollTop, $event } = param;
1233
+ clearTimeout(this.timeOut);
1234
+ this.timeOut = setTimeout(() => {
1235
+ let ch = $event.target.clientHeight;
1236
+ let sh = $event.target.scrollHeight;
1237
+ if (scrollTop + ch >= sh) {
1238
+ this.$emit("scrollBottom", ++this.pageIndex);
1239
+ }
1240
+ }, 200);
1241
+ },
1242
+ //checkbox改变事件派发
1243
+ selectChangeEvent({ records }) {
1244
+ this.$emit("checkbox", records);
1245
+ },
1246
+ //单选改变事件派发
1247
+ radioSelectChangeEvent({ row }) {
1248
+ this.$emit("radio", row);
1249
+ },
1250
+ //单元格点击事件派发，返回当前行的数据
1251
+ cellClickEvent({ row, column }) {
1252
+ let treePath = [];
1253
+ if (this.tableType === "tree") {
1254
+ const result = XEUtils.findTree(
1255
+ this.data.DataArray,
1256
+ (item) => {
1257
+ return item.pkid === row.pkid;
1258
+ },
1259
+ { children: "children" }
1260
+ );
1261
+ if (result) {
1262
+ treePath = result.nodes.map((item) => item.name);
1263
+ }
1264
+ this.$emit("cellClick", row, treePath, column);
1265
+ } else {
1266
+ this.$emit("cellClick", row, column);
1267
+ }
1268
+ },
1269
+ //回车事件派发
1270
+ keyEnter({ $event }) {
1271
+ if ($event.keyCode === 13) {
1272
+ this.$emit("enter", this.getEditData());
1273
+ }
1274
+ },
1275
+ //获取编辑过的数据
1276
+ getEditData() {
1277
+ const { updateRecords } = this.$refs[this.id].getRecordset();
1278
+ return updateRecords;
1279
+ },
1280
+ //展开行说明文字显示控制
1281
+ isExpandText(row) {
1282
+ if (row.isExpand === "1") {
1283
+ return true;
1284
+ } else {
1285
+ return false;
1286
+ }
1287
+ },
1288
+ //导出数据
1289
+ exportTableData() {
1290
+ this.$refs[this.id].openExport({ isPrint: false });
1291
+ },
1292
+ //导入数据
1293
+ importTableData() {
1294
+ this.$refs[this.id].importData();
1295
+ },
1296
+ //操作列点击事件派发
1297
+ handlerColClick(value, row, rowIndex) {
1298
+ //检索
1299
+ if(value === 'stcd_search'){
1300
+ this.$set(row, "activeValue", value);
1301
+ }
1302
+ //刷新
1303
+ if(value === 'reflash'){
1304
+ this.reloadTreeChilds(row);
1305
+ };
1306
+ this.$emit("handlerClick", value, row, rowIndex);
1307
+ },
1308
+ //普通表格转树表（仅支持一层）
1309
+ default2tree(data, field) {
1310
+ const result = [];
1311
+ this.treeField = this.data.retjson.header[0].prop;
1312
+ XEUtils.each(XEUtils.groupBy(data, field), (childs, key) => {
1313
+ result.push({
1314
+ [this.treeField]: key + `（ ${childs.length} ）`,
1315
+ children: childs,
1316
+ });
1317
+ });
1318
+ this.data.DataArray = result;
1319
+ if (this.isExpand) {
1320
+ this.$nextTick(() => {
1321
+ this.setAllTreeExpand();
1322
+ });
1323
+ }
1324
+ },
1325
+ //树展开所有节点
1326
+ setAllTreeExpand() {
1327
+ this.$refs[this.id].setAllTreeExpand(true);
1328
+ },
1329
+ //树、树表判断不是文件夹的不能有新增按钮
1330
+ isShowAddButton(p1, p2) {
1331
+ if (p1) {
1332
+ return true;
1333
+ } else {
1334
+ if (p2 === "新增") {
1335
+ return false;
1336
+ } else {
1337
+ return true;
1338
+ }
1339
+ }
1340
+ },
1341
+ rowClassName({ row, rowIndex }) {
1342
+ if ("children" in row) {
1343
+ return "f-col";
1344
+ }
1345
+ },
1346
+ gcellClassName({ row, column }) {
1347
+ if ("children" in row && column.title == "操作") {
1348
+ return "h-col";
1349
+ }
1350
+ },
1351
+ //树表checkbox改变事件派发，过滤有子集的数据
1352
+ treeSelectChangeEvent({ records, indeterminates }) {
1353
+ const temp = records.filter((item) => !item.children);
1354
+ this.$emit("treeCheckbox", temp);
1355
+ this.$emit("treeCheckboxAll", [...records, ...indeterminates]);
1356
+ },
1357
+ //树 非最后一级禁用
1358
+ treeRadioMethod({ row }) {
1359
+ if (this.isParent) {
1360
+ return true;
1361
+ } else {
1362
+ return !row.path;
1363
+ }
1364
+ },
1365
+ checCheckboxkMethod2({ row }) {
1366
+ if (this.isParent) {
1367
+ return true;
1368
+ } else {
1369
+ return row.children.length === 0;
1370
+ }
1371
+ },
1372
+ //树 checkbox改变事件派发，过滤有子集的数据
1373
+ treeCheckChange({ records, indeterminates }) {
1374
+ const temp = records.filter((item) => !item.path);
1375
+ this.$emit("treeCheckbox", temp);
1376
+ this.$emit("treeCheckboxAll", [...records, ...indeterminates]);
1377
+ },
1378
+ //树表滚动分页+性能优化
1379
+ scroll1(param) {
1380
+ let { scrollTop, $event } = param;
1381
+ clearTimeout(this.timeOut);
1382
+ this.timeOut = setTimeout(() => {
1383
+ let ch = $event.target.clientHeight;
1384
+ let sh = $event.target.scrollHeight;
1385
+ let temp = scrollTop - this.sp;
1386
+ this.sp = scrollTop;
1387
+ if (temp < 0 && scrollTop <= 0) {
1388
+ if (this.tPageIndex > 1) {
1389
+ this.tPageIndex--;
1390
+ this.dataSliceUp(this.tPageIndex);
1391
+ this.$refs[this.id].scrollTo(null, (sh - ch) / 2);
1392
+ }
1393
+ } else if (temp >= 0 && scrollTop + ch >= sh) {
1394
+ if (this.tPageIndex < this.pageTotal) {
1395
+ this.tPageIndex++;
1396
+ this.dataSliceDown(this.tPageIndex);
1397
+ this.$refs[this.id].scrollTo(null, (sh - ch) / 2);
1398
+ }
1399
+ }
1400
+ }, 200);
1401
+ },
1402
+ dataSliceUp(idx) {
1403
+ this.data.DataArray = this.dataTreeObj[idx - 1].concat(
1404
+ this.dataTreeObj[idx]
1405
+ );
1406
+ },
1407
+ dataSliceDown(idx) {
1408
+ this.data.DataArray = this.dataTreeObj[idx].concat(
1409
+ this.dataTreeObj[idx + 1]
1410
+ );
1411
+ },
1412
+ // async loadChildrenMethod({ row }){
1413
+ // const { data } = await this.$axios.post(this.treeTypeConfig.path + row.path);
1414
+ // return new Promise((resolve) => {
1415
+ // if(data[0].Result>0){
1416
+ // resolve(data[0].DataArray)
1417
+ // }else{
1418
+ // const tempObj = {};
1419
+ // data[0].retjson.header.forEach((item,index)=>{
1420
+ // if(index === 0){
1421
+ // tempObj[item.prop] = '无数据'
1422
+ // }else{
1423
+ // tempObj[item.prop] = ''
1424
+ // }
1425
+ // })
1426
+ // resolve([tempObj]);
1427
+ // }
1428
+ // })
1429
+ // },
1430
+ //树 懒加载方法
1431
+ loadChildrenMethod({ row }) {
1432
+ return new Promise(async (resolve) => {
1433
+ if (row && row.activeValue && row.activeValue.indexOf("search") !== -1 ) {
1434
+ resolve(this.treeTempData);
1435
+ } else {
1436
+ const { data } = await this.$axios.post(
1437
+ this.treeTypeConfig.path + row.path
1438
+ );
1439
+ if (data[0].Result > 0) {
1440
+ resolve(data[0].DataArray);
1441
+ } else {
1442
+ const tempObj = {};
1443
+ data[0].retjson.header.forEach((item, index) => {
1444
+ if (index === 0) {
1445
+ tempObj[item.prop] = "无数据";
1446
+ } else {
1447
+ tempObj[item.prop] = "";
1448
+ }
1449
+ });
1450
+ resolve([tempObj]);
1451
+ }
1452
+ }
1453
+ });
1454
+ },
1455
+ setTreeTempData(data) {
1456
+ return new Promise((resolve) => {
1457
+ this.treeTempData = data;
1458
+ setTimeout(() => {
1459
+ resolve();
1460
+ }, 0);
1461
+ });
1462
+ },
1463
+ //表格组件实例
1464
+ jtTable() {
1465
+ return this.$refs[this.id];
1466
+ },
1467
+ //树更新字节点，懒加载
1468
+ reloadTreeChilds(row) {
1469
+ this.$refs[this.id].reloadTreeChilds(row);
1470
+ },
1471
+ //重载行数据
1472
+ reloadRow(row) {
1473
+ this.$refs[this.id].reloadRow(row);
1474
+ },
1475
+ //树点击图标和文字事件
1476
+ treeTxtClick(row) {
1477
+ let treePath = [];
1478
+ const result = XEUtils.findTree(
1479
+ this.data.DataArray,
1480
+ (item) => {
1481
+ return item.pkid === row.pkid;
1482
+ },
1483
+ { children: "children" }
1484
+ );
1485
+ if (result) {
1486
+ treePath = result.nodes.map((item) => item.name);
1487
+ }
1488
+ this.$emit("treeTxtClick", row, treePath);
1489
+ },
1490
+ //初始化隐藏列
1491
+ hideColumn(arr) {
1492
+ this.$nextTick(() => {
1493
+ arr.forEach((item) => {
1494
+ let col = this.$refs[this.id].getColumnByField(item);
1495
+ this.$refs[this.id].hideColumn(col);
1496
+ });
1497
+ });
1498
+ },
1499
+ //树判断行是否展开
1500
+ isTreeExpandByRow(row) {
1501
+ return this.$refs[this.id].isTreeExpandByRow(row);
1502
+ },
1503
+ //树清空所有节点
1504
+ clearTreeExpand() {
1505
+ this.$refs[this.id].clearTreeExpand();
1506
+ },
1507
+ //设置表格选中
1508
+ setCheckboxRow(ary, status = true) {
1509
+ this.$refs[this.id].setCheckboxRow(ary, status);
1510
+ },
1511
+ //清空所有选中
1512
+ clearCheckboxRow() {
1513
+ this.$refs[this.id].clearCheckboxRow();
1514
+ },
1515
+ //切换选中状态
1516
+ toggleCheckboxRow(row) {
1517
+ this.$refs[this.id].toggleCheckboxRow(row);
1518
+ },
1519
+ //树删除数据方法
1520
+ treeDelete(id) {
1521
+ let matchObj = XEUtils.findTree(
1522
+ this.data.DataArray,
1523
+ (item) => {
1524
+ return item.pkid === id;
1525
+ },
1526
+ {
1527
+ children: "children",
1528
+ }
1529
+ );
1530
+ if (matchObj) {
1531
+ let { items, index } = matchObj;
1532
+ items.splice(index, 1);
1533
+ }
1534
+ this.$refs[this.id].syncData();
1535
+ },
1536
+ //获取树的信息
1537
+ getTreeData(id) {
1538
+ let matchObj = XEUtils.findTree(
1539
+ this.data.DataArray,
1540
+ (item) => {
1541
+ return item.pkid == id;
1542
+ },
1543
+ {
1544
+ children: "children",
1545
+ }
1546
+ );
1547
+ if (matchObj) {
1548
+ return { key: "ok", data: matchObj.item };
1549
+ } else {
1550
+ return { key: "notFind" };
1551
+ }
1552
+ },
1553
+ //树添加数据方法
1554
+ treeAdd(id, obj) {
1555
+ let xTree = this.$refs[this.id];
1556
+ xTree.createRow(obj).then((newRow) => {
1557
+ let matchObj = XEUtils.findTree(
1558
+ this.data.DataArray,
1559
+ (item) => {
1560
+ return item.pkid === id;
1561
+ },
1562
+ {
1563
+ children: "children",
1564
+ }
1565
+ );
1566
+ if (matchObj) {
1567
+ matchObj.item.children.splice(matchObj.index, 0, newRow);
1568
+ xTree.syncData();
1569
+ }
1570
+ });
1571
+ },
1572
+ syncData() {
1573
+ this.$refs[this.id].syncData();
1574
+ },
1575
+ },
1576
+ };
1345
1577
  </script>
1346
1578
 
1347
1579
  <style>
1348
- .vxe-table{
1349
- font-size: 12px;
1580
+ .vxe-table {
1581
+ font-size: 12px;
1350
1582
  }
1351
- .jt-iconOpen{
1583
+ .jt-iconOpen {
1352
1584
  position: relative;
1353
- bottom:4px;
1354
- right:2px;
1585
+ bottom: 4px;
1586
+ right: 2px;
1355
1587
  }
1356
- .jt-iconClose{
1588
+ .jt-iconClose {
1357
1589
  position: relative;
1358
- bottom:4px;
1359
- right:2px;
1590
+ bottom: 4px;
1591
+ right: 2px;
1360
1592
  }
1361
- .jt-iconOpen1{
1362
- color:rgb(238, 197, 85) !important;
1593
+ .jt-iconOpen1 {
1594
+ color: rgb(238, 197, 85) !important;
1363
1595
  position: relative;
1364
- bottom:7px;
1365
- right:5px;
1596
+ bottom: 7px;
1597
+ right: 5px;
1366
1598
  }
1367
- .jt-iconClose1{
1368
- color:rgb(238, 197, 85) !important;
1599
+ .jt-iconClose1 {
1600
+ color: rgb(238, 197, 85) !important;
1369
1601
  position: relative;
1370
- bottom:7px;
1371
- right:5px;
1602
+ bottom: 7px;
1603
+ right: 5px;
1372
1604
  }
1373
- .jt-iconOpen2{
1374
- color:rgb(238, 197, 85) !important;
1375
- margin:0 3px;
1605
+ .jt-iconOpen2 {
1606
+ color: rgb(238, 197, 85) !important;
1607
+ margin: 0 3px;
1376
1608
  display: inline-block;
1377
1609
  }
1378
- .jt-iconClose2{
1379
- color:rgb(238, 197, 85) !important;
1380
- margin:0 3px;
1610
+ .jt-iconClose2 {
1611
+ color: rgb(238, 197, 85) !important;
1612
+ margin: 0 3px;
1381
1613
  display: inline-block;
1382
1614
  }
1383
- .jt-iconFile{
1384
- color:rgb(195, 189, 201) !important;
1615
+ .jt-iconFile {
1616
+ color: rgb(195, 189, 201) !important;
1385
1617
  position: relative;
1386
1618
  font-size: 18px;
1387
- top:1px;
1388
- margin-left:5px;
1389
- margin-right:2px;
1619
+ top: 1px;
1620
+ margin-left: 5px;
1621
+ margin-right: 2px;
1390
1622
  display: inline-block;
1391
1623
  }
1392
- .jt-table-col-green{
1624
+ .jt-table-col-green {
1393
1625
  background-color: rgb(125, 240, 177);
1394
1626
  }
1395
- .jt-table-col-red{
1627
+ .jt-table-col-red {
1396
1628
  background-color: rgb(240, 125, 125);
1397
1629
  }
1398
- .ht-icon{
1399
- position:relative;
1400
- right:2px;
1401
- top:1px;
1630
+ .ht-icon {
1631
+ position: relative;
1632
+ right: 2px;
1633
+ top: 1px;
1634
+ }
1635
+ .jt-table-class-only .el-button{
1636
+ background:#EAF5FE;
1637
+ padding:4px 10px;
1402
1638
  }
1403
- .jt-table-class-only .el-button:hover span,
1404
- .jt-table-class-only .el-button:hover i{
1405
- color:rgb(55, 66, 214) !important;
1639
+ .jt-table-class-only .el-button:hover{
1640
+ background-color:var(--background-color-hover) !important;
1406
1641
  }
1407
- .jt-table-class-only .vxe-cell--tree-node{
1642
+ .jt-table-class-only .vxe-cell--tree-node {
1408
1643
  cursor: pointer;
1409
1644
  }
1410
- .jt-toolbar{
1411
- position:absolute !important;
1412
- top:-12px;
1413
- right:-6px;
1414
- z-index:9;
1415
- background:transparent !important;
1645
+ .jt-toolbar {
1646
+ position: absolute !important;
1647
+ top: -12px;
1648
+ right: -6px;
1649
+ z-index: 9;
1650
+ background: transparent !important;
1416
1651
  }
1417
1652
  .jt-toolbar .vxe-custom--wrapper .vxe-button.is--circle,
1418
- .jt-toolbar .is--active .vxe-button.is--circle{
1653
+ .jt-toolbar .is--active .vxe-button.is--circle {
1419
1654
  border-radius: 0 !important;
1420
- border:none !important;
1421
- background:transparent !important;
1655
+ border: none !important;
1656
+ background: transparent !important;
1422
1657
  }
1423
- .jt-toolbar .vxe-button.type--button:not(.is--disabled):focus{
1658
+ .jt-toolbar .vxe-button.type--button:not(.is--disabled):focus {
1424
1659
  box-shadow: none;
1425
- border-color:#dcdfe6;
1660
+ border-color: #dcdfe6;
1426
1661
  background: transparent;
1427
1662
  }
1428
- .jt-toolbar .colStyle{
1663
+ .jt-toolbar .colStyle {
1429
1664
  font-size: 24px;
1430
1665
  position: relative;
1431
- top:0px;
1432
- color:rgb(64, 111, 212);
1433
- opacity: .4;
1666
+ top: 0px;
1667
+ color: rgb(64, 111, 212);
1668
+ opacity: 0.4;
1434
1669
  }
1435
- .jt-toolbar .colStyle:hover{
1436
- color:rgb(125, 143, 224)
1670
+ .jt-toolbar .colStyle:hover {
1671
+ color: rgb(125, 143, 224);
1437
1672
  }
1438
- .isWrap .vxe-header--row .vxe-cell{
1673
+ .isWrap .vxe-header--row .vxe-cell {
1439
1674
  flex-wrap: wrap;
1440
1675
  }
1441
1676
  </style>