hdy
2024-06-07 4a53ae7900954ef581b45a9c742f01ded1a66db5
提交 | 用户 | 时间
e57a89 1 <template>
2   <div class="app-container">
3     <el-card class="box-card">
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.query)
7     #set($dictType=$column.dictType)
8     #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
9     #set($parentheseIndex=$column.columnComment.indexOf("("))
10     #if($parentheseIndex != -1)
11     #set($comment=$column.columnComment.substring(0, $parentheseIndex))
12     #else
13     #set($comment=$column.columnComment)
14     #end
15     #if($column.htmlType == "input")
16           <el-form-item label="${comment}" prop="${column.javaField}">
17             <el-input
18               v-model="queryParams.${column.javaField}"
19               placeholder="请输入${comment}"
20               clearable
21               @keyup.enter.native="handleQuery"
22             />
23           </el-form-item>
24     #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
25           <el-form-item label="${comment}" prop="${column.javaField}">
26             <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
27               <el-option
28                 v-for="dict in dict.type.${dictType}"
29                 :key="dict.value"
30                 :label="dict.label"
31                 :value="dict.value"
32               />
33             </el-select>
34           </el-form-item>
35     #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
36           <el-form-item label="${comment}" prop="${column.javaField}">
37             <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable>
38               <el-option label="请选择字典生成" value="" />
39             </el-select>
40           </el-form-item>
41     #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
42           <el-form-item label="${comment}" prop="${column.javaField}">
43             <el-date-picker clearable
44               v-model="queryParams.${column.javaField}"
45               type="date"
46               value-format="yyyy-MM-dd"
47               placeholder="请选择${comment}">
48             </el-date-picker>
49           </el-form-item>
50     #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
51           <el-form-item label="${comment}">
52             <el-date-picker
53               v-model="daterange${AttrName}"
54               style="width: 240px"
55               value-format="yyyy-MM-dd"
56               type="daterange"
57               range-separator="-"
58               start-placeholder="开始日期"
59               end-placeholder="结束日期"
60             ></el-date-picker>
61           </el-form-item>
62     #end
63     #end
64     #end
65           <el-form-item style="float: right">
66             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
67             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
68           </el-form-item>
69         </el-form>
70     </el-card>
71
72     <el-card style="margin-top: 10px" class="box-card">
73         <el-row :gutter="10" class="mb8">
74           <el-col :span="1.5">
75             <el-button
76               type="primary"
77               plain
78               icon="el-icon-plus"
79               size="mini"
80               @click="handleAdd"
81               v-hasPermi="['${moduleName}:${businessName}:add']"
82             >新增</el-button>
83           </el-col>
84           <el-col :span="1.5">
85             <el-button
86               type="success"
87               plain
88               icon="el-icon-edit"
89               size="mini"
90               :disabled="single"
91               @click="handleUpdate"
92               v-hasPermi="['${moduleName}:${businessName}:edit']"
93             >修改</el-button>
94           </el-col>
95           <el-col :span="1.5">
96             <el-button
97               type="danger"
98               plain
99               icon="el-icon-delete"
100               size="mini"
101               :disabled="multiple"
102               @click="handleDelete"
103               v-hasPermi="['${moduleName}:${businessName}:remove']"
104             >删除</el-button>
105           </el-col>
106           <el-col :span="1.5">
107             <el-button
108               type="warning"
109               plain
110               icon="el-icon-download"
111               size="mini"
112               @click="handleExport"
113               v-hasPermi="['${moduleName}:${businessName}:export']"
114             >导出</el-button>
115           </el-col>
116           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
117         </el-row>
118
119         <el-table border v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
120           <el-table-column type="selection" width="55" align="center" />
121     #foreach($column in $columns)
122     #set($javaField=$column.javaField)
123     #set($parentheseIndex=$column.columnComment.indexOf("("))
124     #if($parentheseIndex != -1)
125     #set($comment=$column.columnComment.substring(0, $parentheseIndex))
126     #else
127     #set($comment=$column.columnComment)
128     #end
129     #if($column.pk)
130           <el-table-column label="${comment}" align="center" prop="${javaField}" />
131     #elseif($column.list && $column.htmlType == "datetime")
132           <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
133             <template slot-scope="scope">
134               <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
135             </template>
136           </el-table-column>
137     #elseif($column.list && $column.htmlType == "imageUpload")
138           <el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
139             <template slot-scope="scope">
140               <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
141             </template>
142           </el-table-column>
143     #elseif($column.list && "" != $column.dictType)
144           <el-table-column label="${comment}" align="center" prop="${javaField}">
145             <template slot-scope="scope">
146     #if($column.htmlType == "checkbox")
147               <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
148     #else
149               <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField}"/>
150     #end
151             </template>
152           </el-table-column>
153     #elseif($column.list && "" != $javaField)
154           <el-table-column label="${comment}" align="center" prop="${javaField}" />
155     #end
156     #end
157           <el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
158             <template slot-scope="scope">
159               <el-button
160                 size="mini"
161                 type="success"
162                 plain
163                 style="width: 72px"
164                 icon="el-icon-edit"
165                 @click="handleUpdate(scope.row)"
166                 v-hasPermi="['${moduleName}:${businessName}:edit']"
167               >修改</el-button>
168               <el-button
169                 size="mini"
170                 type="danger"
171                 plain
172                 style="width: 72px"
173                 icon="el-icon-delete"
174                 @click="handleDelete(scope.row)"
175                 v-hasPermi="['${moduleName}:${businessName}:remove']"
176               >删除</el-button>
177             </template>
178           </el-table-column>
179         </el-table>
180     </el-card>
181
182     <pagination
183       v-show="total>0"
184       :total="total"
185       :page.sync="queryParams.pageNum"
186       :limit.sync="queryParams.pageSize"
187       @pagination="getList"
188     />
189
190     <!-- 添加或修改${functionName}对话框 -->
191     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
192       <span slot="title">
193         <i class="el-icon-s-order"></i>
194         {{titleName}}
195       </span>
196       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
197 #foreach($column in $columns)
198 #set($field=$column.javaField)
199 #if($column.insert && !$column.pk)
200 #if(($column.usableColumn) || (!$column.superColumn))
201 #set($parentheseIndex=$column.columnComment.indexOf("("))
202 #if($parentheseIndex != -1)
203 #set($comment=$column.columnComment.substring(0, $parentheseIndex))
204 #else
205 #set($comment=$column.columnComment)
206 #end
207 #set($dictType=$column.dictType)
208 #if($column.htmlType == "input")
209         <el-form-item label="${comment}" prop="${field}">
210           <el-input v-model="form.${field}" placeholder="请输入${comment}" />
211         </el-form-item>
212 #elseif($column.htmlType == "imageUpload")
213         <el-form-item label="${comment}" prop="${field}">
214           <image-upload v-model="form.${field}"/>
215         </el-form-item>
216 #elseif($column.htmlType == "fileUpload")
217         <el-form-item label="${comment}" prop="${field}">
218           <file-upload v-model="form.${field}"/>
219         </el-form-item>
220 #elseif($column.htmlType == "editor")
221         <el-form-item label="${comment}">
222           <editor v-model="form.${field}" :min-height="192"/>
223         </el-form-item>
224 #elseif($column.htmlType == "select" && "" != $dictType)
225         <el-form-item label="${comment}" prop="${field}">
226           <el-select v-model="form.${field}" placeholder="请选择${comment}">
227             <el-option
228               v-for="dict in dict.type.${dictType}"
229               :key="dict.value"
230               :label="dict.label"
231 #if($column.javaType == "Integer" || $column.javaType == "Long")
232               :value="parseInt(dict.value)"
233 #else
234               :value="dict.value"
235 #end
236             ></el-option>
237           </el-select>
238         </el-form-item>
239 #elseif($column.htmlType == "select" && $dictType)
240         <el-form-item label="${comment}" prop="${field}">
241           <el-select v-model="form.${field}" placeholder="请选择${comment}">
242             <el-option label="请选择字典生成" value="" />
243           </el-select>
244         </el-form-item>
245 #elseif($column.htmlType == "checkbox" && "" != $dictType)
246         <el-form-item label="${comment}" prop="${field}">
247           <el-checkbox-group v-model="form.${field}">
248             <el-checkbox
249               v-for="dict in dict.type.${dictType}"
250               :key="dict.value"
251               :label="dict.value">
252               {{dict.label}}
253             </el-checkbox>
254           </el-checkbox-group>
255         </el-form-item>
256 #elseif($column.htmlType == "checkbox" && $dictType)
257         <el-form-item label="${comment}" prop="${field}">
258           <el-checkbox-group v-model="form.${field}">
259             <el-checkbox>请选择字典生成</el-checkbox>
260           </el-checkbox-group>
261         </el-form-item>
262 #elseif($column.htmlType == "radio" && "" != $dictType)
263         <el-form-item label="${comment}" prop="${field}">
264           <el-radio-group v-model="form.${field}">
265             <el-radio
266               v-for="dict in dict.type.${dictType}"
267               :key="dict.value"
268 #if($column.javaType == "Integer" || $column.javaType == "Long")
269               :label="parseInt(dict.value)"
270 #else
271               :label="dict.value"
272 #end
273             >{{dict.label}}</el-radio>
274           </el-radio-group>
275         </el-form-item>
276 #elseif($column.htmlType == "radio" && $dictType)
277         <el-form-item label="${comment}" prop="${field}">
278           <el-radio-group v-model="form.${field}">
279             <el-radio label="1">请选择字典生成</el-radio>
280           </el-radio-group>
281         </el-form-item>
282 #elseif($column.htmlType == "datetime")
283         <el-form-item label="${comment}" prop="${field}">
284           <el-date-picker clearable
285             v-model="form.${field}"
286             type="date"
287             value-format="yyyy-MM-dd"
288             placeholder="请选择${comment}">
289           </el-date-picker>
290         </el-form-item>
291 #elseif($column.htmlType == "textarea")
292         <el-form-item label="${comment}" prop="${field}">
293           <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
294         </el-form-item>
295 #end
296 #end
297 #end
298 #end
299 #if($table.sub)
300         <el-divider content-position="center">${subTable.functionName}信息</el-divider>
301         <el-row :gutter="10" class="mb8">
302           <el-col :span="1.5">
303             <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd${subClassName}">添加</el-button>
304           </el-col>
305           <el-col :span="1.5">
306             <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete${subClassName}">删除</el-button>
307           </el-col>
308         </el-row>
309         <el-table :data="${subclassName}List" :row-class-name="row${subClassName}Index" @selection-change="handle${subClassName}SelectionChange" ref="${subclassName}">
310           <el-table-column type="selection" width="50" align="center" />
311           <el-table-column label="序号" align="center" prop="index" width="50"/>
312 #foreach($column in $subTable.columns)
313 #set($javaField=$column.javaField)
314 #set($parentheseIndex=$column.columnComment.indexOf("("))
315 #if($parentheseIndex != -1)
316 #set($comment=$column.columnComment.substring(0, $parentheseIndex))
317 #else
318 #set($comment=$column.columnComment)
319 #end
320 #if($column.pk || $javaField == ${subTableFkclassName})
321 #elseif($column.list && $column.htmlType == "input")
322           <el-table-column label="$comment" prop="${javaField}" width="150">
323             <template slot-scope="scope">
324               <el-input v-model="scope.row.$javaField" placeholder="请输入$comment" />
325             </template>
326           </el-table-column>
327 #elseif($column.list && $column.htmlType == "datetime")
328           <el-table-column label="$comment" prop="${javaField}" width="240">
329             <template slot-scope="scope">
330               <el-date-picker clearable v-model="scope.row.$javaField" type="date" value-format="yyyy-MM-dd" placeholder="请选择$comment" />
331             </template>
332           </el-table-column>
333 #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" != $column.dictType)
334           <el-table-column label="$comment" prop="${javaField}" width="150">
335             <template slot-scope="scope">
336               <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
337                 <el-option
338                   v-for="dict in dict.type.$column.dictType"
339                   :key="dict.value"
340                   :label="dict.label"
341                   :value="dict.value"
342                 ></el-option>
343               </el-select>
344             </template>
345           </el-table-column>
346 #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" == $column.dictType)
347           <el-table-column label="$comment" prop="${javaField}" width="150">
348             <template slot-scope="scope">
349               <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
350                 <el-option label="请选择字典生成" value="" />
351               </el-select>
352             </template>
353           </el-table-column>
354 #end
355 #end
356         </el-table>
357 #end
358       </el-form>
359       <div slot="footer" class="dialog-footer">
360         <el-button type="primary" @click="submitForm">确 定</el-button>
361         <el-button @click="cancel">取 消</el-button>
362       </div>
363     </el-dialog>
364   </div>
365 </template>
366
367 <script>
368 import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}";
369
370 export default {
371   name: "${BusinessName}",
372 #if(${dicts} != '')
373   dicts: [${dicts}],
374 #end
375   data() {
376     return {
377       // 遮罩层
378       loading: true,
379       titleName: "",
380       // 选中数组
381       ids: [],
382 #if($table.sub)
383       // 子表选中数据
384       checked${subClassName}: [],
385 #end
386       // 非单个禁用
387       single: true,
388       // 非多个禁用
389       multiple: true,
390       // 显示搜索条件
391       showSearch: true,
392       // 总条数
393       total: 0,
394       // ${functionName}表格数据
395       ${businessName}List: [],
396 #if($table.sub)
397       // ${subTable.functionName}表格数据
398       ${subclassName}List: [],
399 #end
400       // 弹出层标题
401       title: "",
402       // 是否显示弹出层
403       open: false,
404 #foreach ($column in $columns)
405 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
406 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
407       // $comment时间范围
408       daterange${AttrName}: [],
409 #end
410 #end
411       // 查询参数
412       queryParams: {
413         pageNum: 1,
414         pageSize: 10,
415 #foreach ($column in $columns)
416 #if($column.query)
417         $column.javaField: null#if($foreach.count != $columns.size()),#end
418 #end
419 #end
420       },
421       // 表单参数
422       form: {},
423       // 表单校验
424       rules: {
425 #foreach ($column in $columns)
426 #if($column.required)
427 #set($parentheseIndex=$column.columnComment.indexOf("("))
428 #if($parentheseIndex != -1)
429 #set($comment=$column.columnComment.substring(0, $parentheseIndex))
430 #else
431 #set($comment=$column.columnComment)
432 #end
433         $column.javaField: [
434           { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
435         ]#if($foreach.count != $columns.size()),#end
436 #end
437 #end
438       }
439     };
440   },
441   created() {
442     this.getList();
443   },
444   methods: {
445     /** 查询${functionName}列表 */
446     getList() {
447       this.loading = true;
448 #foreach ($column in $columns)
449 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
450       this.queryParams.params = {};
451 #break
452 #end
453 #end
454 #foreach ($column in $columns)
455 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
456 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
457       if (null != this.daterange${AttrName} && '' != this.daterange${AttrName}) {
458         this.queryParams.params["begin${AttrName}"] = this.daterange${AttrName}[0];
459         this.queryParams.params["end${AttrName}"] = this.daterange${AttrName}[1];
460       }
461 #end
462 #end
463       list${BusinessName}(this.queryParams).then(response => {
464         this.${businessName}List = response.rows;
465         this.total = response.total;
466         this.loading = false;
467       });
468     },
469     // 取消按钮
470     cancel() {
471       this.open = false;
472       this.reset();
473     },
474     // 表单重置
475     reset() {
476       this.form = {
477 #foreach ($column in $columns)
478 #if($column.htmlType == "checkbox")
479         $column.javaField: []#if($foreach.count != $columns.size()),#end
480 #else
481         $column.javaField: null#if($foreach.count != $columns.size()),#end
482 #end
483 #end
484       };
485 #if($table.sub)
486       this.${subclassName}List = [];
487 #end
488       this.resetForm("form");
489     },
490     /** 搜索按钮操作 */
491     handleQuery() {
492       this.queryParams.pageNum = 1;
493       this.getList();
494     },
495     /** 重置按钮操作 */
496     resetQuery() {
497 #foreach ($column in $columns)
498 #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
499 #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
500       this.daterange${AttrName} = [];
501 #end
502 #end
503       this.resetForm("queryForm");
504       this.handleQuery();
505     },
506     // 多选框选中数据
507     handleSelectionChange(selection) {
508       this.ids = selection.map(item => item.${pkColumn.javaField})
509       this.single = selection.length!==1
510       this.multiple = !selection.length
511     },
512     /** 新增按钮操作 */
513     handleAdd() {
514       this.reset();
515       this.open = true;
516       this.titleName = "添加${functionName}";
517     },
518     /** 修改按钮操作 */
519     handleUpdate(row) {
520       this.reset();
521       const ${pkColumn.javaField} = row.${pkColumn.javaField} || this.ids
522       get${BusinessName}(${pkColumn.javaField}).then(response => {
523         this.form = response.data;
524 #foreach ($column in $columns)
525 #if($column.htmlType == "checkbox")
526         this.form.$column.javaField = this.form.${column.javaField}.split(",");
527 #end
528 #end
529 #if($table.sub)
530         this.${subclassName}List = response.data.${subclassName}List;
531 #end
532         this.open = true;
533         this.titleName = "修改${functionName}";
534       });
535     },
536     /** 提交按钮 */
537     submitForm() {
538       this.#[[$]]#refs["form"].validate(valid => {
539         if (valid) {
540 #foreach ($column in $columns)
541 #if($column.htmlType == "checkbox")
542           this.form.$column.javaField = this.form.${column.javaField}.join(",");
543 #end
544 #end
545 #if($table.sub)
546           this.form.${subclassName}List = this.${subclassName}List;
547 #end
548           if (this.form.${pkColumn.javaField} != null) {
549             update${BusinessName}(this.form).then(response => {
550               this.#[[$modal]]#.msgSuccess("修改成功");
551               this.open = false;
552               this.getList();
553             });
554           } else {
555             add${BusinessName}(this.form).then(response => {
556               this.#[[$modal]]#.msgSuccess("新增成功");
557               this.open = false;
558               this.getList();
559             });
560           }
561         }
562       });
563     },
564     /** 删除按钮操作 */
565     handleDelete(row) {
566       const ${pkColumn.javaField}s = row.${pkColumn.javaField} || this.ids;
567       this.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + ${pkColumn.javaField}s + '"的数据项?').then(function() {
568         return del${BusinessName}(${pkColumn.javaField}s);
569       }).then(() => {
570         this.getList();
571         this.#[[$modal]]#.msgSuccess("删除成功");
572       }).catch(() => {});
573     },
574 #if($table.sub)
575     /** ${subTable.functionName}序号 */
576     row${subClassName}Index({ row, rowIndex }) {
577       row.index = rowIndex + 1;
578     },
579     /** ${subTable.functionName}添加按钮操作 */
580     handleAdd${subClassName}() {
581       let obj = {};
582 #foreach($column in $subTable.columns)
583 #if($column.pk || $column.javaField == ${subTableFkclassName})
584 #elseif($column.list && "" != $javaField)
585       obj.$column.javaField = "";
586 #end
587 #end
588       this.${subclassName}List.push(obj);
589     },
590     /** ${subTable.functionName}删除按钮操作 */
591     handleDelete${subClassName}() {
592       if (this.checked${subClassName}.length == 0) {
593         this.#[[$modal]]#.msgError("请先选择要删除的${subTable.functionName}数据");
594       } else {
595         const ${subclassName}List = this.${subclassName}List;
596         const checked${subClassName} = this.checked${subClassName};
597         this.${subclassName}List = ${subclassName}List.filter(function(item) {
598           return checked${subClassName}.indexOf(item.index) == -1
599         });
600       }
601     },
602     /** 复选框选中数据 */
603     handle${subClassName}SelectionChange(selection) {
604       this.checked${subClassName} = selection.map(item => item.index)
605     },
606 #end
607     /** 导出按钮操作 */
608     handleExport() {
609       this.download('${moduleName}/${businessName}/export', {
610         ...this.queryParams
611       }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
612     }
613   }
614 };
615 </script>