houzhongjian
2024-12-04 bb203eb72ee4604be8c9272cc583ecb9e393aeb8
提交 | 用户 | 时间
6e7f22 1 <template>
2   <!-- 搜索 -->
3   <ContentWrap>
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
ec54c9 10       @submit.prevent
6e7f22 11     >
12       <el-form-item label="名称" prop="itemtypename">
13         <el-input
14           v-model="queryParams.itemtypename"
15           placeholder="请输入名称"
16           clearable
17           @keyup.enter="handleQuery"
18           class="!w-240px"
19         />
20       </el-form-item>
21       <el-form-item>
22         <el-button @click="handleQuery">
23           <Icon icon="ep:search" class="mr-5px" />
24           搜索
25         </el-button>
26         <el-button @click="resetQuery">
27           <Icon icon="ep:refresh" class="mr-5px" />
28           重置
29         </el-button>
30         <el-button
31           type="primary"
32           plain
33           @click="openForm('create')"
34           v-hasPermi="['model:pre-type:create']"
35         >
36           <Icon icon="ep:plus" class="mr-5px" />
37           新增
38         </el-button>
39       </el-form-item>
40     </el-form>
41   </ContentWrap>
42
43   <!-- 列表 -->
44   <ContentWrap>
45     <el-table v-loading="loading" :data="list">
46       <el-table-column label="名称" header-align="center" align="left" min-width="100" prop="itemtypename" />
47       <el-table-column label="类名" header-align="center" align="left" min-width="300" prop="itemclasstype" />
48       <el-table-column label="程序集" header-align="center" align="left" min-width="300" prop="assemblyname" />
49
50       <el-table-column label="操作" align="center" min-width="110" fixed="right">
51         <template #default="scope">
52           <el-button
53             link
54             type="primary"
55             @click="openForm('update', scope.row.id)"
56             v-hasPermi="['model:pre-type:update']"
57           >
58             编辑
59           </el-button>
60           <el-button
61             link
62             type="danger"
63             @click="handleDelete(scope.row.id)"
64             v-hasPermi="['model:pre-type:delete']"
65           >
66             删除
67           </el-button>
68         </template>
69       </el-table-column>
70     </el-table>
71     <!-- 分页 -->
72     <Pagination
73       :total="total"
74       v-model:page="queryParams.pageNo"
75       v-model:limit="queryParams.pageSize"
76       @pagination="getList"
77     />
78   </ContentWrap>
79
80   <!-- 表单弹窗:添加/修改 -->
81   <MmItemTypeForm ref="formRef" @success="getList" />
82
83 </template>
84 <script lang="ts" setup>
85 import MmItemTypeForm from './ItemTypeForm.vue'
7b1ce6 86 import * as MmItemType from '@/api/model/pre/type'
6e7f22 87
88 defineOptions({name: 'DataMmItemType'})
89
90   const message = useMessage() // 消息弹窗
91   const {t} = useI18n() // 国际化
92
93   const loading = ref(true) // 列表的加载中
94   const total = ref(0) // 列表的总页数
95   const list = ref([]) // 列表的数据
96   const queryParams = reactive({
97     pageNo: 1,
98     pageSize: 10,
99     itemtypename: undefined,
100   })
101   const queryFormRef = ref() // 搜索的表单
102   const exportLoading = ref(false) // 导出的加载中
103
104   /** 查询列表 */
105   const getList = async () => {
106     loading.value = true
107     try {
108       const page = await MmItemType.getMmItemTypePage(queryParams)
109       list.value = page.list
110       total.value = page.total
111     } finally {
112       loading.value = false
113     }
114   }
115
116   /** 搜索按钮操作 */
117   const handleQuery = () => {
118     queryParams.pageNo = 1
119     getList()
120   }
121
122   /** 重置按钮操作 */
123   const resetQuery = () => {
124     queryFormRef.value.resetFields()
125     handleQuery()
126   }
127
128   /** 添加/修改操作 */
129   const formRef = ref()
130   const openForm = (type: string, id?: number) => {
131     formRef.value.open(type, id)
132   }
133
134   /** 删除按钮操作 */
135   const handleDelete = async (id: number) => {
136     try {
137       // 删除的二次确认
138       await message.delConfirm()
139       // 发起删除
140       await MmItemType.deleteMmItemType(id)
141       message.success(t('common.delSuccess'))
142       // 刷新列表
143       await getList()
144     } catch {
145     }
146   }
147
148   /** 初始化 **/
149   onMounted(async () => {
150     await getList()
151   })
152 </script>