自定义表单 右侧字段设置同步

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

@@ -18,16 +18,27 @@ export const subfieldModuleTemplate = {
 
 export const defaultComOptions = [
   {
-    comLabel: "单行文本",
     // 组件类型
     comType: "el-input",
     // 组件展示图标
     comShowIcon: require("@/assets/images/consultingAgencyManagement/customForm/icon_single_line_text@2x.png"),
-    // 验证规则
-    rules: {},
-    // 绑定的值
-    value: "",
-    // 输入值为空提示
-    placeholder: "请输入"
+    // 表单属性
+    formAttribute: {
+      // 验证规则
+      rules: {},
+      // 是否必填
+      required: false,
+      // 字段名称
+      fieldName: "",
+      // 展示label
+      label: "单行文本",
+    },
+    // 组件属性
+    componentAttribute: {
+      // 绑定的值
+      value: "",
+      // 输入值为空提示
+      placeholder: "请输入"
+    }
   }
 ];
\ No newline at end of file

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

@@ -7,12 +7,12 @@
         <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="endCheck">
+            :disabled="!subfieldModuleList.length">
             <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">
                 <img :src="item.comShowIcon" alt="">
-                <span>{{item.comLabel}}</span>
+                <span>{{item.formAttribute.label}}</span>
               </div>
             </transition-group>
           </vuedraggable>
@@ -32,9 +32,9 @@
                 <!-- <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>
+                  :component-data="createComponentData(item)" :animation="340" ghostClass="subfield-item-dragClass" :sort="true" @change="dataChange">
+                  <subfield-item v-for="(child,index) of item.children" :key="child.uid" :activeUid="activeUid" :parentUid="item.uid"
+                    :childModuleInfo="child" @removeModuleItem="removeModuleItem" @activeSubfieldItem="activeSubfieldItem"></subfield-item>
                 </vuedraggable>
                 <!-- </div> -->
               </transition-group>
@@ -51,7 +51,7 @@
       <div class="custom-form-design-field-options">
         <div class="design-header field-options-header">字段设置</div>
         <div class="design-main field-options-main">
-
+          <set-field-option :activeFieldData="activeItemData"></set-field-option>
         </div>
       </div>
     </div>
@@ -74,13 +74,15 @@
 <script>
 import { defaultComOptions, subfieldModuleTemplate } from "@/utils/generator/custom-design-options";
 import SubfieldItem from "@/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem";
+import SetFieldOption from "@/views/consultingOrgManagement/components/CustomForm/components/SetFieldOption";
 import vuedraggable from "vuedraggable";
 import { v4 } from 'uuid';
 export default {
   name: "customFormDesign",
   components: {
     vuedraggable,
-    SubfieldItem
+    SubfieldItem,
+    SetFieldOption
   },
   data() {
     return {
@@ -93,7 +95,11 @@ export default {
       // 要删除的分栏信息
       removeSubfieldModule: {},
       // 当前选中正在编辑的组件id
-      activeUid: ""
+      activeUid: "",
+      // 编辑的组件数据
+      activeItemData: {},
+      // active moduleId 当前命中的模块id
+      activeModuleId: ""
     };
   },
   //可访问data属性
@@ -119,12 +125,20 @@ export default {
         this.$message.warning("请先添加分栏");
       }
     },
-    endCheck(e) {
-      console.log("成功", e);
+    dataChange({ added, removed, moved }) {
+      if (added) {
+        this.currentActiveByItemId(added.element);
+      }
+      if (moved) {
+        this.currentActiveByItemId(moved.element);
+      }
     },
-    subFieldItemActive(childItem) {
-      console.log(childItem);
-      this.activeUid = childItem.uid;
+    // 命中变化的表单元素
+    currentActiveByItemId(current) {
+      this.activeUid = current.uid;
+      this.activeItemData = current;
+      this.activeModuleId = this.subfieldModuleList.find(item => item?.children?.findIndex(child => child.uid == current.uid) > -1).uid;
+      console.log(this.activeModuleId);
     },
     // 添加分栏
     addSubfieldModule() {
@@ -145,38 +159,49 @@ export default {
     },
     editOK(module) {
 
+    },
+    activeSubfieldItem(itemModule, parentUid) {
+      this.activeUid = itemModule.uid;
+      this.activeModuleId = parentUid;
+      this.activeItemData = itemModule;
     },
     removeModuleItem(itemModule, parentUid) {
+      if (itemModule.uid == this.activeUid) this.activeUid = "";
       const parentModule = this.subfieldModuleList.find(item => item.uid == parentUid);
       if (parentModule) {
-        // 更新源数据标题
         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);
         }
       }
     },
+    // 删除分栏
     removeModule(module) {
       this.removeSubfieldModule = module;
       this.removeSubFiledModuleDialog = true;
-      const findModule = this.subfieldModuleList.find(item => item.uid == module.uid);
-      if (findModule) {
-        // 更新源数据标题
-        findModule.subfieldModuleName = module.subfieldModuleName;
-        this.activeUid = "";
-      }
-    },
-    removeDialogClose() {
-      this.removeSubfieldModule = {};
     },
+    // 确定删除分栏
     removeOk() {
+      if (this.activeModuleId == this.removeSubfieldModule.uid) {
+        this.activeModuleId = "";
+      }
+      // 查看当前命中的表单元素 是否存在于当前分栏下
+      if (this.removeSubfieldModule?.children?.length) {
+        const index = this.removeSubfieldModule.children.findIndex(item => item.uid == this.activeUid);
+        if (index > -1) {
+          this.activeUid = "";
+          this.activeItemData = {};
+        }
+      }
       const index = this.subfieldModuleList.findIndex(item => item.uid == this.removeSubfieldModule.uid);
       if (index > -1) {
         this.subfieldModuleList.splice(index, 1);
       }
       this.removeSubFiledModuleDialog = false;
-    }
+    },
+    removeDialogClose() {
+      this.removeSubfieldModule = {};
+    },
   },
 }
 </script>

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

