修改机器详情-组件管理分页

src/api/machine/machineDetails.js

@@ -26,9 +26,9 @@ export function getMachineComLog(id) {
 }
 
 // 机器组件
-export function getComponentList(id) {
+export function getComponentList(id,page,limit) {
   return request({
-    url: "/v1/machine/component?machine_id=" + id,
+    url: "/v1/machine/component?machine_id=" + id+"&page="+page+"&limit="+limit,
     method: "get",
   });
 }

src/views/machine/machineDetails/machineDetailsCom.vue

@@ -16,6 +16,15 @@
               </template> 
             </el-table-column>
           </el-table>
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 40, 50]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+          </el-pagination>
         </el-tab-pane>
       </el-tabs>
       <div slot="footer" class="dialog-footer" >
@@ -53,7 +62,11 @@ export default {
       ros_code:"",
       component_name:"",
       materialId:"",
-      machineState:null
+      machineState:null,
+      // 总条数
+      total: 0,
+      currentPage:1,
+      pageSize:10
     };
   },
   created() {
@@ -70,11 +83,22 @@ export default {
       this.machineState=row.state
       this.getComponentList();
     },
+    handleSizeChange(val){
+      this.currentPage=1;
+      this.pageSize=val;
+      this.getComponentList();
+    },
+    handleCurrentChange(val){
+      this.currentPage=val;
+      //this.pageSize=1;
+      this.getComponentList();
+    },
     getComponentList(){
       this.loading = true;
-      getComponentList(this.machineId).then((response) => {
+      getComponentList(this.machineId,this.currentPage,this.pageSize).then((response) => {
         if(response.code==0){
-          this.componentList = response.data;
+          this.componentList = response.data.data;
+          this.total=response.data.count;
           this.loading = false;
         }       
       });