feat: 表单容器样式调整

src/views/app/components/DraggableItem/DraggableItem.vue

@@ -24,7 +24,6 @@ const layouts = {
     const { activeItem } = this.$listeners
     const config = currentItem.__config__
     const child = renderChildren.apply(this, arguments)
-    console.log('col-layout--2222--', child, config)
     let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item'
     if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
     let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
@@ -75,10 +74,9 @@ const layouts = {
     const { activeItem } = this.$listeners
     const config = currentItem.__config__
     const className = this.activeId === config.formId
-      ? 'drawing-row-item active-from-item'
-      : 'drawing-row-item'
+      ? 'drawing-form-item active-from-item'
+      : 'drawing-form-item'
     const child = renderChildren.apply(this, arguments)
-    console.log('child---', child, config, config.children, arguments)
     return (
       <el-form
         size={currentItem.size}
@@ -86,7 +84,6 @@ const layouts = {
         class={`${currentItem.class} ${className}`}
         nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}
       >
-        <span class="component-name">{config.componentName}</span>
         <draggable
           list={config.children || []}
           animation={340}
@@ -112,12 +109,9 @@ const layouts = {
 
 function renderChildren(h, currentItem, index, list) {
   const config = currentItem.__config__
-  console.log('render child 1', config)
   if (!Array.isArray(config.children)) return null
-  console.log('render child 2', config.children)
   return config.children.map((el, i) => {
     const layout = layouts[el.__config__.layout]
-    console.log('render child 3', layout)
     if (layout) {
       return layout.call(this, h, el, i, config.children)
     }

src/views/app/editor/EditorArea/EditorArea.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2021-09-16 10:55:40
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-18 14:54:56
+ * @LastEditTime: 2021-09-23 11:16:31
  * @Description:
 -->
 <template>
@@ -75,7 +75,7 @@ export default {
     activeFormItem(currentItem) {
       this.activeData = currentItem
       this.activeDragId = currentItem.__config__.formId
-      this.$emit('active-item', this.activeData)
+      this.$emit('active-item', this.activeData, this.activeDragId)
     },
     drawingItemDelete(index, list) {
       list.splice(index, 1)
@@ -97,8 +97,105 @@ export default {
     height: 100%;
     .drag-board {
       height: 500px;
+      .active-from-item {
+        background: @selectedColor;
+        border-radius: 6px;
+        & > .drawing-item-copy, & > .drawing-item-delete{
+          display: initial;
+        }
+        & > .component-name {
+          color: @lighterBlue;
+        }
+      }
+      .form-container {
+        margin: 0 20px;
+      }
+      .drawing-form-item {
+        position: relative;
+        cursor: move;
+        box-sizing: border-box;
+        border: 1px dashed #ccc;
+        border-radius: 3px;
+        padding: 0 2px;
+        margin-bottom: 15px;
+        margin-bottom: 2px;
+        .el-col{
+          margin-top: 22px;
+        }
+        .el-form-item{
+          margin-bottom: 0;
+        }
+        .drag-wrapper{
+          min-height: 80px;
+          padding: 8px
+        }
+        .component-name{
+          top: 0;
+          left: 0;
+          font-size: 12px;
+          color: #bbb;
+          display: inline-block;
+          padding: 0 6px;
+        }
+      }
+    .drawing-item {
+      padding: 4px;
+    }
+    .drawing-form-item {
+      &:hover {
+        & > .drawing-item-copy, & > .drawing-item-delete{
+          display: initial;
+        }
+      }
+      .drawing-item {
+        &:hover {
+          background: @selectedColor;
+          border-radius: 6px;
+          .el-form-item__content > .drawing-item-copy, .el-form-item__content > .drawing-item-delete{
+            display: initial;
+          }
+        }
+      }
+    }
+    .drawing-form-item{
+      & > .drawing-item-copy,
+      & > .drawing-item-delete,
+      .el-form-item__content > .drawing-item-copy,
+      .el-form-item__content > .drawing-item-delete {
+        display: none;
+        position: absolute;
+        top: -15px;
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        border-radius: 50%;
+        font-size: 12px;
+        border: 1px solid;
+        cursor: pointer;
+        z-index: 1;
+      }
+      .drawing-item-copy{
+        right: 30px;
+        border-color: @lighterBlue;
+        color: @lighterBlue;
+        background: #fff;
+        &:hover{
+          background: @lighterBlue;
+          color: #fff;
+        }
+      }
+      .drawing-item-delete{
+        right: 0px;
+        border-color: #F56C6C;
+        color: #F56C6C;
+        background: #fff;
+        &:hover{
+          background: #F56C6C;
+          color: #fff;
+        }
+      }
     }
-    // .header-area {
-    // }
   }
+}
 </style>

src/views/app/editor/index.vue

@@ -2,7 +2,7 @@
  * @Author: WangJiaCheng
  * @Date: 2021-08-20 09:10:36
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-18 15:31:48
+ * @LastEditTime: 2021-09-23 10:15:22
  * @Description: 编辑器
 -->
 <template>
@@ -79,8 +79,9 @@ export default {
     }
   },
   methods: {
-    handleActiveItem(data) {
+    handleActiveItem(data, id) {
       this.activeData = data
+      this.activeId = id
     },
     handleDragEnd(data, id) {
       this.activeData = data
@@ -113,84 +114,4 @@ export default {
       width: 20%;
     }
   }
-  .form-container {
-    margin: 0 20px;
-  }
-  .drawing-row-item {
-    position: relative;
-    cursor: move;
-    box-sizing: border-box;
-    border: 1px dashed #ccc;
-    border-radius: 3px;
-    padding: 0 2px;
-    margin-bottom: 15px;
-    .drawing-row-item {
-      margin-bottom: 2px;
-    }
-    .el-col{
-      margin-top: 22px;
-    }
-    .el-form-item{
-      margin-bottom: 0;
-    }
-    .drag-wrapper{
-      min-height: 80px;
-    }
-    &.active-from-item{
-      border: 1px dashed @lighterBlue;
-    }
-    .component-name{
-      top: 0;
-      left: 0;
-      font-size: 12px;
-      color: #bbb;
-      display: inline-block;
-      padding: 0 6px;
-    }
-}
-.drawing-item, .drawing-row-item{
-  &:hover {
-    & > .el-form-item{
-      background: @selectedColor;
-      border-radius: 6px;
-    }
-    & > .drawing-item-copy, & > .drawing-item-delete{
-      display: initial;
-    }
-  }
-  & > .drawing-item-copy, & > .drawing-item-delete{
-    display: none;
-    position: absolute;
-    top: -10px;
-    width: 22px;
-    height: 22px;
-    line-height: 22px;
-    text-align: center;
-    border-radius: 50%;
-    font-size: 12px;
-    border: 1px solid;
-    cursor: pointer;
-    z-index: 1;
-  }
-  & > .drawing-item-copy{
-    right: 56px;
-    border-color: @lighterBlue;
-    color: @lighterBlue;
-    background: #fff;
-    &:hover{
-      background: @lighterBlue;
-      color: #fff;
-    }
-  }
-  & > .drawing-item-delete{
-    right: 24px;
-    border-color: #F56C6C;
-    color: #F56C6C;
-    background: #fff;
-    &:hover{
-      background: #F56C6C;
-      color: #fff;
-    }
-  }
-}
 </style>