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

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,
       },
     }