完成用户管理（主管、员工、管理员、用户）+课程模块+仪表盘+主管绩效分页查询+员工绩效分夜查询+主管抽成占比+员工抽成占比+用户申请员工分页查询+审核通过+审核驳回
This commit is contained in:
@ -6,14 +6,14 @@ import router from "../router";
|
||||
|
||||
const myAxios = axios.create({
|
||||
withCredentials: true,
|
||||
// baseURL:'http://localhost:9091'
|
||||
baseURL:'http://localhost:9091'
|
||||
//baseURL:'http://localhost:9092'
|
||||
// baseURL:'http://1.94.237.210:3457'
|
||||
//baseURL:'http://1.94.237.210:8088'
|
||||
//baseURL:'http://27.30.77.229:9091/'
|
||||
//baseURL:'http://27.30.77.229:9092/'
|
||||
// baseURL:'http://160.202.242.36:9092/'
|
||||
baseURL:'http://160.202.242.36:9092/'
|
||||
//baseURL:'http://160.202.242.36:9091/'
|
||||
// baseURL:'http://160.202.242.36:9092/'
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -9,10 +9,18 @@
|
||||
<PieChartOutlined />
|
||||
<span>首页</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="/userList">
|
||||
<UserOutlined />
|
||||
<span>用户列表</span>
|
||||
</a-menu-item>
|
||||
<a-sub-menu>
|
||||
<template #title>
|
||||
<span>
|
||||
<CommentOutlined />
|
||||
<span>用户管理</span>
|
||||
</span>
|
||||
</template>
|
||||
<a-menu-item key="/adminList">管理员列表</a-menu-item>
|
||||
<a-menu-item key="staffList">员工列表</a-menu-item>
|
||||
<a-menu-item key="supervisorList">主管列表</a-menu-item>
|
||||
<a-menu-item key="userList">普通用户列表</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-sub-menu>
|
||||
<template #title>
|
||||
<span>
|
||||
@ -58,6 +66,10 @@
|
||||
<CommentOutlined />
|
||||
<span>业绩管理</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="/employeeApplication">
|
||||
<CommentOutlined />
|
||||
<span>员工申请管理</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
|
||||
</template>
|
||||
|
||||
@ -32,9 +32,24 @@ export const routes = [
|
||||
name: '工作详情',
|
||||
component: () => import("../view/work/workDetail.vue"),
|
||||
},
|
||||
{
|
||||
path: '/adminList',
|
||||
name: '管理员列表',
|
||||
component: () => import("../view/userList/adminList.vue"),
|
||||
},
|
||||
{
|
||||
path: '/staffList',
|
||||
name: '员工列表',
|
||||
component: () => import("../view/userList/staffList.vue"),
|
||||
},
|
||||
{
|
||||
path: '/supervisorList',
|
||||
name: '主管列表',
|
||||
component: () => import("../view/userList/supervisorList.vue"),
|
||||
},
|
||||
{
|
||||
path: '/userList',
|
||||
name: '用户列表',
|
||||
name: '普通用户列表',
|
||||
component: () => import("../view/userList/userList.vue"),
|
||||
},
|
||||
{
|
||||
@ -137,6 +152,16 @@ export const routes = [
|
||||
name:'订单明细详情',
|
||||
component: ()=> import("../view/performance/customerDetail.vue")
|
||||
},
|
||||
{
|
||||
path:'/employeeApplication',
|
||||
name:'员工申请管理',
|
||||
component: ()=> import("../view/employeeApplication/employeeApplication.vue")
|
||||
},
|
||||
{
|
||||
path:'/employeeDetail',
|
||||
name:'员工申请详情',
|
||||
component: ()=> import("../view/employeeApplication/employeeDetail.vue")
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
@ -1,3 +1,206 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import myAxios from "../api/myAxios.ts";
|
||||
|
||||
// 定义仪表盘数据结构
|
||||
const dashboardData = ref({
|
||||
totalAmount: 0,
|
||||
netAmount: 0,
|
||||
promoCount: 0,
|
||||
superCount: 0,
|
||||
empCount: 0,
|
||||
orderCount: 0,
|
||||
toRelease: 0, // 修复字段名：接口返回的是 toRelease
|
||||
toSettle: 0,
|
||||
settled: 0,
|
||||
refunded: 0,
|
||||
todayOrderCount: 0,
|
||||
todayOrderAmount: 0,
|
||||
todayRefundCount: 0,
|
||||
todayRefundAmount: 0, // 添加接口返回的字段
|
||||
todayPromotionCount: 0,
|
||||
monthOrderCount: 0,
|
||||
monthOrderAmount: 0,
|
||||
monthRefundCount: 0,
|
||||
monthRefundAmount: 0, // 添加接口返回的字段
|
||||
monthPromotionCount: 0
|
||||
});
|
||||
|
||||
// 格式化金额显示
|
||||
const formatCurrency = (amount) => {
|
||||
return `¥${parseFloat(amount).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
})}`;
|
||||
};
|
||||
|
||||
// 获取仪表盘数据
|
||||
const fetchDashboardData = async () => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
try {
|
||||
const response = await myAxios.post(
|
||||
"/perform/query/dashboard",
|
||||
{}, // 空请求体
|
||||
{headers: {Authorization: storedToken}}
|
||||
);
|
||||
|
||||
if (response.code === 1) {
|
||||
// 确保所有字段正确映射
|
||||
dashboardData.value = {
|
||||
...dashboardData.value, // 保留初始结构
|
||||
...response.data // 覆盖为接口返回的数据
|
||||
};
|
||||
console.log("仪表盘数据加载成功:", dashboardData.value);
|
||||
} else {
|
||||
console.error("获取仪表盘数据失败:", response.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("请求仪表盘数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
fetchDashboardData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
测试页面
|
||||
</template>
|
||||
<div class="dashboard">
|
||||
<div class="title">业务仪表盘总览</div>
|
||||
<div class="card-container">
|
||||
<!-- 订单统计 -->
|
||||
<div class="card orange-border">
|
||||
<h2>订单统计</h2>
|
||||
<ul>
|
||||
<li><span>订单总金额</span><strong>{{ formatCurrency(dashboardData.totalAmount) }}</strong></li>
|
||||
<li><span>订单净成交</span><strong>{{ formatCurrency(dashboardData.netAmount) }}</strong></li>
|
||||
<li><span>下单数量</span><strong>{{ dashboardData.orderCount }}</strong></li>
|
||||
<li><span>待释放</span><strong>{{ formatCurrency(dashboardData.toRelease) }}</strong></li>
|
||||
<li><span>可结算</span><strong>{{ formatCurrency(dashboardData.toSettle) }}</strong></li>
|
||||
<li><span>已结算</span><strong>{{ formatCurrency(dashboardData.settled) }}</strong></li>
|
||||
<li><span>已回退</span><strong>{{ formatCurrency(dashboardData.refunded) }}</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 用户与员工统计 -->
|
||||
<div class="card light-teal-border">
|
||||
<h2>用户与员工统计</h2>
|
||||
<ul>
|
||||
<li><span>主管数量</span><strong>{{ dashboardData.superCount }}</strong></li>
|
||||
<li><span>员工数量</span><strong>{{ dashboardData.empCount }}</strong></li>
|
||||
<li><span>客户数量</span><strong>{{ dashboardData.promoCount }}</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 今日统计 -->
|
||||
<div class="card light-orange-border">
|
||||
<h2>今日统计</h2>
|
||||
<ul>
|
||||
<li><span>今日下单数量</span><strong>{{ dashboardData.todayOrderCount }}</strong></li>
|
||||
<li><span>今日订单总金额</span><strong>{{ formatCurrency(dashboardData.todayOrderAmount) }}</strong></li>
|
||||
<li><span>今日退款数量</span><strong>{{ dashboardData.todayRefundCount }}</strong></li>
|
||||
<li><span>今日退款金额</span><strong>{{ formatCurrency(dashboardData.todayRefundAmount) }}</strong></li>
|
||||
<li><span>今日推广数量</span><strong>{{ dashboardData.todayPromotionCount }}</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 本月统计 -->
|
||||
<div class="card light-purple-border">
|
||||
<h2>本月统计</h2>
|
||||
<ul>
|
||||
<li><span>本月下单数量</span><strong>{{ dashboardData.monthOrderCount }}</strong></li>
|
||||
<li><span>本月订单总金额</span><strong>{{ formatCurrency(dashboardData.monthOrderAmount) }}</strong></li>
|
||||
<li><span>本月退款数量</span><strong>{{ dashboardData.monthRefundCount }}</strong></li>
|
||||
<li><span>本月退款金额</span><strong>{{ formatCurrency(dashboardData.monthRefundAmount) }}</strong></li>
|
||||
<li><span>本月推广数量</span><strong>{{ dashboardData.monthPromotionCount }}</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* 优化背景颜色与配色 */
|
||||
.dashboard {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
text-align: center;
|
||||
background-color: #f9f7f2; /* 更温馨的背景颜色 */
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: calc(50% - 20px);
|
||||
margin: 10px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
|
||||
padding: 25px;
|
||||
text-align: left;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.5em;
|
||||
color: #ff7043; /* 橙色主题 */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card ul li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.card ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.orange-border {
|
||||
border-left: 6px solid #ff7043; /* 橙色边框 */
|
||||
}
|
||||
|
||||
.light-teal-border {
|
||||
border-left: 6px solid #00bfa5; /* 清新的青绿色 */
|
||||
}
|
||||
|
||||
.light-orange-border {
|
||||
border-left: 6px solid #ffb74d; /* 浅橙色边框 */
|
||||
}
|
||||
|
||||
.light-purple-border {
|
||||
border-left: 6px solid #8e24aa; /* 浅紫色 */
|
||||
}
|
||||
|
||||
.card span {
|
||||
color: #555555;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.card strong {
|
||||
color: #ff7043;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -64,9 +64,9 @@
|
||||
required
|
||||
>
|
||||
<option value="">请选择课程类型</option>
|
||||
<option value="考公考研">考公考研</option>
|
||||
<option value="自媒体">自媒体</option>
|
||||
<option value="财经">财经</option>
|
||||
<option value="考公">考公</option>
|
||||
<option value="考编">考编</option>
|
||||
<option value="考证">考证</option>
|
||||
</select>
|
||||
<div class="select-arrow">▼</div>
|
||||
</div>
|
||||
|
||||
@ -362,9 +362,9 @@ const handlePriceInput = (value: number, field: keyof CourseDetail) => {
|
||||
<a-col :span="12">
|
||||
<a-form-item label="课程类型">
|
||||
<a-select v-model:value="editData.type" placeholder="请选择课程类型">
|
||||
<a-select-option value="自媒体">自媒体</a-select-option>
|
||||
<a-select-option value="财经">财经</a-select-option>
|
||||
<a-select-option value="考公考研">考公考研</a-select-option>
|
||||
<a-select-option value="考公">考公</a-select-option>
|
||||
<a-select-option value="考编">考编</a-select-option>
|
||||
<a-select-option value="考证">考证</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
@ -738,7 +738,7 @@ const handlePriceInput = (value: number, field: keyof CourseDetail) => {
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 320px;
|
||||
max-height: 500px;
|
||||
flex-grow: 1;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<a-space>
|
||||
<a-form-item label="课程名称">
|
||||
<a-input-search
|
||||
style="width: 200px"
|
||||
style="width: 300px"
|
||||
placeholder="请输入课程名称"
|
||||
enter-button
|
||||
@search="handleCourseSearch"
|
||||
@ -22,9 +22,9 @@
|
||||
@change="handleCourseSearch"
|
||||
>
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option value="考公考研">考公考研</a-select-option>
|
||||
<a-select-option value="自媒体">自媒体</a-select-option>
|
||||
<a-select-option value="财经">财经</a-select-option>
|
||||
<a-select-option value="考公">考公</a-select-option>
|
||||
<a-select-option value="考编">考编</a-select-option>
|
||||
<a-select-option value="考证">考证</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
@ -110,13 +110,6 @@
|
||||
>
|
||||
详情
|
||||
</a-button>
|
||||
<!-- <a-button-->
|
||||
<!-- size="small"-->
|
||||
<!-- type="link"-->
|
||||
<!-- @click="chapterDetails(record.id)"-->
|
||||
<!-- >-->
|
||||
<!-- 章节-->
|
||||
<!-- </a-button>-->
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
@ -146,7 +139,8 @@ const searchParams = ref({
|
||||
sortOrder: "ascend",
|
||||
name: "",
|
||||
type: "",
|
||||
isShelves: ""
|
||||
isShelves: "",
|
||||
fuzzy: true
|
||||
});
|
||||
|
||||
// 行选择配置
|
||||
@ -259,17 +253,11 @@ const toggleShelves = async (record: Course) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 课程名称搜索方法
|
||||
const handleCourseSearch = async () => {
|
||||
// 添加空值校验
|
||||
if (!searchCourseName.value.trim()) {
|
||||
message.warning('课程名称不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
searchParams.value.name = searchCourseName.value;
|
||||
searchParams.value.type = searchCourseType.value;
|
||||
searchParams.value.isShelves = searchIsShelves.value;
|
||||
searchParams.value.fuzzy = true;
|
||||
searchParams.value.current = 1; // 重置到第一页
|
||||
await getCourseList();
|
||||
};
|
||||
@ -448,7 +436,8 @@ const reset = () => {
|
||||
sortOrder: "ascend",
|
||||
name: "",
|
||||
type: "",
|
||||
isShelves: ""
|
||||
isShelves: "",
|
||||
fuzzy: true
|
||||
};
|
||||
|
||||
getCourseList();
|
||||
|
||||
433
src/view/employeeApplication/employeeApplication.vue
Normal file
433
src/view/employeeApplication/employeeApplication.vue
Normal file
@ -0,0 +1,433 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, h } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "ant-design-vue";
|
||||
import type { TableProps } from 'ant-design-vue';
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '申请人姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 120,
|
||||
fixed: 'left',
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: 140,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '简历',
|
||||
dataIndex: 'resume',
|
||||
key: 'resume',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
return text
|
||||
? h('a', {
|
||||
onClick: () => handleViewResume(text),
|
||||
style: { cursor: 'pointer', color: '#1890ff' }
|
||||
}, '查看简历')
|
||||
: '-';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '审核状态',
|
||||
dataIndex: 'reviewStatus',
|
||||
key: 'reviewStatus',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
filters: [
|
||||
{ text: '已通过', value: '已通过' },
|
||||
{ text: '待审核', value: '待审核' },
|
||||
{ text: '已拒绝', value: '已拒绝' },
|
||||
],
|
||||
filterMultiple: false,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 200, // 增加宽度以容纳更多按钮
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
// 定义晋升申请数据结构
|
||||
interface AdvancementApply {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
resume: string;
|
||||
credential: string;
|
||||
reviewStatus: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
const tableData = ref<AdvancementApply[]>([]);
|
||||
const loading = ref(false);
|
||||
const searchName = ref("");
|
||||
const searchPhone = ref("");
|
||||
const searchStatus = ref<string | undefined>(undefined);
|
||||
|
||||
// 分页参数
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50'],
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
});
|
||||
|
||||
// 排序参数
|
||||
const sortParams = reactive({
|
||||
sortField: 'id',
|
||||
sortOrder: '' // 'ascend' or 'descend'
|
||||
});
|
||||
|
||||
// 获取晋升申请数据
|
||||
const fetchAdvancementData = async () => {
|
||||
loading.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
|
||||
try {
|
||||
// 构建请求参数
|
||||
const params = {
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
sortField: sortParams.sortField,
|
||||
sortOrder: sortParams.sortOrder,
|
||||
name: searchName.value.trim(),
|
||||
phone: searchPhone.value.trim(),
|
||||
reviewStatus: searchStatus.value
|
||||
};
|
||||
|
||||
// 调用真实API接口
|
||||
const response:any = await myAxios.post('/advancementApply/page', params, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
});
|
||||
|
||||
if (response.code === 1) {
|
||||
tableData.value = response.data.records;
|
||||
pagination.total = response.data.total;
|
||||
pagination.current = response.data.current;
|
||||
} else {
|
||||
message.error(response.message || '获取数据失败');
|
||||
tableData.value = [];
|
||||
pagination.total = 0;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
message.error('请求失败，请稍后重试');
|
||||
console.error('获取晋升申请数据失败:', error);
|
||||
tableData.value = [];
|
||||
pagination.total = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 查看简历
|
||||
const handleViewResume = (resumeCode: string) => {
|
||||
// 这里实现查看简历的逻辑
|
||||
// 例如：打开一个新窗口，显示简历
|
||||
// window.open(`/api/resume/view?code=${resumeCode}`, '_blank');
|
||||
|
||||
// 或者调用API获取简历内容
|
||||
// fetchResumeContent(resumeCode);
|
||||
|
||||
// 暂时使用消息提示
|
||||
message.info(`查看简历：${resumeCode}`);
|
||||
};
|
||||
|
||||
|
||||
// 处理表格变化事件（分页、排序、筛选）
|
||||
const handleTableChange: TableProps['onChange'] = (pag, filters, sorter) => {
|
||||
// 更新分页参数
|
||||
pagination.current = pag.current!;
|
||||
pagination.pageSize = pag.pageSize!;
|
||||
|
||||
// 更新排序参数
|
||||
if (Array.isArray(sorter)) {
|
||||
// 多列排序情况（这里只处理单列排序）
|
||||
if (sorter.length > 0) {
|
||||
sortParams.sortField = sorter[0].field as string;
|
||||
sortParams.sortOrder = sorter[0].order!;
|
||||
} else {
|
||||
sortParams.sortField = 'id';
|
||||
sortParams.sortOrder = '';
|
||||
}
|
||||
} else {
|
||||
// 单列排序情况
|
||||
if (sorter && sorter.column) {
|
||||
sortParams.sortField = sorter.field as string;
|
||||
sortParams.sortOrder = sorter.order!;
|
||||
} else {
|
||||
sortParams.sortField = 'id';
|
||||
sortParams.sortOrder = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 更新筛选参数
|
||||
if (filters.reviewStatus) {
|
||||
searchStatus.value = filters.reviewStatus[0] as string;
|
||||
} else {
|
||||
searchStatus.value = undefined;
|
||||
}
|
||||
|
||||
// 重新获取数据
|
||||
fetchAdvancementData();
|
||||
};
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1; // 重置到第一页
|
||||
fetchAdvancementData();
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const reset = () => {
|
||||
searchName.value = "";
|
||||
searchPhone.value = "";
|
||||
searchStatus.value = undefined;
|
||||
pagination.current = 1;
|
||||
fetchAdvancementData();
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 查看详情
|
||||
const viewDetail = (record: AdvancementApply) => {
|
||||
// 跳转到晋升申请详情页面
|
||||
router.push({
|
||||
path: '/employeeDetail',
|
||||
query: {
|
||||
id: record.id
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.push('/performanceManagement');
|
||||
};
|
||||
|
||||
// 初始化加载数据
|
||||
onMounted(() => {
|
||||
fetchAdvancementData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-box">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="申请人姓名">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
placeholder="请输入姓名"
|
||||
class="custom-search"
|
||||
enter-button
|
||||
v-model:value="searchName"
|
||||
@pressEnter="handleSearch"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="searchPhone"
|
||||
@pressEnter="handleSearch"
|
||||
@search="handleSearch"
|
||||
enter-button
|
||||
class="custom-search"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a-button class="custom-button" @click="goBack">返回</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:scroll="{ x: 1600 }"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@change="handleTableChange"
|
||||
bordered
|
||||
rowKey="id"
|
||||
size="middle"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 操作列 -->
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button size="small" @click="viewDetail(record)">查看详情</a-button>
|
||||
|
||||
</a-space>
|
||||
</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);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) > tr > th {
|
||||
background-color: #f0f5ff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
.search-box .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.search-box .ant-space {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
/* 审核人选择弹窗样式 */
|
||||
.supervisor-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.supervisor-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.supervisor-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.supervisor-id {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.supervisor-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item) {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.ant-radio-wrapper) {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
.action-btn {
|
||||
margin: 0 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
</style>
|
||||
659
src/view/employeeApplication/employeeDetail.vue
Normal file
659
src/view/employeeApplication/employeeDetail.vue
Normal file
@ -0,0 +1,659 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<a-page-header
|
||||
title="晋升申请详情"
|
||||
@back="goBack"
|
||||
class="page-header"
|
||||
/>
|
||||
|
||||
<a-card v-if="advancement" class="detail-card">
|
||||
<a-skeleton active :loading="loading" />
|
||||
|
||||
<div v-if="!loading" class="detail-content">
|
||||
<!-- 基本信息 -->
|
||||
<div class="section">
|
||||
<h3 class="section-title">基本信息</h3>
|
||||
<a-descriptions bordered :column="1" class="custom-descriptions">
|
||||
<a-descriptions-item label="申请ID">
|
||||
<div class="info-value">{{ advancement.id }}</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="申请人姓名">
|
||||
<div class="info-value">{{ advancement.name }}</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="手机号">
|
||||
<div class="info-value">{{ advancement.phone }}</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">
|
||||
<div class="info-value">{{ advancement.createTime }}</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 审核信息 -->
|
||||
<div class="section">
|
||||
<h3 class="section-title">审核信息</h3>
|
||||
<a-descriptions bordered :column="1" class="custom-descriptions">
|
||||
<a-descriptions-item label="审核状态">
|
||||
<a-tag :color="getStatusColor(advancement.reviewStatus)" class="status-tag">
|
||||
{{ advancement.reviewStatus }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="拒绝理由" v-if="advancement.rejectReason">
|
||||
<div class="info-value">{{ advancement.rejectReason }}</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 附件信息 -->
|
||||
<div class="section">
|
||||
<h3 class="section-title">附件信息</h3>
|
||||
<a-descriptions bordered :column="1" class="custom-descriptions">
|
||||
<a-descriptions-item label="简历">
|
||||
<a :href="getResumeUrl(advancement.resume)" target="_blank" class="resume-link">
|
||||
<span v-if="advancement.resume">
|
||||
<file-pdf-outlined /> 查看简历
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</a>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="查询凭证">
|
||||
<div class="info-value">{{ advancement.credential || '-' }}</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons" v-if="advancement.reviewStatus === '待审核'">
|
||||
<a-button type="primary" @click="review(advancement)" class="review-btn">
|
||||
<audit-outlined /> 审核
|
||||
</a-button>
|
||||
<a-button type="danger" @click="showRejectModal(advancement)" class="reject-btn">
|
||||
<close-circle-outlined /> 驳回
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<a-empty v-if="!loading && !advancement" description="未找到晋升申请信息" />
|
||||
|
||||
<!-- 审核人选择弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="reviewModalVisible"
|
||||
:title="reviewModalTitle"
|
||||
width="600px"
|
||||
:confirm-loading="loadingSupervisors"
|
||||
@ok="submitReview"
|
||||
@cancel="reviewModalVisible = false"
|
||||
:ok-text="'审核'"
|
||||
:cancel-text="'取消'"
|
||||
>
|
||||
<a-spin :spinning="loadingSupervisors">
|
||||
<a-empty v-if="supervisorList.length === 0" description="暂无审核人信息" />
|
||||
|
||||
<div v-else class="supervisor-list">
|
||||
<h4 class="select-title">请选择审核主管：</h4>
|
||||
<a-radio-group v-model:value="selectedSupervisorId" class="radio-group">
|
||||
<a-list :data-source="supervisorList" :bordered="false">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-radio :value="item.id" class="supervisor-radio">
|
||||
<div class="supervisor-item">
|
||||
<div class="supervisor-info">
|
||||
<div class="supervisor-name">{{ item.nickName || '-' }}</div>
|
||||
<div class="supervisor-id">ID: {{ item.id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-radio>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
|
||||
<!-- 驳回申请弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="rejectModalVisible"
|
||||
title="驳回申请"
|
||||
width="500px"
|
||||
:confirm-loading="rejectLoading"
|
||||
@ok="submitReject"
|
||||
@cancel="rejectModalVisible = false"
|
||||
:ok-text="'确认驳回'"
|
||||
:cancel-text="'取消'"
|
||||
okType="danger"
|
||||
>
|
||||
<a-alert type="warning" show-icon class="reject-alert">
|
||||
<template #message>
|
||||
<span>您确定要驳回此申请吗？</span>
|
||||
</template>
|
||||
<template #description>
|
||||
<p class="reject-warning">驳回后申请人将收到通知，此操作不可撤销。</p>
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<div class="reject-form">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="驳回原因" required>
|
||||
<a-textarea
|
||||
v-model:value="rejectReason"
|
||||
placeholder="请输入详细的驳回原因..."
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
show-count
|
||||
class="reject-reason"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import myAxios from '../../api/myAxios.ts';
|
||||
import {
|
||||
FilePdfOutlined,
|
||||
AuditOutlined,
|
||||
CloseCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
// 定义晋升申请详情接口
|
||||
interface AdvancementDetail {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
resume: string;
|
||||
credential: string;
|
||||
reviewStatus: string;
|
||||
rejectReason?: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
interface Supervisor {
|
||||
id: number;
|
||||
nickName: string;
|
||||
userAvatar?: string;
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const advancement = ref<AdvancementDetail | null>(null);
|
||||
const loading = ref(true);
|
||||
|
||||
// 获取晋升申请详情
|
||||
const fetchAdvancementDetail = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const id = route.query.id;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
|
||||
if (!id) {
|
||||
message.error('缺少申请ID参数');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await myAxios.post(
|
||||
'/advancementApply/queryById',
|
||||
{ id: Number(id) },
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
}
|
||||
) as { code: number; data: AdvancementDetail; message: string };
|
||||
|
||||
if (response.code === 1 && response.data) {
|
||||
advancement.value = response.data;
|
||||
} else {
|
||||
message.error(response.message || '获取申请详情失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取晋升申请详情失败:', error);
|
||||
message.error('获取申请详情失败，请稍后重试');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取简历URL
|
||||
const getResumeUrl = (resumeCode: string) => {
|
||||
return resumeCode ? `/resume/view?code=${resumeCode}` : '#';
|
||||
};
|
||||
|
||||
// 根据状态获取标签颜色
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case '已通过': return 'green';
|
||||
case '待审核': return 'blue';
|
||||
case '已拒绝': return 'red';
|
||||
case '已撤回': return 'orange';
|
||||
default: return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.push('/employeeApplication');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchAdvancementDetail();
|
||||
});
|
||||
|
||||
// 审核弹窗相关变量
|
||||
const reviewModalVisible = ref(false);
|
||||
const reviewModalTitle = ref("选择审核主管");
|
||||
const supervisorList = ref<Supervisor[]>([]);
|
||||
const loadingSupervisors = ref(false);
|
||||
const selectedSupervisorId = ref<number | null>(null);
|
||||
const currentApplyId = ref<number | null>(null); // 当前选中的晋升申请ID
|
||||
|
||||
// 查看审核人信息
|
||||
const review = async (record: AdvancementDetail) => {
|
||||
try {
|
||||
loadingSupervisors.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
currentApplyId.value = record.id; // 保存当前申请ID
|
||||
|
||||
// 调用审核人查询接口
|
||||
const response = await myAxios.post(
|
||||
'/advancementApply/query/supervisor',
|
||||
{ applyId: record.id },
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
}
|
||||
) as { code: number; data: Supervisor[]; message: string };
|
||||
|
||||
if (response.code === 1 && response.data) {
|
||||
supervisorList.value = response.data;
|
||||
selectedSupervisorId.value = null; // 重置选择
|
||||
reviewModalVisible.value = true;
|
||||
} else {
|
||||
message.error(response.message || '获取审核人信息失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取审核人信息失败:', error);
|
||||
message.error('获取审核人信息失败，请稍后重试');
|
||||
} finally {
|
||||
loadingSupervisors.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 提交审核
|
||||
const submitReview = async () => {
|
||||
if (!selectedSupervisorId.value) {
|
||||
message.warning('请选择主管');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentApplyId.value) {
|
||||
message.error('未找到申请记录');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
loadingSupervisors.value = true;
|
||||
|
||||
// 调用审核接口
|
||||
const response = await myAxios.post(
|
||||
'/advancementApply/approve',
|
||||
{
|
||||
applyId: currentApplyId.value,
|
||||
userId: selectedSupervisorId.value
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
}
|
||||
) as { code: number; message: string };
|
||||
|
||||
if (response.code === 1) {
|
||||
message.success('审核成功');
|
||||
reviewModalVisible.value = false;
|
||||
// 刷新页面数据
|
||||
fetchAdvancementDetail();
|
||||
} else {
|
||||
message.error(response.message || '审核失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('审核提交失败:', error);
|
||||
message.error('审核提交失败，请稍后重试');
|
||||
} finally {
|
||||
loadingSupervisors.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 驳回相关状态
|
||||
const rejectModalVisible = ref(false);
|
||||
const rejectLoading = ref(false);
|
||||
const rejectReason = ref('');
|
||||
|
||||
// 显示驳回弹窗
|
||||
const showRejectModal = (record: AdvancementDetail) => {
|
||||
currentApplyId.value = record.id;
|
||||
rejectReason.value = '';
|
||||
rejectModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 提交驳回
|
||||
const submitReject = async () => {
|
||||
if (!rejectReason.value.trim()) {
|
||||
message.warning('请填写驳回原因');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
rejectLoading.value = true;
|
||||
const storedToken = localStorage.getItem('token');
|
||||
|
||||
const response = await myAxios.post(
|
||||
'/advancementApply/reject',
|
||||
{
|
||||
applyId: currentApplyId.value,
|
||||
rejectReason: rejectReason.value
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': storedToken
|
||||
}
|
||||
}
|
||||
) as { code: number; message: string };
|
||||
|
||||
if (response.code === 1) {
|
||||
message.success('申请已驳回');
|
||||
rejectModalVisible.value = false;
|
||||
// 刷新页面数据
|
||||
fetchAdvancementDetail();
|
||||
} else {
|
||||
message.error(response.message || '驳回申请失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('驳回申请失败:', error);
|
||||
message.error('驳回申请失败，请稍后重试');
|
||||
} finally {
|
||||
rejectLoading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.page-header :deep(.ant-page-header-heading-title) {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #eaeef2;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
background: #f9fbfd;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e8f4ff;
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.05);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #e8f4ff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
height: 2px;
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.ant-descriptions-item-label) {
|
||||
font-weight: 600;
|
||||
background-color: #f0f8ff !important;
|
||||
width: 140px;
|
||||
color: #2c3e50;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.ant-descriptions-item-content) {
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-weight: 600;
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.resume-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
color: #1890ff;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
background: #f0f8ff;
|
||||
border: 1px solid #d9e7ff;
|
||||
}
|
||||
|
||||
.resume-link:hover {
|
||||
color: #40a9ff;
|
||||
background-color: #e6f7ff;
|
||||
border-color: #91d5ff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.review-btn, .reject-btn {
|
||||
height: 42px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 140px;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.review-btn {
|
||||
background: linear-gradient(135deg, #1890ff, #096dd9);
|
||||
border: none;
|
||||
box-shadow: 0 4px 10px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.review-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 14px rgba(24, 144, 255, 0.4);
|
||||
}
|
||||
|
||||
.reject-btn {
|
||||
background: linear-gradient(135deg, #ff4d4f, #cf1322);
|
||||
border: none;
|
||||
box-shadow: 0 4px 10px rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
|
||||
.reject-btn:hover {
|
||||
background: linear-gradient(135deg, #ff7875, #ff4d4f);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 14px rgba(255, 77, 79, 0.4);
|
||||
}
|
||||
|
||||
.supervisor-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
margin-bottom: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.supervisor-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
width: 100%;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.supervisor-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.supervisor-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.supervisor-id {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item) {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(.ant-list-item:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.supervisor-radio .ant-radio) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
:deep(.supervisor-radio .ant-radio-wrapper) {
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 驳回弹窗样式 */
|
||||
.reject-alert {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fffbe6;
|
||||
}
|
||||
|
||||
.reject-warning {
|
||||
margin-top: 8px;
|
||||
color: #d48806;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reject-form {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.reject-reason {
|
||||
border-radius: 8px;
|
||||
resize: vertical;
|
||||
padding: 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.reject-reason:focus {
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
:deep(.ant-empty) {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
:deep(.ant-empty-image) {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
:deep(.ant-empty-description) {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@ -1,106 +1,135 @@
|
||||
<script setup lang="ts">
|
||||
// 这里可以定义一些响应式数据或者方法，但是由于是静态页面，这里暂时不需要
|
||||
import router from "../../router";
|
||||
// 静态页面无需逻辑
|
||||
const goBack = () => {
|
||||
router.push('/customerOrder');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="order-details">
|
||||
<div class="order-details-container">
|
||||
<!-- 订单状态 -->
|
||||
<div class="order-status card">
|
||||
<span class="status-label">订单状态</span>
|
||||
<span class="status-value status-refunded">已退款</span>
|
||||
<div class="card order-status-card">
|
||||
<h3 class="card-title">订单状态</h3>
|
||||
<span class="status-tag status-refunded">已退款</span>
|
||||
<a-button class="custom-button" @click="goBack">返回</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<div class="product-info card">
|
||||
<img src="https://via.placeholder.com/100" alt="商品图片" class="product-image"/>
|
||||
<div class="product-text">
|
||||
<p class="product-title">陈正康考研英语核心2000词汇(考研英语核心2000词汇)</p>
|
||||
<div class="card product-info-card">
|
||||
<img src="https://via.placeholder.com/120" alt="商品图片" class="product-image"/>
|
||||
<div class="product-content">
|
||||
<h4 class="product-title">陈正康考研英语核心2000词汇(考研英语核心2000词汇)</h4>
|
||||
<p class="product-subtitle">23考研·训练营</p>
|
||||
</div>
|
||||
<span class="product-price">¥9.9</span>
|
||||
</div>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<div class="order-info card">
|
||||
<p>订单编号：202506190848352695125648642</p>
|
||||
<p>下单时间：2025-06-19 08:48:35</p>
|
||||
<p>退款时间：2025-07-02 11:00:00</p>
|
||||
<div class="card order-info-card">
|
||||
<h3 class="card-title">订单信息</h3>
|
||||
<ul class="info-list">
|
||||
<li><strong>订单编号：</strong>202506190848352695125648642</li>
|
||||
<li><strong>下单时间：</strong>2025-06-19 08:48:35</li>
|
||||
<li><strong>退款时间：</strong>2025-07-02 11:00:00</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 价格明细 -->
|
||||
<div class="price-details card">
|
||||
<div class="price-row"><span>课程价格</span><span>¥19.9</span></div>
|
||||
<div class="price-row"><span>折扣优惠</span><span>-¥10</span></div>
|
||||
<div class="price-row"><span>订单金额</span><span>¥9.9</span></div>
|
||||
<div class="price-row refund"><span>退款金额</span><span>¥9.9</span></div>
|
||||
<div class="card price-details-card">
|
||||
<h3 class="card-title">价格明细</h3>
|
||||
<ul class="price-list">
|
||||
<li class="price-item"><span>课程价格</span><span>¥19.9</span></li>
|
||||
<li class="price-item"><span>折扣优惠</span><span>-¥10</span></li>
|
||||
<li class="price-item total"><span>订单金额</span><span>¥9.9</span></li>
|
||||
<li class="price-item refund"><span>退款金额</span><span>¥9.9</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-details {
|
||||
.order-details-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 30px auto;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 4rem auto;
|
||||
padding: 0 1.5rem;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
color: #2c2c2c;
|
||||
background: linear-gradient(to bottom right, #f4f6f8, #eef1f5);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(to right bottom, #f9f9f9, #ffffff);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
background: white;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 订单状态 */
|
||||
.order-status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-label {
|
||||
/* 卡片标题 */
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.status-value {
|
||||
font-weight: bold;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
.card-title::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: linear-gradient(to bottom, #4a90e2, #54b4ef);
|
||||
margin-right: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
display: inline-block;
|
||||
padding: 6px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.status-refunded {
|
||||
color: #fff;
|
||||
background-color: #e57373;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.product-info {
|
||||
/* 商品信息卡片 */
|
||||
.product-info-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.product-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-right: 15px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.product-text {
|
||||
.product-content {
|
||||
flex: 1;
|
||||
}
|
||||
.product-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
color: #222;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.product-subtitle {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
}
|
||||
.product-price {
|
||||
@ -109,25 +138,75 @@
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
/* 订单信息 */
|
||||
.order-info p {
|
||||
margin: 6px 0;
|
||||
/* 订单信息列表 */
|
||||
.info-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.info-list li {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 价格明细 */
|
||||
.price-details {
|
||||
line-height: 1.8;
|
||||
.price-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.price-row {
|
||||
.price-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.price-row.refund span {
|
||||
.price-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.price-item:hover {
|
||||
color: #222;
|
||||
}
|
||||
.price-item.total {
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
.price-item.refund span {
|
||||
color: #d32f2f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.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-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
@ -14,6 +14,9 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
<a-button class="custom-button" @click="goBack">返回</a-button>
|
||||
|
||||
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
@ -50,7 +53,7 @@
|
||||
<a-space :size="8">
|
||||
<a-button
|
||||
size="small"
|
||||
@click="customerDetail(record.id)"
|
||||
@click="customerDetail"
|
||||
>
|
||||
详情
|
||||
</a-button>
|
||||
@ -290,6 +293,10 @@ onMounted(() => {
|
||||
const customerDetail =()=>{
|
||||
router.push('/customerDetail')
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/employeePerformaince');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -344,4 +351,22 @@ const customerDetail =()=>{
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.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-color: #ffa940;
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
@ -1,43 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted} from "vue";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {message} from "ant-design-vue";
|
||||
|
||||
// 修改列定义为主管业绩相关字段
|
||||
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: '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 +73,33 @@ 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,21 +112,20 @@ const columns = [
|
||||
}
|
||||
];
|
||||
|
||||
// 定义主管业绩数据结构
|
||||
// 定义主管业绩数据结构以匹配接口
|
||||
interface ManagerPerformance {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
staffCount: number;
|
||||
promotionCount: number;
|
||||
ratio: string;
|
||||
nickName: string;
|
||||
phoneNumber: string;
|
||||
empCount: number;
|
||||
promoCount: number;
|
||||
orderCount: number;
|
||||
totalOrders: number;
|
||||
refund: number;
|
||||
totalAmount: number;
|
||||
netAmount: number;
|
||||
pendingRelease: number;
|
||||
settleable: number;
|
||||
returned: number;
|
||||
toRelease: number;
|
||||
toSettle: number;
|
||||
refunded: number;
|
||||
userId: number;
|
||||
}
|
||||
|
||||
const tableData = ref<ManagerPerformance[]>([]);
|
||||
@ -121,93 +133,272 @@ 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;
|
||||
// 获取主管业绩数据
|
||||
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: ""
|
||||
};
|
||||
|
||||
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
|
||||
});
|
||||
// 修正请求格式：直接发送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;
|
||||
}
|
||||
|
||||
return mockData;
|
||||
};
|
||||
|
||||
const originalTableData = ref<ManagerPerformance[]>([]);
|
||||
// 处理分页变化
|
||||
const handlePaginationChange = (pag: { current: number; pageSize: number }) => {
|
||||
pagination.current = pag.current;
|
||||
pagination.pageSize = pag.pageSize;
|
||||
fetchManagerPerformance();
|
||||
};
|
||||
|
||||
|
||||
// 搜索功能
|
||||
const handleSearch = () => {
|
||||
if (!searchName.value.trim() && !searchPhone.value.trim()) {
|
||||
tableData.value = [...originalTableData.value];
|
||||
return;
|
||||
// 验证手机号：如果输入了手机号但不是11位
|
||||
if (searchPhone.value && searchPhone.value.length !== 11) {
|
||||
message.warning("请输入11位手机号码");
|
||||
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;
|
||||
});
|
||||
|
||||
if (filtered.length === 0) {
|
||||
message.warning("未找到匹配的主管业绩数据");
|
||||
tableData.value = [];
|
||||
} else {
|
||||
tableData.value = filtered;
|
||||
}
|
||||
pagination.current = 1; // 重置到第一页
|
||||
fetchManagerPerformance();
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const reset = () => {
|
||||
searchName.value = "";
|
||||
searchPhone.value = "";
|
||||
tableData.value = [...originalTableData.value];
|
||||
pagination.current = 1;
|
||||
fetchManagerPerformance();
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 查看员工绩效明细 - 添加跳转功能
|
||||
// 查看员工绩效明细
|
||||
const viewStaffPerformance = (record: ManagerPerformance) => {
|
||||
// 跳转到员工绩效页面，并传递主管ID作为参数
|
||||
router.push({
|
||||
path: '/employeePerformaince',
|
||||
query: {
|
||||
managerId: record.id,
|
||||
managerName: record.name
|
||||
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 } }
|
||||
);
|
||||
|
||||
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(() => {
|
||||
loading.value = true;
|
||||
// 模拟数据加载延迟
|
||||
setTimeout(() => {
|
||||
const mockData = generateMockData();
|
||||
tableData.value = mockData;
|
||||
originalTableData.value = mockData;
|
||||
loading.value = false;
|
||||
}, 800);
|
||||
fetchManagerPerformance();
|
||||
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;
|
||||
};
|
||||
|
||||
|
||||
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>
|
||||
|
||||
@ -217,48 +408,73 @@ const goBack = () => {
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
<a-form-item label="主管姓名">
|
||||
<a-input-search
|
||||
style="width: 300px"
|
||||
<a-input
|
||||
style="width: 300px;"
|
||||
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 @click="handleSearch" style="margin-right: 10px" class="custom-button">搜索</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a-button class="custom-button" @click="goBack">返回</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: 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', '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"
|
||||
@ -270,8 +486,8 @@ const goBack = () => {
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 样式保持不变 */
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
@ -307,7 +523,7 @@ const goBack = () => {
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
color:#fff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@ -322,8 +538,12 @@ 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>
|
||||
1462
src/view/userList/adminList.vue
Normal file
1462
src/view/userList/adminList.vue
Normal file
File diff suppressed because it is too large
Load Diff
746
src/view/userList/staffList.vue
Normal file
746
src/view/userList/staffList.vue
Normal file
@ -0,0 +1,746 @@
|
||||
<template>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-box">
|
||||
<div class="search-container">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
|
||||
<a-form-item label="手机号">
|
||||
<a-input-search
|
||||
style="width: 300px;"
|
||||
placeholder="请输入手机号"
|
||||
enter-button
|
||||
@search="handlePhoneSearch"
|
||||
v-model:value="searchPhone"
|
||||
type="text"
|
||||
class="custom-search"
|
||||
:maxlength="11"
|
||||
@input="handleSearchPhoneInput"
|
||||
@keydown="handleKeyDown"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据-->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:scroll="{ x: 1400, y: 550 }"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
bordered
|
||||
rowKey="id"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'userAvatar'">
|
||||
<a-avatar :src="downLoadImage + record.userAvatar" />
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'operation'">
|
||||
<a-space :size="16">
|
||||
<a class="action-btn" @click="showDrawer(record)">详情</a>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 抽屉-->
|
||||
<a-drawer
|
||||
v-model:open="open"
|
||||
title="用户详细信息"
|
||||
placement="right"
|
||||
width="600"
|
||||
>
|
||||
<div v-if="selectedUser" class="user-detail">
|
||||
<div class="header">
|
||||
<a-avatar :size="128" :src="downLoadImage+selectedUser.userAvatar" class="avatar" />
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
v-if="isEditMode"
|
||||
:model="editForm"
|
||||
:rules="editFormRules"
|
||||
ref="editFormRef"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
>
|
||||
<!-- 可编辑表单 -->
|
||||
<a-form-item label="昵称" name="nickName">
|
||||
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="头像" name="userAvatar">
|
||||
|
||||
</a-form-item>
|
||||
<a-form-item label="账号" name="userAccount">
|
||||
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="手机号" name="phoneNumber">
|
||||
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
|
||||
<div v-else class="view-mode">
|
||||
<!-- 基本信息卡片 -->
|
||||
<a-card title="基本信息" class="info-card">
|
||||
<div class="info-item">
|
||||
<user-outlined class="info-icon" />
|
||||
<div class="info-content">
|
||||
<span class="info-label">用户ID</span>
|
||||
<span class="info-value">{{ selectedUser.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<idcard-outlined class="info-icon" />
|
||||
<div class="info-content">
|
||||
<span class="info-label">账户信息</span>
|
||||
<div class="account-detail">
|
||||
<span>{{ selectedUser.userAccount }}</span>
|
||||
<a-tag class="role-tag">
|
||||
{{ editForm.userRole}}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<smile-outlined class="info-icon" />
|
||||
<div class="info-content">
|
||||
<span class="info-label">昵称</span>
|
||||
<span class="info-value highlight">{{ selectedUser.nickName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 联系信息卡片 -->
|
||||
<a-card title="联系信息" class="info-card">
|
||||
<div class="info-item">
|
||||
<phone-outlined class="info-icon" />
|
||||
<div class="info-content">
|
||||
<span class="info-label">手机号码</span>
|
||||
<span class="info-value">{{ selectedUser.phoneNumber || '未绑定' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-drawer>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref} from "vue";
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
import { message } from "ant-design-vue";
|
||||
|
||||
import {downLoadImage} from '../../api/ImageUrl.ts'
|
||||
|
||||
import {
|
||||
UserOutlined,
|
||||
IdcardOutlined,
|
||||
SmileOutlined,
|
||||
PhoneOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
|
||||
|
||||
const handleSearchPhoneInput = (e: any) => {
|
||||
let value = e.target.value;
|
||||
|
||||
// 只允许输入数字，并截取前11位
|
||||
const newValue = value.replace(/[^0-9]/g, '').slice(0, 11);
|
||||
|
||||
if (newValue !== value) {
|
||||
searchPhone.value = newValue;
|
||||
}
|
||||
};
|
||||
|
||||
// 新增 onKeyDown 事件处理函数
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
|
||||
const allowedKeys = [
|
||||
'Backspace',
|
||||
'Delete',
|
||||
'ArrowLeft',
|
||||
'ArrowRight',
|
||||
'Tab',
|
||||
];
|
||||
|
||||
|
||||
if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const searchParams = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole:"staff",
|
||||
phoneNumber:null
|
||||
});
|
||||
//用户表
|
||||
const columns = [
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'id',
|
||||
width: 50,
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
sortDirections: ['ascend', 'descend']
|
||||
},
|
||||
|
||||
{
|
||||
title: '头像',
|
||||
dataIndex: 'userAvatar',
|
||||
key: 'userAvatar',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'userAccount',
|
||||
width: 90,
|
||||
key: 'userAccount',
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户昵称',
|
||||
dataIndex: 'nickName',
|
||||
width: 70,
|
||||
key: 'nickName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '身份',
|
||||
dataIndex: 'userRole',
|
||||
key: 'userRole',
|
||||
width: 50,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phoneNumber',
|
||||
key: 'phoneNumber',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
sortDirections: ['ascend', 'descend']
|
||||
},
|
||||
// {
|
||||
// title: '邀请码',
|
||||
// dataIndex: 'invitationCode',
|
||||
// key: 'invitationCode',
|
||||
// width: 70,
|
||||
// align: 'center',
|
||||
// sorter: true,
|
||||
// sortDirections: ['ascend', 'descend']
|
||||
// },
|
||||
// {
|
||||
// title: '上级ID',
|
||||
// dataIndex: 'parentUserId',
|
||||
// key: 'parentUserId',
|
||||
// width: 40,
|
||||
// align: 'center',
|
||||
// sorter: true,
|
||||
// sortDirections: ['ascend', 'descend']
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
// 分页配置
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['10', '20', '50', '100']
|
||||
});
|
||||
//编辑用户表单
|
||||
|
||||
const editFormRules = {
|
||||
nickName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入昵称',
|
||||
trigger: ['input', 'blur']
|
||||
},
|
||||
{
|
||||
min: 1,
|
||||
max: 6,
|
||||
message: '昵称长度需为1-6位',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
],
|
||||
phoneNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
trigger: ['input', 'blur']
|
||||
},
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: '必须是有效的11位手机号',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
],
|
||||
userPassword: [
|
||||
{
|
||||
min: 6,
|
||||
max: 10,
|
||||
message: '长度需为6-10位',
|
||||
trigger: ['input', 'blur']
|
||||
},
|
||||
{
|
||||
validator: (_: any, value: string) => {
|
||||
if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
|
||||
return Promise.reject('必须包含大小写字母和数字');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
const editFormRef = ref();
|
||||
|
||||
// 修改后的分页处理函数
|
||||
const handleTableChange = (pag: any, _: any, sorter: any) => {
|
||||
|
||||
let sortField = "id";
|
||||
let sortOrder = "ascend";
|
||||
|
||||
if (sorter.field) {
|
||||
sortField = sorter.field;
|
||||
sortOrder = sorter.order;
|
||||
}
|
||||
|
||||
searchParams.value = {
|
||||
...searchParams.value,
|
||||
current: pag.current,
|
||||
pageSize: pag.pageSize,
|
||||
sortField: sortField,
|
||||
sortOrder: sortOrder
|
||||
};
|
||||
|
||||
pagination.value.current = pag.current;
|
||||
pagination.value.pageSize = pag.pageSize;
|
||||
|
||||
getUserList();
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getUserList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
if (!storedToken) throw new Error('未找到登录信息');
|
||||
|
||||
const res: any = await myAxios.post("/userInfo/page",
|
||||
{...searchParams.value },
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
console.log(res)
|
||||
if (res.code === 1 && res.data) {
|
||||
tableData.value = res.data.records.map((item: any) => {
|
||||
if (item.parentUserId === -1) {
|
||||
item.parentUserId = '无';
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
superUserList: item.superHostList? item.superHostList.join(', ') : '无'
|
||||
};
|
||||
});
|
||||
|
||||
pagination.value.total = res.data.total;
|
||||
pagination.value.current = res.data.current;
|
||||
pagination.value.pageSize = res.data.size;
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(getUserList);
|
||||
|
||||
// ID查询方法
|
||||
interface User {
|
||||
id: number;
|
||||
nickName: string;
|
||||
userAvatar: string;
|
||||
phoneNumber: string;
|
||||
userAccount: string;
|
||||
userPassword: string;
|
||||
invitationCode: string;
|
||||
userRole:string;
|
||||
parentUserId:number
|
||||
}
|
||||
|
||||
const tableData = ref<User[]>([]);
|
||||
|
||||
const searchPhone = ref("");
|
||||
|
||||
|
||||
const handlePhoneSearch = async () => {
|
||||
if (!searchPhone.value) {
|
||||
message.warning('请输入手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证手机号格式
|
||||
if (!/^1[3-9]\d{9}$/.test(searchPhone.value)) {
|
||||
message.warning('请输入有效的11位手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
if (!storedToken) throw new Error('未找到登录信息');
|
||||
|
||||
|
||||
const res: { code: number; data: any; message: any } = await myAxios.post(
|
||||
"/userInfo/page",
|
||||
{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
userRole:'staff',
|
||||
phoneNumber: searchPhone.value
|
||||
},
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
|
||||
if (res.code === 1 && res.data) {
|
||||
tableData.value = res.data.records.map((item: any) => {
|
||||
if (item.parentUserId === -1) {
|
||||
item.parentUserId = '无';
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
superUserList: item.superHostList? item.superHostList.join(', ') : '无'
|
||||
};
|
||||
});
|
||||
// 更新分页信息
|
||||
pagination.value.total = res.data.total;
|
||||
pagination.value.current = res.data.current;
|
||||
pagination.value.pageSize = res.data.size;
|
||||
} else {
|
||||
message.error(res.message || '查询失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('查询失败:', error);
|
||||
message.error('查询操作失败，请检查网络');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const reset = () => {
|
||||
searchPhone.value = "";
|
||||
searchParams.value = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole: "staff",
|
||||
phoneNumber: null
|
||||
};
|
||||
getUserList();
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 操作用户
|
||||
const open = ref<boolean>(false);
|
||||
|
||||
const selectedUser = ref<any>(null);
|
||||
|
||||
const isEditMode = ref(false);
|
||||
const editForm = ref({
|
||||
id: 0,
|
||||
nickName: '',
|
||||
userAvatar: '',
|
||||
phoneNumber: '',
|
||||
userAccount: '',
|
||||
userPassword: '',
|
||||
invitationCode: '',
|
||||
userRole: '',
|
||||
parentUserId: 0,
|
||||
SuperUserList: ''
|
||||
});
|
||||
|
||||
|
||||
|
||||
const showDrawer = (record: any) => {
|
||||
selectedUser.value = record;
|
||||
editForm.value = {
|
||||
id: record.id,
|
||||
nickName: record.nickName,
|
||||
userAvatar: record.userAvatar||'',
|
||||
phoneNumber: record.phoneNumber,
|
||||
userAccount: record.userAccount,
|
||||
userPassword: record.userPassword,
|
||||
invitationCode: record.invitationCode,
|
||||
userRole: record.userRole,
|
||||
parentUserId: record.parentUserId,
|
||||
SuperUserList: Array.isArray(record.superHostList)
|
||||
? record.superHostList.join(',')
|
||||
: record.SuperUserList || ''
|
||||
};
|
||||
open.value = true;
|
||||
isEditMode.value = false;
|
||||
};
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.action-btn {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-divider-vertical) {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
height: 1.2em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
font-weight: 600;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.custom-button {
|
||||
width: 120px;
|
||||
}
|
||||
.view-mode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.info-card :deep(.ant-card-head) {
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 18px;
|
||||
color: #1890ff;
|
||||
margin-right: 16px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
display: block;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.role-tag {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--role-user: #87d068;
|
||||
--role-admin: #f50;
|
||||
--role-boss: #722ed1;
|
||||
}
|
||||
|
||||
.role-tag[color="user"] {
|
||||
background: var(--role-user);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.role-tag[color="admin"] {
|
||||
background: var(--role-admin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.role-tag[color="boss"] {
|
||||
background: var(--role-boss);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.password-strength span {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.password-strength span::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #eee;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
|
||||
.avatar-uploader :deep(.ant-upload) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.avatar-uploader .ant-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .ant-upload:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.avatar-uploader img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-wrapper-disabled) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
807
src/view/userList/supervisorList.vue
Normal file
807
src/view/userList/supervisorList.vue
Normal file
@ -0,0 +1,807 @@
|
||||
<template>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-box">
|
||||
<div class="search-container">
|
||||
<a-form layout="inline">
|
||||
<a-space>
|
||||
|
||||
<a-form-item label="手机号">
|
||||
<a-input-search
|
||||
style="width: 300px;"
|
||||
placeholder="请输入手机号"
|
||||
enter-button
|
||||
@search="handlePhoneSearch"
|
||||
v-model:value="searchPhone"
|
||||
type="text"
|
||||
class="custom-search"
|
||||
:maxlength="11"
|
||||
@input="handleSearchPhoneInput"
|
||||
@keydown="handleKeyDown"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-button class="custom-button" @click="reset">重置搜索</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据-->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:scroll="{ x: 1400, y: 550 }"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
bordered
|
||||
rowKey="id"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'userAvatar'">
|
||||
<a-avatar :src="downLoadImage + record.userAvatar" />
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'operation'">
|
||||
<a-space :size="16">
|
||||
<a class="action-btn" @click="showDrawer(record)">详情</a>
|
||||
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 抽屉-->
|
||||
<a-drawer
|
||||
v-model:open="open"
|
||||
title="用户详细信息"
|
||||
placement="right"
|
||||
width="600"
|
||||
>
|
||||
<div v-if="selectedUser" class="user-detail">
|
||||
<div class="header">
|
||||
<a-avatar :size="128" :src="downLoadImage+selectedUser.userAvatar" class="avatar" />
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
v-if="isEditMode"
|
||||
:model="editForm"
|
||||
:rules="editFormRules"
|
||||
ref="editFormRef"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
>
|
||||
<!-- 可编辑表单 -->
|
||||
<a-form-item label="昵称" name="nickName">
|
||||
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="头像" name="userAvatar" required>
|
||||
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<a-form-item label="手机号" name="phoneNumber">
|
||||
|
||||
</a-form-item>
|
||||
<a-form-item label="账户" name="userAccount">
|
||||
|
||||
</a-form-item>
|
||||
<a-form-item label="密码" name="userPassword" required>
|
||||
|
||||
</a-form-item>
|
||||
<a-form-item label="身份">
|
||||
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 6 }">
|
||||
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<div v-else class="view-mode">
|
||||
<!-- 基本信息卡片 -->
|
||||
<a-card title="基本信息" class="info-card">
|
||||
<div class="info-item">
|
||||
<user-outlined class="info-icon" />
|
||||
<div class="info-content">
|
||||
<span class="info-label">用户ID</span>
|
||||
<span class="info-value">{{ selectedUser.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<idcard-outlined class="info-icon" />
|
||||
<div class="info-content">
|
||||
<span class="info-label">账户信息</span>
|
||||
<div class="account-detail">
|
||||
<span>{{ selectedUser.userAccount }}</span>
|
||||
<a-tag class="role-tag">
|
||||
{{ editForm.userRole}}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<smile-outlined class="info-icon" />
|
||||
<div class="info-content">
|
||||
<span class="info-label">昵称</span>
|
||||
<span class="info-value highlight">{{ selectedUser.nickName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 联系信息卡片 -->
|
||||
<a-card title="联系信息" class="info-card">
|
||||
<div class="info-item">
|
||||
<phone-outlined class="info-icon" />
|
||||
<div class="info-content">
|
||||
<span class="info-label">手机号码</span>
|
||||
<span class="info-value">{{ selectedUser.phoneNumber || '未绑定' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-drawer>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref} from "vue";
|
||||
import myAxios from "../../api/myAxios.ts";
|
||||
import { message } from "ant-design-vue";
|
||||
import {downLoadImage} from '../../api/ImageUrl.ts'
|
||||
|
||||
import {
|
||||
UserOutlined,
|
||||
IdcardOutlined,
|
||||
SmileOutlined,
|
||||
PhoneOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
|
||||
|
||||
const handleSearchPhoneInput = (e: any) => {
|
||||
let value = e.target.value;
|
||||
|
||||
// 只允许输入数字，并截取前11位
|
||||
const newValue = value.replace(/[^0-9]/g, '').slice(0, 11);
|
||||
|
||||
if (newValue !== value) {
|
||||
searchPhone.value = newValue;
|
||||
}
|
||||
};
|
||||
|
||||
// 新增 onKeyDown 事件处理函数
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
|
||||
const allowedKeys = [
|
||||
'Backspace',
|
||||
'Delete',
|
||||
'ArrowLeft',
|
||||
'ArrowRight',
|
||||
'Tab',
|
||||
];
|
||||
|
||||
|
||||
if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const searchParams = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole:"supervisor",
|
||||
phoneNumber:null
|
||||
});
|
||||
//用户表
|
||||
const columns = [
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'id',
|
||||
width: 50,
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
sortDirections: ['ascend', 'descend']
|
||||
},
|
||||
|
||||
{
|
||||
title: '头像',
|
||||
dataIndex: 'userAvatar',
|
||||
key: 'userAvatar',
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'userAccount',
|
||||
width: 90,
|
||||
key: 'userAccount',
|
||||
fixed: 'left',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户昵称',
|
||||
dataIndex: 'nickName',
|
||||
width: 70,
|
||||
key: 'nickName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '身份',
|
||||
dataIndex: 'userRole',
|
||||
key: 'userRole',
|
||||
width: 50,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phoneNumber',
|
||||
key: 'phoneNumber',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
sortDirections: ['ascend', 'descend']
|
||||
},
|
||||
// {
|
||||
// title: '邀请码',
|
||||
// dataIndex: 'invitationCode',
|
||||
// key: 'invitationCode',
|
||||
// width: 70,
|
||||
// align: 'center',
|
||||
// sorter: true,
|
||||
// sortDirections: ['ascend', 'descend']
|
||||
// },
|
||||
// {
|
||||
// title: '上级ID',
|
||||
// dataIndex: 'parentUserId',
|
||||
// key: 'parentUserId',
|
||||
// width: 40,
|
||||
// align: 'center',
|
||||
// sorter: true,
|
||||
// sortDirections: ['ascend', 'descend']
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
width: 90,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
// 分页配置
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['10', '20', '50', '100']
|
||||
});
|
||||
//编辑用户表单
|
||||
|
||||
const editFormRules = {
|
||||
nickName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入昵称',
|
||||
trigger: ['input', 'blur']
|
||||
},
|
||||
{
|
||||
min: 1,
|
||||
max: 6,
|
||||
message: '昵称长度需为1-6位',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
],
|
||||
phoneNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
trigger: ['input', 'blur']
|
||||
},
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: '必须是有效的11位手机号',
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
],
|
||||
userPassword: [
|
||||
{
|
||||
min: 6,
|
||||
max: 10,
|
||||
message: '长度需为6-10位',
|
||||
trigger: ['input', 'blur']
|
||||
},
|
||||
{
|
||||
validator: (_: any, value: string) => {
|
||||
if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
|
||||
return Promise.reject('必须包含大小写字母和数字');
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
trigger: ['input', 'blur']
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
const editFormRef = ref();
|
||||
|
||||
// 修改后的分页处理函数
|
||||
const handleTableChange = (pag: any, _: any, sorter: any) => {
|
||||
|
||||
let sortField = "id";
|
||||
let sortOrder = "ascend";
|
||||
|
||||
if (sorter.field) {
|
||||
sortField = sorter.field;
|
||||
sortOrder = sorter.order;
|
||||
}
|
||||
|
||||
searchParams.value = {
|
||||
...searchParams.value,
|
||||
current: pag.current,
|
||||
pageSize: pag.pageSize,
|
||||
sortField: sortField,
|
||||
sortOrder: sortOrder
|
||||
};
|
||||
|
||||
pagination.value.current = pag.current;
|
||||
pagination.value.pageSize = pag.pageSize;
|
||||
|
||||
getUserList();
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getUserList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
if (!storedToken) throw new Error('未找到登录信息');
|
||||
|
||||
const res: any = await myAxios.post("/userInfo/page",
|
||||
{...searchParams.value },
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
console.log(res)
|
||||
if (res.code === 1 && res.data) {
|
||||
tableData.value = res.data.records.map((item: any) => {
|
||||
if (item.parentUserId === -1) {
|
||||
item.parentUserId = '无';
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
superUserList: item.superHostList? item.superHostList.join(', ') : '无'
|
||||
};
|
||||
});
|
||||
|
||||
pagination.value.total = res.data.total;
|
||||
pagination.value.current = res.data.current;
|
||||
pagination.value.pageSize = res.data.size;
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(getUserList);
|
||||
|
||||
// ID查询方法
|
||||
interface User {
|
||||
id: number;
|
||||
nickName: string;
|
||||
userAvatar: string;
|
||||
phoneNumber: string;
|
||||
userAccount: string;
|
||||
userPassword: string;
|
||||
invitationCode: string;
|
||||
userRole:string;
|
||||
parentUserId:number
|
||||
}
|
||||
|
||||
const tableData = ref<User[]>([]);
|
||||
|
||||
const searchPhone = ref("");
|
||||
|
||||
|
||||
const handlePhoneSearch = async () => {
|
||||
if (!searchPhone.value) {
|
||||
message.warning('请输入手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证手机号格式
|
||||
if (!/^1[3-9]\d{9}$/.test(searchPhone.value)) {
|
||||
message.warning('请输入有效的11位手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
if (!storedToken) throw new Error('未找到登录信息');
|
||||
|
||||
|
||||
const res: { code: number; data: any; message: any } = await myAxios.post(
|
||||
"/userInfo/page",
|
||||
{
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
userRole:'supervisor',
|
||||
phoneNumber: searchPhone.value
|
||||
},
|
||||
{ headers: { Authorization: storedToken } }
|
||||
);
|
||||
|
||||
if (res.code === 1 && res.data) {
|
||||
tableData.value = res.data.records.map((item: any) => {
|
||||
if (item.parentUserId === -1) {
|
||||
item.parentUserId = '无';
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
superUserList: item.superHostList? item.superHostList.join(', ') : '无'
|
||||
};
|
||||
});
|
||||
// 更新分页信息
|
||||
pagination.value.total = res.data.total;
|
||||
pagination.value.current = res.data.current;
|
||||
pagination.value.pageSize = res.data.size;
|
||||
} else {
|
||||
message.error(res.message || '查询失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('查询失败:', error);
|
||||
message.error('查询操作失败，请检查网络');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const reset = () => {
|
||||
searchPhone.value = "";
|
||||
searchParams.value = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
sortField: "id",
|
||||
sortOrder: "ascend",
|
||||
userRole: "supervisor",
|
||||
phoneNumber: null
|
||||
};
|
||||
getUserList();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// 操作用户
|
||||
const open = ref<boolean>(false);
|
||||
|
||||
const selectedUser = ref<any>(null);
|
||||
|
||||
const isEditMode = ref(false);
|
||||
const editForm = ref({
|
||||
id: 0,
|
||||
nickName: '',
|
||||
userAvatar: '',
|
||||
phoneNumber: '',
|
||||
userAccount: '',
|
||||
userPassword: '',
|
||||
invitationCode: '',
|
||||
userRole: '',
|
||||
parentUserId: 0,
|
||||
SuperUserList: ''
|
||||
});
|
||||
|
||||
|
||||
const showDrawer = (record: any) => {
|
||||
selectedUser.value = record;
|
||||
editForm.value = {
|
||||
id: record.id,
|
||||
nickName: record.nickName,
|
||||
userAvatar: record.userAvatar||'',
|
||||
phoneNumber: record.phoneNumber,
|
||||
userAccount: record.userAccount,
|
||||
userPassword: record.userPassword,
|
||||
invitationCode: record.invitationCode,
|
||||
userRole: record.userRole,
|
||||
parentUserId: record.parentUserId,
|
||||
SuperUserList: Array.isArray(record.superHostList)
|
||||
? record.superHostList.join(',')
|
||||
: record.SuperUserList || ''
|
||||
};
|
||||
open.value = true;
|
||||
isEditMode.value = false;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.action-btn {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-divider-vertical) {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
height: 1.2em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
font-weight: 600;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.custom-button {
|
||||
width: 120px;
|
||||
}
|
||||
.view-mode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.info-card :deep(.ant-card-head) {
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 18px;
|
||||
color: #1890ff;
|
||||
margin-right: 16px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
display: block;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.role-tag {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--role-user: #87d068;
|
||||
--role-admin: #f50;
|
||||
--role-boss: #722ed1;
|
||||
}
|
||||
|
||||
.role-tag[color="user"] {
|
||||
background: var(--role-user);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.role-tag[color="admin"] {
|
||||
background: var(--role-admin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.role-tag[color="boss"] {
|
||||
background: var(--role-boss);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.error-tip {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.password-strength {
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.password-strength span {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.password-strength span::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #eee;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.strength-ok {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.strength-ok::before {
|
||||
background: #52c41a !important;
|
||||
}
|
||||
|
||||
.avatar-uploader :deep(.ant-upload) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ant-upload-text {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.input-tip {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
color: #f5222d;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.password-strength {
|
||||
margin-top: 4px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.strength-ok {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.avatar-uploader .ant-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .ant-upload:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.avatar-uploader img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.custom-button {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button:hover,
|
||||
.custom-button:focus {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-button[disabled] {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
opacity: 0.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button) {
|
||||
background-color: #ffa940;
|
||||
border-color: #ffa940;
|
||||
}
|
||||
|
||||
.custom-search :deep(.ant-input-search-button:hover),
|
||||
.custom-search :deep(.ant-input-search-button:focus) {
|
||||
background-color: #fa8c16;
|
||||
border-color: #fa8c16;
|
||||
}
|
||||
|
||||
|
||||
.custom-search :deep(.ant-input) {
|
||||
border-right-color: #ffa940;
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-wrapper-disabled) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user