agilebuilder-ui 1.1.12 → 1.1.13-tmp2

package/packages/super-grid/src/components/card-view.jsx

@@ -0,0 +1,103 @@
+/** @jsxImportSource vue */
+import { defineComponent, ref, computed, watch, defineEmits } from 'vue';
+import { ElCard, ElDrawer, ElTag,ElDescriptions, ElDescriptionsItem, ElButton, ElIcon, ElCheckbox, ElCheckboxGroup, ElBreadcrumb, ElLink, ElEmpty, ElDivider } from 'element-plus';
+import store from '../store';
+import { ArrowLeft, Bottom, Loading, Tickets } from '@element-plus/icons-vue';
+// import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
+
+export default defineComponent({
+    name: 'CardView',
+    props: {
+        // 当前行数据
+        form: {
+            type: Object,
+            default: () => {}
+        },
+        // 当前序号
+        no: {
+            type: [Number, String,undefined],
+            default: () => undefined
+        },
+        // 是否选中
+        isChecked: {
+            type: Boolean,
+            default: () => false
+        },
+        // 是否展示多选
+        isCheck: {
+            type: Boolean,
+            default: () => false
+        },
+        // 是否展示子表按钮
+        isSubTable: {
+            type: Boolean,
+            default: () => false
+        },
+        // 是否展示更多按钮
+        isShowDetailsMore: {
+            type: Boolean,
+            default: () => false
+        },
+    },
+    setup(props, { attrs, emit, slots }) {
+        console.log('*card-view.jsx**********************************************=>', props, attrs, slots)
+        const isMore = ref(props.isShowDetailsMore)
+    
+        // 点击了卡片事件
+        const onChecked = () => {
+            emit('checked')
+        }
+        const getSlotHtml = (slotFun) => {
+            const datas = {...props, isMore: isMore.value }
+            return ['function'].includes(typeof slotFun) ? slotFun(datas) : slotFun
+        }
+
+        const footerSlot = computed(() => {
+            return getSlotHtml(slots.footerSlot).filter(item => item?.children) ?? []
+        });
+
+        watch(() => props.isShowDetailsMore, (newValue) => {
+            isMore.value = newValue
+        });
+
+        return () => (
+            <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={{
+                header: () => (
+                    <div class="yx-flex-wrap" justify='space-between' align='center' style={{gap: '10px', "min-height": '50px', padding: '5px var(--el-card-padding)'}} onClick={onChecked}>
+                        <div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
+                            { props.no && <ElTag type="primary" size='small'>{props.no}</ElTag>}
+                            { getSlotHtml(slots.titleSlot) }
+                        </div>
+                        <div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
+                            { getSlotHtml(slots.headerRightSlot) }
+                            { props.isSubTable && <ElButton text icon={<ElIcon><Tickets /></ElIcon>} onClick={event => {
+                                event.stopPropagation()
+                                emit('showSubTable', props.form)
+                            }} /> }
+                            { props.isCheck && <ElCheckbox model-value={props.isChecked} disabled={!!props.form.$editing} style="height: auto;" onClick={(event) => {
+                                event.stopPropagation()
+                            }} onChange={onChecked} /> }
+                        </div>
+                    </div>
+                ),
+                ...(footerSlot.value.length > 0 ? {
+                    footer: footerSlot.value
+                } : {})
+            }}>
+            <div class="yx-flex-wrap" vertical style={{gap: '0', height: '100%'}} onClick={onChecked}>
+                <ElScrollbar scrollable-main max-height={!isMore.value ? '50vh' : '100%'}>
+                    <div style={{ padding: 'var(--el-card-padding)' }}>
+                        { getSlotHtml(slots.children) }
+                    </div>
+                </ElScrollbar>
+                {
+                    props.isShowDetailsMore && (<ElButton text icon={<ElIcon>{!isMore.value ? <Top /> : <Bottom /> }</ElIcon>} onClick={(event) => {
+                        event.stopPropagation()
+                        isMore.value = !isMore.value
+                    }}>{ !isMore.value ? 'Less' : 'More'}</ElButton>)
+                }
+            </div>
+        </ElCard>
+        );
+    }
+});

