供应商列表修改

src/views/channel/index.vue

@@ -2,22 +2,20 @@
   <div class="app-container">
     <div class="filter-container" style="margin: 10px 0 10px 0">
 
-      <el-input v-model="supplierName" style="width:65%;" placeholder="供应商名称" size="small" clearable />
-      <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="Search({supplierName:supplierName})">搜索</el-button>
-      <!-- <el-button type="primary" round @click="Search({supplierName:supplierName})">DEBUG重请求</el-button> -->
+      <el-input v-model="body.supplierName" style="width:65%;" placeholder="供应商名称" size="small" clearable />
+      <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
+      <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="NewChannel">新建</el-button>
     </div>
-
     <el-table v-loading="loading" :data="tableData" border style="width: 100%">
       <el-table-column type="selection" />
 
-      <el-table-column label="供应商编码" width="100" align="center" show-overflow-tooltip>
+      <el-table-column label="供应商编码" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
-          <!-- supplierCode -->
           <span>{{ scope.row.supplierCode }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column label="供应商名称" width="100" align="center" show-overflow-tooltip>
+      <el-table-column label="供应商名称" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
           <span>{{ scope.row.supplierName }}</span>
         </template>
@@ -47,7 +45,7 @@
         </template>
       </el-table-column> -->
 
-      <el-table-column label="可用余额" width="80" align="center" show-overflow-tooltip>
+      <el-table-column label="可用余额" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
           <span>{{ scope.row.balance }}</span>
         </template>
@@ -71,7 +69,7 @@
         </template>
       </el-table-column> -->
 
-      <el-table-column label="创建时间" width="160" align="center" show-overflow-tooltip>
+      <el-table-column label="创建时间" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
           <span>{{ scope.row.createTime }}</span>
         </template>
@@ -89,7 +87,7 @@
         </template>
       </el-table-column> -->
 
-      <el-table-column label="是否有效" width="80" align="center" show-overflow-tooltip>
+      <el-table-column label="是否有效" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
           <span v-if="scope.row.isValid==1">有效</span>
           <span v-if="scope.row.isValid==2">无效</span>
@@ -144,7 +142,7 @@
         </template>
       </el-table-column> -->
 
-      <el-table-column label="限速" width="100" align="center" show-overflow-tooltip>
+      <el-table-column label="限速" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
           <span>{{ scope.row.ratio }}</span>
         </template>
@@ -163,13 +161,28 @@
       </el-table-column> -->
       <el-table-column label="操作" fixed="right" min-width="150" align="center">
         <template slot-scope="scope">
-          <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">至无效</el-button>
-          <el-button type="text" icon="el-icon-edit" @click="handleDelete(scope.row)">编辑</el-button>
-          <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button type="text" icon="el-icon-edit" @click="ModifyState(scope.row)">至无效</el-button>
+          <el-button type="text" icon="el-icon-edit" @click="ModifyEdit(scope.row)">编辑</el-button>
+          <el-button type="text" icon="el-icon-delete" @click="ModifyDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
 
     </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        current-page.sync="body.page"
+        :current-page="body.page"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="body.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
   </div>
 </template>
 
@@ -180,20 +193,56 @@ import api from '@/api/channel.js'
 export default {
   data() {
     return {
-      supplierName: '',
+      body: {
+        page: 1,
+        size: 10,
+        supplierName: ''
+      },
+      total: 0,
+
       tableData: []
     }
   },
   created() {
-    // page, channelSupplier, param1, param2
-    this.Search()
+    this.reLoad()
   },
   methods: {
-    Search(operator) {
-      api.Search(operator).then((res) => {
-        // console.log(res)
+    reLoad() {
+      api.Search(this.body).then((res) => {
         this.tableData = res.data.data.records
+        this.total = res.data.data.total
       })
+    },
+
+    Search() {
+      this.body.page = 1
+      this.reLoad()
+    },
+    // 新建供应商
+    NewChannel() {
+      console.log('NewChannel')
+    },
+
+    // 修改状态
+    ModifyState() {
+      console.log('ModifyState')
+    },
+    // 修改编辑
+    ModifyEdit() {
+      console.log('ModifyEdit')
+    },
+    // 修改删除
+    ModifyDelete() {
+      console.log('ModifyDelete')
+    },
+    handleSizeChange: function(val) {
+      this.body.size = val
+      this.reLoad()
+    },
+    // 换页
+    handleCurrentChange: function(val) {
+      this.body.page = val
+      this.reLoad()
     }
   }
 }