基本配置修改 优化
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