Quartz+Mybatis+SpringMvc+SpringBoot整合（三）
|
0
|
Java

502 字
|
22 分钟

由于表格控件是我二次封装的(vue-easytable)，包括api请求，所以就不详细放了，大概参考一下就行，没什么东西，就是请求数据/发送请求

界面如下

定时任务首页

 <template>
  <div>
    <el-row class="btn-group">
      <el-button type="primary" size="mini" @click="add">添加</el-button>
      <el-button type="primary" size="mini" @click="startJob">开始</el-button>
      <el-button type="warning" size="mini" @click="standbyJob()" >临时终止</el-button>
      <el-button type="danger" size="mini" @click="shutdownJob" disabled="true">终止</el-button>

    </el-row>
    <lkTable ref="lkTable" :tableColumn="tableConfig.columns" :api="tableConfig.api"
             @on-custom-comp="customCompFunc" :showSearch="false"></lkTable>
    <editJob :dialogFormVisible="dialogFormVisible" v-on:canclemodal="dialogVisible" ref="editJob"
             :formTitle="formTitle" :operation="operation" :lkForm="lkForm"></editJob>
  </div>
</template>

<script>
  import api from "@/api"
  import Vue from 'vue'
  import lkTable from "@/components/Table"
  import editJob from "./editJob"

  export default {
    name: "scheduler",
    data() {
      return {
        lkForm: {},
        dialogFormVisible: false,
        formTitle: "添加",
        formItemId: 0,
        operation: 'add',
        tableConfig: {
          api: api.common.scheduler.page,
          columns: [
            {
              field: 'jobName',
              title: '任务名称',
              titleAlign: 'center',
              columnAlign: 'center',
              isResize: true,
              width: 120
            },
            {
              field: 'jobGroup',
              title: '任务所在组',
              titleAlign: 'center',
              columnAlign: 'center',
              isResize: true,
              width: 120
            },
            {
              field: 'jobClassName',
              title: '任务类名',
              titleAlign: 'center',
              columnAlign: 'center',
              isResize: true,
              width: 200
            },
            {
              field: 'triggerName',
              title: '触发器名称',
              titleAlign: 'center',
              columnAlign: 'center',
              isResize: true,
              width: 200
            },
            {
              field: 'triggerGroup',
              title: '触发器所在组',
              titleAlign: 'center',
              columnAlign: 'center',
              isResize: true,
              width: 120
            },
            {
              field: 'triggerType',
              title: '触发器类型',
              titleAlign: 'center',
              columnAlign: 'center',
              isResize: true,
              width: 95
            },
            {
              field: 'triggerState',
              title: '触发器状态',
              titleAlign: 'center',
              columnAlign: 'center',
              isResize: true,
              width: 95
            },
            {
              field: 'custome-adv',
              title: '操作',
              titleAlign: 'center',
              columnAlign: 'center',
              componentName: 'SchedulerOperation',
              isResize: true,
              width: 400,
            }
          ]
        }
      }
    },
    components: {lkTable, editJob},
    created() {
      this.loadFields()
    },
    methods: {
      loadData() {
        this.$refs.lkTable.getTableData()
      },
      startJob() {
        utils.confirm('确认操作?', () => {
          api.scheduler.startJob().then(res => {
            utils.message.success(res.msg)
          }).catch(err => {
            utils.message.error(err.msg)
          })
        })
      },
      standbyJob() {
        utils.confirm('确认操作?', () => {
          api.scheduler.standbyJob().then(res => {
            utils.message.success(res.msg)
          }).catch(err => {
            utils.message.error(err.msg)
          })
        })
      },
      shutdownJob() {
        utils.confirm('确认操作?', () => {
          api.scheduler.shutdownJob().then(res => {
            utils.message.success(res.msg)
          }).catch(err => {
            utils.message.error(err.msg)
          })
        })
      },
      loadFields() {
        api.common.scheduler.getFields().then(res => {
          this.lkForm = res.data
        }).catch(err => {
        })
      },

      del(row) {
        utils.confirm("确认删除?", () => {
          api.scheduler.del(row.jobName, row.jobGroup).then(res => {
            this.loadData()
          }).catch(err => {
            log('error', err)
          })
        })
      },

      pause(row) {
        utils.confirm("确认暂停?", () => {
          api.scheduler.pause(row.jobName, row.jobGroup).then(res => {
            this.loadData()
          }).catch(err => {
            log('error', err)
          })
        })
      },

      resume(row) {
        utils.confirm("确认恢复?", () => {
          api.scheduler.resume(row.jobName, row.jobGroup).then(res => {
            this.loadData()
          }).catch(err => {
            log('error', err)
          })
        })
      },
      add() {
        this.dialogFormVisible = true
        this.formTitle = "添加"
        this.operation = "add"
      },
      dialogVisible: function () {
        this.loadFields()
        this.dialogFormVisible = false
        this.$refs.lkTable.getTableData()
      },
      edit(row) {
        api.scheduler.detail(row.jobName, row.jobGroup).then(res => {
          utils.objectCopy(this.lkForm, res.data)
          this.dialogFormVisible = true
          this.formTitle = "编辑"
          this.operation = "edit"
        }).catch(err => {
        })
      },
      detail(row) {
        api.scheduler.detail(row.jobName, row.jobGroup).then(res => {
          utils.objectCopy(this.lkForm, res.data)
          this.dialogFormVisible = true
          this.formTitle = "详情"
          this.operation = "detail"
        }).catch(err => {
        })
      },
      customCompFunc(params) {
        let row = params.rowData
        if (params.type === 'delete') {
          this.del(row)
        } else if (params.type === 'edit') {
          this.edit(row)
        } else if (params.type === 'detail') {
          this.detail(row)
        } else if (params.type === 'pause') {
          this.pause(row)
        } else if (params.type === 'resume') {
          this.resume(row)
        }
      }
    }

  }

  // 操作列
  Vue.component('SchedulerOperation', {
    template: `<span>
      <el-button type="warning" size="mini" @click.stop.prevent="pause(rowData,index)" :disabled="rowData.triggerState=='PAUSED'">暂停</el-button>
         <el-button type="warning" size="mini" @click.stop.prevent="resume(rowData,index)" :disabled="rowData.triggerState!='PAUSED'" >恢复</el-button>
             <el-button type="warning" size="mini" @click.stop.prevent="detail(rowData,index)" >详情</el-button>
          <el-button type="primary" size="mini" @click.stop.prevent="edit(rowData,index)" >编辑</el-button>
        <el-button type="danger" size="mini" @click.stop.prevent="del(rowData,index)">删除</el-button>
        <span v-html="rowData.ExtendFunction"></span>
        </span>`,

    props: {
      rowData: {
        type: Object
      },
      field: {
        type: String
      },
      index: {
        type: Number
      },
    },
    methods: {
      pause() {
        let params = {type: 'pause', index: this.index, rowData: this.rowData}
        this.$emit('on-custom-comp', params)
      },
      resume() {
        let params = {type: 'resume', index: this.index, rowData: this.rowData}
        this.$emit('on-custom-comp', params)
      },
      del() {
        let params = {type: 'delete', index: this.index, rowData: this.rowData}
        this.$emit('on-custom-comp', params)
      },
      edit() {
        let params = {type: 'edit', index: this.index, rowData: this.rowData}
        this.$emit('on-custom-comp', params)
      },
      detail() {
        let params = {type: 'detail', index: this.index, rowData: this.rowData}
        this.$emit('on-custom-comp', params)
      }
    }
  })
