machineDetailsOther

src/views/machine/machineDetails/machineDetailsOther.vue

 <template>
   <div>
-    <el-dialog title="其他设置" :visible.sync="coffeeDiaLog" width="700px" append-to-body >
+    <el-dialog title="其他设置" :visible.sync="coffeeDiaLog" width="1000px" append-to-body >
       <el-tabs v-model="activeName" >
         <el-tab-pane label="咖啡机" name="first" >
           <div>
-            <el-row>
-              <el-col :span="5">
-                <el-input />
-              </el-col>
-              <el-col :span="5">
-                <el-input />
-              </el-col>
-              <el-col :span="5">
-                <el-input />
-              </el-col>
-              <el-col :span="5">
-                <el-input />
-              </el-col>
-              <el-col :span="4">
-                <el-input />
-              </el-col>
-            </el-row>
-            <el-pagination    layout="prev, pager, next"  :total="total" @current-change="handleCurrentChange"> </el-pagination>
+            
+            <div class="mdo-box" >
+              <span class="mdo-box-item"  v-for="(coffee,coffee_idx) in coffeeList" :key=coffee_idx > 
+                {{coffee.name}}
+              </span>              
+            </div>
+
+            <el-pagination    layout="prev, pager, next"  :total="total" :page-size="1" @current-change="handleCurrentChange"> </el-pagination>
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -42,8 +32,10 @@ export default {
       coffeeDiaLog:false,
       coffeeList:[],
       activeName:"first",
-      total:0,
-
+      total:3,
+      pageCount:3,
+      dataCount:15,
+      pages : []
   
     };
   },
@@ -55,30 +47,118 @@ export default {
     //弹出机器页面
     handleOthDiaLog(row){
       this.machineId=row.id;
-      this.coffeeDiaLog=true;
+      
       this.getCoffeeList();
+
+      this.coffeeDiaLog=true;
     },
     getCoffeeList(){
       this.loading = true;
       getCoffeeList(this.machineId).then((response) => {
         if(response.code==0){
-          for(let i=0;i<response.data.length;i++){
-            if(response.data[i].page==1){
-              this.coffeeList=response.data[i].data;
-              break;
-            }
-          }
-          this.total=response.data.length;
+         
+          let pages = this.fillCofeeMenuList(response.data);
+          this.pages = pages;
+          this.coffeeList=pages[0].data;
+          // console.log("this.pages ",pages);
+
           this.loading = false;
         }       
-      });
+      }).catch((response) => {
+                
+          let pages = this.fillCofeeMenuList(response.data);
+          this.pages = pages;
+          this.coffeeList=pages[0].data;
+          // console.log("this.pages ",pages);
+          this.loading = false;
+              
+      })
+    },
+  
+    /**将数据填充，当前默认是每页要显示15条，先将数据构造好 */
+    fillCofeeMenuList(pdata){
+      let pages = new Array(this.pageCount);      
+      for(let j=0;j<pages.length;j++){
+        let pageid = j+1;
+        let pageData = this.findPage(pdata,pageid);
+        pages[j] = pageData;        
+      }    
+      this.total = pages.length;  
+      return pages;
+    },
+    findPageDataItemByProductId(pageDatas,product_id){
+      // console.log("product_id",product_id);
+      // console.log("pageDatas",pageDatas);
+      let pageDataItem =  {
+        "name": "   ",  
+        "product_id": product_id  
+      };
+      for(let k=0;k<pageDatas.length;k++){
+        if(pageDatas[k].product_id == product_id){
+          pageDataItem = Object.assign({},pageDatas[k]);
+        }
+      }
+      return pageDataItem;
+    },
+    findPage(pdata,pageId){
+      let t_data = [];
+      if(pdata){
+        t_data = pdata ;
+      }
+      // console.log("pageId ",pageId);
+      // console.log("pdata ",pdata);
+      let pageData = {page:1,data:[]} ;
+
+      let pageDatas =  new Array(this.dataCount);
+      let t_pageDatas = [];
+     
+      for(let i=0;i<t_data.length;i++){
+        if(pdata[i].page == pageId){
+          t_pageDatas = pdata[i].data;
+          pageData.page = pageId;
+
+        }
+      }
+
+      // console.log("t_pageDatas ",t_pageDatas);
+      //
+      for(let i=0;i<pageDatas.length;i++){
+        let product_id = (pageId-1)*this.dataCount+i+1;
+
+        let pageDataItem = this.findPageDataItemByProductId(t_pageDatas,product_id);
+        pageDatas[i] = pageDataItem;
+      }
+      pageData.data = pageDatas
+      return pageData;
     },
     otherDialogCancel(){
       this.coffeeDiaLog=false;
     },
     handleCurrentChange(val){
-      console.log("val",val)
+      // console.log("val",val)
+      this.coffeeList=this.pages[val-1].data;
+      // console.log("this.coffeeList ",this.coffeeList);
+
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
+<style rel="stylesheet/scss" lang="scss">
+  .mdo-box {
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    flex-direction:row;
+    flex-wrap:  wrap;
+  }
+  .mdo-box-item {
+    width:20%;
+    border-width: 1px;
+    border-color: rgb(218, 214, 214);
+    border-style: solid;
+    height: 50px;
+    text-align: center;
+    align-items:center;
+    display: flex;
+    justify-content:center;
+  }
+</style>
\ No newline at end of file