liriming
2025-03-03 8bb7160c9c4fd7ce5893ee673647b13cc35410ae
提交 | 用户 | 时间
9ec4bd 1 <template>
1e8d99 2   <el-row :gutter="20">
3     <!-- 左侧树 -->
c8674a 4     <el-col :span="3" :xs="24">
1e8d99 5       <ContentWrap class="h-1/1">
6         <el-tree
7           style="max-width: 600px"
8           :data="treeData"
9           :props="treeProps"
10           default-expand-all
11           highlight-current
12           @node-click="handleNodeClick"
9ec4bd 13         />
1e8d99 14       </ContentWrap>
15     </el-col>
c8674a 16     <el-col :span="21" :xs="24">
1e8d99 17       <!-- 搜索工作栏 -->
18       <ContentWrap>
19         <el-form
20           class="-mb-15px"
21           :model="queryParams"
22           ref="queryFormRef"
23           :inline="true"
24           label-width="68px"
ec54c9 25           @submit.prevent
1e8d99 26         >
8ca7ee 27           <el-form-item label="模型名称" prop="pyChineseName">
28             <el-input
29               v-model="queryParams.pyChineseName"
30               placeholder="请输入模型名称"
31               clearable
32               class="!w-240px"
33             />
34           </el-form-item>
35           <el-form-item label="模型文件" prop="pyName">
1e8d99 36             <el-input
37               v-model="queryParams.pyName"
8ca7ee 38               placeholder="请输入模型文件名称"
1e8d99 39               clearable
40               class="!w-240px"
41             />
42           </el-form-item>
43           <el-form-item>
44             <el-button @click="handleQuery">
45               <Icon icon="ep:search" class="mr-5px"/>
46               搜索
9ec4bd 47             </el-button>
1e8d99 48             <el-button @click="resetQuery">
49               <Icon icon="ep:refresh" class="mr-5px"/>
50               重置
51             </el-button>
52             <div class="ml-12px">
53               <router-link :to="'/file/form'">
54                 <el-button type="primary" plain v-hasPermi="['mpk:file:create']">
55                   <Icon icon="ep:plus" class="mr-5px"/>新增</el-button>
56               </router-link>
9ec4bd 57             </div>
58
1e8d99 59           </el-form-item>
60         </el-form>
61       </ContentWrap>
62
63       <!-- 列表 -->
64       <ContentWrap>
65         <el-table
66           v-loading="loading"
67           :data="list"
68           row-key="id"
69         >
c8674a 70           <el-table-column prop="pyChineseName" label="模型名称" header-align="center" align="center" min-width="100" />
D 71           <el-table-column prop="pyName" label="模型文件" header-align="center" align="center" min-width="200"/>
1e8d99 72           <el-table-column prop="pyType" label="模型类型" :formatter="(r,c,v) => getDictLabel(DICT_TYPE.MODEL_TYPE,v)"/>
c8674a 73 <!--          <el-table-column prop="menuName" label="所属菜单" min-width="120px"/>-->
D 74 <!--          <el-table-column prop="groupName" label="所属组" min-width="120px"/>-->
75 <!--          <el-table-column prop="remark" label="备注" min-width="100px"/>-->
76           <el-table-column prop="createDate" label="创建时间" align="center" :formatter="dateFormatter" width="180px"/>
77           <el-table-column prop="updateDate" label="修改时间" align="center" :formatter="dateFormatter" width="180px"/>
1e8d99 78           <el-table-column label="操作" align="center" width="200px">
79             <template #default="scope">
80               <div class="flex items-center justify-center">
81                 <router-link :to="'/file/form/' + scope.row.id">
82                   <el-button type="primary" link v-hasPermi="['mpk:file:update']">
83                     <Icon icon="ep:edit"/>修改
84                   </el-button>
85                 </router-link>
86                 <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['mpk:file:delete']">
87                   <Icon icon="ep:delete"/>删除
88                 </el-button>
89                 <div class="pl-12px">
90                   <el-dropdown @command="(command) => handleCommand(command, scope.row)" trigger="click">
91                     <el-button type="primary" link>
92                       <Icon icon="ep:d-arrow-right" /> 更多
93                     </el-button>
94                     <template #dropdown>
95                       <el-dropdown-menu>
96                         <el-dropdown-item
97                           command="generatorCode"
98                         >
99                           生成代码
100                         </el-dropdown-item>
101                         <el-dropdown-item
102                           command="generatorHistory"
103                         >
104                           生成历史
105                         </el-dropdown-item>
106                         <el-dropdown-item
107                           command="mpkRunDialog"
108                         >
109                           运行
110                         </el-dropdown-item>
111                       </el-dropdown-menu>
112                     </template>
113                   </el-dropdown>
114                 </div>
115               </div>
116             </template>
117           </el-table-column>
118         </el-table>
119         <!-- 分页 -->
120         <Pagination
b45bad 121           v-model:limit="queryParams.limit"
1e8d99 122           v-model:page="queryParams.page"
123           :total="total"
124           @pagination="getList"
125         />
126       </ContentWrap>
127
128       <MpkGenerator ref="mpkGenerator"/>
129       <GeneratorCodeHistory ref="generatorCodeHistory"/>
130       <MpkRun ref="mpkRun"/>
131     </el-col>
132   </el-row>
9ec4bd 133 </template>
134 <script lang="ts" setup>
135   import {dateFormatter} from '@/utils/formatTime'
aff5c9 136   import * as MpkApi from '@/api/model/mpk/mpk'
1e8d99 137   import * as MpkMenuApi from '@/api/model/mpk/menu'
9ec4bd 138   import MpkGenerator from './MpkGenerator.vue'
139   import GeneratorCodeHistory from './MpkGeneratorHistory.vue'
140   import MpkRun from './MpkRun.vue'
141   import { DICT_TYPE, getDictLabel } from '@/utils/dict'
1e8d99 142   import {ElTree} from "element-plus";
9ec4bd 143
144   defineOptions({name: 'MpkFile'})
145
146   const message = useMessage() // 消息弹窗
147   const {t} = useI18n() // 国际化
1e8d99 148
149   const treeProps = {
150     children: 'children',
151     label: 'label',
152   }
9ec4bd 153
154   const loading = ref(true) // 列表的加载中
155   const total = ref(0) // 列表的总页数
156   const list = ref([]) // 字典表格数据
157   const queryParams = reactive({
158     page: 1,
b45bad 159     limit: 10,
8ca7ee 160     pyChineseName: '',
1e8d99 161     pyName: '',
162     label: ''
9ec4bd 163   })
164   const queryFormRef = ref() // 搜索的表单
1e8d99 165   const treeData = ref([])
9ec4bd 166
167   const getList = async () => {
168     loading.value = true
169     try {
170       const data = await MpkApi.getPage(queryParams)
171       list.value = data.list
172       total.value = data.total
173     } finally {
174       loading.value = false
175     }
1e8d99 176   }
177
178   const getTree = async () => {
179     const data = await MpkMenuApi.getTree()
180     treeData.value = data
9ec4bd 181   }
182
183   /** 操作分发 */
184   const handleCommand = (command: string, row) => {
185     switch (command) {
186       case 'generatorCode':
187         generatorCode(row.id,row.pyName)
188         break
189       case 'generatorHistory':
190         generatorHistory(row.id)
191         break
192       case 'mpkRunDialog':
193         mpkRunDialog(row)
194         break
195       default:
196         break
197     }
198   }
199
200   const mpkGenerator = ref();
201   const generatorCode = (id,pyName) => {
202     mpkGenerator.value.open(id,pyName);
203   }
204
205   const generatorCodeHistory = ref();
206   const generatorHistory = (id) => {
207     generatorCodeHistory.value.open(id);
208   }
209
210   const mpkRun = ref();
211   const mpkRunDialog = (row) => {
212     mpkRun.value.open(row);
213   }
214
215   /** 搜索按钮操作 */
216   const handleQuery = () => {
217     getList()
218   }
219
220   /** 重置按钮操作 */
221   const resetQuery = () => {
222     queryParams.page = 1
223     queryFormRef.value.resetFields()
224     handleQuery()
225   }
226
227   /** 删除按钮操作 */
228   const handleDelete = async (id: number) => {
229     try {
230       // 删除的二次确认
231       await message.delConfirm()
232       // 发起删除
233       await MpkApi.deleteMpk(id)
234       message.success(t('common.delSuccess'))
235       // 刷新列表
236       await getList()
237     } catch {
238     }
239   }
240
1e8d99 241   const handleNodeClick = (data: Tree) => {
242     queryParams.label = data.label
243     getList()
244   }
245
9ec4bd 246   onActivated((to) => {
247     getList()
1e8d99 248     getTree()
9ec4bd 249   })
250
251   /** 初始化 **/
252   onMounted(async () => {
253     await getList()
1e8d99 254     await getTree()
9ec4bd 255   })
256 </script>