<template>
|
<div class="app-container">
|
<!-- 查询条件 -->
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
|
<el-form-item label="分公司" prop="deptIds">
|
<el-select
|
v-model="queryParams.deptIds"
|
placeholder="全部分公司"
|
clearable
|
filterable
|
multiple
|
collapse-tags
|
style="width: 240px"
|
>
|
<el-option
|
v-for="dept in branchList"
|
:key="dept.deptId"
|
:label="dept.deptName"
|
:value="dept.deptId"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间范围" prop="dateRange">
|
<el-date-picker
|
v-model="dateRange"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
style="width: 240px"
|
/>
|
</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-form-item>
|
</el-form>
|
|
<!-- 操作栏 -->
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="warning"
|
plain
|
icon="el-icon-download"
|
size="mini"
|
:loading="exportLoading"
|
@click="handleExport"
|
v-hasPermi="['task:stat:export']"
|
>导出Excel</el-button>
|
</el-col>
|
</el-row>
|
|
<!-- 数据表格 -->
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
border
|
style="width: 100%"
|
:span-method="mergeDeptRows"
|
>
|
<el-table-column label="分公司" prop="deptName" align="center" min-width="140" />
|
<el-table-column label="日期" prop="statDate" align="center" width="120" />
|
<el-table-column label="录单数量" prop="orderCount" align="center" width="120">
|
<template slot-scope="scope">
|
<el-tag type="primary">{{ scope.row.orderCount }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 汇总信息 -->
|
<div v-if="tableData.length > 0" style="margin-top: 12px; color: #606266; font-size: 13px;">
|
共 <strong>{{ tableData.length }}</strong> 条记录，合计录单
|
<strong style="color: #E6A23C; font-size: 16px;">{{ totalCount }}</strong> 单
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getDeptOrderStat, exportDeptOrderStat } from "@/api/task";
|
import { listAllBranches } from "@/api/system/dept";
|
|
export default {
|
name: "DeptOrderStat",
|
data() {
|
const now = new Date();
|
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
|
const fmt = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
return {
|
loading: false,
|
exportLoading: false,
|
tableData: [],
|
branchList: [],
|
// 默认选择当月
|
dateRange: [fmt(firstDay), fmt(now)],
|
queryParams: {
|
deptIds: []
|
},
|
// 合并行相关
|
mergeMap: {}
|
};
|
},
|
computed: {
|
totalCount() {
|
return this.tableData.reduce((sum, row) => sum + (row.orderCount || 0), 0);
|
}
|
},
|
created() {
|
this.loadBranchList();
|
this.getList();
|
},
|
methods: {
|
/** 加载分公司列表 */
|
loadBranchList() {
|
listAllBranches().then(res => {
|
this.branchList = res.data || [];
|
}).catch(() => {
|
this.branchList = [];
|
});
|
},
|
|
/** 查询统计数据 */
|
getList() {
|
if (!this.dateRange || this.dateRange.length !== 2) {
|
this.$message.warning("请选择时间范围");
|
return;
|
}
|
this.loading = true;
|
const params = {
|
startDate: this.dateRange[0],
|
endDate: this.dateRange[1],
|
deptIds: this.queryParams.deptIds && this.queryParams.deptIds.length > 0
|
? this.queryParams.deptIds.join(",")
|
: undefined
|
};
|
getDeptOrderStat(params).then(res => {
|
this.tableData = res.data || [];
|
this.buildMergeMap();
|
this.loading = false;
|
}).catch(() => {
|
this.loading = false;
|
});
|
},
|
|
/** 构建合并行映射 */
|
buildMergeMap() {
|
const map = {};
|
const data = this.tableData;
|
let i = 0;
|
while (i < data.length) {
|
let j = i;
|
while (j < data.length && data[j].deptName === data[i].deptName) {
|
j++;
|
}
|
map[i] = j - i;
|
for (let k = i + 1; k < j; k++) {
|
map[k] = 0;
|
}
|
i = j;
|
}
|
this.mergeMap = map;
|
},
|
|
/** 合并分公司列（相同分公司行合并） */
|
mergeDeptRows({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex === 0) {
|
const span = this.mergeMap[rowIndex];
|
if (span !== undefined) {
|
return { rowspan: span, colspan: span === 0 ? 0 : 1 };
|
}
|
}
|
},
|
|
/** 搜索 */
|
handleQuery() {
|
this.getList();
|
},
|
|
/** 重置 */
|
resetQuery() {
|
const now = new Date();
|
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
|
const fmt = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
this.dateRange = [fmt(firstDay), fmt(now)];
|
this.queryParams.deptIds = [];
|
this.getList();
|
},
|
|
/** 导出 Excel */
|
handleExport() {
|
if (!this.dateRange || this.dateRange.length !== 2) {
|
this.$message.warning("请选择时间范围");
|
return;
|
}
|
this.exportLoading = true;
|
const params = {
|
startDate: this.dateRange[0],
|
endDate: this.dateRange[1],
|
deptIds: this.queryParams.deptIds && this.queryParams.deptIds.length > 0
|
? this.queryParams.deptIds.join(",")
|
: undefined
|
};
|
exportDeptOrderStat(params).then(res => {
|
const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
|
const url = window.URL.createObjectURL(blob);
|
const a = document.createElement('a');
|
a.href = url;
|
a.download = `分公司录单统计_${params.startDate}_${params.endDate}.xlsx`;
|
a.click();
|
window.URL.revokeObjectURL(url);
|
this.exportLoading = false;
|
}).catch(() => {
|
this.exportLoading = false;
|
});
|
}
|
}
|
};
|
</script>
|
