635 lines
14 KiB
TypeScript
635 lines
14 KiB
TypeScript
// 员工管理页面 - 集成到管理员界面
|
||
import { EmployeeInfo } from '../../types';
|
||
import employeeService from '../../services/employeeService';
|
||
import { Role, getRoleOptions } from '../../utils/roleUtils';
|
||
import { avatarCache } from '../../utils/avatarCache';
|
||
import { API_BASE_URL } from '../../services/apiService';
|
||
|
||
Page({
|
||
data: {
|
||
// 员工列表
|
||
employees: [] as EmployeeInfo[],
|
||
filteredEmployees: [] as EmployeeInfo[],
|
||
|
||
// 页面状态
|
||
currentTab: 'list', // list: 列表页, add: 添加页, edit: 编辑页
|
||
loading: false,
|
||
|
||
// 添加员工表单数据
|
||
addForm: {
|
||
name: '',
|
||
phone: '',
|
||
role: Role.DELIVERY_PERSON
|
||
},
|
||
|
||
// 编辑员工表单数据
|
||
editForm: {
|
||
id: 0,
|
||
name: '',
|
||
phone: '',
|
||
role: Role.DELIVERY_PERSON,
|
||
avatarUrl: ''
|
||
},
|
||
|
||
// 错误信息
|
||
errorMessage: '',
|
||
successMessage: '',
|
||
|
||
// 搜索关键词
|
||
searchKeyword: '',
|
||
|
||
// 角色选项
|
||
roleOptions: getRoleOptions(),
|
||
|
||
// 用户信息
|
||
userInfo: null as any,
|
||
|
||
// 临时头像路径（用于头像上传）
|
||
tempAvatarPath: ''
|
||
},
|
||
|
||
onLoad() {
|
||
this.getUserInfo();
|
||
this.loadEmployees();
|
||
},
|
||
|
||
onShow() {
|
||
// 只在页面显示时检查是否需要刷新数据，避免频繁请求
|
||
if (this.data.employees.length === 0) {
|
||
this.loadEmployees();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取用户信息
|
||
*/
|
||
getUserInfo() {
|
||
const app = getApp<any>();
|
||
if (app.globalData.userInfo) {
|
||
const userInfo = app.globalData.userInfo;
|
||
this.setData({ userInfo });
|
||
|
||
// 验证是否为管理员
|
||
if (userInfo.role !== 'ADMIN') {
|
||
wx.showToast({
|
||
title: '无权限访问',
|
||
icon: 'none'
|
||
});
|
||
wx.navigateBack();
|
||
}
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取完整的头像URL
|
||
* @param avatarPath 头像相对路径
|
||
* @returns 完整的头像URL
|
||
*/
|
||
getFullAvatarUrl(avatarPath: string | undefined): string {
|
||
if (!avatarPath) {
|
||
return '/images/user-avatar.png';
|
||
}
|
||
|
||
// 如果已经是完整URL，直接返回
|
||
if (avatarPath.startsWith('http')) {
|
||
return avatarPath;
|
||
}
|
||
|
||
// 将相对路径转换为完整URL
|
||
return `${API_BASE_URL}${avatarPath}`;
|
||
},
|
||
|
||
/**
|
||
* 获取本地缓存的头像路径
|
||
*/
|
||
async getLocalAvatarPath(avatarPath: string | undefined): Promise<string> {
|
||
if (!avatarPath) {
|
||
return '/images/user-avatar.png';
|
||
}
|
||
|
||
try {
|
||
// 使用头像缓存获取本地文件路径
|
||
const fullAvatarUrl = this.getFullAvatarUrl(avatarPath);
|
||
const localAvatarPath = await avatarCache.getAvatarPath(fullAvatarUrl);
|
||
return localAvatarPath;
|
||
} catch (error) {
|
||
console.error('获取头像缓存失败:', error);
|
||
// 如果缓存失败，回退到远程URL
|
||
return this.getFullAvatarUrl(avatarPath);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 加载员工列表
|
||
*/
|
||
async loadEmployees() {
|
||
this.setData({
|
||
loading: true,
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
|
||
try {
|
||
const employees = await employeeService.getEmployees();
|
||
|
||
// 为每个员工获取本地缓存的头像路径
|
||
const employeesWithAvatars = await Promise.all(
|
||
employees.map(async (employee) => {
|
||
const localAvatarPath = await this.getLocalAvatarPath(employee.avatarPath);
|
||
|
||
return {
|
||
...employee,
|
||
fullAvatarUrl: localAvatarPath
|
||
};
|
||
})
|
||
);
|
||
|
||
// 获取过滤后的员工列表
|
||
const filteredEmployees = this.getFilteredEmployees(employeesWithAvatars);
|
||
|
||
this.setData({
|
||
employees: employeesWithAvatars,
|
||
filteredEmployees,
|
||
loading: false
|
||
});
|
||
} catch (error) {
|
||
console.error('加载员工列表失败:', error);
|
||
this.setData({
|
||
loading: false,
|
||
errorMessage: '加载员工列表失败，请稍后重试'
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 切换页面标签
|
||
*/
|
||
switchTab(e: any) {
|
||
const tab = e.currentTarget.dataset.tab;
|
||
this.setData({
|
||
currentTab: tab,
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
|
||
// 只在切换到列表页且没有数据时才加载，避免频繁请求
|
||
if (tab === 'list' && this.data.employees.length === 0) {
|
||
this.loadEmployees();
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 处理添加员工表单输入
|
||
*/
|
||
onFormInput(e: any) {
|
||
const { field } = e.currentTarget.dataset;
|
||
const value = e.detail.value;
|
||
|
||
this.setData({
|
||
[`addForm.${field}`]: value,
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 处理角色选择
|
||
*/
|
||
onRoleChange(e: any) {
|
||
const index = e.detail.value;
|
||
const selectedRole = this.data.roleOptions[index].value;
|
||
this.setData({
|
||
'addForm.role': selectedRole
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 验证表单数据
|
||
*/
|
||
validateForm(): boolean {
|
||
const { name, phone, role } = this.data.addForm;
|
||
|
||
if (!name.trim()) {
|
||
this.setData({
|
||
errorMessage: '请输入员工姓名'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if (!phone.trim()) {
|
||
this.setData({
|
||
errorMessage: '请输入员工工号'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// 简单的工号格式验证
|
||
const phoneRegex = /^\d+$/;
|
||
if (!phoneRegex.test(phone)) {
|
||
this.setData({
|
||
errorMessage: '工号只能包含数字'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if (!role) {
|
||
this.setData({
|
||
errorMessage: '请选择员工角色'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
|
||
/**
|
||
* 提交添加员工表单
|
||
*/
|
||
async submitAddForm() {
|
||
if (!this.validateForm()) {
|
||
return;
|
||
}
|
||
|
||
this.setData({
|
||
loading: true,
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
|
||
try {
|
||
await employeeService.addEmployee(this.data.addForm);
|
||
|
||
this.setData({
|
||
loading: false,
|
||
successMessage: '员工添加成功',
|
||
addForm: {
|
||
name: '',
|
||
phone: '',
|
||
role: Role.DELIVERY_PERSON
|
||
}
|
||
});
|
||
|
||
// 添加成功后自动切换到列表页
|
||
setTimeout(() => {
|
||
this.setData({
|
||
currentTab: 'list'
|
||
});
|
||
this.loadEmployees();
|
||
}, 1500);
|
||
} catch (error) {
|
||
console.error('添加员工失败:', error);
|
||
this.setData({
|
||
loading: false,
|
||
errorMessage: (error as Error).message || '添加员工失败，请稍后重试'
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 编辑员工
|
||
*/
|
||
editEmployee(e: any) {
|
||
const employeeId = e.currentTarget.dataset.id;
|
||
const employee = this.data.employees.find(emp => emp.id === employeeId);
|
||
|
||
if (employee) {
|
||
this.setData({
|
||
editForm: {
|
||
id: employee.id || 0,
|
||
name: employee.name || '',
|
||
phone: employee.phone || '',
|
||
role: employee.role || Role.DELIVERY_PERSON,
|
||
avatarUrl: ''
|
||
},
|
||
currentTab: 'edit'
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 提交编辑员工表单
|
||
*/
|
||
async submitEditForm() {
|
||
if (!this.validateEditForm()) {
|
||
return;
|
||
}
|
||
|
||
this.setData({
|
||
loading: true,
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
|
||
try {
|
||
// 调用更新员工的API方法
|
||
await employeeService.updateEmployee(this.data.editForm.id, {
|
||
name: this.data.editForm.name,
|
||
phone: this.data.editForm.phone,
|
||
role: this.data.editForm.role
|
||
});
|
||
|
||
// 如果有新头像，上传头像
|
||
if (this.data.tempAvatarPath) {
|
||
try {
|
||
const result = await employeeService.uploadAvatar(this.data.editForm.id, this.data.tempAvatarPath);
|
||
if (result.success && result.avatarUrl) {
|
||
// 更新头像URL
|
||
this.setData({
|
||
'editForm.avatarUrl': result.avatarUrl
|
||
});
|
||
}
|
||
} catch (avatarError) {
|
||
console.error('上传头像失败:', avatarError);
|
||
wx.showToast({
|
||
title: '头像上传失败',
|
||
icon: 'error'
|
||
});
|
||
}
|
||
}
|
||
|
||
this.setData({
|
||
loading: false,
|
||
successMessage: '员工更新成功',
|
||
currentTab: 'list',
|
||
tempAvatarPath: ''
|
||
});
|
||
|
||
// 重新加载员工列表
|
||
this.loadEmployees();
|
||
|
||
} catch (error) {
|
||
console.error('更新员工失败:', error);
|
||
this.setData({
|
||
loading: false,
|
||
errorMessage: '更新员工失败，请重试'
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 选择头像
|
||
*/
|
||
chooseAvatar() {
|
||
wx.chooseMedia({
|
||
count: 1,
|
||
mediaType: ['image'],
|
||
sourceType: ['album'],
|
||
maxDuration: 30,
|
||
camera: 'back',
|
||
success: (res) => {
|
||
if (res.tempFiles && res.tempFiles.length > 0) {
|
||
const tempFilePath = res.tempFiles[0].tempFilePath;
|
||
this.setData({
|
||
'editForm.avatarUrl': tempFilePath,
|
||
tempAvatarPath: tempFilePath
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择头像失败:', err);
|
||
wx.showToast({
|
||
title: '选择头像失败',
|
||
icon: 'error'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 拍照
|
||
*/
|
||
takePhoto() {
|
||
wx.chooseMedia({
|
||
count: 1,
|
||
mediaType: ['image'],
|
||
sourceType: ['camera'],
|
||
maxDuration: 30,
|
||
camera: 'back',
|
||
success: (res) => {
|
||
if (res.tempFiles && res.tempFiles.length > 0) {
|
||
const tempFilePath = res.tempFiles[0].tempFilePath;
|
||
this.setData({
|
||
'editForm.avatarUrl': tempFilePath,
|
||
tempAvatarPath: tempFilePath
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('拍照失败:', err);
|
||
wx.showToast({
|
||
title: '拍照失败',
|
||
icon: 'error'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 验证编辑表单
|
||
*/
|
||
validateEditForm(): boolean {
|
||
const { name, phone, role } = this.data.editForm;
|
||
|
||
if (!name.trim()) {
|
||
this.setData({
|
||
errorMessage: '请输入员工姓名'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if (!phone.trim()) {
|
||
this.setData({
|
||
errorMessage: '请输入员工工号'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// 简单的工号格式验证
|
||
const phoneRegex = /^\d+$/;
|
||
if (!phoneRegex.test(phone)) {
|
||
this.setData({
|
||
errorMessage: '工号只能包含数字'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if (!role) {
|
||
this.setData({
|
||
errorMessage: '请选择员工角色'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
|
||
/**
|
||
* 取消编辑
|
||
*/
|
||
cancelEdit() {
|
||
this.setData({
|
||
currentTab: 'list',
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 编辑表单输入处理
|
||
*/
|
||
onEditFormInput(e: any) {
|
||
const { field } = e.currentTarget.dataset;
|
||
const value = e.detail.value;
|
||
|
||
this.setData({
|
||
[`editForm.${field}`]: value,
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 处理编辑角色选择
|
||
*/
|
||
onEditRoleChange(e: any) {
|
||
const index = e.detail.value;
|
||
const selectedRole = this.data.roleOptions[index].value;
|
||
this.setData({
|
||
'editForm.role': selectedRole
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 删除员工
|
||
*/
|
||
async deleteEmployee(e: any) {
|
||
const employeeId = e.currentTarget.dataset.id;
|
||
const employee = this.data.employees.find(emp => emp.id === employeeId);
|
||
|
||
if (!employee) {
|
||
return;
|
||
}
|
||
|
||
wx.showModal({
|
||
title: '确认删除',
|
||
content: `确定要删除员工 ${employee.name} (${employee.phone}) 吗？此操作不可恢复。`,
|
||
confirmText: '删除',
|
||
confirmColor: '#ff4d4f',
|
||
cancelText: '取消',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
this.setData({
|
||
loading: true,
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
|
||
try {
|
||
const result = await employeeService.deleteEmployee(employeeId);
|
||
|
||
if (result.success) {
|
||
this.setData({
|
||
loading: false,
|
||
successMessage: result.message || '员工删除成功'
|
||
});
|
||
|
||
// 重新加载员工列表
|
||
this.loadEmployees();
|
||
} else {
|
||
this.setData({
|
||
loading: false,
|
||
errorMessage: result.message || '删除员工失败'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('删除员工失败:', error);
|
||
this.setData({
|
||
loading: false,
|
||
errorMessage: '删除员工失败，请稍后重试'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 搜索员工
|
||
*/
|
||
onSearchInput(e: any) {
|
||
const keyword = e.detail.value;
|
||
this.setData({
|
||
searchKeyword: keyword
|
||
});
|
||
|
||
// 更新过滤后的员工列表
|
||
this.updateFilteredEmployees();
|
||
},
|
||
|
||
/**
|
||
* 更新过滤后的员工列表
|
||
*/
|
||
updateFilteredEmployees() {
|
||
const { employees } = this.data;
|
||
const filteredEmployees = this.getFilteredEmployees(employees);
|
||
this.setData({
|
||
filteredEmployees
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取过滤后的员工列表
|
||
*/
|
||
getFilteredEmployees(employees?: EmployeeInfo[]): EmployeeInfo[] {
|
||
const { searchKeyword } = this.data;
|
||
|
||
// 如果employees为空，返回空数组
|
||
if (!employees || !Array.isArray(employees)) {
|
||
return [];
|
||
}
|
||
|
||
// 显示所有员工，包括当前用户
|
||
let filteredEmployees = employees;
|
||
|
||
// 更严格的搜索关键词检查
|
||
if (!searchKeyword || typeof searchKeyword !== 'string' || !searchKeyword.trim()) {
|
||
return filteredEmployees;
|
||
}
|
||
|
||
const keyword = searchKeyword.toLowerCase();
|
||
return filteredEmployees.filter(emp =>
|
||
emp.name.toLowerCase().includes(keyword) ||
|
||
emp.phone.includes(keyword) ||
|
||
(emp.role || '').toLowerCase().includes(keyword)
|
||
);
|
||
},
|
||
|
||
/**
|
||
* 获取角色显示文本
|
||
*/
|
||
getRoleText(role: string): string {
|
||
const roleMap: Record<string, string> = {
|
||
'ADMIN': '管理员',
|
||
'DELIVERY_PERSON': '配送员',
|
||
'EMPLOYEE': '员工'
|
||
};
|
||
return roleMap[role] || role;
|
||
},
|
||
|
||
/**
|
||
* 清空消息
|
||
*/
|
||
clearMessages() {
|
||
this.setData({
|
||
errorMessage: '',
|
||
successMessage: ''
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 返回上一页
|
||
*/
|
||
goBack() {
|
||
wx.navigateBack();
|
||
}
|
||
}); |