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