vue2-client 1.4.13 → 1.4.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/.env +15 -15
  2. package/.eslintrc.js +82 -82
  3. package/CHANGELOG.md +4 -0
  4. package/index.js +30 -30
  5. package/package.json +1 -1
  6. package/src/assets/img/querySlotDemo.svg +16 -0
  7. package/src/base-client/components/common/AddressSearchCombobox/AddressSearchCombobox.vue +225 -225
  8. package/src/base-client/components/common/AmapMarker/AmapPointRendering.vue +113 -113
  9. package/src/base-client/components/common/CitySelect/CitySelect.vue +244 -244
  10. package/src/base-client/components/common/CitySelect/index.js +3 -3
  11. package/src/base-client/components/common/CitySelect/index.md +109 -109
  12. package/src/base-client/components/common/CreateQuery/CreateQuery.vue +593 -591
  13. package/src/base-client/components/common/CreateQuery/CreateQueryItem.vue +777 -777
  14. package/src/base-client/components/common/CreateSimpleFormQuery/CreateSimpleFormQuery.vue +310 -310
  15. package/src/base-client/components/common/CreateSimpleFormQuery/CreateSimpleFormQueryItem.vue +553 -553
  16. package/src/base-client/components/common/FormGroupQuery/FormGroupQuery.vue +165 -165
  17. package/src/base-client/components/common/JSONToTree/jsontotree.vue +275 -275
  18. package/src/base-client/components/common/PersonSetting/PersonSetting.vue +210 -210
  19. package/src/base-client/components/common/PersonSetting/index.js +3 -3
  20. package/src/base-client/components/common/Upload/index.js +3 -3
  21. package/src/base-client/components/common/XAddForm/XAddForm.vue +354 -354
  22. package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue +327 -327
  23. package/src/base-client/components/common/XCard/XCard.vue +64 -64
  24. package/src/base-client/components/common/XForm/XForm.vue +274 -274
  25. package/src/base-client/components/common/XForm/XFormItem.vue +389 -389
  26. package/src/base-client/components/common/XFormTable/XFormTable.vue +548 -548
  27. package/src/base-client/components/common/XFormTable/index.md +96 -96
  28. package/src/base-client/components/system/QueryParamsDetailsView/QueryParamsDetailsView.vue +281 -281
  29. package/src/base-client/components/ticket/TicketDetailsView/TicketDetailsView.vue +807 -807
  30. package/src/base-client/components/ticket/TicketDetailsView/index.md +29 -29
  31. package/src/base-client/components/ticket/TicketDetailsView/part/TicketDetailsFlow.vue +260 -260
  32. package/src/base-client/components/ticket/TicketSubmitSuccessView/TicketSubmitSuccessView.vue +532 -532
  33. package/src/base-client/components/ticket/TicketSubmitSuccessView/index.md +29 -29
  34. package/src/base-client/plugins/AppData.js +69 -69
  35. package/src/base-client/plugins/GetLoginInfoService.js +179 -179
  36. package/src/base-client/plugins/PagedList.js +177 -177
  37. package/src/base-client/plugins/compatible/LoginServiceOA.js +20 -20
  38. package/src/base-client/plugins/i18n-extend.js +32 -32
  39. package/src/components/Ellipsis/index.md +38 -38
  40. package/src/components/NumberInfo/index.md +43 -43
  41. package/src/components/STable/README.md +341 -341
  42. package/src/components/STable/index.js +318 -318
  43. package/src/components/Trend/index.md +45 -45
  44. package/src/components/checkbox/ColorCheckbox.vue +157 -157
  45. package/src/components/checkbox/ImgCheckbox.vue +163 -163
  46. package/src/components/form/FormRow.vue +52 -52
  47. package/src/components/index.js +36 -36
  48. package/src/components/menu/SideMenu.vue +62 -62
  49. package/src/components/menu/menu.js +273 -273
  50. package/src/components/setting/Setting.vue +235 -235
  51. package/src/components/table/StandardTable.vue +141 -141
  52. package/src/components/table/advance/ActionColumns.vue +158 -158
  53. package/src/components/table/advance/SearchArea.vue +355 -355
  54. package/src/components/tool/AStepItem.vue +60 -60
  55. package/src/components/tool/AvatarList.vue +68 -68
  56. package/src/components/tool/Drawer.vue +142 -142
  57. package/src/components/tool/TagSelect.vue +83 -83
  58. package/src/components/transition/PageToggleTransition.vue +97 -97
  59. package/src/config/CreateQueryConfig.js +307 -307
  60. package/src/config/replacer/resolve.config.js +67 -67
  61. package/src/layouts/AdminLayout.vue +174 -174
  62. package/src/layouts/header/AdminHeader.vue +104 -104
  63. package/src/layouts/header/HeaderNotice.vue +167 -167
  64. package/src/layouts/header/HeaderSearch.vue +67 -67
  65. package/src/layouts/header/InstitutionDetail.vue +181 -181
  66. package/src/layouts/tabs/TabsHead.vue +190 -190
  67. package/src/layouts/tabs/TabsView.vue +379 -379
  68. package/src/mock/goods/index.js +108 -108
  69. package/src/pages/CreateQueryPage.vue +65 -65
  70. package/src/pages/report/ReportTable.js +124 -124
  71. package/src/pages/report/ReportTableHome.vue +28 -28
  72. package/src/pages/resourceManage/orgListManage.vue +98 -98
  73. package/src/pages/system/dictionary/index.vue +43 -43
  74. package/src/pages/system/file/index.vue +317 -317
  75. package/src/pages/system/queryParams/index.vue +43 -43
  76. package/src/router/async/config.async.js +27 -27
  77. package/src/router/async/router.map.js +63 -61
  78. package/src/router/index.js +27 -27
  79. package/src/services/api/DictionaryDetailsViewApi.js +6 -6
  80. package/src/services/api/LogDetailsViewApi.js +10 -10
  81. package/src/services/api/QueryParamsDetailsViewApi.js +6 -6
  82. package/src/services/api/TicketDetailsViewApi.js +34 -34
  83. package/src/services/api/commonTempTable.js +10 -10
  84. package/src/services/api/index.js +17 -17
  85. package/src/services/api/manage.js +8 -8
  86. package/src/services/api/restTools.js +24 -24
  87. package/src/store/modules/index.js +4 -4
  88. package/src/theme/default/nprogress.less +76 -76
  89. package/src/theme/default/style.less +47 -47
  90. package/src/utils/colors.js +103 -103
  91. package/src/utils/excel/Blob.js +180 -180
  92. package/src/utils/excel/Export2Excel.js +141 -141
  93. package/src/utils/formatter.js +68 -68
  94. package/src/utils/i18n.js +80 -80
  95. package/src/utils/routerUtil.js +364 -364
  96. package/src/utils/theme-color-replacer-extend.js +91 -91
  97. package/src/utils/themeUtil.js +100 -100
  98. package/src/utils/util.js +230 -230
  99. package/vue.config.js +106 -106
