使用Map代替原来的数组, 原来会出现错乱问题

frontend/src/views/virtual/properties/js/index.js

@@ -9,14 +9,14 @@ export default {
   },
   data() {
     return {
-      properties: [],
+      properties: new Map(),
       showData: [],
       params: {
         company_id: '',
         package_id: ''
       },
       only: ['company_id', 'package_id', 'product', 'vehicle', 'commercial_vehicle', 'company', 'platform', 'customer', 'province', 'agent'],
-      updates: [],
+      updates: new Map(),
       settingsShow: false,
       settingsData: {},
       agentsData: {},
@@ -270,10 +270,12 @@ export default {
         },
         on: {
           input: (value) => {
-            let index = (this.page.page - 1) * this.page.limit + context.index;
-            this.properties[index][key] = value;
+            let index = this.getIndex(context.row);
+            let property = this.properties.get(index);
+            property[key] = value;
+            this.properties.set(index, property);
             this.changePage(this.page.page);
-            this.updates[index] = this.properties[index];
+            this.updates.set(index, this.properties.get(index));
           }
         }
       }, options);
@@ -284,11 +286,17 @@ export default {
      * @return {[type]}      [description]
      */
     index(page = 1) {
-      if (!this.properties.length) {
+      if (!this.properties.size) {
         this.isShowLoading(true);
         API.index().then(res => {
           if (res.code === 0) {
-            this.properties = res.data;
+            let properties = new Map();
+
+            res.data.forEach(element => {
+              properties.set(this.getIndex(element), element);
+            });
+
+            this.properties = properties;
             this.changePage(page);
             this.complete();
           }
@@ -301,7 +309,9 @@ export default {
     complete() {
       let companies = {};
 
-      this.properties.map(function (item) {
+      let properties = Array.from(this.properties.values());
+
+      properties.forEach((item) => {
         companies[item.company_id] = item.company_name;
       });
 
@@ -315,7 +325,7 @@ export default {
 
       let packages = {};
 
-      this.properties.map(function (item) {
+      properties.forEach((item) => {
         packages[item.package_id] = item.package_name;
       });
 
@@ -348,7 +358,7 @@ export default {
     changePage(page) {
       this.page.page = page;
 
-      let properties = JSON.parse(JSON.stringify(this.properties));
+      let properties = Array.from(this.properties.values());
 
       if (this.params.company_id !== '' && this.params.company_id !== undefined) {
         properties = properties.filter(el => { return el.company_id == this.params.company_id; });
@@ -392,7 +402,7 @@ export default {
       this.settingsData = values;
     },
     ok() {
-      if (!this.updates.length) {
+      if (!this.updates.size) {
         this.$Message.warning('数据未修改');
         this.editModel = false;
         return;
@@ -402,8 +412,7 @@ export default {
 
       let updates = [];
 
-      for (let index = 0; index < this.updates.length; index++) {
-        const element = this.updates[index];
+      this.updates.forEach((element) => {
         let obj = {};
         for (const key in element) {
           if (this.only.indexOf(key) !== -1) {
@@ -411,7 +420,9 @@ export default {
           }
         }
         updates.push(obj);
-      }
+      });
+
+      console.log("updates", updates);
 
       API.store({ data: updates }).then(res => {
         if (res.code === 0) {
@@ -422,16 +433,16 @@ export default {
       });
     },
     handleProvinceSuccess(data) {
-      let index = (this.page.page - 1) * this.page.limit + data._index;
-      this.properties[index] = data;
+      let index = this.getIndex(data);
+      this.properties.set(index, data);
       this.changePage(this.page.page);
-      this.updates[index] = this.properties[index];
+      this.updates.set(index, this.properties.get(index));
     },
     handleAgentSuccess(data) {
-      let index = (this.page.page - 1) * this.page.limit + data._index;
-      this.properties[index] = data;
+      let index = this.getIndex(data);
+      this.properties.set(index, data);
       this.changePage(this.page.page);
-      this.updates[index] = this.properties[index];
+      this.updates.set(index, this.properties.get(index));
     },
     exportExcel() {
       let params = {};
@@ -474,6 +485,9 @@ export default {
       });
 
       return false;
+    },
+    getIndex(row) {
+      return row.company_id + '_' + row.package_id;
     }
   }
 };