mirror of
https://gitee.com/dromara/dbswitch.git
synced 2025-09-13 07:29:05 +00:00
313 lines
8.8 KiB
Vue
313 lines
8.8 KiB
Vue
<template>
|
|
<div>
|
|
<el-card>
|
|
<div class="assignment-list-top">
|
|
<div class="left-search-input-group">
|
|
<div class="left-search-input">
|
|
<el-input placeholder="请输入任务名称关键字搜索"
|
|
v-model="keyword"
|
|
clearable=true
|
|
@change="searchByKeyword"
|
|
style="width:300px">
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<div class="right-add-button-group">
|
|
<el-button type="primary"
|
|
icon="el-icon-document-add"
|
|
@click="handleCreate">添加</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
|
:data="tableData"
|
|
size="small"
|
|
border>
|
|
<el-table-column prop="id"
|
|
label="编号"
|
|
min-width="8%"></el-table-column>
|
|
<el-table-column prop="name"
|
|
label="名称"
|
|
show-overflow-tooltip
|
|
min-width="30%"></el-table-column>
|
|
<el-table-column prop="scheduleMode"
|
|
label="调度"
|
|
:formatter="stringFormatSchedule"
|
|
min-width="8%"></el-table-column>
|
|
<el-table-column prop="isPublished"
|
|
label="已发布"
|
|
:formatter="boolFormatPublish"
|
|
:show-overflow-tooltip="true"
|
|
min-width="8%"></el-table-column>
|
|
<el-table-column prop="createTime"
|
|
label="时间"
|
|
min-width="15%"></el-table-column>
|
|
<el-table-column label="操作"
|
|
min-width="30%">
|
|
<template slot-scope="scope">
|
|
<el-button size="small"
|
|
type="danger"
|
|
icon="el-icon-timer"
|
|
v-if="scope.row.isPublished===false"
|
|
@click="handlePublish(scope.$index, scope.row)"
|
|
circle>发布</el-button>
|
|
<el-button size="small"
|
|
type="primary"
|
|
icon="el-icon-delete-location"
|
|
v-if="scope.row.isPublished===true"
|
|
@click="handleRetireTask(scope.$index, scope.row)"
|
|
circle>下线</el-button>
|
|
<el-button size="small"
|
|
type="danger"
|
|
icon="el-icon-video-play"
|
|
v-if="scope.row.isPublished===true"
|
|
@click="handleRunTask(scope.$index, scope.row)"
|
|
circle>执行</el-button>
|
|
<el-button size="small"
|
|
type="warning"
|
|
icon="el-icon-edit"
|
|
v-if="scope.row.isPublished===false"
|
|
@click="handleUpdate(scope.$index, scope.row)"
|
|
circle>修改</el-button>
|
|
<el-button size="small"
|
|
type="success"
|
|
icon="el-icon-delete"
|
|
v-if="scope.row.isPublished===false"
|
|
@click="handleDelete(scope.$index, scope.row)"
|
|
circle>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="page"
|
|
align="right">
|
|
<el-pagination @size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[5, 10, 20, 40]"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalCount"></el-pagination>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
data () {
|
|
return {
|
|
loading: true,
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
totalCount: 2,
|
|
keyword: null,
|
|
tableData: [],
|
|
};
|
|
},
|
|
methods: {
|
|
loadData: function () {
|
|
this.$http({
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
url: "/dbswitch/admin/api/v1/assignment/list",
|
|
data: JSON.stringify({
|
|
searchText: this.keyword,
|
|
page: this.currentPage,
|
|
size: this.pageSize
|
|
})
|
|
}).then(res => {
|
|
if (0 === res.data.code) {
|
|
this.currentPage = res.data.pagination.page;
|
|
this.pageSize = res.data.pagination.size;
|
|
this.totalCount = res.data.pagination.total;
|
|
this.tableData = res.data.data;
|
|
} else {
|
|
alert("加载任务列表失败:" + res.data.message);
|
|
}
|
|
},
|
|
function () {
|
|
console.log("load assignments list failed");
|
|
}
|
|
);
|
|
},
|
|
searchByKeyword: function () {
|
|
this.loadData();
|
|
},
|
|
boolFormatPublish (row, column) {
|
|
if (row.isPublished === true) {
|
|
return "是";
|
|
} else {
|
|
return "否";
|
|
}
|
|
},
|
|
stringFormatSchedule (row, column) {
|
|
if (row.scheduleMode == "MANUAL") {
|
|
return "手动";
|
|
} else {
|
|
return "系统";
|
|
}
|
|
},
|
|
handleCreate: function () {
|
|
this.$router.push('/task/create')
|
|
},
|
|
handleUpdate: function (index, row) {
|
|
this.$router.push({ path: '/task/update', query: { id: row.id } })
|
|
},
|
|
handleDelete: function (index, row) {
|
|
this.$confirm(
|
|
"此操作将此任务ID=" + row.id + "删除么, 是否继续?",
|
|
"提示",
|
|
{
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
}
|
|
).then(() => {
|
|
this.$http.delete(
|
|
"/dbswitch/admin/api/v1/assignment/delete/" + row.id
|
|
).then(res => {
|
|
if (0 === res.data.code) {
|
|
this.loadData();
|
|
} else {
|
|
if (res.data.message) {
|
|
alert("删除任务失败:" + res.data.message);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
handlePublish: function (index, row) {
|
|
this.$http({
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
url: "/dbswitch/admin/api/v1/assignment/deploy?ids=" + row.id,
|
|
}).then(res => {
|
|
if (0 === res.data.code) {
|
|
this.$message("任务发布成功");
|
|
this.loadData();
|
|
} else {
|
|
if (res.data.message) {
|
|
alert("任务发布失败," + res.data.message);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handleRunTask: function (index, row) {
|
|
this.$http({
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
url: "/dbswitch/admin/api/v1/assignment/run",
|
|
data: JSON.stringify([row.id])
|
|
}).then(res => {
|
|
if (0 === res.data.code) {
|
|
this.$message("手动启动执行任务成功");
|
|
this.loadData();
|
|
} else {
|
|
if (res.data.message) {
|
|
alert("手动启动执行任务失败," + res.data.message);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handleRetireTask: function (index, row) {
|
|
this.$http({
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
url: "/dbswitch/admin/api/v1/assignment/retire?ids=" + row.id,
|
|
}).then(res => {
|
|
if (0 === res.data.code) {
|
|
this.$message("下线任务成功");
|
|
this.loadData();
|
|
} else {
|
|
if (res.data.message) {
|
|
alert("下线任务失败," + res.data.message);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handleSizeChange: function (pageSize) {
|
|
this.loading = true;
|
|
this.pageSize = pageSize;
|
|
this.loadData();
|
|
},
|
|
|
|
handleCurrentChange: function (currentPage) {
|
|
this.loading = true;
|
|
this.currentPage = currentPage;
|
|
this.loadData();
|
|
}
|
|
},
|
|
created () {
|
|
this.loadData();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-card,
|
|
.el-message {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.el-table {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.demo-table-expand {
|
|
font-size: 0;
|
|
}
|
|
|
|
.demo-table-expand label {
|
|
width: 90px;
|
|
color: #99a9bf;
|
|
}
|
|
|
|
.demo-table-expand .el-form-item {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
width: 50%;
|
|
}
|
|
|
|
.el-input.is-disabled .el-input__inner {
|
|
background-color: #f5f7fa;
|
|
border-color: #e4e7ed;
|
|
color: #c0c4cc;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.assignment-list-top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.left-search-input-group {
|
|
width: calc(100% - 100px);
|
|
margin-right: auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.left-search-input {
|
|
width: 300px;
|
|
margin-right: auto;
|
|
margin: 10px 5px;
|
|
}
|
|
.right-add-button-group {
|
|
width: 100px;
|
|
margin-left: auto;
|
|
margin: 10px 5px;
|
|
}
|
|
</style>
|