@leevan/jtui 2.0.1 → 2.0.4

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