455 lines
13 KiB
Vue
455 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
|
||
<el-form label-width="80px" :model="taskReq" ref="queryForm" :inline="true" class="demo-form-inline" size="small">
|
||
<el-form-item label="任务包含名称">
|
||
<el-input v-model="taskReq.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="优先级选择">
|
||
<el-select v-model="taskReq.weigh" placeholder="请选择等级">
|
||
<el-option label="请选择" value=""></el-option>
|
||
<el-option label="紧急" value="1"></el-option>
|
||
<el-option label="低" value="2"></el-option>
|
||
<el-option label="中" value="3"></el-option>
|
||
<el-option label="高" value="4"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="任务执行状态">
|
||
<el-select v-model="taskReq.status" placeholder="请选择等级">
|
||
<el-option label="请选择" value=""></el-option>
|
||
<el-option label="待执行" value="0"></el-option>
|
||
<el-option label="正在执行" value="1"></el-option>
|
||
<el-option label="执行完毕" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-button @click="findSelectTaskList()">
|
||
查询
|
||
</el-button>
|
||
</el-form>
|
||
|
||
|
||
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
v-hasPermi="['system:config:add']"
|
||
icon="el-icon-plus"
|
||
plain
|
||
size="mini"
|
||
type="primary"
|
||
@click="handleAdd"
|
||
>新增
|
||
</el-button>
|
||
</el-col>
|
||
|
||
|
||
<!-- <el-dialog title="添加数据源接入" :visible.sync="dialogFormVisible">-->
|
||
|
||
<!-- <el-form :model="sourceAddReq">-->
|
||
<!-- <el-form-item label="id">-->
|
||
<!-- <el-input v-model="sourceAddReq.id"></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item label="任务名称">-->
|
||
<!-- <el-input v-model="sourceAddReq.name"></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item label="任务执行状态">-->
|
||
<!-- <el-input v-model="sourceAddReq.weigh"></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- <el-form-item label="任务完成度">-->
|
||
<!-- <el-input v-model="sourceAddReq.status"></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-form>-->
|
||
<!-- </el-dialog>-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<el-table
|
||
:data="taskList"
|
||
style="width: 100%"
|
||
|
||
@selection-change="handleSelectionChange">
|
||
|
||
|
||
|
||
|
||
<el-table-column
|
||
type="selection"
|
||
width="55">
|
||
</el-table-column>
|
||
|
||
|
||
<el-table-column
|
||
label="id"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<i class="el-icon-time"></i>
|
||
<span style="margin-left: 10px">{{ scope.row.id }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="任务名称"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<i class="el-icon-time"></i>
|
||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="任务权重级别"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">紧急</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">底</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">中</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">高</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="任务执行状态"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px" v-if="scope.row.status ==0 ">待执行</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.status ==1 ">正在执行</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.status ==2 ">执行完毕</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="任务完成度"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px" v-if="scope.row.status ==0 ">待执行</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.status ==1 ">正在执行</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.status ==2 ">执行完毕</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
|
||
<el-table-column
|
||
align="right">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
icon="el-icon-pear"
|
||
size="mini"
|
||
type="text"
|
||
@click="executeTask(scope.row)">执行</el-button>
|
||
|
||
<el-button
|
||
icon="el-icon-delete"
|
||
size="mini"
|
||
type="text"
|
||
@click="handleDelete(scope.row)">删除</el-button>
|
||
|
||
<el-button
|
||
icon="el-icon-update"
|
||
size="mini"
|
||
type="text"
|
||
@click="updateById(scope.row)">修改</el-button>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 添加界面-->
|
||
|
||
<el-dialog title="添加任务信息" :visible.sync="dialogFormVisible">
|
||
|
||
<el-form :model="taskAddReq">
|
||
<el-form-item label="任务名称">
|
||
<el-input v-model="taskAddReq.name"></el-input>
|
||
</el-form-item>
|
||
|
||
|
||
<el-form-item label="优先级选择">
|
||
<el-select v-model="taskReq.weigh" placeholder="请选择等级">
|
||
<el-option label="请选择" value=""></el-option>
|
||
<el-option label="紧急" value="1"></el-option>
|
||
<el-option label="低" value="2"></el-option>
|
||
<el-option label="中" value="3"></el-option>
|
||
<el-option label="高" value="4"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="addTask()">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
<!-- 添加任务详情设计-->
|
||
<el-dialog title="添加表" :visible.sync="taskInputAdd">
|
||
|
||
<el-form label-width="80px" :model="taskInfo" ref="queryForm" :inline="true" class="demo-form-inline" size="small">
|
||
<el-form-item label="任务id">
|
||
<el-input v-model="taskInfo.taskId"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="数据库id">
|
||
<el-input v-model="taskInfo.databaseId"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据表">
|
||
<el-select v-model="taskInfo.tableName" placeholder="请选择等级">
|
||
<el-option label="请选择" value="0"></el-option>
|
||
<span v-for="table in taskInfoList">
|
||
<el-option @select="changeTableName(table)" :label=table.tableName :value=table.id :key=table.id></el-option>
|
||
</span>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="表别名">
|
||
<el-input v-model="taskInfo.tableAsName"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="taskInputAdd = false">取 消</el-button>
|
||
<el-button type="primary" @click="addTaskInput(taskInfo)">下一步</el-button>
|
||
</div>
|
||
|
||
|
||
</el-dialog>
|
||
|
||
<!-- 字段选择列表-->
|
||
<el-dialog title="添加表" :visible.sync="taskInputFieldAdd">
|
||
|
||
<el-table
|
||
:data="structureList"
|
||
style="width: 100%"
|
||
|
||
@selection-change="handleSelectionChange">
|
||
|
||
|
||
<el-table-column
|
||
type="selection"
|
||
width="55">
|
||
</el-table-column>
|
||
|
||
|
||
<el-table-column
|
||
label="字段"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<i class="el-icon-time"></i>
|
||
<span style="margin-left: 10px">{{ scope.row.id }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="类型/长度"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<i class="el-icon-time"></i>
|
||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="非空"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<i class="el-icon-time"></i>
|
||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="注释"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<i class="el-icon-time"></i>
|
||
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="处理规则"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>
|
||
<span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="表别名"
|
||
width="180">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.fieldAsEngineId"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="addTask()">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||
//例如:import 《组件名称》 from '《组件路径》,
|
||
import {selectSourceList} from "@/api/etl/switch";
|
||
import {selectSourceExport} from "@/api/etl/switch";
|
||
import {connectionTest} from "@/api/etl/switch";
|
||
import {insertAdd} from "@/api/etl/switch";
|
||
import {getInfo} from "@/api/etl/switch";
|
||
import {
|
||
addTask,
|
||
deleteById,
|
||
deleteByTaskId,
|
||
findByInputId,
|
||
selectTaskList,
|
||
taskInputList,
|
||
updateById
|
||
} from '@/api/task/task'
|
||
|
||
export default {
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
//这里存放数据"
|
||
|
||
return {
|
||
dialogFormVisible:false,
|
||
//任务设计添加表弹窗
|
||
taskInputAdd:false,
|
||
//选择字段弹窗
|
||
taskInputFieldAdd:false,
|
||
taskReq:{
|
||
|
||
},
|
||
taskAddReq:{},
|
||
taskInputReq:{},
|
||
taskList:[],
|
||
taskInfoList:[],
|
||
taskInfo:{},
|
||
tableList:[],
|
||
structureList:[],
|
||
};
|
||
},
|
||
//计算属性 类似于data概念",
|
||
computed: {},
|
||
//监控data中的数据变化",
|
||
watch: {},
|
||
//方法集合",
|
||
methods: {
|
||
//选择数据表改变数据
|
||
changeTableName(row){
|
||
console.log(row);
|
||
this.taskInfo = row;
|
||
},
|
||
|
||
//查询字段
|
||
findByInputId(taskInfo){
|
||
findByInputId(taskInfo.id).then(res=>{
|
||
this.structureList = res.data;
|
||
})
|
||
|
||
},
|
||
|
||
//数据结构列表
|
||
taskInputList(){
|
||
taskInputList().then(res=>{
|
||
this.taskInfoList = res.data;
|
||
});
|
||
},
|
||
|
||
executeTask(){
|
||
this.taskInputAdd = true;
|
||
this.taskInputList();
|
||
},
|
||
|
||
|
||
addTaskInput(taskInfo){
|
||
this.taskInputAdd = false;
|
||
this.findByInputId(taskInfo);
|
||
this.taskInputFieldAdd = true;
|
||
},
|
||
|
||
//添加页面展示
|
||
handleAdd(){
|
||
this.dialogFormVisible = true;
|
||
},
|
||
|
||
|
||
//添加任务
|
||
addTask(){
|
||
addTask(this.taskAddReq).then(res=>{
|
||
alert(res.msg)
|
||
if(res.code == 200){
|
||
location.reload();
|
||
}
|
||
});
|
||
},
|
||
|
||
//根据条件查询列表
|
||
findSelectTaskList(){
|
||
selectTaskList(this.taskReq).then(res=>{
|
||
console.log(res.data);
|
||
this.taskList=res.data;
|
||
console.log(this.taskList);
|
||
})
|
||
},
|
||
|
||
updateById(){
|
||
|
||
},
|
||
|
||
handleDelete(row){
|
||
deleteByTaskId(row.id).then(res=>{
|
||
alert(res.msg);
|
||
if(res.code == 200){
|
||
location.reload();
|
||
}
|
||
})
|
||
},
|
||
|
||
handleSelectionChange(row){
|
||
|
||
},
|
||
},
|
||
//生命周期 - 创建完成(可以访问当前this实例)",
|
||
created() {
|
||
this.findSelectTaskList();
|
||
},
|
||
//生命周期 - 挂载完成(可以访问DOM元素)",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能,这个函数会触发",
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|