播客专辑 添加关联节目接口调试

src/views/music/blog/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
-    <el-form label-width="100px" size="small">
-      <!-- <el-row>
+    <el-form class="form" label-width="100px" size="small">
+      <el-row>
         <el-col :span="12">
           <el-form-item label="播客封面：">
             <imageUpload />
@@ -39,11 +39,12 @@
         <el-select placeholder="请选择标签分类">
           <el-option />
         </el-select>
-      </el-form-item> -->
+      </el-form-item>
       <el-form-item label="关联节目：" style="width: 1000px">
         <el-button type="primary" @click="getPage">关联</el-button>
         <el-button @click="getDelete">解除关联</el-button>
-        <el-table :data="tableData1" height="229px" @selection-change="selectionChange">
+        <el-table :data="tableData1" height="229px"
+          @selection-change="handleSelectionChange($event, 'delete')">
           <el-table-column type="selection" align="center" />
           <el-table-column prop="id" label="节目ID" align="center" width="150px" />
           <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip />
@@ -60,27 +61,29 @@
 
     <!-- 关联弹窗 -->
     <el-dialog :visible.sync="dialogVisible" title="关联节目" width="1000px">
-      <el-form :model="form2" inline size="mini">
-        <el-form-item label="ID：">
-          <el-input v-model="form2.id" placeholder="请输入节目ID" />
+      <el-form :model="programmeForm" inline size="mini">
+        <el-form-item label="节目ID：">
+          <el-input v-model="programmeForm.id" placeholder="请输入节目ID" />
         </el-form-item>
         <el-form-item label="节目名称：">
-          <el-input v-model="form2.name" placeholder="请输入节目名称" />
+          <el-input v-model="programmeForm.name" placeholder="请输入节目名称" />
         </el-form-item>
         <el-form-item>
-          <el-button icon="el-icon-search" type="primary">搜索</el-button>
+          <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
         </el-form-item>
       </el-form>
-      <el-table :data="tableData2" v-loading="loading" :row-key="getRowKey"
-        @selection-change="handleSelectionChange" @toggleRowSelection="handleToggleRowSelection">
+      <el-table :data="programmeTable" ref="programmeTable" v-loading="loading" :row-key="getRowKey"
+        @selection-change="handleSelectionChange($event, 'add')">
         <el-table-column type="selection" reserve-selection align="center" />
-        <el-table-column prop="id" label="节目ID" align="center" width="150px"/>
-        <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip/>
-        <el-table-column prop="platformId" label="资源平台" align="center" width="100px"/>
-        <el-table-column prop="status" label="当前状态" align="center" width="100px" :formatter="statusFormatter" />
+        <el-table-column prop="id" label="节目ID" align="center" width="150px" />
+        <el-table-column prop="name" label="节目名称" align="center" show-overflow-tooltip />
+        <el-table-column prop="platformId" label="资源平台" align="center" width="100px" />
+        <el-table-column prop="status" label="当前状态" align="center" width="100px"
+          :formatter="statusFormatter" />
       </el-table>
-      <pagination v-show="total>0" :total="total" :page.sync="form2.pageNum" :limit.sync="form2.pageSize"
-        @pagination="getPage" />
+      <pagination v-show="total>0" :total="total" :page.sync="programmeForm.pageNum"
+        :limit.sync="programmeForm.pageSize" @pagination="getPage" />
     </el-dialog>
   </div>
 </template>
@@ -99,18 +102,19 @@ export default {
       // 遮罩层
       loading: true,
       // 表单
-      form2: {
+      programmeForm: {
         pageNum: 1,
         pageSize: 10
       },
       // 弹窗
       dialogVisible: false,
-      // 列表
+      // 选择的节目列表
       tableData1: [],
-      tableData2: [],
-      total: 0,
       // 解除关联
-      delete_list: []
+      delete_list: [],
+      // 节目总列表
+      programmeTable: [],
+      total: 0,
     };
   },
   methods: {
@@ -118,10 +122,9 @@ export default {
     getPage() {
       this.loading = true
       this.dialogVisible = true,
-        getProgrammePage(this.form2).then(res => {
+        getProgrammePage(this.programmeForm).then(res => {
           if (res.code === 0) {
-            console.log(res.data);
-            this.tableData2 = res.data.records
+            this.programmeTable = res.data.records
             this.total = res.data.total
             this.loading = false
           }
@@ -129,24 +132,39 @@ export default {
     },
 
     // 多选
-    handleSelectionChange(e) {
-      this.tableData1 = e;
+    handleSelectionChange(e, key) {
+      if (key === 'add') {
+        this.tableData1 = e
+      } else {
+        this.delete_list = e
+      }
     },
     getRowKey(row) {
       return row.id;
     },
-    selectionChange(e) {
-      this.delete_list = e
-    },
+
     // 解除关联
     getDelete() {
-      this.delete_list.map(i => {
-        let index = this.tableData1.findIndex(j => j.id === i.id)
-        this.tableData1.splice(index, 1)
-        this.tableData2
+      this.delete_list.forEach(i => {
+        this.$refs.programmeTable.toggleRowSelection(i)
       })
     },
 
+    // 搜索
+    getSearch(){
+      this.programmeForm.pageNum = 1
+      this.getPage()
+    },
+
+    // 重置
+    getRefresh(){
+      this.programmeForm = {
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getPage()
+    },
+
     getCancel() {
       this.$tab.closeOpenPage("/music/blog");
     },
@@ -161,7 +179,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-form {
+.form {
   width: 600px;
 }
 </style>