|
|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 搜索表单 -->
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
|
|
|
+ <!-- 部门选择(树形选择器,参考已有页面) -->
|
|
|
+ <el-form-item label="归属部门" prop="deptId">
|
|
|
+ <treeselect
|
|
|
+ style="width: 220px"
|
|
|
+ :clearable="true"
|
|
|
+ v-model="queryParams.deptId"
|
|
|
+ :options="deptOptions"
|
|
|
+ placeholder="请选择归属部门"
|
|
|
+ @select="handleDeptChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="员工姓名" prop="companyUserNickName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.companyUserNickName"
|
|
|
+ placeholder="请输入员工姓名"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 员工选择(根据部门联动) -->
|
|
|
+<!-- <el-form-item label="员工" prop="userId">-->
|
|
|
+<!-- <el-select-->
|
|
|
+<!-- v-model="queryParams.userId"-->
|
|
|
+<!-- placeholder="请选择员工"-->
|
|
|
+<!-- clearable-->
|
|
|
+<!-- filterable-->
|
|
|
+<!-- size="small"-->
|
|
|
+<!-- :loading="userLoading"-->
|
|
|
+<!-- @change="handleQuery"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <el-option-->
|
|
|
+<!-- v-for="user in userList"-->
|
|
|
+<!-- :key="user.userId"-->
|
|
|
+<!-- :label="user.nickName || user.userName"-->
|
|
|
+<!-- :value="user.userId"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </el-select>-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+
|
|
|
+ <!-- 进粉时间 -->
|
|
|
+ <el-form-item label="进粉时间" prop="addTimeRange">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="addTimeRange"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ @change="changeAddTime"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 下单时间 -->
|
|
|
+ <el-form-item label="下单时间" prop="orderTimeRange">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="orderTimeRange"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ @change="changeOrderTime"
|
|
|
+ />
|
|
|
+ </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-table v-loading="loading" border :data="dataList" style="width: 100%; margin-top: 10px">
|
|
|
+ <el-table-column label="员工姓名" align="center" prop="nickName" />
|
|
|
+ <el-table-column label="所属部门" align="center" prop="deptName" />
|
|
|
+ <el-table-column label="进粉数" align="center" prop="fansCount" />
|
|
|
+ <el-table-column label="订单总金额" align="center" prop="totalAmount" />
|
|
|
+ <el-table-column label="购买次数" align="center" prop="orderCount" />
|
|
|
+ <el-table-column label="购买人数" align="center" prop="buyerCount" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { treeselect } from "@/api/company/companyDept";
|
|
|
+import { listUserByDept } from "@/api/company/companyUser";
|
|
|
+import { getSalesStatistics } from "@/api/company/statistics";
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "SalesStat",
|
|
|
+ components: { Treeselect },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 遮罩层
|
|
|
+ loading: false,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 部门树选项
|
|
|
+ deptOptions: [],
|
|
|
+ // 员工下拉列表
|
|
|
+ userList: [],
|
|
|
+ userLoading: false,
|
|
|
+ // 进粉时间范围
|
|
|
+ addTimeRange: null,
|
|
|
+ // 下单时间范围
|
|
|
+ orderTimeRange: null,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ deptId: null,
|
|
|
+ userId: null,
|
|
|
+ companyUserNickName: null,
|
|
|
+ startAddTime: null,
|
|
|
+ endAddTime: null,
|
|
|
+ startOrderTime: null,
|
|
|
+ endOrderTime: null
|
|
|
+ },
|
|
|
+ // 表格数据
|
|
|
+ dataList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDeptTree();
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询部门树 */
|
|
|
+ getDeptTree() {
|
|
|
+ treeselect().then(response => {
|
|
|
+ this.deptOptions = response.data || [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 部门变更时加载员工列表 */
|
|
|
+ handleDeptChange(deptId) {
|
|
|
+ this.queryParams.userId = null;
|
|
|
+ this.userList = [];
|
|
|
+ if (deptId) {
|
|
|
+ this.userLoading = true;
|
|
|
+ listUserByDept(deptId).then(response => {
|
|
|
+ this.userList = response.data || [];
|
|
|
+ this.userLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.userLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 进粉时间变更 */
|
|
|
+ changeAddTime(val) {
|
|
|
+ if (val) {
|
|
|
+ this.queryParams.startAddTime = val[0];
|
|
|
+ this.queryParams.endAddTime = val[1];
|
|
|
+ } else {
|
|
|
+ this.queryParams.startAddTime = null;
|
|
|
+ this.queryParams.endAddTime = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 下单时间变更 */
|
|
|
+ changeOrderTime(val) {
|
|
|
+ if (val) {
|
|
|
+ this.queryParams.startOrderTime = val[0];
|
|
|
+ this.queryParams.endOrderTime = val[1];
|
|
|
+ } else {
|
|
|
+ this.queryParams.startOrderTime = null;
|
|
|
+ this.queryParams.endOrderTime = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 搜索按钮 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮 */
|
|
|
+ resetQuery() {
|
|
|
+ this.addTimeRange = null;
|
|
|
+ this.orderTimeRange = null;
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.userList = [];
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 获取列表数据 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ getSalesStatistics(this.queryParams).then(response => {
|
|
|
+ this.dataList = response.rows || [];
|
|
|
+ this.total = response.total || 0;
|
|
|
+ this.loading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 可根据需要添加自定义样式 */
|
|
|
+</style>
|