|
|
@@ -2,7 +2,7 @@
|
|
|
<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"
|
|
|
@@ -10,38 +10,29 @@
|
|
|
v-model="queryParams.deptId"
|
|
|
:options="deptOptions"
|
|
|
placeholder="请选择归属部门"
|
|
|
- @select="handleDeptChange"
|
|
|
+ @input="handleDeptChange"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="员工姓名" prop="companyUserNickName">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.companyUserNickName"
|
|
|
- placeholder="请输入员工姓名"
|
|
|
+ <!-- 员工选择(根据部门联动) -->
|
|
|
+ <el-form-item label="员工" prop="userId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.userId"
|
|
|
+ placeholder="请选择员工"
|
|
|
clearable
|
|
|
+ filterable
|
|
|
size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
+ :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="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">
|
|
|
@@ -80,13 +71,24 @@
|
|
|
</el-form>
|
|
|
|
|
|
<!-- 表格区域 -->
|
|
|
- <el-table v-loading="loading" border :data="dataList" style="width: 100%; margin-top: 10px">
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ border
|
|
|
+ :data="dataList"
|
|
|
+ style="width: 100%; margin-top: 10px"
|
|
|
+ @sort-change="handleSortChange"
|
|
|
+ >
|
|
|
<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-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>
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
@@ -97,13 +99,28 @@
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
@pagination="getList"
|
|
|
/>
|
|
|
+
|
|
|
+ <el-dialog title="用户购买明细" :visible.sync="detailVisible" width="70%">
|
|
|
+ <el-table v-loading="detailLoading" :data="userDetailList" border>
|
|
|
+ <el-table-column label="客户昵称" prop="nickName" />
|
|
|
+ <el-table-column label="购买次数" prop="orderCount" sortable="custom" />
|
|
|
+ <el-table-column label="购买总金额" prop="totalAmount" sortable="custom" />
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="detailTotal > 0"
|
|
|
+ :total="detailTotal"
|
|
|
+ :page.sync="detailQuery.pageNum"
|
|
|
+ :limit.sync="detailQuery.pageSize"
|
|
|
+ @pagination="fetchUserDetail"
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { treeselect } from "@/api/company/companyDept";
|
|
|
-import { listUserByDept } from "@/api/company/companyUser";
|
|
|
-import { getSalesStatistics } from "@/api/company/statistics";
|
|
|
+import { listCompanyUser } from "@/api/company/companyUser";
|
|
|
+import { getSalesStatistics,salesUserDetail } from "@/api/company/statistics";
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
|
|
@@ -112,22 +129,16 @@ export default {
|
|
|
components: { Treeselect },
|
|
|
data() {
|
|
|
return {
|
|
|
- // 显示搜索条件
|
|
|
showSearch: true,
|
|
|
- // 遮罩层
|
|
|
loading: false,
|
|
|
- // 总条数
|
|
|
total: 0,
|
|
|
- // 部门树选项
|
|
|
deptOptions: [],
|
|
|
- // 员工下拉列表
|
|
|
userList: [],
|
|
|
userLoading: false,
|
|
|
- // 进粉时间范围
|
|
|
addTimeRange: null,
|
|
|
- // 下单时间范围
|
|
|
orderTimeRange: null,
|
|
|
- // 查询参数
|
|
|
+ sortField: '',
|
|
|
+ sortOrder: '',
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
@@ -137,10 +148,26 @@ export default {
|
|
|
startAddTime: null,
|
|
|
endAddTime: null,
|
|
|
startOrderTime: null,
|
|
|
- endOrderTime: null
|
|
|
+ endOrderTime: null,
|
|
|
+ orderByColumn: null,
|
|
|
+ isAsc: null
|
|
|
+ },
|
|
|
+ dataList: [],
|
|
|
+ // 详情弹窗
|
|
|
+ detailVisible: false,
|
|
|
+ detailLoading: false,
|
|
|
+ userDetailList: [],
|
|
|
+ detailTotal: 0,
|
|
|
+ detailQuery: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ companyUserId: null,
|
|
|
+ startOrderTime: null,
|
|
|
+ endOrderTime: null,
|
|
|
+ orderByColumn: null,
|
|
|
+ isAsc: null
|
|
|
},
|
|
|
- // 表格数据
|
|
|
- dataList: []
|
|
|
+ currentEmployee: null
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -148,6 +175,21 @@ export default {
|
|
|
this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
+ /** 表格排序变化时 */
|
|
|
+ handleSortChange({ 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;
|
|
|
+ }
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
/** 查询部门树 */
|
|
|
getDeptTree() {
|
|
|
treeselect().then(response => {
|
|
|
@@ -155,13 +197,14 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
/** 部门变更时加载员工列表 */
|
|
|
- handleDeptChange(deptId) {
|
|
|
+ handleDeptChange() {
|
|
|
this.queryParams.userId = null;
|
|
|
this.userList = [];
|
|
|
+ const deptId = this.queryParams.deptId;
|
|
|
if (deptId) {
|
|
|
this.userLoading = true;
|
|
|
- listUserByDept(deptId).then(response => {
|
|
|
- this.userList = response.data || [];
|
|
|
+ listCompanyUser({ deptId: deptId }).then(response => {
|
|
|
+ this.userList = response.rows || [];
|
|
|
this.userLoading = false;
|
|
|
}).catch(() => {
|
|
|
this.userLoading = false;
|
|
|
@@ -200,6 +243,8 @@ export default {
|
|
|
this.orderTimeRange = null;
|
|
|
this.resetForm("queryForm");
|
|
|
this.userList = [];
|
|
|
+ this.queryParams.orderByColumn = null;
|
|
|
+ this.queryParams.isAsc = null;
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
/** 获取列表数据 */
|
|
|
@@ -212,6 +257,24 @@ export default {
|
|
|
}).catch(() => {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
+ },
|
|
|
+ handleDetail(row) {
|
|
|
+ this.detailVisible = true;
|
|
|
+ this.currentEmployee = row; // 存储员工信息
|
|
|
+ this.detailQuery.companyUserId = row.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;
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|