作者 xudada

海关智慧定时任务管理功能

... ... @@ -36,6 +36,13 @@ module.exports = {
'^/api/static': '/static', //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
},
'/api/task':{
target: 'http://192.168.1.7:8010',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: false,
pathRewrite: {
'^/api/task/': '/', //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
},
'/api':{
target: 'http://192.168.1.63:12343',//设置你调用的接口域名和端口号 别忘了加http
// target: 'http://192.168.1.189:12343',//设置你调用的接口域名和端口号 别忘了加http
... ...
import http from '../http.js'
const API_URL = 'task';
const api = {
// 任务管理接口
getAllTasks() {
return http.get(`${API_URL}/tasks`);
},
createTask(data) {
return http.post(`${API_URL}/tasks`, data);
},
updateTask(id, data) {
return http.post(`${API_URL}/tasks/${id}`, data);
},
deleteTask(id) {
return http.post(`${API_URL}/tasks/delete/${id}`);
},
executeTask(id) {
return http.post(`${API_URL}/tasks/execute/${id}`);
},
batchExecute(ids) {
return http.post(`${API_URL}/tasks/batch-execute`, { ids });
},
getExecuteTasks() {
return http.get(`${API_URL}/tasks/execute/list`);
},
// 执行历史接口
getExecutionHistory(taskId) {
return http.get(`${API_URL}/api/task-execution-history/${taskId}`);
},
saveExecutionHistory(data) {
return http.post(`${API_URL}/api/task-execution-history`, data);
}
};
export default api;
... ...
... ... @@ -714,6 +714,17 @@ let routes = [
{ path: '/page6', component: Page6, name: '综合楼空调站' },
]
},
{
path: '/tasks',
component: () => import('./views/HomeNew.vue'),
name: '动态任务管理',
iconCls: 'el-icon-setting',
leaf: false,
children: [
{ path: '/task_manage', component: () => import('@/views/task/index.vue'), name: '用户管理' },
{ path: '/task_management', component: () => import('./views/task/components/TaskManagement'), name: '任务管理' },
]
},
{
path: '*',
... ...
<template>
<el-dialog :title="'任务历史记录'" :visible.sync="visible">
<el-table :data="history">
<el-table-column prop="executedAt" label="执行时间"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column prop="result" label="执行结果"></el-table-column>
</el-table>
<span slot="footer">
<el-button @click="visible = false">关闭</el-button>
</span>
</el-dialog>
</template>
<script>
import api from '../../../api/task/index';
export default {
props: ['taskId', 'visible'],
data() {
return {
history: []
};
},
watch: {
taskId: async function(newVal) {
if (newVal) {
try {
const res = await api.getExecutionHistory(newVal);
this.history = res.data.data;
} catch (e) {
this.$message.error('加载历史记录失败');
}
}
}
}
};
</script>
... ...
<template>
<div class="task-management">
<el-card class="box-card">
<!-- 搜索栏 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="任务名称">
<el-input v-model="search.name" placeholder="任务名称"></el-input>
</el-form-item>
<el-button type="primary" @click="fetchTasks">搜索</el-button>
<el-button type="success" @click="showCreateForm">新建任务</el-button>
</el-form>
<!-- 任务列表 -->
<el-table
:data="tasksTableData"
border
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column prop="name" label="任务名称"></el-table-column>
<el-table-column prop="cronExpression" label="Cron表达式"></el-table-column>
<el-table-column prop="query" label="状态">
<template slot-scope="scope">
{{ scope.row.query || '待执行' }}
</template>
</el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<el-button size="mini" @click="showEditorm(scope.$index, scope.row)">编辑</el-button>
<el-popconfirm
confirm-button-text="好的"
cancel-button-text="不用了"
icon="el-icon-info"
icon-color="red"
title="确定删除该商品吗?"
@confirm="handleDelete(scope.$index, scope.row)"
>
<el-button
type="danger"
slot="reference"
>删除</el-button>
</el-popconfirm>
<el-button size="mini" type="primary" @click="showHistory(scope.row.id)">历史记录</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
layout="prev, pager, next"
:total="total"
@current-change="handlePageChange">
</el-pagination>
<!-- 新建/编辑弹窗 -->
<el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogVisible" width="40%">
<el-form :model="from" label-width="100px">
<el-form-item label="任务名称">
<el-input v-model="from.name"></el-input>
</el-form-item>
<el-form-item label="Cron表达式">
<el-input v-model="from.cronExpression"></el-input>
</el-form-item>
<el-form-item label="查询密钥">
<el-input v-model="from.apiKey"></el-input>
</el-form-item>
<el-form-item label="查询类别">
<el-input v-model="from.categoryId"></el-input>
</el-form-item>
<el-form-item label="查询内容">
<el-input type="textarea" v-model="from.inputs"></el-input>
</el-form-item>
<!-- 其他字段... -->
</el-form>
<span slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogStatus==='create'?outerVisible_add():outerVisible_edit()">保存</el-button>
</span>
</el-dialog>
<!-- 历史记录弹窗 -->
<task-history
:visible="historyVisible"
:task-id="currentTaskId"
@close="historyVisible = false">
</task-history>
</el-card>
</div>
</template>
<script>
import TaskHistory from './TaskHistory.vue';
import api from '../../../api/task/index';
export default {
components: {TaskHistory},
data() {
return {
from:{
id: undefined,
name: "",
cronExpression: "",
query: "",
inputs: "",
username: "",
conversationId: "",
apiKey: "",
responseMode: "",
createdAt: "",
updatedAt:"",
categoryId: 0
},
tasksTableData: [],
search: {name: ''},
dialogVisible: false,
dialogTitle: '新建任务',
currentTask: {},
currentTaskId: 0,
historyVisible: false,
selectedTasks: [],
total:0,
dialogStatus:'create',
dialogMap:{
update: '编辑',
create: '添加'
},
};
},
methods: {
async outerVisible_add(){
try {
const res = await api.createTask(this.from);
if(res.data.code=='200'){
this.$message.success('任务新增成功');
}else{
this.$message.success('任务新增失败');
}
this.dialogVisible=false;
this.fetchTasks();
} catch (e) {
this.$message.error('新增任务失败');
}
},
async outerVisible_edit(){
try {
const res = await api.updateTask(this.from.id,this.from);
if(res.data.code=='200'){
this.$message.success('任务更新成功');
}else{
this.$message.success('任务更新失败');
}
this.dialogVisible=false;
this.fetchTasks();
} catch (e) {
this.$message.error('任务更新失败');
}
},
handlePageChange(){},
showCreateForm(){
this.dialogStatus='create';
this.dialogVisible=true;
},
handleSelectionChange(){},
async showHistory(id){
this.currentTaskId=id;
this.historyVisible=true;
},
async handleDelete(index,row){
const res = await api.deleteTask(row.id);
if(res.data.code=='200'){
this.$message.success('任务删除成功');
}else{
this.$message.success('任务删除失败');
}
this.fetchTasks();
},
showEditForm(index,row){
console.log(row)
this.dialogStatus='update';
this.from=row;
this.dialogVisible=true;
},
async fetchTasks() {
try {
const res = await api.getAllTasks();
this.tasksTableData = res.data.data;
} catch (e) {
this.$message.error('加载任务失败');
}
},
// 其他方法...
},
created() {
this.fetchTasks();
}
};
</script>
... ...
<template>
<div id="app">
<el-container>
<el-header>任务管理系统</el-header>
<el-main>
<el-tabs v-model="activeTab">
<el-tab-pane label="任务管理" name="tasks">
<task-management></task-management>
</el-tab-pane>
<el-tab-pane label="执行历史" name="history">
<task-history-list></task-history-list>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</div>
</template>
<script>
import TaskManagement from './components/TaskManagement.vue';
import TaskHistoryList from './components/TaskHistory.vue';
export default {
components: {
TaskManagement,
TaskHistoryList
}
};
</script>
... ...