lw-cdp-ui 1.3.21 → 1.3.22

package/dist/components/lwFormMini/FormItem.vue

@@ -253,7 +253,7 @@ export default {
   props: {
     item: {
       type: Object,
-      default: () => { }
+      default: () => {}
     },
     index: {
       type: Number,
@@ -261,13 +261,13 @@ export default {
     },
     form: {
       type: Object,
-      default: () => { }
+      default: () => {}
     }
   },
   watch: {
     item: {
       handler(val, oldVal) {
-        this.objItem = { ...val, ...this.objItem }
+        this.objItem = {...val, ...this.objItem}
       },
       immediate: true,
       deep: true
@@ -275,13 +275,12 @@ export default {
     form: {
       handler(val) {
         if (this.item.component === 'checkbox' || this.item.component === 'upload') {
-          this.objItem.options?.items?.forEach((option) => {
+          this.objItem.options?.items?.forEach(option => {
             option.value = this.flattenObject(this.form, option.name, option.value)
-          });
+          })
         } else {
           this.objItem.value = this.flattenObject(this.form, this.item.name, this.objItem.value)
         }
-
       },
       immediate: true,
       deep: true
@@ -289,9 +288,9 @@ export default {
     objItem: {
       handler(val) {
         if (val.component === 'checkbox' || val.component === 'upload') {
-          val.options?.items?.forEach((option) => {
+          val.options?.items?.forEach(option => {
             this.unflattenObject(this.form, option.name, option.value)
-          });
+          })
         } else {
           this.unflattenObject(this.form, val.name, val.value)
         }
@@ -302,42 +301,45 @@ export default {
         }
       },
       deep: true
-    },
+    }
   },
   methods: {
     flattenObject(obj, key, defaultValue = '') {
-      if (!key || !obj) { return false }
-      const keys = key.split('.');  // 将路径拆分成数组
+      if (!key || !obj) {
+        return false
+      }
+      const keys = key.split('.') // 将路径拆分成数组
 
-      let current = obj;
+      let current = obj
       // 遍历路径并逐层查找
       for (let i = 0; i < keys.length; i++) {
         // 如果当前层级不存在，则创建该层级对象
         if (current[keys[i]] === undefined) {
-          current[keys[i]] = (i === keys.length - 1) ? defaultValue : {};  // 如果是最后一个层级，设为默认值，否则创建空对象
+          current[keys[i]] = i === keys.length - 1 ? defaultValue : {} // 如果是最后一个层级，设为默认值，否则创建空对象
         }
         // 否则，继续向下查找
-        current = current[keys[i]];
+        current = current[keys[i]]
       }
-      return current;
+      return current
     },
     unflattenObject(obj, path, value) {
-      if (!path || !obj) { return false }
-      const keys = path.split('.'); // 按点分隔路径
+      if (!path || !obj) {
+        return false
+      }
+      const keys = path.split('.') // 按点分隔路径
 
       keys.forEach((key, index) => {
         if (index === keys.length - 1) {
           // 最后一级，直接赋值
-          obj[key] = value;
+          obj[key] = value
         } else {
           // 如果不存在该层级，创建空对象
           if (!obj[key] || typeof obj[key] !== 'object') {
-            obj[key] = {};
+            obj[key] = {}
           }
-          obj = obj[key]; // 进入下一层
+          obj = obj[key] // 进入下一层
         }
-      });
-
+      })
     },
     // 删除tag
     tagClose(tag, item) {
@@ -364,20 +366,19 @@ export default {
     rulesHandle(item) {
       if (item.requiredHandle) {
         try {
-          const requiredHandleFunc = new Function("form", `return ${item.requiredHandle.replace(/\$/g, "form")}`);
-          const exp = requiredHandleFunc(this.form);
+          const requiredHandleFunc = new Function('form', `return ${item.requiredHandle.replace(/\$/g, 'form')}`)
+          const exp = requiredHandleFunc(this.form)
 
-          const requiredRule = item.rules.find(t => 'required' in t);
+          const requiredRule = item.rules.find(t => 'required' in t)
           if (requiredRule) {
-            requiredRule.required = exp;
+            requiredRule.required = exp
           }
         } catch (error) {
-          console.error("Error requiredHandle function:", error);
+          console.error('Error requiredHandle function:', error)
         }
       }
-      return item.rules;
-    },
-
+      return item.rules
+    }
   }
 }
 </script>
@@ -394,7 +395,6 @@ export default {
   }
 }
 
-
 :deep(.el-tag) {
   & + .button-new-tag {
     margin-left: 10px;
@@ -403,4 +403,17 @@ export default {
     margin-left: 10px;
   }
 }
+.el-form-item-msg {
+  width: 100%;
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+  line-height: 16px;
+}
+:deep(.el-form-item__label){
+  position: relative;
+  .el-tooltip__trigger{
+    position: absolute;
+    right: 0;
+  }
+}
 </style>

package/dist/components/lwFormMini/index.vue

@@ -15,6 +15,13 @@
     </ul>
   </el-affix>
 
+  <el-tabs v-if="blackType === 'tabs'"
+           v-model="activeIndex">
+    <el-tab-pane :label="card[0].label"
+                 v-for="(card, index) in formItems"
+                 :name="index"></el-tab-pane>
+  </el-tabs>
+
   <el-skeleton v-if="renderLoading || Object.keys(form).length == 0"
                animated />
 
@@ -28,11 +35,12 @@
            :size="config?.size || 'default'"
            element-loading-text="Loading...">
     <div class="lw-form-mini-card"
-         v-for="card in formItems">
-      <el-row :gutter="15">
+         v-for="(card, index) in formItems">
+      <el-row v-show="activeIndex == index || blackType === 'card'"
+              :gutter="15">
         <template v-for="(item, index) in card">
           <el-col :span="item.span || 24"
-                  v-if="!hideHandle(item)">
+                  v-if="!hideHandle(item) && !(blackType == 'tabs' && item.component == 'divider')">
             <ViewItem v-if="isView && !item?.options?.isInput"
                       :item="item"
                       :form="form"
@@ -94,7 +102,7 @@ export default {
     ViewItem
   },
   props: {
-    modelValue: { type: Object, default: () => { } },
+    modelValue: {type: Object, default: () => {}},
     /**
      * 配置项
      * {
@@ -120,25 +128,28 @@ export default {
      *         label: '选项2'
      *       }]
      *     }
-     *     ...  
+     *     ...
      *   }]
      *   labelWidth: '100px', // 表单域标签的宽度
      *   labelPosition: 'top', // 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
      *   ...
      * }
      * **/
-    config: { type: Object, default: () => { } },
+    config: {type: Object, default: () => {}},
     // 是否显示加载中
-    loading: { type: Boolean, default: false },
+    loading: {type: Boolean, default: false},
     // 是否是查看模式
-    isView: { type: Boolean, default: false },
+    isView: {type: Boolean, default: false},
     // 显示导航
-    showMenu: { type: Boolean, default: false },
+    showMenu: {type: Boolean, default: false},
+    // 模块显示方式 // tabs, card
+    blackType: {type: String, default: 'card'}
   },
   data() {
     return {
       form: {},
       affixIndex: '',
+      activeIndex: 0,
       isChange: true,
       scrollObserverEnabled: true,
       renderLoading: false
@@ -161,7 +172,7 @@ export default {
             this.handleScroll()
           })
         }
-        this.$emit("update:config", val)
+        this.$emit('update:config', val)
       },
       immediate: true,
       deep: true
@@ -175,30 +186,30 @@ export default {
       return Object.keys(this.modelValue).length > 0
     },
     formItems() {
-      const result = [];
-      let currentGroup = [];
+      const result = []
+      let currentGroup = []
 
       this.config.formItems.forEach(item => {
-        if (item.component === "divider") {
+        if (item.component === 'divider') {
           if (!this.affixIndex) {
             this.affixIndex = item.label
           }
 
           if (currentGroup.length) {
-            result.push(currentGroup);
-            currentGroup = [];
+            result.push(currentGroup)
+            currentGroup = []
           }
-          currentGroup.push(item);
+          currentGroup.push(item)
         } else {
-          currentGroup.push(item);
+          currentGroup.push(item)
         }
-      });
+      })
 
       if (currentGroup.length) {
-        result.push(currentGroup);
+        result.push(currentGroup)
       }
 
-      return result;
+      return result
     }
   },
   mounted() {
@@ -216,67 +227,71 @@ export default {
      */
     render(config = this.config) {
       function parse(formItems, form) {
-        const result = {};
-        formItems.forEach((item) => {
+        const result = {}
+        formItems.forEach(item => {
           if (item.component === 'checkbox' || item.component === 'upload') {
-            item.options?.items?.forEach((option) => {
-              if (!option?.name) { return false }
-              result[option.name] = form?.[option.name] ?? option.value;
-            });
+            item.options?.items?.forEach(option => {
+              if (!option?.name) {
+                return false
+              }
+              result[option.name] = form?.[option.name] ?? option.value
+            })
           }
-          if (!item?.name) { return false }
-          let existingValue = form?.[item.name]; // 检查 form 对象中是否已有值
+          if (!item?.name) {
+            return false
+          }
+          let existingValue = form?.[item.name] // 检查 form 对象中是否已有值
 
           if (item.component === 'list') {
-            result[item.name] = item.value?.map((list, listIndex) => {
-              if (!existingValue) {
-                existingValue = []
-              } else {
-                existingValue = form?.[item.name][listIndex] || {}
-              }
-              return parse(list, existingValue)
-            }) || [];
+            result[item.name] =
+              item.value?.map((list, listIndex) => {
+                if (!existingValue) {
+                  existingValue = []
+                } else {
+                  existingValue = form?.[item.name][listIndex] || {}
+                }
+                return parse(list, existingValue)
+              }) || []
           } else if (item.component === 'object') {
-            result[item.name] = parse(item.value, existingValue || {});
+            result[item.name] = parse(item.value, existingValue || {})
           } else {
             if (item.component === 'number') {
-              result[item.name] = existingValue ?? (item.value !== undefined ? Number(item.value) : item.options?.min || 0);
+              result[item.name] =
+                existingValue ?? (item.value !== undefined ? Number(item.value) : item.options?.min || 0)
             } else {
-              result[item.name] = existingValue ?? item.value;
-
+              result[item.name] = existingValue ?? item.value
             }
           }
-        });
+        })
 
-        return result;
+        return result
       }
 
-      let form = parse(config.formItems, this.modelValue);
+      let form = parse(config.formItems, this.modelValue)
       form = {
         ...this.modelValue,
         ...form
       }
       this.form = this.parseNestedObject(form)
-      this.$emit("update:modelValue", this.form);
+      this.$emit('update:modelValue', this.form)
     },
 
     parseNestedObject(obj) {
-      const result = {};
+      const result = {}
       for (const [key, value] of Object.entries(obj)) {
-        const keys = key.split('.');
-        let current = result;
+        const keys = key.split('.')
+        let current = result
 
         keys.forEach((k, index) => {
           if (!current[k]) {
-            current[k] = index === keys.length - 1 ? value : {};
+            current[k] = index === keys.length - 1 ? value : {}
           }
-          current = current[k];
-        });
+          current = current[k]
+        })
 
         delete obj[key]
-
       }
-      return result;
+      return result
     },
 
     //处理动态隐藏
