2
0

完善任务管理

This commit is contained in:
lai
2024-12-26 16:07:04 +08:00
parent de19d9f400
commit f65cb5058e
11 changed files with 1381 additions and 123 deletions

View File

@@ -0,0 +1,150 @@
<script setup lang="ts">
import { reactive, watch, onBeforeMount } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const emit = defineEmits(['update:value']);
const props = defineProps({
value: {
type: String,
default: '*',
},
});
/**指定列表初始数据 */
const optionsSpecific = Array.from({ length: 31 }, (_, i) => {
let idx = i + 1;
return {
label: `${idx}`,
value: `${idx}`,
};
});
/**数据 */
let data = reactive({
type: '1',
/**间隔 */
increment: 2,
incrementStart: 1,
/**周期 */
rangeStart: 1,
rangeEnd: 2,
/**指定 */
specific: ['1'],
});
/**监听数据,将数值格式化 */
watch(data, () => {
let reultValue = '*';
let val = data.type;
// 每一
if (val === '1') {
reultValue = '*';
}
// 间隔
if (val === '2') {
let start = data.incrementStart;
let increment = data.increment;
reultValue = `${start ?? 0}/${increment ?? 0}`;
}
// 周期
if (val === '3') {
let start = data.rangeStart;
let end = data.rangeEnd;
reultValue = `${start ?? 0}-${end ?? 0}`;
}
// 指定
if (val === '4') {
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
}
emit('update:value', reultValue);
});
/**挂载前初始属性 */
onBeforeMount(() => {
const val = props.value;
if (val === '*') {
data.type = '1';
}
if (val.includes('/')) {
const arr = val.split('/');
data.incrementStart = Number(arr[0]);
data.increment = Number(arr[1]);
data.type = '2';
}
if (val.includes('-')) {
const arr = val.split('-');
data.rangeStart = Number(arr[0]);
data.rangeEnd = Number(arr[1]);
data.type = '3';
}
if (val.includes(',')) {
data.specific = val.split(',').sort((a, b) => +a - +b);
data.type = '4';
}
});
</script>
<template>
<a-radio-group size="small" v-model:value="data.type">
<a-space direction="vertical" :size="18">
<a-radio value="1">
{{ t('components.CronModal.day1') }}
</a-radio>
<a-radio value="2">
{{ t('components.CronModal.day21') }}
<a-input-number
size="small"
v-model:value="data.increment"
:min="1"
:max="31"
placeholder="1-31"
></a-input-number>
{{ t('components.CronModal.day22') }}
<a-input-number
size="small"
v-model:value="data.incrementStart"
:min="1"
:max="31"
placeholder="1-31"
></a-input-number>
{{ t('components.CronModal.day23') }}
</a-radio>
<a-radio value="3">
{{ t('components.CronModal.day31') }}
<a-input-number
size="small"
v-model:value="data.rangeStart"
:min="1"
:max="31"
placeholder="1-31"
></a-input-number>
{{ t('components.CronModal.day32') }}
<a-input-number
size="small"
v-model:value="data.rangeEnd"
:min="1"
:max="31"
placeholder="1-31"
></a-input-number>
{{ t('components.CronModal.day33') }}
</a-radio>
<a-radio value="4">
{{ t('components.CronModal.day4') }}
</a-radio>
<a-select
v-model:value="data.specific"
size="small"
mode="multiple"
style="width: 100%"
:placeholder="t('components.CronModal.day4')"
:options="optionsSpecific"
></a-select>
<a-radio value="5">
{{ t('components.CronModal.day5') }}
</a-radio>
</a-space>
</a-radio-group>
</template>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,144 @@
<script setup lang="ts">
import { reactive, watch, onBeforeMount } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const emit = defineEmits(['update:value']);
const props = defineProps({
value: {
type: String,
default: '*',
},
});
/**指定列表初始数据 */
const optionsSpecific = Array.from({ length: 24 }, (_, i) => ({
label: `${i}`.padStart(2, '0'),
value: `${i}`,
}));
/**数据 */
let data = reactive({
type: '1',
/**间隔 */
increment: 2,
incrementStart: 0,
/**周期 */
rangeStart: 0,
rangeEnd: 2,
/**指定 */
specific: ['0'],
});
/**监听数据,将数值格式化 */
watch(data, () => {
let reultValue = '*';
let val = data.type;
// 每一
if (val === '1') {
reultValue = '*';
}
// 间隔
if (val === '2') {
let start = data.incrementStart;
let increment = data.increment;
reultValue = `${start ?? 0}/${increment ?? 0}`;
}
// 周期
if (val === '3') {
let start = data.rangeStart;
let end = data.rangeEnd;
reultValue = `${start ?? 0}-${end ?? 0}`;
}
// 指定
if (val === '4') {
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
}
emit('update:value', reultValue);
});
/**挂载前初始属性 */
onBeforeMount(() => {
const val = props.value;
if (val === '*') {
data.type = '1';
}
if (val.includes('/')) {
const arr = val.split('/');
data.incrementStart = Number(arr[0]);
data.increment = Number(arr[1]);
data.type = '2';
}
if (val.includes('-')) {
const arr = val.split('-');
data.rangeStart = Number(arr[0]);
data.rangeEnd = Number(arr[1]);
data.type = '3';
}
if (val.includes(',')) {
data.specific = val.split(',').sort((a, b) => +a - +b);
data.type = '4';
}
});
</script>
<template>
<a-radio-group size="small" v-model:value="data.type">
<a-space direction="vertical" :size="18">
<a-radio value="1">
{{ t('components.CronModal.hour1') }}
</a-radio>
<a-radio value="2">
{{ t('components.CronModal.hour21') }}
<a-input-number
size="small"
v-model:value="data.increment"
:min="0"
:max="23"
placeholder="0-23"
></a-input-number>
{{ t('components.CronModal.hour22') }}
<a-input-number
size="small"
v-model:value="data.incrementStart"
:min="0"
:max="23"
placeholder="0-23"
></a-input-number>
{{ t('components.CronModal.hour23') }}
</a-radio>
<a-radio value="3">
{{ t('components.CronModal.hour31') }}
<a-input-number
size="small"
v-model:value="data.rangeStart"
:min="0"
:max="23"
placeholder="1-23"
></a-input-number>
{{ t('components.CronModal.hour32') }}
<a-input-number
size="small"
v-model:value="data.rangeEnd"
:min="0"
:max="23"
placeholder="0-23"
></a-input-number>
{{ t('components.CronModal.hour33') }}
</a-radio>
<a-radio value="4">
{{ t('components.CronModal.hour4') }}
</a-radio>
<a-select
v-model:value="data.specific"
size="small"
mode="multiple"
style="width: 100%"
:placeholder="t('components.CronModal.hour4')"
:options="optionsSpecific"
></a-select>
</a-space>
</a-radio-group>
</template>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,146 @@
<script setup lang="ts">
import { reactive, watch, onBeforeMount } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const emit = defineEmits(['update:value']);
const props = defineProps({
value: {
type: String,
default: '*',
},
});
/**指定列表初始数据 */
const optionsSpecific = Array.from({ length: 60 }, (_, i) => {
return {
label: `${i}`.padStart(2, '0'),
value: `${i}`,
};
});
/**数据 */
let data = reactive({
type: '1',
/**间隔 */
increment: 1,
incrementStart: 0,
/**周期 */
rangeStart: 1,
rangeEnd: 2,
/**指定 */
specific: ['0'],
});
/**监听数据,将数值格式化 */
watch(data, () => {
let reultValue = '*';
let val = data.type;
// 每一
if (val === '1') {
reultValue = '*';
}
// 间隔
if (val === '2') {
let start = data.incrementStart;
let increment = data.increment;
reultValue = `${start ?? 0}/${increment ?? 0}`;
}
// 周期
if (val === '3') {
let start = data.rangeStart;
let end = data.rangeEnd;
reultValue = `${start ?? 0}-${end ?? 0}`;
}
// 指定
if (val === '4') {
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
}
emit('update:value', reultValue);
});
/**挂载前初始属性 */
onBeforeMount(() => {
const val = props.value;
if (val === '*') {
data.type = '1';
}
if (val.includes('/')) {
const arr = val.split('/');
data.incrementStart = Number(arr[0]);
data.increment = Number(arr[1]);
data.type = '2';
}
if (val.includes('-')) {
const arr = val.split('-');
data.rangeStart = Number(arr[0]);
data.rangeEnd = Number(arr[1]);
data.type = '3';
}
if (val.includes(',')) {
data.specific = val.split(',').sort((a, b) => +a - +b);
data.type = '4';
}
});
</script>
<template>
<a-radio-group size="small" v-model:value="data.type">
<a-space direction="vertical" :size="18">
<a-radio value="1">
{{ t('components.CronModal.minute1') }}
</a-radio>
<a-radio value="2">
{{ t('components.CronModal.minute21') }}
<a-input-number
size="small"
v-model:value="data.increment"
:min="0"
:max="59"
placeholder="0-59"
></a-input-number>
{{ t('components.CronModal.minute22') }}
<a-input-number
size="small"
v-model:value="data.incrementStart"
:min="0"
:max="59"
placeholder="0-59"
></a-input-number>
{{ t('components.CronModal.minute23') }}
</a-radio>
<a-radio value="3">
{{ t('components.CronModal.minute31') }}
<a-input-number
size="small"
v-model:value="data.rangeStart"
:min="0"
:max="59"
placeholder="0-59"
></a-input-number>
{{ t('components.CronModal.minute32') }}
<a-input-number
size="small"
v-model:value="data.rangeEnd"
:min="0"
:max="59"
placeholder="0-59"
></a-input-number>
{{ t('components.CronModal.minute33') }}
</a-radio>
<a-radio value="4">
{{ t('components.CronModal.minute4') }}
</a-radio>
<a-select
v-model:value="data.specific"
size="small"
mode="multiple"
style="width: 100%"
:placeholder="t('components.CronModal.minute4')"
:options="optionsSpecific"
></a-select>
</a-space>
</a-radio-group>
</template>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,148 @@
<script setup lang="ts">
import { reactive, watch, onBeforeMount } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const emit = defineEmits(['update:value']);
const props = defineProps({
value: {
type: String,
default: '*',
},
});
/**指定列表初始数据 */
const optionsSpecific = Array.from({ length: 12 }, (_, i) => {
let idx = i + 1;
return {
label: `${idx}`,
value: `${idx}`,
};
});
/**构建数据 */
let data = reactive({
/**类型 */
type: '1',
/**间隔 */
increment: 1,
incrementStart: 1,
/**周期 */
rangeStart: 1,
rangeEnd: 2,
/**指定秒 */
specific: ['1'],
});
/**监听数据,将数值格式化 */
watch(data, () => {
let reultValue = '*';
let val = data.type;
// 每一
if (val === '1') {
reultValue = '*';
}
// 间隔
if (val === '2') {
let start = data.incrementStart;
let increment = data.increment;
reultValue = `${start ?? 0}/${increment ?? 0}`;
}
// 周期
if (val === '3') {
let start = data.rangeStart;
let end = data.rangeEnd;
reultValue = `${start ?? 0}-${end ?? 0}`;
}
// 指定
if (val === '4') {
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
}
emit('update:value', reultValue);
});
/**挂载前初始属性 */
onBeforeMount(() => {
const val = props.value;
if (val === '*') {
data.type = '1';
}
if (val.includes('/')) {
const arr = val.split('/');
data.incrementStart = Number(arr[0]);
data.increment = Number(arr[1]);
data.type = '2';
}
if (val.includes('-')) {
const arr = val.split('-');
data.rangeStart = Number(arr[0]);
data.rangeEnd = Number(arr[1]);
data.type = '3';
}
if (val.includes(',')) {
data.specific = val.split(',').sort((a, b) => +a - +b);
data.type = '4';
}
});
</script>
<template>
<a-radio-group size="small" v-model:value="data.type">
<a-space direction="vertical" :size="18">
<a-radio value="1">
{{ t('components.CronModal.month1') }}
</a-radio>
<a-radio value="2">
{{ t('components.CronModal.month21') }}
<a-input-number
size="small"
v-model:value="data.increment"
:min="1"
:max="12"
placeholder="1-12"
></a-input-number>
{{ t('components.CronModal.month22') }}
<a-input-number
size="small"
v-model:value="data.incrementStart"
:min="1"
:max="12"
placeholder="1-12"
></a-input-number>
{{ t('components.CronModal.month23') }}
</a-radio>
<a-radio value="3">
{{ t('components.CronModal.month31') }}
<a-input-number
size="small"
v-model:value="data.rangeStart"
:min="1"
:max="12"
placeholder="1-12"
></a-input-number>
{{ t('components.CronModal.month32') }}
<a-input-number
size="small"
v-model:value="data.rangeEnd"
:min="1"
:max="12"
placeholder="1-12"
></a-input-number>
{{ t('components.CronModal.month33') }}
</a-radio>
<a-radio value="4">
{{ t('components.CronModal.month4') }}
</a-radio>
<a-select
v-model:value="data.specific"
size="small"
mode="multiple"
style="width: 100%"
:placeholder="t('components.CronModal.month4')"
:options="optionsSpecific"
></a-select>
</a-space>
</a-radio-group>
</template>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,145 @@
<script setup lang="ts">
import { reactive, watch, onBeforeMount } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const emit = defineEmits(['update:value']);
const props = defineProps({
value: {
type: String,
default: '*',
},
});
/**指定列表初始数据 */
const optionsSpecific = Array.from({ length: 60 }, (_, i) => ({
label: `${i}`.padStart(2, '0'),
value: `${i}`,
}));
/**构建数据 */
let data = reactive({
/**类型 */
type: '1',
/**间隔 */
increment: 2,
incrementStart: 0,
/**周期 */
rangeStart: 1,
rangeEnd: 2,
/**指定秒 */
specific: ['0'],
});
/**监听数据,将数值格式化 */
watch(data, () => {
let reultValue = '*';
let val = data.type;
// 每一
if (val === '1') {
reultValue = '*';
}
// 间隔
if (val === '2') {
let start = data.incrementStart;
let increment = data.increment;
reultValue = `${start ?? 0}/${increment ?? 0}`;
}
// 周期
if (val === '3') {
let start = data.rangeStart;
let end = data.rangeEnd;
reultValue = `${start ?? 0}-${end ?? 0}`;
}
// 指定
if (val === '4') {
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
}
emit('update:value', reultValue);
});
/**挂载前初始属性 */
onBeforeMount(() => {
const val = props.value;
if (val === '*') {
data.type = '1';
}
if (val.includes('/')) {
const arr = val.split('/');
data.incrementStart = Number(arr[0]);
data.increment = Number(arr[1]);
data.type = '2';
}
if (val.includes('-')) {
const arr = val.split('-');
data.rangeStart = Number(arr[0]);
data.rangeEnd = Number(arr[1]);
data.type = '3';
}
if (val.includes(',')) {
data.specific = val.split(',').sort((a, b) => +a - +b);
data.type = '4';
}
});
</script>
<template>
<a-radio-group size="small" v-model:value="data.type">
<a-space direction="vertical" :size="18">
<a-radio value="1">
{{ t('components.CronModal.second1') }}
</a-radio>
<a-radio value="2">
{{ t('components.CronModal.second21') }}
<a-input-number
size="small"
v-model:value="data.increment"
:min="0"
:max="59"
placeholder="0-59"
></a-input-number>
{{ t('components.CronModal.second22') }}
<a-input-number
size="small"
v-model:value="data.incrementStart"
:min="0"
:max="59"
placeholder="0-59"
></a-input-number>
{{ t('components.CronModal.second23') }}
</a-radio>
<a-radio value="3">
{{ t('components.CronModal.second31') }}
<a-input-number
size="small"
v-model:value="data.rangeStart"
:min="0"
:max="59"
placeholder="0-59"
></a-input-number>
{{ t('components.CronModal.second32') }}
<a-input-number
size="small"
v-model:value="data.rangeEnd"
:min="0"
:max="59"
placeholder="0-59"
></a-input-number>
{{ t('components.CronModal.second33') }}
</a-radio>
<a-radio value="4">
{{ t('components.CronModal.second4') }}
</a-radio>
<a-select
v-model:value="data.specific"
size="small"
mode="multiple"
style="width: 100%"
:placeholder="t('components.CronModal.second4')"
:options="optionsSpecific"
></a-select>
</a-space>
</a-radio-group>
</template>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,114 @@
<template>
<a-modal
:destroyOnClose="true"
:title="t('components.CronModal.title')"
:open="props.open"
:body-style="{ padding: '0 24px' }"
@cancel="fnCronModal(false)"
@ok="fnCronModal(true)"
>
<a-tabs tab-position="top" type="line">
<a-tab-pane key="1" :tab="t('common.units.second')">
<CronSecond v-model:value="cronValue.second"></CronSecond>
</a-tab-pane>
<a-tab-pane key="2" :tab="t('common.units.minute')">
<CronMinute v-model:value="cronValue.minute"></CronMinute>
</a-tab-pane>
<a-tab-pane key="3" :tab="t('common.units.hour')">
<CronHour v-model:value="cronValue.hour"></CronHour>
</a-tab-pane>
<a-tab-pane key="4" :tab="t('common.units.day')">
<CronDay v-model:value="cronValue.day"></CronDay>
</a-tab-pane>
<a-tab-pane key="5" :tab="t('common.units.month')">
<CronMonth v-model:value="cronValue.month"></CronMonth>
</a-tab-pane>
</a-tabs>
<a-input
class="reultBox"
:addon-before="t('components.CronModal.addon')"
v-model:value="cronStr"
disabled
/>
</a-modal>
</template>
<script lang="ts" setup>
import CronSecond from './components/Second.vue';
import CronMinute from './components/Minute.vue';
import CronHour from './components/Hour.vue';
import CronDay from './components/Day.vue';
import CronMonth from './components/Month.vue';
import { reactive, computed, watch } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const emit = defineEmits(['cancel', 'ok', 'update:open']);
const props = defineProps({
open: {
type: Boolean,
required: true,
},
cron: {
type: String,
default: '* * * * * ?',
},
});
/**cron属性值 */
let cronValue = reactive({
second: '*',
minute: '*',
hour: '*',
day: '*',
month: '*',
week: '?',
});
/**组合cron结果 */
const cronStr = computed(() => {
let time = `${cronValue.second} ${cronValue.minute} ${cronValue.hour}`;
let date = `${cronValue.day} ${cronValue.month} ${cronValue.week}`;
return `${time} ${date}`;
});
/**监听是否显示初始cron属性 */
watch(
() => props.open,
val => {
if (!val) return;
const arr = props.cron.split(' ');
// 6 位以上是合法表达式
if (arr.length >= 6) {
Object.assign(cronValue, {
second: arr[0],
minute: arr[1],
hour: arr[2],
day: arr[3],
month: arr[4],
week: arr[5],
});
}
}
);
/**
* 窗口事件
* @param val modal触发事件
*/
function fnCronModal(val: boolean) {
emit('update:open', false);
if (val) {
emit('ok', cronStr.value);
} else {
emit('cancel');
}
}
</script>
<style lang="scss" scoped>
.reultBox {
margin-top: 48px;
margin-bottom: 24px;
}
</style>

