沙钢智慧能源系统前端代码
liriming
2024-10-14 73c154cba6f95745bdfde79508b7e624f083f838
提交 | 用户 | 时间
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')"
73c154 33           v-hasPermi="['shasteel:schedule:create']"
d09108 34         >
L 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)"
73c154 61             v-hasPermi="['shasteel:schedule:update']"
d09108 62           >
L 63             编辑
64           </el-button>
65           <el-button
66             link
67             type="danger"
68             @click="handleDelete(scope.row.id)"
73c154 69             v-hasPermi="['shasteel:schedule:delete']"
d09108 70           >
L 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 {
73c154 135       debugger
d09108 136       const page = await ScheduleJobApi.getScheduleJobPage(queryParams)
L 137       list.value = page.list
138       total.value = page.total
139     } finally {
140       loading.value = false
141     }
142   }
143
144   /** 搜索按钮操作 */
145   const handleQuery = () => {
146     queryParams.pageNo = 1
147     getList()
148   }
149
150   /** 重置按钮操作 */
151   const resetQuery = () => {
152     queryFormRef.value.resetFields()
153     handleQuery()
154   }
155
156   /** 添加/修改操作 */
157   const formRef = ref()
158   const openForm = (type: string, id?: number) => {
159     formRef.value.open(type, id)
160   }
161
162   /** 删除按钮操作 */
163   const handleDelete = async (id: number) => {
164     try {
165       // 删除的二次确认
166       await message.delConfirm()
167       // 发起删除
168       await ScheduleJobApi.deleteScheduleJob(id)
169       message.success(t('common.delSuccess'))
170       // 刷新列表
171       await getList()
172     } catch {
173     }
174   }
175
176   /** 暂停按钮操作 */
177   const handlePause = async (id: number) => {
178     try {
179       // 暂停的二次确认
180       await message.confirm('确认暂停?', '暂停定时')
181       // 发起暂停
182       await ScheduleJobApi.pauseScheduleJob(id)
183       message.success('暂停成功')
184       // 刷新列表
185       await getList()
186     } catch {
187     }
188   }
189
190   /** 恢复按钮操作 */
191   const handleResume = async (id: number) => {
192     try {
193       // 恢复的二次确认
194       await message.confirm('确认恢复?', '恢复定时')
195       // 发起恢复
196       await ScheduleJobApi.resumeScheduleJob(id)
197       message.success('恢复成功')
198       // 刷新列表
199       await getList()
200     } catch {
201     }
202   }
203
204   /** 执行按钮操作 */
205   const handleRun = async (id: number) => {
206     try {
207       // 执行的二次确认
208       await message.confirm('确认执行?', '执行定时')
209       // 发起执行
210       await ScheduleJobApi.runScheduleJob(id)
211       message.success('执行成功')
212       // 刷新列表
213       await getList()
214     } catch {
215     }
216   }
217
218   /** 初始化 **/
219   onMounted(async () => {
220     await getList()
221   })
222 </script>