vue2-client 1.18.36 → 1.18.37

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