自定义表单整体逻辑完成，待嵌入使用组件

dsk-operate-ui/package.json

@@ -47,6 +47,7 @@
     "js-md5": "^0.7.3",
     "jsencrypt": "3.0.0-rc.1",
     "json-editor-vue": "^0.11.1",
+    "mitt": "^3.0.1",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

dsk-operate-ui/src/main.js

 import Vue from 'vue';
 import VCA from '@vue/composition-api'; //composition APi
 
+import mitt from "mitt";
+
 import Cookies from 'js-cookie';
 
 import Element from 'element-ui';
@@ -60,6 +62,7 @@ Vue.prototype.selectDictLabel = selectDictLabel;
 Vue.prototype.selectDictLabels = selectDictLabels;
 Vue.prototype.download = download;
 Vue.prototype.handleTree = handleTree;
+Vue.prototype.$mitt = mitt();
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag);

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

@@ -4,14 +4,12 @@
  * 模块模板
  */
 export const subfieldModuleTemplate = {
-  defaultSubfieldModuleName: "分栏名称",
+  defaultSubfieldModuleName: "",
   subfieldModuleName: "",
   subfieldModuleNameRules: {
     trigger: ["blur", "change"],
-    // required: true,
-    // message: "请输入分栏名称"
     validator: (rule, value, callback) => {
-      alert(1)
+      alert(1);
       if (!value) {
         return callback(new Error("请输入分栏名称"));
       }
@@ -29,6 +27,8 @@ export const defaultComOptions = [
     comType: "el-input",
     // 组件展示图标
     comShowIcon: require("@/assets/images/consultingAgencyManagement/customForm/icon_single_line_text@2x.png"),
+    // 验证通过
+    checkedAllow: false,
     // 表单属性
     formAttribute: {
       // 验证规则

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

@@ -6,6 +6,10 @@
         :rules="setFieldOptionRules.fieldName">
         <el-input v-model="comActiveFieldData.formAttribute.fieldName" placeholder="请输入字段名称" clearable></el-input>
       </el-form-item>
+      <!-- label展示名称 -->
+      <el-form-item label="字段label" class="set-field-option-item" prop="formAttribute.label" v-if="comActiveFieldData.formAttribute">
+        <el-input v-model="comActiveFieldData.formAttribute.label" placeholder="请输入字段label" clearable></el-input>
+      </el-form-item>
       <!-- placeholder文字 -->
       <el-form-item label="提示文字" class="set-field-option-item" prop="componentAttribute.placeholder" v-if="comActiveFieldData.componentAttribute">
         <el-input v-model="comActiveFieldData.componentAttribute.placeholder" placeholder="请输入提示文字" clearable></el-input>
@@ -14,10 +18,6 @@
       <el-form-item label="默认值" class="set-field-option-item" prop="componentAttribute.value" v-if="comActiveFieldData.componentAttribute">
         <el-input v-model="comActiveFieldData.componentAttribute.value" placeholder="请输入默认值" clearable></el-input>
       </el-form-item>
-      <!-- label展示名称 -->
-      <el-form-item label="字段label" class="set-field-option-item" prop="formAttribute.label" v-if="comActiveFieldData.formAttribute">
-        <el-input v-model="comActiveFieldData.formAttribute.label" placeholder="请输入字段label" clearable></el-input>
-      </el-form-item>
 
       <!-- 表单样式 -->
       <div class="set-field-option-styles-item" v-if="comActiveFieldData.formAttribute">
@@ -43,7 +43,10 @@
     </el-form>
     <!-- 确定编辑 -->
     <div class="set-field-option-footer">
-
+      <div class="set-field-option-inner" v-if="this.comActiveFieldData && this.comActiveFieldData.uid">
+        <el-button @click="cancelSet">取消</el-button>
+        <el-button type="primary" @click="formCheck">确定</el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -59,29 +62,60 @@ export default {
         componentAttribute: {},
         componentOptions: {}
       })
-    }
+    },
+    parentUid: String,
+    activeUid: String
   },
   watch: {
+    "activeFieldData.uid": {
+      handler(newValue) {
+        this.$refs["customDesignFormRef"].clearValidate();
+      }
+    },
     activeFieldData: {
       handler(newValue) {
         // 通过保存更新源数据按钮
-        this.comActiveFieldData = newValue;
+        this.comActiveFieldData = JSON.parse(JSON.stringify(newValue));
+      },
+      deep: true
+    },
+    comActiveFieldData: {
+      handler(newValue) {
+        // 通过保存更新源数据按钮
+        this.$mitt.emit("fieldOptionChange", newValue);
       },
       deep: true
     }
   },
   data() {
+    const fieldNameValidor = (rule, value, callback) => {
+      const reg = /^[a-zA-Z0-9_]+$/;
+      const numReg = /^[0-9]/;
+      if (!value) {
+        return callback(new Error("请输入字段名称"));
+      }
+      if (numReg.test(value)) {
+        return callback(new Error("字段名称不能以数字开头"));
+      }
+      if (!reg.test(value)) {
+        return callback(new Error("字段名称只能为数字、字母(大小写)、下划线组成"));
+      }
+      callback();
+    };
     return {
       // 通过保存更新源数据按钮
-      comActiveFieldData: this.activeFieldData,
+      comActiveFieldData: JSON.parse(JSON.stringify(this.activeFieldData)),
       setFieldOptionRules: {
-        fieldName: [{ required: true, trigger: ["blur", "change"], message: "请输入字段名称" }]
+        fieldName: [{ required: true, trigger: ["blur", "change"], validator: fieldNameValidor }]
       }
     };
   },
   //可访问data属性
   created() {
-
+    this.$mitt.on("subfieldItemChange", this.setOptions);
+  },
+  beforeDestroy() {
+    this.$mitt.off("subfieldItemChange");
   },
   //计算集
   computed: {
@@ -89,7 +123,22 @@ export default {
   },
   //方法集
   methods: {
-
+    setOptions(value) {
+      this.comActiveFieldData = value;
+    },
+    cancelSet() {
+      this.$emit("cancelSetOptions");
+    },
+    async formCheck() {
+      try {
+        const result = await this.$refs["customDesignFormRef"].validate();
+        if (result) {
+          this.$emit("setOptionsFinish", this.comActiveFieldData, this.parentUid);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    }
   },
 }
 </script>
@@ -101,6 +150,7 @@ export default {
   .set-field-option-form {
     width: 100%;
     height: calc(100% - 56px);
+    /* height: 100%; */
     padding: 16px;
     overflow-y: auto;
     overflow-x: hidden;
@@ -114,6 +164,17 @@ export default {
     align-items: center;
     border-top: 1px solid #eeeeee;
     box-sizing: border-box;
+    padding: 0px 12px;
+
+    .set-field-option-inner {
+      button {
+        height: 32px;
+        line-height: 32px;
+        padding: 0px;
+        width: 60px;
+        border-radius: 4px;
+      }
+    }
   }
 
   ::v-deep .set-field-option-item {

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

 <template>
-  <div class="subfield-item-container" :class="{'is-active-subfield-item' : activeUid == comChildModuleInfo.uid}" @click="activeSubfieldItem">
+  <div class="subfield-item-container" :class="{'is-active-subfield-item' : activeUid == comChildModuleInfo.uid}" :style="styles"
+    @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.formAttribute.label">
+    <el-form-item class="subfield-module-form-item" :class="{'is-required' : comChildModuleInfo.formAttribute.required}"
+      :label="comChildModuleInfo.formAttribute.label">
       <!-- 输入框类型 -->
       <el-input v-model="comChildModuleInfo.componentAttribute.value" :placeholder="comChildModuleInfo.componentAttribute.placeholder" clearable
         v-if="comChildModuleInfo.comType == 'el-input'"></el-input>
@@ -21,30 +23,47 @@ export default {
   watch: {
     childModuleInfo: {
       handler(newValue) {
-        this.comChildModuleInfo = newValue;
+        this.comChildModuleInfo = JSON.parse(JSON.stringify(newValue));
+      },
+      deep: true
+    },
+    comChildModuleInfo: {
+      handler(newValue) {
+        this.$mitt.emit("subfieldItemChange", newValue);
       },
       deep: true
     }
   },
   data() {
     return {
-      comChildModuleInfo: this.childModuleInfo,
+      comChildModuleInfo: JSON.parse(JSON.stringify(this.childModuleInfo)),
     };
   },
   //可访问data属性
   created() {
-
+    this.$mitt.on("fieldOptionChange", this.setFieldOption);
+  },
+  beforeDestroy() {
+    this.$mitt.off("fieldOptionChange");
   },
   //计算集
   computed: {
-
+    styles() {
+      return {
+        width: this.comChildModuleInfo.formAttribute ? `${this.comChildModuleInfo.formAttribute.width}%` : "100%"
+      };
+    }
   },
   //方法集
   methods: {
+    setFieldOption(value) {
+      this.comChildModuleInfo = value;
+    },
     removeModuleItem() {
       this.$emit("removeModuleItem", this.comChildModuleInfo, this.parentUid);
     },
     activeSubfieldItem() {
+      if (this.activeUid == this.comChildModuleInfo?.uid) return;
       this.$emit("activeSubfieldItem", this.comChildModuleInfo, this.parentUid);
     }
   },
@@ -60,6 +79,8 @@ export default {
   align-items: center;
   background: #dcebff;
 
+  transition: width 0.3s linear;
+
   &.is-active-subfield-item {
     border: 1px solid #0081ff;
   }
@@ -78,6 +99,7 @@ export default {
       font-size: 14px;
       font-weight: 400;
       color: rgba(35, 35, 35, 0.8);
+      white-space: nowrap;
     }
     .el-form-item__content {
       flex: 1;

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

@@ -68,7 +68,8 @@ export default {
       this.$emit("removeModule", this.comModuleInfo);
     },
     editModule() {
-      this.comModuleInfo.edit = true;
+      this.$emit("editModule", this.comModuleInfo);
+      // this.comModuleInfo.edit = true;
     },
     editCancel() {
       this.comModuleInfo.edit = false;
@@ -85,6 +86,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .subfield-module-item-container {
+  display: flex;
+  flex-wrap: wrap;
   margin-bottom: 12px;
   width: 100%;
   border: 1px solid #dcdfe6;
@@ -93,6 +96,7 @@ export default {
   overflow: hidden;
 
   .subfield-module-header {
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;