fix: 修复表单容器拖拽放置区域过小

src/views/app/components/WisdomUiPanel/WisdomUiPanel.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2021-09-15 16:03:17
  * @LastEditors: wjc
- * @LastEditTime: 2021-09-23 15:55:57
+ * @LastEditTime: 2021-09-24 14:35:46
  * @Description:
 -->
 <template>
@@ -86,7 +86,9 @@ export default {
     // 拖动组件后，给组件数据添加额外属性
     createIdAndKey(item) {
       const config = item.__config__
-      config.formId = ++this.activeId
+      let activeId = new Date().getTime()
+      this.activeId = activeId
+      config.formId = ++activeId
       config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
       if (config.layout === 'colFormItem') {
         item.__vModel__ = `field${this.activeId}`
@@ -103,7 +105,6 @@ export default {
     cloneComponent(origin) {
       const clone = deepClone(origin)
       const config = clone.__config__
-      // config.span = this.formConf.span // 生成代码时，会根据span做精简判断
       this.createIdAndKey(clone)
       clone.placeholder !== undefined && (clone.placeholder += config.label)
       tempActiveData = clone
@@ -111,7 +112,6 @@ export default {
     },
     onEnd(obj) {
       if (obj.from !== obj.to) {
-        this.activeId = new Date().getTime()
         this.$emit('drag-end', tempActiveData, this.activeId)
       }
     }

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-23 17:08:47
+ * @LastEditTime: 2021-09-24 14:20:14
  * @Description:
 -->
 <template>
@@ -103,32 +103,22 @@ export default {
       .active-from-item {
         background: @selectedColor;
         border-radius: 6px;
+        border: 1px dashed #ccc;
+        border-radius: 3px;
         & > .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;
         padding: 0 2px;
-        margin: 0 20px;
-        .el-col{
-          margin-top: 22px;
-        }
-        .component-name{
-          top: 0;
-          left: 0;
-          font-size: 12px;
-          color: #bbb;
-          display: inline-block;
-          padding: 0 6px;
+        margin: 4px 20px;
+        border: 1px dashed #ccc;
+        .drag-wrapper {
+          padding: 8px;
+          min-height: 80px;
         }
       }
     .drawing-item {
@@ -136,11 +126,7 @@ export default {
     }
     .drawing-form-item {
       &:hover {
-        border: 1px dashed #ccc;
-        border-radius: 3px;
-        .drag-wrapper {
-          padding: 8px;
-        }
+        border: 1px dashed @lighterBlue;
         & > .drawing-item-copy, & > .drawing-item-delete{
           display: initial;
         }