inleft
2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151
commit | author | age
9bcb19 1 <template>
I 2   <a-modal
3     title="编辑定时任务"
4     :width="900"
5     :visible="visible"
6     :confirmLoading="confirmLoading"
7     @ok="handleSubmit"
8     @cancel="handleCancel"
9   >
10     <a-spin :spinning="formLoading">
11       <a-form :form="form">
12
13         <a-form-item
14           style="display: none;"
15         >
16           <a-input v-decorator="['id']" />
17         </a-form-item>
18         <a-form-item
19           style="display: none;"
20         >
21           <a-input v-decorator="['jobStatus']" />
22         </a-form-item>
23
24         <a-form-item
25           label="任务名称"
26           :labelCol="labelCol"
27           :wrapperCol="wrapperCol"
28           has-feedback
29         >
30           <a-input placeholder="请输入任务名称" v-decorator="['timerName', {rules: [{required: true, message: '请输入任务名称!'}]}]" />
31         </a-form-item>
32
33         <a-form-item
34           label="任务class类名"
35           :labelCol="labelCol"
36           :wrapperCol="wrapperCol"
37           has-feedback
38         >
39           <a-select style="width: 100%" placeholder="请选择任务class类名" v-decorator="['actionClass', {rules: [{ required: true, message: '请选择任务class类名!' }]}]" >
40             <a-select-option v-for="(item,index) in actionClassData" :key="index" :value="item" >{{ item }}</a-select-option>
41           </a-select>
42         </a-form-item>
43
44         <a-form-item
45           :labelCol="labelCol"
46           :wrapperCol="wrapperCol"
47           label="任务表达式"
48         >
49           <a-input placeholder="请输入任务表达式" v-decorator="['cron', {rules: [{required: true, message: '请输入任务表达式!'}]}]" />
50         </a-form-item>
51
52         <a-form-item
53           label="备注"
54           :labelCol="labelCol"
55           :wrapperCol="wrapperCol"
56           has-feedback
57         >
58           <a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea>
59         </a-form-item>
60
61       </a-form>
62
63     </a-spin>
64   </a-modal>
65 </template>
66
67 <script>
68   import { sysTimersEdit, sysTimersGetActionClasses } from '@/api/modular/system/timersManage'
69
70   export default {
71     data () {
72       return {
73         labelCol: {
74           xs: { span: 24 },
75           sm: { span: 5 }
76         },
77         wrapperCol: {
78           xs: { span: 24 },
79           sm: { span: 15 }
80         },
81         visible: false,
82         confirmLoading: false,
83         actionClassData: [],
84         formLoading: false,
85         form: this.$form.createForm(this)
86       }
87     },
88     methods: {
89       // 初始化方法
90       edit (record) {
91         this.visible = true
92         this.formLoading = true
93         this.getActionClass()
94         setTimeout(() => {
95           this.form.setFieldsValue(
96             {
97               id: record.id,
98               timerName: record.timerName,
99               actionClass: record.actionClass,
100               cron: record.cron,
101               jobStatus: record.jobStatus,
102               remark: record.remark
103             }
104           )
105         }, 100)
106       },
107
108       /**
109        * 获取选择器下拉框数据
110        */
111       getActionClass () {
112         sysTimersGetActionClasses().then((res) => {
113           this.formLoading = false
114           if (res.success) {
115             this.actionClassData = res.data
116           } else {
117             this.$message.error('获取选择器下拉框数据')
118           }
119         })
120       },
121
122       handleSubmit () {
123         const { form: { validateFields } } = this
124         this.confirmLoading = true
125         validateFields((errors, values) => {
126           if (!errors) {
127             sysTimersEdit(values).then((res) => {
128               if (res.success) {
129                 this.$message.success('编辑成功')
130                 this.visible = false
131                 this.confirmLoading = false
132                 this.$emit('ok', values)
133                 this.form.resetFields()
134               } else {
135                 this.$message.error('编辑失败:' + res.message)
136               }
137             }).finally((res) => {
138               this.confirmLoading = false
139             })
140           } else {
141             this.confirmLoading = false
142           }
143         })
144       },
145       handleCancel () {
146         this.form.resetFields()
147         this.visible = false
148       }
149     }
150   }
151 </script>