通道修改

src/api/channel.js

@@ -39,7 +39,7 @@ export default {
     return request({
         url:"/channel/list",
         method:"POST",
-        data:operator
+        params:operator
     })
   },
 
@@ -47,7 +47,7 @@ export default {
     return request({
       url:"/channel/delete",
       method:"PUT",
-      data:{ChannelId:ChannelId}
+      params:{ChannelId:ChannelId}
   })
   }
 

src/views/channel/channel.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="app-container">
-      <div class="filter-container" style="margin: 10px 0 10px 0">
-          <span  class="textSpan">通道名称:</span>
-          <el-input v-model="body.channelName" style="width:200px" placeholder="通道名称" size="small" clearable />
-          <span  class="textSpan">  通道ID:</span>
-          <el-input v-model="body.channelId" style="width:200px" placeholder="通道ID" size="small" clearable />
-          <el-button class="filter-item"  icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
-          <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="Search">新增</el-button>
+      <div class="flex">
+          <div class="w_input">
+            <span  class="textSpan">通道名称:</span>
+            <el-input v-model="body.channelName" style="width:200px" placeholder="通道名称" size="small" clearable />
+          </div>
+          <div class="w_input">
+            <span  class="textSpan">　　通道ID:</span>
+            <el-input v-model="body.channelId" style="width:200px" placeholder="通道ID" size="small" clearable />
+          </div>
+          
+      </div>
+      <div class="flexend">
+        <el-button class="filter-item"  icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
+        <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="Search">新增</el-button>
       </div>
       <el-table v-loading="loading" :data="tableData" border style="width: 100%">
 
@@ -17,8 +24,8 @@
           </el-table-column>
 
           <el-table-column label="供应商名称" align="center" show-overflow-tooltip>
-              <template slot-scope="scope">
-                  <span>{{ scope.row.channelName }}</span>
+              <template slot-scope="scope" @click="hookLook(scope.row)">
+                  <span @click="hookLook(scope.row)">{{ scope.row.channelName }}</span>
               </template>
           </el-table-column>
 
@@ -36,7 +43,7 @@
 
           <el-table-column label="是否有效" align="center" show-overflow-tooltip>
               <template slot-scope="scope">
-                  <el-tag v-if="scope.row.isValid==0">无效</el-tag>
+                  <el-tag v-if="scope.row.isValid==0" size="warning">无效</el-tag>
                   <el-tag v-if="scope.row.isValid==1" size="small">有效</el-tag>
               </template>
           </el-table-column>
@@ -47,14 +54,32 @@
               </template>
           </el-table-column>
 
-          <el-table-column label="操作" fixed="right" align="center">
+          <el-table-column label="操作" fixed="right" min-width="200" align="center">
               <template slot-scope="scope">
+
+                <el-button v-if="scope.row.isValid==0" size="small" icon="el-icon-circle-check" type="success" plain @click="ModifyState(scope.row)">有效</el-button>
+                <el-button v-if="scope.row.isValid==1" size="small" icon="el-icon-circle-close" type="info" plain @click="ModifyState(scope.row)">无效</el-button>
+                <el-button size="small" icon="el-icon-edit" type="warning" plain @click="handleEdit(scope.row)">编辑</el-button>
                 <el-button size="small" icon="el-icon-delete" type="danger" plain @click="ModifyDelete(scope.row)">删除</el-button>
               </template>
           </el-table-column>
         
       </el-table>
 
+      <div class="pagination">
+      <el-pagination
+        current-page.sync="body.current"
+        :current-page="body.current"
+        :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>
 
@@ -65,16 +90,20 @@ export default {
         return {
             body:{
                 channelId:"",
+                size:10,
+                current:1,
                 channelName:""
             },
-            tableData:[]
+            tableData:[],
+            total:0
         }
     },
     created(){
         this.Search()
     },
     methods: {
-        Search(){
+        // 重载数据
+        reLoad(){
             this.loading = true
             api.channel(this.body).then((res) => {
                 this.loading = false
@@ -82,13 +111,59 @@ export default {
                 this.total = res.data.data.total
             })
         },
+
+        // 搜索
+        Search(){
+            this.body.current = 1
+            this.reLoad()
+        },
+        // 修改状态
+        ModifyState(operator){
+            operator.isValid ^= 1
+        },
+        // 删除
         ModifyDelete(operator){
 
+        },
+        // 编辑
+        handleEdit(){
+
+        },
+        // 查看详细
+        hookLook(){
+
+        },
+
+
+
+        handleSizeChange: function(val) {
+            this.body.size = val
+            this.reLoad()
+        },
+        handleCurrentChange: function(val) {
+            this.body.current = val
+            this.reLoad()
         }
     },
 }
 </script>
 
 <style>
+.flex{
+     width: 90%;
+     display: flex;
+     flex-direction: row;
+     margin-bottom: 10px;
+     /* flex-wrap: wrap; */
+     justify-content: flex-start;
+}
 
+.flexend{
+   display: flex;
+   justify-content: flex-end;
+   /* padding-right: 2rem; */
+   width: 100%;
+   /* margin: 0 auto; */
+   padding-bottom: 20px;
+}
 </style>