@@ -284,10 +299,10 @@ export default {
       if (typeof item?.hideHandle === 'string') {
         try {
           // 构造一个函数并执行，同时捕获潜在的异常
-          const func = new Function('form', `return ${item?.hideHandle.replace(/\$/g, "form")}`);
-          return func(this.form);
+          const func = new Function('form', `return ${item?.hideHandle.replace(/\$/g, 'form')}`)
+          return func(this.form)
         } catch (error) {
-          return false; // 或根据需求返回默认值
+          return false // 或根据需求返回默认值
         }
       } else if (typeof item?.hideHandle === 'boolean') {
         return item.hideHandle
@@ -310,67 +325,67 @@ export default {
     },
     //提交
     submit() {
-      this.$emit("submit", this.form)
+      this.$emit('submit', this.form)
     },
     clickAffix(index) {
-      this.affixIndex = index;
-      const targetElement = document.getElementById('divider-' + index);
-      const scrollContainer = document.querySelector('.el-container > .el-main');
+      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 offset = 85 // 目标元素与顶部的偏移量
+        const targetRect = targetElement.getBoundingClientRect()
+        const containerRect = scrollContainer.getBoundingClientRect()
 
         // 计算目标元素相对于滚动容器内部的真实偏移量
-        const elementPosition = targetRect.top - containerRect.top + scrollContainer.scrollTop;
+        const elementPosition = targetRect.top - containerRect.top + scrollContainer.scrollTop
 
         // 让 el-main 滚动到目标元素，保证它距离顶部 30px
         scrollContainer.scrollTo({
           top: elementPosition - offset,
           behavior: 'smooth'
-        });
+        })
       }
 
