Jcdm042-Mes.git

懒羊羊

2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003

提交 \| 用户 \| 时间
e57a89	1	<template>
懒	2	<div class="app-container">
	3	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
	4	<el-form-item label="任务名称" prop="jobName">
	5	<el-input
	6	v-model="queryParams.jobName"
	7	placeholder="请输入任务名称"
	8	clearable
	9	@keyup.enter.native="handleQuery"
	10	/>
	11	</el-form-item>
	12	<el-form-item label="任务组名" prop="jobGroup">
	13	<el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable>
	14	<el-option
	15	v-for="dict in dict.type.sys_job_group"
	16	:key="dict.value"
	17	:label="dict.label"
	18	:value="dict.value"
	19	/>
	20	</el-select>
	21	</el-form-item>
	22	<el-form-item label="任务状态" prop="status">
	23	<el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
	24	<el-option
	25	v-for="dict in dict.type.sys_job_status"
	26	:key="dict.value"
	27	:label="dict.label"
	28	:value="dict.value"
	29	/>
	30	</el-select>
	31	</el-form-item>
	32	<el-form-item>
	33	<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
	34	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	35	</el-form-item>
	36	</el-form>
	37
	38	<el-row :gutter="10" class="mb8">
	39	<el-col :span="1.5">
	40	<el-button
	41	type="primary"
	42	plain
	43	icon="el-icon-plus"
	44	size="mini"
	45	@click="handleAdd"
	46	v-hasPermi="['monitor:job:add']"
	47	>新增</el-button>
	48	</el-col>
	49	<el-col :span="1.5">
	50	<el-button
	51	type="success"
	52	plain
	53	icon="el-icon-edit"
	54	size="mini"
	55	:disabled="single"
	56	@click="handleUpdate"
	57	v-hasPermi="['monitor:job:edit']"
	58	>修改</el-button>
	59	</el-col>
	60	<el-col :span="1.5">
	61	<el-button
	62	type="danger"
	63	plain
	64	icon="el-icon-delete"
	65	size="mini"
	66	:disabled="multiple"
	67	@click="handleDelete"
	68	v-hasPermi="['monitor:job:remove']"
	69	>删除</el-button>
	70	</el-col>
	71	<el-col :span="1.5">
	72	<el-button
	73	type="warning"
	74	plain
	75	icon="el-icon-download"
	76	size="mini"
	77	@click="handleExport"
	78	v-hasPermi="['monitor:job:export']"
	79	>导出</el-button>
	80	</el-col>
	81	<el-col :span="1.5">
	82	<el-button
	83	type="info"
	84	plain
	85	icon="el-icon-s-operation"
	86	size="mini"
	87	@click="handleJobLog"
	88	v-hasPermi="['monitor:job:query']"
	89	>日志</el-button>
	90	</el-col>
	91	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	92	</el-row>
	93
	94	<el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
	95	<el-table-column type="selection" width="55" align="center" />
	96	<el-table-column label="任务编号" width="100" align="center" prop="jobId" />
	97	<el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
	98	<el-table-column label="任务组名" align="center" prop="jobGroup">
	99	<template slot-scope="scope">
	100	<dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>
	101	</template>
	102	</el-table-column>
	103	<el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
	104	<el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
	105	<el-table-column label="状态" align="center">
	106	<template slot-scope="scope">
	107	<el-switch
	108	v-model="scope.row.status"
	109	active-value="0"
	110	inactive-value="1"
	111	@change="handleStatusChange(scope.row)"
	112	></el-switch>
	113	</template>
	114	</el-table-column>
	115	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	116	<template slot-scope="scope">
	117	<el-button
	118	size="mini"
	119	type="text"
	120	icon="el-icon-edit"
	121	@click="handleUpdate(scope.row)"
	122	v-hasPermi="['monitor:job:edit']"
	123	>修改</el-button>
	124	<el-button
	125	size="mini"
	126	type="text"
	127	icon="el-icon-delete"
	128	@click="handleDelete(scope.row)"
	129	v-hasPermi="['monitor:job:remove']"
	130	>删除</el-button>
	131	<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
	132	<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
	133	<el-dropdown-menu slot="dropdown">
	134	<el-dropdown-item command="handleRun" icon="el-icon-caret-right"
	135	v-hasPermi="['monitor:job:changeStatus']">执行一次</el-dropdown-item>
	136	<el-dropdown-item command="handleView" icon="el-icon-view"
	137	v-hasPermi="['monitor:job:query']">任务详细</el-dropdown-item>
	138	<el-dropdown-item command="handleJobLog" icon="el-icon-s-operation"
	139	v-hasPermi="['monitor:job:query']">调度日志</el-dropdown-item>
	140	</el-dropdown-menu>
	141	</el-dropdown>
	142	</template>
	143	</el-table-column>
	144	</el-table>
	145
	146	<pagination
	147	v-show="total>0"
	148	:total="total"
	149	:page.sync="queryParams.pageNum"
	150	:limit.sync="queryParams.pageSize"
	151	@pagination="getList"
	152	/>
	153
	154	<!-- 添加或修改定时任务对话框 -->
	155	<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
	156	<el-form ref="form" :model="form" :rules="rules" label-width="120px">
	157	<el-row>
	158	<el-col :span="12">
	159	<el-form-item label="任务名称" prop="jobName">
	160	<el-input v-model="form.jobName" placeholder="请输入任务名称" />
	161	</el-form-item>
	162	</el-col>
	163	<el-col :span="12">
	164	<el-form-item label="任务分组" prop="jobGroup">
	165	<el-select v-model="form.jobGroup" placeholder="请选择任务分组">
	166	<el-option
	167	v-for="dict in dict.type.sys_job_group"
	168	:key="dict.value"
	169	:label="dict.label"
	170	:value="dict.value"
	171	></el-option>
	172	</el-select>
	173	</el-form-item>
	174	</el-col>
	175	<el-col :span="24">
	176	<el-form-item prop="invokeTarget">
	177	<span slot="label">
	178	调用方法
	179	<el-tooltip placement="top">
	180	<div slot="content">
	181	Bean调用示例：ryTask.ryParams('ry')
	182	<br />Class类调用示例：com.jcdm.quartz.task.RyTask.ryParams('ry')
	183	<br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
	184	</div>
	185	<i class="el-icon-question"></i>
	186	</el-tooltip>
	187	</span>
	188	<el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
	189	</el-form-item>
	190	</el-col>
	191	<el-col :span="24">
	192	<el-form-item label="cron表达式" prop="cronExpression">
	193	<el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
	194	<template slot="append">
	195	<el-button type="primary" @click="handleShowCron">
	196	生成表达式
	197	<i class="el-icon-time el-icon--right"></i>
	198	</el-button>
	199	</template>
	200	</el-input>
	201	</el-form-item>
	202	</el-col>
	203	<el-col :span="24" v-if="form.jobId !== undefined">
	204	<el-form-item label="状态">
	205	<el-radio-group v-model="form.status">
	206	<el-radio
	207	v-for="dict in dict.type.sys_job_status"
	208	:key="dict.value"
	209	:label="dict.value"
	210	>{{dict.label}}</el-radio>
	211	</el-radio-group>
	212	</el-form-item>
	213	</el-col>
	214	<el-col :span="12">
	215	<el-form-item label="执行策略" prop="misfirePolicy">
	216	<el-radio-group v-model="form.misfirePolicy" size="small">
	217	<el-radio-button label="1">立即执行</el-radio-button>
	218	<el-radio-button label="2">执行一次</el-radio-button>
	219	<el-radio-button label="3">放弃执行</el-radio-button>
	220	</el-radio-group>
	221	</el-form-item>
	222	</el-col>
	223	<el-col :span="12">
	224	<el-form-item label="是否并发" prop="concurrent">
	225	<el-radio-group v-model="form.concurrent" size="small">
	226	<el-radio-button label="0">允许</el-radio-button>
	227	<el-radio-button label="1">禁止</el-radio-button>
	228	</el-radio-group>
	229	</el-form-item>
	230	</el-col>
	231	</el-row>
	232	</el-form>
	233	<div slot="footer" class="dialog-footer">
	234	<el-button type="primary" @click="submitForm">确定</el-button>
	235	<el-button @click="cancel">取消</el-button>
	236	</div>
	237	</el-dialog>
	238
	239	<el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
	240	<crontab @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
	241	</el-dialog>
	242
	243	<!-- 任务日志详细 -->
	244	<el-dialog title="任务详细" :visible.sync="openView" width="700px" append-to-body>
	245	<el-form ref="form" :model="form" label-width="120px" size="mini">
	246	<el-row>
	247	<el-col :span="12">
	248	<el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
	249	<el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
	250	</el-col>
	251	<el-col :span="12">
	252	<el-form-item label="任务分组：">{{ jobGroupFormat(form) }}</el-form-item>
	253	<el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
	254	</el-col>
	255	<el-col :span="12">
	256	<el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>
	257	</el-col>
	258	<el-col :span="12">
	259	<el-form-item label="下次执行时间：">{{ parseTime(form.nextValidTime) }}</el-form-item>
	260	</el-col>
	261	<el-col :span="24">
	262	<el-form-item label="调用目标方法：">{{ form.invokeTarget }}</el-form-item>
	263	</el-col>
	264	<el-col :span="12">
	265	<el-form-item label="任务状态：">
	266	<div v-if="form.status == 0">正常</div>
	267	<div v-else-if="form.status == 1">暂停</div>
	268	</el-form-item>
	269	</el-col>
	270	<el-col :span="12">
	271	<el-form-item label="是否并发：">
	272	<div v-if="form.concurrent == 0">允许</div>
	273	<div v-else-if="form.concurrent == 1">禁止</div>
	274	</el-form-item>
	275	</el-col>
	276	<el-col :span="12">
	277	<el-form-item label="执行策略：">
	278	<div v-if="form.misfirePolicy == 0">默认策略</div>
	279	<div v-else-if="form.misfirePolicy == 1">立即执行</div>
	280	<div v-else-if="form.misfirePolicy == 2">执行一次</div>
	281	<div v-else-if="form.misfirePolicy == 3">放弃执行</div>
	282	</el-form-item>
	283	</el-col>
	284	</el-row>
	285	</el-form>
	286	<div slot="footer" class="dialog-footer">
	287	<el-button @click="openView = false">关闭</el-button>
	288	</div>
	289	</el-dialog>
	290	</div>
	291	</template>
	292
	293	<script>
	294	import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job";
	295	import Crontab from '@/components/Crontab'
	296
	297	export default {
	298	components: { Crontab },
	299	name: "Job",
	300	dicts: ['sys_job_group', 'sys_job_status'],
	301	data() {
	302	return {
	303	// 遮罩层
	304	loading: true,
	305	// 选中数组
	306	ids: [],
	307	// 非单个禁用
	308	single: true,
	309	// 非多个禁用
	310	multiple: true,
	311	// 显示搜索条件
	312	showSearch: true,
	313	// 总条数
	314	total: 0,
	315	// 定时任务表格数据
	316	jobList: [],
	317	// 弹出层标题
	318	title: "",
	319	// 是否显示弹出层
	320	open: false,
	321	// 是否显示详细弹出层
	322	openView: false,
	323	// 是否显示Cron表达式弹出层
	324	openCron: false,
	325	// 传入的表达式
	326	expression: "",
	327	// 查询参数
	328	queryParams: {
	329	pageNum: 1,
	330	pageSize: 10,
	331	jobName: undefined,
	332	jobGroup: undefined,
	333	status: undefined
	334	},
	335	// 表单参数
	336	form: {},
	337	// 表单校验
	338	rules: {
	339	jobName: [
	340	{ required: true, message: "任务名称不能为空", trigger: "blur" }
	341	],
	342	invokeTarget: [
	343	{ required: true, message: "调用目标字符串不能为空", trigger: "blur" }
	344	],
	345	cronExpression: [
	346	{ required: true, message: "cron执行表达式不能为空", trigger: "blur" }
	347	]
	348	}
	349	};
	350	},
	351	created() {
	352	this.getList();
	353	},
	354	methods: {
	355	/** 查询定时任务列表 */
	356	getList() {
	357	this.loading = true;
	358	listJob(this.queryParams).then(response => {
	359	this.jobList = response.rows;
	360	this.total = response.total;
	361	this.loading = false;
	362	});
	363	},
	364	// 任务组名字典翻译
	365	jobGroupFormat(row, column) {
	366	return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup);
	367	},
	368	// 取消按钮
	369	cancel() {
	370	this.open = false;
	371	this.reset();
	372	},
	373	// 表单重置
	374	reset() {
	375	this.form = {
	376	jobId: undefined,
	377	jobName: undefined,
	378	jobGroup: undefined,
	379	invokeTarget: undefined,
	380	cronExpression: undefined,
	381	misfirePolicy: 1,
	382	concurrent: 1,
	383	status: "0"
	384	};
	385	this.resetForm("form");
	386	},
	387	/** 搜索按钮操作 */
	388	handleQuery() {
	389	this.queryParams.pageNum = 1;
	390	this.getList();
	391	},
	392	/** 重置按钮操作 */
	393	resetQuery() {
	394	this.resetForm("queryForm");
	395	this.handleQuery();
	396	},
	397	// 多选框选中数据
	398	handleSelectionChange(selection) {
	399	this.ids = selection.map(item => item.jobId);
	400	this.single = selection.length != 1;
	401	this.multiple = !selection.length;
	402	},
	403	// 更多操作触发
	404	handleCommand(command, row) {
	405	switch (command) {
	406	case "handleRun":
	407	this.handleRun(row);
	408	break;
	409	case "handleView":
	410	this.handleView(row);
	411	break;
	412	case "handleJobLog":
	413	this.handleJobLog(row);
	414	break;
	415	default:
	416	break;
	417	}
	418	},
	419	// 任务状态修改
	420	handleStatusChange(row) {
	421	let text = row.status === "0" ? "启用" : "停用";
	422	this.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗？').then(function() {
	423	return changeJobStatus(row.jobId, row.status);
	424	}).then(() => {
	425	this.$modal.msgSuccess(text + "成功");
	426	}).catch(function() {
	427	row.status = row.status === "0" ? "1" : "0";
	428	});
	429	},
	430	/* 立即执行一次 */
	431	handleRun(row) {
	432	this.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗？').then(function() {
	433	return runJob(row.jobId, row.jobGroup);
	434	}).then(() => {
	435	this.$modal.msgSuccess("执行成功");
	436	}).catch(() => {});
	437	},
	438	/** 任务详细信息 */
	439	handleView(row) {
	440	getJob(row.jobId).then(response => {
	441	this.form = response.data;
	442	this.openView = true;
	443	});
	444	},
	445	/** cron表达式按钮操作 */
	446	handleShowCron() {
	447	this.expression = this.form.cronExpression;
	448	this.openCron = true;
	449	},
	450	/** 确定后回传值 */
	451	crontabFill(value) {
	452	this.form.cronExpression = value;
	453	},
	454	/** 任务日志列表查询 */
	455	handleJobLog(row) {
	456	const jobId = row.jobId \|\| 0;
	457	this.$router.push('/monitor/job-log/index/' + jobId)
	458	},
	459	/** 新增按钮操作 */
	460	handleAdd() {
	461	this.reset();
	462	this.open = true;
	463	this.title = "添加任务";
	464	},
	465	/** 修改按钮操作 */
	466	handleUpdate(row) {
	467	this.reset();
	468	const jobId = row.jobId \|\| this.ids;
	469	getJob(jobId).then(response => {
	470	this.form = response.data;
	471	this.open = true;
	472	this.title = "修改任务";
	473	});
	474	},
	475	/** 提交按钮 */
	476	submitForm: function() {
	477	this.$refs["form"].validate(valid => {
	478	if (valid) {
	479	if (this.form.jobId != undefined) {
	480	updateJob(this.form).then(response => {
	481	this.$modal.msgSuccess("修改成功");
	482	this.open = false;
	483	this.getList();
	484	});
	485	} else {
	486	addJob(this.form).then(response => {
	487	this.$modal.msgSuccess("新增成功");
	488	this.open = false;
	489	this.getList();
	490	});
	491	}
	492	}
	493	});
	494	},
	495	/** 删除按钮操作 */
	496	handleDelete(row) {
	497	const jobIds = row.jobId \|\| this.ids;
	498	this.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项？').then(function() {
	499	return delJob(jobIds);
	500	}).then(() => {
	501	this.getList();
	502	this.$modal.msgSuccess("删除成功");
	503	}).catch(() => {});
	504	},
	505	/** 导出按钮操作 */
	506	handleExport() {
	507	this.download('monitor/job/export', {
	508	...this.queryParams
	509	}, `job_${new Date().getTime()}.xlsx`)
	510	}
	511	}
	512	};
	513	</script>