```feat(money-detail): 添加按时间范围查询的表单和导出按钮

添加了一个新的功能,允许用户通过指定的日期范围搜索充值明细。此外,导出按钮已被重新设计,并放置在新的位置以提高可用性。该改进增强了用户与系统交互的效率和体验。
```
master
wxy 2024-08-28 19:36:01 +08:00
parent 735c97d716
commit b515b8e8bf
1 changed files with 32 additions and 13 deletions

View File

@ -2,19 +2,32 @@
<div style="padding: 20px;"> <div style="padding: 20px;">
<h1 style="text-align: center; margin-bottom: 30px;">充值明细</h1> <h1 style="text-align: center; margin-bottom: 30px;">充值明细</h1>
<el-divider></el-divider> <el-divider></el-divider>
<el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
end-placeholder="结束日期"
range-separator="-"
start-placeholder="开始日期"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery"></el-button>
</el-form-item>
</el-form>
<el-row> <el-row>
<el-col :span="50"></el-col> <el-button
<el-col :span="5" :offset="15"> v-hasPermi="['system:pay:export']"
<el-button icon="el-icon-download"
v-hasPermi="['system:pay:export']" plain
icon="el-icon-download" size="mini"
plain type="warning"
size="mini" @click="handleExport"
type="warning" >导出
@click="handleExport" </el-button>
>导出
</el-button>
</el-col>
</el-row> </el-row>
<el-table <el-table
@ -79,6 +92,7 @@ export default {
components: {PanelGroup}, components: {PanelGroup},
data() { data() {
return { return {
dateRange: [],
listDate: [], listDate: [],
total: 0, total: 0,
queryParams: { queryParams: {
@ -91,6 +105,11 @@ export default {
this.getList(); this.getList();
}, },
methods: { methods: {
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
this.download('system/user/export', { this.download('system/user/export', {
@ -98,7 +117,7 @@ export default {
}, `pay_${new Date().getTime()}.xlsx`) }, `pay_${new Date().getTime()}.xlsx`)
}, },
getList() { getList() {
userPayinfo(this.addDateRange(this.queryParams)).then(response => { userPayinfo(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.listDate = response.data.rows; this.listDate = response.data.rows;
this.total = response.data.total; this.total = response.data.total;
} }