lw-cdp-ui 1.3.13 → 1.3.15

package/dist/components/lwFormMini/ViewItem.vue

@@ -2,8 +2,8 @@
   <!-- 间隔标题 -->
   <div v-if="item.component == 'divider'"
        class="title-name title-name-divider"
-       :id="'divider-' + index"
-       :data-index="index">
+       :id="'divider-' + item.label"
+       :data-index="item.label">
     <span>
       {{ item.label }}
       <el-tooltip v-if="item.tips">
@@ -289,7 +289,7 @@ export default {
       if (!options?.multiple) {
         val = [val]
       }
-      let items = options.items.filter(item => { return val.includes(item.value)  })
+      let items = options.items.filter(item => { return val.includes(item.value) })
       return items?.map(item => item.label).join('、') || val || '--'
     },
     dayjs: dayjs

package/dist/components/lwFormMini/index.vue

@@ -313,13 +313,23 @@ export default {
       this.$emit("submit", this.form)
     },
     clickAffix(index) {
-      this.affixIndex = index
-      const targetElement = document.getElementById('divider-' + index)
-      if (targetElement) {
-        targetElement.scrollIntoView({
-          behavior: 'smooth', // 实现平滑滚动
-          block: 'start' // 保证滚动时目标元素的顶部对齐窗口顶部
-        })
+      this.affixIndex = index;
+      const targetElement = document.getElementById('divider-' + index);
+      const scrollContainer = document.querySelector('.el-container > .el-main');
+
+      if (targetElement && scrollContainer) {
+        const offset = 85; // 目标元素与顶部的偏移量
+        const targetRect = targetElement.getBoundingClientRect();
+        const containerRect = scrollContainer.getBoundingClientRect();
+
+        // 计算目标元素相对于滚动容器内部的真实偏移量
+        const elementPosition = targetRect.top - containerRect.top + scrollContainer.scrollTop;
+
+        // 让 el-main 滚动到目标元素，保证它距离顶部 30px
+        scrollContainer.scrollTo({
+          top: elementPosition - offset,
+          behavior: 'smooth'
+        });
       }
 
       this.scrollObserverEnabled = false;
@@ -329,28 +339,38 @@ export default {
     },
     // 监听滚动
     handleScroll() {
-      // 获取所有 title-name-divider 元素
       const titleNameDividers = document.querySelectorAll('.title-name-divider');
       const elMain = document.querySelector('.el-main');
-      let _this = this
-      // 创建观察者实例
-      const observer = new IntersectionObserver((entries) => {
-        let entry = entries[0]
-        const rect = entry.target.getBoundingClientRect();
-        const distanceFromTop = rect.top;
-        if (distanceFromTop >= 0 && distanceFromTop <= 100 && _this.scrollObserverEnabled) {
-          const dataIndex = entry.target.getAttribute('data-index');
-          _this.affixIndex = dataIndex;  // 更新 affixIndex
+
+      if (!elMain || titleNameDividers.length === 0) return;
+
+      let _this = this;
+
+      // 创建 IntersectionObserver 观察滚动元素
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && _this.scrollObserverEnabled) {
+              const dataIndex = entry.target.getAttribute('data-index');
+              _this.affixIndex = dataIndex; // 更新 affixIndex
+            }
+          });
+        },
+        {
+          root: elMain, // 设置 el-main 为滚动容器
+          rootMargin: '30px 0px -70% 0px', // 确保元素在滚动到 30px 位置时触发
+          threshold: 0.1 // 交叉比例，确保元素部分可见时触发
         }
-      }, {
-        root: elMain, // 设置根元素为 el-main
-        rootMargin: '0px 0px 70% 0px'  // 可根据需要调整
-      });
+      );
 
-      // 开始观察每个 title-name-divider 元素
-      titleNameDividers.forEach(divider => {
-        observer.observe(divider);
-      });
+      // 观察每个 title-name-divider 元素
+      titleNameDividers.forEach((divider) => observer.observe(divider));
+
+      // 解绑旧的观察者（防止重复监听）
+      if (this.scrollObserver) {
+        this.scrollObserver.disconnect();
+      }
+      this.scrollObserver = observer;
     }
   }
 }

package/dist/components/lwSearch/date/date.vue

@@ -1,19 +1,17 @@
 <template>
-  <div>
-    <el-date-picker :type="item.type || 'date'"
-                    :disabled="item.disabled"
-                    :format="item.format || 'YYYY-MM-DD'"
-                    :value-format="item.valueFormat"
-                    :placeholder="item.placeholder || $t('lwSearch.please_select')"
-                    :range-separator="item.rangeSeparator || $t('lwSearch.monthRange.rangeSeparator')"
-                    :start-placeholder="item.startPlaceholder || $t('lwSearch.monthRange.startPlaceholder')"
-                    :end-placeholder="item.endPlaceholder || $t('lwSearch.monthRange.endPlaceholder')"
-                    clearable
-                    v-model="value"
-                    :disabled-date="disabledDate"
-                    style="width: 100%">
-    </el-date-picker>
-  </div>
+  <el-date-picker :type="item.type || 'date'"
+                  :disabled="item.disabled"
+                  :format="item.format || 'YYYY-MM-DD'"
+                  :value-format="item.valueFormat"
+                  :placeholder="item.placeholder || $t('lwSearch.please_select')"
+                  :range-separator="item.rangeSeparator || $t('lwSearch.monthRange.rangeSeparator')"
+                  :start-placeholder="item.startPlaceholder || $t('lwSearch.monthRange.startPlaceholder')"
+                  :end-placeholder="item.endPlaceholder || $t('lwSearch.monthRange.endPlaceholder')"
+                  clearable
+                  v-model="value"
+                  :disabled-date="disabledDate"
+                  style="width: 100%">
+  </el-date-picker>
 </template>
 
 <script>

