更新

src/components/VueFormMaking/components/GenerateForm.vue

@@ -107,13 +107,13 @@
                         :remote="remote"
                         :data="data"
                         :disabled="disabled"
-                        :fileCheck="fileCheck"
+                        :fileCheck="!!fileCheckList[item.model]"
                         :is-label="false"
                         :organ-list="itemOrganList"
                         :cooperation-list="cooperationList"
                         :subform-index="scope.$index"
                         :subform-model="item.model"
-                        @relationFormChange="relationFormChange"
+                        @relationFormChange="formChange"
                         @fileCheckRequired="fileCheckRequired"
                       />
                     </template>
@@ -135,7 +135,7 @@
             :data="data"
             :organ-list="itemOrganList"
             :disabled="disabled"
-            @relationFormChange="relationFormChange"
+            @relationFormChange="formChange"
             @fileCheckRequired="fileCheckRequired"
           />
         </template>
@@ -167,6 +167,8 @@ export default {
       fileCheck: false,
       templateData: [], // 临时对象
       formStatus: false,
+      formRelationList: [], // 表单中所在关联的表单
+      fileCheckList: {},
       tableData: [],
       models: {},
       originRules: {}, // 原始规则
@@ -222,20 +224,21 @@ export default {
       let tempData = this.templateData;
       let hiddenFormList = this.getSelectValueObject(tempData);
       this.formStatus = hiddenFormList;
-      let ids = this.getSelectValueObject(tempData, true);
+      // let ids = this.getSelectValueObject(tempData, true);
+      this.relationFormChange();
 
-      const values = this.models[ids.model];
-      let relationArray = [];
-      ids.options &&
-        ids.options.options.forEach((item) => {
-          if (values == item.value) {
-            let tempRelation = item.relationOptions || [];
-            relationArray.push(...tempRelation);
-          }
-        });
-      if (relationArray.length > 0) {
-        this.relationFormChange(relationArray);
-      }
+      // const values = this.models[ids.model];
+      // let relationArray = [];
+      // ids.options &&
+      //   ids.options.options.forEach((item) => {
+      //     if (values == item.value) {
+      //       let tempRelation = item.relationOptions || [];
+      //       relationArray.push(...tempRelation);
+      //     }
+      //   });
+      // if (relationArray.length > 0) {
+      //   this.relationFormChange(relationArray);
+      // }
     }
 
     this.originRules = JSON.parse(JSON.stringify(this.rules));
@@ -306,24 +309,22 @@ export default {
       let tempList = tpls || [];
       let status = false;
       let relationId = "";
+      const relationList = []; // 关联的表单
       tempList.forEach((list) => {
         if (list.type == "select" && list.options.relationStatus) {
           status = true;
           relationId = list;
-        }
-        if (list.type == "subform") {
-          let childList = list.columns || [];
-          childList.forEach((child) => {
-            let childList = child.list || [];
-            childList.forEach((c) => {
-              if (c.type == "select" && list.options.relationStatus) {
-                status = true;
-                relationId = list;
-              }
-            });
+          const relations = list.options.options || [];
+          relations.forEach((item) => {
+            if (item.relationOptions && item.relationOptions.length > 0) {
+              relationList.push(...item.relationOptions);
+            }
           });
         }
       });
+      this.formRelationList = relationList.filter(function (item, index) {
+        return relationList.indexOf(item) === index; // 因为indexOf 只能查找到第一个
+      });
       return relationStatus ? relationId : status;
     },
     // 处理是否需要校验
@@ -334,66 +335,96 @@ export default {
       // false 为显示，true 为隐藏
       let temp = value || [];
       let tempData = JSON.parse(JSON.stringify(this.templateData));
+
       tempData.forEach((item) => {
         if (this.formStatus) {
-          if (
-            item.type != "text" &&
-            item.type != "subform" &&
-            !item.options.relationStatus
-          ) {
+          //   判断表单是否在关联列表里，如果在则隐藏
+          if (this.formRelationList.includes(item.model)) {
             item.hidden = true;
+            this.fileCheckList[item.model] =
+              item.type == "subform" ? true : false;
+          }
+          //   判断是否是文本类型，一直默认显示
+          if (item.type == "text") {
+            item.hidden = false;
+          }
+        } else {
+          item.hidden = false;
+        }
+      });
+      this.templateData = tempData;
+      this.$forceUpdate();
+    },
+    async formInit(options) {
+      const _this = this;
+      options = options || [];
+      await new Promise(function (resolve) {
+        let tempData = JSON.parse(JSON.stringify(_this.templateData));
+        tempData.forEach((item) => {
+          if (_this.formStatus) {
+            if (options.includes(item.model)) {
+              item.hidden = true;
+              // 判断下拉选择框是否设置了关联
+              if (item.type == "select" && item.options.relationStatus) {
+                const selectOptions = item.options.options || [];
+                const relationOptions = [];
+                selectOptions.forEach((option) => {
+                  relationOptions.push(...option.relationOptions);
+                });
+                // 遍历子结点表单状态
+                _this.formChange([], relationOptions);
+                // return false;
+              }
+            }
           } else {
             item.hidden = false;
           }
-          if (temp.includes(item.model)) {
+          if (item.type == "subform") {
+            _this.fileCheckList[item.model] = item.hidden ? true : false;
+          }
+        });
+        _this.templateData = tempData;
+        _this.$forceUpdate();
+        resolve();
+      });
+    },
+    async formChange(value, options) {
+      // new Promise(function(resolve, reject) {)
+      console.log(value, options);
+      await this.formInit(options);
+      let tempData = JSON.parse(JSON.stringify(this.templateData));
+      tempData.forEach(async (item) => {
+        if (this.formStatus) {
+          if (value.includes(item.model)) {
             item.hidden = false;
           }
         } else {
           item.hidden = false;
         }
-        // 子表单  不支持子表单，根据不同的类型显示不同
+        // this.fileCheckList[item.model] = item.type == "subform" ? true : false;
         if (item.type == "subform") {
-          let childList = item.columns || [];
-          childList.forEach((child) => {
-            if (child.list.length > 0) {
-              child.list.forEach((c) => {
-                // c.hidden = true
-                if (this.formStatus) {
-                  if (
-                    c.type != "text" &&
-                    c.type != "subform" &&
-                    !c.options.relationStatus
-                  ) {
-                    c.hidden = true;
-                  } else {
-                    c.hidden = false;
-                  }
-                  if (temp.includes(c.model)) {
-                    c.hidden = false;
-                  }
-                } else {
-                  c.hidden = false;
-                }
-              });
-            }
-          });
-          // 重置数据
-          // let subForm = this.$refs.subform;
-          // subForm &&
-          //   subForm.forEach(item => {
-          //     item.reSetFormData();
-          //   });
-          let subFormStatus = true;
-          childList.forEach((child) => {
-            if (child.list.length > 0) {
-              child.list.forEach((c) => {
-                if (!c.hidden) {
-                  subFormStatus = false;
-                }
-              });
-            }
-          });
-          item.hidden = subFormStatus;
+          this.fileCheckList[item.model] = item.hidden ? true : false;
+        }
+      });
+      this.templateData = tempData;
+      this.$forceUpdate();
+    },
+    relationFormChange() {
+      let tempData = JSON.parse(JSON.stringify(this.templateData));
+      tempData.forEach((item) => {
+        if (this.formStatus) {
+          //   判断表单是否在关联列表里，如果在则隐藏
+          if (this.formRelationList.includes(item.model)) {
+            item.hidden = true;
+            this.fileCheckList[item.model] =
+              item.type == "subform" ? true : false;
+          }
+          //   判断是否是文本类型，一直默认显示
+          if (item.type == "text") {
+            item.hidden = false;
+          }
+        } else {
+          item.hidden = false;
         }
       });
       this.templateData = tempData;
@@ -482,7 +513,6 @@ export default {
       let res = await getOrganCooperation({ organId: value });
       this.cooperationList.push(...res.data);
     },
-    refresh() {},
   },
 };
 </script>
@@ -492,4 +522,4 @@ export default {
   padding-top: 10px;
   padding-bottom: 15px;
 }
-</style>
+</style>

src/components/VueFormMaking/components/GenerateFormItem.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form-item
-    v-if="showStatus && !widget.hidden"
+    v-if="showStatus && hidden"
     :label-width="
       isLabel === false || !widget.options.labelWidthStatus ? '0px' : 150 + 'px'
     "
@@ -34,7 +34,7 @@
           v-for="(uploadUrlItem, uploadUrlIndex) of dataModel"
           :key="uploadUrlIndex"
         >
-          <i style="color: #909399;" class="el-icon-document" />
+          <i style="color: #909399" class="el-icon-document" />
           <span>{{ uploadUrlItem.name || uploadUrlItem.url }}</span>
           <el-button
             round
@@ -81,7 +81,7 @@
               'font-size': widget.options.font_size,
               'font-family': widget.options.font_family,
               'font-weight': widget.options.font_weight,
-              color: widget.options.font_color
+              color: widget.options.font_color,
             }"
           >
             {{ widget.options.defaultValue }}
@@ -130,8 +130,8 @@
         <el-input
           v-if="
             widget.options.dataType === 'number' ||
-              widget.options.dataType === 'integer' ||
-              widget.options.dataType === 'float'
+            widget.options.dataType === 'integer' ||
+            widget.options.dataType === 'float'
           "
           v-model="dataModel"
           :type="widget.options.dataType"
@@ -185,7 +185,7 @@
               : widget.options.options"
             :key="index"
             :style="{
-              display: widget.options.inline ? 'inline-block' : 'block'
+              display: widget.options.inline ? 'inline-block' : 'block',
             }"
             :label="item.value"
           >
@@ -209,7 +209,7 @@
               : widget.options.options"
             :key="index"
             :style="{
-              display: widget.options.inline ? 'inline-block' : 'block'
+              display: widget.options.inline ? 'inline-block' : 'block',
             }"
             :label="item.value"
           >
@@ -415,7 +415,7 @@
             'font-size': widget.options.font_size,
             'font-family': widget.options.font_family,
             'font-weight': widget.options.font_weight,
-            color: widget.options.font_color
+            color: widget.options.font_color,
           }"
         >
           {{ widget.options.defaultValue }}
