lw-cdp-ui 1.2.1 → 1.2.2

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/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>
@@ -375,13 +375,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 +436,13 @@ export default {
     }
   }
 }
+
+:deep(.el-tag){
+  &+.button-new-tag{
+    margin-left: 10px;
+  }
+  &+.w-20{
+    margin-left: 10px;
+  }
+}
 </style>