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

283 lines
8.0 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.weigh" 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>
<span style="margin-left: 10px">{{ scope.row.status }}</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>
<span style="margin-left: 10px">{{ scope.row.status }}</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="update(scope.row)">执行</el-button>
<el-button
icon="el-icon-delete"
size="mini"
type="text"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
<!-- 添加界面-->
<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-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-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-table>
</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, selectTaskList, updateById } from '@/api/task/task'
export default {
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
data() {
//这里存放数据"
return {
dialogFormVisible:false,
taskReq:{
},
taskAddReq:{},
taskList:[],
};
},
//计算属性 类似于data概念",
computed: {},
//监控data中的数据变化",
watch: {},
//方法集合",
methods: {
//添加页面展示
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(){
},
handleSelectionChange(row){
},
},
//生命周期 - 创建完成可以访问当前this实例",
created() {
this.findSelectTaskList();
},
//生命周期 - 挂载完成可以访问DOM元素",
mounted() {
},
beforeCreate() {
}, //生命周期 - 创建之前",
beforeMount() {
}, //生命周期 - 挂载之前",
beforeUpdate() {
}, //生命周期 - 更新之前",
updated() {
}, //生命周期 - 更新之后",
beforeDestroy() {
}, //生命周期 - 销毁之前",
destroyed() {
}, //生命周期 - 销毁完成",
activated() {
} //如果页面有keep-alive缓存功能这个函数会触发",
};
</script>
<style scoped>
</style>