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