潘志宝
2025-02-28 4a859a6d69984c77fa8166255c65f5a94eb0bd71
提交 | 用户 | 时间
3933d8 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="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="publish"
99                     >
100                       <el-button link>发布</el-button>
101                     </el-dropdown-item>
102                   </el-dropdown-menu>
103                 </template>
104               </el-dropdown>
105             </div>
106           </div>
107         </template>
108       </el-table-column>
109     </el-table>
110     <!-- 分页 -->
111     <Pagination
112       v-model:limit="queryParams.limit"
113       v-model:page="queryParams.page"
114       :total="total"
115       @pagination="getList"
116     />
117   </ContentWrap>
118
119   <!-- 表单弹窗:添加/修改 -->
120   <ProjectForm ref="formRef" @success="getList"/>
121   <!-- 关联模型 -->
122   <RelevanceModel ref="relevanceModelRef"/>
123 </template>
124 <script lang="ts" setup>
125   import {dateFormatter} from '@/utils/formatTime'
126   import * as ProjectApi from '@/api/model/matlab/project'
127   import ProjectForm from './MatlabProjectForm.vue'
128   import RelevanceModel from './MatlabProjectModelDialog.vue'
129
130   defineOptions({name: 'MatlabProject'})
131
132   const message = useMessage() // 消息弹窗
133   const {t} = useI18n() // 国际化
134
135   const loading = ref(true) // 列表的加载中
136   const total = ref(0) // 列表的总页数
137   const list = ref([]) // 字典表格数据
138   const queryParams = reactive({
139     page: 1,
140     limit: 10,
141     projectName: '',
142     projectCode: ''
143   })
144   const queryFormRef = ref() // 搜索的表单
145
146   const getList = async () => {
147     loading.value = true
148     try {
149       const data = await ProjectApi.getPage(queryParams)
150       list.value = data.list
151       total.value = data.total
152     } finally {
153       loading.value = false
154     }
155   }
156
157   /** 操作分发 */
158   const handleCommand = (command: string, row) => {
159     switch (command) {
160       case 'publish':
161         publish(row.id,row.projectName)
162         break
163       default:
164         break
165     }
166   }
167
168   // 发布
169   const publish = async (projectId,projectName) => {
170     // 发布的二次确认
171     await message.confirm('确认发布 ' + projectName)
172
173     // 发布
174     await ProjectApi.publish({projectId})
175
176     message.success('发布成功');
177   }
178
179   /** 搜索按钮操作 */
180   const handleQuery = () => {
181     getList()
182   }
183
184   /** 重置按钮操作 */
185   const resetQuery = () => {
186     queryParams.page = 1
187     queryFormRef.value.resetFields()
188     handleQuery()
189   }
190
191   /** 添加/修改操作 */
192   const formRef = ref()
193   const openForm = (type: string, id?: number) => {
194     formRef.value.open(type, id)
195   }
196
197   /** 删除按钮操作 */
198   const handleDelete = async (id: number) => {
199     try {
200       // 删除的二次确认
201       await message.delConfirm()
202       // 发起删除
203       await ProjectApi.deleteProject(id)
204       message.success(t('common.delSuccess'))
205       // 刷新列表
206       await getList()
207     } catch {
208     }
209   }
210
211   // 查看关联模型
212   const relevanceModelRef = ref()
213   const viewRelevanceModel = (id) => {
214     relevanceModelRef.value.open(id)
215   }
216
217   /** 初始化 **/
218   onMounted(async () => {
219     await getList()
220   })
221 </script>