update

src/components/Pagination/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
+  <div :class="{ hidden: hidden }" class="pagination-container">
     <el-pagination
       :background="background"
       :current-page.sync="currentPage"
@@ -16,91 +16,90 @@
 </template>
 
 <script>
-import { scrollTo } from '@/utils/scroll-to'
+import { scrollTo } from "@/utils/scroll-to";
 
 export default {
-  name: 'Pagination',
+  name: "Pagination",
   props: {
     total: {
       required: true,
-      type: Number
+      type: Number,
     },
     page: {
       type: Number,
-      default: 1
+      default: 1,
     },
     limit: {
       type: Number,
-      default: 20
+      default: 20,
     },
     pageSizes: {
       type: Array,
       default() {
-        return [10, 20, 30, 50]
-      }
+        return [1, 10, 20, 30, 50];
+      },
     },
     // 移动端页码按钮的数量端默认值5
     pagerCount: {
       type: Number,
-      default: document.body.clientWidth < 992 ? 5 : 7
+      default: document.body.clientWidth < 992 ? 5 : 7,
     },
     layout: {
       type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
+      default: "total, sizes, prev, pager, next, jumper",
     },
     background: {
       type: Boolean,
-      default: true
+      default: true,
     },
     autoScroll: {
       type: Boolean,
-      default: true
+      default: true,
     },
     hidden: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
-    return {
-    };
+    return {};
   },
   computed: {
     currentPage: {
       get() {
-        return this.page
+        return this.page;
       },
       set(val) {
-        this.$emit('update:page', val)
-      }
+        this.$emit("update:page", val);
+      },
     },
     pageSize: {
       get() {
-        return this.limit
+        return this.limit;
       },
       set(val) {
-        this.$emit('update:limit', val)
-      }
-    }
+        this.$emit("update:limit", val);
+      },
+    },
   },
   methods: {
     handleSizeChange(val) {
       if (this.currentPage * val > this.total) {
-        this.currentPage = 1
+        this.currentPage = 1;
       }
-      this.$emit('pagination', { page: this.currentPage, limit: val })
+      this.$emit("pagination", { page: this.currentPage, limit: val });
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        scrollTo(0, 800);
       }
     },
     handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
+      this.$emit("pagination", { page: val, limit: this.pageSize });
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        scrollTo(0, 800);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>

src/views/purchase/apply/index.vue

@@ -50,8 +50,15 @@ export default {
           { pageNum, pageSize }
         );
         if (code === 200) {
-          this.tableData = rows;
+          this.tableData = rows.map((item, index) => ({
+            ...item,
+            $index: index + 1,
+          }));
           this.page.total = total;
+          this.page.pageNum = pageNum;
+          this.page.pageSize = pageSize;
+          console.log(this.page);
+          return rows[0];
         }
       } catch (err) {
         // catch
@@ -123,9 +130,10 @@ export default {
     },
     // 明 细
     async useSee(prop) {
-      const { id } = prop;
+      const { id, $index } = prop;
       const { open } = this.$refs.SeeModel;
       await open(id);
+      await this.useQuery(this.params, { pageSize: 1, pageNum: $index });
     },
     // 审 核
     async useSubmit(prop, done) {
@@ -265,6 +273,8 @@ export default {
         :selectable="setSelectable"
       >
       </el-table-column>
+      <el-table-column fixed width="55" align="center" type="index">
+      </el-table-column>
       <el-table-column
         v-for="(column, index) in tableColumns"
         :key="index"

src/views/purchase/apply/see/index.vue

@@ -50,6 +50,42 @@ export default {
       this.visible = false;
     },
     //
+    async useQueryLast() {
+      const {
+        page: { pageNum },
+        params,
+        fetchList,
+      } = this.root;
+      const page = { pageNum: pageNum - 1, pageSize: 1 };
+      console.log("last", page);
+      if (page.pageNum < 1) {
+        return this.$notify.info({
+          message: "已经是第一页了~",
+          position: "bottom-left",
+        });
+      } else {
+        this.params = await fetchList(params, page);
+      }
+    },
+    //
+    async useQueryPrev() {
+      const {
+        page: { total, pageNum },
+        params,
+        fetchList,
+      } = this.root;
+      const page = { pageNum: pageNum + 1, pageSize: 1 };
+      console.log("prev", page);
+      if (page.pageNum > total) {
+        return this.$notify.info({
+          message: "大海是有深度的~",
+          position: "bottom-left",
+        });
+      } else {
+        this.params = await fetchList(params, page);
+      }
+    },
+    //
     async useDelete(prop) {
       await this.root
         .useDelete(prop)
@@ -83,12 +119,23 @@ export default {
     <template slot="title">
       <span>{{ title }}</span>
       <span>
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="删 除"
-          placement="bottom-end"
-        >
+        <el-tooltip effect="dark" content="上一页" placement="bottom-end">
+          <el-button
+            :size="size"
+            circle
+            icon="el-icon-top"
+            @click="useQueryLast"
+          ></el-button>
+        </el-tooltip>
+        <el-tooltip effect="dark" content="下一页" placement="bottom-end">
+          <el-button
+            :size="size"
+            circle
+            icon="el-icon-bottom"
+            @click="useQueryPrev"
+          ></el-button>
+        </el-tooltip>
+        <el-tooltip effect="dark" content="删 除" placement="bottom-end">
           <el-button
             :size="size"
             circle
@@ -96,12 +143,7 @@ export default {
             @click="useDelete([params])"
           ></el-button>
         </el-tooltip>
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="复 制"
-          placement="bottom-end"
-        >
+        <el-tooltip effect="dark" content="复 制" placement="bottom-end">
           <el-button
             :size="size"
             circle
@@ -111,7 +153,6 @@ export default {
         </el-tooltip>
         <el-tooltip
           v-if="root.hasPowerEdit([params])"
-          class="item"
           effect="dark"
           content="编 辑"
           placement="bottom-end"
@@ -125,7 +166,6 @@ export default {
         </el-tooltip>
         <el-tooltip
           v-if="root.hasPowerSubmit([params])"
-          class="item"
           effect="dark"
           content="审 核"
           placement="bottom-end"