QuartzJobModal.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <a-modal
  3. :title="title"
  4. :width="800"
  5. :visible="visible"
  6. :confirmLoading="confirmLoading"
  7. @ok="handleOk"
  8. @cancel="handleCancel"
  9. okText="保存并安排任务"
  10. cancelText="关闭">
  11. <a-spin :spinning="confirmLoading">
  12. <a-form :form="form">
  13. <a-form-item
  14. :labelCol="labelCol"
  15. :wrapperCol="wrapperCol"
  16. label="任务类名"
  17. hasFeedback>
  18. <a-input placeholder="请输入任务类名"
  19. v-decorator="['jobClassName', {rules: [{ required: true, message: '请输入任务类名!' }]}]"/>
  20. </a-form-item>
  21. <a-form-item
  22. :labelCol="labelCol"
  23. :wrapperCol="wrapperCol"
  24. label="cron表达式">
  25. <a-input placeholder="请输入cron表达式"
  26. v-decorator="['cronExpression', {'initialValue':'0/1 * * * * ?',rules: [{ required: true, message: '请输入任务类名!' }]}]"/>
  27. <a target="_blank" href="http://cron.qqe2.com/">
  28. <a-icon type="share-alt"/>
  29. 在线cron表达式生成
  30. </a>
  31. </a-form-item>
  32. <a-form-item
  33. :labelCol="labelCol"
  34. :wrapperCol="wrapperCol"
  35. label="参数"
  36. hasFeedback>
  37. <a-input placeholder="请输入参数" v-decorator="['parameter', {}]"/>
  38. </a-form-item>
  39. <a-form-item
  40. :labelCol="labelCol"
  41. :wrapperCol="wrapperCol"
  42. label="描述"
  43. hasFeedback>
  44. <a-input placeholder="请输入描述" v-decorator="['description', {}]"/>
  45. </a-form-item>
  46. <a-form-item
  47. :labelCol="labelCol"
  48. :wrapperCol="wrapperCol"
  49. label="状态">
  50. <a-radio-group buttonStyle="solid" v-decorator="[ 'status', {'initialValue':0}]">
  51. <a-radio-button :value="0">正常</a-radio-button>
  52. <a-radio-button :value="-1">停止</a-radio-button>
  53. </a-radio-group>
  54. </a-form-item>
  55. </a-form>
  56. </a-spin>
  57. </a-modal>
  58. </template>
  59. <script>
  60. import {httpAction} from '@/api/manage'
  61. import pick from 'lodash.pick'
  62. import moment from "moment"
  63. import promiseFinally from 'promise.prototype.finally';
  64. promiseFinally.shim();
  65. export default {
  66. name: "QuartzJobModal",
  67. data() {
  68. return {
  69. title: "操作",
  70. visible: false,
  71. model: {},
  72. labelCol: {
  73. xs: {span: 24},
  74. sm: {span: 5},
  75. },
  76. wrapperCol: {
  77. xs: {span: 24},
  78. sm: {span: 16},
  79. },
  80. confirmLoading: false,
  81. form: this.$form.createForm(this),
  82. validatorRules: {},
  83. url: {
  84. add: "/sys/quartzJob/add",
  85. edit: "/sys/quartzJob/edit",
  86. },
  87. }
  88. },
  89. created() {
  90. },
  91. methods: {
  92. add() {
  93. this.edit({});
  94. },
  95. edit(record) {
  96. this.form.resetFields();
  97. this.model = Object.assign({}, record);
  98. console.log(this.model)
  99. this.visible = true;
  100. this.$nextTick(() => {
  101. this.form.setFieldsValue(pick(this.model, 'jobClassName', 'cronExpression', 'parameter', 'description', 'status'));
  102. });
  103. },
  104. close() {
  105. this.$emit('close');
  106. this.visible = false;
  107. },
  108. handleOk() {
  109. const that = this;
  110. // 触发表单验证
  111. this.form.validateFields((err, values) => {
  112. if (!err) {
  113. that.confirmLoading = true;
  114. let httpurl = '';
  115. let method = '';
  116. if (!this.model.id) {
  117. httpurl += this.url.add;
  118. method = 'post';
  119. } else {
  120. httpurl += this.url.edit;
  121. method = 'put';
  122. }
  123. let formData = Object.assign(this.model, values);
  124. //时间格式化
  125. console.log(formData)
  126. httpAction(httpurl, formData, method).then((res) => {
  127. if (res.success) {
  128. that.$message.success(res.message);
  129. that.$emit('ok');
  130. } else {
  131. that.$message.warning(res.message);
  132. }
  133. }).finally(() => {
  134. that.confirmLoading = false;
  135. that.close();
  136. })
  137. }
  138. })
  139. },
  140. handleCancel() {
  141. this.close()
  142. },
  143. }
  144. }
  145. </script>
  146. <style scoped>
  147. </style>