lw-cdp-ui 1.2.1 → 1.2.3

package/dist/components/lwFormJson/JsonItem.vue

@@ -7,7 +7,7 @@
              ghost-class="draggable-ghost"
              :class="{ showBorder: hideBorder,  cur:  curIndex == (formItems.name || formItems?.options?.items[0]?.name) }">
     <template #item="{element: item, index}">
-      <el-col :span="item.span || 24"
+      <el-col :span="['list'].includes(item.component) ? 24 : item.span || 24"
               :class="{ borderItem: hideBorder, cur: hideBorder &&  curIndex == (item.name || item?.options?.items[0]?.name) }"
               v-if="!hideHandle(item)">
         <!-- 组合/列表 -->
@@ -24,30 +24,34 @@
         </template>
         <!-- 列表 显示时 -->
         <template v-else-if="['list'].includes(item.component)">
-          <el-form-item :label="item.label"
-                        @click.capture="changeClick(item)">
-            <div class="list-item"
-                 :class="{ borderItem: hideBorder }"
-                 v-for="(x, xIndex) in item.value">
-              <JsonItem v-if="form[item.name]"
-                        :formItems="x"
-                        :form="form[item.name][xIndex]"
-                        :hideBorder="hideBorder"
-                        @curClick="changeClick"></JsonItem>
+          <el-form-item @click.capture="changeClick(item)">
+            <template #label>
+              {{ item.label }}
+              <el-button v-if="!hideBorder"
+                         type="primary"
+                         class="add-btn"
+                         plain
+                         size="small"
+                         icon="el-icon-plus"
+                         @click="addListItem(item.value)">{{ $t('btn.add') }}</el-button>
+            </template>
+            <el-col :span="item.span || 24"
+                    v-for="(x, xIndex) in item.value">
+              <div class="list-item"
+                   :class="{borderItem: hideBorder}">
+                <JsonItem v-if="form[item.name]"
+                          :formItems="x"
+                          :form="form[item.name][xIndex]"
+                          :hideBorder="hideBorder"
+                          @curClick="changeClick"></JsonItem>
+                <el-icon class="remove-btn"
+                         size="14"
+                         v-if="!hideBorder && item.value.length > 1"
+                         @click="deleteListItem(item.value, xIndex)"><el-icon-delete /></el-icon>
+              </div>
 
-              <el-icon class="remove-btn"
-                       size="14"
-                       v-if="!hideBorder && item.value.length > 1"
-                       @click="deleteListItem(item.value, xIndex)"><el-icon-delete /></el-icon>
-            </div>
+            </el-col>
 
-            <el-button v-if="!hideBorder"
-                       type="primary"
-                       class="add-btn"
-                       plain
-                       size="small"
-                       icon="el-icon-plus"
-                       @click="addListItem(item.value)">{{ $t('btn.add') }}</el-button>
           </el-form-item>
 
         </template>
@@ -235,9 +239,25 @@ export default {
   padding: 10px;
   width: 100%;
 }
-
+:deep(.el-form-item) {
+  position: relative;
+}
 .add-btn {
-  width: 100%;
-  margin-top: 5px;
+  top: 0px;
+  right: 0;
+  z-index: 9;
+  position: absolute;
+}
+:deep(.el-form-item--label-right),:deep(.el-form-item--label-left) {
+  .el-form-item__label {
+    position: relative;
+    .add-btn {
+      top: 30px;
+      right: 10px;
+      // left: 0;
+      // z-index: 9;
+      // position: absolute;
+    }
+  }
 }
 </style>

package/dist/components/lwFormJson/StatsConfig.vue

@@ -110,6 +110,38 @@
 
         </template>
 
+        <template v-if="['tags'].includes(item.component)">
+          <el-form-item label="按钮名称">
+            <el-input v-model="item.options.addText"
+                      placeholder="请输入"
+                      clearable />
+          </el-form-item>
+          <el-form-item label="默认标签">
+            <div class="tags-list">
+              <el-tag v-for="tag in item.value"
+                      :key="tag"
+                      closable
+                      :disable-transitions="false"
+                      @close="tagClose(tag, item.value)">
+                {{ tag }}
+              </el-tag>
+              <el-input v-if="tagVisible[item.name]"
+                        v-model="tagValue"
+                        class="w-20"
+                        size="small"
+                        @keyup.enter="tagInputConfirm(item, item.value)"
+                        @blur="tagInputConfirm(item, item.value)" />
+              <el-button v-else
+                         class="button-new-tag"
+                         size="small"
+                         @click="tagVisible[item.name] = true">
+                + 添加
+              </el-button>
+            </div>
+          </el-form-item>
+
+        </template>
+
         <el-form-item v-if="item.component === 'switch'"
                       label="开关文字">
           <div class="form-item">
@@ -301,6 +333,12 @@
 <script>
 export default {
   name: 'StatsConfig',
+  data() {
+    return {
+      tagVisible: {},
+      tagValue: ''
+    }
+  },
   props: {
     item: {
       type: Object,
@@ -314,6 +352,21 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  methods: {
+    // 删除tag
+    tagClose(tag, item) {
+      item.splice(item.indexOf(tag), 1)
+    },
+    // 增加tag
+    tagInputConfirm(item, val) {
+      if (this.tagValue) {
+        val = val || []
+        val.push(this.tagValue)
+      }
+      this.tagVisible[item.name] = false
+      this.tagValue = ''
+    }
   }
 };
 </script>
@@ -342,5 +395,17 @@ export default {
     gap: 5px;
     margin-bottom: 10px;
   }
+
+  :deep(.el-tag) {
+    & + .button-new-tag {
+      margin-left: 10px;
+    }
+    & + .w-20 {
+      margin-left: 10px;
+    }
+  }
+  .w-20 {
+    width: 100px;
+  }
 }
 </style>

package/dist/components/lwFormJson/index.vue

@@ -146,12 +146,12 @@ export default {
       },
       deep: true
     },
