基本配置修改 优化
This commit is contained in:
parent
aa0a3b553c
commit
9476acfedf
|
|
@ -0,0 +1,478 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd" style="width: 340px"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
:picker-options="pickerOptions" >
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="消费地">
|
||||
<el-cascader
|
||||
v-model="selectedOrg"
|
||||
:options="orgOptions"
|
||||
:show-all-levels="false"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择消费地"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'hover',
|
||||
value: 'orgId',
|
||||
label: 'orgName',
|
||||
children: 'children'
|
||||
}"
|
||||
style="width: 200px;"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作地">
|
||||
<el-cascader
|
||||
v-model="gzselectedOrg"
|
||||
:options="gzorgOptions"
|
||||
:show-all-levels="false"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择工作地"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'hover',
|
||||
value: 'orgId',
|
||||
label: 'orgName',
|
||||
children: 'children'
|
||||
}"
|
||||
style="width: 260px;"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
<el-button type="success" @click="newexportExcel">导出列表</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" :data="tableListData" >
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary">合计</span>
|
||||
<span v-else>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户账号" align="center" prop="custNum" :show-overflow-tooltip="true" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
|
||||
<span v-else>{{ scope.row.custNum }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户姓名" align="center" prop="custName" :show-overflow-tooltip="true" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
|
||||
<span v-else>{{ scope.row.custName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户手机号" align="center" prop="mobile" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
|
||||
<span v-else>{{ scope.row.mobile }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属组织" align="center" prop="orgFullName" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
|
||||
<span v-else>{{ scope.row.orgFullName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单类型" align="center" prop="orderType" :show-overflow-tooltip="true" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
|
||||
<span v-else>{{ scope.row.orderType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="交易次数" align="center" prop="tradeNum" :show-overflow-tooltip="true" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary" style="font-weight: bold; color: #409EFF;">{{ scope.row.tradeNum }}</span>
|
||||
<span v-else>{{ scope.row.tradeNum }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="交易余额" align="center" prop="realAmount" :show-overflow-tooltip="true" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary" style="font-weight: bold; color: #409EFF;">{{ (scope.row.realAmount/100).toFixed(2) }}</span>
|
||||
<span v-else>{{ (scope.row.realAmount/100).toFixed(2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="消费地" align="center" prop="areaName" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
|
||||
<span v-else>{{ scope.row.areaName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="工作地" align="center" prop="workAreaName" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
|
||||
<span v-else>{{ scope.row.workAreaName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getplaceList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTreeArea, getplaceList, getplaceListApi } from "@/api/canteen/canteenRecord";
|
||||
export default {
|
||||
name: "",
|
||||
dicts: [],
|
||||
data() {
|
||||
return {
|
||||
orgOptions:[],
|
||||
selectedOrg: [], // 消费地选择
|
||||
gzorgOptions:[], // 工作地选项
|
||||
gzselectedOrg: [], // 工作地选择
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
//表格数据
|
||||
tableListData: [],
|
||||
// 是否显示合计行
|
||||
showSummary: false,
|
||||
// 合计数据
|
||||
summaryData: {
|
||||
tradeNum: 0,
|
||||
payableAmount: 0
|
||||
},
|
||||
//下拉选数据
|
||||
deptOptions:[],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
startTime: '', // 后端参数
|
||||
endTime: '', // 后端参数
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptIdList:[],
|
||||
searchValue:null,
|
||||
userType:null,
|
||||
selectedOrg: [], // 消费地组织ID
|
||||
gzselectedOrg: [] // 工作地组织ID
|
||||
},
|
||||
dateRange:this.defaultDateRange(),
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date(new Date().toLocaleDateString());
|
||||
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
|
||||
const start = new Date((new Date().toLocaleDateString()));
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date(new Date().toLocaleDateString());
|
||||
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
|
||||
const start = new Date((new Date().toLocaleDateString()));
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date(new Date().toLocaleDateString());
|
||||
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
|
||||
const start = new Date((new Date().toLocaleDateString()));
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTree();
|
||||
this.getplaceList();
|
||||
},
|
||||
methods: {
|
||||
// 自定义合计方法
|
||||
getSummaries(param) {
|
||||
const { columns, data } = param;
|
||||
const sums = [];
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '合计';
|
||||
return;
|
||||
}
|
||||
|
||||
switch (column.property) {
|
||||
case 'tradeNum':
|
||||
sums[index] = this.summaryData.tradeNum;
|
||||
break;
|
||||
case 'payableAmount':
|
||||
sums[index] = (this.summaryData.payableAmount / 100).toFixed(2);
|
||||
break;
|
||||
default:
|
||||
sums[index] = '-';
|
||||
}
|
||||
});
|
||||
return sums;
|
||||
},
|
||||
|
||||
indexMethod(index) {
|
||||
return (this.queryParams.pageNum - 1) * queryParams.pageSize + index + 1;
|
||||
},
|
||||
|
||||
/** 查询部门下拉树结构 */
|
||||
getTree(){
|
||||
getTreeArea().then(res => {
|
||||
this.orgOptions = res;
|
||||
this.gzorgOptions = JSON.parse(JSON.stringify(res)); // 深拷贝，避免引用问题
|
||||
});
|
||||
},
|
||||
|
||||
// 递归获取节点及子节点的所有 orgId
|
||||
getAllChildIds(node, options) {
|
||||
let ids = [node.orgId]; // 当前节点
|
||||
if (node.children && node.children.length > 0) {
|
||||
node.children.forEach(child => {
|
||||
ids = ids.concat(this.getAllChildIds(child, options)); // 递归获取子节点
|
||||
});
|
||||
}
|
||||
return ids;
|
||||
},
|
||||
|
||||
// 根据 cascader 的选中路径获取所有要传的 orgId（消费地）
|
||||
getSelectedOrgIds() {
|
||||
if (!this.selectedOrg || this.selectedOrg.length === 0) return [];
|
||||
const lastValue = this.selectedOrg[this.selectedOrg.length - 1];
|
||||
// 找到对应节点
|
||||
let stack = [...this.orgOptions];
|
||||
let node = null;
|
||||
for (let val of this.selectedOrg) {
|
||||
node = stack.find(item => item.orgId === val);
|
||||
if (!node) break;
|
||||
stack = node.children || [];
|
||||
}
|
||||
|
||||
if (node) {
|
||||
return this.getAllChildIds(node, this.orgOptions);
|
||||
}
|
||||
return [lastValue];
|
||||
},
|
||||
|
||||
// 根据 cascader 的选中路径获取所有要传的 orgId（工作地）
|
||||
getGzSelectedOrgIds() {
|
||||
if (!this.gzselectedOrg || this.gzselectedOrg.length === 0) return [];
|
||||
const lastValue = this.gzselectedOrg[this.gzselectedOrg.length - 1];
|
||||
// 找到对应节点
|
||||
let stack = [...this.gzorgOptions];
|
||||
let node = null;
|
||||
for (let val of this.gzselectedOrg) {
|
||||
node = stack.find(item => item.orgId === val);
|
||||
if (!node) break;
|
||||
stack = node.children || [];
|
||||
}
|
||||
|
||||
if (node) {
|
||||
return this.getAllChildIds(node, this.gzorgOptions);
|
||||
}
|
||||
return [lastValue];
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getplaceList();
|
||||
},
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = this.defaultDateRange();
|
||||
this.selectedOrg = [];
|
||||
this.gzselectedOrg = [];
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
selectedOrg: [],
|
||||
gzselectedOrg: []
|
||||
};
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
/** 查询列表 */
|
||||
getplaceList() {
|
||||
this.loading = true;
|
||||
// 拆分日期范围
|
||||
if (this.dateRange && this.dateRange.length === 2) {
|
||||
const start = this.dateRange[0];
|
||||
const end = this.dateRange[1];
|
||||
|
||||
const formatDate = d => {
|
||||
const date = new Date(d);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${y}-${m}-${day}`;
|
||||
};
|
||||
|
||||
this.queryParams.startTime = formatDate(start) + ' 00:00:00';
|
||||
this.queryParams.endTime = formatDate(end) + ' 23:59:59';
|
||||
}
|
||||
|
||||
this.queryParams.selectedOrg = this.getSelectedOrgIds();
|
||||
this.queryParams.gzselectedOrg = this.getGzSelectedOrgIds();
|
||||
|
||||
let param = {
|
||||
"pageNum": this.queryParams.pageNum,
|
||||
"pageSize": this.queryParams.pageSize,
|
||||
"selectedOrg": this.queryParams.selectedOrg,
|
||||
"gzselectedOrg": this.queryParams.gzselectedOrg,
|
||||
"userType": this.queryParams.userType,
|
||||
"startTime": this.queryParams.startTime,
|
||||
"endTime": this.queryParams.endTime
|
||||
};
|
||||
|
||||
getplaceList(param).then(response => {
|
||||
this.tableListData = response.rows || [];
|
||||
this.total = Number(response.total) || 0;
|
||||
|
||||
// 计算当前页的合计
|
||||
this.calculateCurrentPageSummary();
|
||||
|
||||
this.loading = false;
|
||||
}).catch(error => {
|
||||
console.error('获取数据失败:', error);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
newexportExcel() {
|
||||
// 拆分日期范围
|
||||
if (this.dateRange && this.dateRange.length === 2) {
|
||||
const start = this.dateRange[0];
|
||||
const end = this.dateRange[1];
|
||||
|
||||
const formatDate = d => {
|
||||
const date = new Date(d);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${y}-${m}-${day}`;
|
||||
};
|
||||
|
||||
this.queryParams.startTime = formatDate(start) + ' 00:00:00';
|
||||
this.queryParams.endTime = formatDate(end) + ' 23:59:59';
|
||||
}
|
||||
|
||||
this.queryParams.selectedOrg = this.getSelectedOrgIds();
|
||||
this.queryParams.gzselectedOrg = this.getGzSelectedOrgIds();
|
||||
|
||||
let param = {
|
||||
"pageNum": this.queryParams.pageNum,
|
||||
"pageSize": this.queryParams.pageSize,
|
||||
"selectedOrg": this.queryParams.selectedOrg,
|
||||
"gzselectedOrg": this.queryParams.gzselectedOrg,
|
||||
"userType": this.queryParams.userType,
|
||||
"startTime": this.queryParams.startTime,
|
||||
"endTime": this.queryParams.endTime
|
||||
};
|
||||
if (param.custName) {
|
||||
param.custName = encodeURIComponent(params.custName); // 中文名编码
|
||||
}
|
||||
// 调用下载方法
|
||||
this.download(
|
||||
'/smart-canteen/api/v2/report/consume/placeexportExcel',
|
||||
param,
|
||||
`异地消费报表_${Date.now()}.xlsx`
|
||||
);
|
||||
},
|
||||
// 计算当前页的合计
|
||||
calculateCurrentPageSummary() {
|
||||
let tradeNumTotal = 0;
|
||||
let payableAmountTotal = 0;
|
||||
|
||||
this.tableListData.forEach(item => {
|
||||
tradeNumTotal += (item.tradeNum || 0);
|
||||
payableAmountTotal += (item.payableAmount || 0);
|
||||
});
|
||||
|
||||
this.summaryData = {
|
||||
tradeNum: tradeNumTotal,
|
||||
payableAmount: payableAmountTotal
|
||||
};
|
||||
|
||||
this.showSummary = this.tableListData.length > 0;
|
||||
},
|
||||
|
||||
defaultDateRange() {
|
||||
const end = new Date(new Date().toLocaleDateString());
|
||||
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
|
||||
const start = new Date((new Date().toLocaleDateString()));
|
||||
start.setTime(start.getTime());
|
||||
|
||||
this.start = parseInt(start.getTime() / 1000);
|
||||
this.end = parseInt(end.getTime() / 1000);
|
||||
return [start, end];
|
||||
},
|
||||
|
||||
//日期时间
|
||||
formatDateTime(date) {
|
||||
// 格式化为 YYYY-MM-DD
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
|
||||
const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
|
||||
const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
},
|
||||
|
||||
//日期
|
||||
formatDate(date) {
|
||||
// 格式化为 YYYY-MM-DD
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 为合计行添加特殊样式 */
|
||||
.el-table ::v-deep .el-table__footer-wrapper tbody td {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: bold;
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue