admin/src/views/monitor/crontab/index.vue

142 lines
4.5 KiB
Vue

<template>
<pi-table ref="tableRef" :apiObj="api.system.crontab.list" @selection-change="selectionChange">
<template #do>
<el-button v-auth="'crontab:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
<el-button v-auth="'crontab:edit'" type="success" icon="el-icon-edit" @click="edit()"
:disabled="selection.length!==1"></el-button>
<el-button v-auth="'crontab:del'" type="danger" plain icon="el-icon-delete" :disabled="selection.length===0"
@click="batch_del"></el-button>
<el-button v-auth="'crontab:log:del'" type="info" plain icon="el-icon-operation"
@click="show_log()"></el-button>
</template>
<template #search>
<el-input v-model="search.crontab_name" placeholder="任务名称" clearable style="width: 200px;"
@keydown.enter="upsearch"></el-input>
<el-select v-model="search.enable" placeholder="任务状态" clearable style="width: 200px;">
<el-option label="启用" :value="1"></el-option>
<el-option label="停用" :value="0"></el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
</template>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="任务编号" prop="crontab_id" width="80"></el-table-column>
<el-table-column label="任务名称" prop="crontab_name"></el-table-column>
<el-table-column label="调用目标" prop="crontab_name"></el-table-column>
<el-table-column label="cron执行表达式" prop="rule"></el-table-column>
<el-table-column label="状态" prop="enable">
<template #default="scope">
<el-tag v-if="scope.row.enable===1" type="success">启用</el-tag>
<el-tag v-if="scope.row.enable===0" type="danger">停用</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" prop="memo"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="120">
<template #default="scope">
<el-button-group>
<el-button text type="primary" size="small" @click="show(scope.row, scope.$index)">查看</el-button>
<el-button v-auth="'crontab:edit'" text type="success" size="small"
@click="edit(scope.row, scope.$index)">编辑
</el-button>
<el-popconfirm title="确定删除吗?" @confirm="del(scope.row, scope.$index)">
<template #reference>
<el-button v-auth="'crontab:del'" text type="danger" size="small">删除</el-button>
</template>
</el-popconfirm>
<el-button v-auth="'crontab:log:del'" text type="info" size="small"
@click="show_log(scope.row, scope.$index)">日志
</el-button>
</el-button-group>
</template>
</el-table-column>
</pi-table>
<save-dialog v-if="dialogShow" ref="dialogRef" @success="tableRef.refresh()"
@closed="dialogShow=false"></save-dialog>
</template>
<script setup>
import saveDialog from './save'
import api from "@/api/index";
import {getCurrentInstance, nextTick, ref} from "vue";
import router from "@/router/index"
defineOptions({
name: "monitorCrontab"
})
const {proxy} = getCurrentInstance()
const tableRef = ref(null)
const dialogRef = ref(null)
let dialogShow = ref(false)
let selection = ref([])
let search = ref({
crontab_name: null,
enable: null
})
//添加
function add() {
dialogShow.value = true
nextTick(() => {
dialogRef.value.open()
})
}
//编辑
async function edit(row) {
dialogShow.value = true
nextTick(() => {
dialogRef.value.open('edit', row ?? selection.value[0])
})
}
//查看
async function show(row) {
dialogShow.value = true
nextTick(() => {
dialogRef.value.open('show', row)
})
}
function show_log(row) {
router.push({
path: "/monitor/crontab_log",
query: {
crontab_id: row?.crontab_id
}
})
}
//删除
async function del(row) {
const loading = proxy.$loading();
const res = await api.system.crontab.del({ids: row.crontab_id});
tableRef.value.refresh()
loading.close();
proxy.$message.success(res.msg)
}
//批量删除
async function batch_del() {
proxy.$confirm(`确定删除选中的 ${selection.value.length} 项吗?如果删除项中含有子集将会被一并删除`, '提示', {
type: 'warning'
}).then(async () => {
const loading = proxy.$loading();
const res = await api.system.crontab.del({ids: selection.value.map(item => item.crontab_id).toString()});
tableRef.value.refresh()
loading.close();
proxy.$message.success(res.msg)
})
}
//表格选择后回调事件
function selectionChange(e) {
selection.value = e;
}
//搜索
function upsearch() {
tableRef.value.upData(search.value)
}
</script>