vue2-client 1.12.27 → 1.12.29

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.
@@ -423,6 +423,7 @@ export default {
423
423
  summaryDrawerWidth: 35,
424
424
  // 行选择模式
425
425
  selectRowMode: 'default',
426
+ tableSize: 'default',
426
427
  clearSelectRowAfterQuery: false,
427
428
  selectedRowModalVisible: false
428
429
  }
@@ -653,6 +654,7 @@ export default {
653
654
  chartsConfigArray = [],
654
655
  printTemplate = 'DEFAULT_CRUD_PRINT_TEMPLATE',
655
656
  selectRowMode = 'default',
657
+ tableSize = 'default',
656
658
  clearSelectRowAfterQuery = false
657
659
  } = params
658
660
  this.showSummary = Object.keys(tableSummaryMap).length > 0
@@ -703,6 +705,7 @@ export default {
703
705
  this.summaryDrawerWidth = summaryDrawerWidth
704
706
  this.chartsConfigArray = chartsConfigArray
705
707
  this.selectRowMode = selectRowMode
708
+ this.tableSize = tableSize
706
709
  this.clearSelectRowAfterQuery = clearSelectRowAfterQuery
707
710
  if (this.chartsConfigArray.length > 0) {
708
711
  // 循环chartsConfigArray,将每个配置的数据请求参数赋值给requestParameters
@@ -15,7 +15,7 @@
15
15
  :pageSize="tableContext.simpleMode ? 1000 : undefined"
16
16
  :setScrollYHeight="tableContext.setScrollYHeight"
17
17
  :selectRowMode="tableContext.selectRowMode"
18
- size="default"
18
+ :size="tableContext.tableSize"
19
19
  >
20
20
  <template
21
21
  v-for="(item, c_index) in tableContext.tableColumns"
@@ -1,45 +1,43 @@
1
- <template>
2
- <div id="test">
3
- <a-card :bordered="false">
4
- <XReport
5
- ref="main"
6
- v-if="configName"
7
- :use-oss-for-img="false"
8
- :config-name="configName"
9
- :show-img-in-cell="true"
10
- :display-only="true"
11
- :edit-mode="false"
12
- :show-save-button="false"
13
- :no-padding="true"
14
- :dont-format="true"/>
15
- <a-empty v-else/>
16
- </a-card>
17
- </div>
18
- </template>
19
-
20
- <script>
21
- import XReport from '@vue2-client/base-client/components/common/XReportGrid/XReport.vue'
22
-
23
- export default {
24
- name: 'GridView',
25
- components: {
26
- XReport
27
- },
28
- mounted () {
29
- // 获取当前路由中的meta
30
- this.configName = this.$router.currentRoute.meta.configName
31
- this.nothing = !this.configName
32
- },
33
- data () {
34
- return {
35
- configName: '',
36
- nothing: false
37
- }
38
- },
39
- methods: {
40
- }
41
- }
42
- </script>
43
- <style scoped>
44
-
45
- </style>
1
+ <template>
2
+ <div id="test">
3
+ <a-card :bordered="false">
4
+ <XReport
5
+ ref="main"
6
+ v-if="configName"
7
+ :use-oss-for-img="false"
8
+ :config-name="configName"
9
+ :show-img-in-cell="true"
10
+ :display-only="true"
11
+ :edit-mode="false"
12
+ :dont-format="true"/>
13
+ <a-empty v-else/>
14
+ </a-card>
15
+ </div>
16
+ </template>
17
+
18
+ <script>
19
+ import XReport from '@vue2-client/base-client/components/common/XReportGrid/XReport.vue'
20
+
21
+ export default {
22
+ name: 'GridView',
23
+ components: {
24
+ XReport
25
+ },
26
+ mounted () {
27
+ // 获取当前路由中的meta
28
+ this.configName = this.$router.currentRoute.meta.configName
29
+ this.nothing = !this.configName
30
+ },
31
+ data () {
32
+ return {
33
+ configName: '',
34
+ nothing: false
35
+ }
36
+ },
37
+ methods: {
38
+ }
39
+ }
40
+ </script>
41
+ <style scoped>
42
+
43
+ </style>
@@ -59,13 +59,13 @@ routerResource.example = {
59
59
  // component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
60
60
  // component: () => import('@vue2-client/base-client/components/common/XDatePicker/demo.vue'),
61
61
  // component: () => import('@vue2-client/base-client/components/common/XTab/XTabDemo.vue'),
62
- // component: () => import('@vue2-client/base-client/components/common/XReportGrid/XReportDemo.vue'),
62
+ component: () => import('@vue2-client/base-client/components/common/XReportGrid/XReportDemo.vue'),
63
63
  // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
64
64
  // component: () => import('@vue2-client/base-client/components/common/XConversation/XConversationDemo.vue'),
65
65
  // component: () => import('@vue2-client/base-client/components/common/XButtons/XButtonDemo.vue'),
66
66
  // component: () => import('@vue2-client/base-client/components/common/XLabelSelect/XLabelSelectDemo.vue'),
67
67
  // component: () => import('@vue2-client/base-client/components/common/XCheckList/XCheckList.vue'),
68
- component: () => import('@vue2-client/base-client/components/common/XPrint/Demo.vue'),
68
+ // component: () => import('@vue2-client/base-client/components/common/XPrint/Demo.vue'),
69
69
  // component: () => import('@vue2-client/base-client/components/AI/demo.vue'),
70
70
  // component: () => import('@vue2-client/components/g2Charts/demo.vue'),
71
71
  // component: () => import('@vue2-client/pages/LogicCallExample/index.vue'),
@@ -1,380 +0,0 @@
1
- <template>
2
- <div :class="noPadding ? 'reportMainNoPadding' : 'reportMain'">
3
- <table class="reportTable" :style="config.style ? config.style : undefined">
4
- <tbody class="'reportTable'">
5
- <!-- 标题 -->
6
- <tr v-if="showTitle && config.title.type && config.title.type !== ''">
7
- <td :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'" colspan="12">
8
- <template v-if="config.title.type === 'titleKey'">
9
- {{ config.data[config.title.value] }}
10
- </template>
11
- <template v-else-if="config.title.type === 'titleValue'">
12
- {{ config.title.value }}
13
- </template>
14
- </td>
15
- </tr>
16
- <template v-for="(row, rowIndex) in config.content">
17
- <!-- 数据对象是一个Obj -->
18
- <template v-if="row.type === 'jsonKey'">
19
- <tr :key="rowIndex">
20
- <!-- 表头 -->
21
- <td
22
- :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'"
23
- :style="determineCellStyle(receivedFunction[rowIndex].labelFunction(config, item))"
24
- colspan="6">
25
- <template v-if="receivedFunction[rowIndex].labelFunction(config).type === 'key'">
26
- {{ config.data[receivedFunction[rowIndex].labelFunction(config).content] }}
27
- </template>
28
- <template v-else-if="receivedFunction[rowIndex].labelFunction(config).type === 'value'">
29
- {{ receivedFunction[rowIndex].labelFunction(config).content }}
30
- </template>
31
- </td>
32
- <!-- 内容 -->
33
- <td
34
- :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'"
35
- :style="determineCellStyle(receivedFunction[rowIndex].valueFunction(config))"
36
- colspan="6">
37
- <template v-if="displayOnly">
38
- <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'key'">
39
- {{ config.data[receivedFunction[rowIndex].valueFunction(config).content] }}
40
- </template>
41
- <template v-else-if="receivedFunction[rowIndex].valueFunction(config).type === 'value'">
42
- {{ receivedFunction[rowIndex].valueFunction(config).content }}
43
- </template>
44
- </template>
45
- <template v-else>
46
- <template v-if="receivedFunction[rowIndex].valueFunction(config).originalKey">
47
- <a-input v-model="config.data[receivedFunction[rowIndex].valueFunction(config).originalKey]"/>
48
- </template>
49
- <template v-else>
50
- <a-input v-model="config.data[receivedFunction[rowIndex].valueFunction(config).content]"/>
51
- </template>
52
- </template>
53
- <template v-if="receivedFunction[rowIndex].valueFunction(config).type === 'img'">
54
- <template v-for="(img, imgIndex) in receivedFunction[rowIndex].valueFunction(config).content">
55
- <span :key="imgIndex" class="imgText">
56
- <a-icon type="link"/>
57
- <span @click="openImgModal(img)">{{ formatImgName(img) }}</span>
58
- <br/>
59
- </span>
60
- </template>
61
- </template>
62
- </td>
63
- </tr>
64
- </template>
65
- <!-- 数据对象是一个Array -->
66
- <template v-else-if="row.type === 'jsonArray'">
67
- <tr :key="rowIndex + '' + jsonArrayItemIndex" v-for="(item, jsonArrayItemIndex) in config.data[row.jsonArrayDataIndex]">
68
- <!-- 表头 -->
69
- <td
70
- :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'"
71
- :style="determineCellStyle(receivedFunction[rowIndex].labelFunction(config, item))"
72
- colspan="6">
73
- <template v-if="receivedFunction[rowIndex].labelFunction(config, item).type === 'key'">
74
- {{ item[receivedFunction[rowIndex].labelFunction(config, item).content] }}
75
- </template>
76
- <template v-if="receivedFunction[rowIndex].labelFunction(config, item).type === 'value'">
77
- {{ receivedFunction[rowIndex].labelFunction(config, item).content }}
78
- </template>
79
- </td>
80
- <!-- 内容 -->
81
- <td
82
- :class="noTopBorder ? 'tdWithNoTopBorder' : 'tdWithBorder'"
83
- :style="determineCellStyle(receivedFunction[rowIndex].valueFunction(config, item))"
84
- colspan="6">
85
- <template v-if="displayOnly">
86
- <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'key'">
87
- {{ item[receivedFunction[rowIndex].valueFunction(config, item).content] }}
88
- </template>
89
- <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'value'">
90
- {{ receivedFunction[rowIndex].valueFunction(config, item).content }}
91
- </template>
92
- <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'imgs'">
93
- <template v-if="!item.imgs || item.imgs.length === 0">
94
- <p style="margin: auto">无</p>
95
- </template>
96
- <template v-else>
97
- <template v-for="(img, imgIndex) in item.imgs">
98
- <div :key="imgIndex">
99
- <img :src="img.path" style="max-width: 200px; max-height: 200px"/>
100
- <p style="margin: auto">
101
- {{ img.path.substring(img.path.lastIndexOf('/') + 1, img.path.lastIndexOf('.')) }}
102
- </p>
103
- </div>
104
- </template>
105
- </template>
106
- </template>
107
- </template>
108
- <template v-else>
109
- <template v-if="receivedFunction[rowIndex].valueFunction(config, item).originalKey">
110
- <template v-if="receivedFunction[rowIndex].valueFunction(config, item).type === 'imgs'">
111
- <upload
112
- :model="{
113
- type: 'image',
114
- accept: ['*'],
115
- resUploadStock: 1,
116
- pathKey: 'cs'
117
- }"
118
- :outer-container-index="1"
119
- :img-prefix="imgPrefix"
120
- :service-name="serverName"
121
- :images="checkImg(item.imgs)"
122
- @setFiles="(...args) => {setImages(args, item, config.data)}"
123
- :upload-style="'simple'"
124
- />
125
- </template>
126
- <template v-else>
127
- <a-input v-model="item[receivedFunction[rowIndex].valueFunction(config, item).originalKey]"/>
128
- </template>
129
- </template>
130
- <template v-else>
131
- <a-input v-model="item[receivedFunction[rowIndex].valueFunction(config, item).content]"/>
132
- </template>
133
- </template>
134
- </td>
135
- </tr>
136
- </template>
137
- </template>
138
- </tbody>
139
- </table>
140
- <!-- 图片展示弹框 -->
141
- <a-modal
142
- title="图片"
143
- width="80%"
144
- :visible="showImgModal"
145
- @ok="handleShowImgOk"
146
- @cancel="handleShowImgCancel"
147
- :z-index="1001"
148
- :destroyOnClose="true">
149
- <div style="width: 100%;display: flex;justify-content: center;align-items: center">
150
- <img :src="showImageSrc" alt="图片"/>
151
- </div>
152
- </a-modal>
153
- </div>
154
- </template>
155
-
156
- <script>
157
- import Upload from '@vue2-client/base-client/components/common/Upload'
158
- import { nanoid } from 'nanoid'
159
-
160
- export default {
161
- name: 'XReportJsonRender',
162
- components: {
163
- Upload
164
- },
165
- props: {
166
- // 配置
167
- config: {
168
- type: Object,
169
- required: true
170
- },
171
- // 表格没有边距
172
- noPadding: {
173
- type: Boolean,
174
- default: false
175
- },
176
- // 表格没有上边框,与noPadding搭配可以实现连续表格
177
- noTopBorder: {
178
- type: Boolean,
179
- default: false
180
- },
181
- // 命名空间
182
- serverName: {
183
- type: String,
184
- default: 'af-system'
185
- },
186
- // 是否展示标题
187
- showTitle: {
188
- type: Boolean,
189
- default: true
190
- },
191
- // 是否仅展示
192
- displayOnly: {
193
- type: Boolean,
194
- default: true
195
- },
196
- // 图片上传后添加前缀
197
- imgPrefix: {
198
- type: String,
199
- default: undefined
200
- }
201
- },
202
- data () {
203
- return {
204
- // 储存所有json传递的函数
205
- receivedFunction: [],
206
- // 控制弹框显隐
207
- showImgModal: false,
208
- // 弹框中图片路径
209
- showImageSrc: undefined
210
- }
211
- },
212
- methods: {
213
- checkImg (target) {
214
- if (target === undefined) {
215
- return []
216
- }
217
- target.forEach(obj => {
218
- if (obj.imgid) {
219
- obj.uid = obj.imgid.toString()
220
- } else {
221
- obj.uid = nanoid(6)
222
- }
223
- if (obj.url === undefined) {
224
- if (obj.path) {
225
- obj.url = obj.path
226
- }
227
- }
228
- if (obj.name === undefined) {
229
- const withOutEndFix = obj.url.split('.')[0]
230
- const temp = withOutEndFix.split('/')
231
- obj.name = temp[temp.length - 1]
232
- }
233
- if (obj.status === undefined) {
234
- obj.status = 'done'
235
- }
236
- })
237
- return target
238
- },
239
- setImages (args, item, config) {
240
- // 如果基础上传组件在初始化完成后,就调用emit了setImage,此时图片并没有变化,直接返回
241
- if (args[2] === 'created') {
242
- return
243
- }
244
- const result = {
245
- name: item.f_project,
246
- data: args[0],
247
- orignalData: config
248
- }
249
- this.$emit('updateImg', result)
250
- },
251
- // 判断单元格样式
252
- determineCellStyle (labelFunctionReturn, color = '#000', borderWidth = '1px') {
253
- if (labelFunctionReturn.style) {
254
- // 如果声明了边框颜色
255
- if (labelFunctionReturn.style.borderColor) {
256
- color = labelFunctionReturn.style.borderColor
257
- }
258
- // 如果声明了边框宽度
259
- if (labelFunctionReturn.style.borderWidth) {
260
- borderWidth = labelFunctionReturn.style.borderWidth
261
- }
262
- }
263
- // 正常边框单元格
264
- const withBorder = {
265
- border: borderWidth + ' solid ' + color,
266
- padding: '8px'
267
- }
268
- // 仅没有上边框单元格
269
- const NoTopBorder = {
270
- borderTopStyle: 'none',
271
- borderLeft: borderWidth + ' solid ' + color,
272
- borderRight: borderWidth + ' solid ' + color,
273
- borderBottom: borderWidth + ' solid ' + color,
274
- padding: '8px'
275
- }
276
- let result = {}
277
- // 判断表头是否有声明的样式
278
- if (labelFunctionReturn.style !== undefined) {
279
- if (this.noTopBorder) {
280
- result = { ...NoTopBorder, ...labelFunctionReturn.style }
281
- } else {
282
- result = { ...withBorder, ...labelFunctionReturn.style }
283
- }
284
- } else {
285
- if (this.noTopBorder) {
286
- result = { ...NoTopBorder }
287
- } else {
288
- result = { ...withBorder }
289
- }
290
- }
291
- return result
292
- },
293
- handleShowImgOk () {
294
- this.showImgModal = false
295
- this.showImageSrc = undefined
296
- },
297
- handleShowImgCancel () {
298
- this.showImgModal = false
299
- this.showImageSrc = undefined
300
- },
301
- openImgModal (img) {
302
- this.showImageSrc = img
303
- this.showImgModal = true
304
- },
305
- formatImgName (imgSrc) {
306
- return imgSrc.split('/').pop()
307
- }
308
- },
309
- beforeMount () {
310
- // 遍历配置,将所有JSON传递的方法保存到一个数组中,并用index来一一对应
311
- for (let i = 0; i < this.config.content.length; i++) {
312
- this.receivedFunction.push({
313
- // eslint-disable-next-line no-eval
314
- labelFunction: eval('(' + this.config.content[i].customFunctionForLabel + ')'),
315
- // eslint-disable-next-line no-eval
316
- valueFunction: eval('(' + this.config.content[i].customFunctionForValue + ')')
317
- })
318
- }
319
- }
320
- }
321
- </script>
322
-
323
- <style scoped lang="less">
324
- .imgSrc {
325
- color: rgb( 24,144,255 );
326
- font-size: 0.9em;
327
- margin: auto;
328
- }
329
- .imgSrc:hover {
330
- color: rgba(24, 144, 255, 0.8);
331
- font-size: 0.9em;
332
- cursor: pointer;
333
- }
334
- .reportMain {
335
- text-align: center;
336
- margin: 0 auto;
337
- font-size: 16px;
338
- color: #000;
339
- background-color: #fff;
340
- border-radius: 8px;
341
- }
342
-
343
- .reportMainNoPadding {
344
- text-align: center;
345
- margin: 0 auto;
346
- font-size: 16px;
347
- color: #000;
348
- background-color: #fff;
349
- border-radius: 8px;
350
- }
351
-
352
- .reportTitle {
353
- font-weight: bold;
354
- }
355
-
356
- .reportTable {
357
- width: 100%;
358
- border-collapse: collapse;
359
- table-layout: fixed;
360
- word-break: break-all;
361
- }
362
-
363
- .tdWithBorder {
364
- border: 1px solid #000;
365
- padding: 8px;
366
- }
367
-
368
- .imgText:hover {
369
- color: rgb(24, 144, 255);
370
- cursor: pointer;
371
- }
372
-
373
- .tdWithNoTopBorder {
374
- border-top-style: none;
375
- border-left: 1px solid #000;
376
- border-right: 1px solid #000;
377
- border-bottom: 1px solid #000;
378
- padding: 8px;
379
- }
380
- </style>