njzscloud-dispose-web/src/pages/sys/task/schedule-recode/Schedulerecode.vue

264 lines
7.2 KiB
Vue

<template>
<Page>
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
<ElFormItem label="任务 Id">
<ElInput
v-model="searchForm.taskId"
placeholder="任务 Id"/>
</ElFormItem>
<ElFormItem label="任务名称">
<ElInput
v-model="searchForm.taskName"
placeholder="任务名称"/>
</ElFormItem>
<ElFormItem label="任务执行函数">
<ElInput
v-model="searchForm.fn"
placeholder="任务执行函数"/>
</ElFormItem>
<ElFormItem label="调度方式">
<ElInput
v-model="searchForm.scheduleType"
placeholder="调度方式"/>
</ElFormItem>
<ElFormItem label="调度配置">
<ElInput
v-model="searchForm.scheduleConf"
placeholder="调度配置"/>
</ElFormItem>
<ElFormItem label="调度时间">
<ElInput
v-model="searchForm.scheduleTime"
placeholder="调度时间"/>
</ElFormItem>
<ElFormItem label="任务开始时间">
<ElInput
v-model="searchForm.startTime"
placeholder="任务开始时间"/>
</ElFormItem>
<ElFormItem label="任务结束时间">
<ElInput
v-model="searchForm.endTime"
placeholder="任务结束时间"/>
</ElFormItem>
<ElFormItem label="任务状态">
<ElInput
v-model="searchForm.taskStatus"
placeholder="任务状态"/>
</ElFormItem>
<ElFormItem label="是否为内内置任务">
<ElInput
v-model="searchForm.builtin"
placeholder="是否为内内置任务"/>
</ElFormItem>
<ElFormItem label="本次调度是否为手动触发">
<ElInput
v-model="searchForm.manually"
placeholder="本次调度是否为手动触发"/>
</ElFormItem>
<ElFormItem label="备注">
<ElInput
v-model="searchForm.memo"
placeholder="备注"/>
</ElFormItem>
<ElFormItem>
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
</ElFormItem>
</ElForm>
<div class="tool-bar">
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
</div>
<ElTable v-loading="searching" :data="tableData"
cell-class-name="table-cell"
class="table-list"
empty-text="暂无数据"
header-row-class-name="table-header"
row-key="id">
<ElTableColumn label="任务 Id" prop="taskId"/>
<ElTableColumn label="任务名称" prop="taskName"/>
<ElTableColumn label="任务执行函数" prop="fn"/>
<ElTableColumn label="调度方式" prop="scheduleType"/>
<ElTableColumn label="调度配置" prop="scheduleConf"/>
<ElTableColumn label="调度时间" prop="scheduleTime"/>
<ElTableColumn label="任务开始时间" prop="startTime"/>
<ElTableColumn label="任务结束时间" prop="endTime"/>
<ElTableColumn label="任务状态" prop="taskStatus"/>
<ElTableColumn label="是否为内内置任务" prop="builtin"/>
<ElTableColumn label="本次调度是否为手动触发" prop="manually"/>
<ElTableColumn label="备注" prop="memo"/>
<ElTableColumn label="操作" width="180">
<template #default="scope">
<div class="action-btn">
<el-popconfirm
cancel-button-text="否"
cancel-button-type="primary"
confirm-button-text="是"
confirm-button-type="danger"
placement="top"
title="是否删除当前数据?"
width="180"
@confirm="delHandler(scope)">
<template #reference>
<ElButton :loading="deling" text type="danger">删除</ElButton>
</template>
</el-popconfirm>
<ElButton text type="primary" @click="modifyHandler(scope)"></ElButton>
</div>
</template>
</ElTableColumn>
</ElTable>
<ElPagination
:page-size="pagination.size"
:pager-count="pagination.pages"
:total="pagination.total"
class="pagination"
layout="prev, pager, next"
@change="pageChangeHandler"/>
<Task_schedule_recodeForm ref="task_schedule_recodeForm" @edit-succ="paging"/>
</Page>
</template>
<script lang="ts" setup>
import Task_schedule_recodeApi from '@/pages/sys/task_schedule_recode/task_schedule_recode-api.ts'
import Page from '@/components/page/Page.vue'
import { elIcons } from '@/common/element/element.ts'
import Task_schedule_recodeForm from '@/pages/sys/task_schedule_recode/Task_schedule_recodeForm.vue'
const tableData = ref<Task_schedule_recodeTypes.SearchTask_schedule_recodeResult[]>([])
const searchForm = reactive<Task_schedule_recodeTypes.SearchTask_schedule_recodeParam>({
current: 1,
size: 20,
})
const searching = ref(false)
const deling = ref(false)
const showSearchForm = ref(true)
const task_schedule_recodeFormIns = useTemplateRef<InstanceType<typeof Task_schedule_recodeForm>>('task_schedule_recodeForm')
const pagination = reactive<G.Pagination>({
total: 0,
pages: 0,
current: 1,
size: 1,
})
function pageChangeHandler(currentPage: number, pageSize: number) {
searchForm.current = currentPage
searchForm.size = pageSize
paging()
}
function showDialog(data?: Task_schedule_recodeTypes.SearchTask_schedule_recodeResult) {
task_schedule_recodeFormIns.value?.open(data)
}
function delHandler({row}: { row: Task_schedule_recodeTypes.SearchTask_schedule_recodeResult }) {
deling.value = true
Task_schedule_recodeApi.del([ row.id! ])
.then(() => {
ElMessage.success('删除成功')
paging()
})
.finally(() => {
deling.value = false
})
}
function modifyHandler({row}: { row: Task_schedule_recodeTypes.SearchTask_schedule_recodeResult }) {
showDialog(row)
}
function addHandler() {
showDialog()
}
function reset() {
Object.assign(searchForm, {})
paging()
}
function paging() {
searching.value = true
Task_schedule_recodeApi.paging(searchForm)
.then(res => {
tableData.value = res.data?.records ?? []
})
.finally(() => {
searching.value = false
})
}
onMounted(() => {
paging()
})
</script>
<style lang="stylus" scoped>
.table-list {
flex 1;
width 100%
:deep(.table-header) {
color #454C59
th {
background-color #EDF1F7
font-weight 500
position relative
& > div {
display flex
gap 5px
align-items center
}
&:not(:first-child) > div::before {
position: absolute;
top: 50%;
left: 1px;
width: 1px;
background-color: #D3D7DE;
transform: translateY(-50%);
content: "";
height 50%
}
}
}
:deep(.table-cell) {
color #2F3540
}
.action-btn {
width 100%
display flex
flex-wrap wrap
& > button {
margin 0
}
}
}
.tool-bar {
display flex
justify-content space-between
margin 0 0 20px 0
}
.pagination {
justify-content: end;
margin: 8px;
}
</style>