agilebuilder-ui 1.1.13 → 1.1.14

package/src/components/Card/index.jsx

@@ -0,0 +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
+        },
+        // 是否收起
+        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>
+        );
+    }
+});

package/src/components/Scrollbar/index.vue

@@ -0,0 +1,197 @@
+<template>
+    <el-scrollbar v-bind="mergedAttrs" ref="scrollbarRef">
+        <slot />
+    </el-scrollbar>
+</template>
+
+<script setup>
+import { ElScrollbar } from 'element-plus';
+// import { useStore } from 'vuex';
+import store from '../../store';
+import { toRefs, reactive, mergeProps, ref, onMounted, watch, useAttrs, computed, defineEmits, useSlots } from 'vue';
+
+const slots = useSlots();
+
+// const store = useStore();
+
+store?.dispatch?.('startListeningToResize');
+
+const scrollbarRef = ref(null);
+
+const scrollToEmitValue = ref(undefined)
+
+const emits = defineEmits(['scrollToTop', 'scrollToBottom']);
+
+const resizeProps = computed(() => ({
+    // 宽度
+    windowWidth: store.getters.windowWidth,
+    // 高度
+    windowHeight: store.getters.windowHeight,
+    // 是否移动端
+    isMobileResize: store.getters.isMobileResize,
+}));
+
+// 定义初始化参数
+const defaultAttrs = reactive({
+    always: false, // 滚动条是否总是显示
+    // wrapStyle: 'height: 100%', // 滚动区域的样式
+});
+
+const props = defineProps({
+    // 是否开启滚动距离阴影
+    showScrollShadow: {
+        type: Boolean,
+        default: true
+    },
+    triggerDistance: {
+        type: Number,
+        default: 0
+    },
+    // 动态计算 max-height
+    setMaxHeight: {
+        type: [Function, undefined],
+        default: () => undefined
+    },
+    // 动态计算 height
+    setHeight: {
+        type: [Function, undefined],
+        default: () => undefined
+    }
+});
+
+const { attrs } = useAttrs();
+
+// 统一写入
+const setHeightFun = (fun) => {
+    try {
+        return fun?.(resizeProps.value)
+    } catch (error) {
+        console.error(error)
+    }
+    return
+}
+
+// 合并初始化参数和传入的属性
+const mergedAttrs = computed(() => {
+    const attrsData = mergeProps(defaultAttrs, attrs)
+    return {
+        ...({
+            // 绑定 setMaxHeight 事件 返回 最大高度
+            ...(props.setMaxHeight ? { maxHeight: setHeightFun(props.setMaxHeight) } : {}),
+            // 绑定 setHeight 事件 返回 高度
+            ...(props.setHeight ? { height: setHeightFun(props.setHeight) } : {}),
+        }),
+        ...attrsData
+    }
+});
+
+// 滚动距离回调事件
+const scrollToEmits = (scrollElement) => {
+    if (!scrollElement) return
+    const isAtTop = scrollElement.scrollTop <= props.triggerDistance;
+    const isAtBottom = scrollElement.scrollTop + scrollElement.clientHeight >= (scrollElement.scrollHeight - props.triggerDistance);
+    if (isAtBottom) {
+        // scrollToEmitValue 校验确保只执行一次
+        // 底部事件 
+        !['at-bottom'].includes(scrollToEmitValue.value) && emits('scrollToBottom');
+        scrollToEmitValue.value = 'at-bottom'
+    } else if (isAtTop) {
+        // 顶部事件
+        !['at-top'].includes(scrollToEmitValue.value) && emits('scrollToTop');
+        scrollToEmitValue.value = 'at-top'
+    } else {
+        scrollToEmitValue.value = undefined
+    }
+}
+
+// 滚动阴影事件
+const handleScroll = () => {
+    const scrollElement = scrollbarRef.value?.$el.querySelector('.el-scrollbar__wrap');
+    if (scrollElement) {
+        const isAtTop = scrollElement.scrollTop === 0;
+        const isAtBottom = scrollElement.scrollTop + scrollElement.clientHeight === scrollElement.scrollHeight;
+        if (props.showScrollShadow) {
+            if (!isAtTop) {
+                scrollbarRef.value.$el.classList.add('scroll-top-shadow');
+            } else {
+                scrollbarRef.value.$el.classList.remove('scroll-top-shadow');
+            }
+            if (!isAtBottom) {
+                scrollbarRef.value.$el.classList.add('scroll-bottom-shadow');
+            } else {
+                scrollbarRef.value.$el.classList.remove('scroll-bottom-shadow');
+            }
+        } else {
+            scrollbarRef.value.$el.classList.remove('scroll-top-shadow', 'scroll-bottom-shadow');
+        }
+        scrollToEmits(scrollElement);
+    }
+};
+
+onMounted(() => {
+    const scrollElement = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
+    if (scrollElement) {
+        scrollElement.addEventListener('scroll', handleScroll);
+        handleScroll();
+        scrollToEmits(scrollElement);
+    }
+});
+
+watch(() => props.showScrollShadow, () => {
+    handleScroll();
+});
+
+watch(() => mergedAttrs?.maxHeight, () => {
+    setTimeout(handleScroll, 500);
+});
+
+watch(() => mergedAttrs?.height, () => {
+    setTimeout(handleScroll, 500);
+});
+watch(
+  () => slots.default?.(),
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+        setTimeout(handleScroll, 500);
+    }
+  },
+  { deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.el-scrollbar ::v-deep {
+    position: relative;
+
+    &.scroll-top-shadow {
+        &::before {
+            content: ' ';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.2);
+            z-index: 2;
+        }
+    }
+
+    &.scroll-bottom-shadow {
+        &::after {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.2);
+            z-index: 2;
+        }
+    }
+
+    &>.el-scrollbar__wrap {
+        position: relative;
+        z-index: 1;
+    }
+}
+</style>

