mirror of
https://gitee.com/niucloud-team/niucloud-admin.git
synced 2025-12-15 04:02:47 +00:00
297 lines
8.9 KiB
Vue
297 lines
8.9 KiB
Vue
<template>
|
|
<div class="main-container">
|
|
<el-card class="box-card !border-none" shadow="never">
|
|
<div class="flex justify-between items-center mb-[20px]">
|
|
<span class="text-[20px]">{{pageName}}</span>
|
|
<el-button type="primary" @click="showEvent">{{ t('addCron') }}</el-button>
|
|
</div>
|
|
<el-alert class="warm-prompt " type="info">
|
|
<template #default>
|
|
<div class="flex items-center">
|
|
<div>
|
|
<p>
|
|
{{ t('cronTipsOne') }}
|
|
</p>
|
|
<p class="mt-2">
|
|
{{ t('cronTipsTwo') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-alert>
|
|
<div class="mt-[20px]">
|
|
<el-table :data="cronTableData.data" size="large" v-loading="cronTableData.loading">
|
|
|
|
<template #empty>
|
|
<span>{{ !cronTableData.loading ? t('emptyData') : '' }}</span>
|
|
</template>
|
|
|
|
<el-table-column prop="name" :label="t('title')" min-width="150" />
|
|
<el-table-column prop="key" :label="t('key')" min-width="150" />
|
|
<el-table-column :label="t('crondType')" min-width="150">
|
|
<template #default="{ row }">
|
|
{{ row.crontab_content }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status_name" :label="t('openStatus')" min-width="100" />
|
|
<el-table-column :label="t('operation')" fixed="right" width="130">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button>
|
|
<el-button type="danger" link @click="deleteEvent(row.id)">{{ t('delete') }}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="mt-[16px] flex justify-end">
|
|
<el-pagination v-model:current-page="cronTableData.page" v-model:page-size="cronTableData.limit" layout="total, sizes, prev, pager, next, jumper" :total="cronTableData.total" @size-change="loadCronList()" @current-change="loadCronList" />
|
|
</div>
|
|
</div>
|
|
|
|
</el-card>
|
|
<cron-info ref="cronDialog" @complete="loadCronList" />
|
|
<el-dialog v-model="showDialog" :title="t('editCron')" width="750px" :destroy-on-close="true">
|
|
<el-form :model="formData" label-width="110px" ref="formRef" :rules="formRules" class="page-form"
|
|
v-loading="loading">
|
|
<el-form-item :label="t('cronTemplate')" class="items-center" prop="key">
|
|
<el-select v-model="formData.key">
|
|
<el-option
|
|
v-for="item in templateList"
|
|
:key="item.key"
|
|
:label="item.name"
|
|
:value="item.key"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="t('cronTime')" prop="timeDate">
|
|
<el-select v-model="formData.time.type" class="w-[150px]">
|
|
<el-option
|
|
v-for="(item, index) in date_type"
|
|
:key="index"
|
|
:label="item"
|
|
:value="index"
|
|
/>
|
|
</el-select>
|
|
<div class="flex">
|
|
<el-select v-model="formData.time.week" class="ml-2 w-[120px]" v-if="formData.time.type == 'week'">
|
|
<el-option
|
|
v-for="(item, index) in week_list"
|
|
:key="index"
|
|
:label="item"
|
|
:value="index"
|
|
/>
|
|
</el-select>
|
|
<el-input v-model="formData.time.day" class="ml-2 w-[120px]" v-if="['month','day'].indexOf(formData.time.type) != -1">
|
|
<template #append>{{ t('day') }}</template>
|
|
</el-input>
|
|
<el-input v-model="formData.time.hour" class="ml-2 w-[120px]" v-if="['month','day','hour','week'].indexOf(formData.time.type) != -1" >
|
|
<template #append>{{ t('hour') }}</template>
|
|
</el-input>
|
|
<el-input v-model="formData.time.min" class="ml-2 w-[120px]" v-if="['month','day','hour','week','min'].indexOf(formData.time.type) != -1">
|
|
<template #append>{{ t('min') }}</template>
|
|
</el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label="t('isopen')" >
|
|
<div class="input-width flex items-center text-sm">
|
|
<el-radio-group v-model="formData.status">
|
|
<el-radio :label="1">{{ t('yes') }}</el-radio>
|
|
<el-radio :label="2">{{ t('no') }}</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button type="primary" @click="addEvent(formRef)">{{ t('confirm') }}</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref, watch, computed } from 'vue'
|
|
import { t } from '@/lang'
|
|
import {
|
|
getCronList,
|
|
getCronTemplate,
|
|
getCronDateType,
|
|
getWeek,
|
|
addCron,
|
|
editCron,
|
|
deleteCron
|
|
} from '@/api/sys'
|
|
import { ElMessageBox, FormInstance } from 'element-plus'
|
|
import { useRouter } from 'vue-router'
|
|
import CronInfo from '@/views/setting/components/cron-info.vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
const pageName = route.meta.title;
|
|
|
|
const cronTableData = reactive({
|
|
page: 1,
|
|
limit: 10,
|
|
total: 0,
|
|
loading: true,
|
|
data: [],
|
|
searchParam: {
|
|
title: '',
|
|
type:'',
|
|
last_time:''
|
|
}
|
|
})
|
|
const templateList = ref([])
|
|
const date_type = ref([])
|
|
const week_list = ref([])
|
|
const searchFormRef = ref<FormInstance>()
|
|
|
|
const setTypeList = async () => {
|
|
templateList.value = await (await getCronTemplate()).data
|
|
date_type.value = await (await getCronDateType()).data
|
|
week_list.value = await (await getWeek()).data
|
|
}
|
|
setTypeList()
|
|
|
|
/**
|
|
* 获取任务列表
|
|
*/
|
|
const loadCronList = (page: number = 1) => {
|
|
cronTableData.loading = true
|
|
cronTableData.page = page
|
|
|
|
getCronList({
|
|
page: cronTableData.page,
|
|
limit: cronTableData.limit,
|
|
...cronTableData.searchParam
|
|
}).then(res => {
|
|
cronTableData.loading = false
|
|
cronTableData.data = res.data.data
|
|
cronTableData.total = res.data.total
|
|
}).catch(() => {
|
|
cronTableData.loading = false
|
|
})
|
|
}
|
|
loadCronList()
|
|
|
|
const router = useRouter()
|
|
|
|
const showDialog = ref(false)
|
|
const initialFormData = {
|
|
id: 0,
|
|
key: '',
|
|
status: 2,
|
|
time: {
|
|
type: 'min',
|
|
week: '',
|
|
day: '',
|
|
hour: '',
|
|
min: ''
|
|
}
|
|
}
|
|
const formData: Record<string, any> = reactive({ ...initialFormData })
|
|
const formRef = ref<FormInstance>()
|
|
|
|
const showEvent = () => {
|
|
formData.id = 0,
|
|
formData.key = '',
|
|
formData.status = 2,
|
|
formData.time.type = 'min',
|
|
formData.time.week = '',
|
|
formData.time.day = '',
|
|
formData.time.hour = '',
|
|
formData.time.min = '',
|
|
showDialog.value = true
|
|
}
|
|
|
|
// 表单验证规则
|
|
const formRules = computed(() => {
|
|
return {
|
|
key: [
|
|
{ required: true, message: t('titlePlaceholder'), trigger: 'blur' }
|
|
],
|
|
timeDate: [
|
|
{ required: true, validator: validatePass, trigger: 'blur' }
|
|
],
|
|
}
|
|
})
|
|
|
|
const validatePass = (rule: any, value: any, callback: any) => {
|
|
if(formData.time.type == 'min' && formData.time.min != ''){
|
|
return callback()
|
|
}
|
|
if(formData.time.type == 'week' && formData.time.week != '' && formData.time.hour != '' && formData.time.min != ''){
|
|
return callback()
|
|
}
|
|
if(formData.time.type == 'month' && formData.time.day != '' && formData.time.hour != '' && formData.time.min != ''){
|
|
return callback()
|
|
}
|
|
if(formData.time.type == 'day' && formData.time.day != '' && formData.time.hour != '' && formData.time.min != ''){
|
|
return callback()
|
|
}
|
|
if(formData.time.type == 'hour' && formData.time.hour != '' && formData.time.min != ''){
|
|
return callback()
|
|
}
|
|
return callback(new Error(t('cronTimeTips')))
|
|
|
|
}
|
|
const save_type = ref(false)
|
|
const addEvent = async (formEl: FormInstance | undefined) => {
|
|
if (save_type.value || !formEl) return
|
|
await formEl.validate(async (valid) => {
|
|
if (valid) {
|
|
save_type.value = true
|
|
const data = formData
|
|
const save = formData.id > 0 ? editCron : addCron
|
|
save(data).then(res => {
|
|
save_type.value = false
|
|
showDialog.value = false
|
|
loadCronList()
|
|
}).catch(() => {
|
|
save_type.value = false
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const editEvent = (item) => {
|
|
formData.id = item.id,
|
|
formData.key = item.key,
|
|
formData.status = item.status
|
|
formData.time = item.time
|
|
showDialog.value = true
|
|
}
|
|
|
|
const deleteEvent = (id: number) => {
|
|
ElMessageBox.confirm(t('cronDeleteTips'), t('warning'),
|
|
{
|
|
confirmButtonText: t('confirm'),
|
|
cancelButtonText: t('cancel'),
|
|
type: 'warning'
|
|
}
|
|
).then(() => {
|
|
deleteCron(id).then(() => {
|
|
loadCronList()
|
|
}).catch(() => {
|
|
})
|
|
})
|
|
}
|
|
|
|
const cronDialog: Record<string, any> | null = ref(null)
|
|
/**
|
|
* 查看任务
|
|
* @param data
|
|
*/
|
|
const infoEvent = (data: any) => {
|
|
cronDialog.value.setFormData(data)
|
|
cronDialog.value.showDialog = true
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-input-number.is-controls-right .el-input-number__increase {
|
|
left: 20px !important
|
|
}
|
|
</style>
|