更新数据源页面

src/api/admin.js

@@ -1,4 +1,4 @@
-import { get, post } from '@/utils/request'
+import {delete0, get, post} from '@/utils/request'
 
 const adminApi = {
   siteNoticeApi: '/api/content/notice',
@@ -29,7 +29,12 @@ export function getPostList(page) {
 
 // 获取源数据
 export function getDataSource(page) {
-  return get(adminApi.dataSourceApi + '?page=' + page)
+  return get(adminApi.dataSourceApi, page)
+}
+
+// 删除
+export function deleteDataSource(data) {
+  return delete0(adminApi.dataSourceApi, data)
 }
 
 // 缓存源数据

src/views/admin/DataSource.vue

@@ -1,11 +1,41 @@
 <template>
   <el-row>
     <el-row>
+      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+        <el-form-item>
+          <el-select v-model="searchForm.status" placeholder="状态" @change="search">
+            <el-option label="未下载" value="1" />
+            <el-option label="下载中" value="2" />
+            <el-option label="已下载" value="3" />
+            <el-option label="已发布" value="4" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="searchForm.title" placeholder="" />
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="warning" @click="search">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-form :inline="true" class="demo-form-inline">
+        <el-form-item>
+          <el-button size="mini" type="danger" @click="deleteMultiple">删除多行</el-button>
+        </el-form-item>
+      </el-form>
       <el-table
+        ref="multipleTable"
         :data="dataList"
         border
         style="width: 100%"
+        @selection-change="handleSelectionChange"
       >
+        <el-table-column
+          type="selection"
+        />
+        <el-table-column
+          prop="site"
+          label="Site"
+        />
         <el-table-column
           prop="title"
           label="Name"
@@ -47,13 +77,24 @@
           label="Date"
         />
         <el-table-column
-          prop="pubDate"
-          label="Cache"
-        />
-        <el-table-column
-          prop="pubDate"
-          label="Feed"
-        />
+          prop="status"
+          label="Status"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
+              未下载
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
+              下载中
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 3" :type="'danger'" disable-transitions>
+              已下载
+            </el-tag>
+            <el-tag v-else :type="'danger'" disable-transitions>
+              已发布
+            </el-tag>
+          </template>
+        </el-table-column>
         <el-table-column
           label="操作"
         >
@@ -65,6 +106,10 @@
           </template>
         </el-table-column>
       </el-table>
+      <div style="margin-top: 20px">
+        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+        <el-button @click="toggleSelection()">取消选择</el-button>
+      </div>
     </el-row>
     <el-row>
       <el-pagination
@@ -83,7 +128,7 @@
 </template>
 
 <script>
-import { cacheDataSource, getDataSource } from '@/api/admin'
+import {cacheDataSource, deleteDataSource, getDataSource} from '@/api/admin'
 
 export default {
   name: 'DataSource',
@@ -92,9 +137,15 @@ export default {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
-      pageSize: 20,
+      pageSize: 100,
       totalSize: 0,
-      dataList: []
+      dataList: [],
+      searchForm: {
+        page: 1,
+        status: '1',
+        title: null
+      },
+      multipleSelection: []
     }
   },
   created() {
@@ -104,13 +155,14 @@ export default {
   methods: {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
+      this.searchForm.page = this.currentPage
       this.getData()
       // 回到顶部
       scrollTo(0, 0)
     },
     getData() {
       this.dataList = []
-      getDataSource(this.currentPage).then(resp => {
+      getDataSource(this.searchForm).then(resp => {
         if (resp.code === 0) {
           this.dataList = resp.data.list
           this.totalSize = resp.data.totalSize
@@ -148,6 +200,62 @@ export default {
           })
         }
       })
+    },
+    search() {
+      this.currentPage = 1
+      this.searchForm.page = this.currentPage
+      this.getData(this.searchForm)
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row)
+        })
+      } else {
+        this.$refs.multipleTable.clearSelection()
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    deleteMultiple() {
+      if (this.multipleSelection.length === 0) {
+        this.$notify({
+          message: '至少应选中一行',
+          type: 'warning',
+          duration: 3000
+        })
+      }
+
+      var magnetIds = []
+      for (const item of this.multipleSelection) {
+        magnetIds.push(item.magnetId)
+      }
+
+      deleteDataSource(magnetIds).then(resp => {
+        if (resp.code === 0) {
+          this.$notify({
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+      console.log(ids)
     }
   }
 }