潘志宝
2024-09-14 36730eac964e814a4fc9a0879c499e326fc00ac8
提交 | 用户 | 时间
7462da 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="68px"
10     >
11       <el-form-item label="名称" prop="modulename">
12         <el-input
13           v-model="queryParams.modulename"
14           placeholder="请输入名称"
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="['system:tenant: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="名称" align="center" prop="modulename" />
46       <el-table-column label="类型" align="center" prop="moduletype" />
47       <el-table-column label="周期" align="center" prop="cycle" />
48       <el-table-column label="模块配置" align="center" prop="modulenavconfig" />
49       <el-table-column label="预测时间" align="center" prop="predicttime" />
50       <el-table-column label="采集时间" align="center" prop="collecttime" />
51
52       <el-table-column label="操作" align="center" min-width="110" fixed="right">
53         <template #default="scope">
54           <el-button
55             link
56             type="primary"
57             @click="openForm('update', scope.row.id)"
58             v-hasPermi="['system:tenant:update']"
59           >
60             编辑
61           </el-button>
62           <el-button
63             link
64             type="danger"
65             @click="handleDelete(scope.row.id)"
66             v-hasPermi="['system:tenant:delete']"
67           >
68             删除
69           </el-button>
70         </template>
71       </el-table-column>
72     </el-table>
73     <!-- 分页 -->
74     <Pagination
75       :total="total"
76       v-model:page="queryParams.pageNo"
77       v-model:limit="queryParams.pageSize"
78       @pagination="getList"
79     />
80   </ContentWrap>
81
82   <!-- 表单弹窗:添加/修改 -->
83   <DmModuleForm ref="formRef" @success="getList" />
84
85 </template>
86 <script lang="ts" setup>
87 import DmModuleForm from './DmModuleForm.vue'
88 import * as DmModule from '@/api/model/pre/dm'
89
90 defineOptions({name: 'DataDmModule'})
91
92   const message = useMessage() // 消息弹窗
93   const {t} = useI18n() // 国际化
94
95   const loading = ref(true) // 列表的加载中
96   const total = ref(0) // 列表的总页数
97   const list = ref([]) // 列表的数据
98   const queryParams = reactive({
99     pageNo: 1,
100     pageSize: 10,
101     modulename: undefined,
102   })
103   const queryFormRef = ref() // 搜索的表单
104   const exportLoading = ref(false) // 导出的加载中
105
106   /** 查询列表 */
107   const getList = async () => {
108     loading.value = true
109     try {
110       const page = await DmModule.getDmModulePage(queryParams)
111       list.value = page.list
112       total.value = page.total
113     } finally {
114       loading.value = false
115     }
116   }
117
118   /** 搜索按钮操作 */
119   const handleQuery = () => {
120     queryParams.pageNo = 1
121     getList()
122   }
123
124   /** 重置按钮操作 */
125   const resetQuery = () => {
126     queryFormRef.value.resetFields()
127     handleQuery()
128   }
129
130   /** 添加/修改操作 */
131   const formRef = ref()
132   const openForm = (type: string, id?: number) => {
133     formRef.value.open(type, id)
134   }
135
136   /** 删除按钮操作 */
137   const handleDelete = async (id: number) => {
138     try {
139       // 删除的二次确认
140       await message.delConfirm()
141       // 发起删除
142       await DmModule.deleteDmModule(id)
143       message.success(t('common.delSuccess'))
144       // 刷新列表
145       await getList()
146     } catch {
147     }
148   }
149
150   /** 初始化 **/
151   onMounted(async () => {
152     await getList()
153   })
154 </script>