-    form: {
-      handler(val) {
-        this.$emit("update:modelValue", val)
-      },
-      deep: true
-    },
+    // form: {
+    //   handler(val) {
+    //     this.$emit("update:modelValue", val)
+    //   },
+    //   deep: true
+    // },
     localConfig: {
       handler(val) {
         this.render(val)
@@ -239,10 +239,32 @@ export default {
         return result;
       }
 
-      this.form = parse(config.formItems, this.modelValue);
-      this.$emit("update:modelValue", this.form);
+      let form = parse(config.formItems, this.modelValue);
+      this.form = {
+        ...this.modelValue,
+        ...form
+      }
+
+      this.$emit("update:modelValue", this.parseNestedObject(this.form));
       this.localConfig = this.config;
     },
+    parseNestedObject(obj) {
+      const result = {};
+      for (const [key, value] of Object.entries(obj)) {
+        const keys = key.split('.');
+        let current = result;
+
+        keys.forEach((k, index) => {
+          if (!current[k]) {
+            current[k] = index === keys.length - 1 ? value : {};
+          }
+          current = current[k];
+        });
+
+        delete obj[key]
+      }
+      return result;
+    },
 
     //数据验证
     validate(valid, obj) {

package/dist/components/lwFormJson/menuList.js

@@ -65,8 +65,11 @@ export default [
       {
 				label: '标签',
 				name: 'tags',
-				value: '',
+				value: [],
 				span: 24,
+        options: {
+          addText: '添加',
+        },
 				component: 'tags'
 			}
 		]

package/dist/components/lwFormMini/FormItem.vue

@@ -203,7 +203,7 @@
                    class="button-new-tag"
                    size="small"
                    @click="tagVisible[item.name] = true">
-          + 添加
+          + {{item?.options?.addText || '添加'}}
         </el-button>
       </div>
     </template>
@@ -268,10 +268,10 @@ export default {
       handler(val) {
         if (val.component === 'checkbox' || val.component === 'upload') {
           val.options?.items?.forEach((option) => {
-            this.unflattenObject(this.form, option.name, option[option.name])
+            this.unflattenObject(this.form, option.name, option.value)
           });
         } else {
-          this.unflattenObject(this.form, this.item.name, val[this.item.name])
+          this.unflattenObject(this.form, this.item.name, val.value)
         }
       },
       deep: true
@@ -281,6 +281,7 @@ export default {
     flattenObject(obj, key, defaultValue = '') {
       if (!key || !obj) { return false }
       const keys = key.split('.');  // 将路径拆分成数组
+
       let current = obj;
       // 遍历路径并逐层查找
       for (let i = 0; i < keys.length; i++) {
@@ -291,7 +292,7 @@ export default {
         // 否则，继续向下查找
         current = current[keys[i]];
       }
-
+      
       return current;
     },
     unflattenObject(obj, path, value) {
@@ -310,6 +311,8 @@ export default {
           current = current[key]; // 进入下一层
         }
       });
+
+
     },
     // 删除tag
     tagClose(tag, item) {
@@ -375,13 +378,9 @@ export default {
   min-width: 130px;
   padding-left: 20px;
 }
-.button-new-tag {
-  margin-left: 10px;
-}
 
 .w-20 {
   width: 100px;
-  margin-left: 10px;
 }
 
 .title-name {
@@ -440,4 +439,13 @@ export default {
     }
   }
 }
+
+:deep(.el-tag) {
+  & + .button-new-tag {
+    margin-left: 10px;
+  }
+  & + .w-20 {
+    margin-left: 10px;
+  }
+}
 </style>

package/dist/components/lwFormMini/index.vue

@@ -135,20 +135,12 @@ export default {
           })
         }
       },
-      immediate: true,
-      deep: true
-    },
-    form: {
-      handler(val) {
-        this.$emit("update:modelValue", val)
-      },
       deep: true
     },
     localConfig: {
       handler(val) {
         this.render(val)
         this.$emit("update:config", val)
-
       },
       deep: true
     },
@@ -206,6 +198,7 @@ export default {
               result[item.name] = existingValue ?? (item.value !== undefined ? Number(item.value) : item.options?.min || 0);
             } else {
               result[item.name] = existingValue ?? item.value;
+
             }
           }
         });
@@ -213,10 +206,35 @@ export default {
         return result;
       }
 
-      this.form = parse(config.formItems, this.modelValue);
-      this.$emit("update:modelValue", this.form);
+      let form = parse(config.formItems, this.modelValue);
+
+      this.form = {
+        ...this.modelValue,
+        ...form
+      }
+
+      this.$emit("update:modelValue", this.parseNestedObject(this.form));
       this.localConfig = this.config;
     },
+
+    parseNestedObject(obj) {
+      const result = {};
+      for (const [key, value] of Object.entries(obj)) {
+        const keys = key.split('.');
+        let current = result;
+
+        keys.forEach((k, index) => {
+          if (!current[k]) {
+            current[k] = index === keys.length - 1 ? value : {};
+          }
+          current = current[k];
+        });
+
+        delete obj[key]
+      }
+      return result;
+    },
+
     //处理动态隐藏
     hideHandle(item) {
       if (typeof item?.hideHandle === 'string') {