@@ -1,548 +1,548 @@
1
- <template>
2
- <a-skeleton :loading="mainLoading">
3
- <template v-if="loaded">
4
- <x-add-form
5
- :business-title="businessTitle"
6
- :business-type="businessType"
7
- :fixedAddForm="fixedAddForm"
8
- :json-data="formItems"
9
- :service-name="serviceName"
10
- :loading="loading"
11
- :modify-model-data="modifyModelData"
12
- :visible.sync="modelVisible"
13
- @onSubmit="onAddOrModify"/>
14
- <x-form
15
- :is-show="isFormShow"
16
- :json-data="formItems"
17
- :service-name="serviceName"
18
- style="margin-bottom: 14px;"
19
- @onSubmit="onSubmit">
20
- <slot></slot>
21
- </x-form>
22
- <x-table
23
- ref="xTable"
24
- :buttonState="buttonState"
25
- :fixedQueryForm="fixedQueryForm"
26
- :form="form"
27
- :json-data="tableColumns"
28
- :queryParams="queryParams"
29
- :queryParamsName="queryParamsName"
30
- :show-pagination="showPagination"
31
- @action="action"
32
- @loadData="loadData"
33
- @selectRow="selectRow"
34
- @toggleIsFormShow="toggleIsFormShow">
35
- <template slot="expand">
36
- <a-space>
37
- <a-button v-if="!buttonState || buttonState.add" type="primary" @click="addItem">
38
- <a-icon :style="iconStyle" type="plus"/>新增
39
- </a-button>
40
- <a-button
41
- v-if="!buttonState || buttonState.edit"
42
- :disabled="!isModify"
43
- :loading="editDataLoading"
44
- class="btn-success"
45
- type="dashed"
46
- @click="editItem">
47
- <a-icon :style="iconStyle" type="edit"/>修改
48
- </a-button>
49
- <a-button v-if="!buttonState || buttonState.delete" :disabled="!isDelete" type="danger" @click="deleteItem">
50
- <a-icon :style="iconStyle" type="delete"/>删除
51
- </a-button>
52
- <a-button v-if="!buttonState || buttonState.import" type="dashed" @click="$refs.importExcel.importExcelHandleOpen()">
53
- <a-icon :style="iconStyle" type="import" />导入
54
- </a-button>
55
- <a-dropdown v-if="!buttonState || buttonState.export">
56
- <a-menu slot="overlay">
57
- <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handleExport(true)"><a-icon :style="iconStyle" type="ordered-list" />导出选中数据</a-menu-item>
58
- <a-menu-item key="2" @click="handleExport(false)"><a-icon :style="iconStyle" type="snippets" />导出本页数据</a-menu-item>
59
- <a-menu-item key="3" @click="handleExportByQuery"><a-icon :style="iconStyle" type="download" />导出所有符合条件的数据</a-menu-item>
60
- </a-menu>
61
- <a-button>导出 <a-icon type="down" /> </a-button>
62
- </a-dropdown>
63
- <slot :selectedRowKeys="selectedRowKeys" name="button"></slot>
64
- </a-space>
65
- <slot name="expand"></slot>
66
- </template>
67
- <!-- 底部插槽 -->
68
- <template slot="footer">
69
- <slot name="footer"></slot>
70
- </template>
71
- </x-table>
72
- <!-- 上传文件 -->
73
- <x-import-excel
74
- ref="importExcel"
75
- @ok="refreshTable"
76
- :title="title"
77
- :service-name="serviceName"
78
- :query-params-name="queryParamsName"
79
- />
80
- </template>
81
- </a-skeleton>
82
- </template>
83
- <script>
84
- import XForm from '@vue2-client/base-client/components/common/XForm'
85
- import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
86
- import XTable from '@vue2-client/base-client/components/common/XTable'
87
- import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
88
- import { query, download, commonApi, addOrModify, remove, queryWithResource } from '@vue2-client/services/api/common'
89
- import { indexedDB } from '@vue2-client/utils/indexedDB'
90
- import { mapState } from 'vuex'
91
- import { Modal } from 'ant-design-vue'
92
- import { post } from '@vue2-client/services/api/restTools'
93
- import { CommonTempTable } from '@vue2-client/services/api/commonTempTable'
94
- import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
95
-
96
- export default {
97
- name: 'XFormTable',
98
- components: {
99
- XTable,
100
- XForm,
101
- XAddForm,
102
- XImportExcel
103
- },
104
- data () {
105
- return {
106
- // Query参数文件内容加载中
107
- mainLoading: false,
108
- // Query参数文件内容加载完成
109
- loaded: false,
110
- // 是否展示表单
111
- isFormShow: true,
112
- // 当使用logic获取到表单表格配置时, 将配置对象直接传入到x-table用于查询
113
- queryParams: null,
114
- // 服务名称
115
- serviceName: 'af-system',
116
- // 表格列集合
117
- tableColumns: [],
118
- // 操作按钮集合
119
- buttonState: {},
120
- // 表格选择列Key集合
121
- selectedRowKeys: [],
122
- // 表单项集合
123
- formItems: [],
124
- // 表单
125
- form: {},
126
- // 图标样式
127
- iconStyle: {
128
- position: 'relative',
129
- top: '1px'
130
- },
131
- // 当前业务类型:新增,修改
132
- businessType: '',
133
- // 是否显示新增/修改模态框
134
- modelVisible: false,
135
- // 修改业务时查询的单条业务数据
136
- modifyModelData: {},
137
- // 是否允许修改
138
- isModify: false,
139
- // 是否允许删除
140
- isDelete: false,
141
- // 新增,修改业务执行状态
142
- loading: false,
143
- // 被修改数据加载状态
144
- editDataLoading: false,
145
- // 是否为临时表
146
- isTableTemp: false
147
- }
148
- },
149
- computed: {
150
- ...mapState('setting', ['isMobile']),
151
- businessTitle () {
152
- return this.businessType + this.title
153
- }
154
- },
155
- props: {
156
- // 业务名称
157
- title: {
158
- type: String,
159
- default: ''
160
- },
161
- // 查询配置文件名
162
- queryParamsName: {
163
- type: String,
164
- default: null
165
- },
166
- // 查询配置文件Json,用于查询配置生成器的预览
167
- queryParamsJson: {
168
- type: Object,
169
- default: null
170
- },
171
- // 业务逻辑名称, 通过logic获取表单表格配置
172
- logicName: {
173
- type: String,
174
- default: null
175
- },
176
- // 执行logic传递的参数
177
- logicParam: {
178
- type: Object,
179
- default: () => {}
180
- },
181
- // 固定新增表单
182
- fixedAddForm: {
183
- type: Object,
184
- default: () => {
185
- return {}
186
- }
187
- },
188
- // 固定查询表单
189
- fixedQueryForm: {
190
- type: Object,
191
- default: () => {
192
- return {}
193
- }
194
- },
195
- // 预览模式
196
- viewMode: {
197
- type: Boolean,
198
- default: () => {
199
- return false
200
- }
201
- },
202
- // 数据只有一页时是否展示分页,true:展示,auto:隐藏
203
- showPagination: {
204
- type: Boolean,
205
- default: true
206
- }
207
- },
208
- watch: {
209
- logicParam: {
210
- handler () {
211
- this.getColumnJsonByLogic()
212
- },
213
- deep: true
214
- },
215
- fixedQueryForm: {
216
- handler () {
217
- this.form = {}
218
- },
219
- deep: true
220
- },
221
- queryParamsJson: {
222
- handler () {
223
- this.getColumnsJsonBySource()
224
- },
225
- deep: true
226
- }
227
- },
228
- created () {
229
- if (this.queryParamsName) {
230
- this.getColumnsJson()
231
- } else if (this.queryParamsJson) {
232
- this.getColumnsJsonBySource()
233
- }
234
- },
235
- methods: {
236
- refreshTable () {
237
- this.$refs.xTable.refresh(true)
238
- },
239
- clearRowKeys () {
240
- this.$refs.xTable.clearRowKeys()
241
- },
242
- setParams (res) {
243
- // 深拷贝json,避免筛选列报错
244
- this.tableColumns = JSON.parse(JSON.stringify(res.columnJson))
245
- this.formItems = res.formJson
246
- this.buttonState = res.buttonState
247
- this.serviceName = res.serviceName
248
- this.mainLoading = false
249
- this.loaded = true
250
- },
251
- getColumnsJson () {
252
- this.form = {}
253
- this.mainLoading = true
254
- indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
255
- this.setParams(ret)
256
- })
257
- },
258
- getColumnsJsonBySource () {
259
- this.form = {}
260
- this.mainLoading = true
261
- post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
262
- this.queryParams = res
263
- this.setParams(res)
264
- })
265
- },
266
- getColumnJsonByLogic () {
267
- this.form = {}
268
- this.mainLoading = true
269
- indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (ret) => {
270
- this.queryParams = ret
271
- this.setParams(ret)
272
- })
273
- },
274
- // 查询表单提交
275
- onSubmit (res) {
276
- if (res.valid) {
277
- // 表单赋值
278
- this.form = res.form
279
- // commit
280
- this.$emit('afterSearchSubmit', res)
281
- } else {
282
- return false
283
- }
284
- },
285
- // 新增/修改数据表单提交
286
- onAddOrModify (res) {
287
- if (this.viewMode) {
288
- this.$message.info('预览模式禁止新增和修改')
289
- return false
290
- }
291
- // 如果是临时表
292
- if (this.isTableTemp) {
293
- this.$emit('tempTableModify', res)
294
- return
295
- }
296
- if (!res.valid) {
297
- return false
298
- }
299
- this.loading = true
300
- const requestParameters = {
301
- queryParamsName: this.queryParamsName,
302
- form: {},
303
- businessType: this.businessType
304
- }
305
- if (this.businessType === '修改') {
306
- // 将更新需要的主键值加入到表单中
307
- const key = this.tableColumns[0].dataIndex
308
- const realKey = this.getRealKey(key)
309
- requestParameters.form[realKey] = this.selectedRowKeys[0]
310
- }
311
- for (const key of Object.keys(res.form)) {
312
- const realKey = this.getRealKey(key)
313
- requestParameters.form[realKey] = res.form[key]
314
- }
315
- addOrModify(requestParameters, this.serviceName).then(res => {
316
- this.$message.success(this.businessType + '成功!')
317
- this.loading = false
318
- this.modelVisible = false
319
- this.$refs.xTable.refresh(true)
320
- // commit
321
- this.$emit('afterSubmit', { type: this.businessType, id: res.id, form: requestParameters.form })
322
- }).catch(e => {
323
- this.loading = false
324
- this.modelVisible = false
325
- this.$message.error(this.businessType + '失败!')
326
- })
327
- },
328
- // 刷新加载表格数据
329
- loadData (requestParameters, callback) {
330
- let result = {}
331
- if (this.queryParamsJson) {
332
- if (this.queryParamsJson.tableName.startsWith('##')) {
333
- this.isTableTemp = true
334
- result = this.initTempTable(requestParameters)
335
- }
336
- }
337
- if (!this.isTableTemp) {
338
- result = query(requestParameters, this.serviceName)
339
- }
340
- this.$emit('afterQuery', result)
341
- callback(result)
342
- },
343
- // 详情按钮事件
344
- action (record, id, actionType) {
345
- this.$emit('action', record, id, actionType)
346
- },
347
- // 获取数据字段实际值
348
- getRealKey (key) {
349
- return key.substring(key.indexOf('_') + 1)
350
- },
351
- // 新增业务
352
- addItem () {
353
- this.businessType = '新增'
354
- this.modifyModelData = {}
355
- this.modelVisible = true
356
- },
357
- // 修改业务
358
- editItem () {
359
- this.businessType = '修改'
360
- const requestParameters = {
361
- queryParamsName: this.queryParamsName,
362
- conditionParams: {},
363
- pageNo: 1,
364
- pageSize: 1
365
- }
366
- requestParameters.conditionParams[this.tableColumns[0].dataIndex] = this.selectedRowKeys[0]
367
- requestParameters.f_businessid = this.selectedRowKeys[0]
368
- if (this.isTableTemp) {
369
- this.$emit('tempTableEdit', requestParameters)
370
- return
371
- }
372
- this.editDataLoading = true
373
- queryWithResource(requestParameters, this.serviceName).then(res => {
374
- this.modifyModelData = { data: res.data[0], images: res.images, files: res.files }
375
- this.modelVisible = true
376
- this.editDataLoading = false
377
- })
378
- },
379
- // 删除业务
380
- deleteItem () {
381
- if (this.viewMode) {
382
- this.$message.info('预览模式禁止删除')
383
- return
384
- }
385
- Modal.confirm({
386
- title: '提示',
387
- content: '您本次要删除共' + this.selectedRowKeys.length + '条数据,确定操作吗?',
388
- confirmLoading: this.loading,
389
- zIndex: 1001,
390
- onOk: () => {
391
- this.loading = true
392
- const requestParameters = {
393
- queryParamsName: this.queryParamsName,
394
- idList: this.selectedRowKeys
395
- }
396
- remove(requestParameters, this.serviceName).then(res => {
397
- this.loading = false
398
- this.$message.success('删除成功!')
399
- this.$refs.xTable.clearRowKeys()
400
- this.$refs.xTable.refresh(true)
401
- // afterDelete
402
- this.$emit('afterDelete', { idList: requestParameters.idList })
403
- }).catch(e => {
404
- this.loading = false
405
- this.$message.error('删除失败!')
406
- })
407
- },
408
- onCancel () {}
409
- })
410
- },
411
- // 导出选中或本页数据
412
- handleExport (isSelected) {
413
- const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
414
- const filterVal = this.tableColumns.map(res => res.dataIndex)
415
- let exportData
416
- if (isSelected) {
417
- exportData = this.$refs.xTable.selectedRows
418
- } else {
419
- exportData = this.$refs.xTable.dataSource
420
- }
421
- const data = this.formatJson(filterVal, exportData)
422
- exportJson(tHeader, data, this.title + `数据_${new Date().toLocaleString()}`)
423
- },
424
- formatJson (filterVal, jsonData) {
425
- return jsonData.map(v => filterVal.map(j => v[j]))
426
- },
427
- // 导出符合条件的数据
428
- handleExportByQuery () {
429
- const that = this
430
- this.$confirm({
431
- title: '是否确认导出?',
432
- content: '此操作将导出当前条件下所有数据而非选中数据',
433
- onOk () {
434
- download({
435
- queryParamsName: that.queryParamsName,
436
- form: that.form,
437
- type: 'exportData'
438
- }, that.title + `数据_${new Date().toLocaleString()}.xlsx`, that.serviceName)
439
- },
440
- onCancel () {}
441
- })
442
- },
443
- // 查询表单部分显示/隐藏切换
444
- toggleIsFormShow () {
445
- this.isFormShow = !this.isFormShow
446
- },
447
- // 控制业务操作按钮组的显示
448
- selectRow (rowKeys) {
449
- this.selectedRowKeys = rowKeys
450
- this.isModify = this.selectedRowKeys.length === 1
451
- this.isDelete = this.selectedRowKeys.length > 0
452
- this.$emit('selectRow', this.selectedRowKeys)
453
- },
454
- // 创建临时表sql生成
455
- createTempTable (defineJson) {
456
- const tableName = defineJson.tableName
457
- const define = defineJson.column
458
- return post(CommonTempTable.createTempTable, {
459
- define: define,
460
- tableName: tableName
461
- })
462
- .then(
463
- res => {
464
- return res
465
- },
466
- err => {
467
- console.log(err)
468
- }
469
- )
470
- },
471
- // 插入临时表数据sql生成
472
- insertTempTableData (defineJson) {
473
- const tableName = defineJson.tableName
474
- const params = {}
475
- params.define = defineJson.column
476
- params.applyId = defineJson.applyId
477
- params.stepName = defineJson.stepName
478
- params.tableName = tableName
479
- return post(CommonTempTable.insertDataToTempTable, {
480
- tempTableData: params
481
- })
482
- .then(
483
- res => {
484
- return res
485
- }
486
- )
487
- },
488
- // 初始化临时表
489
- async initTempTable (json) {
490
- await this.createTempTable(this.queryParamsJson)
491
- await this.insertTempTableData(this.queryParamsJson)
492
- let result = {}
493
- await post(CommonTempTable.initApplySubTable, {
494
- define: json
495
- })
496
- .then(
497
- res => {
498
- console.log('子表临时表已创建')
499
- result = res
500
- }
501
- )
502
- return result
503
- }
504
- }
505
- }
506
- </script>
507
- <style lang="less" scoped>
508
- .btn-success {
509
- color: #ffffff;
510
- }
511
- .btn-success:hover {
512
- color: #ffffff !important;
513
- }
514
- .btn-success:focus {
515
- color: #ffffff !important;
516
- }
517
- .btn-success:enabled:hover {
518
- background-color: #85CE61 !important;
519
- border-color: #85CE61 !important;
520
- }
521
- .btn-success:enabled {
522
- background-color: #67c23a;
523
- border-color: #67c23a;
524
- }
525
- .btn-success:disabled {
526
- color: rgba(0, 0, 0, 0.25);
527
- }
528
- .btn-warn {
529
- color: #ffffff;
530
- }
531
- .btn-warn:hover {
532
- color: #ffffff !important;
533
- }
534
- .btn-warn:focus {
535
- color: #ffffff !important;
536
- }
537
- .btn-warn:enabled:hover {
538
- background-color: #ffc833 !important;
539
- border-color: #ffc833 !important;
540
- }
541
- .btn-warn:enabled {
542
- background-color: #ffba00;
543
- border-color: #ffba00;
544
- }
545
- .btn-warn:disabled {
546
- color: rgba(0, 0, 0, 0.25);
547
- }
548
- </style>
1
+ <template>
2
+ <a-skeleton :loading="mainLoading">
3
+ <template v-if="loaded">
4
+ <x-add-form
5
+ :business-title="businessTitle"
6
+ :business-type="businessType"
7
+ :fixedAddForm="fixedAddForm"
8
+ :json-data="formItems"
9
+ :service-name="serviceName"
10
+ :loading="loading"
11
+ :modify-model-data="modifyModelData"
12
+ :visible.sync="modelVisible"
13
+ @onSubmit="onAddOrModify"/>
14
+ <x-form
15
+ :is-show="isFormShow"
16
+ :json-data="formItems"
17
+ :service-name="serviceName"
18
+ style="margin-bottom: 14px;"
19
+ @onSubmit="onSubmit">
20
+ <slot></slot>
21
+ </x-form>
22
+ <x-table
23
+ ref="xTable"
24
+ :buttonState="buttonState"
25
+ :fixedQueryForm="fixedQueryForm"
26
+ :form="form"
27
+ :json-data="tableColumns"
28
+ :queryParams="queryParams"
29
+ :queryParamsName="queryParamsName"
30
+ :show-pagination="showPagination"
31
+ @action="action"
32
+ @loadData="loadData"
33
+ @selectRow="selectRow"
34
+ @toggleIsFormShow="toggleIsFormShow">
35
+ <template slot="expand">
36
+ <a-space>
37
+ <a-button v-if="!buttonState || buttonState.add" type="primary" @click="addItem">
38
+ <a-icon :style="iconStyle" type="plus"/>新增
39
+ </a-button>
40
+ <a-button
41
+ v-if="!buttonState || buttonState.edit"
42
+ :disabled="!isModify"
43
+ :loading="editDataLoading"
44
+ class="btn-success"
45
+ type="dashed"
46
+ @click="editItem">
47
+ <a-icon :style="iconStyle" type="edit"/>修改
48
+ </a-button>
49
+ <a-button v-if="!buttonState || buttonState.delete" :disabled="!isDelete" type="danger" @click="deleteItem">
50
+ <a-icon :style="iconStyle" type="delete"/>删除
51
+ </a-button>
52
+ <a-button v-if="!buttonState || buttonState.import" type="dashed" @click="$refs.importExcel.importExcelHandleOpen()">
53
+ <a-icon :style="iconStyle" type="import" />导入
54
+ </a-button>
55
+ <a-dropdown v-if="!buttonState || buttonState.export">
56
+ <a-menu slot="overlay">
57
+ <a-menu-item :disabled="selectedRowKeys.length === 0" key="1" @click="handleExport(true)"><a-icon :style="iconStyle" type="ordered-list" />导出选中数据</a-menu-item>
58
+ <a-menu-item key="2" @click="handleExport(false)"><a-icon :style="iconStyle" type="snippets" />导出本页数据</a-menu-item>
59
+ <a-menu-item key="3" @click="handleExportByQuery"><a-icon :style="iconStyle" type="download" />导出所有符合条件的数据</a-menu-item>
60
+ </a-menu>
61
+ <a-button>导出 <a-icon type="down" /> </a-button>
62
+ </a-dropdown>
63
+ <slot :selectedRowKeys="selectedRowKeys" name="button"></slot>
64
+ </a-space>
65
+ <slot name="expand"></slot>
66
+ </template>
67
+ <!-- 底部插槽 -->
68
+ <template slot="footer">
69
+ <slot name="footer"></slot>
70
+ </template>
71
+ </x-table>
72
+ <!-- 上传文件 -->
73
+ <x-import-excel
74
+ ref="importExcel"
75
+ @ok="refreshTable"
76
+ :title="title"
77
+ :service-name="serviceName"
78
+ :query-params-name="queryParamsName"
79
+ />
80
+ </template>
81
+ </a-skeleton>
82
+ </template>
83
+ <script>
84
+ import XForm from '@vue2-client/base-client/components/common/XForm'
85
+ import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
86
+ import XTable from '@vue2-client/base-client/components/common/XTable'
87
+ import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
88
+ import { query, download, commonApi, addOrModify, remove, queryWithResource } from '@vue2-client/services/api/common'
89
+ import { indexedDB } from '@vue2-client/utils/indexedDB'
90
+ import { mapState } from 'vuex'
91
+ import { Modal } from 'ant-design-vue'
92
+ import { post } from '@vue2-client/services/api/restTools'
93
+ import { CommonTempTable } from '@vue2-client/services/api/commonTempTable'
94
+ import { exportJson } from '@vue2-client/utils/excel/Export2Excel'
95
+
96
+ export default {
97
+ name: 'XFormTable',
98
+ components: {
99
+ XTable,
100
+ XForm,
101
+ XAddForm,
102
+ XImportExcel
103
+ },
104
+ data () {
105
+ return {
106
+ // Query参数文件内容加载中
107
+ mainLoading: false,
108
+ // Query参数文件内容加载完成
109
+ loaded: false,
110
+ // 是否展示表单
111
+ isFormShow: true,
112
+ // 当使用logic获取到表单表格配置时, 将配置对象直接传入到x-table用于查询
113
+ queryParams: null,
114
+ // 服务名称
115
+ serviceName: 'af-system',
116
+ // 表格列集合
117
+ tableColumns: [],
118
+ // 操作按钮集合
119
+ buttonState: {},
120
+ // 表格选择列Key集合
121
+ selectedRowKeys: [],
122
+ // 表单项集合
123
+ formItems: [],
124
+ // 表单
125
+ form: {},
126
+ // 图标样式
127
+ iconStyle: {
128
+ position: 'relative',
129
+ top: '1px'
130
+ },
131
+ // 当前业务类型:新增,修改
132
+ businessType: '',
133
+ // 是否显示新增/修改模态框
134
+ modelVisible: false,
135
+ // 修改业务时查询的单条业务数据
136
+ modifyModelData: {},
137
+ // 是否允许修改
138
+ isModify: false,
139
+ // 是否允许删除
140
+ isDelete: false,
141
+ // 新增,修改业务执行状态
142
+ loading: false,
143
+ // 被修改数据加载状态
144
+ editDataLoading: false,
145
+ // 是否为临时表
146
+ isTableTemp: false
147
+ }
148
+ },
149
+ computed: {
150
+ ...mapState('setting', ['isMobile']),
151
+ businessTitle () {
152
+ return this.businessType + this.title
153
+ }
154
+ },
155
+ props: {
156
+ // 业务名称
157
+ title: {
158
+ type: String,
159
+ default: ''
160
+ },
161
+ // 查询配置文件名
162
+ queryParamsName: {
163
+ type: String,
164
+ default: null
165
+ },
166
+ // 查询配置文件Json,用于查询配置生成器的预览
167
+ queryParamsJson: {
168
+ type: Object,
169
+ default: null
170
+ },
171
+ // 业务逻辑名称, 通过logic获取表单表格配置
172
+ logicName: {
173
+ type: String,
174
+ default: null
175
+ },
176
+ // 执行logic传递的参数
177
+ logicParam: {
178
+ type: Object,
179
+ default: () => {}
180
+ },
181
+ // 固定新增表单
182
+ fixedAddForm: {
183
+ type: Object,
184
+ default: () => {
185
+ return {}
186
+ }
187
+ },
188
+ // 固定查询表单
189
+ fixedQueryForm: {
190
+ type: Object,
191
+ default: () => {
192
+ return {}
193
+ }
194
+ },
195
+ // 预览模式
196
+ viewMode: {
197
+ type: Boolean,
198
+ default: () => {
199
+ return false
200
+ }
201
+ },
202
+ // 数据只有一页时是否展示分页,true:展示,auto:隐藏
203
+ showPagination: {
204
+ type: Boolean,
205
+ default: true
206
+ }
207
+ },
208
+ watch: {
209
+ logicParam: {
210
+ handler () {
211
+ this.getColumnJsonByLogic()
212
+ },
213
+ deep: true
214
+ },
215
+ fixedQueryForm: {
216
+ handler () {
217
+ this.form = {}
218
+ },
219
+ deep: true
220
+ },
221
+ queryParamsJson: {
222
+ handler () {
223
+ this.getColumnsJsonBySource()
224
+ },
225
+ deep: true
226
+ }
227
+ },
228
+ created () {
229
+ if (this.queryParamsName) {
230
+ this.getColumnsJson()
231
+ } else if (this.queryParamsJson) {
232
+ this.getColumnsJsonBySource()
233
+ }
234
+ },
235
+ methods: {
236
+ refreshTable () {
237
+ this.$refs.xTable.refresh(true)
238
+ },
239
+ clearRowKeys () {
240
+ this.$refs.xTable.clearRowKeys()
241
+ },
242
+ setParams (res) {
243
+ // 深拷贝json,避免筛选列报错
244
+ this.tableColumns = JSON.parse(JSON.stringify(res.columnJson))
245
+ this.formItems = res.formJson
246
+ this.buttonState = res.buttonState
247
+ this.serviceName = res.serviceName
248
+ this.mainLoading = false
249
+ this.loaded = true
250
+ },
251
+ getColumnsJson () {
252
+ this.form = {}
253
+ this.mainLoading = true
254
+ indexedDB.getByWeb(this.queryParamsName, commonApi.getColumnsJson, { str: this.queryParamsName }, (ret) => {
255
+ this.setParams(ret)
256
+ })
257
+ },
258
+ getColumnsJsonBySource () {
259
+ this.form = {}
260
+ this.mainLoading = true
261
+ post(commonApi.getColumnsJson, { queryObject: this.queryParamsJson }).then(res => {
262
+ this.queryParams = res
263
+ this.setParams(res)
264
+ })
265
+ },
266
+ getColumnJsonByLogic () {
267
+ this.form = {}
268
+ this.mainLoading = true
269
+ indexedDB.getByWeb(`${this.logicName}_${JSON.stringify(this.logicParam)}`, commonApi.getColumnsJson, { logic: this.logicName, logicParam: this.logicParam }, (ret) => {
270
+ this.queryParams = ret
271
+ this.setParams(ret)
272
+ })
273
+ },
274
+ // 查询表单提交
275
+ onSubmit (res) {
276
+ if (res.valid) {
277
+ // 表单赋值
278
+ this.form = res.form
279
+ // commit
280
+ this.$emit('afterSearchSubmit', res)
281
+ } else {
282
+ return false
283
+ }
284
+ },
285
+ // 新增/修改数据表单提交
286
+ onAddOrModify (res) {
287
+ if (this.viewMode) {
288
+ this.$message.info('预览模式禁止新增和修改')
289
+ return false
290
+ }
291
+ // 如果是临时表
292
+ if (this.isTableTemp) {
293
+ this.$emit('tempTableModify', res)
294
+ return
295
+ }
296
+ if (!res.valid) {
297
+ return false
298
+ }
299
+ this.loading = true
300
+ const requestParameters = {
301
+ queryParamsName: this.queryParamsName,
302
+ form: {},
303
+ businessType: this.businessType
304
+ }
305
+ if (this.businessType === '修改') {
306
+ // 将更新需要的主键值加入到表单中
307
+ const key = this.tableColumns[0].dataIndex
308
+ const realKey = this.getRealKey(key)
309
+ requestParameters.form[realKey] = this.selectedRowKeys[0]
310
+ }
311
+ for (const key of Object.keys(res.form)) {
312
+ const realKey = this.getRealKey(key)
313
+ requestParameters.form[realKey] = res.form[key]
314
+ }
315
+ addOrModify(requestParameters, this.serviceName).then(res => {
316
+ this.$message.success(this.businessType + '成功!')
317
+ this.loading = false
318
+ this.modelVisible = false
319
+ this.$refs.xTable.refresh(true)
320
+ // commit
321
+ this.$emit('afterSubmit', { type: this.businessType, id: res.id, form: requestParameters.form })
322
+ }).catch(e => {
323
+ this.loading = false
324
+ this.modelVisible = false
325
+ this.$message.error(this.businessType + '失败!')
326
+ })
327
+ },
328
+ // 刷新加载表格数据
329
+ loadData (requestParameters, callback) {
330
+ let result = {}
331
+ if (this.queryParamsJson) {
332
+ if (this.queryParamsJson.tableName.startsWith('##')) {
333
+ this.isTableTemp = true
334
+ result = this.initTempTable(requestParameters)
335
+ }
336
+ }
337
+ if (!this.isTableTemp) {
338
+ result = query(requestParameters, this.serviceName)
339
+ }
340
+ this.$emit('afterQuery', result)
341
+ callback(result)
342
+ },
343
+ // 详情按钮事件
344
+ action (record, id, actionType) {
345
+ this.$emit('action', record, id, actionType)
346
+ },
347
+ // 获取数据字段实际值
348
+ getRealKey (key) {
349
+ return key.substring(key.indexOf('_') + 1)
350
+ },
351
+ // 新增业务
352
+ addItem () {
353
+ this.businessType = '新增'
354
+ this.modifyModelData = {}
355
+ this.modelVisible = true
356
+ },
357
+ // 修改业务
358
+ editItem () {
359
+ this.businessType = '修改'
360
+ const requestParameters = {
361
+ queryParamsName: this.queryParamsName,
362
+ conditionParams: {},
363
+ pageNo: 1,
364
+ pageSize: 1
365
+ }
366
+ requestParameters.conditionParams[this.tableColumns[0].dataIndex] = this.selectedRowKeys[0]
367
+ requestParameters.f_businessid = this.selectedRowKeys[0]
368
+ if (this.isTableTemp) {
369
+ this.$emit('tempTableEdit', requestParameters)
370
+ return
371
+ }
372
+ this.editDataLoading = true
373
+ queryWithResource(requestParameters, this.serviceName).then(res => {
374
+ this.modifyModelData = { data: res.data[0], images: res.images, files: res.files }
375
+ this.modelVisible = true
376
+ this.editDataLoading = false
377
+ })
378
+ },
379
+ // 删除业务
380
+ deleteItem () {
381
+ if (this.viewMode) {
382
+ this.$message.info('预览模式禁止删除')
383
+ return
384
+ }
385
+ Modal.confirm({
386
+ title: '提示',
387
+ content: '您本次要删除共' + this.selectedRowKeys.length + '条数据,确定操作吗?',
388
+ confirmLoading: this.loading,
389
+ zIndex: 1001,
390
+ onOk: () => {
391
+ this.loading = true
392
+ const requestParameters = {
393
+ queryParamsName: this.queryParamsName,
394
+ idList: this.selectedRowKeys
395
+ }
396
+ remove(requestParameters, this.serviceName).then(res => {
397
+ this.loading = false
398
+ this.$message.success('删除成功!')
399
+ this.$refs.xTable.clearRowKeys()
400
+ this.$refs.xTable.refresh(true)
401
+ // afterDelete
402
+ this.$emit('afterDelete', { idList: requestParameters.idList })
403
+ }).catch(e => {
404
+ this.loading = false
405
+ this.$message.error('删除失败!')
406
+ })
407
+ },
408
+ onCancel () {}
409
+ })
410
+ },
411
+ // 导出选中或本页数据
412
+ handleExport (isSelected) {
413
+ const tHeader = this.tableColumns.filter(res => res.slotType !== 'action').map(res => res.title)
414
+ const filterVal = this.tableColumns.map(res => res.dataIndex)
415
+ let exportData
416
+ if (isSelected) {
417
+ exportData = this.$refs.xTable.selectedRows
418
+ } else {
419
+ exportData = this.$refs.xTable.dataSource
420
+ }
421
+ const data = this.formatJson(filterVal, exportData)
422
+ exportJson(tHeader, data, this.title + `数据_${new Date().toLocaleString()}`)
423
+ },
424
+ formatJson (filterVal, jsonData) {
425
+ return jsonData.map(v => filterVal.map(j => v[j]))
426
+ },
427
+ // 导出符合条件的数据
428
+ handleExportByQuery () {
429
+ const that = this
430
+ this.$confirm({
431
+ title: '是否确认导出?',
432
+ content: '此操作将导出当前条件下所有数据而非选中数据',
433
+ onOk () {
434
+ download({
435
+ queryParamsName: that.queryParamsName,
436
+ form: that.form,
437
+ type: 'exportData'
438
+ }, that.title + `数据_${new Date().toLocaleString()}.xlsx`, that.serviceName)
439
+ },
440
+ onCancel () {}
441
+ })
442
+ },
443
+ // 查询表单部分显示/隐藏切换
444
+ toggleIsFormShow () {
445
+ this.isFormShow = !this.isFormShow
446
+ },
447
+ // 控制业务操作按钮组的显示
448
+ selectRow (rowKeys) {
449
+ this.selectedRowKeys = rowKeys
450
+ this.isModify = this.selectedRowKeys.length === 1
451
+ this.isDelete = this.selectedRowKeys.length > 0
452
+ this.$emit('selectRow', this.selectedRowKeys)
453
+ },
454
+ // 创建临时表sql生成
455
+ createTempTable (defineJson) {
456
+ const tableName = defineJson.tableName
457
+ const define = defineJson.column
458
+ return post(CommonTempTable.createTempTable, {
459
+ define: define,
460
+ tableName: tableName
461
+ })
462
+ .then(
463
+ res => {
464
+ return res
465
+ },
466
+ err => {
467
+ console.log(err)
468
+ }
469
+ )
470
+ },
471
+ // 插入临时表数据sql生成
472
+ insertTempTableData (defineJson) {
473
+ const tableName = defineJson.tableName
474
+ const params = {}
475
+ params.define = defineJson.column
476
+ params.applyId = defineJson.applyId
477
+ params.stepName = defineJson.stepName
478
+ params.tableName = tableName
479
+ return post(CommonTempTable.insertDataToTempTable, {
480
+ tempTableData: params
481
+ })
482
+ .then(
483
+ res => {
484
+ return res
485
+ }
486
+ )
487
+ },
488
+ // 初始化临时表
489
+ async initTempTable (json) {
490
+ await this.createTempTable(this.queryParamsJson)
491
+ await this.insertTempTableData(this.queryParamsJson)
492
+ let result = {}
493
+ await post(CommonTempTable.initApplySubTable, {
494
+ define: json
495
+ })
496
+ .then(
497
+ res => {
498
+ console.log('子表临时表已创建')
499
+ result = res
500
+ }
501
+ )
502
+ return result
503
+ }
504
+ }
505
+ }
506
+ </script>
507
+ <style lang="less" scoped>
508
+ .btn-success {
509
+ color: #ffffff;
510
+ }
511
+ .btn-success:hover {
512
+ color: #ffffff !important;
513
+ }
514
+ .btn-success:focus {
515
+ color: #ffffff !important;
516
+ }
517
+ .btn-success:enabled:hover {
518
+ background-color: #85CE61 !important;
519
+ border-color: #85CE61 !important;
520
+ }
521
+ .btn-success:enabled {
522
+ background-color: #67c23a;
523
+ border-color: #67c23a;
524
+ }
525
+ .btn-success:disabled {
526
+ color: rgba(0, 0, 0, 0.25);
527
+ }
528
+ .btn-warn {
529
+ color: #ffffff;
530
+ }
531
+ .btn-warn:hover {
532
+ color: #ffffff !important;
533
+ }
534
+ .btn-warn:focus {
535
+ color: #ffffff !important;
536
+ }
537
+ .btn-warn:enabled:hover {
538
+ background-color: #ffc833 !important;
539
+ border-color: #ffc833 !important;
540
+ }
541
+ .btn-warn:enabled {
542
+ background-color: #ffba00;
543
+ border-color: #ffba00;
544
+ }
545
+ .btn-warn:disabled {
546
+ color: rgba(0, 0, 0, 0.25);
547
+ }
548
+ </style>