修改自动计算为数据监听

src/views/land/handLand/newLand.vue

@@ -158,7 +158,6 @@
               <el-form-item label="商业面积：">
                 <el-input
                   oninput="value=value.replace(/[^\d^\.]+/g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"
-                  @change="calculate()"
                   v-model="editForm.bizSpace"
                 ></el-input>
               </el-form-item>
@@ -167,7 +166,6 @@
               <el-form-item label="商务面积：">
                 <el-input
                   oninput="value=value.replace(/[^\d^\.]+/g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"
-                  @change="calculate()"
                   v-model="editForm.commerceSpace"
                 ></el-input>
               </el-form-item>
@@ -182,12 +180,8 @@
             </el-col>
           </el-row>
           <el-row>
-            <el-col :span="8">
-              <!--                                <el-form-item label="配建-不计容：">-->
-              <!--                                    <el-input v-model="editForm.allocationNotCapacity"></el-input>-->
-              <!--                                </el-form-item>-->
-            </el-col>
-            <el-col :span="8"> </el-col>
+            <el-col :span="8"></el-col>
+            <el-col :span="8"></el-col>
             <el-col :span="8" style="text-align: right">
               <el-button v-show="!readOnly" @click="save" type="primary"
                 >保存</el-button
@@ -1864,6 +1858,27 @@ export default {
       this.queryFileList(row);
     }
   },
+  watch: {
+    editForm: {
+      handler(newValue, oldValue) {
+        if (
+          this.editForm.landTransferSquare &&
+          this.editForm.landTransferSquare != 0
+        ) {
+          this.editForm.landTransferMu =
+            (this.editForm.landTransferSquare / 2000) * 3;
+        }
+        if (this.editForm.totalConsArea && this.editForm.totalConsArea != 0) {
+          this.editForm.bizCommerceRate = (
+            ((this.editForm.bizSpace + this.editForm.commerceSpace) /
+              this.editForm.totalConsArea) *
+            100
+          ).toFixed(2);
+        }
+      },
+      deep: true,
+    },
+  },
   methods: {
     setTagName(val) {
       let txt = "";
@@ -1873,15 +1888,6 @@ export default {
       txt = "";
       return txt;
     },
-    calculate() {
-      if (this.editForm.totalConsArea && this.editForm.totalConsArea != 0) {
-        this.editForm.bizCommerceRate = (
-          ((this.editForm.bizSpace + this.editForm.commerceSpace) /
-            this.editForm.totalConsArea) *
-          100
-        ).toFixed(2);
-      }
-    },
     getList(page, params) {
       this.tableLoading = true;
       fetchHandLandList(
@@ -2563,7 +2569,7 @@ export default {
               query: {
                 readOnly: "false",
                 isEditOr: "true",
-                data: res.data.data.landListedId
+                data: res.data.data.landListedId,
               },
             });
           }

src/views/land/noneHandLand/newLand.vue

@@ -207,7 +207,6 @@
               <el-form-item label="商业面积：">
                 <el-input
                   oninput="value=value.replace(/[^\d^\.]+/g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"
-                  @change="calculate()"
                   v-model="editForm.bizSpace"
                 ></el-input>
               </el-form-item>
@@ -216,7 +215,6 @@
               <el-form-item label="商务面积：">
                 <el-input
                   oninput="value=value.replace(/[^\d^\.]+/g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"
-                  @change="calculate()"
                   v-model="editForm.commerceSpace"
                 ></el-input>
               </el-form-item>
@@ -1691,6 +1689,38 @@ export default {
       this.queryFileList(row);
     }
   },
+  watch: {
+    editForm: {
+      handler(newValue, oldValue) {
+        //土地出让面积（亩）
+        if (
+          this.editForm.landTransferSquare &&
+          this.editForm.landTransferSquare != 0
+        ) {
+          this.editForm.landTransferMu =
+            (this.editForm.landTransferSquare / 2000) * 3;
+        }
+        //容积率
+        if (
+          this.editForm.landTransferSquare &&
+          this.editForm.landTransferSquare != 0
+        ) {
+          this.editForm.plotRatio = (
+            this.editForm.totalConsArea / this.editForm.landTransferSquare
+          ).toFixed(2);
+        }
+        //商务面积占比（%）
+        if (this.editForm.totalConsArea && this.editForm.totalConsArea != 0) {
+          this.editForm.bizCommerceRate = (
+            ((this.editForm.bizSpace + this.editForm.commerceSpace) /
+              this.editForm.totalConsArea) *
+            100
+          ).toFixed(2);
+        }
+      },
+      deep: true,
+    },
+  },
   methods: {
     conductenterList(landListedId) {
       let data = {
@@ -1745,15 +1775,6 @@ export default {
       txt = "";
       return txt;
     },
-    calculate() {
-      if (this.editForm.totalConsArea && this.editForm.totalConsArea != 0) {
-        this.editForm.bizCommerceRate = (
-          ((this.editForm.bizSpace + this.editForm.commerceSpace) /
-            this.editForm.totalConsArea) *
-          100
-        ).toFixed(2);
-      }
-    },
     getList(page, params) {
       this.tableLoading = true;
       console.debug(params);