|
|
@@ -1,8 +1,14 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
+ <!-- Tab 切换 -->
|
|
|
+ <el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
|
|
+ <el-tab-pane label="销售主体统计" name="summary"></el-tab-pane>
|
|
|
+ <el-tab-pane label="企微用户统计" name="account"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
<!-- 搜索表单 -->
|
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
|
|
|
- <!-- 部门选择-->
|
|
|
+ <!-- 部门选择 -->
|
|
|
<el-form-item label="归属部门" prop="deptId">
|
|
|
<treeselect
|
|
|
style="width: 220px"
|
|
|
@@ -14,7 +20,7 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <!-- 员工选择(根据部门联动) -->
|
|
|
+ <!-- 员工选择 -->
|
|
|
<el-form-item label="员工" prop="userId">
|
|
|
<el-select
|
|
|
v-model="queryParams.userId"
|
|
|
@@ -36,12 +42,23 @@
|
|
|
|
|
|
<el-form-item label="企微主体" prop="corpId">
|
|
|
<el-select v-model="queryParams.corpId" placeholder="请选择所属公司" filterable size="small">
|
|
|
- <el-option v-for="(option, index) in corpOptions" :key="index" :value="option.corpId" :label="option.corpName"></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="(option, index) in corpOptions"
|
|
|
+ :key="index"
|
|
|
+ :value="option.corpId"
|
|
|
+ :label="option.corpName"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="销售用户名" prop="qwUserName">
|
|
|
- <el-input v-model="queryParams.qwUserName" placeholder="请输入销售用户名" clearable size="small" />
|
|
|
+ <!-- 企微用户名:仅在“企微用户统计”Tab 下显示 -->
|
|
|
+ <el-form-item label="企微用户名" prop="qwUserName" v-if="activeTab === 'account'">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.qwUserName"
|
|
|
+ placeholder="请输入企微用户名"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 进粉时间 -->
|
|
|
@@ -80,16 +97,43 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
- <!-- 表格区域 -->
|
|
|
+ <!-- 表格区域:根据 Tab 切换 -->
|
|
|
+ <!-- 销售主体表格 -->
|
|
|
+ <el-table
|
|
|
+ v-if="activeTab === 'summary'"
|
|
|
+ :key="'summary-table'"
|
|
|
+ v-loading="loading"
|
|
|
+ border
|
|
|
+ :data="summaryList"
|
|
|
+ style="width: 100%; margin-top: 10px"
|
|
|
+ @sort-change="handleSummarySortChange"
|
|
|
+ >
|
|
|
+ <el-table-column label="员工姓名" align="center" prop="companyUserName" />
|
|
|
+ <el-table-column label="所属部门" align="center" prop="deptName" />
|
|
|
+ <el-table-column label="进粉数" align="center" prop="fansCount" sortable="custom" />
|
|
|
+ <el-table-column label="订单总金额" align="center" prop="totalAmount" sortable="custom" />
|
|
|
+ <el-table-column label="购买次数" align="center" prop="orderCount" sortable="custom" />
|
|
|
+ <el-table-column label="购买人数" align="center" prop="buyerCount" sortable="custom" />
|
|
|
+ <el-table-column label="操作" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 企微用户统计表格 -->
|
|
|
<el-table
|
|
|
+ v-else
|
|
|
+ :key="'account-table'"
|
|
|
v-loading="loading"
|
|
|
border
|
|
|
- :data="dataList"
|
|
|
+ :data="accountList"
|
|
|
style="width: 100%; margin-top: 10px"
|
|
|
- @sort-change="handleSortChange"
|
|
|
+ @sort-change="handleAccountSortChange"
|
|
|
>
|
|
|
- <el-table-column label="员工姓名" align="center" prop="nickName" />
|
|
|
+ <el-table-column label="员工姓名" align="center" prop="companyUserName" />
|
|
|
<el-table-column label="所属部门" align="center" prop="deptName" />
|
|
|
+ <el-table-column label="企微用户名" align="center" prop="qwUserName" />
|
|
|
<el-table-column label="进粉数" align="center" prop="fansCount" sortable="custom" />
|
|
|
<el-table-column label="订单总金额" align="center" prop="totalAmount" sortable="custom" />
|
|
|
<el-table-column label="购买次数" align="center" prop="orderCount" sortable="custom" />
|
|
|
@@ -110,6 +154,7 @@
|
|
|
@pagination="getList"
|
|
|
/>
|
|
|
|
|
|
+ <!-- 详情弹窗 -->
|
|
|
<el-dialog title="用户购买明细" :visible.sync="detailVisible" width="70%">
|
|
|
<el-table v-loading="detailLoading" :data="userDetailList" border>
|
|
|
<el-table-column label="客户昵称" prop="nickName" />
|
|
|
@@ -130,10 +175,10 @@
|
|
|
<script>
|
|
|
import { treeselect } from "@/api/company/companyDept";
|
|
|
import { listCompanyUser } from "@/api/company/companyUser";
|
|
|
-import { getSalesStatistics,salesUserDetail } from "@/api/company/statistics";
|
|
|
+import { getSalesStatistics, salesUserDetail, getSalesAccountStat } from "@/api/company/statistics";
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
-import {allCorp} from "@/api/qw/qwCompany";
|
|
|
+import { allCorp } from "@/api/qw/qwCompany";
|
|
|
|
|
|
export default {
|
|
|
name: "SalesStat",
|
|
|
@@ -148,14 +193,17 @@ export default {
|
|
|
userLoading: false,
|
|
|
addTimeRange: null,
|
|
|
orderTimeRange: null,
|
|
|
- sortField: '',
|
|
|
- sortOrder: '',
|
|
|
+ // 当前激活的 Tab
|
|
|
+ activeTab: "summary",
|
|
|
+ // 两个表格分别存储数据
|
|
|
+ summaryList: [],
|
|
|
+ accountList: [],
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
deptId: null,
|
|
|
userId: null,
|
|
|
- companyUserNickName: null,
|
|
|
+ companyUserName: null,
|
|
|
startAddTime: null,
|
|
|
endAddTime: null,
|
|
|
startOrderTime: null,
|
|
|
@@ -166,7 +214,6 @@ export default {
|
|
|
qwUserName: null
|
|
|
},
|
|
|
corpOptions: [],
|
|
|
- dataList: [],
|
|
|
// 详情弹窗
|
|
|
detailVisible: false,
|
|
|
detailLoading: false,
|
|
|
@@ -191,16 +238,45 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- /** 表格排序变化时 */
|
|
|
- handleSortChange({ prop, order }) {
|
|
|
- if (order === 'ascending') {
|
|
|
+ /** 切换 Tab */
|
|
|
+ handleTabClick() {
|
|
|
+ // 切换回汇总时,清空企微用户名搜索条件
|
|
|
+ if (this.activeTab === 'summary') {
|
|
|
+ this.queryParams.qwUserName = null;
|
|
|
+ }
|
|
|
+ // 清空当前表格数据和分页,但不发送请求
|
|
|
+ if (this.activeTab === 'summary') {
|
|
|
+ this.summaryList = [];
|
|
|
+ } else {
|
|
|
+ this.accountList = [];
|
|
|
+ }
|
|
|
+ this.total = 0;
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 汇总表格排序 */
|
|
|
+ handleSummarySortChange({ prop, order }) {
|
|
|
+ if (order === "ascending") {
|
|
|
this.queryParams.orderByColumn = prop;
|
|
|
- this.queryParams.isAsc = 'asc';
|
|
|
- } else if (order === 'descending') {
|
|
|
+ this.queryParams.isAsc = "asc";
|
|
|
+ } else if (order === "descending") {
|
|
|
this.queryParams.orderByColumn = prop;
|
|
|
- this.queryParams.isAsc = 'desc';
|
|
|
+ this.queryParams.isAsc = "desc";
|
|
|
+ } else {
|
|
|
+ this.queryParams.orderByColumn = null;
|
|
|
+ this.queryParams.isAsc = null;
|
|
|
+ }
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 账号表格排序 */
|
|
|
+ handleAccountSortChange({ prop, order }) {
|
|
|
+ if (order === "ascending") {
|
|
|
+ this.queryParams.orderByColumn = prop;
|
|
|
+ this.queryParams.isAsc = "asc";
|
|
|
+ } else if (order === "descending") {
|
|
|
+ this.queryParams.orderByColumn = prop;
|
|
|
+ this.queryParams.isAsc = "desc";
|
|
|
} else {
|
|
|
- // 取消排序
|
|
|
this.queryParams.orderByColumn = null;
|
|
|
this.queryParams.isAsc = null;
|
|
|
}
|
|
|
@@ -212,7 +288,7 @@ export default {
|
|
|
this.deptOptions = response.data || [];
|
|
|
});
|
|
|
},
|
|
|
- /** 部门变更时加载员工列表 */
|
|
|
+ /** 部门变更时加载员工列表,但不触发列表查询 */
|
|
|
handleDeptChange() {
|
|
|
this.queryParams.userId = null;
|
|
|
this.userList = [];
|
|
|
@@ -226,7 +302,7 @@ export default {
|
|
|
this.userLoading = false;
|
|
|
});
|
|
|
}
|
|
|
- this.handleQuery();
|
|
|
+ // 移除 this.handleQuery()
|
|
|
},
|
|
|
/** 进粉时间变更 */
|
|
|
changeAddTime(val) {
|
|
|
@@ -261,35 +337,56 @@ export default {
|
|
|
this.userList = [];
|
|
|
this.queryParams.orderByColumn = null;
|
|
|
this.queryParams.isAsc = null;
|
|
|
+ // 重置后保留 queryForm 已清空 qwUserName,再手动确保
|
|
|
+ this.queryParams.qwUserName = null;
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
- /** 获取列表数据 */
|
|
|
+ /** 获取列表数据(根据 activeTab 调不同接口) */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
- getSalesStatistics(this.queryParams).then(response => {
|
|
|
- this.dataList = response.rows || [];
|
|
|
+ // 构建请求参数,确保汇总标签不传入 qwUserName
|
|
|
+ const params = { ...this.queryParams };
|
|
|
+ if (this.activeTab === "summary") {
|
|
|
+ params.qwUserName = undefined; // 移除该字段
|
|
|
+ }
|
|
|
+ const request = this.activeTab === "summary"
|
|
|
+ ? getSalesStatistics(params)
|
|
|
+ : getSalesAccountStat(params);
|
|
|
+
|
|
|
+ request.then(response => {
|
|
|
+ if (this.activeTab === "summary") {
|
|
|
+ this.summaryList = response.rows || [];
|
|
|
+ } else {
|
|
|
+ this.accountList = response.rows || [];
|
|
|
+ }
|
|
|
this.total = response.total || 0;
|
|
|
this.loading = false;
|
|
|
}).catch(() => {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
+ /** 打开详情弹窗 */
|
|
|
handleDetail(row) {
|
|
|
+ // 兼容汇总表 (userId) 和账号表 (companyUserId)
|
|
|
+ const userId = row.userId || row.companyUserId;
|
|
|
+ if (!userId) return;
|
|
|
this.detailVisible = true;
|
|
|
- this.currentEmployee = row; // 存储员工信息
|
|
|
- this.detailQuery.companyUserId = row.userId;
|
|
|
+ this.currentEmployee = row;
|
|
|
+ this.detailQuery.companyUserId = userId;
|
|
|
this.detailQuery.pageNum = 1;
|
|
|
- // 同时带上主列表已选的下单时间,保证口径一致
|
|
|
this.detailQuery.startOrderTime = this.queryParams.startOrderTime;
|
|
|
this.detailQuery.endOrderTime = this.queryParams.endOrderTime;
|
|
|
this.fetchUserDetail();
|
|
|
},
|
|
|
+ /** 获取明细数据 */
|
|
|
fetchUserDetail() {
|
|
|
this.detailLoading = true;
|
|
|
salesUserDetail(this.detailQuery).then(res => {
|
|
|
this.userDetailList = res.rows;
|
|
|
this.detailTotal = res.total;
|
|
|
this.detailLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.detailLoading = false;
|
|
|
});
|
|
|
}
|
|
|
}
|