调整页面响应

src/modules/basic/view/clientConfig.vue

@@ -95,7 +95,10 @@
           ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm')"
+          <el-button
+            :disabled="btnSaveDiabled"
+            type="primary"
+            @click="submitForm('ruleForm')"
             >保 存</el-button
           >
           <!-- <el-button class="btn-margin-left" @click="resetForm('ruleForm')">取 消</el-button> -->
@@ -118,6 +121,8 @@ export default {
       loginTypes: LOGIN_TYPE,
       propertyGroupId: "",
       preventCheatingConfigs: PREVENT_CHEATING_CONFIG,
+      formDataChanged: false,
+      originalRuleForm: {},
       ruleForm: {
         relatedPropertyGroupIdList: [],
         orgId: null,
@@ -196,6 +201,8 @@ export default {
                   message: "保存成功",
                   type: "success"
                 });
+                this.originalRuleForm = Object.assign({}, this.ruleForm);
+                this.formDataChanged = false;
               },
               () => {}
             );
@@ -277,6 +284,7 @@ export default {
           } else {
             this.fileList = [];
           }
+          this.originalRuleForm = Object.assign({}, this.ruleForm);
         } else {
           this.$notify({
             message: "学生客户端信息暂未初始化，请立即初始化",
@@ -386,6 +394,24 @@ export default {
         message: "当前限制选择 1 个文件,请先清空文件再试",
         type: "error"
       });
+    },
+    equalArrayIgnoreSequence(arr1, arr2) {
+      // 判断数组的长度
+      if (arr1.length !== arr2.length) {
+        return false;
+      } else {
+        let a = Object.assign([], arr1);
+        let b = Object.assign([], arr2);
+        a.sort();
+        b.sort();
+        // 循环遍历数组的值进行比较
+        for (let i = 0; i < a.length; i++) {
+          if (a[i] !== b[i]) {
+            return false;
+          }
+        }
+        return true;
+      }
     }
   },
   created() {
@@ -399,8 +425,38 @@ export default {
     console.log(this.propertyGroupId);
     this.initForm();
   },
+  watch: {
+    ruleForm: {
+      deep: true,
+      handler: function(newForm) {
+        if (Object.keys(this.originalRuleForm).length > 0) {
+          this.formDataChanged = !(
+            newForm.OE_STUDENT_SYS_NAME ==
+              this.originalRuleForm.OE_STUDENT_SYS_NAME &&
+            newForm.LOGO_FILE_URL == this.originalRuleForm.LOGO_FILE_URL &&
+            this.equalArrayIgnoreSequence(
+              newForm.loginType,
+              this.originalRuleForm.loginType
+            ) &&
+            this.equalArrayIgnoreSequence(
+              newForm.preventCheatingConfig,
+              this.originalRuleForm.preventCheatingConfig
+            ) &&
+            newForm.STUDENT_CLIENT_CONSOLE_CONFIG ==
+              this.originalRuleForm.STUDENT_CLIENT_CONSOLE_CONFIG
+          );
+        } else {
+          this.formDataChanged = false;
+        }
+      }
+    }
+  },
   computed: {
-    ...mapState({ user: state => state.user })
+    ...mapState({ user: state => state.user }),
+    btnSaveDiabled() {
+      console.log(this.formDataChanged);
+      return !this.formDataChanged;
+    }
   }
 };
 </script>