vue2-client 1.14.97 → 1.15.1

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