View File

@@ -50,7 +50,7 @@ function handleExport() {
<div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
<slot name="prefix"></slot>
<slot name="default">
<AButton v-if="isShowBtn(`system:${tableType}:add`)" size="small" ghost type="primary" @click="add">
<AButton v-if="isShowBtn(`system:${tableType}:add`) && !notShowAdd" size="small" ghost type="primary" @click="add">
<div class="flex-y-center gap-8px">
<icon-ic-round-plus class="text-icon" />
<span>{{ $t('common.add') }}</span>

View File

@@ -24,8 +24,13 @@ const local: any = {
config: 'Config',
confirm: 'Confirm',
delete: 'Delete',
view: 'View',
exportOk: "Export Completed",
exportTip: "Confirm exporting xlsx table files based on search criteria?",
deleteSuccess: 'Delete Success',
confirmDelete: 'Are you sure you want to delete?',
confirmClean: 'Are you sure you want to Clean?',
clearText: "Clean",
edit: 'Edit',
index: 'Index',
keywordSearch: 'Please enter keyword',
@@ -55,7 +60,75 @@ const local: any = {
abnormal: 'Abnormal',
export: 'Export',
loading: 'Loading',
selectPlease: 'please select',
disable: 'Disable',
default: 'Default',
system:'System',
record: 'Record',
noRecord: 'No Record',
msgSuccess: 'Success {msg}',
errorFields: 'Please fill in the required information in {num} correctly!',
tipTitle: 'Prompt',
units: {
second: 'Second',
minute: 'Minute',
hour: 'Hour',
day: 'Day',
week: 'Week',
month: 'Month',
year: 'Year',
core: 'Core',
}
},
// 组件
components: {
CronModal: {
title: "Cron Expression Generator",
addon: "Expression Preview:",
day1: "Every day",
day21: "Execute every",
day22: "days, starting from the",
day23: "day",
day31: "Cycle from",
day32: "to",
day33: "days",
day4: "Designated day (optional)",
day5: "Last day of the month",
hour1: "Hourly",
hour21: "Execute every",
hour22: "hours, starting from the",
hour23: "hour",
hour31: "Cycle time from",
hour32: "to",
hour33: "hours",
hour4: "Specified hours (multiple options available)",
minute1: "Every minute",
minute21: "Execute every",
minute22: "minutes, starting from the",
minute23: "minute",
minute31: "Cycle time from",
minute32: "to",
minute33: "minutes",
minute4: "Specified minutes (multiple options available)",
month1: "Every month",
month21: "Execute every",
month22: "months, starting from the",
month23: "month",
month31: "Cycle time from",
month32: "to",
month33: "months",
month4: "Specified months (multiple options available)",
second1: "Every second",
second21: "Execute every",
second22: "seconds, starting from the",
second23: "second",
second31: "Cycle time from",
second32: "to",
second33: "seconds",
second4: "Specify the number of seconds (multiple selectable)",
},
},
request: {
logout: 'Logout user after request failed',
logoutMsg: 'User status is invalid, please log in again',
@@ -517,7 +590,27 @@ const local: any = {
viewJob:'View Job',
addJob:'Add Job',
editJob:'Edit Job',
viewInfoErr:'Failed to get job information',
getInfoError:'Get Info Error',
jobNamePlease: 'Please enter the task name correctly, limited to 2-50 characters',
invokeTargetPlease: 'Please enter the call target correctly, limited to 2-50 characters.',
cronExpressionPlease: 'Please enter or generate a cron execution expression',
jobGroup: "Job Group",
saveLog: "Save Log",
invokeTargetTip: "Parameter description: support for preset incoming parameters, serialized processing parameters in the processor",
cronExpressionTip: "Example of an expression:0/20 * * * * ?",
cronExpressionTip1: "Illustrative example: Execute tasks every 20 seconds",
cronExpressionNew: "Generating Expression",
targetParamsPlease: 'Call target incoming parameters, only support json strings',
delTip: "Are you sure you want to delete task number [{num}]?",
delLogTip: "Are you sure you want to delete Log number [{num}]?",
runOneTip: "Are you sure you want to perform a [{num}] task right away?",
runOneOk: "{num} Executed successfully",
runOne:'execute once',
jobLog: "Task Log",
jobMessage: "Task Message",
clearTip: "Confirm that all dispatch log data items are cleared?",
clearOk: "Cleared Successfully",
}
}
},

View File

@@ -24,8 +24,13 @@ const local:any = {
config: '配置',
confirm: '确认',
delete: '删除',
view:'查看',
exportOk: "已完成导出",
exportTip: "确认根据搜索条件导出xlsx表格文件吗?",
deleteSuccess: '删除成功',
confirmDelete: '确认删除吗?',
confirmClean: '确认清空吗?',
clearText: "清空",
edit: '编辑',
index: '序号',
keywordSearch: '请输入关键词搜索',
@@ -55,7 +60,75 @@ const local:any = {
abnormal: '异常',
export:'导出',
loading: '加载中...',
selectPlease: '请选择',
disable: '停用',
default: '默认',
system:'系统',
record: '记录',
noRecord: '不记录',
msgSuccess: '{msg} 成功',
errorFields: '请正确填写 {num} 处必填信息!',
tipTitle: '提示',
units: {
second: '秒',
minute: '分钟',
hour: '小时',
day: '天',
week: '周',
month: '月',
year: '年',
core: '核',
}
},
// 组件
components: {
CronModal: {
title: "Cron表达式生成",
addon: "表达式预览:",
day1: "每一天",
day21: "每隔",
day22: "天执行一次,从",
day23: "日开始",
day31: "周期从",
day32: "到",
day33: "日",
day4: "指定日(可多选)",
day5: "本月最后一天",
hour1: "每一小时",
hour21: "每隔",
hour22: "小时执行一次,从",
hour23: "时开始",
hour31: "周期从",
hour32: "到",
hour33: "小时",
hour4: "指定小时(可多选)",
minute1: "每一分钟",
minute21: "每隔",
minute22: "分钟执行一次,从",
minute23: "分钟开始",
minute31: "周期从",
minute32: "到",
minute33: "分钟",
minute4: "指定分钟(可多选)",
month1: "每一月",
month21: "每隔",
month22: "月执行,从",
month23: "月开始",
month31: "周期从",
month32: "到",
month33: "月之间的每个月",
month4: "指定月(可多选)",
second1: "每一秒钟",
second21: "每隔",
second22: "秒执行一次,从",
second23: "秒开始",
second31: "周期从",
second32: "到",
second33: "秒",
second4: "指定秒数(可多选)",
}
},
request: {
logout: '请求失败后登出用户',
logoutMsg: '用户状态失效,请重新登录',
@@ -504,7 +577,7 @@ const local:any = {
other:'其他',
},
task:{
taskId:'ID',
taskId:'编号',
taskName:'任务名称',
group:'任务组名',
invoke:'调用目标',
@@ -519,6 +592,25 @@ const local:any = {
editJob:'编辑任务',
viewInfoErr:'查看异常信息',
getInfoError:'获取信息失败',
jobNamePlease: '请正确输入任务名称限2-50个字符',
invokeTargetPlease: '请正确输入调用目标限2-50个字符',
cronExpressionPlease: '请输入或生成cron执行表达式',
jobGroup: "任务组名",
saveLog: "记录日志",
invokeTargetTip: "参数说明:支持预设传入参数,在处理器中进行序列化处理参数",
cronExpressionTip: "表达式示例0/20 * * * * ?",
cronExpressionTip1: "示例说明每20秒执行任务",
cronExpressionNew: "生成表达式",
targetParamsPlease: '调用目标传入参数仅支持json字符串',
delTip: "确认删除定时任务编号为 【{num}】 任务吗?",
delLogTip: "确认删除日志编号为 【{num}】 任务日志吗?",
runOneTip: "确定要立即执行一次 【{num}】 任务吗?",
runOneOk: "{num} 执行成功",
runOne:'执行一次',
jobLog: "任务日志",
jobMessage: "执行信息",
clearTip: "确认清空所有调度日志数据项吗?",
clearOk: "清空成功",
}
}
},

View File

@@ -16,3 +16,88 @@ export function doGetjobInfo(paramsId: any) {
method: 'get',
});
}
/**
* 新增定时任务调度
* @param data 任务对象
* @returns object
*/
export function addJob(data: Record<string, any>) {
return request({
url: '/schedule/job',
method: 'post',
data: data,
});
}
/**
* 修改定时任务调度
* @param data 任务对象
* @returns object
*/
export function updateJob(data: Record<string, any>) {
return request({
url: '/schedule/job',
method: 'put',
data: data,
});
}
/**
* 删除调度日志
* @param jobIds 任务日志Id
* @returns object
*/
export function delJobLog(jobIds: string) {
return request({
url: `/schedule/job/${jobIds}`,
method: 'delete',
});
}
/**
* 定时任务立即执行一次
* @param jobId 任务ID
* @returns object
*/
export function runJob(jobId: string) {
return request({
url: `/schedule/job/run`,
method: 'put',
data: {jobId},
});
}
/**
* 任务状态修改
* @param jobId 任务ID
* @param status 变更状态值
* @returns
*/
export function changeJobStatus(
jobId: string | number,
status: string | number
) {
return request({
url: '/schedule/job/changeStatus',
method: 'put',
data: {
jobId,
status,
},
});
}
/**
* 定时任务调度列表导出
* @param query 查询参数
* @returns bolb
*/
export function exportJob() {
return request({
url: '/schedule/job/export',
method: 'post',
responseType: 'blob',
});
}

