潘志宝
2024-12-25 291bf570b2106cb99b0e689af7d6ccaacc9e5c1c
提交 | 用户 | 时间
02bbf2 1 <template>
2   <el-drawer
3     v-model="drawer"
4     size="50%"
5     title="调度日志"
6     :direction="direction"
7     :before-close="handleClose"
8   >
9     <!-- 搜索 -->
10     <ContentWrap>
11       <el-form
12         class="-mb-15px"
13         :model="queryParams"
14         ref="queryFormRef"
15         :inline="true"
16         label-width="68px"
17       >
18         <el-form-item>
19           <el-date-picker
20             v-model="queryParams.startTime"
21             format="YYYY-MM-DD HH:mm:00"
22             value-format="YYYY-MM-DD HH:mm:00"
23             type="datetime"
24             placeholder="选择日期时间"
25           />
26         </el-form-item>
27         <el-form-item>
28           <el-date-picker
29             v-model="queryParams.endTime"
30             format="YYYY-MM-DD HH:mm:00"
31             value-format="YYYY-MM-DD HH:mm:00"
32             type="datetime"
33             placeholder="选择日期时间"
34           />
35         </el-form-item>
36         <el-form-item>
37           <el-button @click="handleQuery">
38             <Icon icon="ep:search" class="mr-5px" />
39             搜索
40           </el-button>
41           <el-button @click="resetQuery">
42             <Icon icon="ep:refresh" class="mr-5px" />
43             重置
44           </el-button>
45         </el-form-item>
46       </el-form>
47     </ContentWrap>
48     <!-- 列表 -->
49     <ContentWrap>
50       <el-table v-loading="loading" :data="list">
51         <el-table-column
52           prop="scheduleTime"
53           label="调度时间"
54           header-align="center"
55           align="left"
56           min-width="150"
57         />
58         <el-table-column
59           prop="resultCode"
60           label="结果状态"
61           header-align="center"
62           align="center"
63         />
64         <el-table-column
65           prop="resultData"
66           label="结果数据"
67           header-align="center"
68           align="center"
69           min-width="400"
70         />
71       </el-table>
72       <!-- 分页 -->
73       <Pagination
74         :total="total"
75         v-model:page="queryParams.pageNo"
76         v-model:limit="queryParams.pageSize"
77         @pagination="getList"
78       />
79     </ContentWrap>
80   </el-drawer>
81 </template>
82 <script lang="ts" setup>
83 import type { DrawerProps } from 'element-plus'
84 import * as ScheduleRecordApi from "@/api/model/sche/record";
85 import {reactive, ref} from "vue";
86
87 defineOptions({name: 'RecordList'})
88
89 const message = useMessage() // 消息弹窗
90 const {t} = useI18n() // 国际化
91
92 const drawer = ref(false)
93 const direction = ref<DrawerProps['direction']>('rtl')
94 const loading = ref(true) // 列表的加载中
95 const total = ref(0) // 列表的总页数
96 const list = ref([]) // 列表的数据
97 const queryParams = reactive({
98   pageNo: 1,
99   pageSize: 10,
100   schemeId: undefined,
101   startTime: undefined,
102   endTime: undefined,
103 })
104 const queryFormRef = ref() // 搜索的表单
105 const exportLoading = ref(false) // 导出的加载中
106
107 /** 查询列表 */
108 const getList = async () => {
109   loading.value = true
110   try {
111     const page = await ScheduleRecordApi.getScheduleRecordPage(queryParams)
112     list.value = page.list
113     total.value = page.total
114   } finally {
115     loading.value = false
116   }
117 }
118
119 /** 搜索按钮操作 */
120 const handleQuery = () => {
121   queryParams.pageNo = 1
122   getList()
123 }
124
125 /** 重置按钮操作 */
126 const resetQuery = () => {
127   queryFormRef.value.resetFields()
128   handleQuery()
129 }
130
131 /** 打开弹窗 */
132 const open = async (id?: string) => {
133   resetForm()
134   drawer.value = true
135   queryParams.schemeId = id
136   if (id) {
137     getList()
138   }
139 }
140 defineExpose({open}) // 提供 open 方法,用于打开弹窗
141
142 /** 重置表单 */
143 const resetForm = () => {
144   queryParams.pageNo = 1
145   queryParams.pageSize = 10
146   queryParams.schemeId = ''
147   queryParams.startTime = undefined
148   queryParams.endTime = undefined
149 }
150 const handleClose = (done: () => void) => {
151   drawer.value = false
152 }
153 </script>