优化选卡界面渲染

frontend/src/components/table/cell.vue

@@ -132,7 +132,6 @@ export default {
     } else {
       this.renderType = "normal";
     }
-    console.log(6);
   }
 };
 </script>

frontend/src/components/table/table.vue

@@ -1131,8 +1131,6 @@ export default {
           scrollData = [].concat(table3, table1, table2);
       }
 
-      console.log(5);
-
       return scrollData;
     }
   },
@@ -1141,7 +1139,6 @@ export default {
     this.showSlotHeader = this.$slots.header !== undefined;
     this.showSlotFooter = this.$slots.footer !== undefined;
     this.rebuildData = this.makeDataWithSortAndFilter();
-    console.log(2);
   },
   mounted() {
     this.handleResize();
@@ -1156,7 +1153,6 @@ export default {
         this.handleResize();
       }
     });
-    console.log(3);
   },
   beforeDestroy() {
     off(window, "resize", this.handleResize);
@@ -1176,7 +1172,6 @@ export default {
         setTimeout(() => {
           this.cloneData = deepCopy(this.data);
         }, 0);
-        console.log(1);
       },
       deep: true
     },
@@ -1192,7 +1187,6 @@ export default {
         this.rightFixedColumnRows = this.makeColumnRows("right", colsWithId);
         this.rebuildData = this.makeDataWithSortAndFilter();
         this.handleResize();
-        console.log(4);
       },
       deep: true
     },

frontend/src/store/module/order.js

