Browse Source

CID订单统计增加筛选条件

cgp 9 hours ago
parent
commit
b45fdc93af
2 changed files with 137 additions and 31 deletions
  1. 10 1
      src/api/company/statistics.js
  2. 127 30
      src/views/his/statistics/companyStatisticsCID.vue

+ 10 - 1
src/api/company/statistics.js

@@ -197,7 +197,7 @@ export function treeselect(query) {
   });
 }
 
-// 员工销售CID订单统计部门/员工、进粉时间、下单时间 → 进粉量、订单金额、购买次数、购买人数
+// 员工销售CID订单统计(销售主体维度统计)部门/员工、进粉时间、下单时间 → 进粉量、订单金额、购买次数、购买人数
 export function getSalesStatistics(query) {
   return request({
     url: '/company/statistics/salesStat',
@@ -206,6 +206,15 @@ export function getSalesStatistics(query) {
   });
 }
 
+// 员工销售CID订单统计(企微用户维度统计)
+export function getSalesAccountStat(query) {
+  return request({
+    url: '/company/statistics/salesAccountStat',
+    method: 'post',
+    data: query
+  });
+}
+
 // 员工销售CID订单明细
 export function salesUserDetail(query) {
   return request({

+ 127 - 30
src/views/his/statistics/companyStatisticsCID.vue

@@ -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;
       });
     }
   }