数据源设置：增加了【帮助】功能

src/views/assess/totalIndex/component/setTask.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="system-add-user-container">
-		<el-dialog title="数据源配置接口" v-model="isShowDialog" width="569px">
+		<el-dialog title="数据源配置接口" v-model="isShowDialog" width="650px">
 			<el-form :model="ruleForm" ref="ruleFormRef" :rules="rules" size="default" label-width="90px">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="指标名称:">
-							{{ruleForm.target}}
+							{{ ruleForm.target }}
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
@@ -19,23 +19,118 @@
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="取值周期:" prop="get_time">
+						<el-form-item class="inline-row" label="取值周期:" prop="get_time">
 							<el-input v-model="ruleForm.get_time" placeholder="请输入取值周期" clearable></el-input>
+							<div class="tip"  @click="isShow=!isShow" >
+								<span v-if="!isShow" class="ico_up"></span>
+								<span  v-else class="ico_down"></span>
+								帮助
+							</div>
 						</el-form-item>
 					</el-col>
+					<div class="help-wrap" v-if="isShow">
+						<div class="help-item">
+							<div class="help-item-label">CRON表达式</div>
+							<div class="help-item-content">取值周期填写说明 eg:0 0 0 1 * * 每月一号执行一次</div>
+						</div>
+						<div class="help-item">
+							<div class="help-item-label">CRON字段</div>
+							<div class="help-item-content">
+								<div class="ant-row">
+									<div class="ant-col ant-col-6">字段</div>
+									<div class="ant-col ant-col-6">允许值</div>
+									<div class="ant-col ant-col-6">允许特殊字符</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-6">-------------------</div>
+									<div class="ant-col ant-col-6">-------------------</div>
+									<div class="ant-col ant-col-6">-------------------</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-6">Seconds</div>
+									<div class="ant-col ant-col-6">0-59</div>
+									<div class="ant-col ant-col-6">* / , -</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-6">Minutes</div>
+									<div class="ant-col ant-col-6">0-59</div>
+									<div class="ant-col ant-col-6">* / , -</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-6">Hours</div>
+									<div class="ant-col ant-col-6">0-23</div>
+									<div class="ant-col ant-col-6">* / , -</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-6">Day</div>
+									<div class="ant-col ant-col-6">1-31</div>
+									<div class="ant-col ant-col-6">* / , - ?</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-6">Month</div>
+									<div class="ant-col ant-col-6">1-12 or JAN-DEC</div>
+									<div class="ant-col ant-col-6">* / , -</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-6">Week</div>
+									<div class="ant-col ant-col-6">0-6 or SUN-SAT</div>
+									<div class="ant-col ant-col-6">* / , - ?</div>
+								</div>
+							</div>
+						</div>
+						<div class="help-item">
+							<div class="help-item-label">特殊字符</div>
+							<div class="help-item-content">
+								"*"：当前字段所有的值   eg：第二字段*表示每分钟<br />"/"：描述范围的增量    eg：第二字段0-59/15表示每15分钟<br />","：分隔列表的项目  &nbsp;
+								eg：第五字段1,3表示每周1,3执行<br />"-":连字符用于定义范围 &nbsp; eg：第三字段1-3表每天1到3点（含3点）<br />"?":设置当前字段为空<br />
+							</div>
+						</div>
+						<div class="help-item">
+							<div class="help-item-label">预定义</div>
+							<div class="help-item-content">
+								<div class="ant-row">
+									<div class="ant-col ant-col-8">字段</div>
+									<div class="ant-col ant-col-16">说明</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-8">----------------------------</div>
+									<div class="ant-col ant-col-16">---------------------------</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-8">@yearly or @annually</div>
+									<div class="ant-col ant-col-16">每年1月1日午夜运行一次</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-8">@monthly</div>
+									<div class="ant-col ant-col-16">每月一次，每月午夜运行一次</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-8">@weekly</div>
+									<div class="ant-col ant-col-16">每周运行一次，在星期六/星期日之间的午夜</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-8">@daily or @midnight</div>
+									<div class="ant-col ant-col-16">每天半夜运行</div>
+								</div>
+								<div class="ant-row">
+									<div class="ant-col ant-col-8">@hourly</div>
+									<div class="ant-col ant-col-16">每小时运行一次</div>
+								</div>
+							</div>
+						</div>
+					</div>
+													
+
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="是否启用:">
-							  <el-radio-group v-model="ruleForm.state" class="ml-4">
+							<el-radio-group v-model="ruleForm.state" class="ml-4">
 								<el-radio size="large" :label="1">启用</el-radio>
 								<el-radio size="large" :label="2">禁用</el-radio>
 							</el-radio-group>