package/src/mixins/resizeMixin.js

@@ -0,0 +1,49 @@
+export default {
+    data() {
+        const element = document.querySelector('.amb-design-board');
+        let designObserver
+        if (element) {
+            this.designObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    console.log(entry);
+                    this.handleDesignResize(entry?.['target'])
+                }
+            });
+            designObserver.observe(element);
+        }
+        return {
+            windowWidth: designObserver ? element.clientWidth : window.innerWidth,
+            windowHeight: designObserver ? element.clientHeight : window.innerHeight,
+            designObserver
+        };
+    },
+    computed: {
+        isMobileResize() {
+            return (this.windowWidth ?? 0) <= 768
+        }
+    },
+    mounted() {
+        if (!this.designObserver) {
+            window.addEventListener('resize', this.handleWindowResize);
+        }
+    },
+    beforeDestroy() {
+        if (this.designObserver) {
+            this.designObserver.disconnect();
+        } else {
+            window.removeEventListener('resize', this.handleWindowResize);
+        }
+    },
+    methods: {
+        handleWindowResize() {
+            this.windowWidth = window.innerWidth;
+            this.windowHeight = window.innerHeight;
+        },
+        handleDesignResize(element) {
+            if (element) {
+                this.windowWidth = element.clientWidth;
+                this.windowHeight = element.clientHeight;
+            }
+        }
+    }
+};

package/src/store/getters.js

@@ -1,6 +1,9 @@
 const getters = {
   sidebar: (state) => state.app.sidebar,
   device: (state) => state.app.device,
+  windowWidth: (state) => state.app.windowWidth,
+  windowHeight: (state) => state.app.windowHeight,
+  isMobileResize: (state) => state.app.isMobileResize,
   token: (state) => state.user.token,
   name: (state) => state.user.name,
   // routers: state => state.permission.routers,

package/src/store/modules/app.js

@@ -1,3 +1,5 @@
+import System from "@zxing/library/esm/core/util/System"
+
 const app = {
   state: {
     sidebar: {
@@ -7,8 +9,18 @@ const app = {
     device: 'desktop',
     preventReclick: false,
     whiteList: [],
+    systemWidth: [],
+    windowWidth: null, // 网页宽度
+    windowHeight: null, // 网页高度
+    isMobileResize: false, // 是否移动端
   },
   mutations: {
+    // 写入网页 高度 宽度 是否移动端
+    updateWindowSize(state, { width, height }) {
+      state.windowWidth = width;
+      state.windowHeight = height;
+      state.isMobileResize = !!width && width <= 768
+    },
     toggleSidebar: (state) => {
       if (state.sidebar.opened) {
         window.sessionStorage.setItem('sidebarStatus', 1)
@@ -36,6 +48,35 @@ const app = {
     },
   },
   actions: {
+    startListeningToResize({ state, commit }) {
+      const handleResize = (data) => {
+        commit('updateWindowSize', {
+            width: data?.width ?? window.innerWidth,
+            height: data?.height ?? window.innerHeight,
+        });
+      };
+      if (!state.windowWidth && !state.windowHeight) {
+        const element = document.querySelector('.amb-design-board');
+        if (element) {
+          handleResize({
+            width: element.clientWidth,
+            height: element.clientHeight,
+          });
+          const designObserver = new ResizeObserver(entries => {
+              for (const entry of entries) {
+                  handleResize({
+                    width: entry?.['target']?.clientWidth,
+                    height: entry?.['target']?.clientHeight,
+                  });
+              }
+          });
+          designObserver.observe(element);
+        } else {
+          window.addEventListener('resize', handleResize);
+          handleResize();
+        }
+      }
+    },
     toggleSidebar: ({ commit }) => {
       commit('toggleSidebar')
     },