agilebuilder-ui 1.1.13-tmp6 → 1.1.13-tmp7

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

@@ -1,463 +1,463 @@
-/** @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 '../../../../src/components/Card';
-import Scrollbar from '../../../../src/components/Scrollbar';
-import store from '../store';
-import { apisMixin } from '../apis'
-
-import { ArrowLeft, Bottom, CirclePlus, Loading, Tickets } from '@element-plus/icons-vue';
-// import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
-
-export default defineComponent({
-    name: 'MobileTableCard',
-    components: {
-        NormalColumnContent,
-        CardView,
-        Scrollbar
-    },
-    mixins: [apisMixin],
-    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, expose } = setupData
-
-        console.log('*mobile-table-card.JSX**********************************************=>', props, attrs, setupData, expose)
-
-        // 分页加载状态
-        const isPaginationLoading = ref(false)
-
-        const paginationList = ref([])
-        // 选中数据
-        const checkedList = ref([]);
-        // 当前勾选ID
-        const checkedClickId = ref(undefined);
-        // 当前选中数据
-        const isCheckedIndex = 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 addColumnBtn = computed(() => {
-            const gridParams = store.get(attrs.listCode)
-            const showOperationButton = gridParams?.options?.showOperationButton ?? false
-            const isFormSubTable = gridParams?.options?.isFormSubTable ?? false
-            const subTableCanAdd = gridParams?.options?.subTableCanAdd ?? false
-            const isOperation = componentDatas.value?.some(({ prop }) => ['operation'].includes(prop))
-            return showOperationButton && isFormSubTable && subTableCanAdd && isOperation
-        })
-
-        // 列表数据
-        const dataList = computed(() => {
-            if (props.isStackingPaginatedData) {
-                return paginationList.value.flatMap((data, index) => index + 1 <= props.currentPage ? data : [] )
-            } else {
-                return paginationList.value[0] ?? []
-            }
-        });
-
-        // 获取包含所有子表数据 LIST 一般用于勾选
-        const dataChildrenList = computed(() => {
-            const getChildrenData = (data) => {
-                return data?.flatMap(item => {
-                    if (item?.children?.length) return [item, ...getChildrenData(item.children)]
-                    return [item]
-                }) ?? []
-            }
-            return getChildrenData(dataList.value)
-        });
-
-        const isLoadPaginationData = computed(() => {
-            if (props.isStackingPaginatedData) {
-                return (paginationList.value[props.currentPage - 1]?.length ?? 0) > 0
-            } else {
-                return dataList.value.length < props.pageSize * props.currentPage && pagesNumber.value >= props.currentPage
-            }
-        })
-
-        // 面包屑数据
-        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) => {
-            debugger;
-            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])]
-            }
-            checkedClickId.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 <NormalColumnContent isContentViewText={isViewText} {...attrs} {...onAttrs} /> 
-        }
-
-        /**
-         * 
-         * @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) => {
-            // const propertyData = columnData?.find(({ property }) => property)
-            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}：` : ''} />
-                            }
-                        }
-                        // onRowDblclick={(event) => {
-                        //     console.log('我双击了', columnCol?.property )
-                        //     // if (isViewText) return
-                        //     event.stopPropagation()
-                        //     // emit('rowDblclick', columnFormData, columnData, event)
-                        // }}
-                    >
-                        {columnViewDom(columnCol, columnFormData, columnIndex) || '-'}
-                    </ElDescriptionsItem>
-                ))}
-            </ElDescriptions>
-        }
-
-        watch(() => attrs.selection, (newValue) => {
-            console.log('表格勾选数据监听', newValue)
-            checkedList.value = newValue.map(({ $rowDataGuId }) => $rowDataGuId)
-        }, { deep: true });
-
-        // 勾选监听
-        watch(checkedList, (newValue , oldValue) => {
-            console.log(newValue , oldValue)
-            if (attrs.selection.length === newValue.length) {
-                if (attrs.selection.every(({ $rowDataGuId }) => newValue.includes($rowDataGuId ) )) return
-            }
-            const selectData = dataChildrenList.value.filter(({ $rowDataGuId }) => newValue?.includes($rowDataGuId))
-            const findData = checkedClickId.value ? dataChildrenList.value.find(({ $rowDataGuId }) => checkedClickId.value === $rowDataGuId) : undefined
-            // 新增选中
-            if (newValue.length > oldValue?.length && findData) {
-                emit('select', selectData, findData)
-            }
-            // 移除选中
-            if (newValue.length < oldValue?.length && findData) {
-                emit('select', selectData, findData)
-            }
-            emit('selectionChange', selectData)
-            checkedClickId.value = undefined
-        }, { 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 getAddBtn = (Fun) => addColumnBtn.value && <ElButton type="primary" plain icon={<CirclePlus />} onClick={() => Fun?.(attrs.listCode)}>Add</ElButton>
-
-        return {
-            getAddBtn,
-            renderDom: (AddBtn) => (
-                <Scrollbar onScrollToBottom={scrollLoad} set-max-height={data => {
-                    if (data?.windowHeight) {
-                        const height = data?.windowHeight - 160
-                        return height > 400 ? height : 400
-                    }
-                }}>
-                    {(<ElDrawer v-model={isChildrenDrawer.value} modal-class='yx-drawer yx-scrollbar-body' 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 = []}
-                        >
-                        
-                            <Scrollbar 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)
-    
-                                        const clickPropertyData = layoutData.value.content?.find(({ property }) => property) ?? layoutData.value.content[0]
-    
-                                        return (<CardView 
-                                            form={columnFormData}
-                                            no={ isIndex ? columnIndex + 1 : undefined}
-                                            isChecked={isChecked}
-                                            isSubTable={isSubTable}
-                                            isCheck={isCheck.value}
-                                            isMore={!columnFormData.$editing}
-                                            isShowDetailsMore={isShowDetailsMore.value}
-                                            onChecked={onChecked}
-                                            onShowSubTable={() => {
-                                                childrenBreadcrumbData.value =[...childrenBreadcrumbData.value, columnFormData];
-                                            }}
-                                            onRowClick={(event) => emit('rowClick', columnFormData, clickPropertyData, event)}
-                                            onRowDblclick={(event) => emit('rowDblclick', columnFormData, clickPropertyData, event)}
-                                            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>
-                            </Scrollbar>
-                        </ElDrawer>)}
-                        <div
-                            class="yx-flex-wrap"
-                            vertical
-                            style="overflow: auto; gap: 15px;"
-                        >
-                            {dataList.value.length === 0 && <ElEmpty>{AddBtn}</ElEmpty>}
-                            
-                            {dataList.value.map((columnFormData, columnIndex) => {
-    
-                                // 开启编辑后禁止选中
-                                const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
-    
-                                // 是否选中
-                                const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
-    
-                                // 是否有子表
-                                const isSubTable = !!(columnFormData?.children?.length ?? false)
-    
-                                const clickPropertyData = layoutData.value.content?.find(({ property }) => property) ?? layoutData.value.content[0]
-    
-                                return (<CardView 
-                                    form={columnFormData}
-                                    no={ isIndex ? columnIndex + 1 : undefined}
-                                    isChecked={isChecked}
-                                    isSubTable={isSubTable}
-                                    isCheck={isCheck.value}
-                                    isMore={!columnFormData.$editing}
-                                    isShowDetailsMore={isShowDetailsMore.value}
-                                    onChecked={onChecked}
-                                    onShowSubTable={() => {
-                                        childrenBreadcrumbData.value =[columnFormData];
-                                        isChildrenDrawer.value = true
-                                    }}
-                                    onRowClick={(event) => emit('rowClick', columnFormData, clickPropertyData, event)}
-                                    onRowDblclick={(event) => emit('rowDblclick', columnFormData, clickPropertyData, event)}
-                                    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 && AddBtn}
-    
-                            {
-                                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 && isLoadPaginationData.value) && 'END' }
-                                </ElDivider>)
-                            }
-                        </div>
-                </Scrollbar>
-            )
-        };
-    },
-    render() {
-        // 为了 能兼容 使用 mixins 参数
-        return this.renderDom(this.getAddBtn(this.createRow))
-    }
-});
+/** @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 '../../../../src/components/Card';
+import Scrollbar from '../../../../src/components/Scrollbar';
+import store from '../store';
+import { apisMixin } from '../apis'
+
+import { ArrowLeft, Bottom, CirclePlus, Loading, Tickets } from '@element-plus/icons-vue';
+// import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
+
+export default defineComponent({
+    name: 'MobileTableCard',
+    components: {
+        NormalColumnContent,
+        CardView,
+        Scrollbar
+    },
+    mixins: [apisMixin],
+    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, expose } = setupData
+
+        console.log('*mobile-table-card.JSX**********************************************=>', props, attrs, setupData, expose)
+
+        // 分页加载状态
+        const isPaginationLoading = ref(false)
+
+        const paginationList = ref([])
+        // 选中数据
+        const checkedList = ref([]);
+        // 当前勾选ID
+        const checkedClickId = ref(undefined);
+        // 当前选中数据
+        const isCheckedIndex = 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 addColumnBtn = computed(() => {
+            const gridParams = store.get(attrs.listCode)
+            const showOperationButton = gridParams?.options?.showOperationButton ?? false
+            const isFormSubTable = gridParams?.options?.isFormSubTable ?? false
+            const subTableCanAdd = gridParams?.options?.subTableCanAdd ?? false
+            const isOperation = componentDatas.value?.some(({ prop }) => ['operation'].includes(prop))
+            return showOperationButton && isFormSubTable && subTableCanAdd && isOperation
+        })
+
+        // 列表数据
+        const dataList = computed(() => {
+            if (props.isStackingPaginatedData) {
+                return paginationList.value.flatMap((data, index) => index + 1 <= props.currentPage ? data : [] )
+            } else {
+                return paginationList.value[0] ?? []
+            }
+        });
+
+        // 获取包含所有子表数据 LIST 一般用于勾选
+        const dataChildrenList = computed(() => {
+            const getChildrenData = (data) => {
+                return data?.flatMap(item => {
+                    if (item?.children?.length) return [item, ...getChildrenData(item.children)]
+                    return [item]
+                }) ?? []
+            }
+            return getChildrenData(dataList.value)
+        });
+
+        const isLoadPaginationData = computed(() => {
+            if (props.isStackingPaginatedData) {
+                return (paginationList.value[props.currentPage - 1]?.length ?? 0) > 0
+            } else {
+                return dataList.value.length < props.pageSize * props.currentPage && pagesNumber.value >= props.currentPage
+            }
+        })
+
+        // 面包屑数据
+        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) => {
+            debugger;
+            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])]
+            }
+            checkedClickId.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 <NormalColumnContent isContentViewText={isViewText} {...attrs} {...onAttrs} /> 
+        }
+
+        /**
+         * 
+         * @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) => {
+            // const propertyData = columnData?.find(({ property }) => property)
+            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}：` : ''} />
+                            }
+                        }
+                        // onRowDblclick={(event) => {
+                        //     console.log('我双击了', columnCol?.property )
+                        //     // if (isViewText) return
+                        //     event.stopPropagation()
+                        //     // emit('rowDblclick', columnFormData, columnData, event)
+                        // }}
+                    >
+                        {columnViewDom(columnCol, columnFormData, columnIndex) || '-'}
+                    </ElDescriptionsItem>
+                ))}
+            </ElDescriptions>
+        }
+
+        watch(() => attrs.selection, (newValue) => {
+            console.log('表格勾选数据监听', newValue)
+            checkedList.value = newValue.map(({ $rowDataGuId }) => $rowDataGuId)
+        }, { deep: true });
+
+        // 勾选监听
+        watch(checkedList, (newValue , oldValue) => {
+            console.log(newValue , oldValue)
+            if (attrs.selection.length === newValue.length) {
+                if (attrs.selection.every(({ $rowDataGuId }) => newValue.includes($rowDataGuId ) )) return
+            }
+            const selectData = dataChildrenList.value.filter(({ $rowDataGuId }) => newValue?.includes($rowDataGuId))
+            const findData = checkedClickId.value ? dataChildrenList.value.find(({ $rowDataGuId }) => checkedClickId.value === $rowDataGuId) : undefined
+            // 新增选中
+            if (newValue.length > oldValue?.length && findData) {
+                emit('select', selectData, findData)
+            }
+            // 移除选中
+            if (newValue.length < oldValue?.length && findData) {
+                emit('select', selectData, findData)
+            }
+            emit('selectionChange', selectData)
+            checkedClickId.value = undefined
+        }, { 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 getAddBtn = (Fun) => addColumnBtn.value && <ElButton type="primary" plain icon={<CirclePlus />} onClick={() => Fun?.(attrs.listCode)}>Add</ElButton>
+
+        return {
+            getAddBtn,
+            renderDom: (AddBtn) => (
+                <Scrollbar onScrollToBottom={scrollLoad} set-max-height={data => {
+                    if (data?.windowHeight) {
+                        const height = data?.windowHeight - 160
+                        return height > 400 ? height : 400
+                    }
+                }}>
+                    {(<ElDrawer v-model={isChildrenDrawer.value} modal-class='yx-drawer yx-scrollbar-body' 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 = []}
+                        >
+                        
+                            <Scrollbar 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)
+    
+                                        const clickPropertyData = layoutData.value.content?.find(({ property }) => property) ?? layoutData.value.content[0]
+    
+                                        return (<CardView 
+                                            form={columnFormData}
+                                            no={ isIndex ? columnIndex + 1 : undefined}
+                                            isChecked={isChecked}
+                                            isSubTable={isSubTable}
+                                            isCheck={isCheck.value}
+                                            isMore={!columnFormData.$editing}
+                                            isShowDetailsMore={isShowDetailsMore.value}
+                                            onChecked={onChecked}
+                                            onShowSubTable={() => {
+                                                childrenBreadcrumbData.value =[...childrenBreadcrumbData.value, columnFormData];
+                                            }}
+                                            onRowClick={(event) => emit('rowClick', columnFormData, clickPropertyData, event)}
+                                            onRowDblclick={(event) => emit('rowDblclick', columnFormData, clickPropertyData, event)}
+                                            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>
+                            </Scrollbar>
+                        </ElDrawer>)}
+                        <div
+                            class="yx-flex-wrap"
+                            vertical
+                            style="overflow: auto; gap: 15px;"
+                        >
+                            {dataList.value.length === 0 && <ElEmpty>{AddBtn}</ElEmpty>}
+                            
+                            {dataList.value.map((columnFormData, columnIndex) => {
+    
+                                // 开启编辑后禁止选中
+                                const onChecked = () => !columnFormData.$editing && setCheckedList(columnFormData.$rowDataGuId)
+    
+                                // 是否选中
+                                const isChecked = checkedList.value.includes(columnFormData.$rowDataGuId)
+    
+                                // 是否有子表
+                                const isSubTable = !!(columnFormData?.children?.length ?? false)
+    
+                                const clickPropertyData = layoutData.value.content?.find(({ property }) => property) ?? layoutData.value.content[0]
+    
+                                return (<CardView 
+                                    form={columnFormData}
+                                    no={ isIndex ? columnIndex + 1 : undefined}
+                                    isChecked={isChecked}
+                                    isSubTable={isSubTable}
+                                    isCheck={isCheck.value}
+                                    isMore={!columnFormData.$editing}
+                                    isShowDetailsMore={isShowDetailsMore.value}
+                                    onChecked={onChecked}
+                                    onShowSubTable={() => {
+                                        childrenBreadcrumbData.value =[columnFormData];
+                                        isChildrenDrawer.value = true
+                                    }}
+                                    onRowClick={(event) => emit('rowClick', columnFormData, clickPropertyData, event)}
+                                    onRowDblclick={(event) => emit('rowDblclick', columnFormData, clickPropertyData, event)}
+                                    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 && AddBtn}
+    
+                            {
+                                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 && isLoadPaginationData.value) && 'END' }
+                                </ElDivider>)
+                            }
+                        </div>
+                </Scrollbar>
+            )
+        };
+    },
+    render() {
+        // 为了 能兼容 使用 mixins 参数
+        return this.renderDom(this.getAddBtn(this.createRow))
+    }
+});