分页

src/pages/modules/finished/finished-instore.vue

@@ -112,8 +112,8 @@ export default {
     next()
   },
   activated () {
-    if (this.$store.getters.materObj !== '') {
-      this.dataList.push(JSON.parse(this.$store.getters.materObj))
+    if (this.$store.getters.materArr.length > 0) {
+      this.dataList = [...this.dataList, ...this.$store.getters.materArr]
     }
   },
   created () {

src/pages/modules/finished/select-finished-mater.vue

@@ -29,15 +29,16 @@
                 <div class="search-item flexend spesite">
                     <button class="button button--primary" @click="_getMaterial">快速查询</button>
                     <button class="button button--primary" @click="toSure">确定</button>
-                    <button class="button button--primary" @click="clear">清空</button>
-                    <button class="button button--primary" @click="close">关闭</button>
+                    <button class="button button--primary" @click="clearUp">清空</button>
+                    <button class="button button--primary" @click="colseUp">关闭</button>
                 </div>
             </div>
         </div>
-        <div class="grid_wraper">
+        <div class="grid_wraper" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
             <table class="filter-table">
                 <thead>
                     <tr>
+                        <th>选择</th>
                         <th>序号</th>
                         <th>日期</th>
                         <th>单据号</th>
@@ -50,7 +51,10 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="(e, i) in dataList" :key="i" :class="{'selected_icon': pkId === e.sale_code}" @click="toRadio(e)">
+                    <tr v-for="(e, i) in dataList" :key="e.sale_code" @click="toRadio(e)">
+                        <td>
+                          <button class="iconfont select_icon select_square_icon" :class="e.checked ? 'selected_icon' : 'unselect_icon'"></button>
+                        </td>
                         <td>{{i + 1}}</td>
                         <td>{{e.create_time}}</td>
                         <td>{{e.sale_code}}</td>
@@ -73,39 +77,68 @@ import {dateTimeFtt} from '@config/utils.js'
 export default {
   data () {
     return {
+      page: 1,
+      size: '30',
+      busy: false,
+      desc: '',
       val1: '',
       val2: '',
       date: [new Date((new Date().getTime() - 6 * 24 * 60 * 60 * 1000)), new Date((new Date().getTime()))],
-      dataList: [{sale_code: '030301010037'}],
-      pkId: '',
-      pkObj: {}
+      dataList: [{sale_code: '030301010037', checked: false}, {sale_code: '030301010038', checked: false}],
+      checkArr: []
     }
   },
   created () {
     this._getMaterial()
   },
   methods: {
-    // 查询
+    // grid
     async _getMaterial () {
+      this.page = 1
+      this.busy = false
+      this.desc = ''
       let res = await getMaterial(this.date !== null ? dateTimeFtt(this.date[0]) : '', this.date !== null ? dateTimeFtt(this.date[1]) : '', this.val1, this.val2)
+      this.dataList = []
+      res.data.map(el => {
+        this.$set(el, 'checked', false)
+      })
       this.dataList = [...res.data]
+      if (res.data.length < 30) {
+        this.busy = true
+        this.desc = '已加载全部数据'
+      }
     },
-    toRadio (e) {
-      this.pkId = this.pkId === e.sale_code ? '' : e.sale_code
-      this.pkObj = this.pkId === e.sale_code ? e : {}
+    async loadMore () {
+      this.busy = true
+      this.page++
+      let res = await getMaterial(this.date !== null ? dateTimeFtt(this.date[0]) : '', this.date !== null ? dateTimeFtt(this.date[1]) : '', this.val1, this.val2)
+      res.data.map(el => {
+        this.$set(el, 'checked', false)
+      })
+      this.dataList = [...this.dataList, ...res.data]
+      if (res.data.length < 30) {
+        this.busy = true
+        this.desc = '已加载全部数据'
+      } else {
+        this.busy = false
+      }
+    },
+    colseUp () {
+      this.$router.push('/finishedinstore')
     },
     toSure () {
-      this.$store.dispatch('setMaterObj', JSON.stringify(this.pkObj))
-      this.$router.push('/finishedinstore')
+      if (this.checkArr.length === 0) {
+        return
+      }
+      this.$store.dispatch('setMaterArr', this.checkArr)
+      this.colseUp()
     },
-    clear () {
-      this.val1 = ''
-      this.val2 = ''
-      this.pkId = ''
-      this.pkObj = {}
+    clearUp () {
+      this.checkArr = []
     },
-    close () {
-      this.$router.push('/finishedinstore')
+    toRadio (e) {
+      e.checked = !e.checked
+      this.checkArr = this.dataList.filter(i => { return i.checked === true })
     }
   }
 }