agilebuilder-ui 1.1.13-tmp4 → 1.1.13-tmp6

package/src/components/Card/index.jsx

@@ -1,146 +1,155 @@
-/** @jsxImportSource vue */
-import { defineComponent, ref, computed, watch, onMounted } from 'vue';
-import { ElCard, ElTag, ElButton, ElIcon, ElCheckbox } from 'element-plus';
-import { Bottom, Tickets } from '@element-plus/icons-vue';
-import Scrollbar from '../Scrollbar';
-// import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
-
-export default defineComponent({
-    name: 'CardView',
-    components: {
-        Scrollbar
-    },
-    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
-        },
-        setMaxHeight: {
-            type: [Function, undefined],
-            default: () => undefined
-        },
-        setHeight: {
-            type: [Function, undefined],
-            default: () => undefined
-        },
-    },
-    setup(props, { attrs, emit, slots }) {
-        console.log('*card-view.jsx**********************************************=>', props, attrs, slots)
-        const isMore = ref(props.isShowDetailsMore)
-
-        const scrollHeight = ref(undefined);
-
-        const scrollbarRef = ref(null);
-    
-        // 点击了卡片事件
-        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) ?? []
-        });
-
-        const setMaxHeight = data => {
-            if (props.setMaxHeight) return props.setMaxHeight(data)
-            if (data?.windowHeight) {
-                // const height = data?.windowHeight - 200
-                if (data.windowHeight * 0.4 <= scrollHeight.value) return 300
-                return scrollHeight.value && scrollHeight.value >= 300  ? scrollHeight : 300
-            }
-        }
-
-        watch(() => props.isShowDetailsMore, (newValue) => {
-            isMore.value = newValue
-        });
-
-        onMounted(() => {
-            const scrollElement = scrollbarRef.value?.$el?.querySelector?.('.el-scrollbar__view');
-            if (scrollElement) {
-                scrollHeight.value = scrollElement.clientHeight
-            }
-        })
-
-        // 点击事件
-        const onClick = (event) => {
-            onChecked()
-            emit('rowClick', event)
-        }
-
-        // 双击事件
-        const onDblclick = (event) => {
-            emit('rowDblclick', event)
-        }
-
-
-        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' onClick={onClick} onDblclick={onDblclick}>
-                        <div class="yx-flex-wrap" align='center' style={{gap: '10px' , flex: '1 1 auto',maxWidth: 'calc(100% - 80px)'}}>
-                            { props.no && <ElTag type="primary" size='small'>{props.no}</ElTag>}
-                            <div layout-title class='ellipsis'>{ getSlotHtml(slots.titleSlot) }</div>
-                        </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={onClick} onDblclick={onDblclick}>
-                <Scrollbar ref={scrollbarRef} scrollable-main max-height={!isMore.value ? '50vh' : '100%'} set-max-height={setMaxHeight} set-height={props.setHeight}>
-                    <div class='yx-card-body'>
-                        { getSlotHtml(slots.children) }
-                    </div>
-                </Scrollbar>
-                {
-                    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>
-        );
-    }
-});
+/** @jsxImportSource vue */
+import { defineComponent, ref, computed, watch, onMounted } from 'vue';
+import { ElCard, ElTag, ElButton, ElIcon, ElCheckbox } from 'element-plus';
+import { Bottom, Tickets } from '@element-plus/icons-vue';
+import Scrollbar from '../Scrollbar';
+// import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
+
+export default defineComponent({
+    name: 'CardView',
+    components: {
+        Scrollbar
+    },
+    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
+        },
+        // 是否收起
+        isMore: {
+            type: Boolean,
+            default: () => true
+        },
+        setMaxHeight: {
+            type: [Function, undefined],
+            default: () => undefined
+        },
+        setHeight: {
+            type: [Function, undefined],
+            default: () => undefined
+        },
+    },
+    setup(props, { attrs, emit, slots }) {
+        console.log('*card-view.jsx**********************************************=>', props, attrs, slots)
+        const isMore = ref(props.isShowDetailsMore)
+
+        const scrollHeight = ref(undefined);
+
+        const scrollbarRef = ref(null);
+    
+        // 点击了卡片事件
+        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) ?? []
+        });
+
+        const setMaxHeight = data => {
+            if (props.setMaxHeight) return props.setMaxHeight(data)
+            if (data?.windowHeight) {
+                // const height = data?.windowHeight - 200
+                if (data.windowHeight * 0.4 <= scrollHeight.value) return 300
+                return scrollHeight.value && scrollHeight.value >= 300  ? scrollHeight : 300
+            }
+        }
+
+        watch(() => props.isShowDetailsMore, (newValue) => {
+            isMore.value = newValue
+        });
+
+        watch(() => props.isMore, (newValue) => {
+            isMore.value = newValue
+        });
+
+        onMounted(() => {
+            const scrollElement = scrollbarRef.value?.$el?.querySelector?.('.el-scrollbar__view');
+            if (scrollElement) {
+                scrollHeight.value = scrollElement.clientHeight
+            }
+        })
+
+        // 点击事件
+        const onClick = (event) => {
+            onChecked()
+            emit('rowClick', event)
+        }
+
+        // 双击事件
+        const onDblclick = (event) => {
+            emit('rowDblclick', event)
+        }
+
+
+        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' onClick={onClick} onDblclick={onDblclick}>
+                        <div class="yx-flex-wrap" align='center' style={{gap: '10px' , flex: '1 1 auto',maxWidth: 'calc(100% - 80px)'}}>
+                            { props.no && <ElTag type="primary" size='small'>{props.no}</ElTag>}
+                            <div layout-title class='ellipsis'>{ getSlotHtml(slots.titleSlot) }</div>
+                        </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={onClick} onDblclick={onDblclick}>
+                <Scrollbar ref={scrollbarRef} scrollable-main max-height={!isMore.value ? '50vh' : '100%'} set-max-height={setMaxHeight} set-height={props.setHeight}>
+                    <div class='yx-card-body'>
+                        { getSlotHtml(slots.children) }
+                    </div>
+                </Scrollbar>
+                {
+                    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>
+        );
+    }
+});