+<template>
+  <div class="set-field-option-container">
+
+  </div>
+</template>
+<script>
+export default {
+  name: "setFieldOption",
+  props: {
+    activeFieldData: Object
+  },
+  watch: {
+    activeFieldData: {
+      handler(newValue) {
+        this.comActiveFieldData = newValue;
+      }
+    }
+  },
+  data() {
+    return {
+      comActiveFieldData: this.activeFieldData
+    };
+  },
+  //可访问data属性
+  created() {
+
+  },
+  //计算集
+  computed: {
+
+  },
+  //方法集
+  methods: {
+
+  },
+}
+</script>
+<style lang="scss" scoped>
+.set-field-option-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

 <template>
-  <div class="subfield-item-container">
+  <div class="subfield-item-container" :class="{'is-active-subfield-item' : activeUid == comChildModuleInfo.uid}" @click="activeSubfieldItem">
     <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 class="subfield-module-form-item" :label="comChildModuleInfo.formAttribute.label">
+      <component :is="comChildModuleInfo.comType" v-model="comChildModuleInfo.componentAttribute.value"
+        :placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable></component>
     </el-form-item>
     <img src="@/assets/images/consultingAgencyManagement/customForm/icon_delete@2x.png" alt="" class="remove-subfield-item-icon"
       @click.stop="removeModuleItem">
@@ -13,7 +14,8 @@ export default {
   name: "subfieldItem",
   props: {
     childModuleInfo: Object,
-    parentUid: String
+    parentUid: String,
+    activeUid: String
   },
   watch: {
     childModuleInfo: {
@@ -25,7 +27,7 @@ export default {
   },
   data() {
     return {
-      comChildModuleInfo: this.childModuleInfo
+      comChildModuleInfo: this.childModuleInfo,
     };
   },
   //可访问data属性
@@ -41,6 +43,9 @@ export default {
     removeModuleItem() {
       this.$emit("removeModuleItem", this.comChildModuleInfo, this.parentUid);
     },
+    activeSubfieldItem() {
+      this.$emit("activeSubfieldItem", this.comChildModuleInfo, this.parentUid);
+    }
   },
 }
 </script>
@@ -54,6 +59,10 @@ export default {
   align-items: center;
   background: #dcebff;
 
+  &.is-active-subfield-item {
+    border: 1px solid #0081ff;
+  }
+
   .subfield-module-item-dragg-target-icon {
     width: 14px;
     height: 14px;