潘志宝
2024-12-12 6e78d5ae3ccf8c592ba6c698c2a6e90587d7a7f6
提交 | 用户 | 时间
9ec4bd 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="projectName">
12         <el-input
13           v-model="queryParams.projectName"
14           placeholder="请输入项目名称"
15           clearable
16           class="!w-240px"
17         />
18       </el-form-item>
19       <el-form-item label="项目编码" prop="projectCode">
20         <el-input
21           v-model="queryParams.projectCode"
22           placeholder="请输入项目编码"
23           clearable
24           class="!w-240px"
25         />
26       </el-form-item>
27       <el-form-item>
28         <el-button @click="handleQuery">
29           <Icon icon="ep:search" class="mr-5px"/>
30           搜索
31         </el-button>
32         <el-button @click="resetQuery">
33           <Icon icon="ep:refresh" class="mr-5px"/>
34           重置
35         </el-button>
36         <el-button
37           type="primary"
38           plain
39           @click="openForm('create')"
40           v-hasPermi="['mpk:project:create']"
41         >
42           <Icon icon="ep:plus" class="mr-5px"/>
43           新增
44         </el-button>
45       </el-form-item>
46     </el-form>
47   </ContentWrap>
48
49   <!-- 列表 -->
50   <ContentWrap>
51     <el-table
52       v-loading="loading"
53       :data="list"
54       row-key="id"
55     >
56       <el-table-column prop="projectName" label="项目名称"/>
57       <el-table-column prop="projectCode" label="项目编码"/>
58       <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter" width="300px"/>
59       <el-table-column label="操作" align="center" width="300px">
60         <template #default="scope">
61           <div class="flex items-center justify-center">
62             <el-button
63               link
64               type="primary"
65               @click="openForm('update', scope.row.id)"
66               v-hasPermi="['mpk:project:update']"
67             >
68               <Icon icon="ep:edit"/>
69               修改
70             </el-button>
71             <el-button
72               link
73               type="danger"
74               @click="handleDelete(scope.row.id)"
75               v-hasPermi="['mpk:project:delete']"
76             >
77               <Icon icon="ep:delete"/>
78               删除
79             </el-button>
80             <el-button
81               link
82               type="primary"
83               @click="viewRelevanceModel(scope.row.id)"
84             >
85               <Icon icon="ep:link"/>
86               查看关联模型
87             </el-button>
88             <div class="pl-12px">
89               <el-dropdown @command="(command) => handleCommand(command, scope.row)"
90                            trigger="click">
91                 <el-button type="primary" link>
92                   <Icon icon="ep:d-arrow-right"/>
93                   更多
94                 </el-button>
95                 <template #dropdown>
96                   <el-dropdown-menu>
97                     <el-dropdown-item
98                       command="packageModel"
99                     >
100                       <el-button link>打包</el-button>
101                     </el-dropdown-item>
102                     <el-dropdown-item
103                     >
104                       <router-link :to="'/project/package/history/' + scope.row.id">
105                         <el-button link>打包历史</el-button>
106                       </router-link>
107                     </el-dropdown-item>
108                   </el-dropdown-menu>
109                 </template>
110               </el-dropdown>
111             </div>
112           </div>
113         </template>
114       </el-table-column>
115     </el-table>
116     <!-- 分页 -->
117     <Pagination
b45bad 118       v-model:limit="queryParams.limit"
9ec4bd 119       v-model:page="queryParams.page"
120       :total="total"
121       @pagination="getList"
122     />
123   </ContentWrap>
124
125   <!-- 表单弹窗:添加/修改 -->
126   <ProjectForm ref="formRef" @success="getList"/>
127   <ProjectPackage ref="projectPackageRef"/>
128   <RelevanceModel ref="relevanceModelRef"/>
129 </template>
130 <script lang="ts" setup>
131   import {dateFormatter} from '@/utils/formatTime'
aff5c9 132   import * as ProjectApi from '@/api/model/mpk/project'
9ec4bd 133   import ProjectForm from './ProjectForm.vue'
134   import ProjectPackage from './ProjectPackage.vue'
135   import RelevanceModel from './ProjectPackageModelDialog.vue'
d6b754 136   import * as projectApi from "@/api/model/mpk/project";
9ec4bd 137
138   defineOptions({name: 'MpkProject'})
139
140   const message = useMessage() // 消息弹窗
141   const {t} = useI18n() // 国际化
142
143   const loading = ref(true) // 列表的加载中
144   const total = ref(0) // 列表的总页数
145   const list = ref([]) // 字典表格数据
146   const queryParams = reactive({
147     page: 1,
b45bad 148     limit: 10,
9ec4bd 149     projectName: '',
150     projectCode: ''
151   })
152   const queryFormRef = ref() // 搜索的表单
153
154   const getList = async () => {
155     loading.value = true
156     try {
157       const data = await ProjectApi.getPage(queryParams)
158       list.value = data.list
159       total.value = data.total
160     } finally {
161       loading.value = false
162     }
163   }
164
165   /** 操作分发 */
166   const handleCommand = (command: string, row) => {
167     switch (command) {
168       case 'packageModel':
d6b754 169         packageModel(row.id, row.projectName, row.projectCode)
9ec4bd 170         break
171       default:
172         break
173     }
174   }
175
176   //打包
177   const projectPackageRef = ref();
d6b754 178   const packageModel = async (projectId, projectName, projectCode) => {
D 179     //校验是否关联模型
180     const data = await projectApi.getProjectModel({page: 1, pageSize: 1, projectId: projectId})
181     if (data.total === 0) {
9ec4bd 182       message.error("请先为项目添加模型!")
d6b754 183       return
9ec4bd 184     }
d6b754 185     projectPackageRef.value.open(projectId, projectName, projectCode);
9ec4bd 186   }
187
188   /** 搜索按钮操作 */
189   const handleQuery = () => {
190     getList()
191   }
192
193   /** 重置按钮操作 */
194   const resetQuery = () => {
195     queryParams.page = 1
196     queryFormRef.value.resetFields()
197     handleQuery()
198   }
199
200   /** 添加/修改操作 */
201   const formRef = ref()
202   const openForm = (type: string, id?: number) => {
203     formRef.value.open(type, id)
204   }
205
206   /** 删除按钮操作 */
207   const handleDelete = async (id: number) => {
208     try {
209       // 删除的二次确认
210       await message.delConfirm()
211       // 发起删除
212       await ProjectApi.deleteProject(id)
213       message.success(t('common.delSuccess'))
214       // 刷新列表
215       await getList()
216     } catch {
217     }
218   }
219
220   // 查看关联模型
221   const relevanceModelRef = ref()
222   const viewRelevanceModel = (id) => {
223     relevanceModelRef.value.open('project',id)
224   }
225
226   /** 初始化 **/
227   onMounted(async () => {
228     await getList()
229   })
230 </script>