工业互联网平台
查看 | 历史 | 提交 | 提交对比
dongyukun
9 天以前 5f653cd83425db29ccf514e9fd966a90c7eeab32
提交 | 用户 | 时间
e7c126 1 <template>
H 2   <ContentWrap>
3     <!-- 搜索工作栏 -->
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11     #foreach($column in $columns)
12         #if ($column.listOperation)
13             #set ($dictType = $column.dictType)
14             #set ($javaField = $column.javaField)
15             #set ($javaType = $column.javaType)
16             #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
17             #set ($comment = $column.columnComment)
18             #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
19             #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
20                 #set ($dictMethod = "getIntDictOptions")
21             #elseif ($javaType == "String")
22                 #set ($dictMethod = "getStrDictOptions")
23             #elseif ($javaType == "Boolean")
24                 #set ($dictMethod = "getBoolDictOptions")
25             #end
26             #if ($column.htmlType == "input")
27       <el-form-item label="${comment}" prop="${javaField}">
28         <el-input
29           v-model="queryParams.${javaField}"
30           placeholder="请输入${comment}"
31           clearable
32           @keyup.enter="handleQuery"
33           class="!w-240px"
34         />
35       </el-form-item>
36             #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
37       <el-form-item label="${comment}" prop="${javaField}">
38         <el-select
39           v-model="queryParams.${javaField}"
40           placeholder="请选择${comment}"
41           clearable
42           class="!w-240px"
43         >
44                 #if ("" != $dictType)## 设置了 dictType 数据字典的情况
45           <el-option
46             v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
47             :key="dict.value"
48             :label="dict.label"
49             :value="dict.value"
50           />
51                 #else## 未设置 dictType 数据字典的情况
52           <el-option label="请选择字典生成" value="" />
53                 #end
54         </el-select>
55       </el-form-item>
56     #elseif($column.htmlType == "datetime")
57       #if ($column.listOperationCondition != "BETWEEN")## 非范围
58       <el-form-item label="${comment}" prop="${javaField}">
59         <el-date-picker
60           v-model="queryParams.${javaField}"
61           value-format="YYYY-MM-DD"
62           type="date"
63           placeholder="选择${comment}"
64           clearable
65           class="!w-240px"
66         />
67       </el-form-item>
68       #else## 范围
69       <el-form-item label="${comment}" prop="${javaField}">
70         <el-date-picker
71           v-model="queryParams.${javaField}"
72           value-format="YYYY-MM-DD HH:mm:ss"
73           type="daterange"
74           start-placeholder="开始日期"
75           end-placeholder="结束日期"
76           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
77           class="!w-240px"
78         />
79       </el-form-item>
80       #end
81     #end
82     #end
83     #end
84       <el-form-item>
85         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
86         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
87         <el-button
88           type="primary"
89           plain
90           @click="openForm('create')"
91           v-hasPermi="['${permissionPrefix}:create']"
92         >
93           <Icon icon="ep:plus" class="mr-5px" /> 新增
94         </el-button>
95         <el-button
96           type="success"
97           plain
98           @click="handleExport"
99           :loading="exportLoading"
100           v-hasPermi="['${permissionPrefix}:export']"
101         >
102           <Icon icon="ep:download" class="mr-5px" /> 导出
103         </el-button>
104 ## 特殊：树表专属逻辑
105 #if ( $table.templateType == 2 )
106         <el-button type="danger" plain @click="toggleExpandAll">
107           <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
108         </el-button>
109 #end
110       </el-form-item>
111     </el-form>
112   </ContentWrap>
113
114   <!-- 列表 -->
115   <ContentWrap>
116 ## 特殊：主子表专属逻辑
117 #if ( $table.templateType == 11 && $subTables && $subTables.size() > 0 )
118     <el-table
119       v-loading="loading"
120       :data="list"
121       :stripe="true"
122       :show-overflow-tooltip="true"
123       highlight-current-row
124       @current-change="handleCurrentChange"
125     >
126 ## 特殊：树表专属逻辑
127 #elseif ( $table.templateType == 2 )
128     <el-table
129       v-loading="loading"
130       :data="list"
131       :stripe="true"
132       :show-overflow-tooltip="true"
133       row-key="id"
134       :default-expand-all="isExpandAll"
135       v-if="refreshTable"
136     >
137 #else
138     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
139 #end
140 ## 特殊：主子表专属逻辑
141 #if ( $table.templateType == 12 && $subTables && $subTables.size() > 0 )
142       <!-- 子表的列表 -->
143       <el-table-column type="expand">
144         <template #default="scope">
145           <el-tabs model-value="$subClassNameVars.get(0)">
146             #foreach ($subTable in $subTables)
147               #set ($index = $foreach.count - 1)
148               #set ($subClassNameVar = $subClassNameVars.get($index))
149               #set ($subSimpleClassName = $subSimpleClassNames.get($index))
150               #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
151             <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
152               <${subSimpleClassName}List :${subJoinColumn_strikeCase}="scope.row.id" />
153             </el-tab-pane>
154             #end
155           </el-tabs>
156         </template>
157       </el-table-column>
158 #end
159       #foreach($column in $columns)
160       #if ($column.listOperationResult)
161         #set ($dictType=$column.dictType)
162         #set ($javaField = $column.javaField)
163         #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
164         #set ($comment=$column.columnComment)
165         #if ($column.javaType == "LocalDateTime")## 时间类型
166       <el-table-column
167         label="${comment}"
168         align="center"
169         prop="${javaField}"
170         :formatter="dateFormatter"
171         width="180px"
172       />
173         #elseif($column.dictType && "" != $column.dictType)## 数据字典
174       <el-table-column label="${comment}" align="center" prop="${javaField}">
175         <template #default="scope">
176           <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.${column.javaField}" />
177         </template>
178       </el-table-column>
179         #else
180       <el-table-column label="${comment}" align="center" prop="${javaField}" />
181         #end
182       #end
183     #end
184       <el-table-column label="操作" align="center">
185         <template #default="scope">
186           <el-button
187             link
188             type="primary"
189             @click="openForm('update', scope.row.id)"
190             v-hasPermi="['${permissionPrefix}:update']"
191           >
192             编辑
193           </el-button>
194           <el-button
195             link
196             type="danger"
197             @click="handleDelete(scope.row.id)"
198             v-hasPermi="['${permissionPrefix}:delete']"
199           >
200             删除
201           </el-button>
202         </template>
203       </el-table-column>
204     </el-table>
205     <!-- 分页 -->
206     <Pagination
207       :total="total"
208       v-model:page="queryParams.pageNo"
209       v-model:limit="queryParams.pageSize"
210       @pagination="getList"
211     />
212   </ContentWrap>
213
214   <!-- 表单弹窗：添加/修改 -->
215   <${simpleClassName}Form ref="formRef" @success="getList" />
216 ## 特殊：主子表专属逻辑
217 #if ( $table.templateType == 11 && $subTables && $subTables.size() > 0 )
218   <!-- 子表的列表 -->
219   <ContentWrap>
220     <el-tabs model-value="$subClassNameVars.get(0)">
221       #foreach ($subTable in $subTables)
222         #set ($index = $foreach.count - 1)
223         #set ($subClassNameVar = $subClassNameVars.get($index))
224         #set ($subSimpleClassName = $subSimpleClassNames.get($index))
225         #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
226       <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
227         <${subSimpleClassName}List :${subJoinColumn_strikeCase}="currentRow.id" />
228       </el-tab-pane>
229       #end
230     </el-tabs>
231   </ContentWrap>
232 #end
233 </template>
234
235 <script setup lang="ts">
236 import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
237 import { dateFormatter } from '@/utils/formatTime'
238 ## 特殊：树表专属逻辑
239 #if ( $table.templateType == 2 )
240 import { handleTree } from '@/utils/tree'
241 #end
242 import download from '@/utils/download'
243 import { ${simpleClassName}Api, ${simpleClassName}VO } from '@/api/${table.moduleName}/${table.businessName}'
244 import ${simpleClassName}Form from './${simpleClassName}Form.vue'
245 ## 特殊：主子表专属逻辑
246 #if ( $table.templateType != 10 )
247 #foreach ($subSimpleClassName in $subSimpleClassNames)
248 import ${subSimpleClassName}List from './components/${subSimpleClassName}List.vue'
249 #end
250 #end
251
252 /** ${table.classComment} 列表 */
253 defineOptions({ name: '${table.className}' })
254
255 const message = useMessage() // 消息弹窗
256 const { t } = useI18n() // 国际化
257
258 const loading = ref(true) // 列表的加载中
259 const list = ref<${simpleClassName}VO[]>([]) // 列表的数据
260 ## 特殊：树表专属逻辑（树不需要分页接口）
261 #if ( $table.templateType != 2 )
262 const total = ref(0) // 列表的总页数
263 #end
264 const queryParams = reactive({
265 ## 特殊：树表专属逻辑（树不需要分页接口）
266 #if ( $table.templateType != 2 )
267   pageNo: 1,
268   pageSize: 10,
269 #end
270   #foreach ($column in $columns)
271     #if ($column.listOperation)
272       #if ($column.listOperationCondition != 'BETWEEN')
273   $column.javaField: undefined,
274   #end
275       #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
276   $column.javaField: [],
277       #end
278     #end
279   #end
280 })
281 const queryFormRef = ref() // 搜索的表单
282 const exportLoading = ref(false) // 导出的加载中
283
284 /** 查询列表 */
285 const getList = async () => {
286   loading.value = true
287   try {
288 ## 特殊：树表专属逻辑（树不需要分页接口）
289   #if ( $table.templateType == 2 )
290     const data = await ${simpleClassName}Api.get${simpleClassName}List(queryParams)
291     list.value = handleTree(data, 'id', '${treeParentColumn.javaField}')
292   #else
293     const data = await ${simpleClassName}Api.get${simpleClassName}Page(queryParams)
294     list.value = data.list
295     total.value = data.total
296   #end
297   } finally {
298     loading.value = false
299   }
300 }
301
302 /** 搜索按钮操作 */
303 const handleQuery = () => {
304   queryParams.pageNo = 1
305   getList()
306 }
307
308 /** 重置按钮操作 */
309 const resetQuery = () => {
310   queryFormRef.value.resetFields()
311   handleQuery()
312 }
313
314 /** 添加/修改操作 */
315 const formRef = ref()
316 const openForm = (type: string, id?: number) => {
317   formRef.value.open(type, id)
318 }
319
320 /** 删除按钮操作 */
321 const handleDelete = async (id: number) => {
322   try {
323     // 删除的二次确认
324     await message.delConfirm()
325     // 发起删除
326     await ${simpleClassName}Api.delete${simpleClassName}(id)
327     message.success(t('common.delSuccess'))
328     // 刷新列表
329     await getList()
330   } catch {}
331 }
332
333 /** 导出按钮操作 */
334 const handleExport = async () => {
335   try {
336     // 导出的二次确认
337     await message.exportConfirm()
338     // 发起导出
339     exportLoading.value = true
340     const data = await ${simpleClassName}Api.export${simpleClassName}(queryParams)
341     download.excel(data, '${table.classComment}.xls')
342   } catch {
343   } finally {
344     exportLoading.value = false
345   }
346 }
347 ## 特殊：主子表专属逻辑
348 #if ( $table.templateType == 11 )
349
350 /** 选中行操作 */
351 const currentRow = ref({}) // 选中行
352 const handleCurrentChange = (row) => {
353   currentRow.value = row
354 }
355 #end
356 ## 特殊：树表专属逻辑
357 #if ( $table.templateType == 2 )
358
359 /** 展开/折叠操作 */
360 const isExpandAll = ref(true) // 是否展开，默认全部展开
361 const refreshTable = ref(true) // 重新渲染表格状态
362 const toggleExpandAll = async () => {
363   refreshTable.value = false
364   isExpandAll.value = !isExpandAll.value
365   await nextTick()
366   refreshTable.value = true
367 }
368 #end
369
370 /** 初始化 **/
371 onMounted(() => {
372   getList()
373 })
374 </script>