vue2-client 1.16.31 → 1.16.32

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