agilebuilder-ui 1.1.12-tmp2 → 1.1.13-tmp1

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

@@ -0,0 +1,453 @@
+/** @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 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
+    },
+    props: {
+        // 展示字段限制
+        showFieldCount: {
+            type: [Number, undefined],
+            default: () => 5
+        },
+        // 是否使用弹窗功能
+        isDetailsDrawer: {
+            type: Boolean,
+            default: () => false
+        },
+        // 列字段数据
+        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 isDetailsDrawer = ref(false);
+        // 当前选中数据
+        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 (!isShowDetailsDrawer.value && props.showFieldCount && layoutData.value.content.length > props.showFieldCount) return true
+            return false 
+        })
+
+        // 是否显示卡片底部控件
+        const isShowFooter = computed(() => {
+            return !props.isDetailsDrawer && layoutData.value.footer.length > 0
+        })
+
+        // 是否开启弹窗 展示
+        const isShowDetailsDrawer = computed(() => {
+            return !!props.isDetailsDrawer
+        })
+
+        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' }}>
+                {/* { paginationList.value.length}, {paginationList.value[props.currentPage - 1]?.length} */}
+                {/* <div overflow-wrap>{JSON.stringify(props.columns)}</div> */}
+                {isShowDetailsDrawer.value && (<ElDrawer v-model={isDetailsDrawer.value} with-header={true} direction="btt" append-to-body size='90vh'>
+                    <div class="yx-flex-wrap" vertical style={{ 'height': 'calc(100vh - 218px)', gap: '10px'}}>
+                        <ElScrollbar scrollable-main height='calc(100vh - 258px)' style={{ 'flex': '1 1 auto'}}>
+                            { detailsFormData.value && getElDescriptions(layoutData.value.content, detailsFormData.value, isCheckedIndex.value, undefined)}
+                        </ElScrollbar>
+                        { detailsFormData.value && (<div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
+                            {layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol))}
+                        </div>)}
+                    </div>
+                </ElDrawer>)}
+
+                {(<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={{ 'maxHeight': 'calc(100vh - 218px)', gap: '10px'}}>
+                        <ElScrollbar scrollable-main height='100%' style={{ 'flex': '1 1 auto'}}>
+                            <div class="yx-flex-wrap" vertical style={{ gap: '15px'}}>
+                                { childrenList.value.map((columnFormData, columnIndex) => {
+                                    const isColumnExpand = columnIndex === isColumnExpandMore.value
+                                    // 是否是子表
+                                    const isChildren = !!(columnFormData?.children?.length ?? false)
+                                    return <ElCard key={`card_children_${columnFormData?.id}_${columnIndex}`} header-padding body-padding shadow="hover" class='yx-card-main' 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)'}}>
+                                                <div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
+                                                    { isIndex && <ElTag type="primary" size='small'>{columnIndex + 1}</ElTag>}
+                                                    { layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)) }
+                                                </div>
+                                                <div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
+                                                    { isChildren && <ElButton text icon={<ElIcon><Tickets /></ElIcon>} onClick={event => {
+                                                        event.stopPropagation()
+                                                        childrenBreadcrumbData.value =[...childrenBreadcrumbData.value, columnFormData];
+                                                    }} /> }
+                                                </div>
+                                            </div>
+                                        )
+                                    }}>
+                                        <div class="yx-flex-wrap" vertical style={{gap: '0', height: '100%'}}>
+                                            <ElScrollbar scrollable-main height={isShowDetailsMore.value && (isColumnExpand || columnFormData.$editing) ? '40vh' : '100%'}>
+                                                <div style={{ padding: 'var(--el-card-padding)' }}>
+                                                    { getElDescriptions(layoutData.value.content, columnFormData, columnIndex, isColumnExpand || columnFormData.$editing ? undefined : props.showFieldCount) }
+                                                </div>
+                                            </ElScrollbar>
+                                        </div>
+                                    </ElCard>
+                                }) }
+                            </div>
+                        </ElScrollbar>
+                    </div>
+                </ElDrawer>)}
+
+                {/* <ElCheckboxGroup value={checkedList} onChange={value => checkedList.value = value}> */}
+                    <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 isChildren = !!(columnFormData?.children?.length ?? false)
+                            return (
+                                <ElCard key={`card_${columnFormData?.id}_${columnIndex}`} header-padding body-padding shadow="hover" class={{ 'yx-card-main': true, 'is-checked': 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'}}>
+                                                    { isIndex && <ElTag type="primary" size='small'>{columnIndex + 1}</ElTag>}
+                                                    { layoutData.value.header?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex, true)) }
+                                                </div>
+                                                <div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
+                                                    { isChildren && <ElButton text icon={<ElIcon><Tickets /></ElIcon>} onClick={event => {
+                                                        event.stopPropagation()
+                                                        // isCheckedIndex.value = columnIndex;
+                                                        childrenBreadcrumbData.value =[columnFormData];
+                                                        isChildrenDrawer.value = true
+                                                    }} /> }
+                                                    { isCheck.value && <ElCheckbox model-value={isChecked} disabled={!!columnFormData.$editing} style="height: auto;" onClick={(event) => {
+                                                        event.stopPropagation()
+                                                    }} onChange={onChecked} /> }
+                                                </div>
+                                            </div>
+                                        ),
+                                        ...(isShowFooter.value ? {
+                                            footer: () => (
+                                                <div class="yx-flex-wrap" wrap style={{gap: '15px'}}>
+                                                    {layoutData.value.footer?.map((columnCol) => columnViewDom(columnCol, columnFormData, columnIndex))}
+                                                </div>
+                                            )
+                                        } : {})
+                                    }}>
+                                    <div class="yx-flex-wrap" vertical style={{gap: '0', height: '100%'}} onClick={onChecked}>
+                                        <ElScrollbar scrollable-main style={{ maxHeight: isShowDetailsMore.value && (isColumnExpand || columnFormData.$editing) ? '50vh' : '100%'}}>
+                                            {/* <div>{JSON.stringify(columnFormData)}</div> */}
+                                            <div style={{ padding: 'var(--el-card-padding)' }}>
+                                                { getElDescriptions(layoutData.value.content, columnFormData, columnIndex, isColumnExpand || columnFormData.$editing ? undefined : props.showFieldCount) }
+                                            </div>
+                                        </ElScrollbar>
+                                        {
+                                            isShowDetailsDrawer.value && (<ElButton text icon={<ElIcon><Tickets /></ElIcon>} onClick={(event) => {
+                                                event.stopPropagation()
+                                                isCheckedIndex.value = columnIndex;
+                                                isDetailsDrawer.value = true;
+                                            }}>More</ElButton>)
+                                        }
+                                        {
+                                            isShowDetailsMore.value && !columnFormData.$editing && (<ElButton text icon={<ElIcon>{isColumnExpand ? <Top /> : <Bottom /> }</ElIcon>} onClick={(event) => {
+                                                event.stopPropagation()
+                                                isColumnExpandMore.value = isColumnExpand ? undefined : columnIndex
+                                                // isCheckedIndex.value = columnIndex;
+                                                // isDetailsDrawer.value = true;
+                                            }}>{ isColumnExpand ? 'Less' : 'More'}</ElButton>)
+                                        }
+                                        
+                                    </div>
+                                </ElCard>
+                            )
+                        })}
+                        {
+                            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>
+                {/* </ElCheckboxGroup> */}
+            </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