merge

dsk-operate-ui/src/utils/generator/custom-design-options.js

@@ -7,8 +7,9 @@ export const subfieldModuleTemplate = {
   defaultSubfieldModuleName: "分栏名称",
   subfieldModuleName: "",
   subfieldModuleNameRules: {
+    required: true,
     message: "请输入分栏名称",
-    trigger: ["blur", "change"]
+    trigger: "change"
   },
   subfieldModulePlaceholder: "请输入分栏标题",
   edit: false,
@@ -22,6 +23,11 @@ export const defaultComOptions = [
     comType: "el-input",
     // 组件展示图标
     comShowIcon: require("@/assets/images/consultingAgencyManagement/customForm/icon_single_line_text@2x.png"),
-
+    // 验证规则
+    rules: {},
+    // 绑定的值
+    value: "",
+    // 输入值为空提示
+    placeholder: "请输入"
   }
 ];
\ No newline at end of file

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="dragClass" :clone="targetComClone" :sort="false" :disabled="!subfieldModuleList.length"
-            @choose="chooseFieldItem" @end="fieldsOnEnd">
+            @end="fieldsOnEnd">
             <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,18 +22,18 @@
       <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" :rules="{}">
+          <el-form class="custom-design-el-form" ref="customDesignFormRef" :rules="{}" @submit.native.prevent>
 
-            <!-- 最外层dragg容器 拖动模块module . -->
+            <!-- 最外层dragg容器 拖动模块module .subfield-module-dragg-target-icon -->
             <vuedraggable :list="subfieldModuleList" group="customSubfieldmodule" class="subfield-module-container"
-              draggable=".subfield-module-dragg-target-icon">
+              draggable=".subfield-module-item-container" handle=".subfield-module-dragg-target-icon" :animation="340">
               <!-- 添加的分栏模块以及chidren模块 -->
               <transition-group name="fade" tag="div" class="subfield-module-list">
-                <vuedraggable v-for="(item,index) of subfieldModuleList" tag="subfield-module" :list="item.children" group="customSubfieldmoduleItem"
-                  :component-data="createComponentData(item)" :key="item.uid" draggable=".subfield-module-item-dragg-target-icon">
-                  <transition-group name="fade" tag="div" class="subfield-module-item-list">
-                    <subfield-item v-for="(child,index) of item.children" :key="child.uid"></subfield-item>
-                  </transition-group>
+                <vuedraggable v-for="(item,index) of subfieldModuleList" draggable=".subfield-item-container"
+                  handle=".subfield-module-item-dragg-target-icon" tag="subfield-module" :list="item.children" group="customComGroup"
+                  :component-data="createComponentData(item)" :key="item.uid" :animation="340">
+                  <subfield-item v-for="(child,index) of item.children" :key="child.uid" :parentUid="item.uid" :childModuleInfo="child"
+                    @removeModuleItem="removeModuleItem"></subfield-item>
                 </vuedraggable>
               </transition-group>
             </vuedraggable>
@@ -113,10 +113,7 @@ export default {
     // 字段组件结束拖动
     fieldsOnEnd(e) {
       console.log(e);
-    },
-    // 选中要移动的表单组件时
-    chooseFieldItem(e) {
-      console.log(e);
+      console.log(this.subfieldModuleList);
     },
     // 字段组件点击事件
     fieldsItemClick() {
@@ -143,11 +140,21 @@ export default {
     },
     editOK(module) {
 
+    },
+    removeModuleItem(itemModule, parentUid) {
+      const parentModule = this.subfieldModuleList.find(item => item.uid == parentUid);
+      if (parentModule) {
+        // 更新源数据标题
+        const index = parentModule?.children?.findIndex(item => item.uid == itemModule.uid);
+        if (index > -1) {
+          parentModule?.children?.splice(index, 1);
+        }
+      }
     },
     removeModule(module) {
       this.removeSubfieldModule = module;
       this.removeSubFiledModuleDialog = true;
-      const findModule = this.subfieldModuleList.findIndex(item => item.uid == module.uid);
+      const findModule = this.subfieldModuleList.find(item => item.uid == module.uid);
       if (findModule) {
         // 更新源数据标题
         findModule.subfieldModuleName = module.subfieldModuleName;

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

 <template>
   <div class="subfield-item-container">
-
+    <img src="@/assets/images/consultingAgencyManagement/customForm/icon_drag@2x.png" alt="" class="subfield-module-item-dragg-target-icon">
+    <el-form-item class="subfield-module-form-item" :label="comChildModuleInfo.comLabel">
+      <el-input v-model="comChildModuleInfo.value" :placeholder="comChildModuleInfo.placeholder" clearable></el-input>
+    </el-form-item>
+    <img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt="" class="remove-subfield-item-icon"
+      @click.stop="removeModuleItem">
   </div>
 </template>
 <script>
 export default {
   name: "subfieldItem",
+  props: {
+    childModuleInfo: Object,
+    parentUid: String
+  },
+  watch: {
+    childModuleInfo: {
+      handler(newValue) {
+        this.comChildModuleInfo = newValue;
+      },
+      deep: true
+    }
+  },
   data() {
     return {
-
+      comChildModuleInfo: this.childModuleInfo
     };
   },
   //可访问data属性
@@ -21,12 +38,47 @@ export default {
   },
   //方法集
   methods: {
-
+    removeModuleItem() {
+      this.$emit("removeModuleItem", this.comChildModuleInfo, this.parentUid);
+    },
   },
 }
 </script>
 <style lang="scss" scoped>
 .subfield-item-container {
+  width: 100%;
+  min-height: 56px;
+  padding: 0px 16px 0px 32px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: #dcebff;
+
+  .subfield-module-item-dragg-target-icon {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+  }
+
+  ::v-deep .subfield-module-form-item {
+    display: flex;
+
+    .el-form-item__label {
+      line-height: 32px;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(35, 35, 35, 0.8);
+    }
+    .el-form-item__content {
+      flex: 1;
+    }
+  }
 
+  .remove-subfield-item-icon {
+    width: 16px;
+    height: 16px;
+    margin-left: 12px;
+    cursor: pointer;
+  }
 }
 </style>

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

@@ -3,8 +3,8 @@
     <div class="subfield-module-header">
       <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">
-          <el-input v-model="comModuleInfo.subfieldModuleName" :placeholder="comModuleInfo.subfieldModulePlaceholder" clearable></el-input>
+        <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-form-item>
         <span v-else>{{comModuleInfo.defaultSubfieldModuleName}}</span>
       </div>