centaline-data-driven-v3 0.1.40 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven-v3",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "private": false,
   "description": "centaline-data-driven-v3",
   "main": "dist/centaline-data-driven-v3.umd.js",

package/src/components/web/Form.vue

@@ -3,8 +3,9 @@
         :style="{ width: pageWidth ? pageWidth + 'px' : '100%', margin: 'auto', 'min-height': minHeight }">
         <div style="display: flex; width: 100%;">
             <div style="flex: 1; min-width: 0;">
-                <div v-if="model !== null && !loading" class="ct-form">
-                    <el-affix target=".ct-form" v-if="model.tip" :offset="62">
+                <div v-if="model !== null && !loading" class="ct-form"
+                    :style="{ margin: openType != 'tree' ? '10px' : '0px' }">
+                    <el-affix target=".ct-form" v-if="model.tip" :offset="tipTopHight">
                         <div class="ct-form-tip" ref="refTip">
                             <span v-html="model.tip"></span>
                         </div>
@@ -57,7 +58,8 @@
                         <template v-if="model.isHorizontalLayout">
                             <component :is="model.flagFixedTabOnHorizontalLayout ? 'el-affix' : 'div'"
                                 v-bind="model.flagFixedTabOnHorizontalLayout ? { offset: tabTopHight, target: '.ct-form' } : {}">
-                                <el-tabs v-model="activeName" @tab-click="tabClick" style="background: #fff;">
+                                <el-tabs v-model="activeName" @tab-click="tabClick" style="background: #fff;"
+                                    ref="refTabs">
                                     <template v-for="(item, index) in model.collapse" :key="index">
                                         <el-tab-pane :name="index.toString()" :lazy="item.lazyLoad"
                                             v-if="item.show !== false" :key="index">
@@ -110,10 +112,11 @@
                                                 v-if="col.show !== false && col.lineFeed"></div>
                                             <el-col :span="col.colspan" v-if="col.show !== false" style="padding:5px"
                                                 :class="[col.is == 'ct-button' && col.labelPlacement == '1' ? 'el-col1' : '']">
-                                                <component ref="Fields" :is="col.is" :vmodel="col" :key="col.fieldItemKey"
-                                                    :listHeight="listHeight" :parameterAction="model.parameterAction"
-                                                    v-bind="col.bindPara" :fileData="getFileData(col)"
-                                                    @change="changeHandler" @fieldClick="fieldClickHandler"
+                                                <component ref="Fields" :is="col.is" :vmodel="col"
+                                                    :key="col.fieldItemKey" :listHeight="listHeight"
+                                                    :parameterAction="model.parameterAction" v-bind="col.bindPara"
+                                                    :fileData="getFileData(col)" @change="changeHandler"
+                                                    @fieldClick="fieldClickHandler"
                                                     @popupLocation="popupLocationHandler"
                                                     @popupSearchList="popupSearchListHandler"
                                                     @importComplete="importComplete"
@@ -272,7 +275,6 @@ const props = defineProps({
     dialoWidth: Number,
     listHeight: Number,
 })
-
 const itemKey = ref(1)
 const router = useRouter()
 const loading = ref(true)
@@ -288,7 +290,10 @@ const showAI = ref(false);
 const dialogHeight = ref(props.dialogHeight || (window.innerHeight - 60));
 const tabActiveNameKey = ref('')
 const refTip = ref()
-const tabTopHight = ref(52)
+const tipTopHight = ref(0)
+const tabTopHight = ref(0)
+const refTabs = ref()
+const translateX = ref(0)
 
 const qrtimer1 = ref(null)
 const qrtimer2 = ref(null)
