538 lines
13 KiB
Vue
538 lines
13 KiB
Vue
<script setup lang="ts">
|
||
import {ref, onMounted, reactive} from "vue";
|
||
import {useRouter} from "vue-router";
|
||
import {message, Modal} from "ant-design-vue";
|
||
import myAxios from "../../api/myAxios.ts";
|
||
const visible = ref(false); // 控制弹窗显示
|
||
const newRate = ref(""); // 新比例值
|
||
const updating = ref(false); // 更新状态
|
||
// 修改列定义以匹配接口返回的字段
|
||
const columns = [
|
||
{
|
||
title: 'id',
|
||
dataIndex: 'id',
|
||
key: 'id',
|
||
width: 100,
|
||
fixed: 'left',
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '主管ID',
|
||
dataIndex: 'userId',
|
||
key: 'userId',
|
||
width: 100,
|
||
fixed: 'left',
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '主管姓名',
|
||
dataIndex: 'nickName',
|
||
key: 'nickName',
|
||
width: 100,
|
||
fixed: 'left',
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '手机号',
|
||
dataIndex: 'phoneNumber',
|
||
key: 'phoneNumber',
|
||
width: 120,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '订单总金额',
|
||
dataIndex: 'totalAmount',
|
||
key: 'totalAmount',
|
||
width: 90,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '净成交',
|
||
dataIndex: 'netAmount',
|
||
key: 'netAmount',
|
||
width: 100,
|
||
align: 'center'
|
||
}, {
|
||
title: '推广数',
|
||
dataIndex: 'promoCount',
|
||
key: 'promoCount',
|
||
width: 80,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '员工数',
|
||
dataIndex: 'empCount',
|
||
key: 'empCount',
|
||
width: 80,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '下单量',
|
||
dataIndex: 'orderCount',
|
||
key: 'orderCount',
|
||
width: 80,
|
||
align: 'center'
|
||
},
|
||
|
||
|
||
{
|
||
title: '待释放',
|
||
dataIndex: 'toRelease',
|
||
key: 'toRelease',
|
||
width: 90,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '可结算',
|
||
dataIndex: 'toSettle',
|
||
key: 'toSettle',
|
||
width: 90,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '已结算',
|
||
dataIndex: 'settled',
|
||
key: 'settled',
|
||
width: 90,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '已回退',
|
||
dataIndex: 'refunded',
|
||
key: 'refunded',
|
||
width: 90,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
fixed: 'right',
|
||
width: 130,
|
||
align: 'center'
|
||
}
|
||
];
|
||
|
||
// 定义主管业绩数据结构以匹配接口
|
||
interface ManagerPerformance {
|
||
id: number;
|
||
nickName: string;
|
||
phoneNumber: string;
|
||
empCount: number;
|
||
promoCount: number;
|
||
orderCount: number;
|
||
totalAmount: number;
|
||
netAmount: number;
|
||
toRelease: number;
|
||
toSettle: number;
|
||
refunded: number;
|
||
userId: number;
|
||
}
|
||
|
||
const tableData = ref<ManagerPerformance[]>([]);
|
||
const loading = ref(false);
|
||
const searchName = ref("");
|
||
const searchPhone = ref("");
|
||
|
||
// 分页配置
|
||
const pagination = reactive({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (total: number) => `共 ${total} 条记录`,
|
||
pageSizeOptions: ['10', '20', '30', '50'],
|
||
});
|
||
|
||
// 获取主管业绩数据
|
||
const fetchManagerPerformance = async () => {
|
||
loading.value = true;
|
||
const storedToken = localStorage.getItem('token');
|
||
try {
|
||
const params = {
|
||
current: pagination.current,
|
||
pageSize: pagination.pageSize,
|
||
nickName: searchName.value,
|
||
phoneNumber: searchPhone.value,
|
||
// 移除不必要的参数
|
||
sortField: "id",
|
||
sortOrder: "",
|
||
startDate: "",
|
||
endDate: ""
|
||
};
|
||
|
||
// 修正请求格式：直接发送params作为请求体
|
||
const response: any = await myAxios.post(
|
||
"/perform/supervisor/page",
|
||
params, // 直接发送params对象作为请求体
|
||
{ headers: { Authorization: storedToken } }
|
||
);
|
||
|
||
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;
|
||
fetchManagerPerformance();
|
||
};
|
||
|
||
|
||
const handleSearch = () => {
|
||
// 验证手机号：如果输入了手机号但不是11位
|
||
if (searchPhone.value && searchPhone.value.length !== 11) {
|
||
message.warning("请输入11位手机号码");
|
||
return; // 不执行搜索
|
||
}
|
||
|
||
pagination.current = 1; // 重置到第一页
|
||
fetchManagerPerformance();
|
||
};
|
||
|
||
// 重置搜索
|
||
const reset = () => {
|
||
searchName.value = "";
|
||
searchPhone.value = "";
|
||
pagination.current = 1;
|
||
fetchManagerPerformance();
|
||
};
|
||
|
||
const router = useRouter();
|
||
|
||
// 查看员工绩效明细
|
||
const viewStaffPerformance = (record: ManagerPerformance) => {
|
||
router.push({
|
||
path: '/employeePerformaince',
|
||
query: {
|
||
managerId: record.userId
|
||
}
|
||
});
|
||
};
|
||
const proportionRate = ref(''); // 默认值
|
||
// 获取抽成比例
|
||
const fetchProportionRate = async () => {
|
||
const storedToken = localStorage.getItem('token');
|
||
try {
|
||
const response: any = await myAxios.post(
|
||
"/perform/query/level/rate",
|
||
{ level: "first" }, // 按照接口要求发送level参数
|
||
{ headers: { Authorization: storedToken } }
|
||
);
|
||
console.log(response)
|
||
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: "first",
|
||
rate: rateValue.toFixed(2) // 保留一位小数
|
||
},
|
||
{ headers: { Authorization: storedToken } }
|
||
);
|
||
|
||
if (response.code === 1) {
|
||
message.success("抽成比例更新成功");
|
||
proportionRate.value = rateValue.toFixed(2);
|
||
visible.value = false;
|
||
} else {
|
||
message.error(response.message || "更新抽成比例失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("更新抽成比例失败:", error);
|
||
message.error("更新抽成比例失败，请重试");
|
||
} finally {
|
||
updating.value = false;
|
||
}
|
||
};
|
||
onMounted(() => {
|
||
fetchProportionRate(); // 调用获取抽成比例
|
||
fetchManagerPerformance();
|
||
|
||
});
|
||
|
||
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;
|
||
};
|
||
|
||
|
||
const settlement = async () => {
|
||
const storedToken = localStorage.getItem('token');
|
||
|
||
// 添加确认提示
|
||
const confirmSettlement = () => {
|
||
return new Promise((resolve) => {
|
||
Modal.confirm({
|
||
title: '确定要执行一键结算吗？',
|
||
content: '此操作会将所有可结算的金额全部加到已结算上，请谨慎操作',
|
||
onOk() { resolve(true); },
|
||
onCancel() { resolve(false); }
|
||
});
|
||
});
|
||
};
|
||
|
||
const proceed = await confirmSettlement();
|
||
if (!proceed) return;
|
||
|
||
try {
|
||
loading.value = true;
|
||
const response: any = await myAxios.post(
|
||
"/perform/unite/settle",
|
||
{}, // 空请求体
|
||
{ headers: { Authorization: storedToken } }
|
||
);
|
||
|
||
if (response.code === 1) {
|
||
message.success("结算成功，页面即将刷新");
|
||
|
||
// 1.5秒后刷新页面数据
|
||
setTimeout(() => {
|
||
fetchManagerPerformance(); // 刷新主管业绩数据
|
||
fetchProportionRate(); // 刷新抽成比例
|
||
}, 1500);
|
||
} else {
|
||
message.error(response.message || "结算失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("结算请求失败:", error);
|
||
message.error("结算失败，请重试");
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 搜索框 -->
|
||
<div class="search-box">
|
||
<a-form layout="inline">
|
||
<a-space>
|
||
<a-form-item label="主管姓名">
|
||
<a-input
|
||
style="width: 300px;border: 1px solid #ffa940;"
|
||
placeholder="请输入主管姓名"
|
||
v-model:value="searchName"
|
||
@click="handleSearch"
|
||
@input="filterNameInput"
|
||
class="custom-search"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item label="手机号">
|
||
<a-input
|
||
style="width: 300px;border: 1px solid #ffa940;"
|
||
placeholder="请输入手机号"
|
||
v-model:value="searchPhone"
|
||
class="custom-search"
|
||
@input="filterPhoneInput"
|
||
/>
|
||
</a-form-item>
|
||
<a-button @click="handleSearch" style="margin-right: 10px" class="custom-button">搜索</a-button>
|
||
<a-button @click="reset">重置</a-button>
|
||
抽成占比<a-tag color="orange">{{ proportionRate }}</a-tag>
|
||
<a-button @click="openRateModal" style="margin-left: 10px" class="custom-button">修改比例</a-button>
|
||
<a-button @click="settlement" 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: 1600, y: 550 }"
|
||
:loading="loading"
|
||
:pagination="pagination"
|
||
@change="handlePaginationChange"
|
||
bordered
|
||
rowKey="id"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<!-- 金额格式化 -->
|
||
<template v-if="['totalAmount', 'netAmount', 'toRelease', 'tosettle', 'refunded','settled','toSettle'].includes(column.dataIndex)">
|
||
¥{{ (record[column.dataIndex as keyof ManagerPerformance] || 0).toLocaleString() }}
|
||
</template>
|
||
|
||
<!-- 操作列 -->
|
||
<template v-if="column.key === 'action'">
|
||
<a-button
|
||
size="small"
|
||
@click="viewStaffPerformance(record)"
|
||
>
|
||
员工绩效明细
|
||
</a-button>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 搜索框样式 */
|
||
.search-box {
|
||
margin-bottom: 20px;
|
||
padding: 16px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* 搜索框输入框聚焦和悬浮状态边框为橙色 */
|
||
.search-box .custom-search :deep(.ant-input:hover),
|
||
.search-box .custom-search :deep(.ant-input:focus) {
|
||
border-color: #ffa940 !important;
|
||
box-shadow: 0 0 0 2px rgba(255, 169, 64, 0.2) !important;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.custom-button {
|
||
background-color: #ffa940;
|
||
color: #fff;
|
||
border: 1px solid #ffa940;
|
||
}
|
||
|
||
.custom-button:hover,
|
||
.custom-button:focus {
|
||
background-color: #ffa940;
|
||
border-color: #ffa940;
|
||
color: #fff;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 搜索按钮样式 */
|
||
.custom-search :deep(.ant-input-search-button) {
|
||
background-color: #ffa940;
|
||
border: 1px solid #ffa940;
|
||
}
|
||
|
||
.custom-search :deep(.ant-input-search-button:hover),
|
||
.custom-search :deep(.ant-input-search-button:focus) {
|
||
background-color: #fa8c16;
|
||
border: 1px solid #ffa940;
|
||
}
|
||
|
||
.custom-search :deep(.ant-input) {
|
||
border-right-color: #ffa940;
|
||
}
|
||
</style> |