Skip to content

F
fk-spider-web
Commit 5b14a4c2 by yzh
Options

feat:cron表达式组件修改完成

parent f08f3e48
Showing with 147 additions and 120 deletions
src/components/Crontab/src/Crontab.vue
......@@ -264,8 +264,6 @@ const value_day = computed(() => {
return v.appoint.length > 0 ? v.appoint.join(',') : '*'
} else if (v.type == '4') {
return 'L'
} else if (v.type == '5') {
return '?'
} else {
return '*'
}
......@@ -296,8 +294,6 @@ const value_week = computed(() => {
return v.appoint.length > 0 ? v.appoint.join(',') : '*'
} else if (v.type == '4') {
return v.last + 'L'
} else if (v.type == '5') {
return '?'
} else {
return '*'
}
......@@ -510,22 +506,9 @@ const inputChange = () => {
}
</script>
<template>
<el-input v-model="defaultValue" class="input-with-select" v-bind="$attrs" @input="inputChange">
<template #append>
<el-select v-model="select" placeholder="生成器" style="width: 115px">
<el-option label="每分钟" value="0 * * * * ?" />
<el-option label="每小时" value="0 0 * * * ?" />
<el-option label="每天零点" value="0 0 0 * * ?" />
<el-option label="每月一号零点" value="0 0 0 1 * ?" />
<el-option label="每月最后一天零点" value="0 0 0 L * ?" />
<el-option label="每周星期日零点" value="0 0 0 ? * 1" />
<el-option v-for="(item, index) in shortcuts" :key="index" :label="item.text" :value="item.value" />
<el-option label="自定义" value="custom" />
</el-select>
</template>
</el-input>
<el-dialog v-model="dialogVisible" :width="580" append-to-body destroy-on-close title="cron规则生成器">
<div>
<el-input v-model="defaultValue" disabled class="input-with-select" v-bind="$attrs" @input="inputChange">
</el-input>
<div class="sc-cron">
<el-tabs>
<el-tab-pane>
......@@ -536,7 +519,7 @@ const inputChange = () => {
</div>
</template>
<el-form>
<el-form-item label="类型">
<el-form-item label="类型" >
<el-radio-group v-model="cronValue.second.type">
<el-radio-button value="0">任意值</el-radio-button>
<el-radio-button value="1">范围</el-radio-button>
......@@ -544,18 +527,18 @@ const inputChange = () => {
<el-radio-button value="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="cronValue.second.type == '1'" label="范围">
<el-form-item v-if="cronValue.second.type == '1'" label="范围" class="m-t-4">
<el-input-number v-model="cronValue.second.range.start" :max="59" :min="0" controls-position="right" />
<span style="padding: 0 15px">-</span>
<el-input-number v-model="cronValue.second.range.end" :max="59" :min="0" controls-position="right" />
</el-form-item>
<el-form-item v-if="cronValue.second.type == '2'" label="间隔">
<el-form-item v-if="cronValue.second.type == '2'" label="间隔" class="m-t-4">
<el-input-number v-model="cronValue.second.loop.start" :max="59" :min="0" controls-position="right" />
秒开始，每
<el-input-number v-model="cronValue.second.loop.end" :max="59" :min="0" controls-position="right" />
秒执行一次
</el-form-item>
<el-form-item v-if="cronValue.second.type == '3'" label="指定">
<el-form-item v-if="cronValue.second.type == '3'" label="指定" class="m-t-4">
<el-select v-model="cronValue.second.appoint" multiple style="width: 100%">
<el-option v-for="(item, index) in data.second" :key="index" :label="item" :value="item" />
</el-select>
......@@ -578,18 +561,18 @@ const inputChange = () => {
<el-radio-button value="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="cronValue.minute.type == '1'" label="范围">
<el-form-item v-if="cronValue.minute.type == '1'" label="范围" class="m-t-4">
<el-input-number v-model="cronValue.minute.range.start" :max="59" :min="0" controls-position="right" />
<span style="padding: 0 15px">-</span>
<el-input-number v-model="cronValue.minute.range.end" :max="59" :min="0" controls-position="right" />
</el-form-item>
<el-form-item v-if="cronValue.minute.type == '2'" label="间隔">
<el-form-item v-if="cronValue.minute.type == '2'" label="间隔" class="m-t-4">
<el-input-number v-model="cronValue.minute.loop.start" :max="59" :min="0" controls-position="right" />
分钟开始，每
<el-input-number v-model="cronValue.minute.loop.end" :max="59" :min="0" controls-position="right" />
分钟执行一次
</el-form-item>
<el-form-item v-if="cronValue.minute.type == '3'" label="指定">
<el-form-item v-if="cronValue.minute.type == '3'" label="指定" class="m-t-4">
<el-select v-model="cronValue.minute.appoint" multiple style="width: 100%">
<el-option v-for="(item, index) in data.minute" :key="index" :label="item" :value="item" />
</el-select>
......@@ -612,18 +595,18 @@ const inputChange = () => {
<el-radio-button value="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="cronValue.hour.type == '1'" label="范围">
<el-form-item v-if="cronValue.hour.type == '1'" label="范围" class="m-t-4">
<el-input-number v-model="cronValue.hour.range.start" :max="23" :min="0" controls-position="right" />
<span style="padding: 0 15px">-</span>
<el-input-number v-model="cronValue.hour.range.end" :max="23" :min="0" controls-position="right" />
</el-form-item>
<el-form-item v-if="cronValue.hour.type == '2'" label="间隔">
<el-form-item v-if="cronValue.hour.type == '2'" label="间隔" class="m-t-4">
<el-input-number v-model="cronValue.hour.loop.start" :max="23" :min="0" controls-position="right" />
小时开始，每
<el-input-number v-model="cronValue.hour.loop.end" :max="23" :min="0" controls-position="right" />
小时执行一次
</el-form-item>
<el-form-item v-if="cronValue.hour.type == '3'" label="指定">
<el-form-item v-if="cronValue.hour.type == '3'" label="指定" class="m-t-4">
<el-select v-model="cronValue.hour.appoint" multiple style="width: 100%">
<el-option v-for="(item, index) in data.hour" :key="index" :label="item" :value="item" />
</el-select>
......@@ -644,22 +627,22 @@ const inputChange = () => {
<el-radio-button value="1">范围</el-radio-button>
<el-radio-button value="2">间隔</el-radio-button>
<el-radio-button value="3">指定</el-radio-button>
<el-radio-button value="4">本月最后一天</el-radio-button>
<el-radio-button value="5">不指定</el-radio-button>
<!-- <el-radio-button value="4">本月最后一天</el-radio-button>
<el-radio-button value="5">不指定</el-radio-button> -->
</el-radio-group>
</el-form-item>
<el-form-item v-if="cronValue.day.type == '1'" label="范围">
<el-form-item v-if="cronValue.day.type == '1'" label="范围" class="m-t-4">
<el-input-number v-model="cronValue.day.range.start" :max="31" :min="1" controls-position="right" />
<span style="padding: 0 15px">-</span>
<el-input-number v-model="cronValue.day.range.end" :max="31" :min="1" controls-position="right" />
</el-form-item>
<el-form-item v-if="cronValue.day.type == '2'" label="间隔">
<el-form-item v-if="cronValue.day.type == '2'" label="间隔" class="m-t-4">
<el-input-number v-model="cronValue.day.loop.start" :max="31" :min="1" controls-position="right" />
号开始，每
<el-input-number v-model="cronValue.day.loop.end" :max="31" :min="1" controls-position="right" />
天执行一次
</el-form-item>
<el-form-item v-if="cronValue.day.type == '3'" label="指定">
<el-form-item v-if="cronValue.day.type == '3'" label="指定" class="m-t-4">
<el-select v-model="cronValue.day.appoint" multiple style="width: 100%">
<el-option v-for="(item, index) in data.day" :key="index" :label="item" :value="item" />
</el-select>
......@@ -682,18 +665,18 @@ const inputChange = () => {
<el-radio-button value="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="cronValue.month.type == '1'" label="范围">
<el-form-item v-if="cronValue.month.type == '1'" label="范围" class="m-t-4">
<el-input-number v-model="cronValue.month.range.start" :max="12" :min="1" controls-position="right" />
<span style="padding: 0 15px">-</span>
<el-input-number v-model="cronValue.month.range.end" :max="12" :min="1" controls-position="right" />
</el-form-item>
<el-form-item v-if="cronValue.month.type == '2'" label="间隔">
<el-form-item v-if="cronValue.month.type == '2'" label="间隔" class="m-t-4">
<el-input-number v-model="cronValue.month.loop.start" :max="12" :min="1" controls-position="right" />
月开始，每
<el-input-number v-model="cronValue.month.loop.end" :max="12" :min="1" controls-position="right" />
月执行一次
</el-form-item>
<el-form-item v-if="cronValue.month.type == '3'" label="指定">
<el-form-item v-if="cronValue.month.type == '3'" label="指定" class="m-t-4">
<el-select v-model="cronValue.month.appoint" multiple style="width: 100%">
<el-option v-for="(item, index) in data.month" :key="index" :label="item" :value="item" />
</el-select>
......@@ -715,11 +698,11 @@ const inputChange = () => {
<el-radio-button value="1">范围</el-radio-button>
<el-radio-button value="2">间隔</el-radio-button>
<el-radio-button value="3">指定</el-radio-button>
<el-radio-button value="4">本月最后一周</el-radio-button>
<el-radio-button value="5">不指定</el-radio-button>
<!-- <el-radio-button value="4">本月最后一周</el-radio-button>
<el-radio-button value="5">不指定</el-radio-button> -->
</el-radio-group>
</el-form-item>
<el-form-item v-if="cronValue.week.type == '1'" label="范围">
<el-form-item v-if="cronValue.week.type == '1'" label="范围" class="m-t-4">
<el-select v-model="cronValue.week.range.start">
<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value" />
</el-select>
......@@ -728,21 +711,21 @@ const inputChange = () => {
<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="cronValue.week.type == '2'" label="间隔">
<el-form-item v-if="cronValue.week.type == '2'" label="间隔" class="m-t-4">
第
<el-input-number v-model="cronValue.week.loop.start" :max="4" :min="1" controls-position="right" />
周的星期
周的
<el-select v-model="cronValue.week.loop.end">
<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value" />
</el-select>
执行一次
</el-form-item>
<el-form-item v-if="cronValue.week.type == '3'" label="指定">
<el-form-item v-if="cronValue.week.type == '3'" label="指定" class="m-t-4">
<el-select v-model="cronValue.week.appoint" multiple style="width: 100%">
<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="cronValue.week.type == '4'" label="最后一周">
<el-form-item v-if="cronValue.week.type == '4'" label="最后一周" class="m-t-4">
<el-select v-model="cronValue.week.last">
<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value" />
</el-select>
......@@ -750,14 +733,14 @@ const inputChange = () => {
</el-form>
</el-form>
</el-tab-pane>
<el-tab-pane>
<!-- <el-tab-pane>
<template #label>
<div class="sc-cron-num">
<h2>年</h2>
<h4>{{ value_year }}</h4>
</div>
</template>
<el-form>
<el-form >
<el-form-item label="类型">
<el-radio-group v-model="cronValue.year.type">
<el-radio-button value="-1">忽略</el-radio-button>
......@@ -767,38 +750,38 @@ const inputChange = () => {
<el-radio-button value="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="cronValue.year.type == '1'" label="范围">
<el-form-item v-if="cronValue.year.type == '1'" label="范围" class="m-t-4">
<el-input-number v-model="cronValue.year.range.start" controls-position="right" />
<span style="padding: 0 15px">-</span>
<el-input-number v-model="cronValue.year.range.end" controls-position="right" />
</el-form-item>
<el-form-item v-if="cronValue.year.type == '2'" label="间隔">
<el-form-item v-if="cronValue.year.type == '2'" label="间隔" class="m-t-4">
<el-input-number v-model="cronValue.year.loop.start" controls-position="right" />
年开始，每
<el-input-number v-model="cronValue.year.loop.end" :min="1" controls-position="right" />
年执行一次
</el-form-item>
<el-form-item v-if="cronValue.year.type == '3'" label="指定">
<el-form-item v-if="cronValue.year.type == '3'" label="指定" class="m-t-4">
<el-select v-model="cronValue.year.appoint" multiple style="width: 100%">
<el-option v-for="(item, index) in data.year" :key="index" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tab-pane> -->
</el-tabs>
<div class="m-t-6" />
<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
<el-button type="primary" @click="submit()">生成表达式</el-button>
</div>
</div>
<template #footer>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submit()">确 认</el-button>
</template>
</el-dialog>
</template>
<style scoped>
.sc-cron:deep(.el-tabs__item) {
height: auto;
padding: 0 7px;
padding: 0 10px;
line-height: 1;
vertical-align: bottom;
}
......@@ -810,6 +793,7 @@ const inputChange = () => {
}
.sc-cron-num h2 {
color: #fff;
margin-bottom: 15px;
font-size: 12px;
font-weight: normal;
......@@ -822,8 +806,9 @@ const inputChange = () => {
padding: 0 15px;
font-size: 12px;
line-height: 30px;
background: var(--el-color-primary-light-9);
background: #1d5484;
border-radius: 4px;
color: #fff;
}
.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
......@@ -838,4 +823,22 @@ const inputChange = () => {
.input-with-select .el-input-group__prepend {
background-color: var(--el-fill-color-blank);
}
.el-radio-button__inner{
background: #1d5484;
}
</style>
<style>
.el-input.is-disabled .el-input__wrapper{
background: #1d5484;
box-shadow: 0,0,0,0px;
}
.el-radio-button__inner{
background: #1d5484;
color: #fff;
border: none;
}
</style>
\ No newline at end of file
src/views/os-dataDisplay/components/ituDataTab.vue
......@@ -307,10 +307,9 @@ const handleDetails = (row: any) => {
detailVisibleValue.value = true
}
const getData = async () => {
console.log('getData');
const res = await getItulist({page:pageObj.value.pageNo,size:pageObj.value.pageSize})
tableData.value = res.data.list
pageObj.value.total = res.data.total
pageObj.value.total = res.data.length
tableData.value = res.data
}
const handleClose = () => {
......
src/views/os-taskInformation/components/addTaskDialog.vue
<template>
<el-dialog v-model="currentVisible" :title="currentMode === AddMode.ADD_TASK ? '新增' : '修改'" width="610" center
<el-dialog v-model="currentVisible" :title="currentMode === AddMode.ADD_TASK ? '新增' : '修改'" width="710" center
align-center @close="handleClose" draggable>
<el-form :inline="true" v-if="currentMode === AddMode.ADD_TASK">
<el-form-item label="任务名称:">
<el-input v-model="taskName" placeholder="请输入任务名称" />
<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px">
<el-form-item label="任务名称:" v-if="currentMode === AddMode.ADD_TASK" prop="taskName">
<el-input v-model="ruleForm.taskName" placeholder="请输入任务名称"style="width: 90%" />
</el-form-item>
<el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择所属爬虫" style="width: 181px">
<el-form-item label="所属爬虫:" v-if="currentMode === AddMode.ADD_TASK" prop="spiderTypeValue">
<el-select v-model="ruleForm.spiderTypeValue" placeholder="请选择所属爬虫" style="width: 90%">
<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="执行频率(秒/次):">
<Crontab v-model="cronExpression" style="width: 250px;" />
<el-form-item label="执行频率:" prop="cronExpression">
<Crontab v-model="ruleForm.cronExpression" style="width: 90%" />
</el-form-item>
</el-form>
<el-form v-if="currentMode === AddMode.UPDATE_TASK">
<el-form-item label="执行频率(秒/次):">
<Crontab v-model="cronExpression" />
</el-form-item>
<!-- <el-form-item label="启用/停止:" v-if="currentMode === AddMode.UPDATE_TASK">
<el-switch v-model="taskSwitchValue" class="ml-2"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
</el-form-item> -->
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
......@@ -31,7 +22,6 @@
</el-button>
</div>
</template>
</el-dialog>
</template>
......@@ -42,6 +32,19 @@ import { watch } from 'vue'
import { addSpiderTask } from '@/api/spiderTask'
import { AddMode } from './enum'
import { Crontab } from '@/components/Crontab/index'
import type { FormInstance, FormRules } from 'element-plus'
interface RuleForm {
taskName: string
spiderTypeValue: string
cronExpression: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
taskName: '',
spiderTypeValue: '',
cronExpression: '',
})
interface addDialogPropType {
dialogVisible: boolean,
mode: AddMode,
......@@ -49,20 +52,35 @@ interface addDialogPropType {
cron: string,
spiderType: string,
options: string,
// frequency: string,
// taskStatus: boolean
}
const props = defineProps<addDialogPropType>()
const rules = ref<FormRules<RuleForm>>({
taskName: [
{ required: true, message: '请输入任务名称', trigger: 'blur' },
{ min: 1, max: 50, message: '任务名称应在1-50个字符之间', trigger: 'blur' },
],
spiderTypeValue: [
{
required: true,
message: '请选择所属爬虫',
trigger: 'change',
},
],
cronExpression: [
{
required: true,
message: '请输入执行频率',
trigger: 'change',
},
{ min: 1, message: '执行频率应为cron表达式', trigger: 'blur' },
]
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm', 'update:mode', 'getTaskList'])
// 组件的状态
const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode)
const taskName = ref('')
const taskFrequency = ref('')
const taskTime = ref('')
const taskSwitchValue = ref(false)
const spiderTypeValue = ref('')
const spiderTypeOptions = ref([
{
......@@ -84,43 +102,49 @@ const taskParams = ref({
project: 'spiders'
})
const cronExpression = ref('')
// const shortcuts = [
// { text: '每工作日9点', value: '0 0 9 ? * MON-FRI' },
// { text: '每季度第一天', value: '0 0 0 1 1/3 ?' }
// ]
// 关闭的方法
const handleClose = () => {
taskName.value = ''
taskFrequency.value = ''
cronExpression.value = ''
ruleForm.value.taskName = ''
ruleForm.value.spiderTypeValue
ruleForm.value.cronExpression = ''
currentVisible.value = false
}
// 确定的方法
const handleConfirm = async () => {
if (currentMode.value === AddMode.ADD_TASK) {
await addSpiderTask({
scrapyd_server_id: taskParams.value.scrapyd_server_id,
schedule_type: taskParams.value.schedule_type,
project: taskParams.value.project,
spider: spiderTypeValue.value,
cron: cronExpression.value,
options: JSON.stringify({ jobName: taskName.value })
})
currentVisible.value = false
emit('getTaskList')
}else if (currentMode.value === AddMode.UPDATE_TASK) {
await addSpiderTask({
scrapyd_server_id: taskParams.value.scrapyd_server_id,
schedule_type: taskParams.value.schedule_type,
project: taskParams.value.project,
spider: props.spiderType,
job_id: props.jobId,
cron: cronExpression.value,
options: props.options
})
currentVisible.value = false
emit('getTaskList')
}
if (!ruleFormRef.value) return
await ruleFormRef.value.validate(async (valid, fields) => {
console.log('开始校验');
//验证表单内容是否通过，通过继续执行
if (valid) {
if (currentMode.value === AddMode.ADD_TASK) {
await addSpiderTask({
scrapyd_server_id: taskParams.value.scrapyd_server_id,
schedule_type: taskParams.value.schedule_type,
project: taskParams.value.project,
spider: ruleForm.value.spiderTypeValue,
cron: ruleForm.value.cronExpression,
options: JSON.stringify({ jobName: ruleForm.value.taskName })
})
currentVisible.value = false
emit('getTaskList')
} else if (currentMode.value === AddMode.UPDATE_TASK) {
await addSpiderTask({
scrapyd_server_id: taskParams.value.scrapyd_server_id,
schedule_type: taskParams.value.schedule_type,
project: taskParams.value.project,
spider: props.spiderType,
job_id: props.jobId,
cron: ruleForm.value.cronExpression,
options: props.options
})
currentVisible.value = false
emit('getTaskList')
}
} else {
console.log('校验不通过');
}
})
}
// 监听props变化，同步给组件内部
......@@ -150,13 +174,13 @@ watch(() => currentMode.value,
)
watch(
[() => props.dialogVisible, () => props.mode, () => props.cron],
([newVisible, newMode,newCron]) => {
([newVisible, newMode, newCron]) => {
if (newVisible && newMode === AddMode.UPDATE_TASK) {
cronExpression.value = newCron;
ruleForm.value.cronExpression = newCron;
}
if (!newVisible) {
// 清空表单
cronExpression.value = ''
cronExpression.value = ''
}
},
{ immediate: true }
......
vite.config.ts
......@@ -30,7 +30,7 @@ export default defineConfig({
proxy: {
// 代理API请求，使用更精确的路径匹配
'/api': {
target: 'http://127.0.0.1:5001/',
target: 'http://192.168.0.200:5001/',
changeOrigin: true,
},
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment