暂时处理完入库流程

src/views/holding/holding1.vue

@@ -15,12 +15,12 @@
 
         <div class="middle">
           <ul class="title">
-            <li :class="{active:stateInd===index}" @click="stateInd=index" v-for="(item,index) in stateArr" :key="index">{{item.txt}}（{{item.num}}）</li>
+            <li :class="{active:stateInd===index}" @click="stateSelect(index)" v-for="(item,index) in stateArr" :key="index">{{item.txt}}（{{item.num}}）</li>
           </ul>
           <div class="select">
             <span>登记人：</span>
             <el-input
-              v-model="type"
+              v-model="myData.searchKey"
               placeholder="请输入"
               style="width: 217px"
             ></el-input>
@@ -33,7 +33,7 @@
               end-placeholder="结束日期"
             >
             </el-date-picker>
-            <el-button style="margin-left: 20px">查询</el-button>
+            <el-button style="margin-left: 20px" @click="inquire">查询</el-button>
             <el-button type="primary" @click="enterBank">申请入库</el-button>
           </div>
           <!--表格 -->
@@ -69,9 +69,11 @@
           <!-- 分页器 -->
           <div class="paging">
             <el-pagination
+              @current-change="currentChange"
+              @size-change="sizeChange"
               background
               layout="prev, pager, next,sizes,jumper"
-              :total="100"
+              :total="total"
             >
             </el-pagination>
           </div>
@@ -89,6 +91,7 @@ export default {
   components: { TabList },
   data () {
     return {
+      total: 0,
       myData: {
         endTime: '', // 结束时间
         pageNum: 1, // 起始页码，默认1为第一页
@@ -100,11 +103,11 @@ export default {
       // 选择状态的变量
       stateInd: 0,
       stateArr: [
-        { txt: '全部', num: 356 },
-        { txt: '待审核', num: 35 },
-        { txt: '待办理', num: 35 },
-        { txt: '已完成', num: 35 },
-        { txt: '审核不通过', num: 35 }
+        { txt: '全部', num: 0 },
+        { txt: '待审核', num: 0 },
+        { txt: '待办理', num: 0 },
+        { txt: '已完成', num: 0 },
+        { txt: '审核不通过', num: 0 }
       ],
       type: '',
       time: '',
@@ -123,7 +126,69 @@ export default {
   },
   // 方法集合
   methods: {
-    // 点击查看
+    // 点击查询
+    inquire () {
+      this.myData.pageNum = 1
+      this.getList(this.myData)
+    },
+    // 分页器
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      // this.myData.sourceId = null
+      // this.myData.searchKey = ''
+      // this.time = []
+      // this.myData.endTime = ''
+      // this.myData.startTime = ''
+      this.myData.pageNum = val
+      this.getList(this.myData)
+      this.$nextTick(() => {
+        // 所有dom加载完毕之后---要执行的代码
+        setTimeout(() => {
+          if (this.tableData.length === 0) {
+            this.myData.pageNum = 1
+            this.getList(this.myData)
+          }
+        }, 100)
+      })
+    },
+    sizeChange (val) {
+      // this.myData.sourceId = null
+      // this.myData.searchKey = ''
+      // this.time = []
+      // this.myData.endTime = ''
+      // this.myData.startTime = ''
+      // console.log('条数改变了', val)
+      this.myData.pageSize = val
+      this.getList(this.myData)
+    },
+    // 点击上面的状态切换
+    stateSelect (index) {
+      if (index !== this.stateInd) {
+        this.myData.pageNum = 1
+        // 点击待审核
+        if (index === 1) {
+          this.myData.status = 1
+          this.getList(this.myData)
+        } else if (index === 2) {
+          // 点击待办理
+          this.myData.status = 0
+          this.getList(this.myData)
+        } else if (index === 3) {
+          // 点击已完成
+          this.myData.status = 3
+          this.getList(this.myData)
+        } else if (index === 4) {
+          // 点击审核不通过
+          this.myData.status = 2
+          this.getList(this.myData)
+        } else if (index === 0) {
+          // 点击全部
+          this.myData.status = ''
+          this.getList(this.myData)
+        }
+      }
+      this.stateInd = index
+    }, // 点击查看
     myLook (val) {
       this.$router.push({
         path: '/layout/holding1_look',
@@ -177,6 +242,7 @@ export default {
     // 封装获取列表方法
     async getList (data) {
       const res = await getList(data)
+      this.total = res.data.total
       // console.log(666, res.data.list)
       this.tableData = res.data.list
       this.tableData.forEach(v => {
@@ -215,7 +281,24 @@ export default {
     this.getList(this.myData)
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
+    // 进页面拿到所有数据
+    const res = await getList({ ...this.myData, pageSize: 99999 })
+    this.stateArr[0].num = res.data.list.length
+    let num1 = 0
+    let num2 = 0
+    let num3 = 0
+    let num4 = 0
+    res.data.list.forEach(v => {
+      if (v.status === 1) num1++
+      if (v.status === 0) num2++
+      if (v.status === 3) num3++
+      if (v.status === 2) num4++
+    })
+    this.stateArr[1].num = num1
+    this.stateArr[2].num = num2
+    this.stateArr[3].num = num3
+    this.stateArr[4].num = num4
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前