cloud-web/src/views/task/task/index.vue

455 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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第三方插件jsjson文件图片文件等等,
//例如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>