update

src/views/education/MaterialWarehousingMoudle.vue

@@ -76,24 +76,7 @@
                 >
             </el-table-column>
           </el-table>
-
-          <div class="page_bottom" >
-            <div class="bottom_text">
-              <span>共{{totalCount}}条记录 当前第{{pageIndex}}页 共{{totalPage}}页 每页{{pageSize}}条记录</span>
-            </div>
-
-            <div class="bottom_btns">
-              <div class="bottom_firest" @click="first">首页</div>
-              <div ref="last" :class="num <= 1 ? 'bottom_disabled' : 'bottom_next'" @click="last" >上一页</div>
-              <div ref="next" :class="num === totalPage || num <= 0 ? 'bottom_disabled' : 'bottom_next'" @click="next" >下一页</div>
-              <div class="bottom_end" @click="end" > 末页</div>
-              <span>第</span>
-              <input v-model="num" class="text" @input="handleBlur" type="text"/>
-              <span>页</span>
-              <div @click="jump" class="bottom_jump">跳转</div>
-            </div>
-          </div>
-
+          <Pagination @pageFun="pageFun" />
        </div>
        <store-dialog :titleText="'物料入库单'"  v-if="popShow" @closeDialog="closeDialog" @conserve="conserve" />
        <delete-pop ref="delete" :deletetext="deletetext" :type="typeV" v-if="deleteShow"></delete-pop>
@@ -104,9 +87,10 @@
 import searchForm from './component/searchForm'
 import storeDialog from './component/storeDialog'
 import deletePop from './component/deletePop'
+import Pagination from './component/Pagination'
 
 export default {
-  components: { searchForm, storeDialog, deletePop },
+  components: { searchForm, storeDialog, deletePop, Pagination  },
   data () {
     return {
       tableData: [],
@@ -116,12 +100,6 @@ export default {
       deletetext: '',
       deleteShow: false,
       typeV: '',
-      num: 1,
-      // 首字母已改为小写
-      totalCount: 1,
-      pageIndex: 1,
-      totalPage: 1,
-      pageSize: 50,
     }
   },
   methods: {
@@ -135,57 +113,6 @@ export default {
         }else{
           this.tableData = this.AllTableData.slice((num-1)*this.pageSize + 1,this.pageSize*num)
         }
-    },
-     //跳转
-    jump(){
-      if(this.pageIndex != this.num){
-          if(this.num>this.totalPage || this.num < 1){
-              this.typeV = '3'
-              this.deleteShow = true
-          }else{
-              this.pageIndex = this.num
-              this.pageFun(this.pageIndex)
-          }
-      }
-    },
-    // 首页
-    first () {
-      this.pageIndex = 1
-      this.num = this.pageIndex
-      this.pageFun(this.pageIndex)
-      console.log('首页')
-    },
-     //末页
-    end(){
-        this.pageIndex = this.totalPage
-        this.num = this.pageIndex
-        this.pageFun(this.pageIndex)
-        console.log('尾页')
-    },
-    //下一页
-    next(){
-      if(this.pageIndex<this.totalPage){
-          this.pageIndex = this.pageIndex + 1
-          this.num = this.pageIndex
-          this.pageFun(this.pageIndex)
-          console.log('下一页')
-      }
-    },
-    //上一页
-    last(){
-      if(this.pageIndex>1){
-          this.pageIndex = this.pageIndex - 1
-          this.num = this.pageIndex
-          this.pageFun(this.pageIndex)
-          console.log('上一页')
-        }
-    },
-    handleBlur () {
-      if (this.num > this.totalPage) {
-        this.num = this.totalPage
-      } else if(Number(this.num <= 0)) {
-        this.num = 1
-      }
     },
     delData () {
       if (this.checkList.length === 0) {

src/views/education/component/Pagination.vue

+<template>
+  <div class="page_bottom" >
+    <div class="bottom_text">
+      <span>共{{totalCount}}条记录 当前第{{pageIndex}}页 共{{totalPage}}页 每页{{pageSize}}条记录</span>
+    </div>
+
+    <div class="bottom_btns">
+      <div class="bottom_firest" @click="first">首页</div>
+      <div ref="last" :class="num <= 1 ? 'bottom_disabled' : 'bottom_next'" @click="last" >上一页</div>
+      <div ref="next" :class="num == totalPage || num <= 0 ? 'bottom_disabled' : 'bottom_next'" @click="next" >下一页</div>
+      <div class="bottom_end" @click="end" > 末页</div>
+      <span>第</span>
+      <input v-model="num" class="text" @input="handleInput" @blur="handleBlur" type="text"/>
+      <span>页</span>
+      <div @click="jump" class="bottom_jump">跳转</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      num: 1,
+      // 首字母已改为小写
+      totalCount: 1,
+      pageIndex: 1,
+      totalPage: 1,
+      pageSize: 50,
+    }
+  },
+  methods: {
+    // 分页方法
+    pageFun(num){
+        this.$emit('pageFun', num)
+    },
+     //跳转
+    jump(){
+      if(this.pageIndex != this.num){
+          if(this.num>this.totalPage || this.num < 1){
+              this.typeV = '3'
+              this.deleteShow = true
+          }else{
+              this.pageIndex = this.num
+              this.pageFun(this.pageIndex)
+          }
+      }
+    },
+    // 首页
+    first () {
+      this.pageIndex = 1
+      this.num = this.pageIndex
+      this.pageFun(this.pageIndex)
+      console.log('首页')
+    },
+     //末页
+    end(){
+        this.pageIndex = this.totalPage
+        this.num = this.pageIndex
+        this.pageFun(this.pageIndex)
+        console.log('尾页')
+    },
+    //下一页
+    next(){
+      if(this.pageIndex<this.totalPage){
+          this.pageIndex = this.pageIndex + 1
+          this.num = this.pageIndex
+          this.pageFun(this.pageIndex)
+          console.log('下一页')
+      }
+    },
+    //上一页
+    last(){
+      if(this.pageIndex>1){
+          this.pageIndex = this.pageIndex - 1
+          this.num = this.pageIndex
+          this.pageFun(this.pageIndex)
+          console.log('上一页')
+        }
+    },
+    handleInput () {
+      this.num= this.num.replace(/[^\d]/g, '')
+      if (this.num > this.totalPage) {
+        this.num = this.totalPage
+      }
+    },
+    handleBlur () {
+      this.num= Number(this.num)
+      if(Number(this.num <= 0)) {
+        this.num = 1
+      } 
+    }
+  }
+}
+</script>
\ No newline at end of file