package/dist/components/lwSearch/dateRange/dateRange.vue

@@ -1,18 +1,16 @@
 <template>
-  <div>
-    <el-date-picker :showTime="item.showTime"
-                    :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
-                    :value-format="item.valueFormat"
-                    clearable
-                    v-model="value"
-                    style="width: 100%"
-                    type="datetimerange"
-                    :start-placeholder="item.startPlaceholder || $t('lwSearch.dateRange.startPlaceholder')"
-                    :end-placeholder="item.endPlaceholder || $t('lwSearch.dateRange.endPlaceholder')"
-                    :default-time="item.defaultTime || defaultTime(0)"
-                    size="">
-    </el-date-picker>
-  </div>
+  <el-date-picker :showTime="item.showTime"
+                  :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
+                  :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+                  clearable
+                  v-model="value"
+                  style="width: 100%"
+                  type="datetimerange"
+                  :start-placeholder="item.startPlaceholder || $t('lwSearch.dateRange.startPlaceholder')"
+                  :end-placeholder="item.endPlaceholder || $t('lwSearch.dateRange.endPlaceholder')"
+                  :default-time="item.defaultTime || defaultTime(0)"
+                  size="">
+  </el-date-picker>
 </template>
 
 <script>

package/dist/components/lwSearch/index.vue

@@ -6,14 +6,12 @@
                @submit.prevent
                :label-align="labelAlign"
                style="width: 100%">
-        <el-row :class="(options.length - expandNumber === 0) ? 'expand-row' : (options.length - expandNumber < columnNumber) ? '' : isExpandStatus ? ((options.length % columnNumber === 0) ? 'expand-row' : '') : (options.length >= expandNumber ? 'expand-row' : '')"
-                type="flex"
-                justify="start"
+        <el-row :class="[isExpandRow ? 'expand-row' : '']"
                 :gutter="10">
           <template v-for="(item, index) in options"
                     :key="item.prop">
-            <el-col :class="(!isExpandStatus && item.isExpand) ? '' : (options.length - expandNumber < columnNumber) ? '' : (!isExpandStatus && index > (expandNumber - 1) ? 'hide' : '')"
-                    :span="columnNumber ? 24/columnNumber : (item.span || 8)">
+            <el-col :class="[isDefaultShow(index) ? '' : isExpandStatus ? '' : 'hide']"
+                    :span="item?.span ? item.span : 6">
               <el-form-item :label-width="hideLabel ? 0 : labelWidth"
                             :required="item.required"
                             :label="hideLabel ? '' : $t(item.label)">
@@ -65,7 +63,7 @@
             {{$t('btn.query')}}
           </el-button>
 
-          <div :class="options.length - expandNumber >= columnNumber ? 'expand-button' : 'hidden'"
+          <div :class="isExpandNumber ? 'expand-button' : 'hidden'"
                @click="handleExpandStatus()">
             <span>{{ isExpandStatus ? "收起" : "展开" }}</span>
           </div>
@@ -113,11 +111,6 @@ export default {
       type: String,
       default: "left",
     },
-    columnNumber: {
-      // 每行列数量
-      type: Number,
-      default: 4,
-    },
     isSave: {
       // 是否保存功能
       type: Boolean,
@@ -138,11 +131,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    expandNumber: {
-      // 默认收起展示数量
-      type: Number,
-      default: 4,
-    },
     hasExpandAll: {
       // 默认收起展示数量
       type: Boolean,
@@ -170,8 +158,8 @@ export default {
       isSaveShow: false, // 是否展示保存操作
       isSelectShow: false, // 是否展示选择操作
       selectForm: "", // 当前选中数据
-      currentExpandNumber: 4, // 当前收起展示数量
       isExpandAll: true,
+      span: 6,
       currentTemplate: {},
       variantList: [],
       varianId: [],
@@ -203,9 +191,26 @@ export default {
       deep: true,
     },
   },
+  computed: {
+    // 是否显示展开关闭按钮
+    isExpandNumber() {
+      let spans = this.options.reduce((sum, item) => sum + (item.span || this.span), 0)
+      return (spans - 24) > 0;
+    },
+    // 是否行内显示按钮
+    isExpandRow() {
+      const spans = this.options.reduce((sum, item) => sum + (item.span || this.span), 0);
+      const remainder = spans % 24;
+
+      if (spans > 18) {
+        return !this.isExpandStatus || remainder === 0 || (remainder > 15 && remainder < 24);
+      }
+
+      return false
+    },
+  },
   mounted() {
     this.isExpandStatus = this.isExpand;
-    this.currentExpandNumber = this.expandNumber || this.columnNumber;
     this.form = JSON.parse(JSON.stringify(this.modelValue));
     this.defaultForm =
       JSON.stringify(this.defaultForm) === "{}"
@@ -213,6 +218,11 @@ export default {
         : this.defaultForm;
   },
   methods: {
+    // 是否默认展示
+    isDefaultShow(index) {
+      let span = this.options.slice(0, index + 1).reduce((sum, item) => sum + (item.span || this.span), 0)
+      return span <= 24;
+    },
     // 切换展开状态
     handleExpandStatus() {
       this.isExpandStatus = !this.isExpandStatus;