发行方列表更新

src/api/publisher/publisher.js

@@ -0,0 +1,26 @@
+// 后端接口版本
+import request from '@/utils/request'
+
+//获取发行方列表
+export function getPublisher(pageNum){
+    return request({
+        url:'post/publisher/list?pageNum=' +pageNum,
+        method:'get'
+    })
+}
+
+//删除
+export function deletePublisher(id){
+    return request({
+        url:'/post/publisher/' + id,
+        method:'delete'
+    })
+}
+
+//搜索
+export function searchPublisher(publisherName){
+    return request({
+        url:'/post/publisher/list=' + publisherName,
+        method: 'get'
+    })
+}

src/views/publisher/publisherList.vue

@@ -7,8 +7,8 @@
           <i id="search-head-text" class="el-icon-search"> 筛选搜索</i>
         </div>
         <div class="search-head-btn">
-          <el-button plain>重置</el-button>
-          <el-button type="primary">查询搜索</el-button>
+          <el-button plain @click="reset">重置</el-button>
+          <el-button type="primary" @click="searchPublisher">查询搜索</el-button>
         </div>
       </div>
       <!-- 筛选发行方名称 -->
@@ -26,19 +26,24 @@
     <!-- 发行方列表 -->
     <div class="publisher-list">
       <i class="el-icon-tickets"> 发行方列表</i>
-      <el-button id="addBtn" size="small">添加</el-button>
+      <el-button id="addBtn" size="small" @click="addPublisher">添加</el-button>
     </div>
     <!-- 数据栏 -->
     <div class="data-list">
       <el-table :data="tableData" border style="width: 100%">
-        <el-table-column prop="id" label="ID"> </el-table-column>
-        <el-table-column prop="headPortrait" label="头像"> </el-table-column>
+        <el-table-column prop="publisherId" label="ID"> </el-table-column>
+        <el-table-column prop="publisherImage" label="头像"> </el-table-column>
         <el-table-column prop="publisherName" label="发行方名称">
         </el-table-column>
         <el-table-column prop="operation" label="操作">
-          <template >
-            <el-button size="mini" type="text">修改</el-button>
-            <el-popconfirm title="你确定删除本条消息吗？">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="addPublisher"
+              >修改</el-button
+            >
+            <el-popconfirm
+              title="你确定删除本条消息吗？"
+              @confirm="deletePublisher(scope)"
+            >
               <el-button id="deleteBtn" size="mini" type="text" slot="reference"
                 >删除</el-button
               >
@@ -53,7 +58,8 @@
       <el-pagination
         background
         layout="prev, pager, next"
-        :total="total"
+        :total="this.total"
+        @current-change="handleCurrentChange"
         :page-size="pageSize"
       >
       </el-pagination>
@@ -64,40 +70,74 @@
 
 
 <script>
+import { getPublisher, deletePublisher,searchPublisher } from "../../api/publisher/publisher";
+
 export default {
   data() {
     return {
       input: "",
-        tableData: [],
+      tableData: [],
       total: 10,
       pageSize: 10,
       pageNum: 1,
-      mockPublisher:[]
+      mockPublisher: [],
+      currentPageData: [],
+      currentPage: 1,
     };
   },
-  mounted(){
+  mounted() {
     this.getMockPublisher();
-    this.getTableList();
+    // this.getTableList();
   },
   methods: {
+    //获取数据
     getMockPublisher() {
-      var Mock = require("mockjs");
-      var data = Mock.mock({
-        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
-        "list|1-10": [
-          {
-            // 属性 id 是一个自增数，起始值为 1，每次增 1
-            "id|+1": 1,
-            headPortrait:'@word(3, 5)',
-            publisherName:'@word(5, 10)',
-          },
-        ],
+      getPublisher(this.pageNum).then((res) => {
+        // console.log(res)
+        // //获取数据
+        this.tableData = res.rows;
+        this.total = res.total;
+        console.log(res);
       });
-      this.mockPublisher = data;
     },
-    //获取数据
-    getTableList(){
-      this.tableData = this.mockPublisher.list;
+    //添加发行方 点击按钮跳转
+    addPublisher() {
+      this.$router.push("/publisherList/addPublisher");
+    },
+    //删除
+    deletePublisher(row) {
+      console.log(row);
+      row = row.row.publisherId;
+      deletePublisher(row).then((res) => {
+        console.log(res);
+        this.$message({
+          message: "恭喜你，删除成功! ",
+          type: "success",
+        });
+        this.$router.go(0);
+      });
+    },
+
+    //重置
+    reset(){
+      this.input = "";
+    },
+
+    //搜索
+    searchPublisher(){
+      searchPublisher(this.input).then((res) =>{
+        console.log(res);
+        this.tableData = res.rows
+      })
+      this.reset();
+    },
+
+    //分页
+    handleCurrentChange(val){
+      getPublisher(val).then((res) =>{
+        this.tableData = res.rows
+        this.total = res.total
+      })
     }
   },
 };