| 提交 | 用户 | 时间 | ||
| 9ec4bd | 1 | <template> |
| 潘 | 2 | <Dialog v-model="dialogVisible" :title="dialogTitle" width="80%"> |
| 3 | <!-- 搜索工作栏 --> | |
| 4 | <ContentWrap> | |
| 5 | <el-form | |
| 6 | class="-mb-15px" | |
| 7 | :model="queryParams" | |
| 8 | ref="queryFormRef" | |
| 9 | :inline="true" | |
| 10 | label-width="68px" | |
| 11 | > | |
| 12 | <el-form-item prop="startTime"> | |
| 13 | <el-date-picker | |
| 14 | v-model="queryParams.startTime" | |
| 15 | type="datetime" | |
| 16 | value-format="YYYY-MM-DD HH:mm:ss" | |
| 17 | placeholder="选择日期时间"/> | |
| 18 | </el-form-item> | |
| 19 | <el-form-item prop="endTime"> | |
| 20 | <el-date-picker | |
| 21 | v-model="queryParams.endTime" | |
| 22 | type="datetime" | |
| 23 | value-format="YYYY-MM-DD HH:mm:ss" | |
| 24 | placeholder="选择日期时间"/> | |
| 25 | </el-form-item> | |
| 26 | <el-form-item> | |
| 27 | <el-button @click="getList"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> | |
| 28 | </el-form-item> | |
| 29 | </el-form> | |
| 30 | </ContentWrap> | |
| 31 | ||
| 32 | <!-- 列表 --> | |
| 33 | <ContentWrap> | |
| 34 | <el-table | |
| 35 | v-loading="loading" | |
| 36 | :data="list" | |
| 37 | row-key="id" | |
| 38 | border | |
| 39 | > | |
| 40 | <el-table-column label="文件名" header-align="center" align="center"> | |
| 41 | <template #default="scope"> | |
| 42 | <a style="cursor: pointer;color: #409eff" @click="downloadHistory(scope.row.id,scope.row.fileName)">{{ scope.row.fileName }}</a> | |
| 43 | </template> | |
| 44 | </el-table-column> | |
| 45 | <el-table-column prop="remark" label="备注" header-align="center" align="center"/> | |
| 46 | <el-table-column prop="createTime" label="生成时间" :formatter="dateFormatter" header-align="center" align="center" width="200"/> | |
| 47 | </el-table> | |
| 48 | <!-- 分页 --> | |
| 49 | <Pagination | |
| b45bad | 50 | v-model:limit="queryParams.limit" |
| 9ec4bd | 51 | v-model:page="queryParams.page" |
| 潘 | 52 | :total="total" |
| 53 | @pagination="getList" | |
| 54 | /> | |
| 55 | </ContentWrap> | |
| 56 | </Dialog> | |
| 57 | </template> | |
| 58 | <script lang="ts" setup> | |
| 59 | import download from "@/utils/download"; | |
| aff5c9 | 60 | import * as HistoryApi from "@/api/model/mpk/mpkHistory"; |
| 9ec4bd | 61 | import { dateFormatter } from '@/utils/formatTime' |
| 潘 | 62 | |
| 63 | ||
| 64 | const { t } = useI18n() // 国际化 | |
| 65 | const message = useMessage() // 消息弹窗 | |
| 66 | ||
| 67 | const dialogVisible = ref(false) // 弹窗的是否展示 | |
| 68 | const dialogTitle = ref('生成历史') // 弹窗的标题 | |
| 69 | ||
| 70 | const loading = ref(true) // 列表的加载中 | |
| 71 | const total = ref(0) // 列表的总页数 | |
| 72 | const list = ref([]) // 字典表格数据 | |
| 73 | const queryParams = reactive({ | |
| 74 | page: 1, | |
| b45bad | 75 | limit: 10, |
| 9ec4bd | 76 | mdkId: '', |
| 潘 | 77 | startTime: undefined, |
| 78 | endTime: undefined, | |
| 79 | }) | |
| 80 | ||
| 81 | /** 打开弹窗 */ | |
| 82 | const open = async (mdkId: String) => { | |
| 83 | dialogVisible.value = true | |
| 84 | queryParams.mdkId = mdkId; | |
| 85 | queryParams.startTime = undefined; | |
| 86 | queryParams.endTime = undefined; | |
| 87 | getList() | |
| 88 | } | |
| 89 | defineExpose({ open }) // 提供 open 方法，用于打开弹窗 | |
| 90 | ||
| 91 | const getList = async () => { | |
| 92 | loading.value = true | |
| 93 | try { | |
| 94 | const data = await HistoryApi.getPage(queryParams) | |
| 95 | list.value = data.list | |
| 96 | total.value = data.total | |
| 97 | } finally { | |
| 98 | loading.value = false | |
| 99 | } | |
| 100 | } | |
| 101 | ||
| 102 | const downloadHistory = async (id,fileName) => { | |
| 103 | const param = { | |
| 104 | 'id': id, | |
| 105 | } | |
| 106 | const data = await HistoryApi.download(param) | |
| 107 | download.zip(data, fileName) | |
| 108 | } | |
| 109 | </script> | |