</script>

编辑/添加/详情页

 <template>
  <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
             :show-close="true" :before-close="canclemodal">
    <el-form :model="lkForm" :ref="refForm" :rules="rules">
      <el-input :model="lkForm.id" type="hidden"></el-input>
      <el-form-item label="选择任务Class" :label-width="formLabelWidth" prop="jobClassName">
        <el-select v-model="lkForm.jobClassName" :disabled="isNotAdd()">
          <el-option v-for="job  in jobs"
                     :label="job.name+'('+job.description+','+job.className+')'"
                     :key="job.className"
                     :value="job.className"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务名称" :label-width="formLabelWidth" prop="jobName">
        <el-input v-model="lkForm.jobName" :disabled="isNotAdd()"></el-input>
      </el-form-item>
      <el-form-item label="所在组" :label-width="formLabelWidth" prop="jobGroup">
        <el-input v-model="lkForm.jobGroup" :disabled="isNotAdd()"></el-input>
      </el-form-item>
      <el-form-item label="任务描述" :label-width="formLabelWidth" prop="description">
        <el-input v-model="lkForm.description" :disabled="isNotAdd()"></el-input>
      </el-form-item>
      <el-form-item label="优先级" :label-width="formLabelWidth" prop="priority">
        <el-input v-model="lkForm.priority" type="Number" :disabled="isNotAdd()"></el-input>
      </el-form-item>
      <el-form-item label="触发器类型" :label-width="formLabelWidth" prop="triggerType">
        <el-select v-model="lkForm.triggerType" :disabled="isNotAdd()">
          <el-option v-for="(item,index) in triggerType"
                     :label="item.name" :value="item.value" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <!--      CRON-->
      <el-form-item label="Cron表达式" :label-width="formLabelWidth" prop="cronExpression"
                    v-if="lkForm.triggerType==triggerTypeEnum.CRON">
        <el-input v-model="lkForm.cronExpression" title="秒 分 小时 月份中的日期 月份 星期中的日期 年份(可为空)"
                  :disabled="isDetail()"></el-input>
      </el-form-item>
      <!--      Simple-->
      <el-form-item label="重复次数" :label-width="formLabelWidth" prop="repeatCount"
                    v-if="lkForm.triggerType==triggerTypeEnum.SIMPLE">
        <el-input v-model="lkForm.repeatCount" :disabled="isDetail()"></el-input>
      </el-form-item>
      <el-form-item label="重复间隔" :label-width="formLabelWidth" prop="repeatInterval"
                    v-if="lkForm.triggerType==triggerTypeEnum.SIMPLE">
        <el-input v-model="lkForm.repeatInterval" :disabled="isDetail()" title="forver为不限次数"
                  placeholder="forver为不限次数"></el-input>
      </el-form-item>
      <!--      calendar  dailitime-->
      <el-form-item label="间隔时间" :label-width="formLabelWidth" prop="timeInterval"
                    v-if="lkForm.triggerType==triggerTypeEnum.CAL_INT || lkForm.triggerType==triggerTypeEnum.DAILY_I">
        <el-input v-model="lkForm.timeInterval" :disabled="isDetail()"></el-input>
      </el-form-item>

      <el-form-item label="间隔单位" :label-width="formLabelWidth" prop="intervalUnit"
                    v-if="lkForm.triggerType!=triggerTypeEnum.CRON">
        <el-select v-model="lkForm.intervalUnit" :disabled="isDetail()">
          <el-option v-for="(item,index) in intervalUnit[lkForm.triggerType]" :label="item" :value="item"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :plain="true" type="danger" v-on:click="canclemodal">取消</el-button>
      <el-button :plain="true" @click="updateForm" :disabled="isDetail()">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import api from '@/api'

  export default {
    name: "editJob",
    data() {
      return {
        formLabelWidth: '120px',
        refForm: "lkForm",//验证
        intervalUnit: {
          'SIMPLE': ['MILLISECOND', 'SECOND', 'MINUTE', 'HOUR'],
          'CRON': [],
          'CAL_INT': ['MILLISECOND', 'SECOND', 'MINUTE', 'HOUR', 'DAY', 'WEEK', 'MONTH', 'YEAR'],
          'BLOB': [],
          'DAILY_I': ['SECOND', 'MINUTE', 'HOUR']
        },
        triggerTypeEnum: {
          SIMPLE: 'SIMPLE',
          CRON: 'CRON',
          CAL_INT: 'CAL_INT',
          BLOB: 'BLOB',
          DAILY_I: 'DAILY_I'
        },
        //这个是从后台获取的类型列表
        triggerType: [],
        jobs: [],
        rules: {}
      }
    },
    props: ['dialogFormVisible', "formTitle", "operation", "lkForm"],
    created() {
      api.scheduler.getJobList().then(res => {
        this.jobs = res.data
      }).catch(err => {

      })
      api.scheduler.getTriggerType().then(res => {
        this.triggerType = res.data
      }).catch(err => {
      })
    },
    methods: {
      isNotAdd() {
        return this.operation != 'add'
      },
      isDetail() {
        return this.operation == 'detail'
      },
      updateForm() {
        this.$refs[this.refForm].validate((valid) => {
          if (valid) {
            if (this.operation === 'add') {
              let a = 1
              api.common.scheduler.add(this.lkForm).then(res => {
                utils.message.success(res.msg)
                this.canclemodal()
              }).catch(err => {
              })
            } else if (this.operation === 'edit') {
              let b = 1
              api.common.scheduler.edit(this.lkForm).then(res => {
                utils.message.success(res.msg)
                this.canclemodal()
              }).catch(err => {
              })
            } else {
              utils.message.error('未知操作')
            }
          } else {
            return false
          }
        })
      },
      canclemodal() {
        this.$emit('canclemodal')
      }
    }
  }
</script>

<style scoped>

</style>
elementuiquartzssmvue
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
															
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

															
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
优雅的拷贝不同层的对象(VO,DO等)

							
							

							
Spring参数校验及通用异常信息返回

							
							

							
Spring AOP实现Redis缓存方法

							
							

							
Spring MVC使用JWT做token验证

							
							

							
docker运行springboot+haproxy+mysql+redis

							
							

							
SpringBoot 打包jar并生成docker镜像

							
							

							
Spring中实现单点Redis分布式锁

							
							

							
Spring Boot+MyBatis+Druid多数据源配置

							
							

							
Spring笔记-自动装配注解

							
							

							
Spring笔记-Bean的生命周期