package/packages/super-grid/src/components/mobile-table-card.jsx

@@ -0,0 +1,394 @@
+/** @jsxImportSource vue */
+import { defineComponent, ref, computed, watch, defineEmits } from 'vue';
+import { ElCard, ElDrawer, ElTag,ElDescriptions, ElDescriptionsItem, ElButton, ElIcon, ElCheckbox, ElCheckboxGroup, ElBreadcrumb, ElLink, ElEmpty, ElDivider } from 'element-plus';
+import NormalColumnContent from '../normal-column-content.vue';
+import CardView from './card-view.jsx';
+import store from '../store';
+
+import { ArrowLeft, Bottom, Loading, Tickets } from '@element-plus/icons-vue';
+// import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
+
+export default defineComponent({
+    name: 'MobileTableCard',
+    components: {
+        NormalColumnContent,
+        CardView
+    },
+    props: {
+        // 展示字段限制
+        showFieldCount: {
+            type: [Number, undefined],
+            default: () => 5
+        },
+        // 列字段数据
+        columns: {
+            type: Array,
+            default: () => []
+        },
+        // 表格数据
+        data: {
+            type: Array,
+            default: () => []
+        },
+        // 字段事件 v-bind 与 v-on 集成
+        getColumnComponentData: {
+            type: [Function, undefined],
+            default: undefined
+        },
+        // 选中页
+        currentPage: {
+            type: [Number],
+            default: 1
+        },
+        // 一页展示数量
+        pageSize: {
+            type: [Number],
+            default: 20
+        },
+        // 一页展示数量
+        pageTotal: {
+            type: [Number],
+            default: 0
+        },
+        // 是否开启 堆积分页数据
+        isStackingPaginatedData: {
+            type: Boolean,
+            default: () => false
+        },
+    },
+    setup(props, setupData) {
+        const $emits = defineEmits(['currentChange', 'update:current-page', 'select']);
+
+        const { attrs, emit } = setupData
+        console.log('*mobile-table-card.JSX**********************************************=>', props, attrs, setupData)
+
+        // 分页加载状态
+        const isPaginationLoading = ref(false)
+
+        const paginationList = ref([])
+        // 选中数据
+        const checkedList = ref([]);
+        // 当前选中数据
+        const isCheckedIndex = ref(undefined);
+        // 展开更多字段
+        const isColumnExpandMore = ref(undefined);
+
+        // 是否打开子表弹窗
+        const isChildrenDrawer = ref(false);
+
+        // 子表打开历史数据
+        const childrenBreadcrumbData = ref([]);
+
+        const setPaginationList = (data) => {
+            if (props.isStackingPaginatedData) {
+                paginationList.value[(props.currentPage ?? 1) - 1] = data
+            } else {
+                paginationList.value[0] = data
+            }
+            isPaginationLoading.value = false
+        }
+
+        setPaginationList(props.data)
+
+        // 列表数据
+        const dataList = computed(() => {
+            if (props.isStackingPaginatedData) {
+                return paginationList.value.flatMap((data, index) => index + 1 <= props.currentPage ? data : [] )
+            } else {
+                return paginationList.value[0] ?? []
+            }
+        });
+
+        // 面包屑数据
+        const childrenList = computed(() => {
+            return childrenBreadcrumbData.value[childrenBreadcrumbData.value.length - 1]?.children ?? []
+        });
+
+        const componentDatas = computed(() => {
+            const getChildrenData = (data) => {
+                return data?.flatMap(item => {
+                    if (item?.children?.length) return getChildrenData(item.children)
+                    return [item]
+                }) ?? []
+            }
+            return getChildrenData(props.columns.filter((column) => !column ? false : !['$selection', '$index'].includes(column?.prop)))
+        });
+
+        const layoutData = computed(() => {
+            const contentData = componentDatas.value.map((data, index) => {
+                if (data.operations) {
+                    data.layoutModelType = 'footer'
+                } else {
+                    data.layoutModelType = 'content'
+                }
+                return data
+            });
+            const content = contentData.filter(({ layoutModelType}) => ['content'].includes(layoutModelType))
+            return {
+                header: content[0] ? [content[0]] : [],
+                content,
+                footer: contentData.filter(({ layoutModelType}) => ['footer'].includes(layoutModelType))
+            };
+        });
+
+        // 获取最大 label 字符长度
+        const getLongestStringLength = (strArray) => {
+            return strArray.reduce((maxLen, str) => {
+                return Math.max(maxLen, [...str].reduce((len, char) => /[\u4e00-\u9fff]/.test(char) ? len + 2 : len + 1, 0));
+            }, 0);
+        };
+
+        // 分页数量
+        const pagesNumber = computed(() => {
+            if (!props.pageTotal) return 0
+            return Math.ceil(props.pageTotal / props.pageSize)
+        })
+
+        // 字段更多 是否开启
+        const isShowDetailsMore = computed(() => {
+            if (props.showFieldCount && layoutData.value.content.length > props.showFieldCount) return true
+            return false 
+        })
+
+        // 是否显示卡片底部控件
+        const isShowFooter = computed(() => {
+            return layoutData.value.footer.length > 0
+        })
+
+        const maxLabelWidth = computed(() => {
+            return getLongestStringLength(layoutData.value.content.map((column) => column?.label ?? 0)) * 7 + 15
+        })
+
+        const isCheck = computed(() => {
+            return props.columns.some((column) => ['$selection'].includes(column?.prop));
+        });
+
+        const isIndex = computed(() => {
+            return props.columns.some((column) => ['$index'].includes(column?.prop));
+        });
+
+        const detailsFormData = computed(() => {
+            return dataList.value[isCheckedIndex.value]
+        });
+
+        // 写入选中
+        const setCheckedList = (value) => {
+            if (!isCheck.value) return
+            if (checkedList.value.includes(value)) {
+                checkedList.value = checkedList.value.filter(v => v !== value)
+            } else {
+                checkedList.value = [...new Set([...checkedList.value, value])]
+            }
+        }
+
+        /**
+         * 字段渲染展示
+         * @param {当前字段数据} columnData
+         * @param {当前行的数据} columnFormData 
+         * @param {所在行的$index} columnIndex 
+         * @param {是否只显示文本} isViewText 
+         * @returns 
+         */
+        const columnViewDom = (columnData, columnFormData, columnIndex, isViewText = false) => {
+            const {$bind = {}, $on = {}} = props.getColumnComponentData?.(columnData) ?? {}
+            const gridParams = store.get($bind['list-code'])
+            const options = gridParams?.options
+            const lineEdit = gridParams.lineEdit ?? false
+            const attrs = {
+                ...$bind,
+                options,
+                row: columnFormData,
+                rowIndex: columnIndex,
+                'right-click-menu-arr': options?.rightClickMenuArr,
+                'line-edit': lineEdit
+            }
+            const onAttrs = {
+                ...Object.fromEntries(Object.keys($on).map(key => [`on${key.charAt(0).toUpperCase()}${key.slice(1).replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())}`, $on[key]]))
+            }
+            return <div overflow-wrap>
+                <NormalColumnContent isContentViewText={isViewText} {...attrs} {...onAttrs} /> 
+            </div>
+        }
+
+        /**
+         * 
+         * @param {字段columns  List} layoutDatas 
+         * @param {当前行的数据} columnFormData 
+         * @param {所在行的$index} columnIndex 
+         * @param {限制显示字段} showFieldCount 
+         * @returns .filter((_, index) => !props.showFieldCount || props.showFieldCount > index + 1)
+         */
+        const getElDescriptions = (layoutDatas, columnFormData = detailsFormData.value, columnIndex = isCheckedIndex.value, showFieldCount = undefined) => {
+            return <ElDescriptions column={1} label-width={maxLabelWidth.value} align="right" direction="horizontal" layout='form'>
+                {(showFieldCount ? layoutDatas?.slice?.(0, showFieldCount) : layoutDatas)?.map((columnCol, index) => (
+                    <ElDescriptionsItem
+                        key={columnCol.label + index}
+                        v-slots={
+                            {
+                                label: () => <div v-html={columnCol.label ? `${columnCol.label}：` : ''} />
+                            }
+                        }
+                    >
+                        {columnViewDom(columnCol, columnFormData, columnIndex) || '-'}
+                    </ElDescriptionsItem>
+                ))}
+            </ElDescriptions>
+        }
+
+        watch(() => attrs.selection, (newValue) => {
+            console.log('表格勾选数据监听', newValue)
+            checkedList.value = newValue.map(({ $rowDataGuId }) => $rowDataGuId)
+        }, { deep: true });
+
+        // 勾选监听
+        watch(checkedList, (newValue) => {
+            if (attrs.selection.length === newValue.length) {
+                if (attrs.selection.every(({ $rowDataGuId }) => newValue.includes($rowDataGuId ) )) return
+            }
+            const selectData = dataList.value.filter(({ $rowDataGuId }) => newValue?.includes($rowDataGuId))
+            console.log('选中数据+++mobile-table-card+++++++++++++++++++++++++++++>', newValue, selectData)
+            emit('selectionChange', selectData)
+        }, { deep: true });
+
+        // 滚动数据加载监听
+        watch(() => props.data, (newValue) => {
+            console.log('props.data =======================> 更新', newValue)
+            setPaginationList(newValue)
+        }, { deep: true });
+
+        // 滚动到底部监听
+        const scrollLoad = () => {
+            console.log('分页', pagesNumber.value, props.currentPage)
+            if (pagesNumber.value > 1 && pagesNumber.value > props.currentPage) {
+                // paginationList.value[props.currentPage - 1]?.length ||
+                console.log(dataList.value.length, props.pageSize * props.currentPage)
+                if (dataList.value.length === props.pageSize * props.currentPage ) {
+                    isPaginationLoading.value = true
+                    const currentPage = props.currentPage + 1
+                    console.log('开始滚动了', currentPage, pagesNumber.value)
+                    emit('update:current-page', currentPage)
+                    emit('currentChange', currentPage)
+                } else {
+                    console.log('等待数据加载')
+                }
+            } else {
+                console.log('到底了')
+            }
+        }
+
+        const load = () => {
+            // 这里可以实现加载更多的逻辑
+        };
+
+        return () => (
+            <div v-infinite-scroll={scrollLoad} style={{ overflow: 'auto', maxHeight: 'calc(100vh - 132px)', marginBottom: '15px' }}>
+                {(<ElDrawer v-model={isChildrenDrawer.value} with-header={true} direction="btt" append-to-body size='90vh' v-slots={{
+                    header: () => (<div class="yx-flex-wrap" style={{gap: '10px'}}>
+                        {layoutData.value.header[0] && `${layoutData.value.header[0].label}: `}
+                        <ElBreadcrumb separator-icon={<ArrowRight></ArrowRight>}>
+                            {childrenBreadcrumbData.value.map((columnFormData, i) => {
+                                const label = columnViewDom(layoutData.value.header[0], columnFormData, undefined, true)
+                                return (
+                                    <ElBreadcrumbItem>
+                                        {
+                                            childrenBreadcrumbData.value.length - 1 === i ? label : <ElLink onClick={() =>  childrenBreadcrumbData.value = childrenBreadcrumbData.value.slice(0, i + 1)}>{ label }</ElLink>
+                                        }
+                                    </ElBreadcrumbItem>
+                                )
+                                
+                            })}
+                        </ElBreadcrumb>
+                    </div>)
+                    }}
+                    onClosed={() => childrenBreadcrumbData.value = []}
+                    >
+                    
+                    <div class="yx-flex-wrap" vertical style={{ 'height': '100%', gap: '10px'}}>
+                        <ElScrollbar scrollable-main max-height='100%' style={{ 'flex': '1 1 auto'}}>
+                            <div class="yx-flex-wrap" vertical style={{ gap: '15px'}}>
+                                { childrenList.value.map((columnFormData, columnIndex) => {
+                                    // 开启编辑后禁止选中
+                                    const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
+        
+                                    // 是否选中
+                                    const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
+        
+                                    // 是否有子表
+                                    const isSubTable = !!((columnFormData?.children?.length ?? 0) > 0)
+
+                                    return (<CardView 
+                                        form={columnFormData}
+                                        no={ isIndex ? columnIndex + 1 : undefined}
+                                        isChecked={isChecked}
+                                        isSubTable={isSubTable}
+                                        isCheck={isCheck.value}
+                                        isShowDetailsMore={isShowDetailsMore.value && !columnFormData.$editing}
+                                        onChecked={onChecked}
+                                        onShowSubTable={() => {
+                                            childrenBreadcrumbData.value =[...childrenBreadcrumbData.value, columnFormData];
+                                        }}
+                                        v-slots={{
+                                            titleSlot: layoutData.value.header && layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)),
+                                            children: ({ isMore }) => getElDescriptions(layoutData.value.content, columnFormData, columnIndex, !isMore ? undefined : props.showFieldCount),
+                                            footerSlot: isShowFooter.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
+                                                {layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
+                                            </div>)
+                                        }}
+                                    />)
+                                }) }
+                            </div>
+                        </ElScrollbar>
+                    </div>
+                </ElDrawer>)}
+                    <div
+                        class="yx-flex-wrap"
+                        vertical
+                        style="overflow: auto; gap: 15px;"
+                        onInfiniteScroll={load}
+                    >
+                        {dataList.value.length === 0 && <ElEmpty />}
+                        
+                        {dataList.value.map((columnFormData, columnIndex) => {
+                            const isColumnExpand = columnIndex === isColumnExpandMore.value
+
+                            // 开启编辑后禁止选中
+                            const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
+
+                            // 是否选中
+                            const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
+
+                            // 是否有子表
+                            const isSubTable = !!(columnFormData?.children?.length ?? false)
+                            return (<CardView 
+                                form={columnFormData}
+                                no={ isIndex ? columnIndex + 1 : undefined}
+                                isChecked={isChecked}
+                                isSubTable={isSubTable}
+                                isCheck={isCheck.value}
+                                isShowDetailsMore={isShowDetailsMore.value && !columnFormData.$editing}
+                                onChecked={onChecked}
+                                onShowSubTable={() => {
+                                    childrenBreadcrumbData.value =[columnFormData];
+                                    isChildrenDrawer.value = true
+                                }}
+                                v-slots={{
+                                    titleSlot: layoutData.value.header && layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)),
+                                    children: ({ isMore }) => getElDescriptions(layoutData.value.content, columnFormData, columnIndex, !isMore ? undefined : props.showFieldCount),
+                                    footerSlot: isShowFooter.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
+                                        {layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
+                                    </div>)
+                                }}
+                            />)
+                        })}
+
+                        {
+                            dataList.value.length > 0 && pagesNumber.value > 1 && (<ElDivider>
+                                { (pagesNumber.value > props.currentPage || isPaginationLoading.value) && (<ElIcon loading-rotate size={25} color="#409eff" style={{ margin: '15px auto' }}><Loading></Loading></ElIcon>) }
+                                { (pagesNumber.value <= props.currentPage) && 'END' }
+                            </ElDivider>)
+                        }
+                    </div>
+            </div>
+        );
+    }
+});

package/packages/super-grid/src/normal-column-content.vue

@@ -2,7 +2,7 @@
   <div style="width: 100%">
     <!--添加:key="column.prop+'_'+rowIndex"是为了解决多行是行编辑状态时新建的记录的文本框内有值的问题-->
     <dynamic-input
-      v-if="(lineEdit.editable && isEditable && row.$editing) || isShowForm"
+      v-if="(lineEdit.editable && isEditable && row.$editing && !isContentViewText) || isShowForm"
       v-model:value="row[column.prop]"
       :class="requiredClass"
       :column="column"
@@ -388,6 +388,11 @@ export default {
   },
   name: 'NormalColumnContent',
   props: {
+    // 强制文案方式展示
+    isContentViewText: {
+      type: Boolean,
+      default: false
+    },
     column: {
       type: Object,
       default: null
@@ -969,7 +974,6 @@ export default {
       }
     },
     isRequired(editing) {
-      console.log('isRequired---this.lineEdit=', this.lineEdit)
       if (!this.isFormSubTable && this.lineEdit && this.lineEdit.editable && this.isEditable && editing && this.column.validations) {
         if (this.column.validations.indexOf('"required":true') > 0) {
           return true