View File

@@ -3,19 +3,18 @@ import { message, Tag } from 'ant-design-vue';
import type { Key } from 'ant-design-vue/es/_util/type';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { SimpleScrollbar } from '~/packages/materials/src';
import taskOperateDrawer from './modules/task-operate-drawer.vue';
import { useI18n } from "vue-i18n";
import { SyncOutlined, SearchOutlined, ProfileOutlined, FormOutlined, DeleteOutlined, RocketOutlined, ContainerOutlined } from '@ant-design/icons-vue';
import { SyncOutlined, SearchOutlined, ProfileOutlined, FormOutlined, DeleteOutlined, RocketOutlined, ContainerOutlined, FieldTimeOutlined, ExportOutlined } from '@ant-design/icons-vue';
import { enableStatusOptions } from '@/constants/business';
import { saveAs } from 'file-saver';
import Form from 'ant-design-vue/es/form/Form';
import Modal from 'ant-design-vue/es/modal/Modal';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const routePath = route.path;
import { useAntdForm, useFormRules } from '@/hooks/common/form';
const { defaultRequiredRule, formRules } = useFormRules();
const rules = {
jonName: defaultRequiredRule,
invokeTarget: defaultRequiredRule,
cronExpression: defaultRequiredRule,
};
const { t } = useI18n();
@@ -44,8 +43,50 @@ let modalState: any = reactive({
},
confirmLoading: false,
openByCron: false,
statusOpt: [
{ label: t('common.normal'), value: '0' },
{ label: t('common.disable'), value: '1' }
],
jobGroup: [
{ label: t('common.default'), value: "DEFAULT" },
{ label: t('common.system'), value: "SYSTEM" }
],
sysJobSaveLog: [
{ label: t('common.record'), value: "0" },
{ label: t('common.noRecord'), value: "1" }
]
});
/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
modalState.from,
reactive({
jobName: [
{
required: true,
min: 2,
max: 50,
message: t('page.manage.task.jobNamePlease'),
},
],
invokeTarget: [
{
required: true,
min: 2,
max: 50,
message: t('page.manage.task.invokeTargetPlease'),
},
],
cronExpression: [
{
required: true,
min: 6,
message: t('page.manage.task.cronExpressionPlease'),
},
],
})
);
const scrollConfig = computed(() => {
return {
y: wrapperElHeight.value - 72,
@@ -53,11 +94,14 @@ const scrollConfig = computed(() => {
};
});
const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
const { columns, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
apiFn: doGetjobList,
apiParams: {
pageNum: 1,
pageSize: 10,
jobName: '',
jobGroup: '',
status: ''
},
rowKey: 'jobId',
columns: () => [
@@ -78,22 +122,6 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
dataIndex: 'jobGroup',
title: t('page.manage.task.group'),
align: 'center',
// customRender: ({ record }: any) => {
// if (record.operatorType === null) {
// return null;
// }
// const tagMap: any = {
// 0: t('page.manage.log.other'),
// 1: t('page.manage.log.backUser'),
// 2: t('page.manage.log.phoneUser'),
// };
// const tagColor: any = {
// '0': 'pink',
// '1': 'warning',
// '2': 'blue',
// };
// return <Tag color={tagColor[record.operatorType]}>{tagMap[record.operatorType]}</Tag>;
// }
},
{
key: 'invokeTarget',
@@ -132,74 +160,42 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
title: t('common.operate'),
align: 'center',
width: 200,
// customRender: ({ record }: any) =>
// !record.admin && (
// <div class="flex justify-around gap-8px">
// <Popconfirm onConfirm={() => handleDelete(record.operId)} title={t('common.confirmDelete')}>
// <a-button danger size="small">
// <template #icon>
// <SyncOutlined />
// </template>
// </a-button>
// </Popconfirm>
// </div>
// )
}
]
});
const {
drawerVisible,
operateType,
editingData,
handleAdd,
checkedRowKeys,
onBatchDeleted,
onDeleted
// closeDrawer
} = useTableOperate(data, { getData, idKey: 'jobId' });
const deptTreeData = ref<Api.Common.CommonTree>([]);
onMounted(() => {
});
async function handleBatchDelete() {
const { error } = await doDeleteLog(checkedRowKeys.value);
if (!error) {
onBatchDeleted();
}
Modal.confirm({
title: t('common.tipTitle'),
content: t('page.manage.task.delTip', { num: checkedRowKeys.value.join(',') }),
async onOk() {
const { error } = await doDeleteLog(checkedRowKeys.value);
if (!error) {
onBatchDeleted();
}
}
})
}
async function handleDelete(id: number) {
const { error } = await doDeleteLog([id]);
if (!error) {
onDeleted();
}
}
function handleUserSelectChange(selectedRowKeys: Key[], selectedRows: any[]) {
checkedRowKeys.value = selectedRowKeys as number[];
}
function fnTest() {
searchParams.value = {
};
resetSearchParams();
// 使用 nextTick 确保视图更新后检查
nextTick(() => {
console.log(operateType)
});
}
async function fnRecordView(jobId: number) {
// const { error, data } = await doGetjobInfo(jobId);
// // if (!error) {
// // onDeleted();
// // }
// console.log(data);
operateType.value = 'view';
if (modalState.confirmLoading) return;
@@ -215,16 +211,44 @@ async function fnRecordView(jobId: number) {
modalState.title = t('page.manage.task.viewJob');
console.log(modalState.openByView);
}
// if (res.code === RESULT_CODE_SUCCESS && res.data) {
// modalState.from = Object.assign(modalState.from, res.data);
// modalState.title = t('views.manage.job.viewJob');
// modalState.openByView = true;
// } else {
// message.error(t('views.manage.job.viewInfoErr'), 2);
// }
});
}
/**
* 对话框弹出确认执行函数
* 进行表达规则校验
*/
function fnModalOk() {
modalStateFrom
.validate()
.then(() => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const job = from.jobId ? updateJob(from) : addJob(from);
const key = 'job';
message.loading({ content: t('common.loading'), key });
job
.then((res: any) => {
if (!res.error) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
key,
duration: 2,
});
modalState.openByEdit = false;
modalStateFrom.resetFields();
getData();
}
})
.finally(() => {
modalState.confirmLoading = false;
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
});
}
/**
* 对话框弹出关闭执行函数
@@ -233,7 +257,7 @@ async function fnRecordView(jobId: number) {
function fnModalCancel() {
modalState.openByEdit = false;
modalState.openByView = false;
// modalStateFrom.resetFields();
modalStateFrom.resetFields();
}
@@ -264,6 +288,123 @@ function fnModalVisibleByEdit(jobId?: string | number) {
}
}
/**
* 对话框弹出cron生成回调
*/
function fnModalCron(opt: boolean, cronStr?: string) {
modalState.openByCron = opt;
if (cronStr) {
modalState.from.cronExpression = cronStr;
}
}
function fnRecordDelete(recordId: any) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('page.manage.task.delTip', { num: recordId }),
async onOk() {
const { error } = await delJobLog(recordId);
if (!error) {
onDeleted();
}
}
})
}
function fnRunTask(jobId: any) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('page.manage.task.runOneTip', { num: jobId }),
async onOk() {
const { error } = await runJob(jobId);
if (!error) {
message.success(t('page.manage.task.runOneOk'), 2);
}
}
})
}
/**跳转任务日志页面 */
function fnJobLogView(jobId: string | number = '0') {
console.log(`${routePath}/log/${jobId}`)
router.push(`${routePath}/log?jobId=${jobId}`);
}
/**
* 任务状态修改
* @param row 任务信息对象
*/
function fnRecordStatus(row: Record<string, string>) {
doGetType(row.jobId).then((res: any) => {
console.log(res);
})
const sysJobStatus = [
{
"label": t('common.normal'),
"value": "0",
"tagType": "",
"tagClass": ""
},
{
"label": t('common.disable'),
"value": "1",
"tagType": "",
"tagClass": ""
}
];
const text =
row.status === '1'
? sysJobStatus.find(s => s.value === '1')?.label
: sysJobStatus.find(s => s.value === '0')?.label;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.monitor.job.statusChange', { text, num: row.jobName }),
onOk() {
const key = 'changeJobStatus';
message.loading({ content: t('common.loading'), key });
changeJobStatus(row.jobId, row.status).then(res => {
if (!res.error) {
message.success({
content: t('common.msgSuccess', { msg: `${row.jobName} ${text}` }),
key,
duration: 2,
});
}
getData();
});
},
onCancel() {
const value =
row.status === '1'
? sysJobStatus.find(s => s.value === '0')?.value
: sysJobStatus.find(s => s.value === '1')?.value;
row.status = value || '0';
},
});
}
function fnExportList() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('common.exportTip'),
onOk() {
const key = 'exportJob';
message.loading({ content: t('common.loading'), key });
exportJob().then(res => {
if (!res.error) {
message.success({
content: t('common.exportOk'),
key,
duration: 2,
});
saveAs(res.data, `job_${Date.now()}.xlsx`);
}
});
},
});
}
</script>
<template>
@@ -274,14 +415,14 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<AForm :model="searchParams" :label-width="80">
<ARow :gutter="[16, 16]" wrap>
<ACol :lg="6" :md="12" :xs="24">
<AFormItem label="Name" name="operIp" class="m-0">
<AInput v-model:value="searchParams.operIp" />
<AFormItem label="Name" name="jobName" class="m-0">
<AInput v-model:value="searchParams.jobName" />
</AFormItem>
</ACol>
<ACol :lg="6" :md="12" :xs="24">
<AFormItem label="Group" name="title" class="m-0">
<AInput v-model:value="searchParams.title" />
<AFormItem label="Group" name="jobGroup" class="m-0">
<AInput v-model:value="searchParams.jobGroup" />
</AFormItem>
</ACol>
@@ -302,7 +443,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<AFormItem class="m-0">
<div class="w-full flex-y-center justify-end gap-8px">
<a-space :size="8">
<a-button @click="fnTest">
<a-button @click="resetSearchParams">
<template #icon>
<SyncOutlined />
</template>
@@ -326,10 +467,6 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<ACard title="Task Management" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper">
<template #extra>
<!-- <TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
:loading="loading" :show-delete="true" @add="handleAdd" @delete="handleBatchDelete" @refresh="getData"
:showExport="true" :not-show-add="false" /> -->
<div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
<slot name="prefix"></slot>
<slot name="default">
@@ -355,13 +492,21 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<span>{{ $t('common.refresh') }}</span>
</div>
</AButton>
<!-- <AButton size="small" type="primary" @click="handleExport" v-show="showExport">
<div class="flex-y-center gap-8px">
<icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
<span>{{ $t('common.export') }}</span>
</div>
</AButton> -->
<TableColumnSetting v-model:columns="columns" />
<AButton size="small" type="primary" @click="fnExportList">
<template #icon>
<ExportOutlined />
</template>
<span>{{ $t('common.export') }}</span>
</AButton>
<AButton size="small" type="default" @click.prevent="fnJobLogView()">
<template #icon>
<ContainerOutlined />
</template>
{{ t('page.manage.task.jobLog') }}
</AButton>
<slot name="suffix"></slot>
</div>
</template>
@@ -375,17 +520,14 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<a-switch v-model:checked="record.status" checked-value="0" un-checked-value="1" size="small" />
<!-- <DictTag :options="{
'0': t('common.normal'),
'1': t('common.abnormal'),
}" :value="record.status" /> -->
<a-switch v-model:checked="record.status" checked-value="0" un-checked-value="1" size="small"
@change="fnRecordStatus(record)" />
</template>
<template v-if="column.key === 'operate'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ 'View' }}</template>
<template #title>{{ t('common.view') }}</template>
<a-button type="link" @click.prevent="fnRecordView(record.jobId)">
<template #icon>
<ProfileOutlined />
@@ -393,7 +535,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ 'Edit' }}</template>
<template #title>{{ t('common.edit') }}</template>
<a-button type="link" @click.prevent="fnModalVisibleByEdit(record.jobId)">
<template #icon>
<FormOutlined />
@@ -402,8 +544,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-tooltip>
<a-tooltip>
<template #title>{{ 'Delete' }}</template>
<a-button type="link">
<template #title>{{ t('common.delete') }}</template>
<a-button type="link" @click.prevent="fnRecordDelete(record.jobId)">
<template #icon>
<DeleteOutlined />
</template>
@@ -411,8 +553,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-tooltip>
<a-tooltip>
<template #title>{{ 'run' }}</template>
<a-button type="link">
<template #title>{{ t('page.manage.task.runOne') }}</template>
<a-button type="link" @click.prevent="fnRunTask(record.jobId)">
<template #icon>
<RocketOutlined />
</template>
@@ -420,8 +562,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-tooltip>
<a-tooltip>
<template #title>{{ 'Job Log' }}</template>
<a-button type="link">
<template #title>{{ t('page.manage.task.jobLog') }}</template>
<a-button type="link" @click.prevent="fnJobLogView(record.jobId)">
<template #icon>
<ContainerOutlined />
</template>
@@ -434,11 +576,6 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</ATable>
<!-- <taskOperateDrawer v-model:visible="drawerVisible" :dept-tree-data="deptTreeData" :operate-type="operateType"
:row-data="editingData" @submitted="getData" /> -->
<!-- 详情框 -->
<a-modal :width="800" v-model:open="modalState.openByView" :title="modalState.title" @cancel="fnModalCancel">
<a-form layout=" horizontal" :label-col="{ span: 6 }" :label-wrap="true">
@@ -528,10 +665,10 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<!-- 新增框或修改框 -->
<!-- <a-modal :drag="true" :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
<a-modal :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
:open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @cancel="fnModalCancel">
<a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true" :rules="rules">
<a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.task.taskName')" name="jobName">
@@ -542,7 +679,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.task.status')" name="status">
<a-select v-model:value="modalState.from.status" default-value="0"
:placeholder="t('common.selectPlease')" :options="dict.sysJobStatus">
:placeholder="t('common.selectPlease')" :options="modalState.statusOpt">
</a-select>
</a-form-item>
</a-col>
@@ -552,20 +689,20 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.task.jobGroup')" name="jobGroup">
<a-select v-model:value="modalState.from.jobGroup" default-value="DEFAULT"
:placeholder="t('common.selectPlease')" :options="dict.sysJobGroup">
:placeholder="t('common.selectPlease')" :options="modalState.jobGroup">
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.task.saveLog')" name="saveLog">
<a-select v-model:value="modalState.from.saveLog" default-value="0"
:placeholder="t('common.selectPlease')" :options="dict.sysJobSaveLog">
:placeholder="t('common.selectPlease')" :options="modalState.sysJobSaveLog">
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item :label="t('page.manage.task.invokeTarget')" name="invokeTarget" :label-col="{ span: 3 }"
<a-form-item :label="t('page.manage.task.invoke')" name="invokeTarget" :label-col="{ span: 3 }"
:label-wrap="true">
<a-input v-model:value="modalState.from.invokeTarget" allow-clear
:placeholder="t('page.manage.task.invokeTargetPlease')">
@@ -580,7 +717,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-input>
</a-form-item>
<a-form-item :label="t('page.manage.task.cronExpression')" name="cronExpression" :label-col="{ span: 3 }"
<a-form-item :label="t('page.manage.task.cron')" name="cronExpression" :label-col="{ span: 3 }"
:label-wrap="true">
<a-input v-model:value="modalState.from.cronExpression" allow-clear
:placeholder="t('page.manage.task.cronExpressionPlease')">
@@ -606,6 +743,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-input>
</a-form-item>
<a-form-item :label="t('page.manage.task.targetParams')" name="targetParams" :label-col="{ span: 3 }"
:label-wrap="true">
<a-textarea v-model:value="modalState.from.targetParams" :auto-size="{ minRows: 2, maxRows: 6 }"
@@ -618,8 +756,11 @@ function fnModalVisibleByEdit(jobId?: string | number) {
:maxlength="400" :show-count="true" />
</a-form-item>
</a-form>
</a-modal> -->
</a-modal>
<CronModal v-model:open="modalState.openByCron" :cron="modalState.from.cronExpression"
@ok="fnModalCron(false, $event)"></CronModal>
</ACard>