-							 <el-button style="margin-left: 20px;" size="small" type="primary">检测</el-button>
+							<el-button style="margin-left: 20px" size="small" type="primary">检测</el-button>
 						</el-form-item>
 					</el-col>
 				</el-row>
-
-
-
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
@@ -49,13 +144,11 @@
 
 <script lang="ts">
 import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
-import type { FormInstance, FormRules } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus';
 import { ElMessage } from 'element-plus';
 
 import api from '/@/api/assess';
 
-
-
 // 定义接口来定义对象的类型
 interface RuleFormRow {
 	target: string;
@@ -63,110 +156,106 @@ interface RuleFormRow {
 	state: number;
 	object: string;
 	get_time: string;
+	
 }
 interface ItemState {
 	isShowDialog: boolean;
 	ruleForm: RuleFormRow;
-	status: number,
-	item_code: string
+	status: number;
+	item_code: string;
+	isShow: boolean;
 }
 
 export default defineComponent({
 	name: 'systemAddUser',
 	setup() {
 		const state = reactive<ItemState>({
-			isShowDialog: false,
+			isShowDialog: true,
 			ruleForm: {
-				target: '',// 指标名称
+				target: '', // 指标名称
 				uri: '', // URL
 				state: 1, // 是否启用
 				object: '', // 取值项
 				get_time: '', // 取值周期
 			},
 			status: 0,
-			item_code: ''
+			item_code: '',
+			isShow: false
 		});
-		const formSize = ref('default')
-		const ruleFormRef = ref<FormInstance>()
+		const formSize = ref('default');
+		const ruleFormRef = ref<FormInstance>();
 		const rules = reactive<FormRules>({
-			uri: [
-				{ required: true, message: '请输入URL', trigger: 'blur' },
-			],
-			object: [
-				{ required: true, message: '请输入取值项', trigger: 'blur' },
-			],
-			get_time: [
-				{ required: true, message: '请输入取值周期', trigger: 'blur' },
-			]
-		})
+			uri: [{ required: true, message: '请输入URL', trigger: 'blur' }],
+			object: [{ required: true, message: '请输入取值项', trigger: 'blur' }],
+			get_time: [{ required: true, message: '请输入取值周期', trigger: 'blur' }],
+		});
 		const onSubmit = async (formEl: FormInstance | undefined) => {
-			if (!formEl) return
+			if (!formEl) return;
 			await formEl.validate((valid, fields) => {
-				console.log(valid)
+				console.log(valid);
 				if (valid) {
-					if(state.status === 1) {
+					if (state.status === 1) {
 						// 编辑
-						editataSourceInfo(state.ruleForm)
-					}else {
+						editataSourceInfo(state.ruleForm);
+					} else {
 						// 新增
 						let params = {
 							...state.ruleForm,
-							item_code: state.item_code
-						}
-						addDataSourceInfo(params)
+							item_code: state.item_code,
+						};
+						addDataSourceInfo(params);
 					}
 				} else {
-					console.log('error submit!', fields)
+					console.log('error submit!', fields);
 				}
-			})
-		}
+			});
+		};
 		// 新增数据
 		const addDataSourceInfo = (params: any) => {
 			api.addDataSourceInfo(params).then((res: any) => {
-				console.log(res)
+				console.log(res);
 				ElMessage.success('数据提交成功');
-				closeDialog()
+				closeDialog();
 			});
 		};
 		// 编辑数据
 		const editataSourceInfo = (params: any) => {
 			api.editataSourceInfo(params).then((res: any) => {
-				console.log(res)
+				console.log(res);
 				ElMessage.success('数据提交成功');
-				closeDialog()
+				closeDialog();
 			});
-
 		};
 		// 打开弹窗
 		const openDialog = (row: RuleFormRow, item_code: string) => {
 			// state.ruleForm = row;
 			state.isShowDialog = true;
-			getDataSourceInfo(row, item_code)
+			getDataSourceInfo(row, item_code);
 		};
 		// 获取数据源配置数据
 		const getDataSourceInfo = (row: any, item_code: string) => {
 			let params = {
 				item_code: item_code,
-				target_name: row.name
-			}
-			state.item_code = item_code
-			console.log(item_code)
-			api.getDataSourceInfo(params).then((res:any) => {
-				console.log(res)
-				if(res) {
+				target_name: row.name,
+			};
+			state.item_code = item_code;
+			console.log(item_code);
+			api.getDataSourceInfo(params).then((res: any) => {
+				console.log(res);
+				if (res) {
 					// 编辑
-					state.ruleForm = res
-					state.status = 1
-				}else {
+					state.ruleForm = res;
+					state.status = 1;
+				} else {
 					// 新增
 					state.ruleForm = {
-						target: row.name,// 指标名称
+						target: row.name, // 指标名称
 						uri: '', // URL
 						state: 1, // 是否启用
 						object: '', // 取值项
 						get_time: '', // 取值周期
-					}
-					state.status = 2
+					};
+					state.status = 2;
 				}
 			});
 		};
@@ -179,9 +268,7 @@ export default defineComponent({
 			closeDialog();
 		};
 		// 初始化部门数据
-		const initTableData = () => {
-			
-		};
+		const initTableData = () => {};
 		// 页面加载时
 		onMounted(() => {
 			initTableData();
@@ -197,11 +284,91 @@ export default defineComponent({
 			editataSourceInfo,
 			...toRefs(state),
 			formSize,
-			ruleFormRef
+			ruleFormRef,
 		};
 	},
 });
 </script>
 
 <style lang="scss" scoped>
+.inline-row {
+	::v-deep .el-form-item__content {
+		display: flex;
+		.el-input {
+			width: calc(100% - 100px);
+		}
+		.tip {
+			width: 100px;
+			// background-color: pink;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: var(--el-color-primary);
+			font-size: 12px;
+			cursor: pointer;
+			.ico_up {
+				width: 0;
+				height: 0;
+				border: 5px solid transparent;
+				border-bottom-color: var(--el-color-primary);
+				margin-right: 8px;
+				margin-top: -7px;
+			}
+			.ico_down{
+				width:0;
+				height:0;
+				border:5px solid transparent ;
+				border-top-color:var(--el-color-primary);
+				margin-right: 8px;
+				margin-top: 7px;
+			}
+		}
+	}
+}
+.help-wrap {
+	width: 540px;
+	margin: 0 auto;
+	// background-color: pink;
+	.help-item:nth-child(1) {
+		border-top: 1px var(--el-border-color) var(--el-border-style);
+	}
+	.help-item {
+		display: flex;
+		
+		border-bottom: 1px var(--el-border-color) var(--el-border-style);
+		border-left: 1px var(--el-border-color) var(--el-border-style);
+		border-right: 1px var(--el-border-color) var(--el-border-style);
+		.help-item-label,
+		.help-item-content {
+			padding: 12px;
+			
+		}
+		.help-item-label {
+			background-color: #f3f3f3;
+			width: 110px;
+		}
+		.help-item-content {
+			width: 430px;
+			font-size: 12px;
+
+			.ant-row {
+				display: flex;
+				width: 100%;
+				// justify-content: space-between;
+				.ant-col-6 {
+					width: 33%;
+				}
+				.ant-col-6:not(:nth-child(1)) {
+					text-align: center;
+				}
+				.ant-col-8 {
+					width: 40%;
+				}
+				.ant-col-16 {
+					width: 60%;
+				}
+			}
+		}
+	}
+}
 </style>