From 47d40670ee639c626a1667e5ac9f0dcb27019e18 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Wed, 7 Jul 2021 13:30:21 +0800
Subject: [PATCH] =?UTF-8?q?ADD=20=E8=AE=A1=E5=88=92=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/setting/task/index.vue | 166 +++++++++++++++++++++++++++++++
 src/views/setting/task/logs.vue  | 108 ++++++++++++++++++++
 src/views/setting/task/save.vue  |  78 +++++++++++++++
 3 files changed, 352 insertions(+)
 create mode 100644 src/views/setting/task/index.vue
 create mode 100644 src/views/setting/task/logs.vue
 create mode 100644 src/views/setting/task/save.vue

diff --git a/src/views/setting/task/index.vue b/src/views/setting/task/index.vue
new file mode 100644
index 00000000..20a49947
--- /dev/null
+++ b/src/views/setting/task/index.vue
@@ -0,0 +1,166 @@
+<!--
+ * @Descripttion: 系统计划任务配置
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月7日09:28:32
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.id">
+				<el-card class="task task-item" shadow="hover">
+					<h2>{{item.title}}</h2>
+					<ul>
+						<li>
+							<h4>执行类</h4>
+							<p>{{item.handler}}</p>
+						</li>
+						<li>
+							<h4>定时规则</h4>
+							<p>{{item.cron}}</p>
+						</li>
+					</ul>
+					<div class="bottom">
+						<div class="state">
+							<el-tag v-if="item.state=='1'" size="mini">准备就绪</el-tag>
+							<el-tag v-if="item.state=='-1'" size="mini" type="info">停用</el-tag>
+						</div>
+						<div class="handler">
+							<el-popconfirm title="确定立即执行吗？" @confirm="run(item)">
+								<template #reference>
+									<el-button type="primary" icon="el-icon-caret-right" size="mini" circle></el-button>
+								</template>
+							</el-popconfirm>
+							<el-dropdown trigger="click">
+								<el-button type="primary" icon="el-icon-more" size="mini" circle plain></el-button>
+								<template #dropdown>
+									<el-dropdown-menu>
+										<el-dropdown-item @click="edit(item)">编辑</el-dropdown-item>
+										<el-dropdown-item @click="logs(item)">日志</el-dropdown-item>
+										<el-dropdown-item @click="del(item)" divided>删除</el-dropdown-item>
+									</el-dropdown-menu>
+								</template>
+							</el-dropdown>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
+				<el-card class="task task-add" shadow="none" @click="add">
+					<i class="el-icon-plus"></i>
+					<p>添加计划任务</p>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+
+	<el-dialog title="计划任务" v-model="saveDialogVisible" :width="400" destroy-on-close>
+		<save-dialog ref="saveDialog"></save-dialog>
+		<template #footer>
+			<el-button @click="saveDialogVisible=false" >取 消</el-button>
+			<el-button type="primary" @click="saveForm()" :loading="isSaveing">保 存</el-button>
+		</template>
+	</el-dialog>
+
+	<el-drawer title="计划任务日志" v-model="logsVisible" :size="600" direction="rtl" destroy-on-close>
+		<logs></logs>
+	</el-drawer>
+</template>
+
+<script>
+	import saveDialog from './save'
+	import logs from './logs'
+
+	export default {
+		name: 'task',
+		components: {
+			saveDialog,
+			logs
+		},
+		data() {
+			return {
+				saveDialogVisible: false,
+				logsVisible: false,
+				isSaveing: false,
+				list: [
+					{
+						id: "1",
+						title: "清理服务器缓存",
+						handler: "cleanUpCacheHandler",
+						cron: "59 59 23 * * ? *",
+						state: "1"
+					},
+					{
+						id: "2",
+						title: "自动审核",
+						handler: "automaticAuditHandler",
+						cron: "0 0 * * * ? *",
+						state: "1"
+					},
+					{
+						id: "3",
+						title: "清理未实名用户",
+						handler: "deleteUserHandler",
+						cron: "0 0 0 * * ? *",
+						state: "-1"
+					}
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			add(){
+				this.saveDialogVisible = true;
+			},
+			edit(task){
+				this.saveDialogVisible = true;
+				this.$nextTick(() => {
+					this.$refs.saveDialog.setData(task)
+				})
+			},
+			del(task){
+				this.$confirm(`确认删除 ${task.title} 计划任务吗？`,'提示', {
+					type: 'warning',
+					confirmButtonText: '删除',
+					confirmButtonClass: 'el-button--danger'
+				}).then(() => {
+					this.list.splice(this.list.findIndex(item => item.id === task.id), 1)
+				}).catch(() => {
+					//取消
+				})
+			},
+			logs(){
+				this.logsVisible = true
+			},
+			run(task){
+				this.$message.success(`已成功执行计划任务：${task.title}`)
+			},
+			saveForm(){
+				this.$refs.saveDialog.submit((formData) => {
+					console.log(formData)
+					this.$message.success("操作成功")
+					this.saveDialogVisible = false;
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.task {height: 210px;}
+	.task-item h2 {font-size: 15px;color: #3c4a54;padding-bottom:15px;}
+	.task-item li {list-style-type:none;margin-bottom: 10px;}
+	.task-item li h4 {font-size: 12px;font-weight: normal;color: #999;}
+	.task-item li p {margin-top: 5px;}
+	.task-item .bottom {border-top: 1px solid #EBEEF5;text-align: right;padding-top:10px;display: flex;justify-content: space-between;align-items: center;}
+
+	.task-add {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;cursor: pointer;color: #999;}
+	.task-add:hover {color: #409EFF;}
+	.task-add i {font-size: 30px;}
+	.task-add p {font-size: 12px;margin-top: 20px;}
+</style>
diff --git a/src/views/setting/task/logs.vue b/src/views/setting/task/logs.vue
new file mode 100644
index 00000000..59629821
--- /dev/null
+++ b/src/views/setting/task/logs.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Descripttion: 系统计划任务配置
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月7日09:28:32
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-container>
+		<el-main  style="padding:0 20px;">
+			<scTable ref="table" :data="data" stripe>
+				<el-table-column label="执行时间" prop="time" width="200"></el-table-column>
+				<el-table-column label="执行结果" prop="state" width="100">
+					<template #default="scope">
+						<span v-if="scope.row.state==200" style="color: #67C23A;"><i class="el-icon-success"></i> 成功</span>
+						<span v-else style="color: #F56C6C;"><i class="el-icon-error"></i> 异常</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="执行日志" prop="logs" width="100" fixed="right">
+					<template #default="scope">
+						<el-button size="mini" @click="show(scope.row)" type="text">日志</el-button>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<el-drawer title="日志" v-model="logsVisible" :size="500" direction="rtl" destroy-on-close>
+		<el-main  style="padding:0 20px 20px 20px;">
+			<pre style="font-size: 12px;color: #999;padding:20px;background: #333;font-family: consolas;line-height: 1.5;overflow: auto;">{{demoLog}}</pre>
+		</el-main>
+	</el-drawer>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				logsVisible: false,
+				demoLog: `2021-07-07 12:35:00 [com.xxl.job.core.thread.JobThread#run]-[124]-[Thread-308]
+----------- xxl-job job execute start -----------
+----------- Param:
+2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[31]-[Thread-308] aqshMasterDataSendHandler start
+2021-07-07 12:35:00 [com.heronshn.reservation.data.service.impl.AqshVehicleServiceImpl#send]-[42]-[Thread-308] send 45
+2021-07-07 12:35:00 [com.heronshn.reservation.data.service.impl.AqshVehicleServiceImpl#send]-[45]-[Thread-308] webapi http://127.0.0.1:48080
+2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[33]-[Thread-308] aqshMasterDataSendHandler vehicle end
+2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[35]-[Thread-308] aqshMasterDataSendHandler stop
+2021-07-07 12:35:00 [com.xxl.job.core.thread.JobThread#run]-[158]-[Thread-308]
+----------- xxl-job job execute end(finish) -----------
+----------- ReturnT:ReturnT [code=200, msg=null, content=null]
+2021-07-07 12:35:00 [com.xxl.job.core.thread.TriggerCallbackThread#callbackLog]-[176]-[Thread-10]
+----------- xxl-job job callback finish.
+
+[Load Log Finish]`,
+				data: [
+					{
+						time: "2021-07-07 00:00:00",
+						state: "500",
+						logs: ""
+					},
+					{
+						time: "2021-07-06 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-05 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-04 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-03 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-02 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-01 00:00:00",
+						state: "200",
+						logs: ""
+					}
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			show(){
+				this.logsVisible = true;
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/views/setting/task/save.vue b/src/views/setting/task/save.vue
new file mode 100644
index 00000000..4891000d
--- /dev/null
+++ b/src/views/setting/task/save.vue
@@ -0,0 +1,78 @@
+<!--
+ * @Descripttion: 系统计划任务配置
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月7日09:28:32
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
+		<el-form-item label="描述" prop="title">
+			<el-input v-model="form.title" clearable></el-input>
+		</el-form-item>
+		<el-form-item label="执行类" prop="handler">
+			<el-input v-model="form.handler" clearable></el-input>
+		</el-form-item>
+		<el-form-item label="定时规则" prop="cron">
+			<el-input v-model="form.cron" clearable></el-input>
+		</el-form-item>
+		<el-form-item label="状态" prop="state">
+			<el-switch v-model="form.state" active-value="1" inactive-value="-1"></el-switch>
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					id:"",
+					title: "",
+					handler: "",
+					cron: "",
+					state: "1"
+				},
+				rules: {
+					title:[
+						{required: true, message: '请填写标题'}
+					],
+					handler:[
+						{required: true, message: '请填写执行类'}
+					],
+					cron:[
+						{required: true, message: '请填写定时规则'}
+					]
+				}
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//表单提交方法
+			submit(callback){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						callback(this.form)
+					}else{
+						return false;
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.title = data.title
+				this.form.handler = data.handler
+				this.form.cron = data.cron
+				this.form.state = data.state
+			}
+		}
+	}
+</script>
+
+<style>
+</style>