206 lines
6.3 KiB
Vue
206 lines
6.3 KiB
Vue
<template>
|
||
<el-container class="mainBox">
|
||
<el-main class="nopadding">
|
||
<div class="searchMain">
|
||
<div class="title">任务信息</div>
|
||
<div class="formRow">
|
||
<el-form ref="form" :size="size" :model="form" label-width="100px">
|
||
<el-form-item label="任务名称" prop="name">
|
||
<el-select type="text" v-model="form.name" placeholder="请选择任务名称" style="width: 100%;" @visible-change="getNameList" @change="nameChange">
|
||
<el-option v-for="(item,index) in setMap.nameList" :key="index" :value="item.name" :label="item.name">
|
||
<span style="float: left">{{ item.name }}</span>
|
||
<span style="float: right;color: var(--el-text-color-secondary);">{{ item.memo }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="任务描述" prop="memo">
|
||
<el-input type="text" v-model="form.memo" placeholder="请输入任务描述" disabled></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="定时任务表达式" prop="cron_expression">
|
||
<el-input type="text" v-model="form.cron_expression" @input="cronExpressionInput" placeholder="请输入定时任务表达式"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="表达式描述" prop="cron_expression_desc">
|
||
<el-input type="text" v-model="form.cron_expression_desc" placeholder="请输入表达式描述" disabled></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<el-button :size="size" type="primary" @click="save" :loading="isSave">保存配置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-image class="img" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/mingling.png" fit="contain"></el-image>
|
||
</div>
|
||
<div class="title">配置列表
|
||
<span class="tip">注意：此配置由专业IT管理员操作；无配置时以系统默认定时任务配置为准。</span>
|
||
</div>
|
||
</div>
|
||
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" stripe :size="size" highlightCurrentRow :hideDo="true" :hidePagination="true">
|
||
<sc-table-column label="序号" align="center" type="index"></sc-table-column>
|
||
<el-table-column width="200" label="任务名称" prop="name"></el-table-column>
|
||
<el-table-column width="200" label="任务描述" prop="memo"></el-table-column>
|
||
<el-table-column width="200" label="任务表达式" prop="cron_expression"></el-table-column>
|
||
<el-table-column label="表达式描述" prop="cron_expression_desc" show-overflow-tooltip></el-table-column>
|
||
<el-table-column width="100" label="状态" fixed="right" align="center">
|
||
<template #default="scope">
|
||
<el-switch :size="size" v-model="scope.row.active_status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" fixed="right" align="center" width="160">
|
||
<template #default="scope">
|
||
<el-dropdown>
|
||
<el-button class="noBorderBtn" icon="el-icon-more" :size="size"></el-button>
|
||
<template #dropdown>
|
||
<div v-auth="'crontabDelete'">
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item @click="table_del(scope.row, 'delete')" icon="sc-icon-Delete">删除配置</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</div>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "regularTime",
|
||
data(){
|
||
return{
|
||
size:'small',
|
||
isSave:false,
|
||
setMap:{
|
||
nameList:[]
|
||
},
|
||
form:{
|
||
memo:"",
|
||
name:"",
|
||
cron_expression:"",
|
||
cron_expression_desc:"",
|
||
callback:{
|
||
command:""
|
||
},
|
||
type:""
|
||
},
|
||
list:{
|
||
apiObj:this.$API.setup.crontab.list,
|
||
column:[]
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods:{
|
||
async getNameList() {
|
||
const res = await this.$API.setup.crontab.configList.get()
|
||
if(res.code == 200){
|
||
this.setMap.nameList = res.data;
|
||
}
|
||
},
|
||
nameChange(e){
|
||
this.setMap.nameList.forEach(item=>{
|
||
if(item.name == e){
|
||
this.form.memo = item.memo;
|
||
this.form.cron_expression = item.cron_expression;
|
||
this.form.cron_expression_desc = item.cron_expression_desc;
|
||
this.form.callback = item.callback;
|
||
this.form.task_type = item.type;
|
||
|
||
this.setDescribe();
|
||
}
|
||
})
|
||
},
|
||
cronExpressionInput(){
|
||
this.setDescribe();
|
||
},
|
||
// 表达式转换备注
|
||
async setDescribe() {
|
||
let params = {
|
||
cron_expression: this.form.cron_expression
|
||
}
|
||
const res = await this.$API.setup.crontab.describe.post(params);
|
||
if(res.code == 200){
|
||
this.form.cron_expression_desc = res.data.cron_expression;
|
||
}
|
||
},
|
||
save(){
|
||
this.$refs.form.validate(async (valid) => {
|
||
if (valid) {
|
||
this.isSave = true;
|
||
const res = await this.$API.setup.crontab.add.post(this.form);
|
||
this.isSave = false;
|
||
if(res.code == 200){
|
||
this.$refs.table.reload();
|
||
this.visible = false;
|
||
this.$message.success("操作成功")
|
||
}
|
||
}
|
||
})
|
||
},
|
||
table_del(row){
|
||
this.$confirm(`确定删除 ${row.name} 吗？`, '提示', {
|
||
type: 'warning'
|
||
}).then(async () => {
|
||
const reqData = {id: row.id};
|
||
const res = await this.$API.setup.crontab.delete.post(reqData);
|
||
if(res.code == 200){
|
||
this.$refs.table.refresh()
|
||
this.$message.success("删除成功")
|
||
}
|
||
}).catch(()=>{})
|
||
},
|
||
// 状态
|
||
changeSwitch(val, row) {
|
||
row.$switch_yx = true;
|
||
setTimeout(async () => {
|
||
let params = {
|
||
id: row.id,
|
||
status: row.active_status,
|
||
};
|
||
const res = await this.$API.setup.crontab.status.post(params);
|
||
if(res.code !=200){
|
||
row.active_status = !row.active_status;
|
||
}
|
||
delete row.$switch_status;
|
||
delete row.$switch_yx;
|
||
}, 500);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.el-main.nopadding .searchMain{
|
||
align-items: flex-start;
|
||
.title{
|
||
font-weight: 500;
|
||
padding: 0 0 5px 0;
|
||
font-size: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
.tip{
|
||
margin-left: 10px;
|
||
color: var(--el-color-warning);
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
.searchMain{
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
.el-input{
|
||
width: 400px;
|
||
}
|
||
}
|
||
.formRow{
|
||
display: flex;
|
||
.img{
|
||
margin-left: 30px;
|
||
height: 165px;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
</style>
|