commit | author | age
|
9bcb19
|
1 |
<template> |
I |
2 |
<div> |
|
3 |
<a-card :bordered="false" :bodyStyle="tstyle"> |
|
4 |
#if($queryWhetherList.size() > 0) |
|
5 |
<div class="table-page-search-wrapper" v-if="hasPerm('${className}:page')"> |
|
6 |
<a-form layout="inline"> |
|
7 |
<a-row :gutter="48"> |
|
8 |
#foreach ($column in $queryWhetherList) |
|
9 |
#if($foreach.count == 3) |
|
10 |
<template v-if="advanced"> |
|
11 |
#end |
|
12 |
#if(${column.effectType} == 'input' || ${column.effectType} == 'textarea') |
|
13 |
#if($foreach.count >= 3) |
|
14 |
<a-col :md="8" :sm="24"> |
|
15 |
<a-form-item label="${column.columnComment}"> |
|
16 |
<a-input v-model="queryParam.${column.javaName}" allow-clear placeholder="请输入${column.columnComment}"/> |
|
17 |
</a-form-item> |
|
18 |
</a-col> |
|
19 |
#else |
|
20 |
<a-col :md="8" :sm="24"> |
|
21 |
<a-form-item label="${column.columnComment}"> |
|
22 |
<a-input v-model="queryParam.${column.javaName}" allow-clear placeholder="请输入${column.columnComment}"/> |
|
23 |
</a-form-item> |
|
24 |
</a-col> |
|
25 |
#end |
|
26 |
#elseif(${column.effectType} == 'inputnumber') |
|
27 |
#if($foreach.count >= 3) |
|
28 |
<a-col :md="8" :sm="24"> |
|
29 |
<a-form-item label="${column.columnComment}"> |
|
30 |
<a-input-number v-model="queryParam.${column.javaName}" style="width: 100%" allow-clear placeholder="请输入${column.columnComment}"/> |
|
31 |
</a-form-item> |
|
32 |
</a-col> |
|
33 |
#else |
|
34 |
<a-col :md="8" :sm="24"> |
|
35 |
<a-form-item label="${column.columnComment}"> |
|
36 |
<a-input-number v-model="queryParam.${column.javaName}" style="width: 100%" allow-clear placeholder="请输入${column.columnComment}"/> |
|
37 |
</a-form-item> |
|
38 |
</a-col> |
|
39 |
#end |
|
40 |
#elseif(${column.effectType} == 'select' || ${column.effectType} == 'radio') |
|
41 |
#if($foreach.count >= 3) |
|
42 |
<a-col :md="8" :sm="24"> |
|
43 |
<a-form-item label="${column.columnComment}"> |
|
44 |
<a-select style="width: 100%" v-model="queryParam.${column.javaName}" placeholder="请选择${column.columnComment}"> |
|
45 |
<a-select-option v-for="(item,index) in ${column.javaName}Data" :key="index" :value="item.code">{{ item.name }}</a-select-option> |
|
46 |
</a-select> |
|
47 |
</a-form-item> |
|
48 |
</a-col> |
|
49 |
#else |
|
50 |
<a-col :md="8" :sm="24"> |
|
51 |
<a-form-item label="${column.columnComment}"> |
|
52 |
<a-select style="width: 100%" v-model="queryParam.${column.javaName}" placeholder="请选择${column.columnComment}"> |
|
53 |
<a-select-option v-for="(item,index) in ${column.javaName}Data" :key="index" :value="item.code">{{ item.name }}</a-select-option> |
|
54 |
</a-select> |
|
55 |
</a-form-item> |
|
56 |
</a-col> |
|
57 |
#end |
|
58 |
#elseif(${column.effectType} == 'datepicker') |
|
59 |
#if($foreach.count >= 3) |
|
60 |
<a-col :md="8" :sm="24"> |
|
61 |
<a-form-item label="${column.columnComment}"> |
|
62 |
<a-date-picker style="width: 100%" placeholder="请选择${column.columnComment}" v-model="queryParam.${column.javaName}Date" @change="onChange${column.javaName}"/> |
|
63 |
</a-form-item> |
|
64 |
</a-col> |
|
65 |
#else |
|
66 |
<a-col :md="8" :sm="24"> |
|
67 |
<a-form-item label="${column.columnComment}"> |
|
68 |
<a-date-picker style="width: 100%" placeholder="请选择${column.columnComment}" v-model="queryParam.${column.javaName}Date" @change="onChange${column.javaName}"/> |
|
69 |
</a-form-item> |
|
70 |
</a-col> |
|
71 |
#end |
|
72 |
#else |
|
73 |
#end |
|
74 |
#end |
|
75 |
#if($queryWhetherList.size() > 2) |
|
76 |
</template> |
|
77 |
#end |
|
78 |
#if($queryWhetherList.size() > 2) |
|
79 |
<a-col :md="8" :sm="24" > |
|
80 |
<span class="table-page-search-submitButtons"> |
|
81 |
<a-button type="primary" @click="$refs.table.refresh(true)" >查询</a-button> |
|
82 |
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button> |
|
83 |
<a @click="toggleAdvanced" style="margin-left: 8px"> |
|
84 |
{{ advanced ? '收起' : '展开' }} |
|
85 |
<a-icon :type="advanced ? 'up' : 'down'"/> |
|
86 |
</a> |
|
87 |
</span> |
|
88 |
</a-col> |
|
89 |
#else |
|
90 |
<a-col :md="8" :sm="24"> |
|
91 |
<span class="table-page-search-submitButtons"> |
|
92 |
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button> |
|
93 |
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button> |
|
94 |
</span> |
|
95 |
</a-col> |
|
96 |
#end |
|
97 |
</a-row> |
|
98 |
</a-form> |
|
99 |
</div> |
|
100 |
#end |
|
101 |
</a-card> |
|
102 |
<a-card :bordered="false"> |
|
103 |
<s-table |
|
104 |
ref="table" |
|
105 |
:columns="columns" |
|
106 |
:data="loadData" |
|
107 |
:alert="options.alert" |
|
108 |
#foreach ($column in $tableField) |
|
109 |
#if (${column.columnKey} == "PRI") |
|
110 |
:rowKey="(record) => record.${column.javaName}" |
|
111 |
#end |
|
112 |
#end |
|
113 |
:rowSelection="options.rowSelection" |
|
114 |
> |
|
115 |
<template class="table-operator" slot="operator" v-if="hasPerm('${className}:add')" > |
|
116 |
<a-button type="primary" v-if="hasPerm('${className}:add')" icon="plus" @click="$refs.addForm.add()">新增${functionName}</a-button> |
|
117 |
<a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('${className}:delete')" @click="batchDelete"><a-icon type="delete"/>批量删除</a-button> |
|
118 |
<x-down |
|
119 |
v-if="hasPerm('${className}:export')" |
|
120 |
ref="batchExport" |
|
121 |
@batchExport="batchExport" |
|
122 |
/> |
|
123 |
</template> |
|
124 |
#foreach ($column in $tableField) |
|
125 |
#if(${column.whetherTable} == "Y") |
|
126 |
#if(${column.whetherRetract} == "Y" || ${column.effectType} == 'select' || ${column.effectType} == 'radio' || ${column.effectType} == 'checkbox') |
|
127 |
<span slot="${column.javaName}ScopedSlots" slot-scope="text"> |
|
128 |
#if(${column.whetherRetract} == "Y" && (${column.effectType} == 'select' || ${column.effectType} == 'radio' || ${column.effectType} == 'checkbox')) |
|
129 |
<ellipsis :length="10" tooltip>{{ '${column.dictTypeCode}' | dictType(text) }}</ellipsis> |
|
130 |
#else |
|
131 |
#if(${column.whetherRetract} == "Y") |
|
132 |
<ellipsis :length="10" tooltip>{{ text }}</ellipsis> |
|
133 |
#else |
|
134 |
#if(${column.effectType} == 'checkbox') |
|
135 |
<a-tag v-for="textData in JSON.parse(text)" :key="textData.code" color="green">{{ 'sex' | dictType(textData) }}</a-tag> |
|
136 |
#else |
|
137 |
{{ '${column.dictTypeCode}' | dictType(text) }} |
|
138 |
#end |
|
139 |
#end |
|
140 |
#end |
|
141 |
</span> |
|
142 |
#end |
|
143 |
#end |
|
144 |
#end |
|
145 |
<span slot="action" slot-scope="text, record"> |
|
146 |
<a v-if="hasPerm('${className}:edit')" @click="$refs.editForm.edit(record)">编辑</a> |
|
147 |
<a-divider type="vertical" v-if="hasPerm('${className}:edit') & hasPerm('${className}:delete')"/> |
|
148 |
<a-popconfirm v-if="hasPerm('${className}:delete')" placement="topRight" title="确认删除?" @confirm="() => singleDelete(record)"> |
|
149 |
<a>删除</a> |
|
150 |
</a-popconfirm> |
|
151 |
</span> |
|
152 |
</s-table> |
|
153 |
<add-form ref="addForm" @ok="handleOk" /> |
|
154 |
<edit-form ref="editForm" @ok="handleOk" /> |
|
155 |
</a-card> |
|
156 |
</div> |
|
157 |
</template> |
|
158 |
<script> |
|
159 |
#set ($columnData = 0) |
|
160 |
#foreach ($column in $tableField) |
|
161 |
#if(${column.whetherTable} == "Y") |
|
162 |
#if(${column.whetherRetract} == "Y") |
|
163 |
#set ($Ellipsis="Y") |
|
164 |
#end |
|
165 |
#set ($columnData = $columnData+1) |
|
166 |
#end |
|
167 |
#if(${column.queryWhether} == 'Y') |
|
168 |
#if(${column.effectType} == 'datepicker') |
|
169 |
#set ($DateQuery="Y") |
|
170 |
#end |
|
171 |
#end |
|
172 |
#end |
|
173 |
#if($Ellipsis == "Y") |
|
174 |
import { STable, XDown, Ellipsis } from '@/components' |
|
175 |
#else |
|
176 |
import { STable, XDown } from '@/components' |
|
177 |
#end |
|
178 |
#if($DateQuery == "Y") |
|
179 |
import moment from 'moment' |
|
180 |
#end |
|
181 |
import { ${className}Page, ${className}Delete, ${className}Export } from '@/api/modular/main/${busName}/${className}Manage' |
|
182 |
import addForm from './addForm.vue' |
|
183 |
import editForm from './editForm.vue' |
|
184 |
export default { |
|
185 |
components: { |
|
186 |
#if($Ellipsis == "Y") |
|
187 |
Ellipsis, |
|
188 |
#end |
|
189 |
STable, |
|
190 |
addForm, |
|
191 |
editForm, |
|
192 |
XDown |
|
193 |
}, |
|
194 |
data () { |
|
195 |
return { |
|
196 |
#if($queryWhetherList.size() > 2) |
|
197 |
// 高级搜索 展开/关闭 |
|
198 |
advanced: false, |
|
199 |
#end |
|
200 |
// 查询参数 |
|
201 |
queryParam: {}, |
|
202 |
// 表头 |
|
203 |
columns: [ |
|
204 |
#set ($columnDataColumns = 0) |
|
205 |
#foreach ($column in $tableField) |
|
206 |
#if (${column.whetherTable} == "Y") |
|
207 |
#set ($columnDataColumns = $columnDataColumns+1) |
|
208 |
{ |
|
209 |
title: '${column.columnComment}', |
|
210 |
align: 'center', |
|
211 |
#if(${column.whetherRetract} == "Y" || ${column.effectType} == 'select' || ${column.effectType} == 'radio' || ${column.effectType} == 'checkbox') |
|
212 |
dataIndex: '${column.javaName}', |
|
213 |
scopedSlots: { customRender: '${column.javaName}ScopedSlots' } |
|
214 |
#else |
|
215 |
dataIndex: '${column.javaName}' |
|
216 |
#end |
|
217 |
}#if($foreach.hasNext && ($columnDataColumns != $columnData)), |
|
218 |
#else |
|
219 |
|
|
220 |
#end |
|
221 |
#end |
|
222 |
#end |
|
223 |
], |
|
224 |
tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' }, |
|
225 |
// 加载数据方法 必须为 Promise 对象 |
|
226 |
loadData: parameter => { |
|
227 |
#if($DateQuery == "Y") |
|
228 |
return ${className}Page(Object.assign(parameter, this.switchingDate())).then((res) => { |
|
229 |
#else |
|
230 |
return ${className}Page(Object.assign(parameter, this.queryParam)).then((res) => { |
|
231 |
#end |
|
232 |
return res.data |
|
233 |
}) |
|
234 |
}, |
|
235 |
#foreach ($column in $tableField) |
|
236 |
#if(${column.queryWhether} == 'Y') |
|
237 |
#if(${column.effectType} == 'select' || ${column.effectType} == 'radio') |
|
238 |
#if (${column.dictTypeCode}) |
|
239 |
${column.javaName}Data: [], |
|
240 |
#end |
|
241 |
#end |
|
242 |
#end |
|
243 |
#end |
|
244 |
selectedRowKeys: [], |
|
245 |
selectedRows: [], |
|
246 |
options: { |
|
247 |
alert: { show: true, clear: () => { this.selectedRowKeys = [] } }, |
|
248 |
rowSelection: { |
|
249 |
selectedRowKeys: this.selectedRowKeys, |
|
250 |
onChange: this.onSelectChange |
|
251 |
} |
|
252 |
} |
|
253 |
} |
|
254 |
}, |
|
255 |
created () { |
|
256 |
if (this.hasPerm('${className}:edit') || this.hasPerm('${className}:delete')) { |
|
257 |
this.columns.push({ |
|
258 |
title: '操作', |
|
259 |
width: '150px', |
|
260 |
dataIndex: 'action', |
|
261 |
scopedSlots: { customRender: 'action' } |
|
262 |
}) |
|
263 |
} |
|
264 |
#foreach ($column in $tableField) |
|
265 |
#if(${column.queryWhether} == 'Y') |
|
266 |
#if(${column.effectType} == 'select' || ${column.effectType} == 'radio') |
|
267 |
#if (${column.dictTypeCode}) |
|
268 |
const ${column.javaName}Option = this.$options |
|
269 |
this.${column.javaName}Data = ${column.javaName}Option.filters['dictData']('${column.dictTypeCode}') |
|
270 |
#end |
|
271 |
#end |
|
272 |
#end |
|
273 |
#end |
|
274 |
}, |
|
275 |
methods: { |
|
276 |
#if($DateQuery == "Y") |
|
277 |
moment, |
|
278 |
/** |
|
279 |
* 查询参数组装 |
|
280 |
*/ |
|
281 |
switchingDate () { |
|
282 |
#foreach ($column in $tableField) |
|
283 |
#if(${column.queryWhether} == 'Y') |
|
284 |
#if(${column.effectType} == 'datepicker') |
|
285 |
const queryParam${column.javaName} = this.queryParam.${column.javaName}Date |
|
286 |
if (queryParam${column.javaName} != null) { |
|
287 |
this.queryParam.${column.javaName} = moment(queryParam${column.javaName}).format('YYYY-MM-DD') |
|
288 |
if (queryParam${column.javaName}.length < 1) { |
|
289 |
delete this.queryParam.${column.javaName} |
|
290 |
} |
|
291 |
} |
|
292 |
#end |
|
293 |
#end |
|
294 |
#end |
|
295 |
const obj = JSON.parse(JSON.stringify(this.queryParam)) |
|
296 |
return obj |
|
297 |
}, |
|
298 |
#end |
|
299 |
/** |
|
300 |
* 单个删除 |
|
301 |
*/ |
|
302 |
singleDelete (record) { |
|
303 |
#foreach ($column in $tableField) |
|
304 |
#if (${column.columnKey} == "PRI") |
|
305 |
const param = [{ '${column.javaName}': record.${column.javaName} }] |
|
306 |
#end |
|
307 |
#end |
|
308 |
this.${className}Delete(param) |
|
309 |
}, |
|
310 |
/** |
|
311 |
* 批量删除 |
|
312 |
*/ |
|
313 |
batchDelete () { |
|
314 |
const paramIds = this.selectedRowKeys.map((d) => { |
|
315 |
#foreach ($column in $tableField) |
|
316 |
#if (${column.columnKey} == "PRI") |
|
317 |
return { '${column.javaName}': d } |
|
318 |
#end |
|
319 |
#end |
|
320 |
}) |
|
321 |
this.${className}Delete(paramIds) |
|
322 |
}, |
|
323 |
${className}Delete (record) { |
|
324 |
${className}Delete(record).then((res) => { |
|
325 |
if (res.success) { |
|
326 |
this.$message.success('删除成功') |
|
327 |
this.$refs.table.clearRefreshSelected() |
|
328 |
} else { |
|
329 |
this.$message.error('删除失败') // + res.message |
|
330 |
} |
|
331 |
}) |
|
332 |
}, |
|
333 |
#if($queryWhetherList.size() > 2) |
|
334 |
toggleAdvanced () { |
|
335 |
this.advanced = !this.advanced |
|
336 |
}, |
|
337 |
#end |
|
338 |
#foreach ($column in $queryWhetherList) |
|
339 |
#if(${column.queryWhether} == 'Y') |
|
340 |
#if(${column.effectType} == 'datepicker') |
|
341 |
onChange${column.javaName}(date, dateString) { |
|
342 |
this.${column.javaName}DateString = dateString |
|
343 |
}, |
|
344 |
#end |
|
345 |
#end |
|
346 |
#end |
|
347 |
/** |
|
348 |
* 批量导出 |
|
349 |
*/ |
|
350 |
batchExport () { |
|
351 |
const paramIds = this.selectedRowKeys.map((d) => { |
|
352 |
#foreach ($column in $tableField) |
|
353 |
#if (${column.columnKey} == "PRI") |
|
354 |
return { '${column.javaName}': d } |
|
355 |
#end |
|
356 |
#end |
|
357 |
}) |
|
358 |
${className}Export(paramIds).then((res) => { |
|
359 |
this.$refs.batchExport.downloadfile(res) |
|
360 |
}) |
|
361 |
}, |
|
362 |
handleOk () { |
|
363 |
this.$refs.table.refresh() |
|
364 |
}, |
|
365 |
onSelectChange (selectedRowKeys, selectedRows) { |
|
366 |
this.selectedRowKeys = selectedRowKeys |
|
367 |
this.selectedRows = selectedRows |
|
368 |
} |
|
369 |
} |
|
370 |
} |
|
371 |
</script> |
|
372 |
<style lang="less"> |
|
373 |
.table-operator { |
|
374 |
margin-bottom: 18px; |
|
375 |
} |
|
376 |
button { |
|
377 |
margin-right: 8px; |
|
378 |
} |
|
379 |
</style> |