merge

dsk-operate-ui/src/api/consultingOrgManagement/index.js

@@ -90,17 +90,27 @@ export const addCustomFormDataApi = (data) => request({
 });
 
 /**
- * 更新自定义表单
+ * 获取自定义表单数据
+ * @param {*} projectKey 
+ * @returns 
+ */
+export const getCustomFormDataByProjectKeyApi = (projectKey) => request({
+  url: `/advisory/body/getCustomFormDataByProjectKey/${projectKey}`,
+  method: "get",
+  params: {}
+});
+
+/**
+ * 新增 更新 自定义表单数据
  * @param {*} data 
  * @returns 
  */
-export const updateCustomFormDataApi = (data) => request({
-  url: "/advisory/body/updateAdvisoryBodyCustomForm",
+export const updateCustomFormData = (data) => request({
+  url: "/advisory/body/editCustomFormData",
   method: "post",
   data
 });
 
-
 /**
  *  oss文件上传地址
  * @param {*} data 

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

@@ -96,9 +96,13 @@ export const defaultComOptions = [
     formAttribute: {
       // 验证规则
       rules: {
-        required: true,
-        message: "请输入选项值",
-        trigger: ["change", "blur"]
+        validator: (rules, value, callback) => {
+          const type = Object.prototype.toString.call(value);
+          if (type == "[object String]" || type == "[object Array]") {
+            callback();
+          }
+          callback(new Error("类型错误"));
+        }
       },
       // 是否必填
       required: false,

dsk-operate-ui/src/utils/index.js

@@ -954,3 +954,13 @@ export const deserializeFn = (fnStr) => {
     return null;
   }
 };
+
+/**
+ * json字符串转换为json 
+ * @param {*} jsonStr 
+ * @returns 
+ */
+export const jsonStrToObject = (jsonStr) => {
+  if (typeof jsonStr !== "string") return null;
+  return eval(`(${jsonStr})`);
+};

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

@@ -83,7 +83,7 @@
 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 { elementMessageSingleton } from "@/utils";
+import { elementMessageSingleton, jsonStrToObject } from "@/utils";
 import vuedraggable from "vuedraggable";
 import { v4 } from 'uuid';
 import { getCustomFormDetailApi, addCustomFormDataApi } from "@/api/consultingOrgManagement";
@@ -174,7 +174,6 @@ export default {
                 subfieldModuleName: { type: "string", required: true, message: "分栏名称不能为空" },
                 children: {
                   type: "array",
-                  required: true,
                   defaultField: {
                     type: "object",
                     fields: {
@@ -204,6 +203,10 @@ export default {
               const child = children[j];
               if (map.has(child.uid)) return this.$message.error(`第${index + 1}个分栏下的，第${j + 1}个表单元素字段名称重复`);
               map.set(child.uid, child);
+              // 不允许默认值
+              if (!child.formAttribute.allowDefaultValue) {
+                child.componentAttribute.value instanceof Array ? child.componentAttribute.value = [] : child.componentAttribute.value = "";
+              }
             }
           }
         }
@@ -226,6 +229,9 @@ export default {
         };
         if (this.formTemplate?.templateId) params["templateId"] = this.formTemplate.templateId;
         const result = await addCustomFormDataApi(params);
+        if (result.code == 200) {
+          this.$message.success(`${this.formTemplate?.templateId ? "更新" : "创建"}模板成功`);
+        }
       } catch (error) {
         console.log(error);
       }
@@ -268,7 +274,7 @@ export default {
     },
     parseTemplate(templateJson) {
       try {
-        const data = eval(`(${templateJson})`);
+        const data = jsonStrToObject(templateJson);
         if (data) {
           this.$set(this.subfieldModuleForm, "subfieldModuleList", data.subfieldModuleList);
         }
@@ -283,6 +289,7 @@ export default {
           // 有模板数据 进行回显
           this.formTemplate = result;
           this.parseTemplate(result.jsonData);
+          this.olduSbfieldModuleList = cloneDeep(this.subfieldModuleForm.subfieldModuleList);
           return;
         }
         // 模块初始化
@@ -373,9 +380,10 @@ export default {
     currentActiveByItemId(current) {
       const _temp = cloneDeep(current);
       _temp.checkedAllow = false;
-      this.activeUid = current.uid;
+      // 顺序不能变
       this.activeItemData = _temp;
       this.activeItemDataOrigin = _temp;
+      this.activeUid = current.uid;
       this.activeModuleId = this.subfieldModuleForm.subfieldModuleList.find(item => item?.children?.findIndex(child => child.uid == current.uid) > -1).uid;
       console.log(this.activeModuleId, "模块uid");
       console.log(this.activeUid, "表单元素uid");
@@ -426,10 +434,10 @@ export default {
       if (!flag) return;
       const _temp = cloneDeep(itemModule);
       _temp.checkedAllow = false;
-      this.activeUid = _temp.uid;
-      this.activeModuleId = parentUid;
       this.activeItemData = _temp;
       this.activeItemDataOrigin = _temp;
+      this.activeUid = _temp.uid;
+      this.activeModuleId = parentUid;
     },
     // 删除模块表单输入框
     removeModuleItem(itemModule, parentUid) {

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

@@ -45,7 +45,7 @@
       <template v-if="comActiveFieldData.comType == 'select'">
         <el-form-item label="类型" class="set-field-option-item set-field-option-radio" prop="formAttribute.isMultiple"
           v-if="comActiveFieldData.formAttribute">
-          <el-radio-group v-model="comActiveFieldData.formAttribute.isMultiple">
+          <el-radio-group v-model="comActiveFieldData.formAttribute.isMultiple" @input="modeChange">
             <el-radio :label="false">单选</el-radio>
             <el-radio :label="true">多选</el-radio>
           </el-radio-group>
@@ -63,7 +63,7 @@
               <transition-group name="fade" tag="div" class="select-option-list">
                 <div class="select-option-list-item" v-for="(item,index) of comActiveFieldData.formAttribute.selectOptions" :key="item.id">
                   <img src="@/assets/images/consultingAgencyManagement/customForm/icon_drag@2x.png" alt="" class="select-option-list-item-drag-icon">
-                  <el-form-item label="" :prop="`formAttribute.selectOptions.${index}.value`" :rules="comActiveFieldData.formAttribute.rules"
+                  <el-form-item label="" :prop="`formAttribute.selectOptions.${index}.value`" :rules="setFieldOptionRules.selectOptionsRules"
                     :show-message="false">
                     <el-input v-model="comActiveFieldData.formAttribute.selectOptions[index].value" placeholder="请输入" clearable></el-input>
                   </el-form-item>
@@ -180,7 +180,12 @@ export default {
       comActiveFieldData: cloneDeep(this.activeFieldData),
       setFieldOptionRules: {
         fieldName: [{ required: true, trigger: ["blur", "change"], validator: fieldNameValidor }],
-        limit: [{ required: true, type: "number", trigger: ["blur", "change"], validator: limitValidor }]
+        limit: [{ required: true, type: "number", trigger: ["blur", "change"], validator: limitValidor }],
+        selectOptionsRules: {
+          required: true,
+          message: "请输入选项值",
+          trigger: ["change", "blur"]
+        },
       },
       placeholderContain: ["text", "textarea", "select", "date", "phone", "email"],
       limitContain: ["photo", "file"]
@@ -237,6 +242,13 @@ export default {
       }
       this.$refs["customDesignFormRef"].clearValidate("formAttribute.limit");
       this.$set(this.comActiveFieldData.formAttribute, "limit", -1);
+    },
+    modeChange(value) {
+      if (value) {
+        this.$set(this.comActiveFieldData.componentAttribute, "value", []);
+        return;
+      }
+      this.$set(this.comActiveFieldData.componentAttribute, "value", "");
     }
   },
 }
@@ -494,6 +506,19 @@ export default {
           .el-form-item {
             margin-bottom: 0px;
             margin-left: 8px;
+
+            &.is-error {
+              .el-form-item__content {
+                .el-input {
+                  .el-input__inner {
+                    &:focus {
+                      border-color: #ff4949;
+                    }
+                  }
+                }
+              }
+            }
+
             .el-form-item__content {
               line-height: 32px;
 

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

@@ -69,7 +69,7 @@ export default {
     },
     comChildModuleInfo: {
       handler(newValue) {
-        console.log(this.comActiveUid !== this.comChildModuleInfo?.uid, "是否不是更改的当前元素");
+        // console.log(this.comActiveUid !== this.comChildModuleInfo?.uid, "是否不是更改的当前元素");
         if (this.comActiveUid !== this.comChildModuleInfo?.uid) return;
         this.checkValidator(newValue);
         this.$mitt.emit("subfieldItemChange", newValue);
@@ -79,9 +79,9 @@ export default {
     activeUid: {
       handler(newValue, oldValue) {
         // 当前命中高亮的元素id  不跟当前元素uid相同 移除事件订阅 否者 添加订阅
-        this.addSubscription(newValue);
         this.comActiveUid = newValue;
         this.comOldActiveUid = oldValue;
+        this.addSubscription(newValue);
       },
       // 保证首次触发 判断是否订阅
       immediate: true
@@ -111,7 +111,7 @@ export default {
   },
   //可访问data属性
   created() {
-
+    this.$mitt.on("fieldOptionChange", this.setFieldOption);
   },
   beforeDestroy() {
     this.$mitt.off("fieldOptionChange");
@@ -144,13 +144,18 @@ export default {
           this.$set(this.comChildModuleInfo.formAttribute, "isError", false);
         }
       } catch (error) {
+        const { errors, fields } = error;
+        console.log(errors, fields);
         this.$set(this.comChildModuleInfo.formAttribute, "isError", true);
       }
     },
     // 根据命中的id 来添加发布订阅
     addSubscription(newValue) {
-      if (newValue === this.comChildModuleInfo.uid) return this.$mitt.on("fieldOptionChange", this.setFieldOption);
-      this.$mitt.off("fieldOptionChange");
+      // if (newValue === this.comChildModuleInfo.uid) {
+      //   this.$mitt.on("fieldOptionChange", this.setFieldOption);
+      //   return;
+      // };
+      // this.$mitt.off("fieldOptionChange");
     },
     classCreate(comType) {
       const classParams = {
@@ -160,10 +165,10 @@ export default {
       return classParams;
     },
     setFieldOption(value) {
+      console.log("触发：fieldOptionChange");
       // value.uid 等同于 comActiveUid （原因 ： 能修改的元素一定是当前comActiveUid命中的元素，取value.uid 为了修改数据的严谨）
       // 要修改的uid元素不是当前元素的id 不进行修改
       // console.log(`${this.comChildModuleInfo?.uid} 当前组件元素uid`, `${value.uid} 当前需要触发修改数据的uid`);
-
       if (value.uid !== this.comChildModuleInfo?.uid) return;
       this.comChildModuleInfo = value;
     },

dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/consultingAgency.vue

@@ -3,7 +3,7 @@
     <el-form :model="comProjectDetailInfo" :rules="rules" :show-message="false" class="basic-engineering-information-inner"
       ref="comProjectDetailForm">
       <!-- 基础信息 -->
-      <div class="project-basic-information">
+      <div class="project-basic-information project-detault-module">
         <div class="info-module-title"><span>基础信息</span></div>
         <table>
           <colgroup>
@@ -41,7 +41,7 @@
         </table>
       </div>
       <!-- 项目联系人 -->
-      <div class="project-contact">
+      <div class="project-contact project-detault-module">
         <div class="info-module-title"><span>项目联系人</span></div>
         <table>
           <colgroup>
@@ -84,7 +84,7 @@
         </table>
       </div>
       <!-- 项目结算信息 -->
-      <div class="project-settlement-information">
+      <div class="project-settlement-information project-detault-module">
         <div class="info-module-title"><span>项目结算信息</span></div>
         <table>
           <colgroup>
@@ -133,12 +133,27 @@
           </tr>
         </table>
       </div>
+
+      <!-- 自定义表单部分 -->
+      <div class="custom-design-form-template" v-if="form.subfieldModuleList.length">
+        <div class="custom-design-form-module" v-for="(item,index) of form.subfieldModuleList" :key="item.uid">
+          <div class="info-module-title"><span>{{item.subfieldModuleName}}</span></div>
+          <div class="custom-module-content">
+            <!-- 生成行 -->
+            <!-- <div class="custom-module-item" v-for="(child,j) of item.children" :key="child.uid" :style="{'width' : `${child.formAttribute.width}%`}">
+              <div class="custom-item-key">{{child.formAttribute.label}}</div>
+            </div> -->
+          </div>
+        </div>
+      </div>
+
     </el-form>
   </div>
 </template>
 <script>
-import { searchConsultingApi, getCustomFormDetailApi } from "@/api/consultingOrgManagement";
-import { elementMessageSingleton } from "@/utils";
+import { searchConsultingApi, getCustomFormDetailApi, getCustomFormDataByProjectKeyApi } from "@/api/consultingOrgManagement";
+import { elementMessageSingleton, jsonStrToObject } from "@/utils";
+import { deepClone } from "lodash-es";
 export default {
   name: "consultingAgency",
   props: {
@@ -194,7 +209,12 @@ export default {
       },
       tableKeyWidth: 0,
       searchTimer: null,
-      loading: false
+      loading: false,
+      formTemplate: {},
+      formTemplateData: {},
+      form: {
+        subfieldModuleList: []
+      }
     };
   },
   //可访问data属性
@@ -202,6 +222,7 @@ export default {
     this.setInitData(this.comProjectDetailInfo, JSON.parse(JSON.stringify(this.projectDetailInfo)), "comProjectDetailInfo");
     this.setInitData(this.oldComProjectDetailInfo, JSON.parse(JSON.stringify(this.projectDetailInfo)), "oldComProjectDetailInfo");
     this.setTableKeyWidth();
+    this.formTemplateInit();
   },
   //计算集
   computed: {
@@ -224,6 +245,55 @@ export default {
       }
       return "";
     },
+    async formTemplateInit() {
+      try {
+        const _formTemplate = await this.getCustomFormDetail();
+        const _formTemplateData = await this.getCustomFormDataByProjectKey(this.projectKey);
+        await this.customFormRender(_formTemplate, _formTemplateData);
+      } catch (error) {
+
+      }
+    },
+    async customFormRender(formTemplate, formData) {
+      try {
+        // 缺失模板不渲染
+        if (!formTemplate || !formTemplate.jsonData) return;
+        // 有表单数据的情况
+        if (formData) {
+          return;
+        }
+        // 无表单数据只渲染模板
+        const template = jsonStrToObject(formTemplate.jsonData);
+        if (template) {
+          console.log(template);
+          this.$set(this.form, "subfieldModuleList", template.subfieldModuleList);
+        }
+      } catch (error) {
+        this.$message.error(`解析模板失败,${error.message}`);
+        console.log(error);
+      }
+    },
+    async getCustomFormDataByProjectKey(projectKey) {
+      try {
+        const result = await getCustomFormDataByProjectKeyApi(projectKey);
+        if (result.code == 200 && result.data) {
+          return result.data;
+        }
+        return null;
+      } catch (error) {
+
+      }
+    },
+    async getCustomFormDetail() {
+      try {
+        const result = await getCustomFormDetailApi();
+        if (result.code == 200) {
+          return result.data ? result.data : {};
+        }
+      } catch (error) {
+
+      }
+    },
     async setTableKeyWidth() {
       try {
         await this.$nextTick();
@@ -375,142 +445,144 @@ export default {
 
   ::v-deep .basic-engineering-information-inner {
     width: 100%;
-    .info-module-title {
-      line-height: 24px;
-      color: #232323;
-      font-weight: bold;
-      font-size: 16px;
-      margin-bottom: 16px;
-      display: flex;
-      align-items: center;
-      & > span {
-        display: inline-block;
-        position: relative;
-        padding-left: 8px;
-        box-sizing: border-box;
-        &::before {
-          content: "";
-          position: absolute;
-          left: 0px;
-          top: 50%;
-          transform: translateY(-50%);
-          background: rgba(35, 35, 35, 0.8);
-          width: 2px;
-          height: 14px;
+    .project-detault-module,
+    .custom-design-form-module {
+      .info-module-title {
+        line-height: 24px;
+        color: #232323;
+        font-weight: bold;
+        font-size: 16px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        & > span {
+          display: inline-block;
+          position: relative;
+          padding-left: 8px;
+          box-sizing: border-box;
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(35, 35, 35, 0.8);
+            width: 2px;
+            height: 14px;
+          }
         }
       }
-    }
-    table {
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-      &,
-      th,
-      td {
-        border: 1px solid #e6eaf1;
-        box-sizing: border-box;
-      }
-
-      td {
-        padding: 9px 12px;
-        line-height: 22px;
-        color: #232323;
-        font-size: 12px;
-        position: relative;
+      .el-form-item {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+        margin-bottom: 0px;
+        z-index: 9;
 
-        .normal-value {
-          vertical-align: middle;
-          line-height: 22px;
+        &.is-error {
+          .el-form-item__content {
+            .el-input {
+              .el-input__inner {
+                border-color: #ff4949;
+              }
+            }
+          }
         }
 
-        .el-form-item {
-          position: absolute;
-          left: 0px;
-          top: 0px;
-          width: 100%;
+        .el-form-item__content {
           height: 100%;
-          margin-bottom: 0px;
-          z-index: 9;
+          font-size: 12px;
+          line-height: unset;
 
-          &.is-error {
-            .el-form-item__content {
-              .el-input {
-                .el-input__inner {
-                  border-color: #ff4949;
-                }
-              }
-            }
+          .el-input {
+            height: 100%;
+            font-size: 12px;
           }
 
-          .el-form-item__content {
-            height: 100%;
+          .el-input__inner {
+            height: 40px;
+            line-height: 40px;
+            border-radius: unset;
+            border-color: transparent;
+            color: #232323;
             font-size: 12px;
-            line-height: unset;
+            font-weight: 400;
+            padding-left: 12px;
+            outline: unset;
+            box-sizing: border-box;
 
-            .el-input {
-              height: 100%;
-              font-size: 12px;
+            &:focus {
+              border: 1px solid #0081ff;
             }
+          }
 
-            .el-input__inner {
-              height: 40px;
-              line-height: 40px;
-              border-radius: unset;
-              border-color: transparent;
-              color: #232323;
-              font-size: 12px;
-              font-weight: 400;
-              padding-left: 12px;
-              outline: unset;
-              box-sizing: border-box;
+          .el-date-editor {
+            width: 100%;
 
-              &:focus {
-                border: 1px solid #0081ff;
-              }
+            .el-input__prefix {
+              display: none;
             }
+          }
 
-            .el-date-editor {
-              width: 100%;
+          .el-radio-group {
+            display: flex;
+            height: 100%;
+            align-items: center;
+            padding-left: 12px;
+            box-sizing: border-box;
 
-              .el-input__prefix {
-                display: none;
-              }
+            .el-radio__input.is-checked .el-radio__inner {
+              border-color: #0081ff;
+              background: #0081ff;
             }
 
-            .el-radio-group {
-              display: flex;
-              height: 100%;
-              align-items: center;
-              padding-left: 12px;
-              box-sizing: border-box;
-
-              .el-radio__input.is-checked .el-radio__inner {
-                border-color: #0081ff;
-                background: #0081ff;
-              }
-
-              .el-radio__input.is-checked + .el-radio__label {
-                color: #0081ff;
-              }
+            .el-radio__input.is-checked + .el-radio__label {
+              color: #0081ff;
+            }
 
-              .el-radio__inner:hover {
-                border-color: #0081ff;
-              }
+            .el-radio__inner:hover {
+              border-color: #0081ff;
             }
           }
         }
       }
+      table {
+        width: 100%;
+        border-spacing: 0;
+        border-collapse: collapse;
+        &,
+        th,
+        td {
+          border: 1px solid #e6eaf1;
+          box-sizing: border-box;
+        }
 
-      .table-key {
-        background: #f0f3fa;
-        color: rgba(35, 35, 35, 0.8);
-        width: 140px;
-        &.lot {
-          height: 62px;
+        td {
+          padding: 9px 12px;
+          line-height: 22px;
+          color: #232323;
+          font-size: 12px;
+          position: relative;
+
+          .normal-value {
+            vertical-align: middle;
+            line-height: 22px;
+          }
+        }
+
+        .table-key {
+          background: #f0f3fa;
+          color: rgba(35, 35, 35, 0.8);
+          width: 140px;
+          &.lot {
+            height: 62px;
+          }
+        }
+        .data-td {
+          width: calc(100% - 140px);
         }
-      }
-      .data-td {
-        width: calc(100% - 140px);
       }
     }
 
@@ -518,6 +590,38 @@ export default {
     .project-settlement-information {
       margin-top: 24px;
     }
+
+    .custom-design-form-template {
+      width: 100%;
+      .custom-design-form-module {
+        margin-top: 24px;
+
+        .custom-module-content {
+          display: table;
+          width: 100%;
+          border-spacing: 0;
+          border-collapse: collapse;
+          border: 1px solid #e6eaf1;
+
+          .custom-module-item {
+            display: table-cell;
+            border: 1px solid #e6eaf1;
+            box-sizing: border-box;
+            .custom-item-key {
+              width: 140px;
+              min-height: 40px;
+              font-size: 12px;
+              background: #f0f3fa;
+              color: rgba(35, 35, 35, 0.8);
+              padding: 9px 12px;
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>