关键词：
第一步：创建一个表单数据集（定时任务过滤参数实体）
表单数据集（定时任务过滤参数实体）定义：
el-form 绑定表单数据集（定时任务过滤参数实体）定义：
<div>
<el-col :span="24">
<el-form :inline="true" :model="queryParams" ref="queryParams">
<el-form-item label="定时任务类名">
<el-input v-model="queryParams.jobName" placeholder="类名"></el-input>
</el-form-item>
<el-form-item label="定时任务实体名称">
<el-input v-model="queryParams.beanName" placeholder="实体名称"></el-input>
</el-form-item>
<el-form-item >
<el-form-item label="定时任务方法名称">
<el-input v-model="queryParams.methodName" placeholder="方法名称"></el-input>
</el-form-item>
<el-form-item label="定时任务状态">
<el-select v-model="queryParams.status" placeholder="任务状态">
<el-option label="启动" value="0"></el-option>
<el-option label="停止" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="定时任务删除状态">
<el-select v-model="queryParams.delFlag" placeholder="删除状态">
<el-option label="正常" value="0"></el-option>
<el-option label="删除" value="1"></el-option>
</el-select>
</el-form-item>
</el-form-item>
</el-form>
</el-col>
<el-col>
<!--自定义searchHandler函数-->
<el-button type="primary" @click="searchHandler">查询</el-button>
<!---->
<el-button type="primary" @click="reset">重置</el-button>
<!---->
<el-button type="primary" @click="dialogFormAdd = true">新增</el-button>
<el-button type="primary" @click="stopAll">暂停所有定时任务</el-button>
<el-button type="primary" @click="startAll">开启所有定时任务</el-button>
</el-col>第二步：表单数据集（定时任务过滤参数实体）参数转换为JSON
触发条件，点击查询按钮触发相关事件执行（在method 定义如下方法）
searchHandler()
var self = this
this.$axios(
method:'post',
url:'/api/scheduleJob/getPage',
data:JSON.stringify(this.queryParams),
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
console.log(res);
self.pagination.total = res.data.datas.data.total;
self.tableData = res.data.datas.data.records;
)
.catch(function (error)
console.log(error)
)
,核心代码片段=data:JSON.stringify(this.queryParams)
动态定时任务效果展示和前端相关代码
Vue 动态定时任务界面核心代码:
<style>
</style>
<template>
<div>
<el-col :span="24">
<el-form :inline="true" :model="queryParams" ref="queryParams">
<el-form-item label="定时任务类名">
<el-input v-model="queryParams.jobName" placeholder="类名"></el-input>
</el-form-item>
<el-form-item label="定时任务实体名称">
<el-input v-model="queryParams.beanName" placeholder="实体名称"></el-input>
</el-form-item>
<el-form-item >
<el-form-item label="定时任务方法名称">
<el-input v-model="queryParams.methodName" placeholder="方法名称"></el-input>
</el-form-item>
<el-form-item label="定时任务状态">
<el-select v-model="queryParams.status" placeholder="任务状态">
<el-option label="启动" value="0"></el-option>
<el-option label="停止" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="定时任务删除状态">
<el-select v-model="queryParams.delFlag" placeholder="删除状态">
<el-option label="正常" value="0"></el-option>
<el-option label="删除" value="1"></el-option>
</el-select>
</el-form-item>
</el-form-item>
</el-form>
</el-col>
<el-col>
<!--自定义searchHandler函数-->
<el-button type="primary" @click="searchHandler">查询</el-button>
<!---->
<el-button type="primary" @click="reset">重置</el-button>
<!---->
<el-button type="primary" @click="dialogFormAdd = true">新增</el-button>
<el-button type="primary" @click="stopAll">暂停所有定时任务</el-button>
<el-button type="primary" @click="startAll">开启所有定时任务</el-button>
</el-col>
<!--
<p style="text-align: left; margin-bottom: 10px;">
<el-button type="primary" @click="dialogFormAdd = true">添加</el-button>
</p>-->
<el-col>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
v-for="(data,index) in tableHeader"
:key="index"
:prop="data.prop"
:label="data.label"
:min-width="data['min-width']"
:align="data.align">
</el-table-column>
<el-table-column
prop="status"
label="任务状态">
<template slot-scope="scope"> scope.row.status === 0 ? '启动' : '停止' </template>
</el-table-column>
<el-table-column
prop="delFlag"
label="删除状态">
<template slot-scope="scope"> scope.row.delFlag === 0 ? '正常' : '删除' </template>
</el-table-column>
<el-table-column
label="操作"
min-width="240">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="toEdit(scope)">修改</el-button>
<el-button type="danger" size="mini" @click="deleteMember(scope)">删除</el-button>
<el-button type="info" v-if="scope.row.status == 1" size="mini" @click="startQuartz(scope)">任务启动</el-button>
<el-button type="warning" v-if="scope.row.status == 0" size="mini" @click="stopQuartz(scope)">任务暂停</el-button>
<el-button type="danger" size="mini" @click="deleteQuartz(scope)">任务删除</el-button>
</template>
</el-table-column>
</el-table>
<br>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.pageIndex"
:page-sizes="[5, 10, 20, 30, 40]"
:page-size=pagination.pageSize
layout="total, sizes, prev, pager, next, jumper"
:total=pagination.total>
</el-pagination>
</el-col>
<el-dialog title="添加定时任务" :visible.sync="dialogFormAdd">
<el-form :model="member">
<el-form-item label="任务名称" >
<el-input v-model="member.jobName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="任务表达式" >
<el-input v-model="member.cronExpression" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="实体名称" >
<el-input v-model="member.beanName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="方法名称" >
<el-input v-model="member.methodName" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormAdd = false">取 消</el-button>
<el-button type="primary" @click="add(member)">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="修改定时任务" :visible.sync="dialogFormEdit">
<el-form :model="member">
<el-form-item label="任务名称" >
<el-input v-model="member.jobName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="任务表达式" >
<el-input v-model="member.cronExpression" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="实体名称" >
<el-input v-model="member.beanName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="方法名称" >
<el-input v-model="member.methodName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="任务状态" >
<el-select v-model="member.status" placeholder="任务状态">
<el-option label="启动" value="0"></el-option>
<el-option label="停止" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="删除状态" >
<el-select v-model="member.delFlag" placeholder="删除状态">
<el-option label="正常" value="0"></el-option>
<el-option label="删除" value="1"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormEdit = false">取 消</el-button>
<el-button type="primary" @click="edit(member)">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default
name: 'member',
data ()
return
tableData: [],
dialogFormEdit: false,
dialogFormAdd:false,
member:
sid: '',
jobName: '',
cronExpression: '',
beanName: '',
methodName: '',
status: '',
createTime:'',
updateTime:'',
delFlag:''
,
queryParams:
jobName:'',
beanName:'',
methodName:'',
status:'',
delFlag:''
,
pagination:
pageIndex: 1,
pageSize: 10,
total: 0,
,
tableHeader: [
prop: 'id',
label: '任务编号',
align: 'left'
,
prop: 'jobName',
label: '任务名称',
align: 'left'
,
prop: 'cronExpression',
label: '任务表达式',
align: 'left'
,
prop: 'beanName',
label: '实体名称',
align: 'left'
,
prop: 'methodName',
label: '方法名称',
align: 'left'
]
,
methods:
init ()
var self = this
this.$axios(
method:'post',
url:'/api/scheduleJob/getPage',
data:"page":this.pagination.pageIndex,"limit":this.pagination.pageSize,
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
console.log(res);
self.pagination.total = res.data.datas.data.total;
self.tableData = res.data.datas.data.records;
)
.catch(function (error)
console.log(error)
)
,
handleSizeChange(val)
this.pagination.pageSize = val;
this.pagination.pageIndex = 1;
this.init();
,
handleCurrentChange(val)
this.pagination.pageIndex = val;
this.init();
,
add (member)
console.log("添加事件被触发")
this.$axios(
method:'post',
url:'/api/scheduleJob/insert',
data:JSON.stringify(member),
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
this.$message.success('添加成功')
this.dialogFormAdd = false
this.init()
)
.catch(function (error)
console.log(error)
)
,
toEdit (scope)
this.member.sid = scope.row.id
this.member.jobName = scope.row.jobName
this.member.cronExpression = scope.row.cronExpression
this.member.beanName = scope.row.beanName
this.member.methodName = scope.row.methodName
this.member.status = scope.row.status.toString()
this.member.delFlag = scope.row.delFlag.toString()
this.dialogFormEdit = true
,
edit ()
var params =
'id' : this.member.sid,
'jobName' : this.member.jobName,
'cronExpression' : this.member.cronExpression,
'beanName' : this.member.beanName,
'methodName' : this.member.methodName,
'status' : this.member.status,
'delFlag' : this.member.delFlag
this.$axios(
method:'post',
url:'/api/scheduleJob/update',
data:params,
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
this.$message.success('修改成功')
this.dialogFormEdit = false
this.init()
).catch(function (error)
console.log(error)
)
,
deleteMember (scope)
if (!scope.row.id)
this.tableData.splice(scope.$index, 1)
else
this.$confirm('确认是否删除', '提示',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
)
.then(() =>
console.log(scope.row.id)
var params =
'id' : scope.row.id
this.$axios(
method:'post',
url:'/api/scheduleJob/delete',
data:params,
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
this.$message.success('修改成功')
this.init()
).catch(function (error)
console.log(error)
)
)
,
deleteQuartz(scope)
if (!scope.row.id)
this.tableData.splice(scope.$index, 1)
else
this.$confirm('确认是否删除', '提示',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
)
.then(() =>
console.log(scope.row.id)
var params =
'id' : scope.row.id,
'jobName' : scope.row.jobName
this.$axios(
method:'post',
url:'/api/quartz/deleteJob',
data:JSON.stringify(params),
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
console.log(res)
this.$message.success('删除成功')
this.init()
).catch(function (error)
console.log(error)
)
)
,
startQuartz(scope)
if (!scope.row.id)
this.tableData.splice(scope.$index, 1)
else
this.$confirm('确认是否启动', '提示',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
)
.then(() =>
console.log(scope.row.id)
var params =
'id' : scope.row.id,
'jobName' : scope.row.jobName
this.$axios(
method:'post',
url:'/api/quartz/startJob',
data:JSON.stringify(params),
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
console.log(res)
this.$message.success('启动成功')
this.init()
).catch(function (error)
console.log(error)
)
)
,
stopQuartz(scope)
if (!scope.row.id)
this.tableData.splice(scope.$index, 1)
else
this.$confirm('确认是否暂停', '提示',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
)
.then(() =>
console.log(scope.row)
var params =
'id' : scope.row.id,
'jobName' : scope.row.jobName
this.$axios(
method:'post',
url:'/api/quartz/pauseJob',
data:JSON.stringify(params),
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
console.log(res)
this.$message.success('暂停成功')
this.init()
).catch(function (error)
console.log(error)
)
)
,
searchHandler()
var self = this
this.$axios(
method:'post',
url:'/api/scheduleJob/getPage',
data:JSON.stringify(this.queryParams),
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
console.log(res);
self.pagination.total = res.data.datas.data.total;
self.tableData = res.data.datas.data.records;
)
.catch(function (error)
console.log(error)
)
,
reset()
// 重新设置请求参数实体属性
this.queryParams =
jobName:undefined,
beanName:undefined,
methodName:undefined,
status:undefined,
delFlag:undefined
;
//表单验证还原
if (this.$refs['queryParams'] !== undefined)
this.$refs['queryParams'].resetFields();
else
this.$nextTick(()=>
this.$refs['queryParams'].resetFields();
);
,
startAll()
this.$axios(
method:'post',
url:'/api/quartz/startAllJob',
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
this.$message.success('定时任务全部启动成功')
).catch(function (error)
console.log(error)
)
,
stopAll()
this.$axios(
method:'post',
url:'/api/quartz/pauseAllJob',
headers:
'Content-Type':'application/json;charset=utf-8' //改这里就好了
).then(res =>
this.$message.success('定时任务全部暂停成功')
).catch(function (error)
console.log(error)
)
,
mounted: function ()
this.init()
</script>
将 eloquent 关系转换为 vue js 代码
...间】：2016-09-1407:55:05【问题描述】：我有这个项目应该从数据透视表和一对多关系中获取值。使用雄辩的语法时，我得到了正确的输出，如下所示：预订控制器publicfunctionindex()$secSubs=Student::find(1);return$secSubs-> 查看详情
vue+el-form表单验证、提交及重置
...验证的情况吧举个栗子~~有两种方法，如下：2.没有使用el-form表单的重置this.$options.data()是vue实例初始化时的data数据，只读属性el-date-picker不允许选当前之前日期监听计算属性（计算属性+el-form进行表单验证）=>利用value给v-model... 查看详情
vue-resource中post请求将data数据以requestpayload转换为formdata的形式
...时vue-resource中post请求时的一个坑，vue-resource中post发送的数据默认以requestpayload的形式，而一般我们使用的都是formdata的形式。后来发现，只需要在main.js中加入：Vue.http.options.emulateJS 查看详情
将 Vue3 Typescript 转换为 Vue3 Javascript
】将Vue3Typescript转换为Vue3Javascript【英文标题】：convertVue3TypescripttoVue3Javascript【发布时间】：2021-05-0414:40:33【问题描述】：您好，请您帮我在Vue3中将其转换为javascript，谢谢importtypeAppfrom\'vue\'importScreenfullfrom\'./Screenfull.vue\'constcompo... 查看详情
Vue - 将 html 音频播放器转换为组件
】Vue-将html音频播放器转换为组件【英文标题】：Vue-Converthtmlaudioplayerintocomponent【发布时间】：2019-06-1118:17:00【问题描述】：我正在将html中的播放器转换为Vue组件。已经创建了一半的组件，只是缺少时间控制滑块。这里是html播... 查看详情
Vue 将 input[type=number] 转换为字符串值
】Vue将input[type=number]转换为字符串值【英文标题】：Vueconvertsinput[type=number]toastringvalue【发布时间】：2018-09-1918:37:27【问题描述】：我遇到了问题，Vue将数字类型的输入字段的值转换为字符串，我就是不知道为什么。我遵循的指... 查看详情
试图将仅 Laravel 的项目转换为 Vue + Laravel 项目。 Vue组件未安装
】试图将仅Laravel的项目转换为Vue+Laravel项目。Vue组件未安装【英文标题】：TryingtotransformaLaravelonlyprojectintoaVue+Laravelproject.Vuecomponentnotmounting【发布时间】：2021-10-1808:21:40【问题描述】：我想将现有的Laravel项目转换为Vue+Laravel项目... 查看详情
如何将 adobe xd 转换为 html css (vue)？
】如何将adobexd转换为htmlcss(vue)？【英文标题】：HowdoIconvertadobexdtohtmlcss(vue)?【发布时间】：2020-01-2815:40:01【问题描述】：我想使用vue.js制作一个单页应用程序。我得到了这样的参考https://coreui.io/vue/来实现它。我的同事使用adobexd... 查看详情
如何将 Vue 2 网站转换为 PWA 网络应用程序？
】如何将Vue2网站转换为PWA网络应用程序？【英文标题】：HowtoconvertVue2websitetoPWAwabapp?【发布时间】：2021-10-0519:54:22【问题描述】：我在使用vue3时检查了PWA功能，但在vue2中没有。所以如果你有从vue2项目转换为pwa的好主意，请分享... 查看详情
如何将以下代码转换为 vue js 代码？
】如何将以下代码转换为vuejs代码？【英文标题】：HowcanIconvertfollowingcodetoavuejscode?【发布时间】：2018-04-2702:55:53【问题描述】：<scripttype="text/javascript">navigator.geolocation.getCurrentPosition(success,error);functionsuccess(position)varGE 查看详情
Vue.js - 如何将简单数组转换为动态 NxNxN 矩阵
】Vue.js-如何将简单数组转换为动态NxNxN矩阵【英文标题】：Vue.js-HowtoconvertasimplearraytodynamicNxNxNMatrix【发布时间】：2020-03-0907:10:56【问题描述】：假设你有一个数组：listItems=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];我希望它... 查看详情
使用 vue.js 将二维关联数组转换为 Object
】使用vue.js将二维关联数组转换为Object【英文标题】：ConverttwodimensionalassociatedarraytoObjectusingvue.js【发布时间】：2021-07-1412:27:45【问题描述】：我有一个多维关联数组maplist，如下所示，现在，我想将其转换为如下图所示的对象，... 查看详情
Vue + webpack，将字体文件转换为base64
】Vue+webpack，将字体文件转换为base64【英文标题】：Vue+webpack,convertfontfilestobase64【发布时间】：2021-04-2015:34:55【问题描述】：我正在编写一个库以导入其他项目，以共享自定义组件和样式。问题在于字体文件，.woff/.ttf/等。//_fonts... 查看详情
Vue - 将 JSON 对象转换为具有特定布局的字符串
】Vue-将JSON对象转换为具有特定布局的字符串【英文标题】：Vue-ConvertJSONobjecttoastringwithspecificlayout【发布时间】：2019-11-0408:36:53【问题描述】：我有一个动态设置的JSON对象。下面是设置列的方法onDragStop：data()returncolumns:[],,methods:... 查看详情
Vue路由器：如何将参数转换为整数而不是字符串？
】Vue路由器：如何将参数转换为整数而不是字符串？【英文标题】：VueRouter:howtocastparamsasintegersinsteadofstrings?【发布时间】：2018-09-3003:45:03【问题描述】：当我使用浏览器字段输入URL时，参数被转换为字符串，而不是整数，例如/u... 查看详情
将对象数组转换为 Vue js 和 php 中的对象
】将对象数组转换为Vuejs和php中的对象【英文标题】：ConvertarrayofobjectstoobjectsinVuejsandphp【发布时间】：2021-06-2816:41:32【问题描述】：如何将此对象格式化为对象数组？[["fieldName":"4579043642","message":"setnumber\'4579043642\'exists!"],["fieldNam... 查看详情
Vue-Select：如何将此 fetch() 代码转换为使用 axios？
】Vue-Select：如何将此fetch()代码转换为使用axios？【英文标题】：Vue-Select:HowcanIconvertthisfetch()codetouseaxios?【发布时间】：2022-01-1518:31:55【问题描述】：我正在尝试在我的应用程序中使用vue-select包。我有一些从文档中复制的代码，... 查看详情
将 Blade If Else 转换为 Vue If Else
】将BladeIfElse转换为VueIfElse【英文标题】：ConvertBladeIfElsetoVueIfElse【发布时间】：2021-08-3019:57:02【问题描述】：我在Blade中有一个ifelse条件，我想将其转换为Vueifelse@if(Auth::user()->avatar!=null)<imgsrc="URL::to(\'storage/app/public\').\'/\'.Aut... 查看详情