fix bug

dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/CustomFormDesign.vue

@@ -7,7 +7,7 @@
         <div class="design-main fields-main">
           <vuedraggable :list="defaultComOptions" :group="{name: 'customComGroup', pull: 'clone', put: false}" class="design-draggable-fields"
             draggable=".draggable-fields-item" ghostClass="subfield-origin-dragClass" :clone="targetComClone" :sort="false"
-            :disabled="!subfieldModuleList.length" @end="fieldsOnEnd">
+            :disabled="!subfieldModuleList.length" @end="endCheck">
             <transition-group name="fade" tag="div" class="draggable-fields-list">
               <div class="draggable-fields-item" :class="{'has-no-subfield-module' : !subfieldModuleList.length}"
                 v-for="(item,index) of defaultComOptions" :key="index" @click="fieldsItemClick">
@@ -22,24 +22,23 @@
       <div class="custom-form-design-options">
         <div class="design-header options-header">表单配置</div>
         <div class="design-main options-main">
-          <el-form class="custom-design-el-form" ref="customDesignFormRef" :model="" :rules="{}" @submit.native.prevent>
+          <el-form class="custom-design-el-form" ref="customDesignFormRef" :model="{}" :rules="{}" @submit.native.prevent>
 
             <!-- 最外层dragg容器 拖动模块module .subfield-module-dragg-target-icon -->
             <vuedraggable :list="subfieldModuleList" group="customSubfieldmodule" class="subfield-module-container"
               draggable=".subfield-module-item-container" handle=".subfield-module-dragg-target-icon" :animation="340">
               <!-- 添加的分栏模块以及chidren模块 -->
               <transition-group name="fade" tag="div" class="subfield-module-list">
-                <div class="subfield-module-draggable-list" v-for="(item,index) of subfieldModuleList" :key="item.uid">
-                  <vuedraggable draggable=".subfield-item-container" handle=".subfield-module-item-dragg-target-icon" tag="subfield-module"
-                    :list="item.children" group="customComGroup" :component-data="createComponentData(item)" :animation="340"
-                    ghostClass="subfield-item-dragClass" :sort="true">
-                    <subfield-item v-for="(child,index) of item.children" :key="child.uid" :parentUid="item.uid" :childModuleInfo="child"
-                      @removeModuleItem="removeModuleItem"></subfield-item>
-                  </vuedraggable>
-                </div>
+                <!-- <div class="subfield-module-draggable-list" v-for="(item,index) of subfieldModuleList" :key="item.uid"> -->
+                <vuedraggable v-for="(item,index) of subfieldModuleList" :key="item.uid" draggable=".subfield-item-container"
+                  handle=".subfield-module-item-dragg-target-icon" tag="subfield-module" :list="item.children" group="customComGroup"
+                  :component-data="createComponentData(item)" :animation="340" ghostClass="subfield-item-dragClass" :sort="true" @end="endCheck">
+                  <subfield-item v-for="(child,index) of item.children" :key="child.uid" :parentUid="item.uid" :childModuleInfo="child"
+                    @removeModuleItem="removeModuleItem"></subfield-item>
+                </vuedraggable>
+                <!-- </div> -->
               </transition-group>
             </vuedraggable>
-
             <!-- 添加分栏 -->
             <div class="add-field-bar" @click="addSubfieldModule">
               <img src="@/assets/images/consultingAgencyManagement/customForm/icon_add@2x.png" alt="">
@@ -92,7 +91,9 @@ export default {
       // 删除分栏提示
       removeSubFiledModuleDialog: false,
       // 要删除的分栏信息
-      removeSubfieldModule: {}
+      removeSubfieldModule: {},
+      // 当前选中正在编辑的组件id
+      activeUid: ""
     };
   },
   //可访问data属性
@@ -107,21 +108,24 @@ export default {
   methods: {
     // 克隆目标组件
     targetComClone(v) {
+      console.log("clone", v);
       const cloneTarget = JSON.parse(JSON.stringify(v));
       cloneTarget.uid = v4();
       return cloneTarget;
     },
-    // 字段组件结束拖动
-    fieldsOnEnd(e) {
-      console.log(e);
-      console.log(this.subfieldModuleList);
-    },
     // 字段组件点击事件
     fieldsItemClick() {
       if (!this.subfieldModuleList?.length) {
         this.$message.warning("请先添加分栏");
       }
     },
+    endCheck(e) {
+      console.log("成功", e);
+    },
+    subFieldItemActive(childItem) {
+      console.log(childItem);
+      this.activeUid = childItem.uid;
+    },
     // 添加分栏
     addSubfieldModule() {
       const _temp = JSON.parse(JSON.stringify(subfieldModuleTemplate));
@@ -148,6 +152,7 @@ export default {
         // 更新源数据标题
         const index = parentModule?.children?.findIndex(item => item.uid == itemModule.uid);
         if (index > -1) {
+          if (itemModule.uid == this.activeUid) this.activeUid = "";
           parentModule?.children?.splice(index, 1);
         }
       }
@@ -159,6 +164,7 @@ export default {
       if (findModule) {
         // 更新源数据标题
         findModule.subfieldModuleName = module.subfieldModuleName;
+        this.activeUid = "";
       }
     },
     removeDialogClose() {
@@ -197,6 +203,10 @@ export default {
       font-size: 14px;
       font-weight: 400;
 
+      .subfield-item-container {
+        background: rgba(0, 129, 255, 0.3);
+      }
+
       & > img {
         width: 16px;
         height: 16px;
@@ -322,6 +332,14 @@ export default {
         .custom-design-el-form {
           width: 100%;
           height: 100%;
+
+          /* .subfield-module-draggable-list {
+            margin-bottom: 12px;
+            width: 100%;
+            border: 1px solid #dcdfe6;
+            box-sizing: border-box;
+            border-radius: 4px;
+          } */
         }
       }
     }

dsk-operate-ui/src/views/consultingOrgManagement/components/CustomForm/components/SubfieldModule.vue

@@ -4,7 +4,8 @@
       <div class="subfield-module-title">
         <img src="@/assets/images/consultingAgencyManagement/customForm/icon_drag@2x.png" alt="" class="subfield-module-dragg-target-icon">
         <el-form-item v-if="comModuleInfo.edit" class="subfield-module-form-item" :rules="comModuleInfo.subfieldModuleNameRules" prop="">
-          <el-input v-model="comModuleInfo.subfieldModuleName" :placeholder="comModuleInfo.subfieldModulePlaceholder" clearable @keyup.enter.native.stop="editOK"></el-input>
+          <el-input v-model="comModuleInfo.subfieldModuleName" :placeholder="comModuleInfo.subfieldModulePlaceholder" clearable
+            @keyup.enter.native.stop="editOK"></el-input>
         </el-form-item>
         <span v-else>{{comModuleInfo.defaultSubfieldModuleName}}</span>
       </div>
@@ -18,9 +19,7 @@
         <img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt="" class="title-tool-delete" @click="removeModule">
       </div>
     </div>
-    <div class="subfield-module-item-list">
-      <slot></slot>
-    </div>
+    <slot></slot>
   </div>
 </template>
 <script>
@@ -79,6 +78,7 @@ export default {
   border: 1px solid #dcdfe6;
   box-sizing: border-box;
   border-radius: 4px;
+  overflow: hidden;
 
   .subfield-module-header {
     display: flex;