tnbapp/src/views/admin/DataSource.vue

<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"
          width="400px"
        >
          <template slot-scope="scope">
            <a :href="scope.row.pageUrl" style="text-decoration-line: none" target="_blank">
              <el-tooltip
                :content="scope.row.title"
                raw-content
                placement="top-start"
              >
                <span v-if="scope.row.title.length <= 60">
                  {{ scope.row.title }}
                </span>
                <span v-else>
                  {{ scope.row.title.substr(0, 55) + "..." }}
                </span>
              </el-tooltip>
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="magnetUri"
          label="Link"
        >
          <template slot-scope="scope">
            <a :href="scope.row.magnetUri">
              <span class="el-icon-link" />
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="size"
          label="Size"
        />
        <el-table-column
          prop="pubDate"
          label="Date"
        />
        <el-table-column
          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="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="cache(scope.row)"
            >缓存</el-button>
          </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
        background
        :small="screenWidth <= 768"
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="totalSize"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      />
    </el-row>
  </el-row>
</template>

<script>
import {cacheDataSource, deleteDataSource, getDataSource} from '@/api/admin'

export default {
  name: 'DataSource',
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 100,
      totalSize: 0,
      dataList: [],
      searchForm: {
        page: 1,
        status: '1',
        title: null
      },
      multipleSelection: []
    }
  },
  created() {
    document.title = '数据源'
    this.getData()
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.searchForm.page = this.currentPage
      this.getData()
      // 回到顶部
      scrollTo(0, 0)
    },
    getData() {
      this.dataList = []
      getDataSource(this.searchForm).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list
          this.totalSize = resp.data.totalSize
        } else {
          this.$notify({
            title: '提示',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    cache(row) {
      cacheDataSource(row.magnetId).then(resp => {
        if (resp.code === 0) {
          this.$notify({
            message: row.title + ' 正在缓存中',
            type: 'warning',
            duration: 3000
          })
        } else {
          this.$notify({
            title: '提示',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      })
    },
    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)
    }
  }
}
</script>

<style>
</style>