潘志宝
2024-11-14 da47a3349dcfd87db23ab8e64fbf35fe1aea5685
提交 | 用户 | 时间
39f3e9 1 <template>
2   <!-- 搜索 -->
3   <ContentWrap>
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="80px"
10     >
11       <el-form-item label="bean名称" prop="beanName">
12         <el-input
13           v-model="queryParams.beanName"
14           placeholder="请输入bean名称"
15           clearable
16           @keyup.enter="handleQuery"
17           class="!w-240px"
18         />
19       </el-form-item>
20       <el-form-item>
21         <el-button @click="handleQuery">
22           <Icon icon="ep:search" class="mr-5px" />
23           搜索
24         </el-button>
25         <el-button @click="resetQuery">
26           <Icon icon="ep:refresh" class="mr-5px" />
27           重置
28         </el-button>
29         <el-button
30           type="primary"
31           plain
32           @click="openForm('create')"
33           v-hasPermi="['data:schedule:create']"
34         >
35           <Icon icon="ep:plus" class="mr-5px" />
36           新增
37         </el-button>
38       </el-form-item>
39     </el-form>
40   </ContentWrap>
41
42   <!-- 列表 -->
43   <ContentWrap>
44     <el-table v-loading="loading" :data="list">
45       <el-table-column label="bean名称" align="center" prop="beanName" />
46       <el-table-column label="参数" align="center" prop="params" />
47       <el-table-column label="cron表达式" align="center" prop="cronExpression" />
48       <el-table-column label="备注" align="center" prop="remark" />
49       <el-table-column label="状态" align="center" prop="status" >
50         <template #default="scope">
51           <el-tag v-if="scope.row.status === 1" size="small">正常</el-tag>
52           <el-tag v-else size="small" type="danger">暂停</el-tag>
53         </template>
54       </el-table-column>
55       <el-table-column label="操作" align="center" min-width="110" fixed="right">
56         <template #default="scope">
57           <el-button
58             link
59             type="primary"
60             @click="openForm('update', scope.row.id)"
61             v-hasPermi="['data:schedule:update']"
62           >
63             编辑
64           </el-button>
65           <el-button
66             link
67             type="danger"
68             @click="handleDelete(scope.row.id)"
69             v-hasPermi="['data:schedule:delete']"
70           >
71             删除
72           </el-button>
73           <el-button
74             link
75             type="primary"
76             @click="handlePause(scope.row.id)"
77           >
78             暂停
79           </el-button>
80           <el-button
81             link
82             type="primary"
83             @click="handleResume(scope.row.id)"
84           >
85             恢复
86           </el-button>
87           <el-button
88             link
89             type="primary"
90             @click="handleRun(scope.row.id)"
91           >
92             执行
93           </el-button>
94         </template>
95       </el-table-column>
96     </el-table>
97     <!-- 分页 -->
98     <Pagination
99       :total="total"
100       v-model:page="queryParams.pageNo"
101       v-model:limit="queryParams.pageSize"
102       @pagination="getList"
103     />
104   </ContentWrap>
105
106   <!-- 表单弹窗:添加/修改 -->
107   <ScheduleJobForm ref="formRef" @success="getList" />
108
109 </template>
110 <script lang="ts" setup>
111   import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
112   import {dateFormatter} from '@/utils/formatTime'
113   import download from '@/utils/download'
114   import * as ScheduleJobApi from '@/api/data/job'
115   import ScheduleJobForm from './ScheduleJobForm.vue'
116
117   defineOptions({name: 'DataSchedule'})
118
119   const message = useMessage() // 消息弹窗
120   const {t} = useI18n() // 国际化
121
122   const loading = ref(true) // 列表的加载中
123   const total = ref(0) // 列表的总页数
124   const list = ref([]) // 列表的数据
125   const queryParams = reactive({
126     pageNo: 1,
127     pageSize: 10,
128     name: undefined,
129     address: undefined
130   })
131   const queryFormRef = ref() // 搜索的表单
132   const exportLoading = ref(false) // 导出的加载中
133
134   /** 查询列表 */
135   const getList = async () => {
136     loading.value = true
137     try {
138       const page = await ScheduleJobApi.getScheduleJobPage(queryParams)
139       list.value = page.list
140       total.value = page.total
141     } finally {
142       loading.value = false
143     }
144   }
145
146   /** 搜索按钮操作 */
147   const handleQuery = () => {
148     queryParams.pageNo = 1
149     getList()
150   }
151
152   /** 重置按钮操作 */
153   const resetQuery = () => {
154     queryFormRef.value.resetFields()
155     handleQuery()
156   }
157
158   /** 添加/修改操作 */
159   const formRef = ref()
160   const openForm = (type: string, id?: number) => {
161     formRef.value.open(type, id)
162   }
163
164   /** 删除按钮操作 */
165   const handleDelete = async (id: number) => {
166     try {
167       // 删除的二次确认
168       await message.delConfirm()
169       // 发起删除
170       await ScheduleJobApi.deleteScheduleJob(id)
171       message.success(t('common.delSuccess'))
172       // 刷新列表
173       await getList()
174     } catch {
175     }
176   }
177
178   /** 暂停按钮操作 */
179   const handlePause = async (id: number) => {
180     try {
181       // 暂停的二次确认
182       await message.confirm('确认暂停?', '暂停定时')
183       // 发起暂停
184       await ScheduleJobApi.pauseScheduleJob(id)
185       message.success('暂停成功')
186       // 刷新列表
187       await getList()
188     } catch {
189     }
190   }
191
192   /** 恢复按钮操作 */
193   const handleResume = async (id: number) => {
194     try {
195       // 恢复的二次确认
196       await message.confirm('确认恢复?', '恢复定时')
197       // 发起恢复
198       await ScheduleJobApi.resumeScheduleJob(id)
199       message.success('恢复成功')
200       // 刷新列表
201       await getList()
202     } catch {
203     }
204   }
205
206   /** 执行按钮操作 */
207   const handleRun = async (id: number) => {
208     try {
209       // 执行的二次确认
210       await message.confirm('确认执行?', '执行定时')
211       // 发起执行
212       await ScheduleJobApi.runScheduleJob(id)
213       message.success('执行成功')
214       // 刷新列表
215       await getList()
216     } catch {
217     }
218   }
219
220   /** 初始化 **/
221   onMounted(async () => {
222     await getList()
223   })
224 </script>