dengzedong
2024-09-18 7767e500607c8a47d14728f9fc61952e824c8acc
提交 | 用户 | 时间
9c91ad 1 <template>
D 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="pyName">
12         <el-input
13           v-model="queryParams.pyName"
14           placeholder="请输入模型名称"
15           clearable
16           class="!w-240px"
17         />
18       </el-form-item>
19       <el-form-item>
20         <el-button @click="handleQuery">
21           <Icon icon="ep:search" class="mr-5px"/>
22           搜索
23         </el-button>
24         <el-button @click="resetQuery">
25           <Icon icon="ep:refresh" class="mr-5px"/>
26           重置
27         </el-button>
7767e5 28         <div class="ml-12px">
D 29           <router-link :to="'/mpk/form'">
30             <el-button type="primary" plain v-hasPermi="['mpk:create']">
31               <Icon icon="ep:plus" class="mr-5px"/>新增</el-button>
32           </router-link>
33         </div>
34
9c91ad 35       </el-form-item>
D 36     </el-form>
37   </ContentWrap>
38
39   <!-- 列表 -->
40   <ContentWrap>
41     <el-table
42       v-loading="loading"
43       :data="list"
44       row-key="id"
45     >
7767e5 46       <el-table-column prop="pyChineseName" label="模型中文名称"/>
9c91ad 47       <el-table-column prop="pyName" label="模型名称"/>
7767e5 48       <el-table-column prop="pyType" label="模型类型" :formatter="(r,c,v) => getDictLabel(DICT_TYPE.MODEL_TYPE,v)"/>
D 49       <el-table-column prop="menuName" label="所属菜单" width="120px"/>
50       <el-table-column prop="groupName" label="所属组" width="120px"/>
51       <el-table-column prop="remark" label="备注" width="200px"/>
9c91ad 52       <el-table-column prop="createDate" label="创建时间" :formatter="dateFormatter" width="170px"/>
D 53       <el-table-column label="操作" align="center" width="200px">
54         <template #default="scope">
55           <div class="flex items-center justify-center">
7767e5 56             <router-link :to="'/mpk/form/' + scope.row.id">
D 57               <el-button type="primary" link v-hasPermi="['mpk:update']">
58                 <Icon icon="ep:edit"/>修改
59               </el-button>
60             </router-link>
9c91ad 61             <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['mpk:delete']">
D 62               <Icon icon="ep:delete"/>删除
63             </el-button>
64             <div class="pl-12px">
65               <el-dropdown @command="(command) => handleCommand(command, scope.row)" trigger="click">
66                 <el-button type="primary" link>
67                   <Icon icon="ep:d-arrow-right" /> 更多
68                 </el-button>
69                 <template #dropdown>
70                   <el-dropdown-menu>
71                     <el-dropdown-item
72                       command="generatorCode"
73                     >
74                       生成代码
75                     </el-dropdown-item>
76                     <el-dropdown-item
77                       command="generatorHistory"
78                     >
79                       生成历史
80                     </el-dropdown-item>
81                     <el-dropdown-item
82                       command="mpkRunDialog"
83                     >
84                       运行
85                     </el-dropdown-item>
86                   </el-dropdown-menu>
87                 </template>
88               </el-dropdown>
89             </div>
90           </div>
91         </template>
92       </el-table-column>
93     </el-table>
94     <!-- 分页 -->
95     <Pagination
96       v-model:limit="queryParams.pageSize"
97       v-model:page="queryParams.page"
98       :total="total"
99       @pagination="getList"
100     />
101   </ContentWrap>
102
103   <MpkGenerator ref="mpkGenerator"/>
104   <GeneratorCodeHistory ref="generatorCodeHistory"/>
105   <MpkRun ref="mpkRun"/>
106 </template>
107 <script lang="ts" setup>
108   import {dateFormatter} from '@/utils/formatTime'
109   import * as MpkApi from '@/api/mpk/mpk'
110   import MpkGenerator from './MpkGenerator.vue'
111   import GeneratorCodeHistory from './MpkGeneratorHistory.vue'
112   import MpkRun from './MpkRun.vue'
113   import * as UserApi from "@/api/system/user";
7767e5 114   import { DICT_TYPE, getDictLabel } from '@/utils/dict'
D 115   import {useAppStoreWithOut} from "@/store/modules/app";
9c91ad 116
D 117   defineOptions({name: 'Mpk'})
118
119   const message = useMessage() // 消息弹窗
120   const {t} = useI18n() // 国际化
121
122   const loading = ref(true) // 列表的加载中
123   const total = ref(0) // 列表的总页数
124   const list = ref([]) // 字典表格数据
125   const queryParams = reactive({
126     page: 1,
127     pageSize: 10,
128     pyName: ''
129   })
130   const queryFormRef = ref() // 搜索的表单
131
132   const getList = async () => {
133     loading.value = true
134     try {
135       const data = await MpkApi.getPage(queryParams)
136       list.value = data.list
137       total.value = data.total
138     } finally {
139       loading.value = false
140     }
141   }
142
143   /** 操作分发 */
144   const handleCommand = (command: string, row) => {
145     switch (command) {
146       case 'generatorCode':
147         generatorCode(row.id,row.pyName)
148         break
149       case 'generatorHistory':
150         generatorHistory(row.id)
151         break
152       case 'mpkRunDialog':
153         mpkRunDialog(row)
154         break
155       default:
156         break
157     }
158   }
159
160   const mpkGenerator = ref();
161   const generatorCode = (id,pyName) => {
162     mpkGenerator.value.open(id,pyName);
163   }
164
165   const generatorCodeHistory = ref();
166   const generatorHistory = (id) => {
167     generatorCodeHistory.value.open(id);
168   }
169
170   const mpkRun = ref();
171   const mpkRunDialog = (row) => {
172     mpkRun.value.open(row);
173   }
174
175   /** 搜索按钮操作 */
176   const handleQuery = () => {
177     getList()
178   }
179
180   /** 重置按钮操作 */
181   const resetQuery = () => {
182     queryParams.page = 1
183     queryFormRef.value.resetFields()
184     handleQuery()
185   }
186
187   /** 删除按钮操作 */
188   const handleDelete = async (id: number) => {
189     try {
190       // 删除的二次确认
191       await message.delConfirm()
192       // 发起删除
193       await MpkApi.deleteMpk(id)
194       message.success(t('common.delSuccess'))
195       // 刷新列表
196       await getList()
197     } catch {
198     }
199   }
200
7767e5 201   onActivated((to) => {
D 202     getList()
203   })
204
9c91ad 205   /** 初始化 **/
D 206   onMounted(async () => {
207     await getList()
208   })
209 </script>