agilebuilder-ui 1.1.13-tmp1 → 1.1.13-tmp2
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/lib/super-ui.css +1 -1
- package/lib/super-ui.js +7359 -7353
- package/lib/super-ui.umd.cjs +55 -55
- package/package.json +2 -2
- package/packages/super-grid/src/components/card-view.jsx +103 -0
- package/packages/super-grid/src/components/mobile-table-card.jsx +59 -118
- package/packages/super-grid/src/normal-column-content.vue +0 -1
- package/packages/super-grid/src/super-grid.vue +12 -1
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "agilebuilder-ui",
|
|
3
|
-
"version": "1.1.13-
|
|
3
|
+
"version": "1.1.13-tmp2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
|
-
"main": "./
|
|
6
|
+
"main": "./lib/super-ui.js",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"lib": "vite build --mode production",
|
|
9
9
|
"lib:dev": "vite build --mode development",
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/** @jsxImportSource vue */
|
|
2
|
+
import { defineComponent, ref, computed, watch, defineEmits } from 'vue';
|
|
3
|
+
import { ElCard, ElDrawer, ElTag,ElDescriptions, ElDescriptionsItem, ElButton, ElIcon, ElCheckbox, ElCheckboxGroup, ElBreadcrumb, ElLink, ElEmpty, ElDivider } from 'element-plus';
|
|
4
|
+
import store from '../store';
|
|
5
|
+
import { ArrowLeft, Bottom, Loading, Tickets } from '@element-plus/icons-vue';
|
|
6
|
+
// import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
|
|
7
|
+
|
|
8
|
+
export default defineComponent({
|
|
9
|
+
name: 'CardView',
|
|
10
|
+
props: {
|
|
11
|
+
// 当前行数据
|
|
12
|
+
form: {
|
|
13
|
+
type: Object,
|
|
14
|
+
default: () => {}
|
|
15
|
+
},
|
|
16
|
+
// 当前序号
|
|
17
|
+
no: {
|
|
18
|
+
type: [Number, String,undefined],
|
|
19
|
+
default: () => undefined
|
|
20
|
+
},
|
|
21
|
+
// 是否选中
|
|
22
|
+
isChecked: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: () => false
|
|
25
|
+
},
|
|
26
|
+
// 是否展示多选
|
|
27
|
+
isCheck: {
|
|
28
|
+
type: Boolean,
|
|
29
|
+
default: () => false
|
|
30
|
+
},
|
|
31
|
+
// 是否展示子表按钮
|
|
32
|
+
isSubTable: {
|
|
33
|
+
type: Boolean,
|
|
34
|
+
default: () => false
|
|
35
|
+
},
|
|
36
|
+
// 是否展示更多按钮
|
|
37
|
+
isShowDetailsMore: {
|
|
38
|
+
type: Boolean,
|
|
39
|
+
default: () => false
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
setup(props, { attrs, emit, slots }) {
|
|
43
|
+
console.log('*card-view.jsx**********************************************=>', props, attrs, slots)
|
|
44
|
+
const isMore = ref(props.isShowDetailsMore)
|
|
45
|
+
|
|
46
|
+
// 点击了卡片事件
|
|
47
|
+
const onChecked = () => {
|
|
48
|
+
emit('checked')
|
|
49
|
+
}
|
|
50
|
+
const getSlotHtml = (slotFun) => {
|
|
51
|
+
const datas = {...props, isMore: isMore.value }
|
|
52
|
+
return ['function'].includes(typeof slotFun) ? slotFun(datas) : slotFun
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const footerSlot = computed(() => {
|
|
56
|
+
return getSlotHtml(slots.footerSlot).filter(item => item?.children) ?? []
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
watch(() => props.isShowDetailsMore, (newValue) => {
|
|
60
|
+
isMore.value = newValue
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
return () => (
|
|
64
|
+
<ElCard key={`card_${props.form?.$rowDataGuId || `${props.form?.id}_${props.no}`}`} header-padding body-padding shadow="hover" class={{ 'yx-card-main': true, 'is-checked': props.isChecked}} v-slots={{
|
|
65
|
+
header: () => (
|
|
66
|
+
<div class="yx-flex-wrap" justify='space-between' align='center' style={{gap: '10px', "min-height": '50px', padding: '5px var(--el-card-padding)'}} onClick={onChecked}>
|
|
67
|
+
<div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
|
|
68
|
+
{ props.no && <ElTag type="primary" size='small'>{props.no}</ElTag>}
|
|
69
|
+
{ getSlotHtml(slots.titleSlot) }
|
|
70
|
+
</div>
|
|
71
|
+
<div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
|
|
72
|
+
{ getSlotHtml(slots.headerRightSlot) }
|
|
73
|
+
{ props.isSubTable && <ElButton text icon={<ElIcon><Tickets /></ElIcon>} onClick={event => {
|
|
74
|
+
event.stopPropagation()
|
|
75
|
+
emit('showSubTable', props.form)
|
|
76
|
+
}} /> }
|
|
77
|
+
{ props.isCheck && <ElCheckbox model-value={props.isChecked} disabled={!!props.form.$editing} style="height: auto;" onClick={(event) => {
|
|
78
|
+
event.stopPropagation()
|
|
79
|
+
}} onChange={onChecked} /> }
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
),
|
|
83
|
+
...(footerSlot.value.length > 0 ? {
|
|
84
|
+
footer: footerSlot.value
|
|
85
|
+
} : {})
|
|
86
|
+
}}>
|
|
87
|
+
<div class="yx-flex-wrap" vertical style={{gap: '0', height: '100%'}} onClick={onChecked}>
|
|
88
|
+
<ElScrollbar scrollable-main max-height={!isMore.value ? '50vh' : '100%'}>
|
|
89
|
+
<div style={{ padding: 'var(--el-card-padding)' }}>
|
|
90
|
+
{ getSlotHtml(slots.children) }
|
|
91
|
+
</div>
|
|
92
|
+
</ElScrollbar>
|
|
93
|
+
{
|
|
94
|
+
props.isShowDetailsMore && (<ElButton text icon={<ElIcon>{!isMore.value ? <Top /> : <Bottom /> }</ElIcon>} onClick={(event) => {
|
|
95
|
+
event.stopPropagation()
|
|
96
|
+
isMore.value = !isMore.value
|
|
97
|
+
}}>{ !isMore.value ? 'Less' : 'More'}</ElButton>)
|
|
98
|
+
}
|
|
99
|
+
</div>
|
|
100
|
+
</ElCard>
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
});
|
|
@@ -2,14 +2,17 @@
|
|
|
2
2
|
import { defineComponent, ref, computed, watch, defineEmits } from 'vue';
|
|
3
3
|
import { ElCard, ElDrawer, ElTag,ElDescriptions, ElDescriptionsItem, ElButton, ElIcon, ElCheckbox, ElCheckboxGroup, ElBreadcrumb, ElLink, ElEmpty, ElDivider } from 'element-plus';
|
|
4
4
|
import NormalColumnContent from '../normal-column-content.vue';
|
|
5
|
+
import CardView from './card-view.jsx';
|
|
5
6
|
import store from '../store';
|
|
7
|
+
|
|
6
8
|
import { ArrowLeft, Bottom, Loading, Tickets } from '@element-plus/icons-vue';
|
|
7
9
|
// import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
|
|
8
10
|
|
|
9
11
|
export default defineComponent({
|
|
10
12
|
name: 'MobileTableCard',
|
|
11
13
|
components: {
|
|
12
|
-
NormalColumnContent
|
|
14
|
+
NormalColumnContent,
|
|
15
|
+
CardView
|
|
13
16
|
},
|
|
14
17
|
props: {
|
|
15
18
|
// 展示字段限制
|
|
@@ -17,11 +20,6 @@ export default defineComponent({
|
|
|
17
20
|
type: [Number, undefined],
|
|
18
21
|
default: () => 5
|
|
19
22
|
},
|
|
20
|
-
// 是否使用弹窗功能
|
|
21
|
-
isDetailsDrawer: {
|
|
22
|
-
type: Boolean,
|
|
23
|
-
default: () => false
|
|
24
|
-
},
|
|
25
23
|
// 列字段数据
|
|
26
24
|
columns: {
|
|
27
25
|
type: Array,
|
|
@@ -70,8 +68,6 @@ export default defineComponent({
|
|
|
70
68
|
const paginationList = ref([])
|
|
71
69
|
// 选中数据
|
|
72
70
|
const checkedList = ref([]);
|
|
73
|
-
// 是否打开弹窗
|
|
74
|
-
const isDetailsDrawer = ref(false);
|
|
75
71
|
// 当前选中数据
|
|
76
72
|
const isCheckedIndex = ref(undefined);
|
|
77
73
|
// 展开更多字段
|
|
@@ -150,18 +146,13 @@ export default defineComponent({
|
|
|
150
146
|
|
|
151
147
|
// 字段更多 是否开启
|
|
152
148
|
const isShowDetailsMore = computed(() => {
|
|
153
|
-
if (
|
|
149
|
+
if (props.showFieldCount && layoutData.value.content.length > props.showFieldCount) return true
|
|
154
150
|
return false
|
|
155
151
|
})
|
|
156
152
|
|
|
157
153
|
// 是否显示卡片底部控件
|
|
158
154
|
const isShowFooter = computed(() => {
|
|
159
|
-
return
|
|
160
|
-
})
|
|
161
|
-
|
|
162
|
-
// 是否开启弹窗 展示
|
|
163
|
-
const isShowDetailsDrawer = computed(() => {
|
|
164
|
-
return !!props.isDetailsDrawer
|
|
155
|
+
return layoutData.value.footer.length > 0
|
|
165
156
|
})
|
|
166
157
|
|
|
167
158
|
const maxLabelWidth = computed(() => {
|
|
@@ -291,19 +282,6 @@ export default defineComponent({
|
|
|
291
282
|
|
|
292
283
|
return () => (
|
|
293
284
|
<div v-infinite-scroll={scrollLoad} style={{ overflow: 'auto', maxHeight: 'calc(100vh - 132px)', marginBottom: '15px' }}>
|
|
294
|
-
{/* { paginationList.value.length}, {paginationList.value[props.currentPage - 1]?.length} */}
|
|
295
|
-
{/* <div overflow-wrap>{JSON.stringify(props.columns)}</div> */}
|
|
296
|
-
{isShowDetailsDrawer.value && (<ElDrawer v-model={isDetailsDrawer.value} with-header={true} direction="btt" append-to-body size='90vh'>
|
|
297
|
-
<div class="yx-flex-wrap" vertical style={{ 'height': 'calc(100vh - 218px)', gap: '10px'}}>
|
|
298
|
-
<ElScrollbar scrollable-main height='calc(100vh - 258px)' style={{ 'flex': '1 1 auto'}}>
|
|
299
|
-
{ detailsFormData.value && getElDescriptions(layoutData.value.content, detailsFormData.value, isCheckedIndex.value, undefined)}
|
|
300
|
-
</ElScrollbar>
|
|
301
|
-
{ detailsFormData.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
|
|
302
|
-
{layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol))}
|
|
303
|
-
</div>)}
|
|
304
|
-
</div>
|
|
305
|
-
</ElDrawer>)}
|
|
306
|
-
|
|
307
285
|
{(<ElDrawer v-model={isChildrenDrawer.value} with-header={true} direction="btt" append-to-body size='90vh' v-slots={{
|
|
308
286
|
header: () => (<div class="yx-flex-wrap" style={{gap: '10px'}}>
|
|
309
287
|
{layoutData.value.header[0] && `${layoutData.value.header[0].label}: `}
|
|
@@ -325,44 +303,43 @@ export default defineComponent({
|
|
|
325
303
|
onClosed={() => childrenBreadcrumbData.value = []}
|
|
326
304
|
>
|
|
327
305
|
|
|
328
|
-
<div class="yx-flex-wrap" vertical style={{ '
|
|
329
|
-
<ElScrollbar scrollable-main height='100%' style={{ 'flex': '1 1 auto'}}>
|
|
306
|
+
<div class="yx-flex-wrap" vertical style={{ 'height': '100%', gap: '10px'}}>
|
|
307
|
+
<ElScrollbar scrollable-main max-height='100%' style={{ 'flex': '1 1 auto'}}>
|
|
330
308
|
<div class="yx-flex-wrap" vertical style={{ gap: '15px'}}>
|
|
331
309
|
{ childrenList.value.map((columnFormData, columnIndex) => {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
)
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
310
|
+
// 开启编辑后禁止选中
|
|
311
|
+
const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
|
|
312
|
+
|
|
313
|
+
// 是否选中
|
|
314
|
+
const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
|
|
315
|
+
|
|
316
|
+
// 是否有子表
|
|
317
|
+
const isSubTable = !!((columnFormData?.children?.length ?? 0) > 0)
|
|
318
|
+
|
|
319
|
+
return (<CardView
|
|
320
|
+
form={columnFormData}
|
|
321
|
+
no={ isIndex ? columnIndex + 1 : undefined}
|
|
322
|
+
isChecked={isChecked}
|
|
323
|
+
isSubTable={isSubTable}
|
|
324
|
+
isCheck={isCheck.value}
|
|
325
|
+
isShowDetailsMore={isShowDetailsMore.value && !columnFormData.$editing}
|
|
326
|
+
onChecked={onChecked}
|
|
327
|
+
onShowSubTable={() => {
|
|
328
|
+
childrenBreadcrumbData.value =[...childrenBreadcrumbData.value, columnFormData];
|
|
329
|
+
}}
|
|
330
|
+
v-slots={{
|
|
331
|
+
titleSlot: layoutData.value.header && layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)),
|
|
332
|
+
children: ({ isMore }) => getElDescriptions(layoutData.value.content, columnFormData, columnIndex, !isMore ? undefined : props.showFieldCount),
|
|
333
|
+
footerSlot: isShowFooter.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
|
|
334
|
+
{layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
|
|
335
|
+
</div>)
|
|
336
|
+
}}
|
|
337
|
+
/>)
|
|
359
338
|
}) }
|
|
360
339
|
</div>
|
|
361
340
|
</ElScrollbar>
|
|
362
341
|
</div>
|
|
363
342
|
</ElDrawer>)}
|
|
364
|
-
|
|
365
|
-
{/* <ElCheckboxGroup value={checkedList} onChange={value => checkedList.value = value}> */}
|
|
366
343
|
<div
|
|
367
344
|
class="yx-flex-wrap"
|
|
368
345
|
vertical
|
|
@@ -377,76 +354,40 @@ export default defineComponent({
|
|
|
377
354
|
// 开启编辑后禁止选中
|
|
378
355
|
const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
|
|
379
356
|
|
|
357
|
+
// 是否选中
|
|
380
358
|
const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
|
|
381
359
|
|
|
382
360
|
// 是否有子表
|
|
383
|
-
const
|
|
384
|
-
return (
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
),
|
|
405
|
-
...(isShowFooter.value ? {
|
|
406
|
-
footer: () => (
|
|
407
|
-
<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
|
|
408
|
-
{layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
|
|
409
|
-
</div>
|
|
410
|
-
)
|
|
411
|
-
} : {})
|
|
412
|
-
}}>
|
|
413
|
-
<div class="yx-flex-wrap" vertical style={{gap: '0', height: '100%'}} onClick={onChecked}>
|
|
414
|
-
<ElScrollbar scrollable-main style={{ maxHeight: isShowDetailsMore.value && (isColumnExpand || columnFormData.$editing) ? '50vh' : '100%'}}>
|
|
415
|
-
{/* <div>{JSON.stringify(columnFormData)}</div> */}
|
|
416
|
-
<div style={{ padding: 'var(--el-card-padding)' }}>
|
|
417
|
-
{ getElDescriptions(layoutData.value.content, columnFormData, columnIndex, isColumnExpand || columnFormData.$editing ? undefined : props.showFieldCount) }
|
|
418
|
-
</div>
|
|
419
|
-
</ElScrollbar>
|
|
420
|
-
{
|
|
421
|
-
isShowDetailsDrawer.value && (<ElButton text icon={<ElIcon><Tickets /></ElIcon>} onClick={(event) => {
|
|
422
|
-
event.stopPropagation()
|
|
423
|
-
isCheckedIndex.value = columnIndex;
|
|
424
|
-
isDetailsDrawer.value = true;
|
|
425
|
-
}}>More</ElButton>)
|
|
426
|
-
}
|
|
427
|
-
{
|
|
428
|
-
isShowDetailsMore.value && !columnFormData.$editing && (<ElButton text icon={<ElIcon>{isColumnExpand ? <Top /> : <Bottom /> }</ElIcon>} onClick={(event) => {
|
|
429
|
-
event.stopPropagation()
|
|
430
|
-
isColumnExpandMore.value = isColumnExpand ? undefined : columnIndex
|
|
431
|
-
// isCheckedIndex.value = columnIndex;
|
|
432
|
-
// isDetailsDrawer.value = true;
|
|
433
|
-
}}>{ isColumnExpand ? 'Less' : 'More'}</ElButton>)
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
</div>
|
|
437
|
-
</ElCard>
|
|
438
|
-
)
|
|
361
|
+
const isSubTable = !!(columnFormData?.children?.length ?? false)
|
|
362
|
+
return (<CardView
|
|
363
|
+
form={columnFormData}
|
|
364
|
+
no={ isIndex ? columnIndex + 1 : undefined}
|
|
365
|
+
isChecked={isChecked}
|
|
366
|
+
isSubTable={isSubTable}
|
|
367
|
+
isCheck={isCheck.value}
|
|
368
|
+
isShowDetailsMore={isShowDetailsMore.value && !columnFormData.$editing}
|
|
369
|
+
onChecked={onChecked}
|
|
370
|
+
onShowSubTable={() => {
|
|
371
|
+
childrenBreadcrumbData.value =[columnFormData];
|
|
372
|
+
isChildrenDrawer.value = true
|
|
373
|
+
}}
|
|
374
|
+
v-slots={{
|
|
375
|
+
titleSlot: layoutData.value.header && layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)),
|
|
376
|
+
children: ({ isMore }) => getElDescriptions(layoutData.value.content, columnFormData, columnIndex, !isMore ? undefined : props.showFieldCount),
|
|
377
|
+
footerSlot: isShowFooter.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
|
|
378
|
+
{layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
|
|
379
|
+
</div>)
|
|
380
|
+
}}
|
|
381
|
+
/>)
|
|
439
382
|
})}
|
|
383
|
+
|
|
440
384
|
{
|
|
441
385
|
dataList.value.length > 0 && pagesNumber.value > 1 && (<ElDivider>
|
|
442
386
|
{ (pagesNumber.value > props.currentPage || isPaginationLoading.value) && (<ElIcon loading-rotate size={25} color="#409eff" style={{ margin: '15px auto' }}><Loading></Loading></ElIcon>) }
|
|
443
387
|
{ (pagesNumber.value <= props.currentPage) && 'END' }
|
|
444
388
|
</ElDivider>)
|
|
445
389
|
}
|
|
446
|
-
|
|
447
|
-
|
|
448
390
|
</div>
|
|
449
|
-
{/* </ElCheckboxGroup> */}
|
|
450
391
|
</div>
|
|
451
392
|
);
|
|
452
393
|
}
|
|
@@ -974,7 +974,6 @@ export default {
|
|
|
974
974
|
}
|
|
975
975
|
},
|
|
976
976
|
isRequired(editing) {
|
|
977
|
-
console.log('isRequired---this.lineEdit=', this.lineEdit)
|
|
978
977
|
if (!this.isFormSubTable && this.lineEdit && this.lineEdit.editable && this.isEditable && editing && this.column.validations) {
|
|
979
978
|
if (this.column.validations.indexOf('"required":true') > 0) {
|
|
980
979
|
return true
|
|
@@ -1730,7 +1730,18 @@ export default {
|
|
|
1730
1730
|
.then((data) => {
|
|
1731
1731
|
if (typeof parentRowIds === 'undefined' || parentRowIds === null) {
|
|
1732
1732
|
// 当开启卡片的时候，则开启滚动分页
|
|
1733
|
-
const
|
|
1733
|
+
const getChildren = (data) => {
|
|
1734
|
+
return data?.map(item => {
|
|
1735
|
+
return {
|
|
1736
|
+
$rowDataGuId: getGuId(),
|
|
1737
|
+
...item,
|
|
1738
|
+
...(item?.children?.length ? {
|
|
1739
|
+
children: getChildren(item.children)
|
|
1740
|
+
} : {})
|
|
1741
|
+
}
|
|
1742
|
+
}) ?? []
|
|
1743
|
+
}
|
|
1744
|
+
const dataList = [...(this.isShowCard && this.currentPage > 1 ? this.gridData : []), ...getChildren(data?.data ?? [])]
|
|
1734
1745
|
let tableData = []
|
|
1735
1746
|
// 对数据做序列化，比如：处理xss攻击
|
|
1736
1747
|
if (isHasOptionFunction('gridDataLoaded', this.code)) {
|