@@ -432,7 +432,7 @@
               'font-size': widget.options.font_size,
               'font-family': widget.options.font_family,
               'font-weight': widget.options.font_weight,
-              color: widget.options.font_color
+              color: widget.options.font_color,
             }"
           >
             {{ widget.options.defaultValue }}
@@ -461,7 +461,7 @@ export default {
   name: "GenetateFormItem",
   components: {
     FmUpload,
-    FileUpload
+    FileUpload,
   },
   /* eslint-disable */
   props: [
@@ -476,7 +476,7 @@ export default {
     "isLabel",
     "subformIndex",
     "subformModel",
-    "organList"
+    "organList",
   ],
   data() {
     return {
@@ -493,9 +493,15 @@ export default {
       tableData: [],
       cooperationList: [],
       selectLoading: true,
-      previewUrl: ""
+      previewUrl: "",
     };
   },
+  computed: {
+    hidden() {
+      console.log(this.subformModel, this.widget.hidden);
+      return this.subformModel ? true : !this.widget.hidden;
+    },
+  },
   watch: {
     dataModel: {
       deep: true,
@@ -508,19 +514,19 @@ export default {
             ] = newValue;
             this.$emit("update:models", {
               ...this.models,
-              [this.subformModel]: this.models[this.subformModel]
+              [this.subformModel]: this.models[this.subformModel],
             });
             // this.$emit('input-change', val, this.widget.model, this.subformIndex)
           } else {
             this.models[this.widget.model] = newValue;
             this.$emit("update:models", {
               ...this.models,
-              [this.widget.model]: newValue
+              [this.widget.model]: newValue,
             });
             // this.$emit('input-change', val, this.widget.model)
           }
         }
-      }
+      },
     },
     models: {
       deep: true,
@@ -536,29 +542,29 @@ export default {
         }
         delete this.models.status;
         this.handleDisplayVerifiy();
-      }
+      },
     },
     cooperationList: {
       deep: true,
       handler(val) {
         if (this.widget.type == "school" && this.preview) {
           let tempStr = null;
-          val.forEach(item => {
+          val.forEach((item) => {
             if (item.id == this.dataModel) {
               tempStr = item.name;
             }
           });
           this.dataModelStr = tempStr;
         }
-      }
-    }
+      },
+    },
   },
   created() {
     // 判断当前元素是否是分部表单（）
     // console.log(this.widget, 'widget subform')
     if (this.widget.type == "organ" && this.preview) {
       let tempStr = null;
-      this.organList.forEach(item => {
+      this.organList.forEach((item) => {
         if (item.id == this.dataModel) {
           tempStr = item.name;
         }
@@ -581,19 +587,19 @@ export default {
       this.widget.options.remote &&
       this.remote[this.widget.options.remoteFunc]
     ) {
-      this.remote[this.widget.options.remoteFunc](data => {
-        this.widget.options.remoteOptions = data.map(item => {
+      this.remote[this.widget.options.remoteFunc]((data) => {
+        this.widget.options.remoteOptions = data.map((item) => {
           return {
             value: item[this.widget.options.props.value],
             label: item[this.widget.options.props.label],
-            children: item[this.widget.options.props.children]
+            children: item[this.widget.options.props.children],
           };
         });
       });
     }
 
     if (this.widget.type === "imgupload" && this.widget.options.isQiniu) {
-      this.remote[this.widget.options.tokenFunc](data => {
+      this.remote[this.widget.options.tokenFunc]((data) => {
         this.widget.options.token = data;
       });
     }
@@ -613,7 +619,17 @@ export default {
 
     this.handleDisplayVerifiy();
   },
-  mounted() {},
+  mounted() {
+    console.log(this.widget, "12121", this.dataModel);
+    if (
+      this.preview &&
+      this.widget.type == "select" &&
+      this.widget.options.relationStatus
+    ) {
+      console.log(true, "false");
+      this.onChangeSelect();
+    }
+  },
   methods: {
     // 获取学校列表
     onDownload(item, type) {
@@ -655,12 +671,12 @@ export default {
       }
       return returnUrl;
     },
-    readWorkbookFromRemoteFile: function(url) {
+    readWorkbookFromRemoteFile: function (url) {
       var xhr = new XMLHttpRequest();
       xhr.open("get", url, true);
       xhr.responseType = "arraybuffer";
       let _this = this;
-      xhr.onload = function(e) {
+      xhr.onload = function (e) {
         var binary = "";
         console.log(xhr);
         if (xhr.status === 200) {
@@ -690,19 +706,19 @@ export default {
         // rotate: function (evt) {  //实现旋转
         //   element.rotateZ += evt.angle;
         // },
-        multipointStart: function() {
+        multipointStart: function () {
           initScale = element.scaleX;
         },
-        pinch: function(evt) {
+        pinch: function (evt) {
           //实现缩放
           element.scaleX = element.scaleY = initScale * evt.zoom;
         },
-        pressMove: function(evt) {
+        pressMove: function (evt) {
           //实现移动
           element.translateX += evt.deltaX;
           element.translateY += evt.deltaY;
           evt.preventDefault();
-        }
+        },
       });
     },
     checkFileSuffix(url) {
@@ -724,16 +740,41 @@ export default {
     onChangeSelect() {
       let relationArray = [];
       // console.log(this.widget.options.options)
+      let allArray = [];
       this.widget.options &&
-        this.widget.options.options.forEach(item => {
-          if (this.dataModel == item.value) {
-            let tempRelation = item.relationOptions || [];
-            relationArray.push(...tempRelation);
+        this.widget.options.options.forEach((item) => {
+          // 判断是否是多选
+          let tempRelation = item.relationOptions || [];
+          allArray.push(...tempRelation);
+          if (this.widget.options.multiple) {
+            if (this.dataModel.includes(item.value)) {
+              relationArray.push(...tempRelation);
+            }
+          } else {
+            if (this.dataModel == item.value) {
+              let tempRelation = item.relationOptions || [];
+              relationArray.push(...tempRelation);
+            }
           }
         });
-      if (relationArray.length > 0) {
-        this.$emit("relationFormChange", relationArray);
-      }
+      console.log(relationArray, "111", this.dataModel, this.widget.options);
+      // if (relationArray.length > 0) {
+      this.$emit("relationFormChange", relationArray, allArray);
+      // }
+
+      // this.dataModel = this.selectValue.join(",");
+      // this.showSelect = false;
+      // let relationArray = [];
+      // let allArray = [];
+      // this.options?.options?.forEach((item) => {
+      //   let tempRelation = item.relationOptions || [];
+      //   allArray.push(...tempRelation);
+      //   if (this.selectValue.includes(item.value)) {
+      //     relationArray.push(...tempRelation);
+      //   }
+      // });
+      // let uniqueArr = [...new Set(relationArray)];
+      // this.$emit("relationFormChange", uniqueArr, allArray);
     },
     fileCheckRequired(state) {
       this.$emit("fileCheckRequired", state);
@@ -747,9 +788,10 @@ export default {
       let organId = null;
       this.selectLoading = true;
       if (this.subformModel) {
-        organId = this.models[this.subformModel][this.subformIndex][
-          this.widget.options.displayRelation
-        ];
+        organId =
+          this.models[this.subformModel][this.subformIndex][
+            this.widget.options.displayRelation
+          ];
       } else {
         organId = this.models[this.widget.options.displayRelation];
       }
@@ -784,10 +826,7 @@ export default {
       // 保证第一位只能是数字，不能是点
       v = v.replace(/^\./g, "");
       // 小数只能出现1位
-      v = v
-        .replace(".", "$#$")
-        .replace(/\./g, "")
-        .replace("$#$", ".");
+      v = v.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
       // 小数点后面保留2位
       v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
       if (t == "-") {
@@ -855,8 +894,8 @@ export default {
     },
     dataFormatBr(str) {
       return str ? str.replace(/\n/gi, "<br />") : str;
-    }
-  }
+    },
+  },
 };
 </script>