选卡优化

app/Domains/Real/Http/Controllers/OrderController.php

@@ -31,6 +31,21 @@ class OrderController extends Controller
 
         $orders = $this->orderService->index($conditions);
 
+        $orders->transform(function($item){
+            return $item->only([
+                'id',
+                'sn',
+                'company_name',
+                'package_name',
+                'carrier_operator_name',
+                'pay_channel_name',
+                'counts',
+                'shipments',
+                'total_price',
+                'order_at',
+            ]);
+        });
+
         return res($orders, '订单列表', 201);
     }
 

app/Domains/Real/Repositories/Concerns/OrderCardConcern.php

@@ -25,7 +25,8 @@ trait OrderCardConcern
             }
 
             if (isset($conditions['order_id'])) {
-                $query->where('order_id', $conditions['order_id']);
+                $conditions['order_id'] = array_wrap($conditions['order_id']);
+                $query->whereIn('order_id', $conditions['order_id']);
             }
 
             if (isset($conditions['sim'])) {

app/Domains/Real/Services/OrderService.php

@@ -39,11 +39,14 @@ class OrderService extends Service
 
         $carrierOperators = app(Dicts::class)->get('carrier_operator');
 
-        $res = $this->orderRepository->withCount(['cards' => function ($query) {
+        $res = $this->orderRepository->withConditions($conditions)->applyConditions()->paginate($limit);
-            $query->where('virtual_order_id', '<>', 0);
-        }])->withConditions($conditions)->applyConditions()->paginate($limit);
 
-        $res->map(function ($item) use ($carrierOperators) {
+        if (!$res->isEmpty()) {
+            $cards = $this->orderCardPartitionRepository->selectRaw('order_id,SUM(counts) as counts')
+                ->withConditions(['order_id', $res->pluck('id')->toArray()])->where('virtual_order_id', '<>', 0)->groupBy('order_id')->get()->pluck('counts', 'order_id')->toArray();
+        }
+
+        $res->map(function ($item) use ($carrierOperators, $cards) {
             $item->pay_channel_name = CommonService::namePayChannel($item->pay_channel);
             $item->company_name = CommonService::company($item->company_id)['name'];
             $item->package = CommonService::package($item->package_id);
@@ -51,6 +54,7 @@ class OrderService extends Service
             $item->carrier_operator_name = $carrierOperators[$item->package['carrier_operator']];
             $item->unit_price = sprintf('%.02f', $item->unit_price/100);
             $item->total_price = sprintf('%.02f', $item->total_price/100);
+            $item->shipments = $cards[$item->id] ?? 0;
         });
 
         return $res;
@@ -64,7 +68,7 @@ class OrderService extends Service
      */
     public function cards(array $conditions = [])
     {
-        $cards = $this->orderCardPartitionRepository->select(['sim', 'virtual_order_id', 'counts'])
+        $cards = $this->orderCardPartitionRepository->select(['sim', 'order_id', 'virtual_order_id', 'counts'])
             ->withConditions($conditions)->applyConditions()->get();
 
         $tmpCards = $cards->groupBy('virtual_order_id');

app/Domains/Virtual/Services/OrderService.php

@@ -230,7 +230,6 @@ class OrderService extends Service
                 $this->orderRepository->forgetCached();
                 $this->orderCardPartitionRepository->forgetCached();
                 app(RealOrderCardPartitionRepository::class)->forgetCached();
-                app(RealOrderRepository::class)->forgetCached();
 
                 CreateRealVirtualRelation::dispatch($node->id, array_pluck($attributes['selected'], 'id'));
             } catch (\Exception $e) {

frontend/src/components/table/table-body.vue

@@ -64,6 +64,10 @@ export default {
     fixed: {
       type: [Boolean, String],
       default: false
+    },
+    scrollToRowIndex: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -98,6 +102,9 @@ export default {
       handler() {
         this.setTopPlace();
       }
+    },
+    scrollToRowIndex: {
+      handler() {}
     }
   },
   computed: {
@@ -112,7 +119,7 @@ export default {
       return height[this.$parent.size]; // 行高
     },
     showRowNum() {
-      return parseInt(this.bodyHeight / this.rowHeight) + 15; // 一次显示多少行
+      return parseInt(this.bodyHeight / this.rowHeight) + 5; // 一次显示多少行
     },
     moduleHeight() {
       return this.showRowNum * this.rowHeight; // 容器高度

frontend/src/components/table/table.vue

@@ -84,6 +84,7 @@
             :columns-width="columnsWidth"
             :obj-data="objData"
             :scrollTop="scrollTop"
+            :scrollToRowIndex="scrollToRowIndex"
           ></table-body>
         </div>
       </div>
@@ -249,7 +250,8 @@ export default {
       showHorizontalScrollBar: false,
       headerWidth: 0,
       headerHeight: 0,
-      scrollTop: 0
+      scrollTop: 0,
+      scrollToRowIndex: -1 // 当前跳转到的行号，用于做闪烁提示
     };
   },
   computed: {
@@ -392,6 +394,10 @@ export default {
     },
     isRightFixed() {
       return this.columns.some(col => col.fixed && col.fixed === "right");
+    },
+    rowHeight() {
+      let height = { small: 40, large: 60, default: 48 };
+      return height[this.size]; // 行高
     }
   },
   methods: {
@@ -1009,6 +1015,21 @@ export default {
       const data = Csv(columns, datas, params, noHeader);
       if (params.callback) params.callback(data);
       else ExportCsv.download(params.filename, data);
+    },
+    scrollToRow(index) {
+      index = parseInt(index);
+      if (isNaN(index) || index >= this.data.length || index < 0) return;
+
+      let scrollTop = index * this.rowHeight;
+
+      this.$refs.body.scrollTop = scrollTop;
+
+      this.scrollToRowIndex = index;
+
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.scrollToRowIndex = -1;
+      }, 1800);
     }
   },
   created() {

frontend/src/mixins/index.js

@@ -1,6 +1,4 @@
-import {
+import { mapGetters } from 'vuex';
-  mapGetters
-} from 'vuex';
 import { objectDot } from 'service/util';
 import default_head from 'images/head.png';
 import { getToken } from 'service/auth';
@@ -97,17 +95,7 @@ export default {
       }
 
       // search项以外的字段
-      for (let k in init_options) {
+      Object.assign(data, this.parseParams(init_options));
-        if (k == 'time') {
-          if (init_options.time && init_options.time[0] && init_options.time[1]) {
-            Object.assign(data, this.parseTime(init_options.time));
-          }
-        } else {
-          if (init_options[k] !== '' && init_options[k] !== undefined && init_options[k] !== null) {
-            data[k] = init_options[k];
-          }
-        }
-      }
 
       // search 项
       search_data = objectDot(search_data);
@@ -121,7 +109,22 @@ export default {
       }
       return data;
     },
-
+    // 格式化参数
+    parseParams(params) {
+      let obj = {};
+      for (let k in params) {
+        if (k == 'time') {
+          if (params.time && params.time[0] && params.time[1]) {
+            Object.assign(obj, this.parseTime(params.time));
+          }
+        } else {
+          if (params[k] !== '' && params[k] !== undefined && params[k] !== null) {
+            obj[k] = params[k];
+          }
+        }
+      }
+      return obj;
+    },
     // 搜索的时间字段转化为starttime, endtime
     parseTime(time) {
       return {
@@ -162,24 +165,24 @@ export default {
        * @return {[type]}           [description]
        */
       return h('p', {
-        style: {
+          style: {
-          fontSize: '14px',
+            fontSize: '14px',
-          marginTop: '15px'
+            marginTop: '15px'
-        }
+          }
-      },
+        },
       [
         h('span', data.message + ' 请点击下载：'),
         h('span', {
-          domProps: {
+            domProps: {
-            innerHTML: '导入失败.xls'
+              innerHTML: '导入失败.xls'
-          },
+            },
-          class: ['primary-color', 'c-p'],
+            class: ['primary-color', 'c-p'],
-          on: {
+            on: {
-            click: () => {
+              click: () => {
-              this.downloadExcel(tHeader, this.formatJson(filterVal, data.result), '导入失败');
+                this.downloadExcel(tHeader, this.formatJson(filterVal, data.result), '导入失败');
+              }
             }
-          }
+          })
-        })
       ]);
     },
     exportExcelInfo(h, data) {
@@ -191,28 +194,28 @@ export default {
        */
 
       return h('p', {
-        style: {
+          style: {
-          fontSize: '14px',
+            fontSize: '14px',
-          marginTop: '15px'
+            marginTop: '15px'
-        }
+          }
-      },
+        },
       [
         h('span', data.message + ' 请点击下载：'),
         h('span', {
-          domProps: {
+            domProps: {
-            innerHTML: '导入失败.xls'
+              innerHTML: '导入失败.xls'
-          },
+            },
-          class: ['primary-color', 'c-p'],
+            class: ['primary-color', 'c-p'],
-          on: {
+            on: {
-            click: () => {
+              click: () => {
-              if (data.url !== '') {
+                if (data.url !== '') {
-                window.open(data.url);
+                  window.open(data.url);
-              } else {
+                } else {
-                this.$Message.info('无数据可下载');
+                  this.$Message.info('无数据可下载');
+                }
               }
             }
-          }
+          })
-        })
       ]
       );
     },

frontend/src/store/module/order.js

@@ -1,13 +1,42 @@
 import * as API from 'api/real/orders';
 
 const state = {
-  real_orders: {},
+  real_orders: [],
   cards: [],
   selected: [],
   orderParams: {},
   cardParams: {}
 };
 
+const getters = {
+  orders: state => state.real_orders,
+  cards: state => state.cards,
+  selected: state => state.selected,
+  counts: (state) => {
+    if (!state.selected.length) {
+      return 0;
+    }
+
+    return state.selected.reduce((acc, cur) => {
+      return acc + cur.counts;
+    }, 0);
+  },
+  getFilterUsedCards: () => (cards) => {
+    return cards.filter(item => item.virtual_order_id === 0);
+  },
+  getRealOrderById: (state) => (id) => {
+    return state.real_orders.find(item => item.id === id);
+  },
+  getSelectedByOrderId: (state) => (order_id) => {
+    return state.selected.filter(item => item.order_id === order_id);
+  },
+  getCardByOderIdAndSim: (state) => (order_id, sim) => {
+    return state.selected.find(item => {
+      return item.order_id === order_id && item.sim === sim;
+    });
+  }
+};
+
 const mutations = {
   SET_CARD_PARAMS(state, obj) {
     state.cardParams = obj;
@@ -21,69 +50,37 @@ const mutations = {
   SET_CARDS(state, data) {
     state.cards = data;
   },
-  SET_REAL_ORDER_SELECTED(state, data) {
+  PUSH_CARDS(state, cards) {
+    state.cards = state.cards.concat(cards.filter(item => {
+      return state.cards.findIndex(v => {
+        return v.sim === item.sim && v.order_id === item.order_id;
+      }) === -1;
+    }));
+  },
+  SET_SELECTED(state, data) {
     state.selected = data;
   },
-  PUSH_REAL_ORDER_SELECTED(state, { order_id, cards }) {
+  PUSH_SELECTED(state, { order_id, sim, counts }) {
     let index = state.selected.findIndex(item => {
-      return item.id === order_id;
+      return item.order_id === order_id && item.sim === sim;
     });
 
     if (index !== -1) {
       state.selected.splice(index, 1);
     }
 
-    let obj = { id: order_id, cards };
+    let obj = { order_id, sim, counts };
     state.selected.push(obj);
   },
-  REMOVE_REAL_ORDER_SELECTED(state, order_id) {
+  REMOVE_SELECTED(state, { order_id, sim }) {
-    let index = state.selected.findIndex(item => {
+    let index = 0;
-      return item.id === order_id;
+    while (index !== -1) {
-    });
+      index = state.selected.findIndex(item => {
-
+        return sim ? (item.order_id === order_id && item.sim === sim) : (item.order_id === order_id);
-    if (index !== -1) {
-      state.selected.splice(index, 1);
-    }
-  },
-  PUSH_CARD_SELECTED(state, { order_id, sim, counts }) {
-    let select = state.selected.find(item => {
-      return item.id === order_id;
-    });
-
-    if (select) {
-      let index = select.cards.findIndex(item => {
-        return item.sim === sim;
       });
 
       if (index !== -1) {
-        select.cards.splice(index, 1);
+        state.selected.splice(index, 1);
-      }
-
-      select.cards.push({ sim, counts });
-    } else {
-      state.selected.push({ id: order_id, cards: [{ sim, counts }] });
-    }
-  },
-  REMOVE_CARD_SELECTED(state, { order_id, sim }) {
-    let select = state.selected.find(item => {
-      return item.id === order_id;
-    });
-
-    if (select) {
-      let index = select.cards.findIndex(item => {
-        return item.sim === sim;
-      });
-
-      if (index !== -1) {
-        select.cards.splice(index, 1);
-      }
-
-      if (!select.cards.length) {
-        let i = state.selected.findIndex(item => {
-          return item.id === order_id;
-        });
-
-        state.selected.splice(i, 1);
       }
     }
   }
@@ -91,6 +88,7 @@ const mutations = {
 
 const actions = {
   getOrders(context, params) {
+    params.limit = 0;
     return new Promise((resolve, reject) => {
       if (JSON.stringify(context.state.orderParams) == JSON.stringify(params)) {
         return resolve(context.state.real_orders);
@@ -110,23 +108,44 @@ const actions = {
       });
     });
   },
-  getCards(context, params) {
+  getCards(context, { order_id, type }) {
     return new Promise((resolve, reject) => {
-      if (JSON.stringify(context.state.cardParams) == JSON.stringify(params)) {
+      if (typeof order_id !== 'object') {
-        return resolve(context.state.cards);
+        order_id = [order_id];
       }
 
-      context.commit('SET_CARD_PARAMS', params);
+      let array = [];
 
-      API.cards(params).then(res => {
+      for (let index = 0; index < order_id.length; index++) {
+        const id = order_id[index];
+
+        let i = context.state.cards.findIndex(item => {
+          return item.order_id === id;
+        });
+
+        if (i === -1 && array.indexOf(id) === -1) {
+          array.push(id);
+        }
+      }
+
+      let cards = [];
+
+      if (!array.length) {
+        cards = context.state.cards.filter(v => {
+          return order_id.indexOf(v.order_id) !== -1;
+        });
+
+        return resolve(cards);
+      }
+
+      API.cards({ order_id: array, type }).then(res => {
         if (res.code === 0) {
-          let data = res.data.map(item => {
+          context.commit('PUSH_CARDS', res.data);
-            item.order_id = params.order_id;
-            return item;
-          });
 
-          context.commit('SET_CARDS', data);
+          let cards = context.state.cards.filter(v => {
-          resolve(data);
+            return order_id.indexOf(v.order_id) !== -1;
+          });
+          resolve(cards);
         } else {
           reject(res);
         }
@@ -139,6 +158,7 @@ const actions = {
 
 export default {
   state,
+  getters,
   mutations,
   actions
 };

frontend/src/views/artisan/real-sync/js/edit.js

@@ -122,7 +122,6 @@ export default {
 
         clearInterval(interval);
       }).catch((err) => {
-        console.log(err);
         this.circle.content = '同步失败';
         this.circle.percent = this.steps[this.current - 1]['max'];
         this.status = 'error';

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

@@ -12,7 +12,7 @@
       <ul class="handle-wraper bd-b">
         <li class="f-l">
           <div class="text-exp">
-            <b v-if="counts">已选{{counts}}张</b>
+            <Button type="text" v-if="counts" @click="sort">已选{{counts}}张</Button>
             <b v-else>全部信息</b>
           </div>
         </li>
@@ -93,7 +93,7 @@
 
           <li class="f-r">
             <div class="handle-item">
-              <Button @click="index(1)" ghost type="primary">立即搜索</Button>
+              <Button @click="index()" ghost type="primary">立即搜索</Button>
             </div>
             <div class="handle-item">
               <Button @click="resetSearch" ghost type="warning">重置搜索</Button>
@@ -111,7 +111,7 @@
             size="small"
             :loading="orderLoading"
             :columns="orderColumns"
-            :data="orders ? orders.data : []"
+            :data="showOrders"
             @on-row-dblclick="handleOrderRowDblclick"
             stripe
             border
@@ -119,15 +119,17 @@
           ></Table>
           <ul class="common-tips-wraper umar-t5">
             <li class="t-title">提示</li>
-            <li class="t-content">双击可以查看订单卡数据</li>
+            <li class="t-content">双击可以查看订单卡详情数据并标亮</li>
           </ul>
 
           <div class="page-turn-wrap" v-if="orders">
             <Page
-              :current="Number(orders.current_page)"
+              :current="Number(page.page)"
-              :page-size="Number(orders.per_page)"
+              :page-size="Number(page.limit)"
-              :total="Number(orders.total)"
+              :page-size-opts="[10, 20, 100, Infinity]"
-              @on-change="index"
+              :total="Number(page.total)"
+              @on-change="changePage"
+              @on-page-size-change="changeLimit"
               show-elevator
               show-total
             ></Page>
@@ -139,7 +141,8 @@
             size="small"
             :loading="cardLoading"
             :columns="cardColumns"
-            :data="cards"
+            :data="cards ? cards : []"
+            :row-class-name="rowClassName"
             stripe
             border
             :height="449"
@@ -167,4 +170,8 @@
 >>> .ivu-table {
   font-size: 12px;
 }
+
+>>> .ivu-table .bg-yellow td {
+  background-color: yellow !important;
+}
 </style>

frontend/src/views/virtual/orders/index.vue

@@ -130,7 +130,7 @@
     </div>
 
     <div class="page-list-wrap">
-      <Table :columns="table_titles" :data="list_data ? list_data.data : []" stripe border></Table>
+      <Table :columns="table_titles" :data="list_data ? list_data.data : []" stripe></Table>
     </div>
 
     <div class="page-turn-wrap" v-if="list_data">

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

@@ -1,3 +1,5 @@
+import { mapGetters } from 'vuex';
+
 export default {
   components: {
     BTable: resolve => require(['components/table'], resolve)
@@ -16,6 +18,9 @@ export default {
       default: 0
     }
   },
+  computed: {
+    ...mapGetters(['orders', 'cards', 'selected', 'counts', 'getFilterUsedCards', 'getRealOrderById', 'getSelectedByOrderId', 'getCardByOderIdAndSim'])
+  },
   data() {
     return {
       my_show: false,
@@ -26,6 +31,11 @@ export default {
       search: {
         show: true
       },
+      page: {
+        total: 0,
+        limit: 10,
+        page: 1
+      },
       params: {
         company_id: '',
         package_id: '',
@@ -37,28 +47,24 @@ export default {
         used: '',
         sim: ''
       },
+      showOrders: [],
       orderColumns: [
         {
           width: 60,
           align: "center",
           renderHeader: (h, context) => {
-            let value = false;
+            let value = !!this.selected.length;
             let indeterminate = false;
 
             if (this.orders.data) {
-              this.orders.data.map(item => {
+              let total = this.orders.reduce((acc, cur) => {
-                let select = this.selected.find(v => {
+                return acc + cur.counts;
-                  return v.id === item.id;
+              }, 0);
-                });
 
-                if (select) {
+              let counts = this.selected.reduce((acc, cur) => {
-                  value = true;
+                return acc + cur.counts;
-                }
+              }, 0);
-
+              indeterminate = total !== counts;
-                if (!select) {
-                  indeterminate = true;
-                }
-              });
             }
 
             return h("Checkbox", {
@@ -69,34 +75,25 @@ export default {
               },
               on: {
                 input: () => {
-                  this.selected = [];
+                  this.$store.commit('SET_SELECTED', []);
                 }
               }
             });
           },
           render: (h, context) => {
-            let value = false;
+            let select = this.getSelectedByOrderId(context.row.id);
 
-            let select = this.selected.find(item => {
+            let value = !!select.length;
-              return item.id === context.row.id;
-            });
 
-            if (select) {
+            let indeterminate = select.length && context.row.counts !== select.reduce((acc, cur) => {
-              value = true;
+              return acc + cur.counts;
-            }
+            }, 0);
-
-            let indeterminate =
-              select &&
-              select.cards &&
-              context.row.counts !== select.cards.reduce((acc, cur) => {
-                return acc + cur.counts;
-              }, 0);
 
             return h("Checkbox", {
               props: {
-                indeterminate: value && indeterminate,
+                indeterminate: value && !!indeterminate,
                 value: value,
-                disabled: context.row.counts === context.row.cards_count
+                disabled: context.row.counts === context.row.shipments
               },
               on: {
                 input: value => {
@@ -139,7 +136,7 @@ export default {
         },
         {
           title: "已用数量",
-          key: "cards_count",
+          key: "shipments",
           width: 90
         },
         {
@@ -159,17 +156,15 @@ export default {
           width: 150,
           fixed: 'right',
           render: (h, context) => {
-            let select = this.selected.find(item => {
+            let select = this.getSelectedByOrderId(context.row.id);
-              return item.id === context.row.id;
-            });
 
-            let value = select ? select.cards.reduce((acc, cur) => {
+            let value = select.length ? select.reduce((acc, cur) => {
               return acc + cur.counts;
             }, 0) : 0;
 
             return h("InputNumber", {
               props: {
-                max: context.row.counts - context.row.cards_count,
+                max: context.row.counts - context.row.shipments,
                 min: 0,
                 value: value,
                 precision: 0
@@ -191,16 +186,9 @@ export default {
             let value = false;
             let indeterminate = false;
 
-            let select = this.selected.find(item => {
+            value = !!this.selected.length;
-              return item.id === this.order_id;
-            });
 
-            value = !!select;
+            indeterminate = this.selected.length && this.selected.length !== this.cards.length;
-
-            indeterminate =
-              select &&
-              select.cards &&
-              select.cards.length !== this.cards.length;
 
             return h("Checkbox", {
               props: {
@@ -209,7 +197,16 @@ export default {
               },
               on: {
                 input: value => {
-                  this.handleSelectOrder(this.order_id, value);
+                  if (value) {
+                    let cards = this.getFilterUsedCards(this.cards);
+
+                    cards.map(item => {
+                      let obj = { order_id: item.order_id, sim: item.sim, counts: item.counts };
+                      this.$store.commit('PUSH_SELECTED', obj);
+                    });
+                  } else {
+                    this.$store.commit('SET_SELECTED', []);
+                  }
                 }
               }
             });
@@ -217,19 +214,9 @@ export default {
           render: (h, context) => {
             let value = false;
 
-            let select = this.selected.find(item => {
+            let select = this.getCardByOderIdAndSim(context.row.order_id, context.row.sim);
-              return item.id == this.order_id;
-            });
 
-            if (select) {
+            value = !!select;
-              let card = select.cards.find(item => {
-                return item.sim == context.row.sim;
-              });
-
-              if (card) {
-                value = true;
-              }
-            }
 
             return h("Checkbox", {
               props: {
@@ -283,80 +270,61 @@ export default {
       ]
     };
   },
-  computed: {
-    orders() {
-      return this.$store.state.order.real_orders;
-    },
-    cards: {
-      get() {
-        return this.$store.state.order.cards;
-      },
-      set(value) {
-        this.$store.commit("SET_CARDS", value);
-      }
-    },
-    selected: {
-      get() {
-        return this.$store.state.order.selected;
-      },
-      set(value) {
-        this.$store.commit("SET_REAL_ORDER_SELECTED", value);
-      }
-    },
-    counts() {
-      let selected = this.$store.state.order.selected;
-
-      if (!selected.length) {
-        return 0;
-      }
-
-      return selected.reduce((acc, cur) => {
-        return acc + cur.cards.reduce((a, c) => {
-          return a + c.counts;
-        }, 0);
-      }, 0);
-    }
-  },
   watch: {
     show(bool) {
       this.my_show = bool;
       this.$store.commit('SET_CARDS', []);
       if (bool) {
-        this.index(1);
+        this.index();
       }
+    },
+    orders(array) {
+      this.page.total = array.length;
     }
   },
   methods: {
+    rowClassName(row, index) {
+      if (row.order_id === this.order_id) {
+        return 'bg-yellow';
+      }
+
+      return '';
+    },
     ok() {
       this.my_show = false;
     },
-    index(page, limit = 10) {
+    index(force = 0) {
-      let params = this.searchDataHandle({}, { page, limit }, this.params);
+      let params = this.parseParams(this.params);
       params.type = this.type;
       this.orderLoading = true;
+
+      if (force) {
+        this.$store.commit('SET_ORDER_PARAMS', {});
+        params.skipCache = 1;
+      }
+
       this.$store.dispatch("getOrders", params).then(() => {
+        this.changePage(1);
         this.orderLoading = false;
       }).catch(() => {
         this.orderLoading = false;
       });
     },
-    getCards(order_id) {
+    changeLimit(limit) {
-      this.order_id = order_id;
+      this.page.limit = limit;
-      this.cardLoading = true;
+      this.changePage(1);
-
+    },
-      return new Promise((resolve, reject) => {
+    changePage(page) {
-        let params = { order_id: order_id, type: this.type };
+      this.page.page = page;
-        this.$store.dispatch("getCards", params).then(cards => {
+      this.showOrders = this.orders.slice((page - 1) * this.page.limit, page * this.page.limit);
-          this.cardLoading = false;
-          resolve(cards);
-        }).catch(() => {
-          this.cardLoading = false;
-          this.$Message.error("服务器出错，请稍后再试");
-        });
-      });
     },
     handleOrderRowDblclick(row) {
-      this.getCards(row.id);
+      window.t = this;
+      this.order_id = this.order_id === row.id ? 0 : row.id;
+      this.getCards(row.id).then(() => {
+        let index = this.cards.findIndex(el => { return el.order_id === row.id; });
+        this.$refs.cardSelection.scrollToRow(index);
+      });
     },
     visibleChange(bool) {
       if (!bool) {
@@ -378,54 +346,81 @@ export default {
           this.params[k] = '';
         }
       }
-      this.index(1);
+      this.index();
+    },
+    getCards(order_id) {
+      this.cardLoading = true;
+      return new Promise((resolve) => {
+        let params = { order_id: order_id, type: this.type };
+        this.$store.dispatch('getCards', params).then((cards) => {
+          this.cardLoading = false;
+          resolve(cards);
+        }).catch((err) => {
+          this.cardLoading = false;
+          this.$Message.error("服务器出错，请稍后再试");
+        });
+      });
     },
     handleSelectOrder(order_id, value, counts = null) {
-      if (value) {
+      if (!value || counts === 0) {
-        this.getCards(order_id).then(cards => {
+        return this.$store.commit('REMOVE_SELECTED', { order_id });
-          cards = this.filterUsed(cards);
-
-          if (cards.length) {
-            cards.sort((a, b) => {
-              return a.counts < b.counts ? -1 : (a.counts > b.counts ? 1 : 0);
-            });
-
-            let arr = [];
-
-            counts = counts === null ? cards.length : counts;
-
-            cards.map(item => {
-              if (counts > 0) {
-                arr.push({ sim: item.sim, counts: item.counts });
-                counts -= item.counts;
-              }
-            });
-
-            if (arr.length) {
-              this.$store.commit('PUSH_REAL_ORDER_SELECTED', { order_id, cards: arr });
-            } else {
-              this.$store.commit('REMOVE_REAL_ORDER_SELECTED', order_id);
-            }
-          } else {
-            this.$Message.error('选中零张卡');
-          }
-        });
-      } else {
-        this.$store.commit('REMOVE_REAL_ORDER_SELECTED', order_id);
       }
+
+      this.getCards(order_id).then((cards) => {
+        cards = this.getFilterUsedCards(cards);
+
+        if (!cards.length) {
+          return this.$Message.error('所有卡都不可使用');
+        }
+
+        cards.sort((a, b) => {
+          return a.counts < b.counts ? -1 : (a.counts > b.counts ? 1 : 0);
+        });
+
+        let arr = cards.map(item => {
+          return { order_id: item.order_id, sim: item.sim, counts: item.counts };
+        });
+
+        if (counts !== null) {
+          let acc = 0;
+
+          arr = arr.filter(item => {
+            acc += item.counts;
+            return acc <= counts;
+          });
+        }
+
+        this.$store.commit('REMOVE_SELECTED', { order_id });
+
+        arr.map(item => {
+          this.$store.commit('PUSH_SELECTED', item);
+        });
+      });
     },
     handleSelectCards(row, value) {
-      let action = value ? 'PUSH_CARD_SELECTED' : 'REMOVE_CARD_SELECTED';
+      let action = value ? 'PUSH_SELECTED' : 'REMOVE_SELECTED';
       this.$store.commit(action, { order_id: row.order_id, sim: row.sim, counts: row.counts });
     },
-    filterUsed(cards) {
-      return cards.filter(item => {
-        return item.virtual_order_id === 0;
-      });
-    },
     order() {
       this.$emit('create-order');
     },
-    store() {}
+    store() {},
+    sort() {
+      let mapped = this.orders.map((el, i) => { return { index: i, id: el.id }; });
+
+      mapped.sort((a, b) => {
+        let ac = this.getSelectedByOrderId(a.id).reduce((acc, cur) => { return acc + cur.counts; }, 0);
+        let bc = this.getSelectedByOrderId(b.id).reduce((acc, cur) => { return acc + cur.counts; }, 0);
+        return ac > bc ? -1 : (ac < bc ? 1 : 0);
+      });
+
+      let orders = mapped.map(el => {
+        return this.orders[el.index];
+      });
+
+      this.$store.commit('SET_REAL_ORDERS', orders);
+
+      this.changePage(1);
+    }
   }
 };

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

@@ -1,4 +1,5 @@
 import * as API from 'api/virtual/orders';
+import { mapGetters } from 'vuex';
 import {
   isPhone
 } from 'validate';
@@ -50,27 +51,7 @@ export default {
     };
   },
   computed: {
-    selected: {
+    ...mapGetters(['selected', 'counts'])
-      get() {
-        return this.$store.state.order.selected;
-      },
-      set(value) {
-        this.$store.commit("SET_REAL_ORDER_SELECTED", value);
-      }
-    },
-    counts() {
-      let selected = this.$store.state.order.selected;
-
-      if (!selected.length) {
-        return 0;
-      }
-
-      return selected.reduce((acc, cur) => {
-        return acc + cur.cards.reduce((a, c) => {
-          return a + c.counts;
-        }, 0);
-      }, 0);
-    }
   },
   watch: {
     show(bool) {