完成用户管理（主管、员工、管理员、用户）+课程模块+仪表盘+主管绩效分页查询+员工绩效分夜查询+主管抽成占比+员工抽成占比+用户申请员工分页查询+审核通过+审核驳回
This commit is contained in:
@ -1,43 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted} from "vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {ref, onMounted, reactive} from "vue";
|
||||
import {useRouter, useRoute} from "vue-router";
|
||||
import {message} from "ant-design-vue";
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
const visible = ref(false); // 控制弹窗显示
|
||||
const newRate = ref(""); // 新比例值
|
||||
const updating = ref(false); // 更新状态
|
||||
// 获取路由参数
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const managerId = ref(route.query.managerId as string || "");
|
||||
|
||||
// 修改列定义为主管业绩相关字段
|
||||
// 定义员工绩效数据结构
|
||||
interface EmployeePerformance {
|
||||
id: number;
|
||||
nickName: string;
|
||||
phoneNumber: string;
|
||||
promoCount: number;
|
||||
orderCount: number;
|
||||
totalAmount: number;
|
||||
netAmount: number;
|
||||
tokenLess: number; // 待释放
|
||||
toString: number; // 可结算
|
||||
refunded: number; // 已回退
|
||||
userId: number;
|
||||
}
|
||||
|
||||
// 修改列定义以匹配接口返回的字段
|
||||
const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'userId',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '员工姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
dataIndex: 'nickName',
|
||||
key: 'nickName',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
dataIndex: 'phoneNumber',
|
||||
key: 'phoneNumber',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '员工数',
|
||||
dataIndex: 'staffCount',
|
||||
key: 'staffCount',
|
||||
width: 80,
|
||||
},{
|
||||
title: '订单总金额',
|
||||
dataIndex: 'totalAmount',
|
||||
key: 'totalAmount',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},{
|
||||
title: '净成交',
|
||||
dataIndex: 'netAmount',
|
||||
key: 'netAmount',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '推广数',
|
||||
dataIndex: 'promotionCount',
|
||||
key: 'promotionCount',
|
||||
dataIndex: 'promoCount',
|
||||
key: 'promoCount',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '比例',
|
||||
dataIndex: 'ratio',
|
||||
key: 'ratio',
|
||||
title: '客户数量',
|
||||
dataIndex: 'empCount',
|
||||
key: 'empCount',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
@ -48,45 +92,31 @@ const columns = [
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '总订单',
|
||||
dataIndex: 'totalOrders',
|
||||
key: 'totalOrders',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '退款',
|
||||
dataIndex: 'refund',
|
||||
key: 'refund',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '净成交',
|
||||
dataIndex: 'netAmount',
|
||||
key: 'netAmount',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '待释放',
|
||||
dataIndex: 'pendingRelease',
|
||||
key: 'pendingRelease',
|
||||
dataIndex: 'toRelease',
|
||||
key: 'toRelease',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '可结算',
|
||||
dataIndex: 'settleable',
|
||||
key: 'settleable',
|
||||
dataIndex: 'toSettle',
|
||||
key: 'toSettle',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '已结算',
|
||||
dataIndex: 'settled',
|
||||
key: 'settled',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '已回退',
|
||||
dataIndex: 'returned',
|
||||
key: 'returned',
|
||||
dataIndex: 'refunded',
|
||||
key: 'refunded',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
},
|
||||
@ -99,115 +129,243 @@ const columns = [
|
||||
}
|
||||
];
|
||||
|
||||
// 定义主管业绩数据结构
|
||||
interface ManagerPerformance {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
staffCount: number;
|
||||
promotionCount: number;
|
||||
ratio: string;
|
||||
orderCount: number;
|
||||
totalOrders: number;
|
||||
refund: number;
|
||||
netAmount: number;
|
||||
pendingRelease: number;
|
||||
settleable: number;
|
||||
returned: number;
|
||||
}
|
||||
|
||||
const tableData = ref<ManagerPerformance[]>([]);
|
||||
const tableData = ref<EmployeePerformance[]>([]);
|
||||
const loading = ref(false);
|
||||
const searchName = ref("");
|
||||
const searchPhone = ref("");
|
||||
|
||||
// 生成模拟数据
|
||||
const generateMockData = () => {
|
||||
const mockData: ManagerPerformance[] = [];
|
||||
const names = ['张员工', '李员工', '王员工', '赵员工', '钱员工', '孙员工', '周员工', '吴员工'];
|
||||
const phones = ['13800138000', '13900139000', '13700137000', '13600136000', '13500135000', '13400134000', '13300133000', '13200132000'];
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条记录`,
|
||||
pageSizeOptions: ['10', '20', '30', '50'],
|
||||
});
|
||||
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const nameIndex = i % names.length;
|
||||
const phoneIndex = i % phones.length;
|
||||
|
||||
mockData.push({
|
||||
id: i + 1,
|
||||
name: names[nameIndex],
|
||||
phone: phones[phoneIndex],
|
||||
staffCount: Math.floor(Math.random() * 20) + 5,
|
||||
promotionCount: Math.floor(Math.random() * 100) + 50,
|
||||
ratio: `${Math.floor(Math.random() * 20) + 10}%`,
|
||||
orderCount: Math.floor(Math.random() * 500) + 100,
|
||||
totalOrders: Math.floor(Math.random() * 1000) + 500,
|
||||
refund: Math.floor(Math.random() * 50) + 10,
|
||||
netAmount: Math.floor(Math.random() * 50000) + 10000,
|
||||
pendingRelease: Math.floor(Math.random() * 10000) + 5000,
|
||||
settleable: Math.floor(Math.random() * 30000) + 10000,
|
||||
returned: Math.floor(Math.random() * 5000) + 1000
|
||||
});
|
||||
}
|
||||
|
||||
return mockData;
|
||||
};
|
||||
|
||||
const originalTableData = ref<ManagerPerformance[]>([]);
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = () => {
|
||||
if (!searchName.value.trim() && !searchPhone.value.trim()) {
|
||||
tableData.value = [...originalTableData.value];
|
||||
// 获取员工业绩数据
|
||||
const fetchEmployeePerformance = async () => {
|
||||
if (!managerId.value) {
|
||||
message.error("缺少主管ID参数");
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = originalTableData.value.filter(item => {
|
||||
const nameMatch = searchName.value ? item.name.includes(searchName.value) : true;
|
||||
const phoneMatch = searchPhone.value ? item.phone.includes(searchPhone.value) : true;
|
||||
return nameMatch && phoneMatch;
|
||||
});
|
||||
loading.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
|
||||
if (filtered.length === 0) {
|
||||
message.warning("未找到匹配员工业绩数据");
|
||||
tableData.value = [];
|
||||
} else {
|
||||
tableData.value = filtered;
|
||||
try {
|
||||
const params = {
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
nickName: searchName.value,
|
||||
phoneNumber: searchPhone.value,
|
||||
supervisorUserId: managerId.value, // 使用路由传递的managerId
|
||||
sortField: "",
|
||||
sortOrder: "",
|
||||
};
|
||||
|
||||
const response: any = await myAxios.post(
|
||||
"/perform/staff/page",
|
||||
params,
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
console.log(response)
|
||||
if (response.code === 1) {
|
||||
tableData.value = response.data.records;
|
||||
pagination.total = response.data.total || 0;
|
||||
} else {
|
||||
message.error(response.message || "获取数据失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取员工业绩数据失败:", error);
|
||||
message.error("获取数据失败，请重试");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理分页变化
|
||||
const handlePaginationChange = (pag: { current: number; pageSize: number }) => {
|
||||
pagination.current = pag.current;
|
||||
pagination.pageSize = pag.pageSize;
|
||||
fetchEmployeePerformance();
|
||||
};
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
fetchEmployeePerformance();
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const reset = () => {
|
||||
searchName.value = "";
|
||||
searchPhone.value = "";
|
||||
tableData.value = [...originalTableData.value];
|
||||
pagination.current = 1;
|
||||
fetchEmployeePerformance();
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 查看员工绩效明细 - 添加跳转功能
|
||||
const viewStaffPerformance = (record: ManagerPerformance) => {
|
||||
// 跳转到员工绩效页面，并传递主管ID作为参数
|
||||
// 查看客户订单明细
|
||||
const viewCustomerOrders = (record: EmployeePerformance) => {
|
||||
router.push({
|
||||
path: '/customerOrder',
|
||||
query: {
|
||||
managerId: record.id,
|
||||
managerName: record.name
|
||||
employeeId: record.userId,
|
||||
employeeName: record.nickName
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.push('/performanceManagement');
|
||||
};
|
||||
const proportionRate = ref(''); // 默认值
|
||||
// 获取抽成比例
|
||||
const fetchProportionRate = async () => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
const response: any = await myAxios.post(
|
||||
"/perform/query/level/rate",
|
||||
{ level: "second" }, // 按照接口要求发送level参数
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
|
||||
if (response.code === 1) {
|
||||
proportionRate.value = response.data;
|
||||
} else {
|
||||
message.error(response.message || "获取抽成比例失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取抽成比例失败:", error);
|
||||
message.error("获取抽成比例失败，请重试");
|
||||
}
|
||||
};
|
||||
|
||||
// 打开修改比例弹窗
|
||||
const openRateModal = () => {
|
||||
newRate.value = proportionRate.value.toString();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
// 更新比例
|
||||
const updateProportionRate = async () => {
|
||||
// 验证输入
|
||||
if (!newRate.value) {
|
||||
message.warning("请输入抽成比例");
|
||||
return;
|
||||
}
|
||||
|
||||
const rateValue = parseFloat(newRate.value);
|
||||
if (isNaN(rateValue)) {
|
||||
message.warning("请输入有效的数字");
|
||||
return;
|
||||
}
|
||||
|
||||
if (rateValue < 0 || rateValue > 1) {
|
||||
message.warning("比例值应在0到1之间");
|
||||
return;
|
||||
}
|
||||
|
||||
updating.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
|
||||
try {
|
||||
const response: any = await myAxios.post(
|
||||
"/perform/update/rate",
|
||||
{
|
||||
level: "second",
|
||||
rate: parseFloat(rateValue.toFixed(2)) // 确保转换为数字类型
|
||||
},
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
|
||||
if (response.code === 1) {
|
||||
message.success("抽成比例更新成功");
|
||||
// 修复语法错误：移除命名参数
|
||||
proportionRate.value = parseFloat(rateValue.toFixed(2)).toString();
|
||||
visible.value = false;
|
||||
} else {
|
||||
message.error(response.message || "更新抽成比例失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("更新抽成比例失败:", error);
|
||||
message.error("更新抽成比例失败，请重试");
|
||||
} finally {
|
||||
updating.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loading.value = true;
|
||||
// 模拟数据加载延迟
|
||||
setTimeout(() => {
|
||||
const mockData = generateMockData();
|
||||
tableData.value = mockData;
|
||||
originalTableData.value = mockData;
|
||||
loading.value = false;
|
||||
}, 800);
|
||||
// 确保有managerId参数
|
||||
if (!managerId.value) {
|
||||
message.warning("未获取到主管ID");
|
||||
goBack();
|
||||
return;
|
||||
}
|
||||
|
||||
fetchEmployeePerformance();
|
||||
fetchProportionRate();
|
||||
});
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/project');
|
||||
|
||||
const filterNameInput = (e: Event) => {
|
||||
const input = e.target as HTMLInputElement;
|
||||
let value = input.value;
|
||||
|
||||
// 使用正则表达式过滤非中文字符
|
||||
// value = value.replace(/[^\u4e00-\u9fa5]/g, '');
|
||||
value = value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '');
|
||||
// 更新输入框值
|
||||
input.value = value;
|
||||
searchName.value = value;
|
||||
};
|
||||
const filterPhoneInput = (e: Event) => {
|
||||
const input = e.target as HTMLInputElement;
|
||||
let value = input.value;
|
||||
|
||||
// 1. 移除非数字字符
|
||||
value = value.replace(/\D/g, '');
|
||||
|
||||
// 2. 限制最多11位数字
|
||||
if (value.length > 11) {
|
||||
value = value.slice(0, 11);
|
||||
}
|
||||
|
||||
// 更新输入框值
|
||||
input.value = value;
|
||||
searchPhone.value = value;
|
||||
};
|
||||
|
||||
const filterRateInput = (e: Event) => {
|
||||
const input = e.target as HTMLInputElement;
|
||||
let value = input.value;
|
||||
|
||||
// 1. 移除非数字和非小数点的字符（但允许小数点）
|
||||
value = value.replace(/[^\d.]/g, '');
|
||||
|
||||
// 2. 确保只有一个小数点
|
||||
const decimalParts = value.split('.');
|
||||
if (decimalParts.length > 2) {
|
||||
// 如果有多个小数点，只保留第一个和第二个之间的内容
|
||||
value = decimalParts[0] + '.' + decimalParts.slice(1).join('');
|
||||
}
|
||||
|
||||
// 3. 限制小数点后最多两位数字
|
||||
if (decimalParts.length > 1) {
|
||||
value = decimalParts[0] + '.' + decimalParts[1].slice(0, 2);
|
||||
}
|
||||
|
||||
// 4. 如果以小数点开头，在前面添加0
|
||||
if (value.startsWith('.')) {
|
||||
value = '0' + value;
|
||||
}
|
||||
|
||||
// 5. 更新输入框值
|
||||
input.value = value;
|
||||
newRate.value = value;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -217,52 +375,78 @@ const goBack = () => {
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="员工姓名">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
<a-input
|
||||
style="width: 200px"
|
||||
placeholder="请输入员工姓名"
|
||||
class="custom-search"
|
||||
enter-button
|
||||
v-model:value="searchName"
|
||||
@pressEnter="handleSearch"
|
||||
@click="handleSearch"
|
||||
@input="filterNameInput"
|
||||
class="custom-search"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
<a-input
|
||||
style="width: 200px"
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="searchPhone"
|
||||
@pressEnter="handleSearch"
|
||||
enter-button
|
||||
class="custom-search"
|
||||
@input="filterPhoneInput"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button class="custom-button" @click="handleSearch" style="margin-right: 10px">搜索</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a-button class="custom-button" @click="goBack">返回</a-button>
|
||||
<a-button @click="goBack" style="margin-left: 10px" class="custom-button">返回</a-button>
|
||||
抽成占比<a-tag color="orange">{{ proportionRate }}</a-tag>
|
||||
<a-button @click="openRateModal" style="margin-left: 10px" class="custom-button">修改比例</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- 添加修改比例弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="修改抽成比例"
|
||||
@ok="updateProportionRate"
|
||||
:confirm-loading="updating"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="新比例值（0-1之间）">
|
||||
<a-input
|
||||
v-model:value="newRate"
|
||||
placeholder="请输入比例值（如0.35）"
|
||||
@keyup.enter="updateProportionRate"
|
||||
@input="filterRateInput"
|
||||
|
||||
/>
|
||||
<div style="margin-top: 8px; color: #999">
|
||||
提示：比例值应为0到1之间的小数（如0.35表示35%），保留两位小数
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:scroll="{ x: 1500 }"
|
||||
:scroll="{ x: 1600, y: 550 }"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@change="handlePaginationChange"
|
||||
bordered
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 金额格式化 -->
|
||||
<template v-if="['netAmount', 'pendingRelease', 'settleable', 'returned','refund'].includes(column.dataIndex)">
|
||||
¥{{ record[column.dataIndex as keyof ManagerPerformance].toLocaleString() }}
|
||||
<template v-if="['totalAmount', 'netAmount', 'tokenLess', 'toString', 'refunded','toSettle','settled'].includes(column.dataIndex)">
|
||||
¥{{ (record[column.dataIndex as keyof EmployeePerformance] || 0).toLocaleString() }}
|
||||
</template>
|
||||
|
||||
<!-- 操作列 - 添加点击事件 -->
|
||||
<!-- 操作列 -->
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-button
|
||||
size="small"
|
||||
@click="viewStaffPerformance(record)"
|
||||
@click="viewCustomerOrders(record)"
|
||||
>
|
||||
客户订单明细
|
||||
</a-button>
|
||||
@ -278,6 +462,8 @@ const goBack = () => {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) > tr > th {
|
||||
@ -289,12 +475,14 @@ const goBack = () => {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
.search-box .ant-form-item {
|
||||
.search-box {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.search-box .ant-space {
|
||||
width: 100%;
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
@ -307,7 +495,7 @@ const goBack = () => {
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
color:#fff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@ -322,8 +510,11 @@ const goBack = () => {
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user