沙钢智慧能源系统前端代码
liriming
2024-10-14 d09108043ffd46e1a1f52227065cebf4bce44db3
提交 | 用户 | 时间
d09108 1 <template>
L 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 * as ScheduleJobApi from '@/api/job'
112 import ScheduleJobForm from './ScheduleJobForm.vue'
113
114 defineOptions({name: 'DataSchedule'})
115
116   const message = useMessage() // 消息弹窗
117   const {t} = useI18n() // 国际化
118
119   const loading = ref(true) // 列表的加载中
120   const total = ref(0) // 列表的总页数
121   const list = ref([]) // 列表的数据
122   const queryParams = reactive({
123     pageNo: 1,
124     pageSize: 10,
125     name: undefined,
126     address: undefined
127   })
128   const queryFormRef = ref() // 搜索的表单
129   const exportLoading = ref(false) // 导出的加载中
130
131   /** 查询列表 */
132   const getList = async () => {
133     loading.value = true
134     try {
135       const page = await ScheduleJobApi.getScheduleJobPage(queryParams)
136       list.value = page.list
137       total.value = page.total
138     } finally {
139       loading.value = false
140     }
141   }
142
143   /** 搜索按钮操作 */
144   const handleQuery = () => {
145     queryParams.pageNo = 1
146     getList()
147   }
148
149   /** 重置按钮操作 */
150   const resetQuery = () => {
151     queryFormRef.value.resetFields()
152     handleQuery()
153   }
154
155   /** 添加/修改操作 */
156   const formRef = ref()
157   const openForm = (type: string, id?: number) => {
158     formRef.value.open(type, id)
159   }
160
161   /** 删除按钮操作 */
162   const handleDelete = async (id: number) => {
163     try {
164       // 删除的二次确认
165       await message.delConfirm()
166       // 发起删除
167       await ScheduleJobApi.deleteScheduleJob(id)
168       message.success(t('common.delSuccess'))
169       // 刷新列表
170       await getList()
171     } catch {
172     }
173   }
174
175   /** 暂停按钮操作 */
176   const handlePause = async (id: number) => {
177     try {
178       // 暂停的二次确认
179       await message.confirm('确认暂停?', '暂停定时')
180       // 发起暂停
181       await ScheduleJobApi.pauseScheduleJob(id)
182       message.success('暂停成功')
183       // 刷新列表
184       await getList()
185     } catch {
186     }
187   }
188
189   /** 恢复按钮操作 */
190   const handleResume = async (id: number) => {
191     try {
192       // 恢复的二次确认
193       await message.confirm('确认恢复?', '恢复定时')
194       // 发起恢复
195       await ScheduleJobApi.resumeScheduleJob(id)
196       message.success('恢复成功')
197       // 刷新列表
198       await getList()
199     } catch {
200     }
201   }
202
203   /** 执行按钮操作 */
204   const handleRun = async (id: number) => {
205     try {
206       // 执行的二次确认
207       await message.confirm('确认执行?', '执行定时')
208       // 发起执行
209       await ScheduleJobApi.runScheduleJob(id)
210       message.success('执行成功')
211       // 刷新列表
212       await getList()
213     } catch {
214     }
215   }
216
217   /** 初始化 **/
218   onMounted(async () => {
219     await getList()
220   })
221 </script>