edu/admin/src/views/setting/system/scheduled_task/index.vue

111 lines
4.3 KiB
Vue
Raw Normal View History

2022-12-02 09:01:30 +00:00
<template>
<div>
<el-card shadow="never" class="!border-none">
<router-link
v-perms="['crontab/add', 'crontab/add:edit']"
:to="getRoutePath('crontab/add:edit')"
>
<el-button type="primary" class="mb-[16px]">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
</router-link>
<el-table
ref="paneTable"
class="m-t-24"
:data="pager.lists"
v-loading="pager.loading"
style="width: 100%"
>
<el-table-column prop="name" label="名称" min-width="120" />
<el-table-column prop="groups" label="分组" min-width="100">
<template #default="{ row }">
<dict-value
:value="row.groups"
:options="[
{
name: '默认',
value: 'default'
},
{
name: '系统',
value: 'system'
}
]"
/>
</template>
</el-table-column>
<el-table-column prop="command" label="调用目标字符串" min-width="100" />
<el-table-column prop="rules" label="cron表达式" min-width="100" />
<el-table-column prop="status" label="状态" min-width="100">
<template #default="{ row }">
<el-tag v-if="row.status == 1" type="success">运行中</el-tag>
<el-tag v-if="row.status == 2" type="info">已停止</el-tag>
<el-tag v-if="row.status == 3" type="danger">错误</el-tag>
</template>
</el-table-column>
<el-table-column prop="error" label="错误信息" min-width="120" />
<el-table-column prop="taskTime" label="执行耗时ms" min-width="100" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<div class="flex">
<el-button type="primary" link>
<router-link
v-perms="['crontab/edit', 'crontab/add:edit']"
:to="{
path: getRoutePath('crontab/add:edit'),
query: {
id: row.id
}
}"
>
<el-button type="primary" link> 编辑 </el-button>
</router-link>
</el-button>
<el-button
v-perms="['crontab/delete']"
type="danger"
link
@click="handleDelete(row.id)"
>
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="flex justify-end mt-4">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
</div>
</template>
<script lang="ts" setup name="scheduledTask">
import { crontabLists, crontabDel } from '@/api/setting/system'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
const { pager, getLists } = usePaging({
fetchFun: crontabLists,
params: {}
})
const handleDelete = async (id: number) => {
await feedback.confirm('确定要删除?')
await crontabDel({ id })
feedback.msgSuccess('删除成功')
getLists()
}
getLists()
</script>
<style lang="scss"></style>