vue2-client 1.4.63 → 1.5.0

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