vue2-client 1.14.53 → 1.14.55

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.
@@ -1,1412 +1,1555 @@
1
- <template>
2
- <div v-show="tableColumns.length > 0">
3
- <a-row :gutter="48">
4
- <a-col v-show="showLeftOperaBtn">
5
- <span :style="{ float: 'left', marginBottom: '8px' }">
6
- <a-space>
7
- <!-- <a-button v-if="eventState.customDelete" type="primary" @click="custom('customDelete')">-->
8
- <!-- <a-icon type="delete"/>删除-->
9
- <!-- </a-button>-->
10
- <!-- <a-button v-if="eventState.customSave" type="primary" @click="custom('customSave')">-->
11
- <!-- <a-icon type="save"/>保存-->
12
- <!-- </a-button>-->
13
- <slot name="leftButton" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
14
- <a-button v-if="buttonState.add && buttonRendering('add')" type="primary" @click="add">
15
- <a-icon type="plus"/>新增
16
- </a-button>
17
- <a-button v-if="buttonState.move && buttonRendering('move')" type="primary" @click="move">
18
- <a-icon type="plus"/>添加
19
- </a-button>
20
- <a-button
21
- v-if="buttonState.choose && buttonRendering('choose')"
22
- :disabled="!isChoose"
23
- type="primary"
24
- @click="choose">
25
- <a-icon type="check-square"/>选择
26
- </a-button>
27
- <a-button
28
- v-if="buttonState.edit && buttonRendering('edit')"
29
- :disabled="!isModify"
30
- :loading="editLoading"
31
- class="btn-success"
32
- type="dashed"
33
- @click="edit()">
34
- <a-icon :style="iconStyle" type="form"/>修改
35
- </a-button>
36
- <template
37
- v-if="buttonState.editRow && buttonRendering('editRow')">
38
- <a-button
39
- v-if="isEditMode"
40
- class="ant-btn-hover"
41
- @click="editRowSave">
42
- <a-icon :style="iconStyle" type="save"/>保存
43
- </a-button>
44
- <a-button
45
- v-else
46
- @click="openEditMode">
47
- <a-icon :style="iconStyle" type="edit"/>行编辑
48
- </a-button>
49
- </template>
50
- <a-button
51
- v-if="buttonState.delete && buttonRendering('delete')"
52
- :disabled="!isDelete"
53
- type="danger"
54
- @click="deleteItem">
55
- <a-icon :style="iconStyle" type="delete"/>删除
56
- </a-button>
57
- <a-button
58
- v-if="buttonState.import && buttonRendering('import')"
59
- type="dashed"
60
- @click="importData">
61
- <a-icon :style="iconStyle" type="import"/>导入
62
- </a-button>
63
- <a-dropdown v-if="!buttonState || buttonState.export && buttonRendering('export')">
64
- <a-menu slot="overlay">
65
- <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handleExport('selected')"><a-icon
66
- :style="iconStyle"
67
- type="ordered-list"/>导出选中数据</a-menu-item>
68
- <a-menu-item key="2" @click="handleExport('curPage')"><a-icon :style="iconStyle" type="snippets"/>导出本页数据</a-menu-item>
69
- <a-menu-item key="3" @click="handleExport('exportByQuery')"><a-icon :style="iconStyle" type="download"/>导出所有符合条件的数据</a-menu-item>
70
- </a-menu>
71
- <a-button>导出 <a-icon type="down" :style="iconStyle"/> </a-button>
72
- </a-dropdown>
73
- <a-dropdown v-if="!buttonState || buttonState.print && buttonRendering('print')">
74
- <a-menu slot="overlay">
75
- <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handlePrint('selected')"><a-icon
76
- :style="iconStyle"
77
- type="ordered-list"/>打印选中数据</a-menu-item>
78
- <a-menu-item key="2" @click="handlePrint('curPage')"><a-icon :style="iconStyle" type="snippets"/>打印本页数据</a-menu-item>
79
- <a-menu-item key="3" @click="handlePrint('exportByQuery')"><a-icon :style="iconStyle" type="download"/>打印所有符合条件的数据</a-menu-item>
80
- </a-menu>
81
- <a-button>打印 <a-icon type="printer" :style="iconStyle"/> </a-button>
82
- </a-dropdown>
83
- <!-- 遍历按钮配置数组,动态生成按钮 -->
84
- <a-button
85
- v-for="(button, index) in editButtonStateData"
86
- :key="index"
87
- :type="button.type || 'dashed'"
88
- @click="editButtonStateDataClick(index)"
89
- class="btn-success"
90
- >
91
- <a-icon type="dashed" :style="iconStyle"/>
92
- {{ button.buttonName }}
93
- </a-button>
94
- <a-button
95
- v-if="allowedCardMode && !simpleMode"
96
- @click="changeViewMode"
97
- :type="isTableMode ? '' : 'primary'">
98
- 看板模式
99
- </a-button>
100
- <a-badge
101
- v-if="selectRowMode === 'listView'"
102
- :count="selectedRows.length"
103
- :number-style="{ backgroundColor:theme.color }"
104
- >
105
- <a-button
106
- type="dashed"
107
- @click="showTempData">
108
- <a-icon :style="iconStyle" type="monitor"/>已选择
109
- </a-button>
110
- </a-badge>
111
- <!-- 头部附加栅格 -->
112
- <x-report
113
- v-if="attachGrid"
114
- :env="env"
115
- :isWidget="true"
116
- :use-oss-for-img="false"
117
- :config-name="attachGrid"
118
- :show-img-in-cell="true"
119
- :display-only="true"
120
- :edit-mode="false"
121
- :show-save-button="false"
122
- :dont-format="true"/>
123
-
124
- <slot name="button" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
125
- </a-space>
126
-
127
- </span>
128
- </a-col>
129
- <a-col v-show="showRightTools && !simpleMode">
130
- <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
131
- <a-button-group>
132
- <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
133
- <a-tooltip title="汇总" placement="bottom">
134
- <a-button @click="showDrawer">
135
- <a-icon :style="iconStyle" type="project"/>
136
- </a-button>
137
- </a-tooltip>
138
- <a-tooltip title="重新查询" placement="bottom">
139
- <a-button @click="refresh(true)">
140
- <a-icon :style="iconStyle" type="reload"/>
141
- </a-button>
142
- </a-tooltip>
143
- <a-tooltip title="列展示/排序" placement="bottom">
144
- <table-setting v-if="columnSelectLoaded" v-model="tableColumns"/>
145
- </a-tooltip>
146
- </a-button-group>
147
- </span>
148
- </a-col>
149
- </a-row>
150
- <!-- 如果当前是表格模式 -->
151
- <template v-if="isTableMode">
152
- <x-table-wrapper
153
- ref="table"
154
- @rowClick="handleRowClick"
155
- @beforeDataChange="beforeDataChange"
156
- @expand="onExpand">
157
- <template slot="expandedRowRender">
158
- <!-- 列扩展栅格 -->
159
- <x-report
160
- v-if="expandedGrid"
161
- :env="env"
162
- ref="report"
163
- :isWidget="true"
164
- :use-oss-for-img="false"
165
- :config-name="expandedGrid"
166
- :show-img-in-cell="true"
167
- :display-only="true"
168
- :edit-mode="false"
169
- :show-save-button="false"
170
- :dont-format="true"/>
171
- </template>
172
- <template slot="footer">
173
- <slot
174
- name="footer"
175
- :selectedRowKeys="selectedRowKeys"
176
- :selectedRows="selectedRows"></slot>
177
- </template>
178
- </x-table-wrapper>
179
- </template>
180
- <!-- 如果当前是看板模式 -->
181
- <template v-else>
182
- <XDataCard
183
- ref="table"
184
- @cardEmit="handleCardEmit"
185
- :tableColumns="tableColumns"
186
- :card-config="cardModeConfig"
187
- :show-pagination="!simpleMode"
188
- :prePageSize="simpleMode ? 1000 : undefined"
189
- :serviceName="serviceName"
190
- :card-data="loadData"
191
- :env="env"
192
- :createdQuery="createdQuery"
193
- :simple-mode="simpleMode"/>
194
- </template>
195
- <!-- 上传文件 -->
196
- <a-drawer
197
- title="汇总信息"
198
- placement="right"
199
- :closable="false"
200
- :visible="summaryDrawerVisible"
201
- :z-index="2000"
202
- :width="`${summaryDrawerWidth}vw`"
203
- :after-visible-change="afterVisibleChange"
204
- @close="onClose"
205
- >
206
- <template>
207
- <a-row>
208
- <a-col :span="8" v-for="(f,index) in summaryData" :key="index">
209
- <a-statistic
210
- :title="f.title + ':'"
211
- :value="f.value"
212
- :precision="2">
213
- <template #prefix>
214
- <a-spin :spinning="f.loading">
215
- </a-spin>
216
- </template>
217
- <template #suffix>
218
- <a-icon
219
- v-show="!f.loading"
220
- :type="f.success !== false ? 'check-circle' : 'close-circle'"
221
- :style="{color: f.success !== false ? 'green' : 'red'}"/>
222
- </template>
223
- </a-statistic>
224
- </a-col>
225
- <a-col
226
- :span="item.span"
227
- v-for="(item,index) in chartsConfigArray"
228
- :key="index"
229
- style="height: 20rem; margin-bottom: 3rem">
230
- <div class="custom-chart-title" v-if="item.config.title">{{ item.config.title }}</div>
231
- <div class="custom-chart-desc" v-if="item.config.description">{{ item.config.description }}</div>
232
- <g2Charts
233
- :key="index"
234
- :chatsKey="index"
235
- :is-dev="env === 'dev'"
236
- :config="item.config"
237
- :requestParameters="requestParameters"/>
238
- </a-col>
239
- </a-row>
240
- </template>
241
- </a-drawer>
242
- <x-import-excel
243
- ref="importExcel"
244
- @ok="importExcelOk"
245
- :title="title"
246
- :service-name="serviceName"
247
- :env="env"
248
- :query-params-name="queryParamsName"
249
- >
250
- <template #importExcelSlot>
251
- <slot name="importExcelSlot"></slot>
252
- </template>
253
- </x-import-excel>
254
- <ExportExcel
255
- ref="exportExcel"
256
- />
257
- <a-modal @cancel="$refs.table.refresh()" v-model="selectedRowModalVisible" width="80vw" title="已选中数据" :footer="null">
258
- <x-table-wrapper
259
- ref="selectedDataTable"
260
- :load-selected-data="true"
261
- @beforeDataChange="beforeDataChange"
262
- @rowClick="handleRowClick">
263
- </x-table-wrapper>
264
- </a-modal>
265
- </div>
266
- </template>
267
- <script>
268
- import { STable } from '@vue2-client/components'
269
- import { getChangedData, setDataByRealKey } from '@vue2-client/utils/util'
270
- import * as util from '@vue2-client/utils/util'
271
- import TableSetting from '@vue2-client/components/TableSetting/TableSetting'
272
- import {
273
- query,
274
- querySummary,
275
- queryWithResource,
276
- remove,
277
- getConfigByNameAsync,
278
- editRowSave,
279
- runLogic
280
- } from '@vue2-client/services/api/common'
281
- import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
282
- import { Modal } from 'ant-design-vue'
283
- import { mapState } from 'vuex'
284
- import { executeStrFunction, executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
285
- import debounce from 'lodash.debounce'
286
- import XDataCard from '@vue2-client/base-client/components/common/XDataCard/XDataCard.vue'
287
- import { getRealKeyData } from '@vue2-client/utils/formatter'
288
- import ReportTableHome from '../../../../pages/report/ReportTableHome.vue'
289
- import CustomFuncCel from '@vue2-client/base-client/components/common/XTable/CustomFuncCel.vue'
290
- import ExportExcel from '@vue2-client/base-client/components/common/XTable/ExportExcel.vue'
291
- import g2Charts from '@vue2-client/components/g2Charts/index.vue'
292
- import moment from 'moment/moment'
293
- import XTableWrapper from './XTableWrapper.vue'
294
-
295
- export default {
296
- name: 'XTable',
297
- components: {
298
- ExportExcel,
299
- CustomFuncCel,
300
- XDataCard,
301
- TableSetting,
302
- STable,
303
- XImportExcel,
304
- g2Charts,
305
- XReport: () => import('@vue2-client/base-client/components/common/XReportGrid/XReport.vue'),
306
- ReportTableHome,
307
- XTableWrapper
308
- },
309
- inject: ['getSelf'],
310
- provide () {
311
- return {
312
- tableContext: this
313
- }
314
- },
315
- data () {
316
- return {
317
- uniqueId: `x-table-${this._uid}`, // 使用 _uid 生成唯一 ID
318
- // 筛选列加载状态
319
- columnSelectLoaded: false,
320
- // 预览模式
321
- viewMode: false,
322
- // 本地编辑模式
323
- localEditMode: false,
324
- // 本地编辑表单提交方式
325
- formSubmitTypeInLocalEditMode: 'cover',
326
- // 本地编辑模式所用数据源
327
- localEditModeDataSource: [],
328
- // 本地编辑模式数据源是否已由外部加载
329
- isLocalDataSourceLoadedExternally: false,
330
- // 行选择模式
331
- rowSelectMode: false,
332
- // 行选择模式-允许选中行数量,0:任意数量行,大于0:指定值数量的行
333
- allowSelectRowNum: 0,
334
- // 头部附件的栅格配置名
335
- attachGrid: '',
336
- // 表格行扩展区域的栅格配置名
337
- expandedGrid: '',
338
- // 是否展示右侧工具栏
339
- showRightTools: true,
340
- // 是否展示左边按钮栏
341
- showLeftOperaBtn: true,
342
- // 加载数据方法 必须为 Promise 对象
343
- loadData: parameter => {
344
- // 取到表格携带的表单参数
345
- const requestParameters = Object.assign({}, parameter)
346
- // 取到父组件传入的表单参数
347
- const conditionParams = {}
348
- Object.assign(conditionParams, this.fixedQueryForm)
349
- Object.assign(conditionParams, this.form)
350
- // 如果传了燃气公司字段,则进行数据处理
351
- if (conditionParams.orgName) {
352
- requestParameters.orgName = conditionParams.orgName
353
- delete conditionParams.orgName
354
- }
355
- Object.keys(conditionParams).forEach(key => {
356
- if (Array.isArray(conditionParams[key])) {
357
- // 检查数组中是否包含 null
358
- const hasNull = conditionParams[key].every(item => item === '') || conditionParams[key].length === 0
359
- // 如果包含 null,则删除该属性
360
- if (hasNull) {
361
- delete conditionParams[key]
362
- }
363
- }
364
- })
365
- requestParameters.conditionParams = conditionParams
366
- requestParameters.queryParamsName = this.queryParamsName
367
- requestParameters.queryParams = this.queryParams && Object.keys(this.queryParams).length > 0 ? this.queryParams : undefined
368
- this.requestParameters = requestParameters
369
- // 加载数据
370
- return this.loadTableData(requestParameters)
371
- },
372
- requestParameters: {},
373
- rowKey: undefined,
374
- // x滚动条宽度
375
- scrollXWidth: 1600,
376
- // y滚动条高度
377
- scrollYHeight: 'calc(100vh - 31rem)',
378
- // 表格选择列Key集合
379
- selectedRowKeys: [],
380
- // 表格选择Row集合
381
- selectedRows: [],
382
- // 表格选择列Key集合
383
- innerSelectedRowKeys: [],
384
- // 表格选择Row集合
385
- innerSelectedRows: [],
386
- // 禁止表格选择Row集合
387
- selectedDisableRows: [],
388
- // 业务标题
389
- title: '',
390
- // 数据列
391
- tableColumns: [],
392
- // 查询用表单
393
- form: {},
394
- oldForm: {},
395
- // 是否允许修改
396
- isModify: false,
397
- // 是否允许删除
398
- isDelete: false,
399
- // 是否允许选择
400
- isChoose: false,
401
- // 选中用于修改的id
402
- selectId: undefined,
403
- // 是否显示展示列抽屉
404
- visible: false,
405
- // 编辑按钮加载状态
406
- editLoading: false,
407
- // 按钮状态
408
- buttonState: {},
409
- // eventBtnState
410
- eventState: {},
411
- // 自定义按钮数组
412
- editButtonStateData: [],
413
- // 按钮权限
414
- buttonPermissions: [],
415
- // 是否展示汇总
416
- showSummary: false,
417
- // 自定义汇总
418
- showCustomSummary: false,
419
- summaryData: [],
420
- // 图标样式
421
- iconStyle: {
422
- position: 'relative',
423
- top: '1px'
424
- },
425
- // 当前环境
426
- env: 'prod',
427
- // 预览模式(表格 or 看板)
428
- isTableMode: true,
429
- // 汇总抽屉是否显示
430
- summaryDrawerVisible: false,
431
- // 汇总更新标志
432
- summaryUpdate: false,
433
- customSummaryArray: [],
434
- formItems: [],
435
- // 是否为行编辑模式
436
- isEditMode: false,
437
- // 定义主键
438
- primaryKey: '',
439
- // 是否进行初始化查询
440
- createdQuery: false,
441
- // 允许看板模式
442
- allowedCardMode: false,
443
- // 看板模式配置
444
- cardModeConfig: undefined,
445
- // 暂存行编辑前数据 用于比较哪些变化了才需要保存
446
- editRowBeforeData: [],
447
- // 是否简易模式
448
- simpleMode: false,
449
- // crud打印模板配置
450
- printTemplate: false,
451
- queryParams: {},
452
- // 定义总行数
453
- totalCount: 0,
454
- user: {},
455
- chartsConfigArray: [],
456
- summaryDrawerWidth: 35,
457
- // 行选择模式
458
- selectRowMode: 'default',
459
- tableSize: 'default',
460
- clearSelectRowAfterQuery: false,
461
- selectedRowModalVisible: false
462
- }
463
- },
464
- props: {
465
- // 查询配置文件名
466
- queryParamsName: {
467
- type: String,
468
- default: () => {
469
- return ''
470
- }
471
- },
472
- // 查询配置文件名
473
- serviceName: {
474
- type: String,
475
- default: () => {
476
- return ''
477
- }
478
- },
479
- // 查询配置文件Json
480
- queryParamsJson: {
481
- type: Object,
482
- default: null
483
- },
484
- // 固定查询表单
485
- fixedQueryForm: {
486
- type: Object,
487
- default: () => {
488
- return {}
489
- }
490
- },
491
- // 数据只有一页时是否展示分页,true:展示,auto:隐藏
492
- showPagination: {
493
- type: Boolean,
494
- default: true
495
- },
496
- // 是否自定义删除功能
497
- customDelete: {
498
- type: Boolean,
499
- default: false
500
- },
501
- // 自适应底部边距
502
- extraHeight: {
503
- type: Number,
504
- default: 80
505
- },
506
- pageMaxSize: {
507
- type: Number,
508
- default: null
509
- }
510
- },
511
- computed: {
512
- ...mapState('setting', ['theme']),
513
- rowSelection () {
514
- return this.selectRowMode === 'disabled' ? undefined : {
515
- selectedRowKeys: this.innerSelectedRowKeys,
516
- onChange: this.onSelectChange,
517
- onSelect: this.selectRowMode === 'listView' ? this.onSelect : undefined,
518
- onSelectAll: this.selectRowMode === 'listView' ? this.onSelectAll : undefined,
519
- getCheckboxProps: record => ({
520
- props: {
521
- disabled: this.selectedDisableRows.includes(record[this.rowKey]), // Column configuration not to be checked
522
- name: record.name,
523
- },
524
- }),
525
- }
526
- },
527
- ...mapState('account', { currUser: 'user' }),
528
- ...mapState('setting', ['compatible'])
529
- },
530
- watch: {
531
- pageMaxSize: {
532
- handler (val) {
533
- if (this.tableContext) {
534
- this.tableContext.pageMaxSize = val
535
- }
536
- },
537
- immediate: true
538
- }
539
- },
540
- mounted () {
541
- window.addEventListener('resize', this.handleResize)
542
- },
543
- beforeDestroy () {
544
- // 销毁页面查询定时器
545
- if (this.queryTimer) {
546
- clearInterval(this.queryTimer)
547
- }
548
- window.removeEventListener('resize', this.handleResize)
549
- },
550
- methods: {
551
- showTempData () {
552
- this.selectedRowModalVisible = true
553
- this.$nextTick(() => {
554
- this.$refs.selectedDataTable.refresh(true)
555
- this.$refs.selectedDataTable.updateSelect(this.selectedRowKeys, this.selectedRows)
556
- })
557
- },
558
- customFunctionShow (customFunction, record, cIndex) {
559
- return executeStrFunctionByContext(this, customFunction, [record, cIndex])
560
- },
561
- getConfigByNameAsync,
562
- runLogic,
563
- executeStrFunctionByContext,
564
- columnClick (key, value, record) {
565
- this.$emit('columnClick', key, value, record)
566
- },
567
- gotoUserDetail (key, value, record) {
568
- this.$emit('gotoUserDetail', key, value, record)
569
- },
570
- // 打开行编辑
571
- openEditMode () {
572
- this.isEditMode = true
573
- this.editRowBeforeData = JSON.parse(JSON.stringify(this.getTableData()))
574
- },
575
- // 标记行保存
576
- editRowSave () {
577
- // 获取最新数据
578
- const editRowAfterData = this.getTableData()
579
- const changeData = getChangedData(this.editRowBeforeData, editRowAfterData)
580
- if (this.eventState?.customSave) {
581
- this.custom('customSave', {
582
- tableData: editRowAfterData,
583
- changeData
584
- })
585
- return
586
- }
587
- if (changeData.length === 0) {
588
- this.$message.info('没有数据发生变化')
589
- } else {
590
- Modal.confirm({
591
- title: '是否确认保存?',
592
- content: `此操作将保存当前行编辑的数据,共修改${changeData.length}条数据`,
593
- zIndex: 1001,
594
- onOk: () => {
595
- return new Promise((resolve, reject) => {
596
- const requestParameters = {
597
- queryParamsName: this.queryParamsName,
598
- changeData: changeData.map(h => getRealKeyData(h)),
599
- operaInfo: this.currUser.operaInfo
600
- }
601
- editRowSave(requestParameters, this.serviceName, this.env === 'dev').then(res => {
602
- this.$message.success('行内数据保存成功')
603
- this.isEditMode = false
604
- this.refresh()
605
- resolve(res)
606
- }).catch(e => {
607
- reject(e)
608
- this.$message.error('保存失败!')
609
- })
610
- })
611
- },
612
- onCancel () {
613
- }
614
- })
615
- }
616
- },
617
- importExcelOk (data) {
618
- this.refresh(true)
619
- this.$emit('importExcelOk', data)
620
- },
621
- /**
622
- * 行选择事件
623
- * @param row 选中行集合
624
- * @param attr 表单项属性
625
- */
626
- async rowChoose (row, attr, callback, record) {
627
- // 如果配置了自定义函数
628
- if (attr.dataChangeFunc) {
629
- await executeStrFunction(attr.dataChangeFunc, [record, this.setForm, {
630
- ...attr,
631
- selectRows: row
632
- }, util, this.getSelf(), this.mode, runLogic, getConfigByNameAsync])
633
- } else {
634
- // 默认填充选中行数据到当前表单
635
- setDataByRealKey(record, row[0])
636
- }
637
- if (callback) {
638
- callback()
639
- }
640
- },
641
- setForm (record, obj) {
642
- Object.assign(record, obj)
643
- this.$forceUpdate()
644
- },
645
- handleResize () {
646
- debounce(() => {
647
- this.setScrollYHeight({})
648
- }, 100)()
649
- },
650
- isInAModal () {
651
- let parent = this.$parent
652
- while (parent) {
653
- // 检查组件名称,这里假设a-modal组件的名称为AModal,根据实际情况可能需要调整
654
- if (parent.$options.name === 'AModal') {
655
- return true
656
- }
657
- parent = parent.$parent
658
- }
659
- return false
660
- },
661
- executeStrFunction,
662
- // 切换看板模式和表格模式
663
- changeViewMode () {
664
- this.isTableMode = !this.isTableMode
665
- // 看板切换回表格模式 刷新列表
666
- this.refresh(true)
667
- },
668
- /**
669
- * 初始化表格参数
670
- */
671
- init (params) {
672
- const {
673
- // 查询参数对象, 用于没有对应查询配置文件名时
674
- queryParams,
675
- tableColumns,
676
- attachGrid,
677
- expandedGrid,
678
- buttonState,
679
- eventState = {},
680
- buttonPermissions,
681
- editButtonStateData = [],
682
- title,
683
- form,
684
- tableSummaryMap = {},
685
- customTableSummaryArray = [],
686
- viewMode,
687
- localEditMode,
688
- formSubmitTypeInLocalEditMode = 'cover',
689
- rowSelectMode,
690
- allowSelectRowNum = 0,
691
- formItems,
692
- env = 'prod',
693
- createdQuery = true,
694
- createdEditMode = false,
695
- primaryKey,
696
- allowedCardMode = false,
697
- simpleMode = false,
698
- showRightTools = true,
699
- cardModeConfig,
700
- summaryUpdate,
701
- summaryDrawerWidth = 35,
702
- chartsConfigArray = [],
703
- printTemplate = 'DEFAULT_CRUD_PRINT_TEMPLATE',
704
- selectRowMode = 'default',
705
- tableSize = 'default',
706
- clearSelectRowAfterQuery = false
707
- } = params
708
- this.showSummary = Object.keys(tableSummaryMap).length > 0
709
- if (this.showSummary) {
710
- Object.keys(tableSummaryMap).forEach(item => {
711
- this.summaryData.push({
712
- key: item,
713
- title: tableSummaryMap[item],
714
- value: ' ',
715
- loading: true,
716
- success: false
717
- })
718
- })
719
- }
720
- if (customTableSummaryArray.length > 0) {
721
- customTableSummaryArray.forEach(item => {
722
- this.summaryData.push({
723
- key: item.key,
724
- title: item.title,
725
- value: ' ',
726
- loading: true,
727
- success: false
728
- })
729
- })
730
- this.showCustomSummary = true
731
- this.customSummaryArray = customTableSummaryArray
732
- }
733
- this.queryParams = queryParams
734
- this.tableColumns = JSON.parse(JSON.stringify(tableColumns))
735
- if (this.tableColumns.length === 0) {
736
- return
737
- }
738
- this.attachGrid = attachGrid
739
- this.expandedGrid = expandedGrid
740
- this.viewMode = viewMode
741
- this.localEditMode = localEditMode
742
- this.formSubmitTypeInLocalEditMode = formSubmitTypeInLocalEditMode
743
- this.rowSelectMode = rowSelectMode
744
- this.allowSelectRowNum = allowSelectRowNum
745
- this.simpleMode = simpleMode
746
- this.formItems = formItems
747
- this.user = this.currUser
748
- this.createdQuery = createdQuery
749
- this.primaryKey = primaryKey
750
- this.buttonState = buttonState
751
- this.eventState = eventState
752
- this.showRightTools = showRightTools
753
- this.printTemplate = printTemplate
754
- this.summaryDrawerWidth = summaryDrawerWidth
755
- this.chartsConfigArray = chartsConfigArray
756
- this.selectRowMode = selectRowMode
757
- this.tableSize = tableSize
758
- this.clearSelectRowAfterQuery = clearSelectRowAfterQuery
759
- if (this.chartsConfigArray.length > 0) {
760
- // 循环chartsConfigArray,将每个配置的数据请求参数赋值给requestParameters
761
- this.chartsConfigArray.forEach(item => {
762
- item.config.queryParams = JSON.parse(JSON.stringify(this.queryParams))
763
- item.config.queryParamsName = this.queryParamsName
764
- })
765
- }
766
- if (this.localEditMode) {
767
- this.localEditModeDataSource = []
768
- if (this.formSubmitTypeInLocalEditMode === 'append') {
769
- this.isLocalDataSourceLoadedExternally = true
770
- const defaultItem = {}
771
- defaultItem['序号'] = 0
772
- this.localEditModeDataSource.push(defaultItem)
773
- } else {
774
- this.isLocalDataSourceLoadedExternally = false
775
- }
776
- this.buttonState.import = false
777
- this.buttonState.export = false
778
- this.showRightTools = false
779
- }
780
- if (this.rowSelectMode) {
781
- this.buttonState = {
782
- choose: true
783
- }
784
- this.showRightTools = false
785
- }
786
- this.buttonPermissions = buttonPermissions
787
- this.editButtonStateData = editButtonStateData
788
- this.title = title
789
- this.env = env
790
- this.rowKey = this.getPrimaryKeyName()
791
- this.allowedCardMode = allowedCardMode
792
- this.cardModeConfig = cardModeConfig
793
- this.summaryUpdate = summaryUpdate
794
- this.isEditMode = createdEditMode
795
- let totalWidth = 0
796
- for (let i = 0; i < this.tableColumns.length; i++) {
797
- const item = this.tableColumns[i]
798
- // 设置操作列
799
- if (item.slotType === 'action') {
800
- item.fixed = 'right'
801
- item.width = 70
802
- }
803
- // 设置表格宽度
804
- if (item.width) {
805
- totalWidth = totalWidth + item.width
806
- } else {
807
- totalWidth = totalWidth + 180
808
- }
809
- }
810
- // 横向滚动长度大于所有宽度,才能实现固定表头
811
- this.scrollXWidth = totalWidth
812
- // 加载筛选列完成
813
- this.columnSelectLoaded = true
814
- this.setQueryForm(form || {})
815
- // 简易模式,并且是看板模式,默认直接进入看板模式
816
- if (this.allowedCardMode && this.simpleMode) {
817
- this.isTableMode = false
818
- }
819
- if (params.queryInterval) {
820
- this.queryTimer = setInterval(() => {
821
- this.refresh()
822
- }, params.queryInterval * 1000)
823
- }
824
- },
825
- // 操作面板按钮渲染
826
- buttonRendering (button) {
827
- if (!this.buttonPermissions) {
828
- return true
829
- }
830
- try {
831
- const existingItem = this.buttonPermissions.find(item => item.btnName === button)
832
- const rolestr = this.currUser.rolestr?.split(',')
833
- if (existingItem?.state) {
834
- const currUserRole = existingItem.roleStr
835
- return rolestr.some(item => currUserRole && currUserRole.includes(item))
836
- } else {
837
- return true
838
- }
839
- } catch (e) {
840
- console.error(e)
841
- return false
842
- }
843
- },
844
- // 防止查询多次点击处理
845
- loadTableData (requestParameters) {
846
- if (this.queryPromise) {
847
- return this.queryPromise
848
- }
849
- this.queryPromise = this.loadTableDataGen(requestParameters).finally(() => {
850
- this.queryPromise = undefined
851
- })
852
- return this.queryPromise
853
- },
854
- /**
855
- * 加载表格数据
856
- * @param requestParameters 请求参数
857
- */
858
- async loadTableDataGen (requestParameters) {
859
- let result
860
- if (this.localEditMode) {
861
- if (!this.isLocalDataSourceLoadedExternally && requestParameters?.conditionParams && Object.keys(requestParameters?.conditionParams).length > 0) {
862
- const result = await query(Object.assign(requestParameters, { userId: this.currUser?.id }),
863
- this.serviceName, this.env === 'dev')
864
- if (result.data) {
865
- let no = 0
866
- this.localEditModeDataSource = result.data.map(item => {
867
- item['序号'] = no
868
- no++
869
- return item
870
- })
871
- }
872
- this.isLocalDataSourceLoadedExternally = true
873
- }
874
- result = new Promise((resolve) => {
875
- resolve({
876
- data: this.localEditModeDataSource
877
- })
878
- })
879
- } else {
880
- result = query(Object.assign(requestParameters, { userId: this.currUser?.id }), this.serviceName, this.env === 'dev')
881
- result.then(res => {
882
- this.totalCount = res.totalCount || 0
883
- })
884
- }
885
-
886
- if (this.selectRowMode === 'listView' && !this.clearSelectRowAfterQuery) {
887
- this.$refs.table.updateSelect(this.selectedRowKeys, this.selectedRows)
888
- } else if (this.isTableMode && !this.simpleMode) {
889
- this.clearRowKeys()
890
- }
891
- this.$emit('afterQuery', result, requestParameters.conditionParams)
892
- return result
893
- },
894
- /**
895
- * 操作列事件
896
- * @param record 本条数据
897
- * @param actionType 操作类型
898
- * @param func 事件默认 action
899
- * @param index 行下标
900
- */
901
- action (record, actionType, func = 'action', index) {
902
- this.$emit('action', record, record[this.getPrimaryKeyName()], actionType, func, index)
903
- },
904
- // 看板点击事件
905
- handleCardEmit (data, eventName) {
906
- this.action(data, undefined, eventName)
907
- },
908
- /**
909
- * 选择列勾选改变事件
910
- * @param record 被选择的列数据
911
- * @param selected 是否选中
912
- * @param selectedRows 被选择的列集合
913
- * @param nativeEvent 原生事件
914
- */
915
- onSelect (record, selected, selectedRows, nativeEvent) {
916
- if (this.selectRowMode === 'listView') {
917
- // 获取主键数据
918
- const primaryData = record[this.primaryKey]
919
- // 取消勾选时
920
- if (!selected) {
921
- this.selectedRowKeys = this.selectedRowKeys.filter(item => item !== primaryData)
922
- this.selectedRows = this.selectedRows.filter(item => item[this.primaryKey] !== primaryData)
923
- }
924
- }
925
- },
926
- /**
927
- * 选择列全选事件
928
- * @param selected 是否选中
929
- * @param selectedRows 被选择的列集合
930
- * @param changeRows 改变的行集合
931
- */
932
- onSelectAll (selected, selectedRows, changeRows) {
933
- console.log('onSelectAll', selected, selectedRows, changeRows)
934
- if (this.selectRowMode === 'listView') {
935
- if (!selected) {
936
- // 获取所有改变的key
937
- const changeKeys = changeRows.map(item => item[this.primaryKey])
938
- this.selectedRowKeys = this.selectedRowKeys.filter(item => !changeKeys.includes(item))
939
- this.selectedRows = this.selectedRows.filter(item => !changeKeys.includes(item[this.primaryKey]))
940
- }
941
- }
942
- },
943
- /**
944
- * 选择列数据改变事件
945
- * @param selectedRowKeys 被选择的列Key集合
946
- * @param selectedRows 被选择的列集合
947
- */
948
- onSelectChange (selectedRowKeys, selectedRows) {
949
- this.innerSelectedRowKeys = selectedRowKeys
950
- this.innerSelectedRows = selectedRows
951
- if (this.selectRowMode === 'listView' && !this.clearSelectRowAfterQuery) {
952
- if (this.primaryKey) {
953
- // 找出被取消选中的行
954
- const deselectedKeys = this.selectedRowKeys.filter(key => !selectedRowKeys.includes(key))
955
- // 从已选中的行中移除被取消选中的行
956
- if (deselectedKeys.length > 0) {
957
- this.selectedRowKeys = this.selectedRowKeys.filter(key => !deselectedKeys.includes(key))
958
- this.selectedRows = this.selectedRows.filter(row => !deselectedKeys.includes(row[this.primaryKey]))
959
- }
960
- // 添加新选中的行(去重)
961
- const newSelectedKeys = selectedRowKeys.filter(key => !this.selectedRowKeys.includes(key))
962
- const newSelectedRows = selectedRows.filter(row => newSelectedKeys.includes(row[this.primaryKey]))
963
- this.selectedRowKeys = [...this.selectedRowKeys, ...newSelectedKeys]
964
- this.selectedRows = [...this.selectedRows, ...newSelectedRows]
965
- } else {
966
- // 如果没有主键,则直接使用当前选中的行
967
- this.selectedRowKeys = selectedRowKeys
968
- this.selectedRows = selectedRows
969
- }
970
- } else {
971
- this.selectedRowKeys = this.innerSelectedRowKeys
972
- this.selectedRows = this.innerSelectedRows
973
- }
974
- this.isModify = this.innerSelectedRowKeys.length === 1
975
- this.isDelete = this.innerSelectedRowKeys.length > 0
976
- this.isChoose = this.allowSelectRowNum === 0 ? this.innerSelectedRowKeys.length > 0 : this.innerSelectedRowKeys.length === this.allowSelectRowNum
977
- this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
978
- },
979
- /**
980
- * 清除表格选中项
981
- */
982
- clearRowKeys () {
983
- this.$refs.table.clearSelected()
984
- },
985
- /**
986
- * 为表格附加查询条件
987
- */
988
- setQueryForm (form = {}) {
989
- this.form = form
990
- if (this.createdQuery) {
991
- this.refresh(true)
992
- } else {
993
- this.createdQuery = true
994
- }
995
- },
996
- /**
997
- * 表格重新加载方法
998
- * 如果参数为 true, 则强制刷新到第一页
999
- */
1000
- refresh (bool) {
1001
- this.$nextTick(() => {
1002
- this.$refs.table.refresh(bool)
1003
- })
1004
- },
1005
- setScrollYHeight ({ extraHeight = this.extraHeight, id = this.uniqueId, type = '' }) {
1006
- this.$nextTick(() => {
1007
- setTimeout(() => {
1008
- const curDocument = window?.rawDocument || document
1009
- const innerHeight = window?.rawWindow?.innerHeight || window.innerHeight || 0
1010
- if (typeof extraHeight == 'undefined') {
1011
- // 默认底部分页32 + 边距48
1012
- extraHeight = 48 + 32
1013
- }
1014
- let tHeader = null
1015
- if (id) {
1016
- tHeader = curDocument.getElementById(id) ? curDocument.getElementById(id).getElementsByClassName('ant-table-thead')[0] : null
1017
- } else {
1018
- tHeader = curDocument.getElementsByClassName('ant-table-thead')[0]
1019
- }
1020
- // 表格内容距离顶部的距离
1021
- let tHeaderBottom = 0
1022
- if (tHeader) {
1023
- tHeaderBottom = tHeader.getBoundingClientRect().bottom
1024
- }
1025
- if (tHeaderBottom === 0) {
1026
- this.scrollYHeight = 'calc(100vh - 31rem)'
1027
- if (window.__MICRO_APP_ENVIRONMENT__) {
1028
- this.scrollYHeight = 'calc(100vh - 28.5rem)'
1029
- }
1030
- return
1031
- }
1032
-
1033
- // 判断是否在 modal 中
1034
- if (this.isInAModal()) {
1035
- let modalElement = null
1036
- if (tHeader) {
1037
- modalElement = tHeader.closest('.ant-modal-body')
1038
- } else {
1039
- modalElement = curDocument.querySelector('.ant-modal-body')
1040
- }
1041
- if (modalElement) {
1042
- const modalRect = modalElement.getBoundingClientRect()
1043
- // 48 是 modal 通常的边距 32 是分页
1044
- extraHeight = innerHeight - modalRect.bottom + 32 + 48
1045
- }
1046
- }
1047
- if (innerHeight - (tHeaderBottom + extraHeight) < 210) {
1048
- this.scrollYHeight = 'calc(100vh - 31rem)'
1049
- return
1050
- }
1051
- // 窗体高度-表格内容顶部的高度-表格内容底部的高度
1052
- // this.scrollYHeight = document.body.clientHeight - tHeaderBottom - extraHeight
1053
- this.scrollYHeight = `calc(100vh - ${tHeaderBottom + extraHeight}px)`
1054
- }, 60)
1055
- })
1056
- },
1057
- /**
1058
- * 获取主键列名称
1059
- */
1060
- getPrimaryKeyName () {
1061
- if (this.primaryKey) {
1062
- return this.primaryKey
1063
- }
1064
- const indexColumn = this.tableColumns.find(i => i?.slotType === 'index')
1065
- return indexColumn ? indexColumn.dataIndex : this.tableColumns[0].dataIndex
1066
- },
1067
- handleExport (type) {
1068
- this.$refs.exportExcel.handleExport(type, this.title)
1069
- },
1070
- handlePrint (type) {
1071
- const printData = {
1072
- title: this.title,
1073
- form: this.form,
1074
- operaInfo: this.currUser.operaInfo,
1075
- operaTime: moment().format('YYYY-MM-DD HH:mm:ss'),
1076
- summary: this.retrieveSummaryData
1077
- }
1078
- this.$refs.exportExcel.handlePrint(type, printData)
1079
- },
1080
- validateTableAndSyncData (currRow, defaultAppendRowData) {
1081
- let isLastRow = false
1082
- if (this.localEditModeDataSource.length === 0) {
1083
- isLastRow = true
1084
- } else if (currRow['序号'] === this.localEditModeDataSource[this.localEditModeDataSource.length - 1]['序号']) {
1085
- isLastRow = true
1086
- }
1087
- if (isLastRow) {
1088
- this.appendLocalData(defaultAppendRowData)
1089
- }
1090
- },
1091
- // 新增业务
1092
- add () {
1093
- if (this.eventState?.customAdd) {
1094
- this.custom('customAdd', {})
1095
- return
1096
- }
1097
- if (this.localEditMode && this.isEditMode) {
1098
- this.appendLocalData({})
1099
- } else {
1100
- this.$emit('add')
1101
- }
1102
- },
1103
- // 添加业务
1104
- move () {
1105
- this.$emit('move')
1106
- },
1107
- // 通用事件业务
1108
- custom (func) {
1109
- this.$emit('customEvent', func)
1110
- },
1111
- // 编辑业务
1112
- edit (id) {
1113
- this.editLoading = true
1114
- this.getEditData(id).then(modifyModelData => {
1115
- if (this.eventState?.customEdit) {
1116
- this.custom('customEdit', { id, modifyModelData })
1117
- return
1118
- }
1119
- this.$emit('edit', modifyModelData)
1120
- this.editLoading = false
1121
- })
1122
- },
1123
- // 行选择业务
1124
- choose () {
1125
- if (this.isChoose) {
1126
- // 如果配置了自定义函数
1127
- this.$emit('rowChoose', this.selectedRows)
1128
- } else {
1129
- this.$message.warning(this.allowSelectRowNum === 0 ? '请选择数据' : `请选择${this.allowSelectRowNum}条数据`)
1130
- }
1131
- },
1132
- // 自定义按钮点击
1133
- editButtonStateDataClick (index) {
1134
- this.$emit('editButtonStateDataClick', this.editButtonStateData[index].functionName, this.selectedRows)
1135
- },
1136
- // 获取被编辑的数据
1137
- getEditData (id) {
1138
- if (!id) {
1139
- this.selectId = this.selectedRowKeys[0]
1140
- } else {
1141
- this.selectId = id
1142
- }
1143
- const primaryKeyName = this.getPrimaryKeyName()
1144
- if (this.tableColumns[0].dataIndex !== primaryKeyName) {
1145
- this.selectId = this.selectedRows[0][primaryKeyName]
1146
- }
1147
- // 将更新需要的主键值加入到primaryKeyData中
1148
- const primaryKeyData = {}
1149
- primaryKeyData[primaryKeyName] = this.selectId
1150
- if (this.localEditMode) {
1151
- return new Promise((resolve) => {
1152
- const modifyData = this.getDataByRowKeyValue(this.selectId)
1153
- resolve({
1154
- data: modifyData,
1155
- primaryKeyData: primaryKeyData
1156
- })
1157
- })
1158
- }
1159
- const requestParameters = {
1160
- queryParamsName: this.queryParamsName,
1161
- queryParams: this.queryParams && Object.keys(this.queryParams).length > 0 ? this.queryParams : undefined,
1162
- conditionParams: {},
1163
- pageNo: 1,
1164
- pageSize: 1
1165
- }
1166
- requestParameters.conditionParams[primaryKeyName] = this.selectId
1167
- requestParameters.f_businessid = this.selectId
1168
- return queryWithResource(requestParameters, this.serviceName, this.env === 'dev').then(res => {
1169
- return { data: res.data[0], primaryKeyData: primaryKeyData, images: res.images, files: res.files }
1170
- })
1171
- },
1172
- // 删除业务
1173
- deleteItem () {
1174
- if (this.viewMode) {
1175
- this.$message.info('预览模式禁止删除')
1176
- return
1177
- }
1178
- Modal.confirm({
1179
- title: '提示',
1180
- content: '您本次要删除共' + this.selectedRowKeys.length + '条数据,确定操作吗?',
1181
- zIndex: 1001,
1182
- onOk: () => {
1183
- const requestParameters = {
1184
- queryParamsName: this.queryParamsName,
1185
- idList: this.selectedRowKeys
1186
- }
1187
- if (this.eventState?.customDelete) {
1188
- this.custom('customDelete', {
1189
- selectedRowKeys: this.selectedRowKeys,
1190
- selectedRows: this.selectedRows
1191
- })
1192
- return
1193
- }
1194
- return new Promise((resolve, reject) => {
1195
- if (this.localEditMode) {
1196
- this.localEditModeDataSource = this.getLocalData().filter(item => !this.selectedRowKeys.includes(item[this.rowKey]))
1197
- resolve(200)
1198
- this.$message.success('删除成功!')
1199
- this.refresh(true)
1200
- // afterDelete
1201
- this.$emit('afterDelete', requestParameters)
1202
- } else if (this.customDelete) {
1203
- this.$emit('del', this.selectedRows, resolve)
1204
- } else {
1205
- remove(requestParameters, this.serviceName, this.env === 'dev').then(res => {
1206
- resolve(res)
1207
- this.$message.success('删除成功!')
1208
- this.refresh(true)
1209
- // afterDelete
1210
- this.$emit('afterDelete', requestParameters)
1211
- }).catch(e => {
1212
- reject(e)
1213
- this.$message.error('删除失败!')
1214
- })
1215
- }
1216
- })
1217
- },
1218
- onCancel () {
1219
- }
1220
- })
1221
- },
1222
- // 导入业务
1223
- importData () {
1224
- this.$refs.importExcel.importExcelHandleOpen()
1225
- },
1226
- afterVisibleChange (val) {
1227
- if (val) {
1228
- this.retrieveSummaryData()
1229
- }
1230
- },
1231
- async retrieveSummaryData () {
1232
- const promises = []
1233
-
1234
- if (this.requestParameters.querySummary) {
1235
- const querySummaryPromise = querySummary(Object.assign(this.requestParameters, { userId: this.currUser?.id }), this.serviceName, this.env === 'dev')
1236
- .then(res => {
1237
- if (this.compatible === 'V3') {
1238
- res = res.data
1239
- }
1240
- if (res.length > 0) {
1241
- this.summaryData.forEach(item => {
1242
- res.forEach(summary => {
1243
- if (item.title === summary.title) {
1244
- item.value = summary.value
1245
- item.success = true
1246
- item.loading = false
1247
- }
1248
- })
1249
- })
1250
- }
1251
- })
1252
- promises.push(querySummaryPromise)
1253
- }
1254
-
1255
- if (this.showCustomSummary) {
1256
- this.customSummaryArray.forEach(item => {
1257
- const runLogicPromise = runLogic(item.source, Object.assign(this.requestParameters, { userId: this.currUser?.id }), this.serviceName, this.env === 'dev')
1258
- .then(res => {
1259
- this.summaryData.forEach(summary => {
1260
- if (item.key === summary.key) {
1261
- summary.value = res.value
1262
- summary.success = true
1263
- summary.loading = false
1264
- }
1265
- })
1266
- })
1267
- .catch(e => {
1268
- this.summaryData.forEach(summary => {
1269
- if (item.key === summary.key) {
1270
- summary.value = 0
1271
- summary.success = false
1272
- summary.loading = false
1273
- }
1274
- })
1275
- })
1276
- promises.push(runLogicPromise)
1277
- })
1278
- }
1279
-
1280
- await Promise.all(promises)
1281
- return this.summaryData
1282
- },
1283
- showDrawer () {
1284
- if (this.summaryUpdate) {
1285
- this.summaryData.forEach(item => {
1286
- item.loading = true
1287
- item.success = false
1288
- item.value = ' '
1289
- })
1290
- this.summaryDrawerVisible = true
1291
- } else {
1292
- this.$message.warning('请查询后再来查看')
1293
- }
1294
- },
1295
- onClose () {
1296
- this.summaryDrawerVisible = false
1297
- },
1298
- // 获取表格内所有数据
1299
- getTableData () {
1300
- return this.$refs.table.localDataSource
1301
- },
1302
- // 设置表格内数据
1303
- setTableData (data) {
1304
- if (this.localEditMode) {
1305
- // 本地编辑模式下,需要修改 localEditModeDataSource
1306
- this.localEditModeDataSource = data.map((item, index) => ({
1307
- ...item,
1308
- 序号: index + 1
1309
- }))
1310
- this.$nextTick(() => {
1311
- this.$refs.table?.refresh()
1312
- })
1313
- } else {
1314
- // 普通模式
1315
- this.$nextTick(() => {
1316
- if (this.$refs.table) {
1317
- this.$refs.table.setLocalDataSource(data)
1318
- }
1319
- })
1320
- }
1321
- },
1322
- // 获取所有本地数据
1323
- getLocalData () {
1324
- return this.localEditModeDataSource
1325
- },
1326
- // 获取指定rowKey的value的本地数据
1327
- getDataByRowKeyValue (rowKeyValue) {
1328
- return this.getLocalData().find(item => {
1329
- return item[this.rowKey] === rowKeyValue
1330
- })
1331
- },
1332
- // 修改本地数据
1333
- modifyLocalData (rowKeyValue, data) {
1334
- const modifyItem = this.getDataByRowKeyValue(rowKeyValue)
1335
- if (modifyItem) {
1336
- Object.assign(modifyItem, data)
1337
- }
1338
- },
1339
- // 追加本地数据
1340
- appendLocalData (item) {
1341
- if (this.localEditModeDataSource.length === 0) {
1342
- item['序号'] = 1
1343
- } else {
1344
- item['序号'] = this.localEditModeDataSource[this.localEditModeDataSource.length - 1]['序号'] + 1
1345
- }
1346
- this.localEditModeDataSource.push(item)
1347
- },
1348
- handleRowClick (record) {
1349
- this.$emit('rowClick', record)
1350
- },
1351
- beforeDataChange (record) {
1352
- this.$emit('beforeDataChange', record)
1353
- },
1354
- onExpand (expanded, record) {
1355
- this.$emit('expand', expanded, record)
1356
- }
1357
- }
1358
- }
1359
- </script>
1360
- <style lang="less" scoped>
1361
-
1362
- .custom-chart-title {
1363
- font-size: 16px;
1364
- font-weight: 700;
1365
- margin-bottom: 8px;
1366
- }
1367
-
1368
- .custom-chart-desc {
1369
- font-size: 12px;
1370
- color: rgba(0, 0, 0, .45);
1371
- margin-bottom: 16px;
1372
- }
1373
-
1374
- :deep(.ant-table-thead > tr > th) {
1375
- font-weight: 600;
1376
- }
1377
-
1378
- :deep(.table-wrapper .ant-pagination) {
1379
- display: flex;
1380
- flex-direction: row;
1381
- align-items: center;
1382
- padding: 0;
1383
- }
1384
-
1385
- :deep(.table-wrapper .ant-pagination .ant-pagination-total-text) {
1386
- white-space: nowrap;
1387
- }
1388
-
1389
- :deep(.ant-table td) {
1390
- white-space: nowrap;
1391
- }
1392
-
1393
- .footer_sum_title {
1394
- color: @primary-color;
1395
- font-weight: bold;
1396
- }
1397
-
1398
- .footer_sum_item {
1399
- white-space: nowrap;
1400
- }
1401
-
1402
- .ant-btn-hover {
1403
- border-color: @primary-color;
1404
- color: @primary-color;
1405
- }
1406
-
1407
- .innerTable {
1408
- :deep(.ant-form-item) {
1409
- margin: 0;
1410
- }
1411
- }
1412
- </style>
1
+ <template>
2
+ <div v-show="tableColumns.length > 0">
3
+ <a-row :gutter="48">
4
+ <a-col v-show="showLeftOperaBtn">
5
+ <span :style="{ float: 'left', marginBottom: '8px' }">
6
+ <a-space>
7
+ <!-- <a-button v-if="eventState.customDelete" type="primary" @click="custom('customDelete')">-->
8
+ <!-- <a-icon type="delete"/>删除-->
9
+ <!-- </a-button>-->
10
+ <!-- <a-button v-if="eventState.customSave" type="primary" @click="custom('customSave')">-->
11
+ <!-- <a-icon type="save"/>保存-->
12
+ <!-- </a-button>-->
13
+ <slot name="leftButton" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
14
+ <a-button v-if="buttonState.add && buttonRendering('add')" type="primary" @click="add">
15
+ <a-icon type="plus"/>新增
16
+ </a-button>
17
+ <a-button v-if="buttonState.move && buttonRendering('move')" type="primary" @click="move">
18
+ <a-icon type="plus"/>添加
19
+ </a-button>
20
+ <a-button
21
+ v-if="buttonState.choose && buttonRendering('choose')"
22
+ :disabled="!isChoose"
23
+ type="primary"
24
+ @click="choose">
25
+ <a-icon type="check-square"/>选择
26
+ </a-button>
27
+ <a-button
28
+ v-if="buttonState.edit && buttonRendering('edit')"
29
+ :disabled="!isModify"
30
+ :loading="editLoading"
31
+ class="btn-success"
32
+ type="dashed"
33
+ @click="edit()">
34
+ <a-icon :style="iconStyle" type="form"/>修改
35
+ </a-button>
36
+ <template
37
+ v-if="buttonState.editRow && buttonRendering('editRow')">
38
+ <a-button
39
+ v-if="isEditMode"
40
+ class="ant-btn-hover"
41
+ @click="editRowSave">
42
+ <a-icon :style="iconStyle" type="save"/>保存
43
+ </a-button>
44
+ <a-button
45
+ v-else
46
+ @click="openEditMode">
47
+ <a-icon :style="iconStyle" type="edit"/>行编辑
48
+ </a-button>
49
+ </template>
50
+ <a-button
51
+ v-if="buttonState.delete && buttonRendering('delete')"
52
+ :disabled="!isDelete"
53
+ type="danger"
54
+ @click="deleteItem">
55
+ <a-icon :style="iconStyle" type="delete"/>删除
56
+ </a-button>
57
+ <a-button
58
+ v-if="buttonState.import && buttonRendering('import')"
59
+ type="dashed"
60
+ @click="importData">
61
+ <a-icon :style="iconStyle" type="import"/>导入
62
+ </a-button>
63
+ <a-dropdown v-if="!buttonState || buttonState.export && buttonRendering('export')">
64
+ <a-menu slot="overlay">
65
+ <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handleExport('selected')"><a-icon
66
+ :style="iconStyle"
67
+ type="ordered-list"/>导出选中数据</a-menu-item>
68
+ <a-menu-item key="2" @click="handleExport('curPage')"><a-icon :style="iconStyle" type="snippets"/>导出本页数据</a-menu-item>
69
+ <a-menu-item key="3" @click="handleExport('exportByQuery')"><a-icon :style="iconStyle" type="download"/>导出所有符合条件的数据</a-menu-item>
70
+ </a-menu>
71
+ <a-button>导出 <a-icon type="down" :style="iconStyle"/> </a-button>
72
+ </a-dropdown>
73
+ <a-dropdown v-if="!buttonState || buttonState.print && buttonRendering('print')">
74
+ <a-menu slot="overlay">
75
+ <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handlePrint('selected')"><a-icon
76
+ :style="iconStyle"
77
+ type="ordered-list"/>打印选中数据</a-menu-item>
78
+ <a-menu-item key="2" @click="handlePrint('curPage')"><a-icon :style="iconStyle" type="snippets"/>打印本页数据</a-menu-item>
79
+ <a-menu-item key="3" @click="handlePrint('exportByQuery')"><a-icon :style="iconStyle" type="download"/>打印所有符合条件的数据</a-menu-item>
80
+ </a-menu>
81
+ <a-button>打印 <a-icon type="printer" :style="iconStyle"/> </a-button>
82
+ </a-dropdown>
83
+ <!-- 遍历按钮配置数组,动态生成按钮 -->
84
+ <a-button
85
+ v-for="(button, index) in editButtonStateData"
86
+ :key="index"
87
+ :type="button.type || 'dashed'"
88
+ @click="editButtonStateDataClick(index)"
89
+ class="btn-success"
90
+ >
91
+ <a-icon type="dashed" :style="iconStyle"/>
92
+ {{ button.buttonName }}
93
+ </a-button>
94
+ <a-button
95
+ v-if="allowedCardMode && !simpleMode"
96
+ @click="changeViewMode"
97
+ :type="isTableMode ? '' : 'primary'">
98
+ 看板模式
99
+ </a-button>
100
+ <a-badge
101
+ v-if="selectRowMode === 'listView'"
102
+ :count="selectedRows.length"
103
+ :number-style="{ backgroundColor:theme.color }"
104
+ >
105
+ <a-button
106
+ type="dashed"
107
+ @click="showTempData">
108
+ <a-icon :style="iconStyle" type="monitor"/>已选择
109
+ </a-button>
110
+ </a-badge>
111
+ <!-- 头部附加栅格 -->
112
+ <x-report
113
+ v-if="attachGrid"
114
+ :env="env"
115
+ :isWidget="true"
116
+ :use-oss-for-img="false"
117
+ :config-name="attachGrid"
118
+ :show-img-in-cell="true"
119
+ :display-only="true"
120
+ :edit-mode="false"
121
+ :show-save-button="false"
122
+ :dont-format="true"/>
123
+
124
+ <slot name="button" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
125
+ </a-space>
126
+
127
+ </span>
128
+ </a-col>
129
+ <a-col v-show="showRightTools && !simpleMode">
130
+ <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
131
+ <a-button-group>
132
+ <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
133
+ <a-tooltip title="汇总" placement="bottom">
134
+ <a-button @click="showDrawer">
135
+ <a-icon :style="iconStyle" type="project"/>
136
+ </a-button>
137
+ </a-tooltip>
138
+ <a-tooltip title="重新查询" placement="bottom">
139
+ <a-button @click="refresh(true)">
140
+ <a-icon :style="iconStyle" type="reload"/>
141
+ </a-button>
142
+ </a-tooltip>
143
+ <a-tooltip title="列展示/排序" placement="bottom">
144
+ <table-setting v-if="columnSelectLoaded" v-model="tableColumns"/>
145
+ </a-tooltip>
146
+ </a-button-group>
147
+ </span>
148
+ </a-col>
149
+ </a-row>
150
+ <!-- 如果当前是表格模式 -->
151
+ <template v-if="isTableMode">
152
+ <x-table-wrapper
153
+ ref="table"
154
+ @rowClick="handleRowClick"
155
+ @beforeDataChange="beforeDataChange"
156
+ @expand="onExpand">
157
+ <template slot="expandedRowRender">
158
+ <!-- 列扩展栅格 -->
159
+ <x-report
160
+ v-if="expandedGrid"
161
+ :env="env"
162
+ ref="report"
163
+ :isWidget="true"
164
+ :use-oss-for-img="false"
165
+ :config-name="expandedGrid"
166
+ :show-img-in-cell="true"
167
+ :display-only="true"
168
+ :edit-mode="false"
169
+ :show-save-button="false"
170
+ :dont-format="true"/>
171
+ </template>
172
+ <template slot="footer">
173
+ <slot
174
+ name="footer"
175
+ :selectedRowKeys="selectedRowKeys"
176
+ :selectedRows="selectedRows"></slot>
177
+ </template>
178
+ </x-table-wrapper>
179
+ </template>
180
+ <!-- 如果当前是看板模式 -->
181
+ <template v-else>
182
+ <XDataCard
183
+ ref="table"
184
+ @cardEmit="handleCardEmit"
185
+ :tableColumns="tableColumns"
186
+ :card-config="cardModeConfig"
187
+ :show-pagination="!simpleMode"
188
+ :prePageSize="simpleMode ? 1000 : undefined"
189
+ :serviceName="serviceName"
190
+ :card-data="loadData"
191
+ :env="env"
192
+ :createdQuery="createdQuery"
193
+ :simple-mode="simpleMode"/>
194
+ </template>
195
+ <!-- 上传文件 -->
196
+ <a-drawer
197
+ title="汇总信息"
198
+ placement="right"
199
+ :closable="false"
200
+ :visible="summaryDrawerVisible"
201
+ :z-index="2000"
202
+ :width="`${summaryDrawerWidth}vw`"
203
+ :after-visible-change="afterVisibleChange"
204
+ @close="onClose"
205
+ >
206
+ <template>
207
+ <a-row>
208
+ <a-col :span="8" v-for="(f,index) in summaryData" :key="index">
209
+ <a-statistic
210
+ :title="f.title + ':'"
211
+ :value="f.value"
212
+ :precision="2">
213
+ <template #prefix>
214
+ <a-spin :spinning="f.loading">
215
+ </a-spin>
216
+ </template>
217
+ <template #suffix>
218
+ <a-icon
219
+ v-show="!f.loading"
220
+ :type="f.success !== false ? 'check-circle' : 'close-circle'"
221
+ :style="{color: f.success !== false ? 'green' : 'red'}"/>
222
+ </template>
223
+ </a-statistic>
224
+ </a-col>
225
+ <a-col
226
+ :span="item.span"
227
+ v-for="(item,index) in chartsConfigArray"
228
+ :key="index"
229
+ style="height: 20rem; margin-bottom: 3rem">
230
+ <div class="custom-chart-title" v-if="item.config.title">{{ item.config.title }}</div>
231
+ <div class="custom-chart-desc" v-if="item.config.description">{{ item.config.description }}</div>
232
+ <g2Charts
233
+ :key="index"
234
+ :chatsKey="index"
235
+ :is-dev="env === 'dev'"
236
+ :config="item.config"
237
+ :requestParameters="requestParameters"/>
238
+ </a-col>
239
+ </a-row>
240
+ </template>
241
+ </a-drawer>
242
+ <x-import-excel
243
+ ref="importExcel"
244
+ @ok="importExcelOk"
245
+ :title="title"
246
+ :service-name="serviceName"
247
+ :env="env"
248
+ :query-params-name="queryParamsName"
249
+ >
250
+ <template #importExcelSlot>
251
+ <slot name="importExcelSlot"></slot>
252
+ </template>
253
+ </x-import-excel>
254
+ <ExportExcel
255
+ ref="exportExcel"
256
+ />
257
+ <a-modal @cancel="$refs.table.refresh()" v-model="selectedRowModalVisible" width="80vw" title="已选中数据" :footer="null">
258
+ <x-table-wrapper
259
+ ref="selectedDataTable"
260
+ :load-selected-data="true"
261
+ @beforeDataChange="beforeDataChange"
262
+ @rowClick="handleRowClick">
263
+ </x-table-wrapper>
264
+ </a-modal>
265
+ </div>
266
+ </template>
267
+ <script>
268
+ import { STable } from '@vue2-client/components'
269
+ import { getChangedData, setDataByRealKey } from '@vue2-client/utils/util'
270
+ import * as util from '@vue2-client/utils/util'
271
+ import TableSetting from '@vue2-client/components/TableSetting/TableSetting'
272
+ import {
273
+ query,
274
+ querySummary,
275
+ queryWithResource,
276
+ remove,
277
+ getConfigByNameAsync,
278
+ editRowSave,
279
+ runLogic
280
+ } from '@vue2-client/services/api/common'
281
+ import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
282
+ import { Modal } from 'ant-design-vue'
283
+ import { mapState } from 'vuex'
284
+ import { executeStrFunction, executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
285
+ import debounce from 'lodash.debounce'
286
+ import XDataCard from '@vue2-client/base-client/components/common/XDataCard/XDataCard.vue'
287
+ import { getRealKeyData } from '@vue2-client/utils/formatter'
288
+ import ReportTableHome from '../../../../pages/report/ReportTableHome.vue'
289
+ import CustomFuncCel from '@vue2-client/base-client/components/common/XTable/CustomFuncCel.vue'
290
+ import ExportExcel from '@vue2-client/base-client/components/common/XTable/ExportExcel.vue'
291
+ import g2Charts from '@vue2-client/components/g2Charts/index.vue'
292
+ import moment from 'moment/moment'
293
+ import XTableWrapper from './XTableWrapper.vue'
294
+
295
+ export default {
296
+ name: 'XTable',
297
+ components: {
298
+ ExportExcel,
299
+ CustomFuncCel,
300
+ XDataCard,
301
+ TableSetting,
302
+ STable,
303
+ XImportExcel,
304
+ g2Charts,
305
+ XReport: () => import('@vue2-client/base-client/components/common/XReportGrid/XReport.vue'),
306
+ ReportTableHome,
307
+ XTableWrapper
308
+ },
309
+ inject: ['getSelf'],
310
+ provide () {
311
+ return {
312
+ tableContext: this
313
+ }
314
+ },
315
+ data () {
316
+ return {
317
+ uniqueId: `x-table-${this._uid}`, // 使用 _uid 生成唯一 ID
318
+ // 筛选列加载状态
319
+ columnSelectLoaded: false,
320
+ // 预览模式
321
+ viewMode: false,
322
+ // 本地编辑模式
323
+ localEditMode: false,
324
+ // 本地编辑表单提交方式
325
+ formSubmitTypeInLocalEditMode: 'cover',
326
+ // 本地编辑模式所用数据源
327
+ localEditModeDataSource: [],
328
+ // 本地编辑模式数据源是否已由外部加载
329
+ isLocalDataSourceLoadedExternally: false,
330
+ // 行选择模式
331
+ rowSelectMode: false,
332
+ // 行选择模式-允许选中行数量,0:任意数量行,大于0:指定值数量的行
333
+ allowSelectRowNum: 0,
334
+ // 头部附件的栅格配置名
335
+ attachGrid: '',
336
+ // 表格行扩展区域的栅格配置名
337
+ expandedGrid: '',
338
+ // 是否展示右侧工具栏
339
+ showRightTools: true,
340
+ // 是否展示左边按钮栏
341
+ showLeftOperaBtn: true,
342
+ // 加载数据方法 必须为 Promise 对象
343
+ loadData: parameter => {
344
+ // 取到表格携带的表单参数
345
+ const requestParameters = Object.assign({}, parameter)
346
+ // 取到父组件传入的表单参数
347
+ const conditionParams = {}
348
+ Object.assign(conditionParams, this.fixedQueryForm)
349
+ Object.assign(conditionParams, this.form)
350
+ // 如果传了燃气公司字段,则进行数据处理
351
+ if (conditionParams.orgName) {
352
+ requestParameters.orgName = conditionParams.orgName
353
+ delete conditionParams.orgName
354
+ }
355
+ Object.keys(conditionParams).forEach(key => {
356
+ if (Array.isArray(conditionParams[key])) {
357
+ // 检查数组中是否包含 null
358
+ const hasNull = conditionParams[key].every(item => item === '') || conditionParams[key].length === 0
359
+ // 如果包含 null,则删除该属性
360
+ if (hasNull) {
361
+ delete conditionParams[key]
362
+ }
363
+ }
364
+ })
365
+ requestParameters.conditionParams = conditionParams
366
+ requestParameters.queryParamsName = this.queryParamsName
367
+ requestParameters.queryParams = this.queryParams && Object.keys(this.queryParams).length > 0 ? this.queryParams : undefined
368
+ this.requestParameters = requestParameters
369
+ // 加载数据
370
+ return this.loadTableData(requestParameters)
371
+ },
372
+ requestParameters: {},
373
+ rowKey: undefined,
374
+ // x滚动条宽度
375
+ scrollXWidth: 1600,
376
+ // y滚动条高度
377
+ scrollYHeight: 'calc(100vh - 31rem)',
378
+ // 表格选择列Key集合
379
+ selectedRowKeys: [],
380
+ // 表格选择Row集合
381
+ selectedRows: [],
382
+ // 表格选择列Key集合
383
+ innerSelectedRowKeys: [],
384
+ // 表格选择Row集合
385
+ innerSelectedRows: [],
386
+ // 禁止表格选择Row集合
387
+ selectedDisableRows: [],
388
+ // 业务标题
389
+ title: '',
390
+ // 数据列
391
+ tableColumns: [],
392
+ // 查询用表单
393
+ form: {},
394
+ oldForm: {},
395
+ // 是否允许修改
396
+ isModify: false,
397
+ // 是否允许删除
398
+ isDelete: false,
399
+ // 是否允许选择
400
+ isChoose: false,
401
+ // 选中用于修改的id
402
+ selectId: undefined,
403
+ // 是否显示展示列抽屉
404
+ visible: false,
405
+ // 编辑按钮加载状态
406
+ editLoading: false,
407
+ // 按钮状态
408
+ buttonState: {},
409
+ // eventBtnState
410
+ eventState: {},
411
+ // 自定义按钮数组
412
+ editButtonStateData: [],
413
+ // 按钮权限
414
+ buttonPermissions: [],
415
+ // 是否展示汇总
416
+ showSummary: false,
417
+ // 自定义汇总
418
+ showCustomSummary: false,
419
+ summaryData: [],
420
+ // 图标样式
421
+ iconStyle: {
422
+ position: 'relative',
423
+ top: '1px'
424
+ },
425
+ // 当前环境
426
+ env: 'prod',
427
+ // 预览模式(表格 or 看板)
428
+ isTableMode: true,
429
+ // 汇总抽屉是否显示
430
+ summaryDrawerVisible: false,
431
+ // 汇总更新标志
432
+ summaryUpdate: false,
433
+ customSummaryArray: [],
434
+ formItems: [],
435
+ // 是否为行编辑模式
436
+ isEditMode: false,
437
+ // 定义主键
438
+ primaryKey: '',
439
+ // 是否进行初始化查询
440
+ createdQuery: false,
441
+ // 允许看板模式
442
+ allowedCardMode: false,
443
+ // 看板模式配置
444
+ cardModeConfig: undefined,
445
+ // 暂存行编辑前数据 用于比较哪些变化了才需要保存
446
+ editRowBeforeData: [],
447
+ // 是否简易模式
448
+ simpleMode: false,
449
+ // crud打印模板配置
450
+ printTemplate: false,
451
+ queryParams: {},
452
+ // 定义总行数
453
+ totalCount: 0,
454
+ user: {},
455
+ chartsConfigArray: [],
456
+ summaryDrawerWidth: 35,
457
+ // 行选择模式
458
+ selectRowMode: 'default',
459
+ tableSize: 'default',
460
+ clearSelectRowAfterQuery: false,
461
+ selectedRowModalVisible: false
462
+ }
463
+ },
464
+ props: {
465
+ // 查询配置文件名
466
+ queryParamsName: {
467
+ type: String,
468
+ default: () => {
469
+ return ''
470
+ }
471
+ },
472
+ // 查询配置文件名
473
+ serviceName: {
474
+ type: String,
475
+ default: () => {
476
+ return ''
477
+ }
478
+ },
479
+ // 查询配置文件Json
480
+ queryParamsJson: {
481
+ type: Object,
482
+ default: null
483
+ },
484
+ // 固定查询表单
485
+ fixedQueryForm: {
486
+ type: Object,
487
+ default: () => {
488
+ return {}
489
+ }
490
+ },
491
+ // 数据只有一页时是否展示分页,true:展示,auto:隐藏
492
+ showPagination: {
493
+ type: Boolean,
494
+ default: true
495
+ },
496
+ // 是否自定义删除功能
497
+ customDelete: {
498
+ type: Boolean,
499
+ default: false
500
+ },
501
+ // 自适应底部边距
502
+ extraHeight: {
503
+ type: Number,
504
+ default: 80
505
+ },
506
+ pageMaxSize: {
507
+ type: Number,
508
+ default: null
509
+ },
510
+ // 外部传入的选中行keys
511
+ externalSelectedRowKeys: {
512
+ type: Array,
513
+ default: () => []
514
+ }
515
+ },
516
+ computed: {
517
+ ...mapState('setting', ['theme']),
518
+ rowSelection () {
519
+ return this.selectRowMode === 'disabled' ? undefined : {
520
+ selectedRowKeys: this.innerSelectedRowKeys,
521
+ onChange: this.onSelectChange,
522
+ onSelect: this.selectRowMode === 'listView' ? this.onSelect : undefined,
523
+ onSelectAll: this.selectRowMode === 'listView' ? this.onSelectAll : undefined,
524
+ getCheckboxProps: record => ({
525
+ props: {
526
+ disabled: this.selectedDisableRows.includes(record[this.rowKey]), // Column configuration not to be checked
527
+ name: record.name,
528
+ },
529
+ }),
530
+ }
531
+ },
532
+ ...mapState('account', { currUser: 'user' }),
533
+ ...mapState('setting', ['compatible'])
534
+ },
535
+ watch: {
536
+ pageMaxSize: {
537
+ handler (val) {
538
+ if (this.tableContext) {
539
+ this.tableContext.pageMaxSize = val
540
+ }
541
+ },
542
+ immediate: true
543
+ },
544
+ externalSelectedRowKeys: {
545
+ handler (newVal) {
546
+ // 如果新值和当前值相同,则不处理
547
+ if (JSON.stringify(newVal) === JSON.stringify(this.selectedRowKeys)) {
548
+ return
549
+ }
550
+ if (newVal && newVal.length > 0) {
551
+ this.$nextTick(() => {
552
+ this.updateTableSelection(newVal)
553
+ })
554
+ }
555
+ }
556
+ }
557
+ },
558
+ mounted () {
559
+ window.addEventListener('resize', this.handleResize)
560
+ // 初始化时如果有外部选中值,等待 table 准备好后设置
561
+ if (this.externalSelectedRowKeys && this.externalSelectedRowKeys.length > 0) {
562
+ this.$nextTick(() => {
563
+ this.updateTableSelection(this.externalSelectedRowKeys)
564
+ })
565
+ }
566
+ },
567
+ beforeDestroy () {
568
+ // 销毁页面查询定时器
569
+ if (this.queryTimer) {
570
+ clearInterval(this.queryTimer)
571
+ }
572
+ window.removeEventListener('resize', this.handleResize)
573
+ },
574
+ methods: {
575
+ showTempData () {
576
+ this.selectedRowModalVisible = true
577
+ this.$nextTick(() => {
578
+ if (this.$refs.selectedDataTable) {
579
+ // 确保数据已经准备好
580
+ const selectedData = this.selectedRows.map(row => ({ ...row }))
581
+ this.$refs.selectedDataTable.refresh(true)
582
+ // 等待数据加载完成后再更新选中状态
583
+ setTimeout(() => {
584
+ if (this.$refs.selectedDataTable) {
585
+ this.$refs.selectedDataTable.updateSelect(
586
+ selectedData.map(row => row[this.primaryKey || this.rowKey]),
587
+ selectedData
588
+ )
589
+ }
590
+ }, 100)
591
+ }
592
+ })
593
+ },
594
+ customFunctionShow (customFunction, record, cIndex) {
595
+ return executeStrFunctionByContext(this, customFunction, [record, cIndex])
596
+ },
597
+ getConfigByNameAsync,
598
+ runLogic,
599
+ executeStrFunctionByContext,
600
+ columnClick (key, value, record) {
601
+ this.$emit('columnClick', key, value, record)
602
+ },
603
+ gotoUserDetail (key, value, record) {
604
+ this.$emit('gotoUserDetail', key, value, record)
605
+ },
606
+ // 打开行编辑
607
+ openEditMode () {
608
+ this.isEditMode = true
609
+ this.editRowBeforeData = JSON.parse(JSON.stringify(this.getTableData()))
610
+ },
611
+ // 标记行保存
612
+ editRowSave () {
613
+ // 获取最新数据
614
+ const editRowAfterData = this.getTableData()
615
+ const changeData = getChangedData(this.editRowBeforeData, editRowAfterData)
616
+ if (this.eventState?.customSave) {
617
+ this.custom('customSave', {
618
+ tableData: editRowAfterData,
619
+ changeData
620
+ })
621
+ return
622
+ }
623
+ if (changeData.length === 0) {
624
+ this.$message.info('没有数据发生变化')
625
+ } else {
626
+ Modal.confirm({
627
+ title: '是否确认保存?',
628
+ content: `此操作将保存当前行编辑的数据,共修改${changeData.length}条数据`,
629
+ zIndex: 1001,
630
+ onOk: () => {
631
+ return new Promise((resolve, reject) => {
632
+ const requestParameters = {
633
+ queryParamsName: this.queryParamsName,
634
+ changeData: changeData.map(h => getRealKeyData(h)),
635
+ operaInfo: this.currUser.operaInfo
636
+ }
637
+ editRowSave(requestParameters, this.serviceName, this.env === 'dev').then(res => {
638
+ this.$message.success('行内数据保存成功')
639
+ this.isEditMode = false
640
+ this.refresh()
641
+ resolve(res)
642
+ }).catch(e => {
643
+ reject(e)
644
+ this.$message.error('保存失败!')
645
+ })
646
+ })
647
+ },
648
+ onCancel () {
649
+ }
650
+ })
651
+ }
652
+ },
653
+ importExcelOk (data) {
654
+ this.refresh(true)
655
+ this.$emit('importExcelOk', data)
656
+ },
657
+ /**
658
+ * 行选择事件
659
+ * @param row 选中行集合
660
+ * @param attr 表单项属性
661
+ */
662
+ async rowChoose (row, attr, callback, record) {
663
+ // 如果配置了自定义函数
664
+ if (attr.dataChangeFunc) {
665
+ await executeStrFunction(attr.dataChangeFunc, [record, this.setForm, {
666
+ ...attr,
667
+ selectRows: row
668
+ }, util, this.getSelf(), this.mode, runLogic, getConfigByNameAsync])
669
+ } else {
670
+ // 默认填充选中行数据到当前表单
671
+ setDataByRealKey(record, row[0])
672
+ }
673
+ if (callback) {
674
+ callback()
675
+ }
676
+ },
677
+ setForm (record, obj) {
678
+ Object.assign(record, obj)
679
+ this.$forceUpdate()
680
+ },
681
+ handleResize () {
682
+ debounce(() => {
683
+ this.setScrollYHeight({})
684
+ }, 100)()
685
+ },
686
+ isInAModal () {
687
+ let parent = this.$parent
688
+ while (parent) {
689
+ // 检查组件名称,这里假设a-modal组件的名称为AModal,根据实际情况可能需要调整
690
+ if (parent.$options.name === 'AModal') {
691
+ return true
692
+ }
693
+ parent = parent.$parent
694
+ }
695
+ return false
696
+ },
697
+ executeStrFunction,
698
+ // 切换看板模式和表格模式
699
+ changeViewMode () {
700
+ this.isTableMode = !this.isTableMode
701
+ // 看板切换回表格模式 刷新列表
702
+ this.refresh(true)
703
+ },
704
+ /**
705
+ * 初始化表格参数
706
+ */
707
+ init (params) {
708
+ const {
709
+ // 查询参数对象, 用于没有对应查询配置文件名时
710
+ queryParams,
711
+ tableColumns,
712
+ attachGrid,
713
+ expandedGrid,
714
+ buttonState,
715
+ eventState = {},
716
+ buttonPermissions,
717
+ editButtonStateData = [],
718
+ title,
719
+ form,
720
+ tableSummaryMap = {},
721
+ customTableSummaryArray = [],
722
+ viewMode,
723
+ localEditMode,
724
+ formSubmitTypeInLocalEditMode = 'cover',
725
+ rowSelectMode,
726
+ allowSelectRowNum = 0,
727
+ formItems,
728
+ env = 'prod',
729
+ createdQuery = true,
730
+ createdEditMode = false,
731
+ primaryKey,
732
+ allowedCardMode = false,
733
+ simpleMode = false,
734
+ showRightTools = true,
735
+ cardModeConfig,
736
+ summaryUpdate,
737
+ summaryDrawerWidth = 35,
738
+ chartsConfigArray = [],
739
+ printTemplate = 'DEFAULT_CRUD_PRINT_TEMPLATE',
740
+ selectRowMode = 'default',
741
+ tableSize = 'default',
742
+ clearSelectRowAfterQuery = false
743
+ } = params
744
+ this.showSummary = Object.keys(tableSummaryMap).length > 0
745
+ if (this.showSummary) {
746
+ Object.keys(tableSummaryMap).forEach(item => {
747
+ this.summaryData.push({
748
+ key: item,
749
+ title: tableSummaryMap[item],
750
+ value: ' ',
751
+ loading: true,
752
+ success: false
753
+ })
754
+ })
755
+ }
756
+ if (customTableSummaryArray.length > 0) {
757
+ customTableSummaryArray.forEach(item => {
758
+ this.summaryData.push({
759
+ key: item.key,
760
+ title: item.title,
761
+ value: ' ',
762
+ loading: true,
763
+ success: false
764
+ })
765
+ })
766
+ this.showCustomSummary = true
767
+ this.customSummaryArray = customTableSummaryArray
768
+ }
769
+ this.queryParams = queryParams
770
+ this.tableColumns = JSON.parse(JSON.stringify(tableColumns))
771
+ if (this.tableColumns.length === 0) {
772
+ return
773
+ }
774
+ this.attachGrid = attachGrid
775
+ this.expandedGrid = expandedGrid
776
+ this.viewMode = viewMode
777
+ this.localEditMode = localEditMode
778
+ this.formSubmitTypeInLocalEditMode = formSubmitTypeInLocalEditMode
779
+ this.rowSelectMode = rowSelectMode
780
+ this.allowSelectRowNum = allowSelectRowNum
781
+ this.simpleMode = simpleMode
782
+ this.formItems = formItems
783
+ this.user = this.currUser
784
+ this.createdQuery = createdQuery
785
+ this.primaryKey = primaryKey
786
+ this.buttonState = buttonState
787
+ this.eventState = eventState
788
+ this.showRightTools = showRightTools
789
+ this.printTemplate = printTemplate
790
+ this.summaryDrawerWidth = summaryDrawerWidth
791
+ this.chartsConfigArray = chartsConfigArray
792
+ this.selectRowMode = selectRowMode
793
+ this.tableSize = tableSize
794
+ this.clearSelectRowAfterQuery = clearSelectRowAfterQuery
795
+ if (this.chartsConfigArray.length > 0) {
796
+ // 循环chartsConfigArray,将每个配置的数据请求参数赋值给requestParameters
797
+ this.chartsConfigArray.forEach(item => {
798
+ item.config.queryParams = JSON.parse(JSON.stringify(this.queryParams))
799
+ item.config.queryParamsName = this.queryParamsName
800
+ })
801
+ }
802
+ if (this.localEditMode) {
803
+ this.localEditModeDataSource = []
804
+ if (this.formSubmitTypeInLocalEditMode === 'append') {
805
+ this.isLocalDataSourceLoadedExternally = true
806
+ const defaultItem = {}
807
+ defaultItem['序号'] = 0
808
+ this.localEditModeDataSource.push(defaultItem)
809
+ } else {
810
+ this.isLocalDataSourceLoadedExternally = false
811
+ }
812
+ this.buttonState.import = false
813
+ this.buttonState.export = false
814
+ this.showRightTools = false
815
+ }
816
+ if (this.rowSelectMode) {
817
+ this.buttonState = {
818
+ choose: true
819
+ }
820
+ this.showRightTools = false
821
+ }
822
+ this.buttonPermissions = buttonPermissions
823
+ this.editButtonStateData = editButtonStateData
824
+ this.title = title
825
+ this.env = env
826
+ this.rowKey = this.getPrimaryKeyName()
827
+ this.allowedCardMode = allowedCardMode
828
+ this.cardModeConfig = cardModeConfig
829
+ this.summaryUpdate = summaryUpdate
830
+ this.isEditMode = createdEditMode
831
+ let totalWidth = 0
832
+ for (let i = 0; i < this.tableColumns.length; i++) {
833
+ const item = this.tableColumns[i]
834
+ // 设置操作列
835
+ if (item.slotType === 'action') {
836
+ item.fixed = 'right'
837
+ item.width = 70
838
+ }
839
+ // 设置表格宽度
840
+ if (item.width) {
841
+ totalWidth = totalWidth + item.width
842
+ } else {
843
+ totalWidth = totalWidth + 180
844
+ }
845
+ }
846
+ // 横向滚动长度大于所有宽度,才能实现固定表头
847
+ this.scrollXWidth = totalWidth
848
+ // 加载筛选列完成
849
+ this.columnSelectLoaded = true
850
+ this.setQueryForm(form || {})
851
+ // 简易模式,并且是看板模式,默认直接进入看板模式
852
+ if (this.allowedCardMode && this.simpleMode) {
853
+ this.isTableMode = false
854
+ }
855
+ if (params.queryInterval) {
856
+ this.queryTimer = setInterval(() => {
857
+ this.refresh()
858
+ }, params.queryInterval * 1000)
859
+ }
860
+ },
861
+ // 操作面板按钮渲染
862
+ buttonRendering (button) {
863
+ if (!this.buttonPermissions) {
864
+ return true
865
+ }
866
+ try {
867
+ const existingItem = this.buttonPermissions.find(item => item.btnName === button)
868
+ const rolestr = this.currUser.rolestr?.split(',')
869
+ if (existingItem?.state) {
870
+ const currUserRole = existingItem.roleStr
871
+ return rolestr.some(item => currUserRole && currUserRole.includes(item))
872
+ } else {
873
+ return true
874
+ }
875
+ } catch (e) {
876
+ console.error(e)
877
+ return false
878
+ }
879
+ },
880
+ // 防止查询多次点击处理
881
+ loadTableData (requestParameters) {
882
+ if (this.queryPromise) {
883
+ return this.queryPromise
884
+ }
885
+ this.queryPromise = this.loadTableDataGen(requestParameters).finally(() => {
886
+ this.queryPromise = undefined
887
+ })
888
+ return this.queryPromise
889
+ },
890
+ /**
891
+ * 加载表格数据
892
+ * @param requestParameters 请求参数
893
+ */
894
+ async loadTableDataGen (requestParameters) {
895
+ let result
896
+ if (this.localEditMode) {
897
+ if (!this.isLocalDataSourceLoadedExternally && requestParameters?.conditionParams && Object.keys(requestParameters?.conditionParams).length > 0) {
898
+ const result = await query(Object.assign(requestParameters, { userId: this.currUser?.id }),
899
+ this.serviceName, this.env === 'dev')
900
+ if (result.data) {
901
+ let no = 0
902
+ this.localEditModeDataSource = result.data.map(item => {
903
+ item['序号'] = no
904
+ no++
905
+ return item
906
+ })
907
+ }
908
+ this.isLocalDataSourceLoadedExternally = true
909
+ }
910
+ result = new Promise((resolve) => {
911
+ resolve({
912
+ data: this.localEditModeDataSource
913
+ })
914
+ })
915
+ } else {
916
+ result = query(Object.assign(requestParameters, { userId: this.currUser?.id }), this.serviceName, this.env === 'dev')
917
+ result.then(res => {
918
+ this.totalCount = res.totalCount || 0
919
+ // 在数据加载完成后,立即检查并更新选中状态
920
+ if (this.selectRowMode !== 'disabled' && !this.clearSelectRowAfterQuery) {
921
+ // 找出当前页中应该被选中的行
922
+ const currentPageSelectedRows = res.data.filter(row =>
923
+ this.selectedRowKeys.includes(row[this.primaryKey || this.rowKey])
924
+ )
925
+ // 更新表格的选中状态
926
+ this.$nextTick(() => {
927
+ // 更新内部选中状态
928
+ this.innerSelectedRowKeys = currentPageSelectedRows.map(row => row[this.primaryKey || this.rowKey])
929
+ this.innerSelectedRows = currentPageSelectedRows
930
+ // 更新表格显示
931
+ this.$refs.table.updateSelect(this.innerSelectedRowKeys, this.innerSelectedRows)
932
+ // 更新总选中状态
933
+ if (currentPageSelectedRows.length > 0) {
934
+ // 保留不在当前页面的已选中行
935
+ const otherPageSelectedRows = this.selectedRows.filter(row =>
936
+ !currentPageSelectedRows.some(currentRow =>
937
+ currentRow[this.primaryKey || this.rowKey] === row[this.primaryKey || this.rowKey]
938
+ )
939
+ )
940
+ // 合并当前页面和其他页面的选中行
941
+ this.selectedRows = [...otherPageSelectedRows, ...currentPageSelectedRows]
942
+ }
943
+ this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
944
+ })
945
+ }
946
+ })
947
+ }
948
+
949
+ if (this.selectRowMode === 'listView' && !this.clearSelectRowAfterQuery) {
950
+ this.$refs.table.updateSelect(this.selectedRowKeys, this.selectedRows)
951
+ } else if (this.isTableMode && !this.simpleMode) {
952
+ this.clearRowKeys()
953
+ }
954
+ this.$emit('afterQuery', result, requestParameters.conditionParams)
955
+ return result
956
+ },
957
+ /**
958
+ * 操作列事件
959
+ * @param record 本条数据
960
+ * @param actionType 操作类型
961
+ * @param func 事件默认 action
962
+ * @param index 行下标
963
+ */
964
+ action (record, actionType, func = 'action', index) {
965
+ this.$emit('action', record, record[this.getPrimaryKeyName()], actionType, func, index)
966
+ },
967
+ // 看板点击事件
968
+ handleCardEmit (data, eventName) {
969
+ this.action(data, undefined, eventName)
970
+ },
971
+ /**
972
+ * 选择列勾选改变事件
973
+ * @param record 被选择的列数据
974
+ * @param selected 是否选中
975
+ * @param selectedRows 被选择的列集合
976
+ * @param nativeEvent 原生事件
977
+ */
978
+ onSelect (record, selected, selectedRows, nativeEvent) {
979
+ if (this.selectRowMode === 'listView') {
980
+ // 获取主键数据
981
+ const primaryData = record[this.primaryKey]
982
+ // 取消勾选时
983
+ if (!selected) {
984
+ this.selectedRowKeys = this.selectedRowKeys.filter(item => item !== primaryData)
985
+ this.selectedRows = this.selectedRows.filter(item => item[this.primaryKey] !== primaryData)
986
+ }
987
+ }
988
+ },
989
+ /**
990
+ * 选择列全选事件
991
+ * @param selected 是否选中
992
+ * @param selectedRows 被选择的列集合
993
+ * @param changeRows 改变的行集合
994
+ */
995
+ onSelectAll (selected, selectedRows, changeRows) {
996
+ console.log('onSelectAll', selected, selectedRows, changeRows)
997
+ if (this.selectRowMode === 'listView') {
998
+ if (!selected) {
999
+ // 获取所有改变的key
1000
+ const changeKeys = changeRows.map(item => item[this.primaryKey])
1001
+ this.selectedRowKeys = this.selectedRowKeys.filter(item => !changeKeys.includes(item))
1002
+ this.selectedRows = this.selectedRows.filter(item => !changeKeys.includes(item[this.primaryKey]))
1003
+ }
1004
+ }
1005
+ },
1006
+ /**
1007
+ * 选择列数据改变事件
1008
+ * @param currentPageSelectedKeys 被选择的列Key集合
1009
+ * @param currentPageSelectedRows 被选择的列集合
1010
+ */
1011
+ onSelectChange (currentPageSelectedKeys, currentPageSelectedRows) {
1012
+ console.log('currentPageSelectedKeys', currentPageSelectedKeys)
1013
+ // 这里的 currentPageSelectedKeys 和 currentPageSelectedRows 是当前页选中状态改变后的数据
1014
+ if (this.selectRowMode === 'listView' && !this.clearSelectRowAfterQuery) {
1015
+ if (this.primaryKey) {
1016
+ const primaryKeyName = this.primaryKey || this.rowKey
1017
+ // 获取当前页面所有行的key
1018
+ const currentPageAllKeys = this.$refs.table.localDataSource.map(row => row[primaryKeyName])
1019
+ // 找出当前页新选中的 keys (之前未选中但现在选中了)
1020
+ const newlySelectedKeysOnPage = currentPageSelectedKeys.filter(key => !this.selectedRowKeys.includes(key))
1021
+ // 找出当前页被取消选中的 keys (之前选中但现在未选中了)
1022
+ const deselectedKeysOnPage = this.selectedRowKeys.filter(key => currentPageAllKeys.includes(key) && !currentPageSelectedKeys.includes(key))
1023
+ // 更新总的 selectedRowKeys: 移除被取消选中的,添加新选中的
1024
+ this.selectedRowKeys = this.selectedRowKeys.filter(key => !deselectedKeysOnPage.includes(key))
1025
+ this.selectedRowKeys = [...this.selectedRowKeys, ...newlySelectedKeysOnPage]
1026
+ // 更新总的 selectedRows: 移除被取消选中的行对象,添加新选中的行对象
1027
+ // 从当前页数据源中找到被取消选中的行对象
1028
+ const deselectedRowsOnPage = this.$refs.table.localDataSource.filter(row => deselectedKeysOnPage.includes(row[primaryKeyName]))
1029
+ // 移除被取消选中的行对象
1030
+ const selectedRowsWithoutDeselected = this.selectedRows.filter(row => !deselectedRowsOnPage.some(deselectedRow => deselectedRow[primaryKeyName] === row[primaryKeyName]))
1031
+ // 从当前页数据源中找到新选中的行对象
1032
+ const newlySelectedRowsOnPage = this.$refs.table.localDataSource.filter(row => newlySelectedKeysOnPage.includes(row[primaryKeyName]))
1033
+ // 添加新选中的行对象 (需要去重,以防其他页面已包含此行)
1034
+ const finalSelectedRows = [...selectedRowsWithoutDeselected]
1035
+ const finalSelectedRowKeysMap = new Map()
1036
+ for (const row of finalSelectedRows) {
1037
+ finalSelectedRowKeysMap.set(row[primaryKeyName], true)
1038
+ }
1039
+
1040
+ for (const row of newlySelectedRowsOnPage) {
1041
+ const key = row[primaryKeyName]
1042
+ if (!finalSelectedRowKeysMap.has(key)) {
1043
+ finalSelectedRowKeysMap.set(key, true)
1044
+ finalSelectedRows.push(row)
1045
+ }
1046
+ }
1047
+ this.selectedRows = finalSelectedRows
1048
+ } else {
1049
+ // 如果没有主键,则直接使用当前选中的行(此情况可能无法跨页选中,但为了兼容保留)
1050
+ this.selectedRowKeys = currentPageSelectedKeys
1051
+ this.selectedRows = currentPageSelectedRows
1052
+ }
1053
+ } else {
1054
+ // 非 listView 模式或 clearSelectRowAfterQuery 为 true,直接使用当前页的选中状态作为总状态
1055
+ this.selectedRowKeys = currentPageSelectedKeys
1056
+ this.selectedRows = currentPageSelectedRows
1057
+ }
1058
+
1059
+ // 更新内部状态和表格显示 (即使在 listView 模式下,内部状态也需要同步以更新表格显示)
1060
+ this.innerSelectedRowKeys = currentPageSelectedKeys
1061
+ this.innerSelectedRows = currentPageSelectedRows
1062
+ // 确保在DOM更新后调用 updateSelect,以正确反映当前页的选中状态
1063
+ this.$nextTick(() => {
1064
+ this.$refs.table.updateSelect(this.innerSelectedRowKeys, this.innerSelectedRows)
1065
+ })
1066
+
1067
+ // 更新按钮状态基于总选中数量
1068
+ this.isModify = this.selectedRowKeys.length === 1
1069
+ this.isDelete = this.selectedRowKeys.length > 0
1070
+ this.isChoose = this.allowSelectRowNum === 0 ? this.selectedRowKeys.length > 0 : this.selectedRowKeys.length === this.allowSelectRowNum
1071
+
1072
+ // 触发选择事件,传递总的选中数据
1073
+ this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
1074
+ },
1075
+ /**
1076
+ * 清除表格选中项
1077
+ */
1078
+ clearRowKeys () {
1079
+ this.$refs.table.clearSelected()
1080
+ },
1081
+ /**
1082
+ * 为表格附加查询条件
1083
+ */
1084
+ setQueryForm (form = {}) {
1085
+ this.form = form
1086
+ if (this.createdQuery) {
1087
+ this.refresh(true)
1088
+ } else {
1089
+ this.createdQuery = true
1090
+ }
1091
+ },
1092
+ /**
1093
+ * 表格重新加载方法
1094
+ * 如果参数为 true, 则强制刷新到第一页
1095
+ */
1096
+ refresh (bool) {
1097
+ this.$nextTick(() => {
1098
+ this.$refs.table.refresh(bool)
1099
+ })
1100
+ },
1101
+ setScrollYHeight ({ extraHeight = this.extraHeight, id = this.uniqueId, type = '' }) {
1102
+ this.$nextTick(() => {
1103
+ setTimeout(() => {
1104
+ const curDocument = window?.rawDocument || document
1105
+ const innerHeight = window?.rawWindow?.innerHeight || window.innerHeight || 0
1106
+ if (typeof extraHeight == 'undefined') {
1107
+ // 默认底部分页32 + 边距48
1108
+ extraHeight = 48 + 32
1109
+ }
1110
+ let tHeader = null
1111
+ if (id) {
1112
+ tHeader = curDocument.getElementById(id) ? curDocument.getElementById(id).getElementsByClassName('ant-table-thead')[0] : null
1113
+ } else {
1114
+ tHeader = curDocument.getElementsByClassName('ant-table-thead')[0]
1115
+ }
1116
+ // 表格内容距离顶部的距离
1117
+ let tHeaderBottom = 0
1118
+ if (tHeader) {
1119
+ tHeaderBottom = tHeader.getBoundingClientRect().bottom
1120
+ }
1121
+ if (tHeaderBottom === 0) {
1122
+ this.scrollYHeight = 'calc(100vh - 31rem)'
1123
+ if (window.__MICRO_APP_ENVIRONMENT__) {
1124
+ this.scrollYHeight = 'calc(100vh - 28.5rem)'
1125
+ }
1126
+ return
1127
+ }
1128
+
1129
+ // 判断是否在 modal
1130
+ if (this.isInAModal()) {
1131
+ let modalElement = null
1132
+ if (tHeader) {
1133
+ modalElement = tHeader.closest('.ant-modal-body')
1134
+ } else {
1135
+ modalElement = curDocument.querySelector('.ant-modal-body')
1136
+ }
1137
+ if (modalElement) {
1138
+ const modalRect = modalElement.getBoundingClientRect()
1139
+ // 48 是 modal 通常的边距 32 是分页
1140
+ extraHeight = innerHeight - modalRect.bottom + 32 + 48
1141
+ }
1142
+ }
1143
+ if (innerHeight - (tHeaderBottom + extraHeight) < 210) {
1144
+ this.scrollYHeight = 'calc(100vh - 31rem)'
1145
+ return
1146
+ }
1147
+ // 窗体高度-表格内容顶部的高度-表格内容底部的高度
1148
+ // this.scrollYHeight = document.body.clientHeight - tHeaderBottom - extraHeight
1149
+ this.scrollYHeight = `calc(100vh - ${tHeaderBottom + extraHeight}px)`
1150
+ }, 60)
1151
+ })
1152
+ },
1153
+ /**
1154
+ * 获取主键列名称
1155
+ */
1156
+ getPrimaryKeyName () {
1157
+ if (this.primaryKey) {
1158
+ return this.primaryKey
1159
+ }
1160
+ const indexColumn = this.tableColumns.find(i => i?.slotType === 'index')
1161
+ return indexColumn ? indexColumn.dataIndex : this.tableColumns[0].dataIndex
1162
+ },
1163
+ handleExport (type) {
1164
+ this.$refs.exportExcel.handleExport(type, this.title)
1165
+ },
1166
+ handlePrint (type) {
1167
+ const printData = {
1168
+ title: this.title,
1169
+ form: this.form,
1170
+ operaInfo: this.currUser.operaInfo,
1171
+ operaTime: moment().format('YYYY-MM-DD HH:mm:ss'),
1172
+ summary: this.retrieveSummaryData
1173
+ }
1174
+ this.$refs.exportExcel.handlePrint(type, printData)
1175
+ },
1176
+ validateTableAndSyncData (currRow, defaultAppendRowData) {
1177
+ let isLastRow = false
1178
+ if (this.localEditModeDataSource.length === 0) {
1179
+ isLastRow = true
1180
+ } else if (currRow['序号'] === this.localEditModeDataSource[this.localEditModeDataSource.length - 1]['序号']) {
1181
+ isLastRow = true
1182
+ }
1183
+ if (isLastRow) {
1184
+ this.appendLocalData(defaultAppendRowData)
1185
+ }
1186
+ },
1187
+ // 新增业务
1188
+ add () {
1189
+ if (this.eventState?.customAdd) {
1190
+ this.custom('customAdd', {})
1191
+ return
1192
+ }
1193
+ if (this.localEditMode && this.isEditMode) {
1194
+ this.appendLocalData({})
1195
+ } else {
1196
+ this.$emit('add')
1197
+ }
1198
+ },
1199
+ // 添加业务
1200
+ move () {
1201
+ this.$emit('move')
1202
+ },
1203
+ // 通用事件业务
1204
+ custom (func) {
1205
+ this.$emit('customEvent', func)
1206
+ },
1207
+ // 编辑业务
1208
+ edit (id) {
1209
+ this.editLoading = true
1210
+ this.getEditData(id).then(modifyModelData => {
1211
+ if (this.eventState?.customEdit) {
1212
+ this.custom('customEdit', { id, modifyModelData })
1213
+ return
1214
+ }
1215
+ this.$emit('edit', modifyModelData)
1216
+ this.editLoading = false
1217
+ })
1218
+ },
1219
+ // 行选择业务
1220
+ choose () {
1221
+ if (this.isChoose) {
1222
+ // 如果配置了自定义函数
1223
+ this.$emit('rowChoose', this.selectedRows)
1224
+ } else {
1225
+ this.$message.warning(this.allowSelectRowNum === 0 ? '请选择数据' : `请选择${this.allowSelectRowNum}条数据`)
1226
+ }
1227
+ },
1228
+ // 自定义按钮点击
1229
+ editButtonStateDataClick (index) {
1230
+ this.$emit('editButtonStateDataClick', this.editButtonStateData[index].functionName, this.selectedRows)
1231
+ },
1232
+ // 获取被编辑的数据
1233
+ getEditData (id) {
1234
+ if (!id) {
1235
+ this.selectId = this.selectedRowKeys[0]
1236
+ } else {
1237
+ this.selectId = id
1238
+ }
1239
+ const primaryKeyName = this.getPrimaryKeyName()
1240
+ if (this.tableColumns[0].dataIndex !== primaryKeyName) {
1241
+ this.selectId = this.selectedRows[0][primaryKeyName]
1242
+ }
1243
+ // 将更新需要的主键值加入到primaryKeyData中
1244
+ const primaryKeyData = {}
1245
+ primaryKeyData[primaryKeyName] = this.selectId
1246
+ if (this.localEditMode) {
1247
+ return new Promise((resolve) => {
1248
+ const modifyData = this.getDataByRowKeyValue(this.selectId)
1249
+ resolve({
1250
+ data: modifyData,
1251
+ primaryKeyData: primaryKeyData
1252
+ })
1253
+ })
1254
+ }
1255
+ const requestParameters = {
1256
+ queryParamsName: this.queryParamsName,
1257
+ queryParams: this.queryParams && Object.keys(this.queryParams).length > 0 ? this.queryParams : undefined,
1258
+ conditionParams: {},
1259
+ pageNo: 1,
1260
+ pageSize: 1
1261
+ }
1262
+ requestParameters.conditionParams[primaryKeyName] = this.selectId
1263
+ requestParameters.f_businessid = this.selectId
1264
+ return queryWithResource(requestParameters, this.serviceName, this.env === 'dev').then(res => {
1265
+ return { data: res.data[0], primaryKeyData: primaryKeyData, images: res.images, files: res.files }
1266
+ })
1267
+ },
1268
+ // 删除业务
1269
+ deleteItem () {
1270
+ if (this.viewMode) {
1271
+ this.$message.info('预览模式禁止删除')
1272
+ return
1273
+ }
1274
+ Modal.confirm({
1275
+ title: '提示',
1276
+ content: '您本次要删除共' + this.selectedRowKeys.length + '条数据,确定操作吗?',
1277
+ zIndex: 1001,
1278
+ onOk: () => {
1279
+ const requestParameters = {
1280
+ queryParamsName: this.queryParamsName,
1281
+ idList: this.selectedRowKeys
1282
+ }
1283
+ if (this.eventState?.customDelete) {
1284
+ this.custom('customDelete', {
1285
+ selectedRowKeys: this.selectedRowKeys,
1286
+ selectedRows: this.selectedRows
1287
+ })
1288
+ return
1289
+ }
1290
+ return new Promise((resolve, reject) => {
1291
+ if (this.localEditMode) {
1292
+ this.localEditModeDataSource = this.getLocalData().filter(item => !this.selectedRowKeys.includes(item[this.rowKey]))
1293
+ resolve(200)
1294
+ this.$message.success('删除成功!')
1295
+ this.refresh(true)
1296
+ // afterDelete
1297
+ this.$emit('afterDelete', requestParameters)
1298
+ } else if (this.customDelete) {
1299
+ this.$emit('del', this.selectedRows, resolve)
1300
+ } else {
1301
+ remove(requestParameters, this.serviceName, this.env === 'dev').then(res => {
1302
+ resolve(res)
1303
+ this.$message.success('删除成功!')
1304
+ this.refresh(true)
1305
+ // afterDelete
1306
+ this.$emit('afterDelete', requestParameters)
1307
+ }).catch(e => {
1308
+ reject(e)
1309
+ this.$message.error('删除失败!')
1310
+ })
1311
+ }
1312
+ })
1313
+ },
1314
+ onCancel () {
1315
+ }
1316
+ })
1317
+ },
1318
+ // 导入业务
1319
+ importData () {
1320
+ this.$refs.importExcel.importExcelHandleOpen()
1321
+ },
1322
+ afterVisibleChange (val) {
1323
+ if (val) {
1324
+ this.retrieveSummaryData()
1325
+ }
1326
+ },
1327
+ async retrieveSummaryData () {
1328
+ const promises = []
1329
+
1330
+ if (this.requestParameters.querySummary) {
1331
+ const querySummaryPromise = querySummary(Object.assign(this.requestParameters, { userId: this.currUser?.id }), this.serviceName, this.env === 'dev')
1332
+ .then(res => {
1333
+ if (this.compatible === 'V3') {
1334
+ res = res.data
1335
+ }
1336
+ if (res.length > 0) {
1337
+ this.summaryData.forEach(item => {
1338
+ res.forEach(summary => {
1339
+ if (item.title === summary.title) {
1340
+ item.value = summary.value
1341
+ item.success = true
1342
+ item.loading = false
1343
+ }
1344
+ })
1345
+ })
1346
+ }
1347
+ })
1348
+ promises.push(querySummaryPromise)
1349
+ }
1350
+
1351
+ if (this.showCustomSummary) {
1352
+ this.customSummaryArray.forEach(item => {
1353
+ const runLogicPromise = runLogic(item.source, Object.assign(this.requestParameters, { userId: this.currUser?.id }), this.serviceName, this.env === 'dev')
1354
+ .then(res => {
1355
+ this.summaryData.forEach(summary => {
1356
+ if (item.key === summary.key) {
1357
+ summary.value = res.value
1358
+ summary.success = true
1359
+ summary.loading = false
1360
+ }
1361
+ })
1362
+ })
1363
+ .catch(e => {
1364
+ this.summaryData.forEach(summary => {
1365
+ if (item.key === summary.key) {
1366
+ summary.value = 0
1367
+ summary.success = false
1368
+ summary.loading = false
1369
+ }
1370
+ })
1371
+ })
1372
+ promises.push(runLogicPromise)
1373
+ })
1374
+ }
1375
+
1376
+ await Promise.all(promises)
1377
+ return this.summaryData
1378
+ },
1379
+ showDrawer () {
1380
+ if (this.summaryUpdate) {
1381
+ this.summaryData.forEach(item => {
1382
+ item.loading = true
1383
+ item.success = false
1384
+ item.value = ' '
1385
+ })
1386
+ this.summaryDrawerVisible = true
1387
+ } else {
1388
+ this.$message.warning('请查询后再来查看')
1389
+ }
1390
+ },
1391
+ onClose () {
1392
+ this.summaryDrawerVisible = false
1393
+ },
1394
+ // 获取表格内所有数据
1395
+ getTableData () {
1396
+ return this.$refs.table.localDataSource
1397
+ },
1398
+ // 设置表格内数据
1399
+ setTableData (data) {
1400
+ if (this.localEditMode) {
1401
+ // 本地编辑模式下,需要修改 localEditModeDataSource
1402
+ this.localEditModeDataSource = data.map((item, index) => ({
1403
+ ...item,
1404
+ 序号: index + 1
1405
+ }))
1406
+ this.$nextTick(() => {
1407
+ this.$refs.table?.refresh()
1408
+ })
1409
+ } else {
1410
+ // 普通模式
1411
+ this.$nextTick(() => {
1412
+ if (this.$refs.table) {
1413
+ this.$refs.table.setLocalDataSource(data)
1414
+ }
1415
+ })
1416
+ }
1417
+ },
1418
+ // 获取所有本地数据
1419
+ getLocalData () {
1420
+ return this.localEditModeDataSource
1421
+ },
1422
+ // 获取指定rowKey的value的本地数据
1423
+ getDataByRowKeyValue (rowKeyValue) {
1424
+ return this.getLocalData().find(item => {
1425
+ return item[this.rowKey] === rowKeyValue
1426
+ })
1427
+ },
1428
+ // 修改本地数据
1429
+ modifyLocalData (rowKeyValue, data) {
1430
+ const modifyItem = this.getDataByRowKeyValue(rowKeyValue)
1431
+ if (modifyItem) {
1432
+ Object.assign(modifyItem, data)
1433
+ }
1434
+ },
1435
+ // 追加本地数据
1436
+ appendLocalData (item) {
1437
+ if (this.localEditModeDataSource.length === 0) {
1438
+ item['序号'] = 1
1439
+ } else {
1440
+ item['序号'] = this.localEditModeDataSource[this.localEditModeDataSource.length - 1]['序号'] + 1
1441
+ }
1442
+ this.localEditModeDataSource.push(item)
1443
+ },
1444
+ handleRowClick (record) {
1445
+ this.$emit('rowClick', record)
1446
+ },
1447
+ beforeDataChange (record) {
1448
+ this.$emit('beforeDataChange', record)
1449
+ },
1450
+ onExpand (expanded, record) {
1451
+ this.$emit('expand', expanded, record)
1452
+ },
1453
+ // 添加新方法处理表格选中状态
1454
+ updateTableSelection (selectedKeys) {
1455
+ console.log('selectedKeys', selectedKeys)
1456
+ if (!this.$refs.table) {
1457
+ return
1458
+ }
1459
+
1460
+ // 检查数据是否已加载
1461
+ if (!this.$refs.table.localDataSource || this.$refs.table.localDataSource.length === 0) {
1462
+ // 等待数据加载完成后再处理
1463
+ const checkDataLoaded = () => {
1464
+ if (this.$refs.table.localDataSource && this.$refs.table.localDataSource.length > 0) {
1465
+ this.doUpdateTableSelection(selectedKeys)
1466
+ } else {
1467
+ setTimeout(checkDataLoaded, 100)
1468
+ }
1469
+ }
1470
+ checkDataLoaded()
1471
+ return
1472
+ }
1473
+
1474
+ this.doUpdateTableSelection(selectedKeys)
1475
+ },
1476
+
1477
+ // 实际执行更新选中状态的方法
1478
+ doUpdateTableSelection (selectedKeys) {
1479
+ // 更新内部选中状态
1480
+ this.selectedRowKeys = [...selectedKeys]
1481
+ this.innerSelectedRowKeys = [...selectedKeys]
1482
+ // 根据 selectedRowKeys 找到对应的行数据
1483
+ this.selectedRows = this.$refs.table.localDataSource.filter(row =>
1484
+ selectedKeys.includes(row[this.primaryKey || this.rowKey])
1485
+ )
1486
+ // 更新表格选中状态
1487
+ if (this.selectRowMode !== 'disabled' && !this.clearSelectRowAfterQuery) {
1488
+ this.$refs.table.updateSelect(this.selectedRowKeys, this.selectedRows)
1489
+ } else if (this.isTableMode && !this.simpleMode) {
1490
+ this.clearRowKeys()
1491
+ }
1492
+ // 更新按钮状态
1493
+ this.isModify = this.innerSelectedRowKeys.length === 1
1494
+ this.isDelete = this.innerSelectedRowKeys.length > 0
1495
+ this.isChoose = this.allowSelectRowNum === 0 ? this.innerSelectedRowKeys.length > 0 : this.innerSelectedRowKeys.length === this.allowSelectRowNum
1496
+
1497
+ // 触发选择事件
1498
+ this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
1499
+ }
1500
+ }
1501
+ }
1502
+ </script>
1503
+ <style lang="less" scoped>
1504
+
1505
+ .custom-chart-title {
1506
+ font-size: 16px;
1507
+ font-weight: 700;
1508
+ margin-bottom: 8px;
1509
+ }
1510
+
1511
+ .custom-chart-desc {
1512
+ font-size: 12px;
1513
+ color: rgba(0, 0, 0, .45);
1514
+ margin-bottom: 16px;
1515
+ }
1516
+
1517
+ :deep(.ant-table-thead > tr > th) {
1518
+ font-weight: 600;
1519
+ }
1520
+
1521
+ :deep(.table-wrapper .ant-pagination) {
1522
+ display: flex;
1523
+ flex-direction: row;
1524
+ align-items: center;
1525
+ padding: 0;
1526
+ }
1527
+
1528
+ :deep(.table-wrapper .ant-pagination .ant-pagination-total-text) {
1529
+ white-space: nowrap;
1530
+ }
1531
+
1532
+ :deep(.ant-table td) {
1533
+ white-space: nowrap;
1534
+ }
1535
+
1536
+ .footer_sum_title {
1537
+ color: @primary-color;
1538
+ font-weight: bold;
1539
+ }
1540
+
1541
+ .footer_sum_item {
1542
+ white-space: nowrap;
1543
+ }
1544
+
1545
+ .ant-btn-hover {
1546
+ border-color: @primary-color;
1547
+ color: @primary-color;
1548
+ }
1549
+
1550
+ .innerTable {
1551
+ :deep(.ant-form-item) {
1552
+ margin: 0;
1553
+ }
1554
+ }
1555
+ </style>