lw-cdp-ui 1.1.71 → 1.2.2

package/dist/components/lwFormJson/JsonItem.vue

@@ -1,25 +1,59 @@
 <template>
-
   <draggable :list="formItems"
              item-key="name"
              group="people"
-             ghost-class="draggable-ghost"
+             :disabled="!hideBorder"
              class="draggable-item"
-             :class="{  cur: formItems.name == curIndex }">
+             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"
-              :class="{ borderItem: !isBorder, cur: item.name == curIndex }"
+      <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)">
         <!-- 组合/列表 -->
-        <template v-if="['object', 'list'].includes(item.component)">
+        <template v-if="['object'].includes(item.component)">
           <el-form-item :label="item.label"
-                        class="padding-item"
-                        @click.capture="changeClick(item)"
-                        :class="{ borderItem: !isBorder }">
+                        @click.capture="changeClick(item)">
             <JsonItem :formItems="item.value"
-                      :form="form"
+                      :form="form[item.name]"
+                      class="object-item"
+                      :hideBorder="hideBorder"
                       @curClick="changeClick"></JsonItem>
           </el-form-item>
+
+        </template>
+        <!-- 列表 显示时 -->
+        <template v-else-if="['list'].includes(item.component)">
+          <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-col>
+
+          </el-form-item>
+
         </template>
         <FormItem v-else
                   :item="item"
@@ -30,14 +64,21 @@
                     v-slot:[item.component]>
             <slot :name="item.component"
                   :itemCur="item"
-                  :formCur="form">
-              <el-tag type="danger">
-                [{{ item.component }}]
-                没有这个默认组件也未自定义插槽内容
-              </el-tag>
-            </slot>
+                  :formCur="form"></slot>
           </template>
         </FormItem>
+
+        <!-- 工具 -->
+        <div v-if="hideBorder && curIndex == (item.name || item?.options?.items[0]?.name)"
+             class="tool-list">
+          <el-icon class="btn"
+                   size="14"
+                   @click="copyItem(item, index)"><el-icon-copy-document /></el-icon>
+          <el-icon class="btn"
+                   size="14"
+                   @click="deleteItem(index)"><el-icon-delete /></el-icon>
+        </div>
+
       </el-col>
     </template>
   </draggable>
@@ -62,7 +103,7 @@ export default {
       default: () => { }
     },
     // 是否是显示边界
-    isBorder: { type: Boolean, default: false }
+    hideBorder: { type: Boolean, default: true }
   },
   computed: {
     curIndex() {
@@ -82,8 +123,28 @@ export default {
       return false
     },
     changeClick(item) {
-      this.$store.state.curIndex = item.name
+      this.$store.state.curIndex = item.name || item?.options.items[0]?.name
       this.$emit('curClick', item)
+    },
+    // 列表删除
+    deleteListItem(list, index) {
+      list.splice(index, 1)
+    },
+    // 列表新增
+    addListItem(list) {
+      let item = list[0]
+      let x = JSON.parse(JSON.stringify(item))
+      list.push(x)
+    },
+    // 删除
+    deleteItem(index) {
+      this.formItems.splice(index, 1)
+    },
+    // 复制
+    copyItem(item, index) {
+      let x = JSON.parse(JSON.stringify(item))
+      x.name = `${item.component}-${this.$tool.getUUID('', 2)}`
+      this.formItems.splice(index + 1, 0, x)
     }
   }
 }
@@ -95,8 +156,7 @@ export default {
   min-height: 40px;
   display: flex;
   flex-wrap: wrap;
-  border: 1px dashed var(--el-border-color-light);
-  background-color: rgba($color: #000000, $alpha: 0.01);
+
   > div {
     .title-name {
       margin-top: 0;
@@ -107,17 +167,33 @@ export default {
       }
     }
   }
+  &.showBorder {
+    border: 1px dashed var(--el-border-color-light);
+    background-color: rgba($color: #000000, $alpha: 0.01);
+  }
 }
-.padding-item {
+.object-item {
   padding: 10px;
-  background-color: rgba($color: #000000, $alpha: 0.01);
+  background-color: rgba($color: #000000, $alpha: 0.03);
 }
 
 :deep(.el-col) {
   border: 1px dashed transparent;
 }
-:deep(.cur) {
-  border: 1px dashed var(--el-color-primary) !important;
+
+.list-item {
+  width: 100%;
+  padding: 10px;
+  background-color: rgba($color: #000000, $alpha: 0.03);
+  margin-bottom: 10px;
+  position: relative;
+  .remove-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: var(--el-color-primary);
+    cursor: pointer;
+  }
 }
 
 .borderItem {
@@ -125,10 +201,36 @@ export default {
   box-sizing: border-box;
   padding: 10px;
   cursor: move;
+  position: relative;
   &:hover {
     border: 1px dashed var(--el-border-color);
     background-color: rgba($color: #000000, $alpha: 0.01);
   }
+
+  .tool-list {
+    display: none;
+  }
+}
+:deep(.cur) {
+  border: 1px dashed var(--el-color-primary) !important;
+  .tool-list {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: block;
+    border-top-left-radius: 10px;
+    z-index: 8;
+    background-color: var(--el-color-primary);
+    color: #fff;
+    display: flex;
+    gap: 10px;
+    padding: 2px 10px;
+    .btn {
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
+    }
+  }
 }
 
 :deep(.draggable-ghost) {
@@ -137,4 +239,25 @@ export default {
   padding: 10px;
   width: 100%;
 }
+:deep(.el-form-item) {
+  position: relative;
+}
+.add-btn {
+  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>