工业互联网平台
查看 | 历史 | 提交 | 提交对比
dongyukun
9 天以前 5f653cd83425db29ccf514e9fd966a90c7eeab32
提交 | 用户 | 时间
e7c126 1 <template>
H 2   <div class="app-container">
3     <!-- 搜索工作栏 -->
4     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
5 #foreach($column in $columns)
6 #if ($column.listOperation)
7     #set ($dictType=$column.dictType)
8     #set ($javaField = $column.javaField)
9     #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
10     #set ($comment=$column.columnComment)
11 #if ($column.htmlType == "input")
12       <el-form-item label="${comment}" prop="${javaField}">
13         <el-input v-model="queryParams.${javaField}" placeholder="请输入${comment}" clearable @keyup.enter.native="handleQuery"/>
14       </el-form-item>
15 #elseif ($column.htmlType == "select" || $column.htmlType == "radio")
16       <el-form-item label="${comment}" prop="${javaField}">
17         <el-select v-model="queryParams.${javaField}" placeholder="请选择${comment}" clearable size="small">
18     #if ("" != $dictType)## 设置了 dictType 数据字典的情况
19           <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
20                        :key="dict.value" :label="dict.label" :value="dict.value"/>
21     #else## 未设置 dictType 数据字典的情况
22           <el-option label="请选择字典生成" value="" />
23     #end
24         </el-select>
25       </el-form-item>
26 #elseif($column.htmlType == "datetime")
27     #if ($column.listOperationCondition != "BETWEEN")## 非范围
28       <el-form-item label="${comment}" prop="${javaField}">
29         <el-date-picker clearable v-model="queryParams.${javaField}" type="date" value-format="yyyy-MM-dd" placeholder="选择${comment}" />
30       </el-form-item>
31     #else## 范围
32       <el-form-item label="${comment}" prop="${javaField}">
33         <el-date-picker v-model="queryParams.${javaField}" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
34                         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
35       </el-form-item>
36     #end
37 #end
38 #end
39 #end
40       <el-form-item>
41         <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
42         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
43       </el-form-item>
44     </el-form>
45
46     <!-- 操作工具栏 -->
47     <el-row :gutter="10" class="mb8">
48       <el-col :span="1.5">
49         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
50                    v-hasPermi="['${permissionPrefix}:create']">新增</el-button>
51       </el-col>
52       <el-col :span="1.5">
53         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
54                    v-hasPermi="['${permissionPrefix}:export']">导出</el-button>
55       </el-col>
56         ## 特殊：树表专属逻辑
57         #if ( $table.templateType == 2 )
58           <el-col :span="1.5">
59             <el-button type="danger" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">
60               展开/折叠
61             </el-button>
62           </el-col>
63         #end
64       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
65     </el-row>
66
67       ## 特殊：主子表专属逻辑
68       #if ( $table.templateType == 11 && $subTables && $subTables.size() > 0 )
69       <el-table
70         v-loading="loading"
71         :data="list"
72         :stripe="true"
73         :highlight-current-row="true"
74         :show-overflow-tooltip="true"
75         @current-change="handleCurrentChange"
76       >
77           ## 特殊：树表专属逻辑
78       #elseif ( $table.templateType == 2 )
79       <el-table
80         v-loading="loading"
81         :data="list"
82         :stripe="true"
83         :show-overflow-tooltip="true"
84         v-if="refreshTable"
85         row-key="id"
86         :default-expand-all="isExpandAll"
87         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
88       >
89       #else
90       <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
91       #end
92       ## 特殊：主子表专属逻辑
93       #if ( $table.templateType == 12 && $subTables && $subTables.size() > 0 )
94         <!-- 子表的列表 -->
95         <el-table-column type="expand">
96           <template #default="scope">
97             <el-tabs value="$subClassNameVars.get(0)">
98                 #foreach ($subTable in $subTables)
99                     #set ($index = $foreach.count - 1)
100                     #set ($subClassNameVar = $subClassNameVars.get($index))
101                     #set ($subSimpleClassName = $subSimpleClassNames.get($index))
102                     #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
103                   <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
104                     <${subSimpleClassName}List :${subJoinColumn_strikeCase}="scope.row.id" />
105                   </el-tab-pane>
106                 #end
107             </el-tabs>
108           </template>
109         </el-table-column>
110       #end
111 #foreach($column in $columns)
112 #if ($column.listOperationResult)
113     #set ($dictType=$column.dictType)
114     #set ($javaField = $column.javaField)
115     #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
116     #set ($comment=$column.columnComment)
117 #if ($column.javaType == "LocalDateTime")## 时间类型
118       <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
119         <template v-slot="scope">
120           <span>{{ parseTime(scope.row.${javaField}) }}</span>
121         </template>
122       </el-table-column>
123 #elseif("" != $column.dictType)## 数据字典
124       <el-table-column label="${comment}" align="center" prop="${javaField}">
125         <template v-slot="scope">
126           <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.${column.javaField}" />
127         </template>
128       </el-table-column>
129 #else
130       <el-table-column label="${comment}" align="center" prop="${javaField}" />
131 #end
132 #end
133 #end
134       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
135         <template v-slot="scope">
136           <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.${primaryColumn.javaField})"
137                      v-hasPermi="['${permissionPrefix}:update']">修改</el-button>
138           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
139                      v-hasPermi="['${permissionPrefix}:delete']">删除</el-button>
140         </template>
141       </el-table-column>
142     </el-table>
143 ## 特殊：树表专属逻辑（树不需要分页）
144 #if ( $table.templateType != 2 )
145     <!-- 分页组件 -->
146     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
147                 @pagination="getList"/>
148 #end
149     <!-- 对话框(添加 / 修改) -->
150     <${simpleClassName}Form ref="formRef" @success="getList" />
151   ## 特殊：主子表专属逻辑
152   #if ( $table.templateType == 11 && $subTables && $subTables.size() > 0 )
153     <!-- 子表的列表 -->
154       <el-tabs v-model="subTabsName">
155           #foreach ($subTable in $subTables)
156               #set ($index = $foreach.count - 1)
157               #set ($subClassNameVar = $subClassNameVars.get($index))
158               #set ($subSimpleClassName = $subSimpleClassNames.get($index))
159               #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
160             <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
161               <${subSimpleClassName}List v-if="currentRow.id" :${subJoinColumn_strikeCase}="currentRow.id" />
162             </el-tab-pane>
163           #end
164       </el-tabs>
165   #end
166   </div>
167 </template>
168
169 <script>
170 import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}';
171 import ${simpleClassName}Form from './${simpleClassName}Form.vue';
172 #if ($hasImageUploadColumn)
173 import ImageUpload from '@/components/ImageUpload';
174 #end
175 #if ($hasFileUploadColumn)
176 import FileUpload from '@/components/FileUpload';
177 #end
178 #if ($hasEditorColumn)
179 import Editor from '@/components/Editor';
180 #end
181 ## 特殊：主子表专属逻辑
182 #if ( $table.templateType != 10 )
183 #if ( $subTables && $subTables.size() > 0 )
184     #foreach ($subSimpleClassName in $subSimpleClassNames)
185     import ${subSimpleClassName}List from './components/${subSimpleClassName}List.vue';
186     #end
187 #end
188 #end
189 export default {
190   name: "${simpleClassName}",
191   components: {
192           ${simpleClassName}Form,
193 ## 特殊：主子表专属逻辑
194 #if ( $table.templateType != 10 )
195 #if ( $subTables && $subTables.size() > 0 )
196       #foreach ($subSimpleClassName in $subSimpleClassNames)
197           ${subSimpleClassName}List,
198       #end
199 #end
200 #end
201 #if ($hasImageUploadColumn)
202     ImageUpload,
203 #end
204 #if ($hasFileUploadColumn)
205     FileUpload,
206 #end
207 #if ($hasEditorColumn)
208     Editor,
209 #end
210   },
211   data() {
212     return {
213       // 遮罩层
214       loading: true,
215       // 导出遮罩层
216       exportLoading: false,
217       // 显示搜索条件
218       showSearch: true,
219       ## 特殊：树表专属逻辑（树不需要分页接口）
220       #if ( $table.templateType != 2 )
221         // 总条数
222         total: 0,
223       #end
224       // ${table.classComment}列表
225       list: [],
226       // 是否展开，默认全部展开
227       isExpandAll: true,
228       // 重新渲染表格状态
229       refreshTable: true,
230       // 选中行
231       currentRow: {},
232       // 查询参数
233       queryParams: {
234         ## 特殊：树表专属逻辑（树不需要分页接口）
235         #if ( $table.templateType != 2 )
236             pageNo: 1,
237             pageSize: 10,
238         #end
239         #foreach ($column in $columns)
240         #if ($column.listOperation)
241         #if ($column.listOperationCondition != 'BETWEEN')
242         $column.javaField: null,
243         #end
244         #if ($column.htmlType == "datetime" && $column.listOperationCondition == "BETWEEN")
245         $column.javaField: [],
246         #end
247         #end
248         #end
249       },
250         ## 特殊：主子表专属逻辑-erp
251         #if ( $table.templateType == 11)
252             #if ( $subTables && $subTables.size() > 0 )
253               /** 子表的列表 */
254               subTabsName: '$subClassNameVars.get(0)'
255             #end
256         #end
257     };
258   },
259   created() {
260     this.getList();
261   },
262   methods: {
263     /** 查询列表 */
264     async getList() {
265       try {
266       this.loading = true;
267       ## 特殊：树表专属逻辑（树不需要分页接口）
268       #if ( $table.templateType == 2 )
269        const res = await ${simpleClassName}Api.get${simpleClassName}List(this.queryParams);
270        this.list = this.handleTree(res.data, 'id', '${treeParentColumn.javaField}');
271       #else
272         const res = await ${simpleClassName}Api.get${simpleClassName}Page(this.queryParams);
273         this.list = res.data.list;
274         this.total = res.data.total;
275       #end
276       } finally {
277         this.loading = false;
278       }
279     },
280     /** 搜索按钮操作 */
281     handleQuery() {
282       this.queryParams.pageNo = 1;
283       this.getList();
284     },
285     /** 重置按钮操作 */
286     resetQuery() {
287       this.resetForm("queryForm");
288       this.handleQuery();
289     },
290     /** 添加/修改操作 */
291     openForm(id) {
292       this.#[[$]]#refs["formRef"].open(id);
293     },
294     /** 删除按钮操作 */
295     async handleDelete(row) {
296       const ${primaryColumn.javaField} = row.${primaryColumn.javaField};
297       await this.#[[$modal]]#.confirm('是否确认删除${table.classComment}编号为"' + ${primaryColumn.javaField} + '"的数据项?')
298       try {
299        await ${simpleClassName}Api.delete${simpleClassName}(${primaryColumn.javaField});
300        await this.getList();
301        this.#[[$modal]]#.msgSuccess("删除成功");
302       } catch {}
303     },
304     /** 导出按钮操作 */
305     async handleExport() {
306       await this.#[[$modal]]#.confirm('是否确认导出所有${table.classComment}数据项?');
307       try {
308         this.exportLoading = true;
309         const res = await ${simpleClassName}Api.export${simpleClassName}Excel(this.queryParams);
310         this.#[[$]]#download.excel(res.data, '${table.classComment}.xls');
311       } catch {
312       } finally {
313         this.exportLoading = false;
314       }
315     },
316       ## 特殊：主子表专属逻辑
317       #if ( $table.templateType == 11 )
318         /** 选中行操作 */
319         handleCurrentChange(row) {
320          this.currentRow = row;
321         #if ( $subTables && $subTables.size() > 0 )
322           /** 子表的列表 */
323           this.subTabsName = '$subClassNameVars.get(0)';
324         #end
325         },
326       #end
327       ## 特殊：树表专属逻辑
328       #if ( $table.templateType == 2 )
329         /** 展开/折叠操作 */
330         toggleExpandAll() {
331           this.refreshTable = false
332           this.isExpandAll = !this.isExpandAll
333           this.$nextTick(function () {
334             this.refreshTable = true
335           })
336         }
337       #end
338   }
339 };
340 </script>