创新实训博客（43）——爬取任务管理界面修改配置

任务管理界面

历史任务界面

界面设计

1. el-tab的使用

2. 在列表项显示tag的配置

[code]          <el-table-column align="center" label="状态" width="120%">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 0" type="info">已添加</el-tag>
<el-tag v-if="scope.row.status === 1" type="primary">进行中</el-tag>
<el-tag v-if="scope.row.status === 2" type="success">已完成</el-tag>
<el-tag v-if="scope.row.status === 3" type="danger">已取消</el-tag>
</template>
</el-table-column>

3. 最后的管理按钮显示配置

[code]          <el-table-column align="center" label="管理" width="120%">
<template slot-scope="scope">
<el-button v-if="scope.row.status === 1" type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)">终止</el-button>
<el-button v-if="scope.row.status === 3" type="primary" size="mini" icon="el-icon-refresh" @click="del(scope.row)">开始</el-button>
</template>
</el-table-column>

4. 底部分页的配置

[code]        <el-pagination :total="currentTotal" :current-page.sync="currentPage" background layout="prev, pager, next" style="float: right; margin: 8px" @current-change="handleCurrentChange" />

api接口调用

1. 获取任务总数

[code]export function adminGetCrawlCount() {
return request({
url: '/admin/crawl/task/count',
method: 'get'
})
}

2. 获取任务列表

[code]export function adminGetCrawlList(page, size) {
return request({
url: '/admin/crawl/task/list',
method: 'get',
params: { page: page, size: size}
})
}

3. 获取历史任务总数

[code]export function adminGetCrawlHisCount() {
return request({
url: '/admin/crawl/history/count',
method: 'get'
})
}

4. 获取历史任务列表

[code]export function adminGetCrawlHisList(page, size) {
return request({
url: '/admin/crawl/history/list',
method: 'get',
params: { page: page, size: size}
})
}

5. 添加任务

[code]export function adminAddCrawl(id) {
return request({
url: '/admin/crawl/task/add/' + id,
method: 'get'
})
}

在js中使用api获取信息

1. 监听任务管理界面页面变化

[code]handleCurrentChange() {
var that = this
that.listLoading = true
adminGetCrawlCount().then(response => {
const { data } = response
that.currentTotal = data
adminGetCrawlList(that.currentPage, 10).then(response2 => {
that.list = response2.data
that.listLoading = false
})
})
},

2. 监听历史任务列表的页面变化

[code]    handleHisChange() {
var that = this
that.listLoading = true
adminGetCrawlHisCount().then(response => {
const { data } = response
that.hisTotal = data
adminGetCrawlHisList(that.hisPage, 10).then(response2 => {
that.hisList = response2.data
that.listLoading = false
})
})
},