-      this.scrollObserverEnabled = false;
+      this.scrollObserverEnabled = false
       setTimeout(() => {
-        this.scrollObserverEnabled = true;
-      }, 500);
+        this.scrollObserverEnabled = true
+      }, 500)
     },
     // 监听滚动
     handleScroll() {
-      const titleNameDividers = document.querySelectorAll('.title-name-divider');
-      const elMain = document.querySelector('.el-main');
+      const titleNameDividers = document.querySelectorAll('.title-name-divider')
+      const elMain = document.querySelector('.el-main')
 
-      if (!elMain || titleNameDividers.length === 0) return;
+      if (!elMain || titleNameDividers.length === 0) return
 
-      let _this = this;
+      let _this = this
 
       // 创建 IntersectionObserver 观察滚动元素
       const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
+        entries => {
+          entries.forEach(entry => {
             if (entry.isIntersecting && _this.scrollObserverEnabled) {
-              const dataIndex = entry.target.getAttribute('data-index');
-              _this.affixIndex = dataIndex; // 更新 affixIndex
+              const dataIndex = entry.target.getAttribute('data-index')
+              _this.affixIndex = dataIndex // 更新 affixIndex
             }
-          });
+          })
         },
         {
           root: elMain, // 设置 el-main 为滚动容器
           rootMargin: '30px 0px -70% 0px', // 确保元素在滚动到 30px 位置时触发
           threshold: 0.1 // 交叉比例，确保元素部分可见时触发
         }
-      );
+      )
 
       // 观察每个 title-name-divider 元素
-      titleNameDividers.forEach((divider) => observer.observe(divider));
+      titleNameDividers.forEach(divider => observer.observe(divider))
 
       // 解绑旧的观察者（防止重复监听）
       if (this.scrollObserver) {
-        this.scrollObserver.disconnect();
+        this.scrollObserver.disconnect()
       }
-      this.scrollObserver = observer;
+      this.scrollObserver = observer
     }
   }
 }

package/dist/components/lwTableForm/index.vue

@@ -114,6 +114,7 @@
                      style="width: 100%;">
             <el-option v-for="option in item.options.items"
                        :key="option.value"
+                       :disabled="option.disabled"
                        :label="option.label"
                        :value="option.value"></el-option>
           </el-select>