@@ -320,8 +325,27 @@ onUpdated(() => {
 onDeactivated(() => {
     downloadUrl.value = ''
 })
+
 onMounted(() => {
     setCss();
+    if (refForm.value) {
+        const rect = refForm.value.getBoundingClientRect()
+        const distanceFromTop = rect.top + window.scrollY
+        tipTopHight.value = distanceFromTop;
+        if (refTip.value) {
+            tabTopHight.value = tabTopHight.value + refTip.value.clientHeight + 10
+        }
+        else {
+            tabTopHight.value = tipTopHight.value;
+        }
+    }
+    nextTick(() => {
+
+        setTimeout(() => {
+            attachScrollButtonListeners()
+        }, 1000);
+
+    });
 })
 init()
 //初始化数据
@@ -379,11 +403,6 @@ function load(data) {
 
         }
     }
-    nextTick(() => {
-        if (refTip.value) {
-            tabTopHight.value = tabTopHight.value + refTip.value.clientHeight + 10
-        }
-    })
     //通知父组件加载完成
     emit('loaded', model.value);
 }
@@ -703,11 +722,29 @@ function setCss() {
     if (props.topHeight > -1) {
         minHeight.value = (document.documentElement.clientHeight - props.topHeight - 20) + 'px';
     }
-    else if(props.dialogHeight){
+    else if (props.dialogHeight) {
         minHeight.value = (props.dialogHeight) + 'px';
     }
-    else{
-        minHeight.value = document.documentElement.clientHeight + 'px';
+    else if (props.openType == 'tree') {
+        if (refForm.value) {
+            let parentDom = refForm.value.parentElement;
+            minHeight.value = parentDom.clientHeight + 'px';
+            refForm.value.style.height = minHeight.value
+            refForm.value.style.overflowY = 'auto'
+            refForm.value.style.paddingBottom = '45px'
+        }
+    }
+    else if (props.openType == 'detail') {
+        if (refForm.value) {
+            let parentDom = refForm.value.parentElement;
+            minHeight.value = parentDom.clientHeight + 'px';
+        }
+    }
+    else {
+        if (refForm.value) {
+            let parentDom = refForm.value.parentElement;
+            minHeight.value = parentDom.clientHeight + 'px';
+        }
     }
 }
 
@@ -726,16 +763,235 @@ function buttonsWidth() {
         rtn = props.dialoWidth - model.value.aiAttr.width - 4 + 'px';
     }
     else if (props.pageWidth) {
-        rtn = props.pageWidth - 20 + 'px';
+        rtn = props.pageWidth + 'px';
 
     }
+
     return rtn;
 }
 
-function tabClick(event) {
+
+// 点击后让激活 Tab 居中
+async function tabClick(pane: TabsPaneContext) {
     if (props.openType == 'detail') {
         window.localStorage.setItem(tabActiveNameKey.value, model.value.collapse[event.index].fieldName1);//存储
     }
+    await nextTick()          // 等 DOM 更新完再取节点
+    const navWrapScroll = document.querySelector('.el-tabs__nav-scroll') as HTMLElement
+    const navWrap = document.querySelector('.el-tabs__nav') as HTMLElement
+    const activeBtn = document.querySelector(`.el-tabs__item#tab-${pane.paneName}`) as HTMLElement
+    if (!navWrapScroll || !navWrap || !activeBtn) return
+    const visibleCount = getVisibleTabCount()
+    if (pane.index <= visibleCount / 2) {
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = 'translateX(0px)'
+        }, 50);
+        translateX.value = 0
+        return
+    }
+    const allTabs = Array.from(navWrap.querySelectorAll('.el-tabs__item')) as HTMLElement[]
+    const total = allTabs.length
+    if (pane.index >= total - 5) {
+        const lastTab = allTabs[total - 1]
+        const wrapWidth = navWrapScroll.clientWidth
+        const lastWidth = lastTab.offsetWidth
+        const lastRight = lastTab.offsetLeft + lastWidth   // 最后一个右边到 nav 左边的距离
+        const needShift = wrapWidth - lastRight            // 负值，让右边对齐容器右边
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = `translateX(${needShift}px)`
+        }, 50);
+        translateX.value = needShift
+        return
+    }
+    /* ---------- 1. 初始状态：还没滑过 ---------- */
+    const neverSlid = navWrap.style.transform == 'translateX(0px)'
+
+    if (neverSlid && pane.index >= visibleCount / 2) {
+        /* 第一次往后走，直接允许滑动 → 走居中逻辑 */
+        const wrapWidth = navWrapScroll.clientWidth
+        const btnLeft = activeBtn.offsetLeft
+        const btnWidth = activeBtn.offsetWidth
+        const dx = (wrapWidth - btnWidth) / 2 - btnLeft
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = `translateX(${dx}px)`
+        }, 50);
+        translateX.value = dx
+        return
+    }
+
+    /* ---------- 2. 已经滑过 → 恢复两端贴边即锁死 ---------- */
+    const firstTab = navWrap.querySelector('.el-tabs__item') as HTMLElement
+    const lastTab = navWrap.querySelector('.el-tabs__item:last-child') as HTMLElement
+    if (!firstTab || !lastTab) return
+
+    const lastAtRight = lastTab.getBoundingClientRect().right <= navWrapScroll.getBoundingClientRect().right
+
+    if ((lastAtRight && pane.index >= total - 5)) {
+        return
+    }   // 已贴边，不滑
+
+    /* 需要居中 */
+    const wrapWidth = navWrapScroll.clientWidth
+    const btnLeft = activeBtn.offsetLeft
+    const btnWidth = activeBtn.offsetWidth
+    const dx = (wrapWidth - btnWidth) / 2 - btnLeft
+    translateX.value = dx
+    setTimeout(() => {
+        navWrap.style.transition = 'transform .3s ease-out'
+        navWrap.style.transform = `translateX(${dx}px)`
+    }, 50);
+}
+/** 返回当前屏幕完全可见的 tab 个数 */
+function getVisibleTabCount(): number {
+    const navWrapScroll = document.querySelector('.el-tabs__nav-scroll') as HTMLElement
+    const navWrap = document.querySelector('.el-tabs__nav') as HTMLElement
+    if (!navWrapScroll || !navWrap) return 0
+
+    const wrapWidth = navWrapScroll.clientWidth                    // 容器可视宽
+    const allTabs = Array.from(navWrap.querySelectorAll('.el-tabs__item')) as HTMLElement[]
+    if (!allTabs.length) return 0
+
+    // ① 如果所有 tab 总宽度 ≤ 容器宽，全部可见
+    const totalWidth = allTabs.reduce((sum, tab) => sum + tab.offsetWidth, 0)
+    if (totalWidth <= wrapWidth) return allTabs.length
+
+    // ② 否则按“平均宽度”向下取整
+    const avgWidth = totalWidth / allTabs.length
+    return Math.floor(wrapWidth / avgWidth)
+}
+function attachScrollButtonListeners() {
+    if (refTabs.value) {
+        const tabsEl = refTabs.value.$el
+
+        // 监听原生左右箭头点击事件（事件委托）
+        const arrowLeft = tabsEl.querySelector('.el-tabs__nav-prev')
+        const arrowRight = tabsEl.querySelector('.el-tabs__nav-next')
+
+        if (arrowLeft) {
+            // 1. 移除所有已有事件监听（保险）
+            const newArrowLeft = arrowLeft.cloneNode(true)
+            arrowLeft.parentNode.replaceChild(newArrowLeft, arrowLeft)
+            // 2. 添加自定义事件，彻底阻断原生行为
+            newArrowLeft.addEventListener('click', handleArrowLeft, { capture: true })
+            newArrowLeft.addEventListener('mousedown', (e) => e.preventDefault(), { capture: true })
+            arrowLeft.addEventListener('click', handleArrowLeft)
+        }
+        if (arrowRight) {
+            // 1. 移除所有已有事件监听（保险）
+            const newArrowRight = arrowRight.cloneNode(true)
+            arrowRight.parentNode.replaceChild(newArrowRight, arrowRight)
+            // 2. 添加自定义事件，彻底阻断原生行为
+            newArrowRight.addEventListener('click', handleArrowRight, { capture: true })
+            newArrowRight.addEventListener('mousedown', (e) => e.preventDefault(), { capture: true })
+        }
+    }
+}
+function handleArrowLeft(e) {
+    // 彻底阻断原生事件传播和默认行为
+    e.stopImmediatePropagation()
+    e.stopPropagation()
+    e.preventDefault()
+    scrollTabs('left')
+}
+function handleArrowRight(e) {
+    // 彻底阻断原生事件传播和默认行为
+    e.stopImmediatePropagation()
+    e.stopPropagation()
+    e.preventDefault()
+    scrollTabs('right')
+}
+function scrollTabs(direction) {
+    const navWrapScroll = document.querySelector('.el-tabs__nav-scroll') as HTMLElement
+    const navWrap = document.querySelector('.el-tabs__nav') as HTMLElement
+    if (!navWrapScroll || !navWrap) return
+    const allTabs = Array.from(navWrap.querySelectorAll('.el-tabs__item')) as HTMLElement[]
+    if (!allTabs.length) return
+    // 找到当前第一个可见的标签索引
+    const firstVisibleIndex = getFirstVisibleTabIndex(allTabs)
+    if (direction == 'left') {
+        if (translateX.value >= 0) {
+            translateX.value = 0
+            setTimeout(() => {
+                navWrap.style.transition = 'transform .3s ease-out'
+                navWrap.style.transform = `translateX(${translateX.value}px)`
+            }, 50);
+            return
+        }
+
+        // 找到当前第一个可见的标签索引
+        const firstVisibleIndex = getFirstVisibleTabIndex(allTabs)
+        // 计算上一个标签的宽度
+        const prevTabWidth = getFirstVisibleTabIndex(allTabs) > 0 ? getTabWidth(allTabs, firstVisibleIndex - 1) : 0
+        if (prevTabWidth == 0) {
+            translateX.value = 0
+        }
+        else {
+            // 更新偏移量（向右平移）
+            translateX.value += prevTabWidth
+        }
+
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = `translateX(${translateX.value}px)`
+        }, 50);
+    }
+    else if (direction == 'right') {
+
+        // 判断最后一个标签是否已靠右，若是则禁止滚动
+        if (isLastTabAlignedRight(navWrapScroll, navWrap)) {
+            return
+        }
+
+        // 计算下一个标签的宽度
+        const nextTabWidth = getTabWidth(allTabs, firstVisibleIndex)
+        // 更新偏移量（向左平移）
+        translateX.value -= nextTabWidth
+        setTimeout(() => {
+            navWrap.style.transition = 'transform .3s ease-out'
+            navWrap.style.transform = `translateX(${translateX.value}px)`
+        }, 50);
+    }
+}
+// 获取当前第一个可见的标签索引
+const getFirstVisibleTabIndex = (allTabs) => {
+    const scrollLeft = Math.abs(translateX.value)
+    let sumWidth = 0
+    for (let i = 0; i < allTabs.length; i++) {
+        sumWidth += getTabWidth(allTabs, i)
+        if (sumWidth > scrollLeft) {
+            return i
+        }
+    }
+    return 0
+}
+// 计算单个标签宽度（包含间距）
+const getTabWidth = (allTabs, index) => {
+    if (!allTabs[index]) return 0
+    const tab = allTabs[index]
+    // 获取标签的实际宽度（包含内边距、边框）
+    const width = tab.offsetWidth
+    // 获取标签的左右外边距（ElementPlus 默认有间距）
+    const style = window.getComputedStyle(tab)
+    const marginLeft = parseFloat(style.marginLeft) || 0
+    const marginRight = parseFloat(style.marginRight) || 0
+    return width + marginLeft + marginRight
+}
+// 检查最后一个标签是否已靠最右侧
+const isLastTabAlignedRight = (navWrapScroll, navWrap) => {
+
+    // 滚动容器的可视宽度
+    const containerWidth = navWrapScroll.clientWidth
+    // 所有标签的总宽度
+    const totalTabsWidth = navWrap.scrollWidth
+    // 当前向左偏移的总距离（绝对值）
+    const currentOffset = Math.abs(translateX.value)
+
+    // 最后一个标签靠右的判定条件：偏移量 + 容器宽度 ≥ 总标签宽度
+    // 预留2px误差，避免因像素精度问题导致判断失误
+    return (currentOffset + containerWidth) >= (totalTabsWidth - 2)
 }
 
 </script>