选煤厂安全管理系统前端代码
houzhongjian
2024-11-25 37b2044f04a09e89f82f8484279b5f06b7194481
提交 | 用户 | 时间
37b204 1 <template>
H 2   <!-- 搜索工作栏 -->
3   <ContentWrap>
4     <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
5   </ContentWrap>
6
7   <!-- 列表 -->
8   <ContentWrap>
9     <Table
10       :columns="allSchemas.tableColumns"
11       :data="tableObject.tableList"
12       :loading="tableObject.loading"
13       :pagination="{
14         total: tableObject.total
15       }"
16       v-model:pageSize="tableObject.pageSize"
17       v-model:currentPage="tableObject.currentPage"
18     >
19       <template #action="{ row }">
20         <el-button
21           link
22           type="primary"
23           @click="openDetail(row.id)"
24           v-hasPermi="['system:mail-log:query']"
25         >
26           详情
27         </el-button>
28       </template>
29     </Table>
30   </ContentWrap>
31
32   <!-- 表单弹窗:详情 -->
33   <mail-log-detail ref="detailRef" />
34 </template>
35 <script lang="ts" setup>
36 import { allSchemas } from './log.data'
37 import * as MailLogApi from '@/api/system/mail/log'
38 import MailLogDetail from './MailLogDetail.vue'
39
40 defineOptions({ name: 'SystemMailLog' })
41
42 // tableObject:表格的属性对象,可获得分页大小、条数等属性
43 // tableMethods:表格的操作对象,可进行获得分页、删除记录等操作
44 const { tableObject, tableMethods } = useTable({
45   getListApi: MailLogApi.getMailLogPage // 分页接口
46 })
47 // 获得表格的各种操作
48 const { getList, setSearchParams } = tableMethods
49
50 /** 详情操作 */
51 const detailRef = ref()
52 const openDetail = (id: number) => {
53   detailRef.value.open(id)
54 }
55
56 /** 初始化 **/
57 onMounted(() => {
58   getList()
59 })
60 </script>