@@ -14,6 +14,8 @@ const state = {
   cards: [], // RD订单卡列表
   relations: [],
   selected: [],
+  counts: 0, // 选择的卡数量
+  selectedMapped: [], // 选择的卡索引
   orderParams: {},
   cardParams: {},
   real_companies: [],
@@ -32,28 +34,10 @@ const getters = {
   relationObj: state => state.relationObj,
   orders: state => state.real_orders,
   cards: state => state.cards,
-  order_group: (state) => {
-    let order_group = {};
-
-    for (const index in state.order_group) {
-      if (state.order_group.hasOwnProperty(index)) {
-        const element = state.order_group[index];
-
-        order_group[index] = element.map(el => {
-          return state.cards.find(e => {
-            return e._rowIndex === el;
-          });
-        });
-      }
-    }
-
-    return order_group;
-  },
-  selected: (state) => {
-    return state.selected.map(el => {
-      return state.cards.find(e => { return e._rowIndex === el; });
-    });
-  },
+  selected: state => state.selected,
+  selectedMapped: state => state.selectedMapped,
+  counts: state => state.counts,
+  order_group: state => state.order_group,
   total: (state) => {
     if (!state.cards.length) {
       return 0;
@@ -63,24 +47,15 @@ const getters = {
       return acc + cur.counts;
     }, 0);
   },
-  counts: (state, getters) => {
-    if (!getters.selected.length) {
-      return 0;
-    }
-
-    return getters.selected.reduce((acc, cur) => {
-      return acc + cur.counts;
-    }, 0);
-  },
   getFilterUsedCards: () => (cards) => {
     return cards.filter(item => item.virtual_order_id === 0);
   },
-  getSelectedByOrderId: (state, getters) => (order_id) => {
+  getSelectedByOrderId: (state) => (order_id) => {
     if (typeof order_id !== 'object') {
       order_id = [order_id];
     }
 
-    return getters.selected.filter(item => {
+    return state.selected.filter(item => {
       return order_id.includes(item.order_id);
     });
   },
@@ -128,6 +103,12 @@ const mutations = {
   },
   SET_SELECTED(state, data) {
     state.selected = data;
+  },
+  SET_SELECTED_COUNTS(state, value) {
+    state.counts = value;
+  },
+  SET_SELECTED_MAPPED(state, data) {
+    state.selectedMapped = data;
   }
 };
 
@@ -141,6 +122,8 @@ const actions = {
     context.commit('SET_REAL_ORDERS', []);
     context.commit('SET_CARDS', []);
     context.commit('SET_SELECTED', []);
+    context.commit('SET_SELECTED_MAPPED', []);
+    context.commit('SET_SELECTED_COUNTS', 0);
   },
   getRelations(context, params) {
     return new Promise((resolve, reject) => {
@@ -221,7 +204,6 @@ const actions = {
             row._rowIndex = row.sim + row.order_id;
           });
           context.commit('PUSH_CARDS', data);
-          console.log('cards', data);
           resolve(data);
         } else {
           reject(res);
@@ -254,15 +236,23 @@ const actions = {
   pushSelected(context, array) {
     let selected = JSON.parse(JSON.stringify(context.getters.selected));
     selected = remove_selected(selected, array);
-
     array.map(el => { selected.push(el); });
-
-    context.commit('SET_SELECTED', selected.map(el => { return el._rowIndex; }));
+    let mapped = selected.map(el => { return el._rowIndex; });
+    context.commit('SET_SELECTED', selected);
+    context.commit('SET_SELECTED_MAPPED', mapped);
+    context.commit('SET_SELECTED_COUNTS', selected.reduce((acc, cur) => {
+      return acc + cur.counts;
+    }, 0));
   },
   removeSelected(context, array) {
     let selected = JSON.parse(JSON.stringify(context.getters.selected));
     selected = remove_selected(selected, array);
-    context.commit('SET_SELECTED', selected.map(el => { return el._rowIndex; }));
+    let mapped = selected.map(el => { return el._rowIndex; });
+    context.commit('SET_SELECTED', selected);
+    context.commit('SET_SELECTED_MAPPED', mapped);
+    context.commit('SET_SELECTED_COUNTS', selected.reduce((acc, cur) => {
+      return acc + cur.counts;
+    }, 0));
   },
   removeSelectedByOrderId(context, order_id) {
     if (typeof order_id !== 'object') {

frontend/src/views/virtual/orders/js/cards.js

@@ -24,15 +24,7 @@ export default {
     }
   },
   computed: {
-    relationObj: {
-      get() {
-        return this.$store.state.order.relationObj;
-      },
-      set(value) {
-        this.$store.commit('SET_RELATION_OBJ', value);
-      }
-    },
-    ...mapGetters(['orders', 'cards', 'selected', 'counts', 'getFilterUsedCards', 'getSelectedByOrderId', 'relations', 'real_companies', 'real_packages'])
+    ...mapGetters(['orders', 'cards', 'selected', 'selectedMapped', 'counts', 'getFilterUsedCards', 'getSelectedByOrderId', 'relations', 'relationObj', 'real_companies', 'real_packages'])
   },
   data() {
     return {
@@ -74,9 +66,7 @@ export default {
               return acc + cur.counts;
             }, 0);
 
-            let counts = this.selected.reduce((acc, cur) => {
-              return acc + cur.counts;
-            }, 0);
+            let counts = this.counts;
 
             value = !!counts;
             indeterminate = total !== counts;
@@ -212,9 +202,9 @@ export default {
             let value = false;
             let indeterminate = false;
 
-            value = !!this.selected.length;
+            value = !!this.selectedMapped.length;
 
-            indeterminate = this.selected.length && this.selected.length !== this.showCards.length;
+            indeterminate = this.selectedMapped.length && this.selectedMapped.length !== this.showCards.length;
             return h("Checkbox", {
               props: {
                 indeterminate: value && indeterminate,
@@ -233,7 +223,7 @@ export default {
             });
           },
           render: (h, context) => {
-            let value = this.selected.findIndex(el => { return el._rowIndex === context.row._rowIndex; }) !== -1;
+            let value = this.selectedMapped.indexOf(context.row._rowIndex) !== -1;
             return h("Checkbox", {
               props: {
                 value: value,
@@ -248,12 +238,6 @@ export default {
             });
           }
         },
-        {
-          title: "序号",
-          key: "_index",
-          width: 135,
-          sortable: true
-        },
         {
           title: "SIM",
           key: "sim",
@@ -403,6 +387,8 @@ export default {
     },
     clearSelect() {
       this.$store.commit('SET_SELECTED', []);
+      this.$store.commit('SET_SELECTED_MAPPED', []);
+      this.$store.commit('SET_SELECTED_COUNTS', 0);
     },
     cannel() {
       this.clear();
@@ -486,14 +472,14 @@ export default {
       if (this.type !== 0) {
         let group = {};
 
-        for (let index = 0; index < this.selected.length; index++) {
+        for (let index = 0; index < this.selectedMapped.length; index++) {
           const element = this.selected[index];
           let key = element.company_id + '_' + element.package_id;
 
           if (group.hasOwnProperty(key)) {
-            group[key].push(element._rowIndex);
+            group[key].push(element);
           } else {
-            group[key] = [element._rowIndex];
+            group[key] = [element];
           }
         }
 
@@ -509,11 +495,7 @@ export default {
         return this.$Message.error('订单错误');
       }
 
-      let counts = this.selected.reduce((acc, cur) => {
-        return acc + cur.counts;
-      }, 0);
-
-      if (this.orderObj.counts !== counts) {
+      if (this.orderObj.counts !== this.counts) {
         return this.$Message.error('选择的卡数量不正确');
       }
 

frontend/src/views/virtual/orders/js/edit.js

@@ -53,23 +53,7 @@ export default {
     };
   },
   computed: {
-    relationObj: {
-      get() {
-        return this.$store.state.order.relationObj;
-      },
-      set(value) {
-        this.$store.commit('SET_RELATION_OBJ', value);
-      }
-    },
-    order_group: {
-      get() {
-        return this.$store.getters.order_group;
-      },
-      set(value) {
-        this.$store.commit('SET_ORDER_GROUP', value);
-      }
-    },
-    ...mapGetters(['selected', 'counts', 'orders', 'relations'])
+    ...mapGetters(['selected', 'selectedMapped', 'counts', 'orders', 'order_group', 'relations', 'relationObj'])
   },
   watch: {
     show(bool) {
@@ -91,7 +75,7 @@ export default {
           }
         }
 
-        if (this.selected.length && !Object.keys(this.order_group).length) {
+        if (this.selectedMapped.length && !Object.keys(this.order_group).length) {
           this.setParamsByReal(this.selected);
         }
 
@@ -103,7 +87,7 @@ export default {
     },
     counts(value) {
       if (value) {
-        if (this.selected.length && !Object.keys(this.order_group).length) {
+        if (this.selectedMapped.length && !Object.keys(this.order_group).length) {
           this.setParamsByReal(this.selected);
         }
 
@@ -171,7 +155,7 @@ export default {
         } else {
           this.post();
         }
-      } else if (this.selected.length) {
+      } else if (this.selectedMapped.length) {
         this.params.selected = this.selected.map(el => {
           return { order_id: el.order_id, counts: el.counts, sim: el.sim };
         });
@@ -366,18 +350,7 @@ export default {
         let mapped = JSON.parse(JSON.stringify(this.order_group));
         this.$store.dispatch('removeSelected', mapped[this.groupIndex]);
         delete mapped[this.groupIndex];
-
-        let group = {};
-
-        for (const k in mapped) {
-          const element = mapped[k];
-
-          group[k] = element.map(el => {
-            return el._rowIndex;
-          });
-        }
-
-        this.$store.commit('SET_ORDER_GROUP', group);
+        this.$store.commit('SET_ORDER_GROUP', mapped);
       }
 
       this.$Message.success('操作成功');

public/css/chunk-3e2248ef.ced8e72d.css

@@ -0,0 +1 @@
+[data-v-2c5314c6] .ivu-table-cell{word-break:keep-all}

resources/views/index.blade.php

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=\favicon.ico><script src=\config.js></script><title></title><link href=/css/chunk-2bc30b38.e8c4cfa7.css rel=prefetch><link href=/css/chunk-cc3e3910.48b8d490.css rel=prefetch><link href=/js/chunk-00ae0766.3874cd10.js rel=prefetch><link href=/js/chunk-07a274ec.c3ad5dec.js rel=prefetch><link href=/js/chunk-2bc30b38.23fc3fe0.js rel=prefetch><link href=/js/chunk-cc3e3910.6c368787.js rel=prefetch><link href=/css/app.d71a8195.css rel=preload as=style><link href=/css/chunk-vendors.5803e894.css rel=preload as=style><link href=/js/app.ef71b9d2.js rel=preload as=script><link href=/js/chunk-vendors.ed6443e8.js rel=preload as=script><link href=/css/chunk-vendors.5803e894.css rel=stylesheet><link href=/css/app.d71a8195.css rel=stylesheet></head><body><noscript><strong>很抱歉，如果没有启用JavaScript，程序不能正常工作，若要继续使用请启用它。</strong></noscript><div id=app></div><script src=/js/chunk-vendors.ed6443e8.js></script><script src=/js/app.ef71b9d2.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=\favicon.ico><script src=\config.js></script><title></title><link href=/css/chunk-3e2248ef.ced8e72d.css rel=prefetch><link href=/css/chunk-cc3e3910.48b8d490.css rel=prefetch><link href=/js/chunk-00ae0766.3874cd10.js rel=prefetch><link href=/js/chunk-07a274ec.c3ad5dec.js rel=prefetch><link href=/js/chunk-3e2248ef.c312da93.js rel=prefetch><link href=/js/chunk-cc3e3910.2afb37d0.js rel=prefetch><link href=/css/app.d71a8195.css rel=preload as=style><link href=/css/chunk-vendors.3c3b2e85.css rel=preload as=style><link href=/js/app.62107448.js rel=preload as=script><link href=/js/chunk-vendors.ed6443e8.js rel=preload as=script><link href=/css/chunk-vendors.3c3b2e85.css rel=stylesheet><link href=/css/app.d71a8195.css rel=stylesheet></head><body><noscript><strong>很抱歉，如果没有启用JavaScript，程序不能正常工作，若要继续使用请启用它。</strong></noscript><div id=app></div><script src=/js/chunk-vendors.ed6443e8.js></script><script src=/js/app.62107448.js></script></body></html>