1391 lines
62 KiB
Vue
1391 lines
62 KiB
Vue
<script lang="ts">
|
|
export default {
|
|
name: "tasksetting",
|
|
};
|
|
</script>
|
|
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, reactive, watch } from 'vue'
|
|
import { ElTable, ElMessage, ElMessageBox, FormRules } from 'element-plus'
|
|
import { getTaskList, addTaskList, delTaskList, updataTaskList, setTaskList, changeItemOrder } from "@/api/taxkSetting";
|
|
import Page from '@/components/Pagination/page.vue'
|
|
import Sortable from 'sortablejs';
|
|
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
|
|
//输入框内文字
|
|
const input = ref('')
|
|
//表格数据
|
|
const tableData = ref([]) as any
|
|
//定义新增
|
|
const info: any = ref({
|
|
jobName: '',
|
|
jobCron: '',
|
|
jobClass: '',
|
|
jobMethod: '',
|
|
jobParams: '',
|
|
description: '',
|
|
})
|
|
//控制弹窗
|
|
const infoForm = ref();
|
|
const dialogVisible = ref(false)
|
|
//时间周期弹窗
|
|
const cycleTime = ref(false)
|
|
//弹窗标题
|
|
const title = ref('')
|
|
//分页
|
|
const size = ref(10)
|
|
const current = ref(1)
|
|
const total = ref()
|
|
const pcode = ref(10)
|
|
//多选删除获取id
|
|
const delid: any = ref([])
|
|
//定义tabs
|
|
const index = ref(1)
|
|
//时间周期表达式-单选
|
|
//秒
|
|
const second = ref()
|
|
//分
|
|
const divide = ref()
|
|
//时
|
|
const time = ref()
|
|
//日
|
|
const sun = ref()
|
|
//月
|
|
const moon = ref()
|
|
//周
|
|
const week = ref()
|
|
//年
|
|
const year = ref()
|
|
//时间周期-周期-秒
|
|
const periodsecond = ref({
|
|
periodInput1: '1',
|
|
periodInput2: '2',
|
|
periodInput3: '1',
|
|
periodInput4: '2'
|
|
})
|
|
//时间周期-周期-分
|
|
const perioddivide = ref({
|
|
periodInput1: '1',
|
|
periodInput2: '2',
|
|
periodInput3: '1',
|
|
periodInput4: '2'
|
|
})
|
|
//时间周期-周期-时
|
|
const periodtime = ref({
|
|
periodInput1: '1',
|
|
periodInput2: '2',
|
|
periodInput3: '1',
|
|
periodInput4: '2'
|
|
})
|
|
//时间周期-周期-日
|
|
const periodsun = ref({
|
|
periodInput1: '1',
|
|
periodInput2: '2',
|
|
periodInput3: '1',
|
|
periodInput4: '1',
|
|
periodInput5: '1'
|
|
})
|
|
//时间周期-周期-月
|
|
const periodmoon = ref({
|
|
periodInput1: '1',
|
|
periodInput2: '2',
|
|
periodInput3: '1',
|
|
periodInput4: '2'
|
|
})
|
|
//时间周期-周期-周
|
|
const periodweek = ref({
|
|
periodInput1: '1',
|
|
periodInput2: '2',
|
|
periodInput3: '1',
|
|
periodInput4: '1',
|
|
periodInput5: '1'
|
|
})
|
|
//时间周期-周期-年
|
|
const periodyear = ref({
|
|
periodInput1: '2023',
|
|
periodInput2: '2036',
|
|
})
|
|
////时间周期-指定-秒
|
|
const checkListsecond = ref([])
|
|
const appointsecond = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
|
|
'24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
|
|
'51', '52', '53', '54', '55', '56', '57', '58', '59'])
|
|
////时间周期-指定-分
|
|
const checkListdivide = ref([])
|
|
const appointdivide = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
|
|
'24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
|
|
'51', '52', '53', '54', '55', '56', '57', '58', '59'])
|
|
////时间周期-指定-时
|
|
const checkListtime = ref([])
|
|
const appointtime1 = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11'])
|
|
const appointtime2 = ref(['12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',])
|
|
////时间周期-指定-日
|
|
const checkListsun = ref([])
|
|
const appointsun = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
|
|
'24', '25', '26', '27', '28', '29', '30', '31'])
|
|
////时间周期-指定-月
|
|
const checkListmoon = ref([])
|
|
const appointmoon = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',])
|
|
////时间周期-指定-周
|
|
const checkListweek: any = ref([])
|
|
const appointweek = ref(['日', '一', '二', '三', '四', '五', '六'])
|
|
//多选 - 秒
|
|
function ahangesecond() {
|
|
rediosecond(4)
|
|
}
|
|
//表达式字段
|
|
const field = ref({
|
|
fieldsecond: '*',
|
|
fielddivide: '*',
|
|
fieldtime: '*',
|
|
fieldsun: '*',
|
|
fieldmoon: '*',
|
|
fieldweek: '?',
|
|
fieldyear: '',
|
|
})
|
|
//表达式
|
|
const resentation = ref('')
|
|
//时间周期
|
|
//秒
|
|
function rediosecond(val: any) {
|
|
second.value = val
|
|
if (val == 1) {
|
|
field.value.fieldsecond = '*'
|
|
checkListsecond.value = []
|
|
} else if (val == 2) {
|
|
field.value.fieldsecond = periodsecond.value.periodInput1 + '-' + periodsecond.value.periodInput2
|
|
checkListsecond.value = []
|
|
} else if (val == 3) {
|
|
field.value.fieldsecond = periodsecond.value.periodInput3 + '/' + periodsecond.value.periodInput4
|
|
checkListsecond.value = []
|
|
} else if (val == 4) {
|
|
const secondarr: any = ref([])
|
|
const arraysecond: any = ref([])
|
|
secondarr.value = JSON.parse(JSON.stringify(checkListsecond.value))
|
|
secondarr.value.forEach((item: any) => {
|
|
arraysecond.value.push(parseInt(item))
|
|
})
|
|
field.value.fieldsecond = arraysecond.value.toString()
|
|
}
|
|
|
|
}
|
|
//分
|
|
function rediodivide(val: any) {
|
|
divide.value = val
|
|
if (val == 1) {
|
|
field.value.fielddivide = '*'
|
|
checkListdivide.value = []
|
|
} else if (val == 2) {
|
|
field.value.fielddivide = perioddivide.value.periodInput1 + '-' + perioddivide.value.periodInput2
|
|
checkListdivide.value = []
|
|
} else if (val == 3) {
|
|
field.value.fielddivide = perioddivide.value.periodInput3 + '/' + perioddivide.value.periodInput4
|
|
checkListdivide.value = []
|
|
} else if (val == 4) {
|
|
const secondarr: any = ref([])
|
|
const arraysecond: any = ref([])
|
|
secondarr.value = JSON.parse(JSON.stringify(checkListdivide.value))
|
|
secondarr.value.forEach((item: any) => {
|
|
arraysecond.value.push(parseInt(item))
|
|
})
|
|
field.value.fielddivide = arraysecond.value.toString()
|
|
}
|
|
}
|
|
//时
|
|
function rediodtime(val: any) {
|
|
time.value = val
|
|
if (val == 1) {
|
|
field.value.fieldtime = '*'
|
|
checkListtime.value = []
|
|
} else if (val == 2) {
|
|
field.value.fieldtime = periodtime.value.periodInput1 + '-' + periodtime.value.periodInput2
|
|
checkListtime.value = []
|
|
} else if (val == 3) {
|
|
field.value.fieldtime = periodtime.value.periodInput3 + '/' + periodtime.value.periodInput4
|
|
checkListtime.value = []
|
|
} else if (val == 4) {
|
|
const secondarr: any = ref([])
|
|
const arraysecond: any = ref([])
|
|
secondarr.value = JSON.parse(JSON.stringify(checkListtime.value))
|
|
secondarr.value.forEach((item: any) => {
|
|
arraysecond.value.push(parseInt(item))
|
|
})
|
|
field.value.fieldtime = arraysecond.value.toString()
|
|
}
|
|
}
|
|
//日
|
|
function rediodsun(val: any) {
|
|
sun.value = val
|
|
if (val == 1) {
|
|
checkListsun.value = []
|
|
field.value.fieldsun = '*'
|
|
} else if (val == 2) {
|
|
checkListsun.value = []
|
|
field.value.fieldsun = '?'
|
|
} else if (val == 3) {
|
|
checkListsun.value = []
|
|
field.value.fieldsun = periodsun.value.periodInput1 + '-' + periodsun.value.periodInput2
|
|
} else if (val == 4) {
|
|
checkListsun.value = []
|
|
field.value.fieldsun = periodsun.value.periodInput3 + '/' + periodsun.value.periodInput4
|
|
} else if (val == 5) {
|
|
checkListsun.value = []
|
|
field.value.fieldsun = periodsun.value.periodInput5 + 'w'
|
|
} else if (val == 6) {
|
|
checkListsun.value = []
|
|
field.value.fieldsun = 'L'
|
|
} else if (val == 7) {
|
|
const secondarr: any = ref([])
|
|
const arraysecond: any = ref([])
|
|
secondarr.value = JSON.parse(JSON.stringify(checkListsun.value))
|
|
secondarr.value.forEach((item: any) => {
|
|
arraysecond.value.push(parseInt(item))
|
|
})
|
|
field.value.fieldsun = arraysecond.value.toString()
|
|
}
|
|
}
|
|
//月
|
|
function rediodmoon(val: any) {
|
|
moon.value = val
|
|
if (val == 1) {
|
|
field.value.fieldmoon = '*'
|
|
checkListmoon.value = []
|
|
} else if (val == 2) {
|
|
field.value.fieldmoon = periodmoon.value.periodInput1 + '-' + periodmoon.value.periodInput2
|
|
checkListmoon.value = []
|
|
} else if (val == 3) {
|
|
field.value.fieldmoon = periodmoon.value.periodInput3 + '/' + periodmoon.value.periodInput4
|
|
checkListmoon.value = []
|
|
} else if (val == 4) {
|
|
const secondarr: any = ref([])
|
|
const arraysecond: any = ref([])
|
|
secondarr.value = JSON.parse(JSON.stringify(checkListmoon.value))
|
|
secondarr.value.forEach((item: any) => {
|
|
arraysecond.value.push(parseInt(item))
|
|
})
|
|
field.value.fieldmoon = arraysecond.value.toString()
|
|
}
|
|
}
|
|
//周
|
|
function rediodweek(val: any) {
|
|
week.value = val
|
|
if (val == 1) {
|
|
field.value.fieldweek = '*'
|
|
checkListweek.value = []
|
|
} else if (val == 2) {
|
|
field.value.fieldweek = '?'
|
|
checkListweek.value = []
|
|
} else if (val == 3) {
|
|
field.value.fieldweek = periodweek.value.periodInput1 + '-' + periodweek.value.periodInput2
|
|
checkListweek.value = []
|
|
} else if (val == 4) {
|
|
field.value.fieldweek = periodweek.value.periodInput3 + '#' + periodweek.value.periodInput4
|
|
checkListweek.value = []
|
|
} else if (val == 5) {
|
|
field.value.fieldweek = periodweek.value.periodInput5 + 'L'
|
|
checkListweek.value = []
|
|
} else if (val == 6) {
|
|
const secondarr: any = ref([])
|
|
const arraysecond: any = ref([])
|
|
secondarr.value = JSON.parse(JSON.stringify(checkListweek.value))
|
|
secondarr.value.forEach((res: any, index: any) => {
|
|
if (res == '日') {
|
|
secondarr.value[index] = 1
|
|
} else if (res == '一') {
|
|
secondarr.value[index] = 2
|
|
} else if (res == '二') {
|
|
secondarr.value[index] = 3
|
|
} else if (res == '三') {
|
|
secondarr.value[index] = 4
|
|
} else if (res == '四') {
|
|
secondarr.value[index] = 5
|
|
} else if (res == '五') {
|
|
secondarr.value[index] = 6
|
|
} else if (res == '六') {
|
|
secondarr.value[index] = 7
|
|
}
|
|
})
|
|
secondarr.value.forEach((item: any) => {
|
|
arraysecond.value.push(parseInt(item))
|
|
})
|
|
field.value.fieldweek = arraysecond.value.toString()
|
|
}
|
|
}
|
|
//年
|
|
function rediodyear(val: any) {
|
|
year.value = val
|
|
if (val == 1) {
|
|
field.value.fieldyear = '?'
|
|
} else if (val == 2) {
|
|
field.value.fieldyear = '*'
|
|
} else if (val == 3) {
|
|
field.value.fieldyear = periodyear.value.periodInput1 + '-' + periodyear.value.periodInput2
|
|
}
|
|
}
|
|
//拼接表达式字段
|
|
function montage() {
|
|
resentation.value = field.value.fieldsecond + ' ' + field.value.fielddivide + ' ' + field.value.fieldtime + ' ' + field.value.fieldsun + ' ' + field.value.fieldmoon + ' ' + field.value.fieldweek + ' ' + field.value.fieldyear
|
|
}
|
|
//时间周期弹窗-确定
|
|
function assignment() {
|
|
if (field.value.fieldsun != '?' && field.value.fieldweek != '?' || field.value.fieldsun == '?' && field.value.fieldweek == '?') {
|
|
ElMessage({
|
|
message: '日和周不能同时指定',
|
|
type: 'warning',
|
|
})
|
|
return false
|
|
}
|
|
if (resentation.value !== '') {
|
|
info.value.jobCron = resentation.value
|
|
} else {
|
|
info.value.jobCron = field.value.fieldsecond + ' ' + field.value.fielddivide + ' ' + field.value.fieldtime + ' ' + field.value.fieldsun + ' ' + field.value.fieldmoon + ' ' + field.value.fieldweek + ' ' + field.value.fieldyear
|
|
}
|
|
|
|
cycleTime.value = false
|
|
}
|
|
//时间周期弹窗-取消
|
|
function Closeassign() {
|
|
cycleTime.value = false
|
|
}
|
|
//监听表达式变化
|
|
watch(() => field, (newValue, oldValue) => {
|
|
montage()
|
|
}, { deep: true })
|
|
//获取表格数据
|
|
function getTasklist() {
|
|
const params = {
|
|
jobName: input.value,
|
|
size: size.value,
|
|
current: current.value
|
|
}
|
|
getTaskList(params).then((res) => {
|
|
size.value = res.data.size
|
|
current.value = res.data.current
|
|
total.value = res.data.total
|
|
pcode.value = res.data.size
|
|
tableData.value = res.data.records
|
|
})
|
|
}
|
|
|
|
//表格多选事件
|
|
function handleSelectionChange(val: any) {
|
|
delid.value = val
|
|
}
|
|
//表格多选样式
|
|
const tableRowClassName = ({
|
|
row,
|
|
rowIndex,
|
|
}: {
|
|
row: any
|
|
rowIndex: number
|
|
}) => {
|
|
if (rowIndex % 2 === 0) {
|
|
return 'warning-row'
|
|
} else if (rowIndex % 2 === 1) {
|
|
return 'success-row'
|
|
}
|
|
return ''
|
|
}
|
|
//定义新增任务规则
|
|
//定义企业填写规则
|
|
const rules = reactive<FormRules>({
|
|
jobName: [{ required: true, message: "请填任务名称", trigger: "blur" }, { validator: stringlength, trigger: 'blur' }],
|
|
jobCron: [{ required: true, message: "请填写事件周期表达式", trigger: "blur" }],
|
|
jobClass: [{ required: true, message: "请填写执行类名称", trigger: "blur" }, { validator: stringlength, trigger: 'blur' }],
|
|
});
|
|
function stringlength(rule: any, value: any, callback: any) {
|
|
if (value.length > 200) {
|
|
return callback(new Error('字符最大长度不超过200'))
|
|
}
|
|
callback()
|
|
}
|
|
//新增任务
|
|
function addsetting() {
|
|
title.value = '新增定时任务'
|
|
info.value = {
|
|
jobName: '',
|
|
jobCron: '',
|
|
jobClass: '',
|
|
jobMethod: '',
|
|
jobParams: '',
|
|
description: '',
|
|
}
|
|
dialogVisible.value = true
|
|
}
|
|
//修改任务
|
|
const editinfo = ref([])
|
|
function editTaskList(row: any) {
|
|
title.value = '修改定时任务'
|
|
dialogVisible.value = true
|
|
editinfo.value = JSON.parse(JSON.stringify(row))
|
|
info.value = editinfo.value
|
|
}
|
|
//弹窗关闭事件
|
|
function handleClose() {
|
|
dialogVisible.value = false
|
|
if (infoForm.value != null) infoForm.value.resetFields();
|
|
}
|
|
//新增弹窗-确定
|
|
function confirmClick(formEl: any) {
|
|
const params = info.value
|
|
formEl.validate((valid: any) => {
|
|
if (valid) {
|
|
if (info.value.id) {
|
|
updataTaskList(params).then((res: any) => {
|
|
if (res.code == '0') {
|
|
dialogVisible.value = false
|
|
ElMessage({
|
|
message: '修改成功',
|
|
type: 'success',
|
|
})
|
|
}
|
|
getTasklist()
|
|
});
|
|
} else {
|
|
addTaskList(params).then((res: any) => {
|
|
if (res.code == '0') {
|
|
dialogVisible.value = false
|
|
ElMessage({
|
|
message: '添加成功',
|
|
type: 'success',
|
|
})
|
|
}
|
|
getTasklist()
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//多选删除
|
|
function delsetting() {
|
|
const id: any = ref([])
|
|
delid.value.forEach((item: any) => {
|
|
id.value.push(item.id)
|
|
})
|
|
const params = {
|
|
id: id.value.toString()
|
|
}
|
|
ElMessageBox.confirm('确定删除已选择的定时任务吗？', "删除提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
delTaskList(params).then((res: any) => {
|
|
if (res.code == '0') {
|
|
ElMessage({
|
|
message: '删除成功',
|
|
type: 'success',
|
|
})
|
|
}
|
|
getTasklist()
|
|
})
|
|
|
|
})
|
|
.catch(() => {
|
|
getTasklist()
|
|
});
|
|
|
|
}
|
|
//删除
|
|
function deleTaskList(row: any) {
|
|
const params = {
|
|
id: row.id
|
|
}
|
|
ElMessageBox.confirm('确定删除此定时任务吗？', "删除提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
delTaskList(params).then((res: any) => {
|
|
if (res.code == '0') {
|
|
ElMessage({
|
|
message: '删除成功',
|
|
type: 'success',
|
|
})
|
|
}
|
|
getTasklist()
|
|
})
|
|
|
|
})
|
|
.catch(() => {
|
|
getTasklist()
|
|
});
|
|
}
|
|
//定时任务的启用
|
|
function switchChange(row: any) {
|
|
//定义状态的暂停和开启
|
|
const elmass = ref('')
|
|
|
|
if (row.status == '0') {
|
|
elmass.value = "确定暂停此定时任务吗？"
|
|
} else if (row.status == '1') {
|
|
elmass.value = "确定启用此定时任务吗？"
|
|
}
|
|
|
|
ElMessageBox.confirm(elmass.value, "提示信息", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
const params = {
|
|
id: row.id,
|
|
status: row.status
|
|
}
|
|
setTaskList(params).then((res: any) => {
|
|
if (res.code == '0') {
|
|
ElMessage({
|
|
message: '改变成功',
|
|
type: 'success',
|
|
})
|
|
}
|
|
getTasklist()
|
|
})
|
|
|
|
})
|
|
.catch(() => {
|
|
getTasklist()
|
|
});
|
|
}
|
|
//时间周期 - 弹窗
|
|
function cycleCron() {
|
|
cycleTime.value = true
|
|
index.value = 1
|
|
Echo()
|
|
}
|
|
//时间周期回显
|
|
function Echo() {
|
|
resentation.value = info.value.jobCron
|
|
if (info.value.jobCron == '') {
|
|
second.value = ''
|
|
divide.value = ''
|
|
time.value = ''
|
|
sun.value = ''
|
|
moon.value = ''
|
|
week.value = ''
|
|
year.value = ''
|
|
checkListsecond.value = []
|
|
checkListdivide.value = []
|
|
checkListtime.value = []
|
|
checkListsun.value = []
|
|
checkListmoon.value = []
|
|
checkListweek.value = []
|
|
resentation.value = ''
|
|
field.value = {
|
|
fieldsecond: '*',
|
|
fielddivide: '*',
|
|
fieldtime: '*',
|
|
fieldsun: '*',
|
|
fieldmoon: '*',
|
|
fieldweek: '?',
|
|
fieldyear: '',
|
|
}
|
|
} else {
|
|
const arrEcho = JSON.parse(JSON.stringify(info.value.jobCron))
|
|
const arrayEcho = arrEcho.split(" ");
|
|
//秒
|
|
if (arrayEcho[0] == '*') {
|
|
second.value = 1
|
|
checkListsecond.value = []
|
|
field.value.fieldsecond = '*'
|
|
} else if (arrayEcho[0].indexOf("-") != -1) {
|
|
second.value = 2
|
|
checkListsecond.value = []
|
|
field.value.fieldsecond = arrayEcho[0]
|
|
const secondArr = arrayEcho[0].split("-");
|
|
periodsecond.value.periodInput1 = secondArr[0]
|
|
periodsecond.value.periodInput2 = secondArr[1]
|
|
} else if (arrayEcho[0].indexOf("/") != -1) {
|
|
second.value = 3
|
|
field.value.fieldsecond = arrayEcho[0]
|
|
checkListsecond.value = []
|
|
const secondArr = arrayEcho[0].split("/");
|
|
periodsecond.value.periodInput3 = secondArr[0]
|
|
periodsecond.value.periodInput4 = secondArr[1]
|
|
} else if (arrayEcho[0].indexOf("/") == -1 && arrayEcho[0].indexOf("-") == -1 && arrayEcho[0] != '*') {
|
|
second.value = 4
|
|
field.value.fieldsecond = arrayEcho[0]
|
|
|
|
const secondArr = arrayEcho[0].split(",");
|
|
const secondARR: any = ref([])
|
|
secondArr.forEach((item: any) => {
|
|
if (item < 10) {
|
|
item = '0' + item
|
|
}
|
|
secondARR.value.push(item)
|
|
})
|
|
checkListsecond.value = secondARR.value
|
|
}
|
|
//分
|
|
if (arrayEcho[1] == '*') {
|
|
divide.value = 1
|
|
checkListdivide.value = []
|
|
field.value.fielddivide = '*'
|
|
} else if (arrayEcho[1].indexOf("-") != -1) {
|
|
divide.value = 2
|
|
checkListdivide.value = []
|
|
field.value.fielddivide = arrayEcho[1]
|
|
const secondArr = arrayEcho[1].split("-");
|
|
perioddivide.value.periodInput1 = secondArr[0]
|
|
perioddivide.value.periodInput2 = secondArr[1]
|
|
} else if (arrayEcho[1].indexOf("/") != -1) {
|
|
divide.value = 3
|
|
field.value.fielddivide = arrayEcho[1]
|
|
checkListdivide.value = []
|
|
const secondArr = arrayEcho[1].split("/");
|
|
perioddivide.value.periodInput3 = secondArr[0]
|
|
perioddivide.value.periodInput4 = secondArr[1]
|
|
} else if (arrayEcho[1].indexOf("/") == -1 && arrayEcho[1].indexOf("-") == -1 && arrayEcho[1] != '*') {
|
|
divide.value = 4
|
|
field.value.fielddivide = arrayEcho[1]
|
|
|
|
const secondArr = arrayEcho[1].split(",");
|
|
const secondARR: any = ref([])
|
|
secondArr.forEach((item: any) => {
|
|
if (item < 10) {
|
|
item = '0' + item
|
|
}
|
|
|
|
secondARR.value.push(item)
|
|
})
|
|
checkListdivide.value = secondARR.value
|
|
}
|
|
//时
|
|
if (arrayEcho[2] == '*') {
|
|
time.value = 1
|
|
checkListtime.value = []
|
|
field.value.fieldtime = '*'
|
|
} else if (arrayEcho[2].indexOf("-") != -1) {
|
|
time.value = 2
|
|
checkListtime.value = []
|
|
field.value.fieldtime = arrayEcho[2]
|
|
const secondArr = arrayEcho[2].split("-");
|
|
periodtime.value.periodInput1 = secondArr[0]
|
|
periodtime.value.periodInput2 = secondArr[1]
|
|
} else if (arrayEcho[2].indexOf("/") != -1) {
|
|
time.value = 3
|
|
field.value.fieldtime = arrayEcho[2]
|
|
checkListtime.value = []
|
|
const secondArr = arrayEcho[2].split("/");
|
|
periodtime.value.periodInput3 = secondArr[0]
|
|
periodtime.value.periodInput4 = secondArr[1]
|
|
} else if (arrayEcho[2].indexOf("/") == -1 && arrayEcho[2].indexOf("-") == -1 && arrayEcho[2] != '*') {
|
|
time.value = 4
|
|
field.value.fieldtime = arrayEcho[2]
|
|
const secondArr = arrayEcho[2].split(",");
|
|
const secondARR: any = ref([])
|
|
secondArr.forEach((item: any) => {
|
|
if (item < 10) {
|
|
item = '0' + item
|
|
}
|
|
secondARR.value.push(item)
|
|
})
|
|
checkListtime.value = secondARR.value
|
|
}
|
|
//日
|
|
if (arrayEcho[3] == '*') {
|
|
sun.value = 1
|
|
checkListsun.value = []
|
|
field.value.fieldsun = '*'
|
|
} else if (arrayEcho[3] == '?') {
|
|
sun.value = 2
|
|
checkListsun.value = []
|
|
field.value.fieldsun = '?'
|
|
} else if (arrayEcho[3].indexOf("-") != -1) {
|
|
sun.value = 3
|
|
checkListsun.value = []
|
|
field.value.fieldtime = arrayEcho[3]
|
|
const secondArr = arrayEcho[3].split("-");
|
|
periodsun.value.periodInput1 = secondArr[0]
|
|
periodsun.value.periodInput2 = secondArr[1]
|
|
} else if (arrayEcho[3].indexOf("/") != -1) {
|
|
sun.value = 4
|
|
field.value.fieldtime = arrayEcho[3]
|
|
checkListsun.value = []
|
|
const secondArr = arrayEcho[3].split("/");
|
|
periodsun.value.periodInput3 = secondArr[0]
|
|
periodsun.value.periodInput4 = secondArr[1]
|
|
} else if (arrayEcho[3].indexOf("w") != -1) {
|
|
sun.value = 5
|
|
field.value.fieldtime = arrayEcho[3]
|
|
checkListsun.value = []
|
|
const secondArr = arrayEcho[3].split("w");
|
|
periodsun.value.periodInput5 = secondArr[0]
|
|
} else if (arrayEcho[3] == 'L') {
|
|
sun.value = 6
|
|
checkListsun.value = []
|
|
field.value.fieldsun = 'L'
|
|
} else if (arrayEcho[3].indexOf("/") == -1 && arrayEcho[3].indexOf("-") == -1 && arrayEcho[3] != '*' && arrayEcho[3] != '?' && arrayEcho[3] != 'L' && arrayEcho[3].indexOf("w") == -1) {
|
|
sun.value = 7
|
|
field.value.fieldsun = arrayEcho[3]
|
|
const secondArr = arrayEcho[3].split(",");
|
|
checkListsun.value = secondArr
|
|
}
|
|
//月
|
|
if (arrayEcho[4] == '*') {
|
|
moon.value = 1
|
|
checkListmoon.value = []
|
|
field.value.fieldmoon = '*'
|
|
} else if (arrayEcho[4].indexOf("-") != -1) {
|
|
moon.value = 2
|
|
checkListmoon.value = []
|
|
field.value.fieldmoon = arrayEcho[4]
|
|
const secondArr = arrayEcho[4].split("-");
|
|
periodmoon.value.periodInput1 = secondArr[0]
|
|
periodmoon.value.periodInput2 = secondArr[1]
|
|
} else if (arrayEcho[4].indexOf("/") != -1) {
|
|
moon.value = 3
|
|
field.value.fieldmoon = arrayEcho[4]
|
|
checkListmoon.value = []
|
|
const secondArr = arrayEcho[4].split("/");
|
|
periodmoon.value.periodInput3 = secondArr[0]
|
|
periodmoon.value.periodInput4 = secondArr[1]
|
|
} else if (arrayEcho[4].indexOf("/") == -1 && arrayEcho[4].indexOf("-") == -1 && arrayEcho[4] != '*') {
|
|
moon.value = 4
|
|
field.value.fieldmoon = arrayEcho[4]
|
|
const secondArr = arrayEcho[4].split(",");
|
|
|
|
checkListmoon.value = secondArr
|
|
}
|
|
//周
|
|
if (arrayEcho[5] == '*') {
|
|
week.value = 1
|
|
checkListweek.value = []
|
|
field.value.fieldweek = '*'
|
|
} else if (arrayEcho[5] == '?') {
|
|
week.value = 2
|
|
checkListweek.value = []
|
|
field.value.fieldweek = '?'
|
|
} else if (arrayEcho[5].indexOf("-") != -1) {
|
|
week.value = 3
|
|
checkListweek.value = []
|
|
field.value.fieldweek = arrayEcho[5]
|
|
const secondArr = arrayEcho[5].split("-");
|
|
periodweek.value.periodInput1 = secondArr[0]
|
|
periodweek.value.periodInput2 = secondArr[1]
|
|
} else if (arrayEcho[5].indexOf("/") != -1) {
|
|
week.value = 4
|
|
field.value.fieldweek = arrayEcho[5]
|
|
checkListweek.value = []
|
|
const secondArr = arrayEcho[5].split("/");
|
|
periodweek.value.periodInput3 = secondArr[0]
|
|
periodweek.value.periodInput4 = secondArr[1]
|
|
} else if (arrayEcho[5].indexOf("L") != -1) {
|
|
week.value = 5
|
|
field.value.fieldweek = arrayEcho[5]
|
|
checkListweek.value = []
|
|
const secondArr = arrayEcho[5].split("L");
|
|
periodweek.value.periodInput5 = secondArr[0]
|
|
} else if (arrayEcho[5].indexOf("/") == -1 && arrayEcho[5].indexOf("-") == -1 && arrayEcho[5] != '*' && arrayEcho[5] != '?' && arrayEcho[5].indexOf("L") == -1) {
|
|
week.value = 6
|
|
field.value.fieldweek = arrayEcho[5]
|
|
const secondArr = arrayEcho[5].split(",");
|
|
checkListweek.value = secondArr
|
|
checkListweek.value.forEach((res: any, index: any) => {
|
|
if (res == 1) {
|
|
checkListweek.value[index] = '日'
|
|
} else if (res == 2) {
|
|
checkListweek.value[index] = '一'
|
|
} else if (res == 3) {
|
|
checkListweek.value[index] = '二'
|
|
} else if (res == 4) {
|
|
checkListweek.value[index] = '三'
|
|
} else if (res == 5) {
|
|
checkListweek.value[index] = '四'
|
|
} else if (res == 6) {
|
|
checkListweek.value[index] = '五'
|
|
} else if (res == 7) {
|
|
checkListweek.value[index] = '六'
|
|
}
|
|
})
|
|
}
|
|
//年
|
|
if (arrayEcho[6] == '?') {
|
|
year.value = 1
|
|
field.value.fieldyear = '?'
|
|
} else if (arrayEcho[6] == '*') {
|
|
year.value = 2
|
|
field.value.fieldyear = '*'
|
|
} else if (arrayEcho[6].indexOf("-") != -1) {
|
|
year.value = 3
|
|
field.value.fieldyear = arrayEcho[6]
|
|
const secondArr = arrayEcho[6].split("-");
|
|
periodyear.value.periodInput1 = secondArr[0]
|
|
periodyear.value.periodInput2 = secondArr[1]
|
|
}
|
|
}
|
|
}
|
|
// if(resentation)
|
|
//拖拽
|
|
function rowDrop() {
|
|
const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
|
|
Sortable.create(tbody, {
|
|
draggable: ".draggable .el-table__row",
|
|
onEnd(data: any) {
|
|
const newIndex = data.newIndex;
|
|
const oldIndex = data.oldIndex;
|
|
if (tableData.value[newIndex].id == tableData.value[oldIndex].id) {
|
|
return false;
|
|
}
|
|
const params = {
|
|
fromID: tableData.value[newIndex].id,
|
|
toID: tableData.value[oldIndex].id,
|
|
};
|
|
changeItemOrder(params).then(() => {
|
|
getTasklist();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
getTasklist();
|
|
rowDrop()
|
|
});
|
|
</script>
|
|
<template>
|
|
<div style="padding:17px 15px 8px 15px;">
|
|
<div class="setting-box">
|
|
<div
|
|
style="display: flex;display: -webkit-flex; justify-content: space-between;-webkit-justify-content: space-between; margin-bottom: 20px;">
|
|
<div>
|
|
<el-input v-model="input" placeholder="请输入任务名称" clearable style="width: 200px;" @clear="getTasklist"
|
|
@keyup.enter="getTasklist" />
|
|
<el-button class="searchButton" type="primary" style="margin-left: 10px;" @click="getTasklist">搜索</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button class="searchButton" type="primary" style="margin-left: 10px;" @click="addsetting">新增</el-button>
|
|
<el-button class="searchButton" style="margin-left: 10px;" @click="delsetting" :disabled="delid.length <= 0"
|
|
:type="delid.length > 0 ? 'primary' : ''"><span></span> 删除</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="draggable">
|
|
<el-table ref="multipleTableRef" :data="tableData" style="width: 100%;margin-bottom: 20px;height: calc(72vh);
|
|
overflow: auto;" border :row-class-name="tableRowClassName" row-key="id"
|
|
@selection-change="handleSelectionChange"
|
|
:header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px'}">
|
|
<el-table-column type="selection" width="30" align="center" />
|
|
<el-table-column label="排序号" width="90">
|
|
<template #default="scope">
|
|
<div
|
|
style="width:100%;display: flex;display: -webkit-flex; align-items: center;-webkit-align-items: center;">
|
|
<div> <img src="@/assets/MenuIcon/lbcz_td.png" alt=""> </div>
|
|
<div style="margin-left: 15px;">{{ scope.row.orderno }}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="任务名称" width="120" property="jobName" />
|
|
<el-table-column property="jobClass" label="执行类名称" width="120" />
|
|
<el-table-column property="jobMethod" label="执行方法名称" width="160" />
|
|
<el-table-column property="jobCron" label="时间周期表达式" width="180" show-overflow-tooltip />
|
|
<el-table-column property="jobParams" label="方法参数" min-width="100" show-overflow-tooltip />
|
|
<el-table-column property="description" label="任务描述" min-width="100" show-overflow-tooltip />
|
|
<el-table-column property="status" label="状态" width="120">
|
|
<template #default="scope">
|
|
<el-switch v-model="scope.row.status" active-value="1" inactive-value="0"
|
|
@change="switchChange(scope.row)" style="margin-right: 4px"></el-switch>
|
|
<span v-if="scope.row.status == 1" class="effective">启用</span>
|
|
<span v-else style="color: #d7d7d7">暂停</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="lastmodifier" label="最近修改者" width="120" />
|
|
<el-table-column property="lastmodifydate" label="最近修改日期" width="170" />
|
|
<el-table-column label="操作" width="80">
|
|
<template #default="scope">
|
|
<div
|
|
style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around;">
|
|
<img src="@/assets/newimg/ht_xg.png" alt="" title="修改" style="cursor: pointer;"
|
|
@click="editTaskList(scope.row)">
|
|
<img v-if="scope.row.status == 0" src="@/assets/newimg/ht_sc.png" alt="" title="删除"
|
|
style="cursor: pointer;" @click="deleTaskList(scope.row)">
|
|
<img v-hasPerm="['del:role']" v-if="scope.row.status == 1" src="@/assets/newimg/ht_sc1.png"
|
|
title="删除" @click="" style="cursor: pointer;">
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<Page :total="total" v-model:size="size" v-model:current="current" @pagination="getTasklist()"></Page>
|
|
</div>
|
|
</div>
|
|
<Eldialog v-if="dialogVisible" :title="title" :zIndex="2000" :width="'620px'" :height="'600px'"
|
|
@before-close="handleClose">
|
|
<template v-slot:PopFrameContent>
|
|
<el-form ref="infoForm" :model="info" label-width="140px" :rules="rules" style="margin-top: 15px;" >
|
|
<el-form-item label="任务名称" prop="jobName">
|
|
<el-input v-model="info.jobName" style="width: 95%" placeholder="请输入任务名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="时间周期表达式" prop="jobCron">
|
|
<div
|
|
style="display: flex; display: -webkit-flex;flex-wrap: nowrap;justify-content: space-between;-webkit-flex-wrap: nowrap;-webkit-justify-content: space-between; width: 95%;">
|
|
<el-input v-model="info.jobCron" style="width: 83%" placeholder=" " disabled></el-input>
|
|
<el-button class="searchButton" type="primary" @click="cycleCron" >
|
|
设置</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="执行类名称" prop="jobClass">
|
|
<el-input v-model="info.jobClass" style="width: 95%" placeholder="请输入执行类名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="执行方法名称">
|
|
<el-input v-model="info.jobMethod" style="width: 95%" placeholder="请输入执行方法名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="方法参数">
|
|
<el-input v-model="info.jobParams" style="width: 95%" placeholder="请输入方法参数"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="任务描述">
|
|
<el-input v-model="info.description" style="width: 95%" placeholder="请输入任务描述"
|
|
:autosize="{ minRows: 2, maxRows: 8 }" type="textarea"></el-input>
|
|
</el-form-item>
|
|
<span class="dialog-footer"
|
|
style="display: flex;display: -webkit-flex; justify-content:center;-webkit-justify-content: center;margin: 10px 0px ;">
|
|
|
|
<div class="details-button" @click="handleClose">取消</div>
|
|
<div class="details-button" @click="confirmClick(infoForm)">确定</div>
|
|
</span>
|
|
</el-form>
|
|
</template>
|
|
</Eldialog>
|
|
<!-- <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="title"
|
|
append-to-body width="620px" draggable>
|
|
|
|
</el-dialog> -->
|
|
<Eldialog v-if="cycleTime" :title="'时间周期表达式设置'" :zIndex="2000" :width="'1216px'" :height="'600px'"
|
|
@before-close="Closeassign">
|
|
<template v-slot:PopFrameContent>
|
|
<div class="tabs">
|
|
<div @click="index = 1" :class="index == 1 ? 'tabsTitle' : ''" style="cursor: pointer;">秒</div>
|
|
<div @click="index = 2" :class="index == 2 ? 'tabsTitle' : ''" style="cursor: pointer;">分</div>
|
|
<div @click="index = 3" :class="index == 3 ? 'tabsTitle' : ''" style="cursor: pointer;">时</div>
|
|
<div @click="index = 4" :class="index == 4 ? 'tabsTitle' : ''" style="cursor: pointer;">日</div>
|
|
<div @click="index = 5" :class="index == 5 ? 'tabsTitle' : ''" style="cursor: pointer;">月</div>
|
|
<div @click="index = 6" :class="index == 6 ? 'tabsTitle' : ''" style="cursor: pointer;">周</div>
|
|
<div @click="index = 7" :class="index == 7 ? 'tabsTitle' : ''" style="cursor: pointer;">年</div>
|
|
<div style="width: 80%;"></div>
|
|
</div>
|
|
<div class="tabsContent">
|
|
<div v-show="index == 1" style="height:500px">
|
|
<el-radio-group v-model="second" @change="rediosecond">
|
|
<el-radio :label="1">每秒 <span class="spanmarg">允许的通配符[,-*/]</span>
|
|
</el-radio>
|
|
<el-radio :label="2">周期 <span class="spanmarg">
|
|
<span class="spanmarg">从</span>
|
|
<el-input class="spanmarg" @change="rediosecond(2)" v-model="periodsecond.periodInput1"
|
|
style="width:80px" />
|
|
<span class="spanmarg">-</span>
|
|
<el-input class="spanmarg" @change="rediosecond(2)" v-model="periodsecond.periodInput2"
|
|
style="width:80px" />
|
|
<span class="spanmarg">秒</span>
|
|
</span></el-radio>
|
|
<el-radio :label="3"><span>
|
|
<span style="color: #fff;">从</span>
|
|
<el-input class="spanmarg" @change="rediosecond(3)" v-model="periodsecond.periodInput3"
|
|
style="width:80px" />
|
|
<span class="spanmarg">秒开始，每</span>
|
|
<el-input class="spanmarg" @change="rediosecond(3)" v-model="periodsecond.periodInput4"
|
|
style="width:80px" />
|
|
<span class="spanmarg">秒执行一次</span>
|
|
</span></el-radio>
|
|
|
|
<el-radio :label="4" style="height: 230px; ">
|
|
<div style="display: flex; display: -webkit-flex;">
|
|
<div style="margin-top:-3px ;">指定</div>
|
|
<el-checkbox-group v-model="checkListsecond" @change="ahangesecond">
|
|
<div
|
|
style="margin-left: 15px; display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
|
|
<el-checkbox style="display: block;" v-for="item in appointsecond" :key="index"
|
|
:label="item" size="large" />
|
|
</div>
|
|
</el-checkbox-group>
|
|
|
|
</div>
|
|
|
|
</el-radio>
|
|
|
|
</el-radio-group>
|
|
</div>
|
|
<div v-show="index == 2" style="height:500px">
|
|
<el-radio-group v-model="divide" @change="rediodivide">
|
|
<el-radio :label="1">分钟 <span class="spanmarg">允许的通配符[,-*/]</span>
|
|
</el-radio>
|
|
<el-radio :label="2">周期 <span class="spanmarg">
|
|
<span class="spanmarg">从</span>
|
|
<el-input class="spanmarg" @change="rediodivide(2)" v-model="perioddivide.periodInput1"
|
|
style="width:80px" />
|
|
<span class="spanmarg">-</span>
|
|
<el-input class="spanmarg" @change="rediodivide(2)" v-model="perioddivide.periodInput2"
|
|
style="width:80px" />
|
|
<span class="spanmarg">分钟</span>
|
|
</span></el-radio>
|
|
<el-radio :label="3"><span>
|
|
<span style="color: #fff;">从</span>
|
|
<el-input class="spanmarg" @change="rediodivide(3)" v-model="perioddivide.periodInput3"
|
|
style="width:80px" />
|
|
<span class="spanmarg">分钟开始，每</span>
|
|
<el-input class="spanmarg" @change="rediodivide(3)" v-model="perioddivide.periodInput4"
|
|
style="width:80px" />
|
|
<span class="spanmarg">分钟执行一次</span>
|
|
</span></el-radio>
|
|
|
|
<el-radio :label="4" style="height: 230px; ">
|
|
<div style="display: flex;display: -webkit-flex;">
|
|
<div style="margin-top: -3px;">指定</div>
|
|
<el-checkbox-group v-model="checkListdivide" @change="rediodivide(4)">
|
|
<div
|
|
style="margin-left: 15px; display: flex; display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
|
|
<el-checkbox style="display: block;" v-for="item in appointdivide" :label="item"
|
|
size="large" />
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
|
|
</el-radio>
|
|
|
|
</el-radio-group>
|
|
</div>
|
|
<div v-show="index == 3" style="height:500px">
|
|
<el-radio-group v-model="time" @change="rediodtime">
|
|
<el-radio :label="1">小时<span class="spanmarg">允许的通配符[,-*/]</span>
|
|
</el-radio>
|
|
<el-radio :label="2">周期 <span class="spanmarg">
|
|
<span class="spanmarg">从</span>
|
|
<el-input class="spanmarg" @change="rediodtime(2)" v-model="periodtime.periodInput1"
|
|
style="width:80px" />
|
|
<span class="spanmarg">-</span>
|
|
<el-input class="spanmarg" @change="rediodtime(2)" v-model="periodtime.periodInput2"
|
|
style="width:80px" />
|
|
<span class="spanmarg">小时</span>
|
|
</span></el-radio>
|
|
<el-radio :label="3"><span>
|
|
<span style="color: #fff;">从</span>
|
|
<el-input class="spanmarg" @change="rediodtime(3)" v-model="periodtime.periodInput3"
|
|
style="width:80px" />
|
|
<span class="spanmarg">小时开始，每</span>
|
|
<el-input class="spanmarg" @change="rediodtime(3)" v-model="periodtime.periodInput4"
|
|
style="width:80px" />
|
|
<span class="spanmarg">小时执行一次</span>
|
|
</span></el-radio>
|
|
|
|
<el-radio :label="4" style="height: 230px; ">
|
|
<div style="display: flex;display: -webkit-flex;">
|
|
<div style="margin-top: -3px;">指定</div>
|
|
|
|
<div style="width:1000px; color: #fff;">
|
|
<div style="display: flex;display: -webkit-flex; margin-left: 15px; ">
|
|
<div style="margin-top: -3px;">上午：</div>
|
|
<el-checkbox-group v-model="checkListtime" @change="rediodtime(4)">
|
|
<div
|
|
style=" display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
|
|
<el-checkbox style="display: block;" v-for="item in appointtime1"
|
|
:label="item" size="large" />
|
|
</div>
|
|
</el-checkbox-group>
|
|
|
|
</div>
|
|
<div style="display: flex;display: -webkit-flex; margin-left: 15px;">
|
|
<div style="margin-top: -3px;">下午：</div>
|
|
<el-checkbox-group v-model="checkListtime" @change="rediodtime(4)">
|
|
<div
|
|
style=" display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
|
|
<el-checkbox style="display: block;" v-for="item in appointtime2"
|
|
:label="item" size="large" />
|
|
</div>
|
|
</el-checkbox-group>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-radio>
|
|
|
|
</el-radio-group>
|
|
</div>
|
|
<div v-show="index == 4" style="height:500px">
|
|
<el-radio-group v-model="sun" @change="rediodsun">
|
|
<el-radio :label="1">日<span class="spanmarg">允许的通配符[,-*/LW]</span>
|
|
</el-radio>
|
|
<el-radio :label="2">不指定</el-radio>
|
|
<el-radio :label="3">周期 <span class="spanmarg">
|
|
<span class="spanmarg">从</span>
|
|
<el-input class="spanmarg" @change="rediodsun(3)" v-model="periodsun.periodInput1"
|
|
style="width:80px" />
|
|
<span class="spanmarg">-</span>
|
|
<el-input class="spanmarg" @change="rediodsun(3)" v-model="periodsun.periodInput2"
|
|
style="width:80px" />
|
|
<span class="spanmarg">日</span>
|
|
</span></el-radio>
|
|
<el-radio :label="4"><span>
|
|
<span style="color: #fff;">从</span>
|
|
<el-input class="spanmarg" @change="rediodsun(4)" v-model="periodsun.periodInput3"
|
|
style="width:80px" />
|
|
<span class="spanmarg">日开始，每</span>
|
|
<el-input class="spanmarg" @change="rediodsun(4)" v-model="periodsun.periodInput4"
|
|
style="width:80px" />
|
|
<span class="spanmarg">天执行一次</span>
|
|
</span></el-radio>
|
|
<el-radio :label="5">每月<el-input class="spanmarg" @change="rediodsun(5)"
|
|
v-model="periodsun.periodInput5" style="width:80px" />
|
|
<span class="spanmarg">日最近的那个工作日
|
|
</span>
|
|
</el-radio>
|
|
<el-radio :label="6">本月最后一天</el-radio>
|
|
<el-radio :label="7" style="height: 230px; ">
|
|
<div style="display: flex;display: -webkit-flex; width: 1000px;">
|
|
<div style="margin-top: -3px;">指定</div>
|
|
<el-checkbox-group v-model="checkListsun" @change="rediodsun(7)">
|
|
<div
|
|
style="width:1000px;margin-left: 15px; display: flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;">
|
|
<el-checkbox style="display: block;" v-for="item in appointsun" :label="item"
|
|
size="large" />
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div v-show="index == 5" style="height:500px">
|
|
<el-radio-group v-model="moon" @change="rediodmoon">
|
|
<el-radio :label="1">月 <span class="spanmarg">允许的通配符[,-*/]</span>
|
|
</el-radio>
|
|
<el-radio :label="2">周期 <span class="spanmarg">
|
|
<span class="spanmarg">从</span>
|
|
<el-input class="spanmarg" @change="rediodmoon(2)" v-model="periodmoon.periodInput1"
|
|
style="width:80px" />
|
|
<span class="spanmarg">-</span>
|
|
<el-input class="spanmarg" @change="rediodmoon(2)" v-model="periodmoon.periodInput2"
|
|
style="width:80px" />
|
|
<span class="spanmarg">月</span>
|
|
</span></el-radio>
|
|
<el-radio :label="3"><span>
|
|
<span style="color: #fff;">从</span>
|
|
<el-input class="spanmarg" @change="rediodmoon(3)" v-model="periodmoon.periodInput3"
|
|
style="width:80px" />
|
|
<span class="spanmarg">月开始，每</span>
|
|
<el-input class="spanmarg" @change="rediodmoon(3)" v-model="periodmoon.periodInput4"
|
|
style="width:80px" />
|
|
<span class="spanmarg">月执行一次</span>
|
|
</span></el-radio>
|
|
|
|
<el-radio :label="4" style="height: 230px; ">
|
|
<div style="display: flex;display: -webkit-flex;">
|
|
<div style="margin-top: -3px;">指定</div>
|
|
<el-checkbox-group v-model="checkListmoon" @change="rediodmoon(4)">
|
|
<div
|
|
style="margin-left: 15px; display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;width: 1000px;">
|
|
<el-checkbox style="display: block;" v-for="item in appointmoon" :label="item"
|
|
size="large" />
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div v-show="index == 6" style="height:500px">
|
|
<el-radio-group v-model="week" @change="rediodweek">
|
|
<el-radio :label="1">周 <span class="spanmarg">允许的通配符[,-*/L#]</span>
|
|
</el-radio>
|
|
<el-radio :label="2">不指定</el-radio>
|
|
<el-radio :label="3">周期 <span class="spanmarg">
|
|
<span class="spanmarg">从星期</span>
|
|
<el-input class="spanmarg" @change="rediodweek(3)" v-model="periodweek.periodInput1"
|
|
style="width:80px" />
|
|
<span class="spanmarg">-</span>
|
|
<el-input class="spanmarg" @change="rediodweek(3)" v-model="periodweek.periodInput2"
|
|
style="width:80px" />
|
|
</span></el-radio>
|
|
<el-radio :label="4"><span>
|
|
<span style="color: #fff;">第</span>
|
|
<el-input class="spanmarg" @change="rediodweek(4)" v-model="periodweek.periodInput3"
|
|
style="width:80px" />
|
|
<span class="spanmarg">周的星期</span>
|
|
<el-input class="spanmarg" @change="rediodweek(4)" v-model="periodweek.periodInput4"
|
|
style="width:80px" />
|
|
</span></el-radio>
|
|
<el-radio :label="5"> <span class="spanmarg">本月最后一个星期
|
|
</span><el-input class="spanmarg" @change="rediodweek(5)" v-model="periodweek.periodInput5"
|
|
style="width:80px" />
|
|
|
|
</el-radio>
|
|
<el-radio :label="6" style="height: 230px; ">
|
|
<div style="display: flex;display: -webkit-flex;">
|
|
<div style="margin-top: -3px;">指定</div>
|
|
<el-checkbox-group v-model="checkListweek" @change="rediodweek(6)">
|
|
<div
|
|
style="margin-left: 15px; display: flex;display: -webkit-flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;-webkit-flex-wrap: wrap ;-webkit-align-items: center;-webkit-justify-content: flex-start;width: 600px;">
|
|
<el-checkbox style="display: block;" v-for="item in appointweek" :label="item"
|
|
size="large" />
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div v-show="index == 7" style="height:500px">
|
|
<el-radio-group v-model="year" @change="rediodyear">
|
|
<el-radio :label="1">不指定 <span class="spanmarg">允许的通配符[,-*/]
|
|
非必填</span>
|
|
</el-radio>
|
|
<el-radio :label="2">每年</el-radio>
|
|
<el-radio :label="3">
|
|
<div style="margin-top: -7px;">
|
|
周期 <span style="display: inline-block;color: #fff;text-align: center;">
|
|
<span style="display: inline-block;width: 24px;">从</span>
|
|
<el-input @change="rediodyear(3)" v-model="periodyear.periodInput1"
|
|
style="width:80px" />
|
|
<span style="display: inline-block;width: 24px;">-</span>
|
|
<el-input @change="rediodyear(3)" v-model="periodyear.periodInput2"
|
|
style="width:80px" />
|
|
</span>
|
|
</div>
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="display: flex;display: -webkit-flex;align-items: center; justify-content: space-between;-webkit-align-items: center; -webkit-justify-content: space-between; width: 65px; margin-top: 20px;">
|
|
<div style="width: 5px;height: 15px;background-color: #009bff;"></div>
|
|
<div style="color:#009bff;font-size: 16px;font-weight: 700;">表达式</div>
|
|
</div>
|
|
<div style="margin-top: 20px;color:#fff;">表达式字段</div>
|
|
<div
|
|
style="display: flex;display: -webkit-flex; justify-content: space-between;-webkit-justify-content: space-between;">
|
|
<div class="field"><el-input class="fieldInput" v-model="field.fieldsecond" disabled />
|
|
<div class="fieldText">秒</div>
|
|
</div>
|
|
<div class="field"><el-input class="fieldInput" v-model="field.fielddivide" disabled />
|
|
<div class="fieldText">分</div>
|
|
</div>
|
|
<div class="field"><el-input class="fieldInput" v-model="field.fieldtime" disabled />
|
|
<div class="fieldText">时</div>
|
|
</div>
|
|
<div class="field"><el-input class="fieldInput" v-model="field.fieldsun" disabled />
|
|
<div class="fieldText">日</div>
|
|
</div>
|
|
<div class="field"><el-input class="fieldInput" v-model="field.fieldmoon" disabled />
|
|
<div class="fieldText">月</div>
|
|
</div>
|
|
<div class="field"><el-input class="fieldInput" v-model="field.fieldweek" disabled />
|
|
<div class="fieldText">周</div>
|
|
</div>
|
|
<div class="field"><el-input class="fieldInput" v-model="field.fieldyear" disabled />
|
|
<div class="fieldText">年</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 20px;color:#fff;">表达式</div>
|
|
<div> <el-input v-model="resentation" style="height: 40px;" disabled /></div>
|
|
<span class="dialog-footer"
|
|
style="display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin-top: 10px;">
|
|
|
|
<div class="details-button" @click="Closeassign">取消</div>
|
|
<div class="details-button" @click="assignment">确定</div>
|
|
</span>
|
|
</template>
|
|
</Eldialog>
|
|
<!-- <el-dialog v-model="cycleTime" :close-on-click-modal="false" draggable :before-close="Closeassign" title="时间周期表达式设置"
|
|
top="10px" append-to-body width="1216px">
|
|
|
|
</el-dialog> -->
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.setting-box {
|
|
padding: 20px;
|
|
padding-bottom: 8px;
|
|
width: 100%;
|
|
height: calc(88vh);
|
|
overflow: auto;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
border: none;
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
background: url(@/assets/navigation/ty_1614x988.png) ;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tabs {
|
|
width: 100%;
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
|
|
div {
|
|
width: 43px;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #0e3859;
|
|
color: #6598b1;
|
|
}
|
|
|
|
.tabsTitle {
|
|
box-sizing: border-box;
|
|
border: 1px solid rgb(0 155 255);
|
|
border-bottom: 1px solid #0e3859;
|
|
border-radius: 5px 5px 0px 0px;
|
|
background-color: rgb(0 155 255);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background-color: #ffffff00 !important;
|
|
}
|
|
|
|
.tabsContent {
|
|
width: 100%;
|
|
border: 1px solid #131a25;
|
|
border-top: 0px;
|
|
padding: 0px 10px 20px 10px;
|
|
background-color: #131a25;
|
|
box-sizing: border-box;
|
|
border-radius: 0px 5px 5px 5px;
|
|
}
|
|
|
|
:deep(.el-radio-group) {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
|
|
}
|
|
|
|
:deep(.el-radio:last-child) {
|
|
align-items: flex-start
|
|
}
|
|
|
|
:deep(.el-radio) {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.field {
|
|
width: 150px;
|
|
position: relative;
|
|
|
|
.fieldText {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 5px;
|
|
z-index: 100;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: #009bff;
|
|
}
|
|
|
|
.fieldInput {
|
|
height: 40px;
|
|
// background-color:rgba(242, 246, 252, 1) ;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background-color: rgba(242, 246, 252, 0) !important;
|
|
}
|
|
}
|
|
|
|
.spanmarg {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
:deep(.el-radio__label) {
|
|
color: #fff !important;
|
|
}</style> |