[V0_FILE]javascript:file="lib/apiConfig.js" isMerged="true" export const BASE_URL = "https://api.yourdomain.com" // 替换为实际服务器地址 export const AUTH_TOKEN = "" // 登录后获取的 Bearer Token export const defaultHeaders = { Authorization: `Bearer ${AUTH_TOKEN}`, } // 更新token的方法 export const updateAuthToken = (newToken) => { defaultHeaders.Authorization = `Bearer ${newToken}` } [V0_FILE]javascript:file="lib/empApi.js" isMerged="true" import axios from "axios" import { BASE_URL, defaultHeaders } from "./apiConfig" // 1. 获取员工完整资料 export function fetchFullProfile(empId) { return axios .get(`${BASE_URL}/api/emp/${empId}/profile`, { headers: defaultHeaders, }) .then((res) => res.data) } // 2. 更新基础信息（最高学历） export function updateHighestDegree(empId, degree) { return axios .put( `${BASE_URL}/api/emp/profile`, { empId, highestDegree: degree }, { headers: { ...defaultHeaders, "Content-Type": "application/json" } }, ) .then((res) => res.data) } // 3. 身份证上传（正面 / 反面） export function uploadIdCard(empId, side, file) { const form = new FormData() form.append("file", file) return axios .post(`${BASE_URL}/api/emp/idcard?empId=${empId}&side=${side}`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) // { id, imgUrl, side } } // 4. 身份证更新 export function updateIdCard(id, file) { const form = new FormData() form.append("file", file) return axios .put(`${BASE_URL}/api/emp/idcard/${id}`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 5. 身份证删除 export function deleteIdCard(id) { return axios.delete(`${BASE_URL}/api/emp/idcard/${id}`, { headers: defaultHeaders }).then((res) => res.data) } // 6. 添加学历 export function addEducation(empId, type, level, school, date, file) { const form = new FormData() form.append("empId", empId) form.append("degreeType", type) form.append("degreeLevel", level) form.append("schoolName", school) form.append("gradDate", date) if (file) { form.append("certificateFile", file) } return axios .post(`${BASE_URL}/api/emp/education`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) // { id, certificateUrl } } // 7. 更新学历图片 export function updateEducation(id, file) { const form = new FormData() form.append("certificateFile", file) return axios .put(`${BASE_URL}/api/emp/education/${id}`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 8. 删除学历 export function deleteEducation(id) { return axios.delete(`${BASE_URL}/api/emp/education/${id}`, { headers: defaultHeaders }).then((res) => res.data) } // 9. 添加专业证书 export function addCert(empId, name, org, issueDate, expireDate, file) { const form = new FormData() form.append("empId", empId) form.append("certName", name) form.append("issueOrg", org) form.append("issueDate", issueDate) if (expireDate) form.append("expireDate", expireDate) if (file) { form.append("certificateFile", file) } return axios .post(`${BASE_URL}/api/emp/cert`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" } }) .then((res) => res.data) // { id, certificateUrl } } // 10. 更新专业证书 export function updateCert(id, file) { const form = new FormData() form.append("certificateFile", file) return axios .put(`${BASE_URL}/api/emp/cert/${id}`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 11. 删除专业证书 export function deleteCert(id) { return axios.delete(`${BASE_URL}/api/emp/cert/${id}`, { headers: defaultHeaders }).then((res) => res.data) } // 12. 添加社保凭证 export function addSocialInsurance(empId, year, month, file) { const form = new FormData() form.append("empId", empId) form.append("year", year) form.append("month", month) if (file) { form.append("billFile", file) } return axios .post(`${BASE_URL}/api/emp/social-insurance`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) // { id, billUrl } } // 13. 删除社保凭证 export function deleteSocialInsurance(id) { return axios.delete(`${BASE_URL}/api/emp/social-insurance/${id}`, { headers: defaultHeaders }).then((res) => res.data) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { ArrowLeft, Plus, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "@/hooks/use-toast" import * as empApi from "@/lib/empApi" // 类型定义 interface EducationRecord { id: string degreeType: string degreeLevel: string schoolName: string gradDate: string certificateUrl?: string } interface CertRecord { id: string certName: string issueOrg: string issueDate: string expireDate: string certificateUrl?: string } interface SocialInsuranceRecord { id: string year: number month: number billUrl?: string } interface BasicInfo { name: string workYears: string highestDegree: string } interface IdCardInfo { front?: { id: string imgUrl: string } back?: { id: string imgUrl: string } } const degreeOptions = ["高中", "大专", "本科", "硕士", "博士"] const degreeTypeOptions = ["第一学历", "第二学历", "在职学历"] // 模拟员工ID，实际应用中应该从路由参数或用户状态中获取 const CURRENT_EMP_ID = 123 export default function ProfilePage() { // 状态管理 const [basicInfo, setBasicInfo] = useState({ name: "", workYears: "", highestDegree: "", }) const [idCardInfo, setIdCardInfo] = useState({}) const [educationList, setEducationList] = useState([]) const [certList, setCertList] = useState([]) const [socialInsuranceList, setSocialInsuranceList] = useState([]) const [showEducationForm, setShowEducationForm] = useState(false) const [showCertForm, setShowCertForm] = useState(false) const [showSocialForm, setShowSocialForm] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false) const [isLoading, setIsLoading] = useState(true) const [editingEducation, setEditingEducation] = useState(null) const [editingCert, setEditingCert] = useState(null) const [editingSocial, setEditingSocial] = useState(null) // 页面初始化 - 获取员工完整资料 useEffect(() => { const initializeData = async () => { try { setIsLoading(true) const profileData = await empApi.fetchFullProfile(CURRENT_EMP_ID) // 设置基础信息 setBasicInfo({ name: profileData.name || "", workYears: profileData.workYears || "", highestDegree: profileData.highestDegree || "", }) // 设置身份证信息 setIdCardInfo({ front: profileData.idCard?.front, back: profileData.idCard?.back, }) // 设置学历列表 setEducationList(profileData.educationList || []) // 设置证书列表 setCertList(profileData.certList || []) // 设置社保列表 setSocialInsuranceList(profileData.socialInsuranceList || []) } catch (error) { console.error("Failed to load profile data:", error) toast({ title: "加载失败", description: "无法获取个人资料，请刷新重试", variant: "destructive", }) } finally { setIsLoading(false) } } initializeData() }, []) // 更新最高学历 const handleUpdateHighestDegree = async (degree: string) => { try { await empApi.updateHighestDegree(CURRENT_EMP_ID, degree) setBasicInfo({ ...basicInfo, highestDegree: degree }) toast({ title: "更新成功", description: "最高学历已更新", }) } catch (error) { console.error("Failed to update highest degree:", error) toast({ title: "更新失败", description: "请稍后重试", variant: "destructive", }) } } // 身份证上传 const handleIdCardUpload = async (side: "front" | "back", file: File) => { try { const existingCard = idCardInfo[side] let result if (existingCard) { // 更新现有身份证 result = await empApi.updateIdCard(existingCard.id, file) result = { ...existingCard, imgUrl: result.imgUrl } } else { // 上传新身份证 result = await empApi.uploadIdCard(CURRENT_EMP_ID, side, file) } setIdCardInfo({ ...idCardInfo, [side]: result, }) toast({ title: "上传成功", description: `身份证${side === "front" ? "正面" : "反面"}上传成功`, }) } catch (error) { console.error("Failed to upload ID card:", error) toast({ title: "上传失败", description: "请检查网络连接", variant: "destructive", }) } } // 删除身份证 const handleDeleteIdCard = async (side: "front" | "back") => { try { const cardInfo = idCardInfo[side] if (cardInfo) { await empApi.deleteIdCard(cardInfo.id) setIdCardInfo({ ...idCardInfo, [side]: undefined, }) toast({ title: "删除成功", description: `身份证${side === "front" ? "正面" : "反面"}已删除`, }) } } catch (error) { console.error("Failed to delete ID card:", error) toast({ title: "删除失败", description: "请稍后重试", variant: "destructive", }) } } // 添加学历 const handleAddEducation = async (data: Omit, file?: File) => { try { const result = await empApi.addEducation( CURRENT_EMP_ID, data.degreeType, data.degreeLevel, data.schoolName, data.gradDate, file, ) const newRecord: EducationRecord = { id: result.id, degreeType: data.degreeType, degreeLevel: data.degreeLevel, schoolName: data.schoolName, gradDate: data.gradDate, certificateUrl: result.certificateUrl, } setEducationList([...educationList, newRecord]) setShowEducationForm(false) toast({ title: "添加成功", description: "学历信息已添加", }) } catch (error) { console.error("Failed to add education:", error) toast({ title: "添加失败", description: "请稍后重试", variant: "destructive", }) } } // 更新学历 const handleUpdateEducation = async (data: Omit, file?: File) => { if (!editingEducation) return try { if (file) { const result = await empApi.updateEducation(editingEducation.id, file) data.certificateUrl = result.certificateUrl } const updatedRecord: EducationRecord = { ...data, id: editingEducation.id, } setEducationList(educationList.map((item) => (item.id === editingEducation.id ? updatedRecord : item))) setShowEducationForm(false) setEditingEducation(null) toast({ title: "更新成功", description: "学历信息已更新", }) } catch (error) { console.error("Failed to update education:", error) toast({ title: "更新失败", description: "请稍后重试", variant: "destructive", }) } } // 删除学历 const handleDeleteEducation = async (id: string) => { try { await empApi.deleteEducation(id) setEducationList(educationList.filter((item) => item.id !== id)) toast({ title: "删除成功", description: "学历信息已删除", }) } catch (error) { console.error("Failed to delete education:", error) toast({ title: "删除失败", description: "请稍后重试", variant: "destructive", }) } } // 添加证书 const handleAddCert = async (data: Omit, file?: File) => { try { const result = await empApi.addCert( CURRENT_EMP_ID, data.certName, data.issueOrg, data.issueDate, data.expireDate, file, ) const newRecord: CertRecord = { id: result.id, certName: data.certName, issueOrg: data.issueOrg, issueDate: data.issueDate, expireDate: data.expireDate, certificateUrl: result.certificateUrl, } setCertList([...certList, newRecord]) setShowCertForm(false) toast({ title: "添加成功", description: "证书信息已添加", }) } catch (error) { console.error("Failed to add certificate:", error) toast({ title: "添加失败", description: "请稍后重试", variant: "destructive", }) } } // 更新证书 const handleUpdateCert = async (data: Omit, file?: File) => { if (!editingCert) return try { if (file) { const result = await empApi.updateCert(editingCert.id, file) data.certificateUrl = result.certificateUrl } const updatedRecord: CertRecord = { ...data, id: editingCert.id, } setCertList(certList.map((item) => (item.id === editingCert.id ? updatedRecord : item))) setShowCertForm(false) setEditingCert(null) toast({ title: "更新成功", description: "证书信息已更新", }) } catch (error) { console.error("Failed to update certificate:", error) toast({ title: "更新失败", description: "请稍后重试", variant: "destructive", }) } } // 删除证书 const handleDeleteCert = async (id: string) => { try { await empApi.deleteCert(id) setCertList(certList.filter((item) => item.id !== id)) toast({ title: "删除成功", description: "证书信息已删除", }) } catch (error) { console.error("Failed to delete certificate:", error) toast({ title: "删除失败", description: "请稍后重试", variant: "destructive", }) } } // 添加社保 const handleAddSocialInsurance = async (data: Omit, file?: File) => { try { const result = await empApi.addSocialInsurance(CURRENT_EMP_ID, data.year, data.month, file) const newRecord: SocialInsuranceRecord = { id: result.id, year: data.year, month: data.month, billUrl: result.billUrl, } setSocialInsuranceList([...socialInsuranceList, newRecord]) setShowSocialForm(false) toast({ title: "添加成功", description: "社保凭证已添加", }) } catch (error) { console.error("Failed to add social insurance:", error) toast({ title: "添加失败", description: "请稍后重试", variant: "destructive", }) } } // 删除社保 const handleDeleteSocialInsurance = async (id: string) => { try { await empApi.deleteSocialInsurance(id) setSocialInsuranceList(socialInsuranceList.filter((item) => item.id !== id)) toast({ title: "删除成功", description: "社保凭证已删除", }) } catch (error) { console.error("Failed to delete social insurance:", error) toast({ title: "删除失败", description: "请稍后重试", variant: "destructive", }) } } // 编辑功能 const handleEditEducation = (data: EducationRecord) => { setEditingEducation(data) setShowEducationForm(true) } const handleEditCert = (data: CertRecord) => { setEditingCert(data) setShowCertForm(true) } const handleEditSocialInsurance = (data: SocialInsuranceRecord) => { setEditingSocial(data) setShowSocialForm(true) } // 最终提交 const handleSubmit = async () => { setIsSubmitting(true) try { // 这里可以添加最终提交的逻辑 // 比如调用一个完整提交的接口 await new Promise((resolve) => setTimeout(resolve, 2000)) toast({ title: "保存成功", description: "个人资料已更新", }) } catch (error) { toast({ title: "保存失败", description: "请稍后重试", variant: "destructive", }) } finally { setIsSubmitting(false) } } // 验证表单完整性 const isFormValid = () => { return basicInfo.name && basicInfo.highestDegree && idCardInfo.front && idCardInfo.back } if (isLoading) { return (

个人资料

加载中...

) } return (

{/* 顶部导航栏 */}

个人资料

{/* 1. 基础信息区 */}

基础信息

姓名

工作年限 setBasicInfo({ ...basicInfo, workYears: e.target.value })} placeholder="请输入工作年限" />

最高学历

{/* 2. 身份证上传区 */}

身份证上传

身份证正面

handleIdCardUpload("front", file)} onDelete={() => handleDeleteIdCard("front")} placeholder="上传正面" />

身份证反面

handleIdCardUpload("back", file)} onDelete={() => handleDeleteIdCard("back")} placeholder="上传反面" />

{/* 3. 学历证书区 */}

学历证书

{educationList.map((item) => ( handleEditEducation(item)} onDelete={() => handleDeleteEducation(item.id)} /> ))}

{/* 4. 专业证书区 */}

专业证书

{certList.map((item) => ( handleEditCert(item)} onDelete={() => handleDeleteCert(item.id)} /> ))}

{/* 5. 社保凭证区 */}

社保凭证

{socialInsuranceList.map((item) => ( handleEditSocialInsurance(item)} onDelete={() => handleDeleteSocialInsurance(item.id)} /> ))}

{/* 底部提交按钮 */}

{/* 弹窗表单 */} {showEducationForm && ( { setShowEducationForm(false) setEditingEducation(null) }} /> )} {showCertForm && ( { setShowCertForm(false) setEditingCert(null) }} /> )} {showSocialForm && ( { setShowSocialForm(false) setEditingSocial(null) }} /> )}

) } // 上传组件 function UploadBox({ imageUrl, onUpload, onDelete, placeholder, }: { imageUrl?: string onUpload: (file: File) => void onDelete: () => void placeholder: string }) { const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { onUpload(file) } } return (

{imageUrl ? ( <>

) : ( {placeholder} )}

) } // 学历项组件 function EducationItem({ data, onEdit, onDelete, }: { data: EducationRecord onEdit: () => void onDelete: () => void }) { return (

{data.schoolName} {data.degreeLevel} · {data.gradDate}

{data.certificateUrl && (

)}

) } // 证书项组件 function CertItem({ data, onEdit, onDelete, }: { data: CertRecord onEdit: () => void onDelete: () => void }) { return (

{data.certName} {data.issueOrg} · {data.expireDate}

{data.certificateUrl && (

)}

) } // 社保项组件 function SocialInsuranceItem({ data, onEdit, onDelete, }: { data: SocialInsuranceRecord onEdit: () => void onDelete: () => void }) { return (

{data.year}年{data.month}月社保

{data.billUrl && (

)}

) } // 学历表单 function EducationForm({ initialData, onSubmit, onCancel, }: { initialData?: EducationRecord | null onSubmit: (data: Omit, file?: File) => void onCancel: () => void }) { const [formData, setFormData] = useState({ degreeType: initialData?.degreeType || "", degreeLevel: initialData?.degreeLevel || "", schoolName: initialData?.schoolName || "", gradDate: initialData?.gradDate || "", certificateUrl: initialData?.certificateUrl || "", }) const [selectedFile, setSelectedFile] = useState(null) useEffect(() => { if (initialData) { setFormData({ degreeType: initialData.degreeType, degreeLevel: initialData.degreeLevel, schoolName: initialData.schoolName, gradDate: initialData.gradDate, certificateUrl: initialData.certificateUrl || "", }) } }, [initialData]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (formData.degreeType && formData.degreeLevel && formData.schoolName && formData.gradDate) { onSubmit(formData, selectedFile || undefined) } } const handleFileUpload = async (file: File) => { setSelectedFile(file) const url = URL.createObjectURL(file) setFormData({ ...formData, certificateUrl: url }) } return (

{initialData ? "编辑学历" : "添加学历"}

学历类型

学历层次

学校名称 setFormData({ ...formData, schoolName: e.target.value })} placeholder="请输入学校名称" />

毕业日期 setFormData({ ...formData, gradDate: e.target.value })} />

证书上传 { setFormData({ ...formData, certificateUrl: "" }) setSelectedFile(null) }} placeholder="上传证书" />

) } // 证书表单 function CertForm({ onSubmit, onCancel, initialData, }: { onSubmit: (data: Omit, file?: File) => void onCancel: () => void initialData?: CertRecord | null }) { const [formData, setFormData] = useState({ certName: initialData?.certName || "", issueOrg: initialData?.issueOrg || "", issueDate: initialData?.issueDate || "", expireDate: initialData?.expireDate || "", certificateUrl: initialData?.certificateUrl || "", }) const [selectedFile, setSelectedFile] = useState(null) useEffect(() => { if (initialData) { setFormData({ certName: initialData.certName, issueOrg: initialData.issueOrg, issueDate: initialData.issueDate, expireDate: initialData.expireDate, certificateUrl: initialData.certificateUrl || "", }) } }, [initialData]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (formData.certName && formData.issueOrg && formData.issueDate) { onSubmit(formData, selectedFile || undefined) } } const handleFileUpload = async (file: File) => { setSelectedFile(file) const url = URL.createObjectURL(file) setFormData({ ...formData, certificateUrl: url }) } return (

{initialData ? "编辑证书" : "添加证书"}

证书名称 setFormData({ ...formData, certName: e.target.value })} placeholder="请输入证书名称" />

发证机构 setFormData({ ...formData, issueOrg: e.target.value })} placeholder="请输入发证机构" />

发证日期 setFormData({ ...formData, issueDate: e.target.value })} />

过期日期 setFormData({ ...formData, expireDate: e.target.value })} />

证书上传 { setFormData({ ...formData, certificateUrl: "" }) setSelectedFile(null) }} placeholder="上传证书" />

) } // 社保表单 function SocialInsuranceForm({ onSubmit, onCancel, initialData, }: { onSubmit: (data: Omit, file?: File) => void onCancel: () => void initialData?: SocialInsuranceRecord | null }) { const [formData, setFormData] = useState({ year: initialData?.year || new Date().getFullYear(), month: initialData?.month || new Date().getMonth() + 1, billUrl: initialData?.billUrl || "", }) const [selectedFile, setSelectedFile] = useState(null) useEffect(() => { if (initialData) { setFormData({ year: initialData.year, month: initialData.month, billUrl: initialData.billUrl || "", }) } }, [initialData]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (formData.year && formData.month) { onSubmit(formData, selectedFile || undefined) } } const handleFileUpload = async (file: File) => { setSelectedFile(file) const url = URL.createObjectURL(file) setFormData({ ...formData, billUrl: url }) } const years = Array.from({ length: 10 }, (_, i) => new Date().getFullYear() - i) const months = Array.from({ length: 12 }, (_, i) => i + 1) return (

{initialData ? "编辑社保" : "上传社保"}

年份

月份

社保凭证 { setFormData({ ...formData, billUrl: "" }) setSelectedFile(null) }} placeholder="上传凭证" />

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; /* 根字号设置 */ html { font-size: 50px; } /* 全局样式重置 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Helvetica Neue", "PingFang SC", sans-serif; background-color: #f5f7fa; color: #333333; line-height: 1.4; } /* 页面容器 */ .profile-page { max-width: 420px; margin: 0 auto; min-height: 100vh; background: #ffffff; position: relative; padding-bottom: 1.6rem; } /* 加载状态 */ .loading-container { display: flex; align-items: center; justify-content: center; height: calc(100vh - 0.9rem); margin-top: 0.9rem; } .loading-text { font-size: 0.32rem; color: #666666; } /* 顶部导航栏 */ .header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 420px; height: 0.9rem; background: #1f73e8; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 0.48rem; font-weight: 600; z-index: 1000; } .header .back-icon { position: absolute; left: 0.3rem; width: 0.48rem; height: 0.48rem; background: none; border: none; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* 内容区域 */ .content { margin-top: 0.9rem; padding: 0.4rem 0; } /* 模块样式 */ .section { margin-bottom: 0.4rem; background: #ffffff; } .section-title { font-size: 0.36rem; font-weight: 600; color: #333333; margin: 0.4rem 0 0.2rem 0.3rem; } /* 表单字段 */ .form-field { display: flex; flex-direction: column; margin: 0.2rem 0.3rem 0.3rem 0.3rem; } .form-field label { font-size: 0.28rem; color: #666666; margin-bottom: 0.1rem; } .form-field input, .form-field select, .form-field [role="combobox"] { height: 0.6rem; font-size: 0.28rem; border: 1px solid #e5e5e5; border-radius: 4px; padding: 0 0.2rem; background: #ffffff; } .readonly-input { background: #f5f7fa !important; color: #666666; } /* 身份证上传区域 */ .id-card-row { display: flex; gap: 0.3rem; padding: 0 0.3rem; } .id-card-item { flex: 1; } .id-card-item label { font-size: 0.28rem; color: #666666; margin-bottom: 0.1rem; } .upload-container { margin-top: 0.1rem; } /* 上传框样式 */ .upload-box { width: 100%; height: 1.5rem; background: #f5f7fa; border: 1px dashed #e5e5e5; border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; } .upload-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .upload-box .delete-icon { position: absolute; top: 0.1rem; right: 0.1rem; width: 0.32rem; height: 0.32rem; background: rgba(0, 0, 0, 0.6); color: #ffffff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } .upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; color: #999999; font-size: 0.28rem; cursor: pointer; } /* 记录项样式 */ .record-item { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem; margin: 0.2rem 0.3rem; background: #f5f7fa; border-radius: 4px; } .record-info { display: flex; align-items: center; gap: 0.3rem; flex: 1; margin-right: 0.2rem; } .record-main { display: flex; flex-direction: column; gap: 0.1rem; } .record-title { font-size: 0.32rem; color: #333333; font-weight: 500; } .record-subtitle { font-size: 0.28rem; color: #666666; } .record-preview { width: 0.8rem; height: 0.6rem; border-radius: 4px; overflow: hidden; } .record-preview img { width: 100%; height: 100%; object-fit: cover; } /* 记录操作按钮区域 */ .record-actions { display: flex; align-items: center; gap: 0.2rem; } .edit-button { padding: 0.1rem 0.2rem; background: #1f73e8; color: #ffffff; border: none; border-radius: 4px; font-size: 0.24rem; cursor: pointer; min-width: 0.8rem; height: 0.5rem; display: flex; align-items: center; justify-content: center; } .edit-button:hover { background: #1557b0; } .delete-button { width: 0.4rem; height: 0.4rem; background: #ff4444; color: #ffffff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* 添加按钮 */ .add-button { width: calc(100% - 0.6rem); height: 0.6rem; margin: 0.2rem 0.3rem; background: #ffffff; border: 1px solid #1f73e8; color: #1f73e8; font-size: 0.32rem; display: flex; align-items: center; justify-content: center; gap: 0.1rem; } /* 提交按钮容器 */ .submit-container { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 420px; background: #ffffff; padding: 0.3rem; border-top: 1px solid #e5e5e5; } .submit-button { width: 100%; height: 0.8rem; background: #1f73e8; color: #ffffff; border-radius: 4px; font-size: 0.36rem; font-weight: 600; } .submit-button:disabled { background: #cccccc; cursor: not-allowed; } /* 弹窗样式 */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 0.4rem; } .modal-content { background: #ffffff; border-radius: 8px; width: 100%; max-width: 7rem; max-height: 80vh; overflow-y: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem; border-bottom: 1px solid #e5e5e5; } .modal-header h3 { font-size: 0.36rem; font-weight: 600; color: #333333; } .modal-header button { width: 0.4rem; height: 0.4rem; background: none; border: none; color: #666666; cursor: pointer; display: flex; align-items: center; justify-content: center; } .modal-form { padding: 0.4rem; } .form-row { display: flex; gap: 0.3rem; } .form-row .form-field { flex: 1; margin: 0.2rem 0 0.3rem 0; } .modal-actions { display: flex; gap: 0.3rem; margin-top: 0.4rem; } .modal-actions button { flex: 1; height: 0.6rem; font-size: 0.32rem; } /* 下拉菜单样式调整 */ .select-content [role="option"] { font-size: 0.28rem !important; padding: 0.1rem 0.2rem !important; min-height: 0.5rem !important; display: flex !important; align-items: center !important; } [role="combobox"], [role="option"] { font-size: 0.28rem !important; } .select-content { font-size: 0.28rem !important; } [data-radix-select-viewport] { font-size: 0.28rem !important; max-height: 6rem !important; } [data-radix-select-item] { font-size: 0.28rem !important; } /* 确保下拉菜单显示在弹窗上方 */ [data-radix-popper] { z-index: 3000 !important; width: var(--radix-select-trigger-width) !important; } /* 调整下拉菜单触发器字体大小 */ .select-trigger { font-size: 0.28rem !important; } /* 确保所有弹出元素在最上层 */ [data-radix-portal] { z-index: 3000 !important; } /* 弹窗层级调整 */ .modal-overlay { z-index: 2000; } /* 确保下拉菜单在弹窗之上 */ [data-state="open"] { z-index: 3000 !important; } /* 响应式适配 */ @media (max-width: 420px) { html { font-size: calc(50px * 100vw / 420); } } @media (max-width: 375px) { html { font-size: calc(50px * 100vw / 420); } } /* 滚动条样式 */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #f5f7fa; } ::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: #999999; } /* 确保弹窗中的表单元素正确显示 */ .modal-form .form-field { position: relative; z-index: 1; } /* 调整弹窗中下拉菜单的位置 */ .modal-form [data-radix-popper] { position: absolute !important; z-index: 3000 !important; } /* 确保所有输入框和选择框的高度一致 */ .form-field input, .form-field [role="combobox"] { height: 0.6rem; font-size: 0.28rem; } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { ArrowLeft, Plus, X, Edit, Trash2, Upload, Eye } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { toast } from "@/hooks/use-toast" import * as empApi from "@/lib/empApi" // 复用H5页面的类型定义 interface EducationRecord { id: string degreeType: string degreeLevel: string schoolName: string gradDate: string certificateUrl?: string } interface CertRecord { id: string certName: string issueOrg: string issueDate: string expireDate: string certificateUrl?: string } interface SocialInsuranceRecord { id: string year: number month: number billUrl?: string } interface BasicInfo { name: string workYears: string highestDegree: string } interface IdCardInfo { front?: { id: string imgUrl: string } back?: { id: string imgUrl: string } } const degreeOptions = ["高中", "大专", "本科", "硕士", "博士"] const degreeTypeOptions = ["第一学历", "第二学历", "在职学历"] // 模拟员工ID，实际应用中应该从路由参数或用户状态中获取 const CURRENT_EMP_ID = 123 export default function AdminProfilePage() { // 状态管理 const [basicInfo, setBasicInfo] = useState({ name: "", workYears: "", highestDegree: "", }) const [idCardInfo, setIdCardInfo] = useState({}) const [educationList, setEducationList] = useState([]) const [certList, setCertList] = useState([]) const [socialInsuranceList, setSocialInsuranceList] = useState([]) const [showEducationDialog, setShowEducationDialog] = useState(false) const [showCertDialog, setShowCertDialog] = useState(false) const [showSocialDialog, setShowSocialDialog] = useState(false) const [showImagePreview, setShowImagePreview] = useState(false) const [previewImageUrl, setPreviewImageUrl] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [isLoading, setIsLoading] = useState(true) const [editingEducation, setEditingEducation] = useState(null) const [editingCert, setEditingCert] = useState(null) const [editingSocial, setEditingSocial] = useState(null) // 页面初始化 - 获取员工完整资料 useEffect(() => { const initializeData = async () => { try { setIsLoading(true) const profileData = await empApi.fetchFullProfile(CURRENT_EMP_ID) setBasicInfo({ name: profileData.name || "", workYears: profileData.workYears || "", highestDegree: profileData.highestDegree || "", }) setIdCardInfo({ front: profileData.idCard?.front, back: profileData.idCard?.back, }) setEducationList(profileData.educationList || []) setCertList(profileData.certList || []) setSocialInsuranceList(profileData.socialInsuranceList || []) } catch (error) { console.error("Failed to load profile data:", error) toast({ title: "加载失败", description: "无法获取个人资料，请刷新重试", variant: "destructive", }) } finally { setIsLoading(false) } } initializeData() }, []) // 更新最高学历 const handleUpdateHighestDegree = async (degree: string) => { try { await empApi.updateHighestDegree(CURRENT_EMP_ID, degree) setBasicInfo({ ...basicInfo, highestDegree: degree }) toast({ title: "更新成功", description: "最高学历已更新", }) } catch (error) { console.error("Failed to update highest degree:", error) toast({ title: "更新失败", description: "请稍后重试", variant: "destructive", }) } } // 身份证上传 const handleIdCardUpload = async (side: "front" | "back", file: File) => { try { const existingCard = idCardInfo[side] let result if (existingCard) { result = await empApi.updateIdCard(existingCard.id, file) result = { ...existingCard, imgUrl: result.imgUrl } } else { result = await empApi.uploadIdCard(CURRENT_EMP_ID, side, file) } setIdCardInfo({ ...idCardInfo, [side]: result, }) toast({ title: "上传成功", description: `身份证${side === "front" ? "正面" : "反面"}上传成功`, }) } catch (error) { console.error("Failed to upload ID card:", error) toast({ title: "上传失败", description: "请检查网络连接", variant: "destructive", }) } } // 删除身份证 const handleDeleteIdCard = async (side: "front" | "back") => { try { const cardInfo = idCardInfo[side] if (cardInfo) { await empApi.deleteIdCard(cardInfo.id) setIdCardInfo({ ...idCardInfo, [side]: undefined, }) toast({ title: "删除成功", description: `身份证${side === "front" ? "正面" : "反面"}已删除`, }) } } catch (error) { console.error("Failed to delete ID card:", error) toast({ title: "删除失败", description: "请稍后重试", variant: "destructive", }) } } // 添加学历 const handleAddEducation = async (data: Omit, file?: File) => { try { const result = await empApi.addEducation( CURRENT_EMP_ID, data.degreeType, data.degreeLevel, data.schoolName, data.gradDate, file, ) const newRecord: EducationRecord = { id: result.id, degreeType: data.degreeType, degreeLevel: data.degreeLevel, schoolName: data.schoolName, gradDate: data.gradDate, certificateUrl: result.certificateUrl, } setEducationList([...educationList, newRecord]) setShowEducationDialog(false) toast({ title: "添加成功", description: "学历信息已添加", }) } catch (error) { console.error("Failed to add education:", error) toast({ title: "添加失败", description: "请稍后重试", variant: "destructive", }) } } // 更新学历 const handleUpdateEducation = async (data: Omit, file?: File) => { if (!editingEducation) return try { if (file) { const result = await empApi.updateEducation(editingEducation.id, file) data.certificateUrl = result.certificateUrl } const updatedRecord: EducationRecord = { ...data, id: editingEducation.id, } setEducationList(educationList.map((item) => (item.id === editingEducation.id ? updatedRecord : item))) setShowEducationDialog(false) setEditingEducation(null) toast({ title: "更新成功", description: "学历信息已更新", }) } catch (error) { console.error("Failed to update education:", error) toast({ title: "更新失败", description: "请稍后重试", variant: "destructive", }) } } // 删除学历 const handleDeleteEducation = async (id: string) => { try { await empApi.deleteEducation(id) setEducationList(educationList.filter((item) => item.id !== id)) toast({ title: "删除成功", description: "学历信息已删除", }) } catch (error) { console.error("Failed to delete education:", error) toast({ title: "删除失败", description: "请稍后重试", variant: "destructive", }) } } // 添加证书 const handleAddCert = async (data: Omit, file?: File) => { try { const result = await empApi.addCert( CURRENT_EMP_ID, data.certName, data.issueOrg, data.issueDate, data.expireDate, file, ) const newRecord: CertRecord = { id: result.id, certName: data.certName, issueOrg: data.issueOrg, issueDate: data.issueDate, expireDate: data.expireDate, certificateUrl: result.certificateUrl, } setCertList([...certList, newRecord]) setShowCertDialog(false) toast({ title: "添加成功", description: "证书信息已添加", }) } catch (error) { console.error("Failed to add certificate:", error) toast({ title: "添加失败", description: "请稍后重试", variant: "destructive", }) } } // 更新证书 const handleUpdateCert = async (data: Omit, file?: File) => { if (!editingCert) return try { if (file) { const result = await empApi.updateCert(editingCert.id, file) data.certificateUrl = result.certificateUrl } const updatedRecord: CertRecord = { ...data, id: editingCert.id, } setCertList(certList.map((item) => (item.id === editingCert.id ? updatedRecord : item))) setShowCertDialog(false) setEditingCert(null) toast({ title: "更新成功", description: "证书信息已更新", }) } catch (error) { console.error("Failed to update certificate:", error) toast({ title: "更新失败", description: "请稍后重试", variant: "destructive", }) } } // 删除证书 const handleDeleteCert = async (id: string) => { try { await empApi.deleteCert(id) setCertList(certList.filter((item) => item.id !== id)) toast({ title: "删除成功", description: "证书信息已删除", }) } catch (error) { console.error("Failed to delete certificate:", error) toast({ title: "删除失败", description: "请稍后重试", variant: "destructive", }) } } // 添加社保 const handleAddSocialInsurance = async (data: Omit, file?: File) => { try { const result = await empApi.addSocialInsurance(CURRENT_EMP_ID, data.year, data.month, file) const newRecord: SocialInsuranceRecord = { id: result.id, year: data.year, month: data.month, billUrl: result.billUrl, } setSocialInsuranceList([...socialInsuranceList, newRecord]) setShowSocialDialog(false) toast({ title: "添加成功", description: "社保凭证已添加", }) } catch (error) { console.error("Failed to add social insurance:", error) toast({ title: "添加失败", description: "请稍后重试", variant: "destructive", }) } } // 删除社保 const handleDeleteSocialInsurance = async (id: string) => { try { await empApi.deleteSocialInsurance(id) setSocialInsuranceList(socialInsuranceList.filter((item) => item.id !== id)) toast({ title: "删除成功", description: "社保凭证已删除", }) } catch (error) { console.error("Failed to delete social insurance:", error) toast({ title: "删除失败", description: "请稍后重试", variant: "destructive", }) } } // 编辑功能 const handleEditEducation = (data: EducationRecord) => { setEditingEducation(data) setShowEducationDialog(true) } const handleEditCert = (data: CertRecord) => { setEditingCert(data) setShowCertDialog(true) } const handleEditSocialInsurance = (data: SocialInsuranceRecord) => { setEditingSocial(data) setShowSocialDialog(true) } // 图片预览 const handleImagePreview = (imageUrl: string) => { setPreviewImageUrl(imageUrl) setShowImagePreview(true) } // 最终提交 const handleSubmit = async () => { setIsSubmitting(true) try { await new Promise((resolve) => setTimeout(resolve, 2000)) toast({ title: "保存成功", description: "个人资料已更新", }) } catch (error) { toast({ title: "保存失败", description: "请稍后重试", variant: "destructive", }) } finally { setIsSubmitting(false) } } // 验证表单完整性 const isFormValid = () => { return basicInfo.name && basicInfo.highestDegree && idCardInfo.front && idCardInfo.back } if (isLoading) { return (

加载中...

) } return (

{/* 顶部导航栏 */}

员工资料管理

{/* 左侧：基础信息和身份证 */}

{/* 基础信息 */} 基础信息

姓名

工作年限 setBasicInfo({ ...basicInfo, workYears: e.target.value })} placeholder="请输入工作年限" />

最高学历

{/* 身份证上传 */} 身份证上传

身份证正面 handleIdCardUpload("front", file)} onDelete={() => handleDeleteIdCard("front")} onPreview={() => idCardInfo.front?.imgUrl && handleImagePreview(idCardInfo.front.imgUrl)} placeholder="上传正面" />

身份证反面 handleIdCardUpload("back", file)} onDelete={() => handleDeleteIdCard("back")} onPreview={() => idCardInfo.back?.imgUrl && handleImagePreview(idCardInfo.back.imgUrl)} placeholder="上传反面" />

{/* 右侧：学历、证书、社保 */}

{/* 学历证书 */} 学历证书学校名称学历类型学历层次毕业日期证书操作 {educationList.map((item) => ( {item.schoolName} {item.degreeType} {item.degreeLevel} {item.gradDate} {item.certificateUrl ? ( ) : ( 未上传 )}

))} {educationList.length === 0 && ( 暂无学历信息 )}

{/* 专业证书 */} 专业证书证书名称发证机构发证日期过期日期证书操作 {certList.map((item) => ( {item.certName} {item.issueOrg} {item.issueDate} {item.expireDate} {item.certificateUrl ? ( ) : ( 未上传 )}

))} {certList.length === 0 && ( 暂无证书信息 )}

{/* 社保凭证 */} 社保凭证年份月份凭证操作 {socialInsuranceList.map((item) => ( {item.year}年 {item.month}月 {item.billUrl ? ( ) : ( 未上传 )}

))} {socialInsuranceList.length === 0 && ( 暂无社保凭证 )}

{/* 弹窗对话框 */} {/* 图片预览对话框 */}

) } // Web端上传组件 function WebUploadBox({ imageUrl, onUpload, onDelete, onPreview, placeholder, }: { imageUrl?: string onUpload: (file: File) => void onDelete: () => void onPreview?: () => void placeholder: string }) { const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { onUpload(file) } } return (

{imageUrl ? (

{onPreview && ( )}

) : (

{placeholder}

)}

) } // Web端学历表单 function WebEducationForm({ initialData, onSubmit, onCancel, }: { initialData?: EducationRecord | null onSubmit: (data: Omit, file?: File) => void onCancel: () => void }) { const [formData, setFormData] = useState({ degreeType: initialData?.degreeType || "", degreeLevel: initialData?.degreeLevel || "", schoolName: initialData?.schoolName || "", gradDate: initialData?.gradDate || "", certificateUrl: initialData?.certificateUrl || "", }) const [selectedFile, setSelectedFile] = useState(null) useEffect(() => { if (initialData) { setFormData({ degreeType: initialData.degreeType, degreeLevel: initialData.degreeLevel, schoolName: initialData.schoolName, gradDate: initialData.gradDate, certificateUrl: initialData.certificateUrl || "", }) } }, [initialData]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (formData.degreeType && formData.degreeLevel && formData.schoolName && formData.gradDate) { onSubmit(formData, selectedFile || undefined) } } const handleFileUpload = async (file: File) => { setSelectedFile(file) const url = URL.createObjectURL(file) setFormData({ ...formData, certificateUrl: url }) } return (

学历类型

学历层次

学校名称 setFormData({ ...formData, schoolName: e.target.value })} placeholder="请输入学校名称" />

毕业日期 setFormData({ ...formData, gradDate: e.target.value })} />

证书上传 { setFormData({ ...formData, certificateUrl: "" }) setSelectedFile(null) }} placeholder="上传证书" />

) } // Web端证书表单 function WebCertForm({ onSubmit, onCancel, initialData, }: { onSubmit: (data: Omit, file?: File) => void onCancel: () => void initialData?: CertRecord | null }) { const [formData, setFormData] = useState({ certName: initialData?.certName || "", issueOrg: initialData?.issueOrg || "", issueDate: initialData?.issueDate || "", expireDate: initialData?.expireDate || "", certificateUrl: initialData?.certificateUrl || "", }) const [selectedFile, setSelectedFile] = useState(null) useEffect(() => { if (initialData) { setFormData({ certName: initialData.certName, issueOrg: initialData.issueOrg, issueDate: initialData.issueDate, expireDate: initialData.expireDate, certificateUrl: initialData.certificateUrl || "", }) } }, [initialData]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (formData.certName && formData.issueOrg && formData.issueDate) { onSubmit(formData, selectedFile || undefined) } } const handleFileUpload = async (file: File) => { setSelectedFile(file) const url = URL.createObjectURL(file) setFormData({ ...formData, certificateUrl: url }) } return (

证书名称 setFormData({ ...formData, certName: e.target.value })} placeholder="请输入证书名称" />

发证机构 setFormData({ ...formData, issueOrg: e.target.value })} placeholder="请输入发证机构" />

发证日期 setFormData({ ...formData, issueDate: e.target.value })} />

过期日期 setFormData({ ...formData, expireDate: e.target.value })} />

证书上传 { setFormData({ ...formData, certificateUrl: "" }) setSelectedFile(null) }} placeholder="上传证书" />

) } // Web端社保表单 function WebSocialInsuranceForm({ onSubmit, onCancel, initialData, }: { onSubmit: (data: Omit, file?: File) => void onCancel: () => void initialData?: SocialInsuranceRecord | null }) { const [formData, setFormData] = useState({ year: initialData?.year || new Date().getFullYear(), month: initialData?.month || new Date().getMonth() + 1, billUrl: initialData?.billUrl || "", }) const [selectedFile, setSelectedFile] = useState(null) useEffect(() => { if (initialData) { setFormData({ year: initialData.year, month: initialData.month, billUrl: initialData.billUrl || "", }) } }, [initialData]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (formData.year && formData.month) { onSubmit(formData, selectedFile || undefined) } } const handleFileUpload = async (file: File) => { setSelectedFile(file) const url = URL.createObjectURL(file) setFormData({ ...formData, billUrl: url }) } const years = Array.from({ length: 10 }, (_, i) => new Date().getFullYear() - i) const months = Array.from({ length: 12 }, (_, i) => i + 1) return (

年份

月份

社保凭证 { setFormData({ ...formData, billUrl: "" }) setSelectedFile(null) }} placeholder="上传凭证" />

) } [V0_FILE]typescriptreact:file="app/employees/page.tsx" isMerged="true" "use client" import { useState, useEffect, useMemo } from "react" import { Search, Filter, Edit, Eye, GraduationCap, FileText, CreditCard, Users } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { toast } from "@/hooks/use-toast" import { useRouter } from "next/navigation" import * as employeeListApi from "@/lib/employeeListApi" // 员工列表数据类型 interface Employee { id: string name: string hireDate: string workYears: string highestDegree: string certCount: number validCertCount: number // 未过期证书数量 hasDiploma: boolean // 是否上传毕业证 hasIdCard: boolean // 是否上传身份证 status: "active" | "inactive" // 员工状态 department?: string position?: string } // 筛选条件类型 interface FilterConditions { name: string hireDateStart: string hireDateEnd: string workYearsMin: string workYearsMax: string highestDegree: string validCertCountMin: string validCertCountMax: string hasDiploma: string // "all" | "yes" | "no" hasIdCard: string // "all" | "yes" | "no" status: string // "all" | "active" | "inactive" } const degreeOptions = ["全部", "高中", "大专", "本科", "硕士", "博士"] const statusOptions = [ { value: "all", label: "全部状态" }, { value: "active", label: "在职" }, { value: "inactive", label: "离职" }, ] const uploadStatusOptions = [ { value: "all", label: "全部" }, { value: "yes", label: "已上传" }, { value: "no", label: "未上传" }, ] export default function EmployeeListPage() { const router = useRouter() const [employees, setEmployees] = useState([]) const [isLoading, setIsLoading] = useState(true) const [showFilters, setShowFilters] = useState(false) // 筛选条件状态 const [filters, setFilters] = useState({ name: "", hireDateStart: "", hireDateEnd: "", workYearsMin: "", workYearsMax: "", highestDegree: "全部", validCertCountMin: "", validCertCountMax: "", hasDiploma: "all", hasIdCard: "all", status: "all", }) // 分页状态 const [currentPage, setCurrentPage] = useState(1) const [pageSize] = useState(20) // 初始化数据 useEffect(() => { const fetchEmployees = async () => { try { setIsLoading(true) const data = await employeeListApi.fetchEmployeeList() setEmployees(data) } catch (error) { console.error("Failed to fetch employees:", error) toast({ title: "加载失败", description: "无法获取员工列表，请刷新重试", variant: "destructive", }) } finally { setIsLoading(false) } } fetchEmployees() }, []) // 筛选后的员工列表 const filteredEmployees = useMemo(() => { return employees.filter((employee) => { // 姓名筛选 if (filters.name && !employee.name.toLowerCase().includes(filters.name.toLowerCase())) { return false } // 入职时间筛选 if (filters.hireDateStart && employee.hireDate < filters.hireDateStart) { return false } if (filters.hireDateEnd && employee.hireDate > filters.hireDateEnd) { return false } // 工作年限筛选 const workYearsNum = Number.parseFloat(employee.workYears.replace(/[^\d.]/g, "")) if (filters.workYearsMin && workYearsNum < Number.parseFloat(filters.workYearsMin)) { return false } if (filters.workYearsMax && workYearsNum > Number.parseFloat(filters.workYearsMax)) { return false } // 学历筛选 if (filters.highestDegree !== "全部" && employee.highestDegree !== filters.highestDegree) { return false } // 未过期证书数量筛选 if (filters.validCertCountMin && employee.validCertCount < Number.parseInt(filters.validCertCountMin)) { return false } if (filters.validCertCountMax && employee.validCertCount > Number.parseInt(filters.validCertCountMax)) { return false } // 毕业证上传状态筛选 if (filters.hasDiploma === "yes" && !employee.hasDiploma) { return false } if (filters.hasDiploma === "no" && employee.hasDiploma) { return false } // 身份证上传状态筛选 if (filters.hasIdCard === "yes" && !employee.hasIdCard) { return false } if (filters.hasIdCard === "no" && employee.hasIdCard) { return false } // 员工状态筛选 if (filters.status !== "all" && employee.status !== filters.status) { return false } return true }) }, [employees, filters]) // 分页后的员工列表 const paginatedEmployees = useMemo(() => { const startIndex = (currentPage - 1) * pageSize return filteredEmployees.slice(startIndex, startIndex + pageSize) }, [filteredEmployees, currentPage, pageSize]) // 总页数 const totalPages = Math.ceil(filteredEmployees.length / pageSize) // 重置筛选条件 const handleResetFilters = () => { setFilters({ name: "", hireDateStart: "", hireDateEnd: "", workYearsMin: "", workYearsMax: "", highestDegree: "全部", validCertCountMin: "", validCertCountMax: "", hasDiploma: "all", hasIdCard: "all", status: "all", }) setCurrentPage(1) } // 编辑员工 const handleEditEmployee = (employeeId: string) => { router.push(`/admin?empId=${employeeId}`) } // 查看员工详情 const handleViewEmployee = (employeeId: string) => { router.push(`/admin?empId=${employeeId}&mode=view`) } // 统计信息 const statistics = useMemo(() => { return { total: employees.length, active: employees.filter((emp) => emp.status === "active").length, withDiploma: employees.filter((emp) => emp.hasDiploma).length, withIdCard: employees.filter((emp) => emp.hasIdCard).length, withValidCerts: employees.filter((emp) => emp.validCertCount > 0).length, } }, [employees]) if (isLoading) { return (

加载中...

) } return (

{/* 顶部导航栏 */}

员工列表管理

{/* 统计卡片 */}

总员工数

{statistics.total}

在职员工

{statistics.active}

已传毕业证

{statistics.withDiploma}

已传身份证

{statistics.withIdCard}

有效证书

{statistics.withValidCerts}

{/* 筛选条件面板 */} {showFilters && ( 筛选条件

{/* 姓名搜索 */}

员工姓名

setFilters({ ...filters, name: e.target.value })} className="pl-10" />

{/* 入职时间范围 */}

入职时间（开始） setFilters({ ...filters, hireDateStart: e.target.value })} />

入职时间（结束） setFilters({ ...filters, hireDateEnd: e.target.value })} />

{/* 工作年限范围 */}

工作年限（最少） setFilters({ ...filters, workYearsMin: e.target.value })} />

工作年限（最多） setFilters({ ...filters, workYearsMax: e.target.value })} />

{/* 学历筛选 */}

最高学历

{/* 未过期证书数量范围 */}

有效证书（最少） setFilters({ ...filters, validCertCountMin: e.target.value })} />

有效证书（最多） setFilters({ ...filters, validCertCountMax: e.target.value })} />

{/* 毕业证上传状态 */}

毕业证状态

{/* 身份证上传状态 */}

身份证状态

{/* 员工状态 */}

员工状态

)} {/* 员工列表 */}

员工列表 ({filteredEmployees.length} / {employees.length})

第 {currentPage} 页，共 {totalPages} 页

员工姓名入职时间工作年限最高学历证书数量有效证书毕业证身份证状态操作 {paginatedEmployees.map((employee) => ( {employee.name} {employee.hireDate} {employee.workYears} {employee.highestDegree} {employee.certCount} 0 ? "default" : "secondary"}> {employee.validCertCount} {employee.hasDiploma ? "已上传" : "未上传"} {employee.hasIdCard ? "已上传" : "未上传"} {employee.status === "active" ? "在职" : "离职"}

))} {paginatedEmployees.length === 0 && ( 没有找到符合条件的员工 )}

{/* 分页控件 */} {totalPages > 1 && (

显示 {(currentPage - 1) * pageSize + 1} 到{" "} {Math.min(currentPage * pageSize, filteredEmployees.length)} 条，共 {filteredEmployees.length} 条记录

{Array.from({ length: Math.min(5, totalPages) }, (_, i) => { const page = Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i return ( ) })}

)}

) } [V0_FILE]typescriptreact:file="app/employees/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]javascript:file="lib/employeeListApi.js" isMerged="true" import axios from "axios" import { BASE_URL, defaultHeaders } from "./apiConfig" // 获取员工列表 export function fetchEmployeeList(params = {}) { return axios .get(`${BASE_URL}/api/employees`, { headers: defaultHeaders, params, }) .then((res) => { // 如果后端返回真实数据，直接返回 res.data // 这里返回模拟数据用于演示 return generateMockEmployeeData() }) } // 根据筛选条件获取员工列表 export function fetchEmployeeListWithFilters(filters) { return axios .post(`${BASE_URL}/api/employees/search`, filters, { headers: { ...defaultHeaders, "Content-Type": "application/json" }, }) .then((res) => res.data) } // 获取员工统计信息 export function fetchEmployeeStatistics() { return axios .get(`${BASE_URL}/api/employees/statistics`, { headers: defaultHeaders, }) .then((res) => res.data) } // 批量更新员工状态 export function batchUpdateEmployeeStatus(employeeIds, status) { return axios .put( `${BASE_URL}/api/employees/batch-status`, { employeeIds, status }, { headers: { ...defaultHeaders, "Content-Type": "application/json" }, }, ) .then((res) => res.data) } // 导出员工列表 export function exportEmployeeList(filters = {}) { return axios .post(`${BASE_URL}/api/employees/export`, filters, { headers: { ...defaultHeaders, "Content-Type": "application/json" }, responseType: "blob", }) .then((res) => res.data) } // 生成模拟员工数据（用于演示） function generateMockEmployeeData() { const names = [ "张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十", "郑十一", "王十二", "冯十三", "陈十四", "褚十五", "卫十六", "蒋十七", "沈十八", "韩十九", "杨二十", "朱二一", "秦二二", "尤二三", "许二四", "何二五", "吕二六", "施二七", "张二八", "孔二九", "曹三十", ] const degrees = ["高中", "大专", "本科", "硕士", "博士"] const departments = ["技术部", "市场部", "人事部", "财务部", "运营部"] const positions = ["工程师", "经理", "专员", "主管", "总监"] return names.map((name, index) => { const hireYear = 2018 + Math.floor(Math.random() * 6) const hireMonth = Math.floor(Math.random() * 12) + 1 const hireDay = Math.floor(Math.random() * 28) + 1 const hireDate = `${hireYear}-${hireMonth.toString().padStart(2, "0")}-${hireDay.toString().padStart(2, "0")}` const workYears = new Date().getFullYear() - hireYear + Math.random() const certCount = Math.floor(Math.random() * 8) const validCertCount = Math.floor(certCount * (0.6 + Math.random() * 0.4)) return { id: `emp_${index + 1}`, name, hireDate, workYears: `${workYears.toFixed(1)}年`, highestDegree: degrees[Math.floor(Math.random() * degrees.length)], certCount, validCertCount, hasDiploma: Math.random() > 0.3, hasIdCard: Math.random() > 0.2, status: Math.random() > 0.1 ? "active" : "inactive", department: departments[Math.floor(Math.random() * departments.length)], position: positions[Math.floor(Math.random() * positions.length)], } }) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

员工姓名	入职时间	工作年限	最高学历	证书数量	有效证书	毕业证	身份证	状态	操作
{{ employee.name }}	{{ employee.hireDate }}	{{ employee.workYears }}	{{ employee.highestDegree }}	{{ employee.certCount }}	{{ employee.validCertCount }}	{{ employee.hasDiploma ? '已上传' : '未上传' }}	{{ employee.hasIdCard ? '已上传' : '未上传' }}	{{ employee.status === 'active' ? '在职' : '离职' }}
没有找到符合条件的员工

} export { Badge, badgeVariants } [V0_FILE]vue:file="src/views/EmployeeProfile.vue" project="Vue Employee Management" type="vue" [V0_FILE]vue:file="src/views/EmployeeList.vue" project="Vue Employee Management" type="vue" isFixed="true" isQuickEdit="true" [V0_FILE]vue:file="src/components/UploadBox.vue" project="Vue Employee Management" type="vue" [V0_FILE]javascript:file="src/lib/empApi.js" project="Vue Employee Management" type="vue" import axios from "axios" import { BASE_URL, defaultHeaders } from "./apiConfig" // 1. 获取员工完整资料 export function fetchFullProfile(empId) { return axios .get(`${BASE_URL}/api/emp/${empId}/profile`, { headers: defaultHeaders, }) .then((res) => res.data) } // 2. 更新基础信息（最高学历） export function updateHighestDegree(empId, degree) { return axios .put( `${BASE_URL}/api/emp/profile`, { empId, highestDegree: degree }, { headers: { ...defaultHeaders, "Content-Type": "application/json" } }, ) .then((res) => res.data) } // 3. 身份证上传（正面 / 反面） export function uploadIdCard(empId, side, file) { const form = new FormData() form.append("file", file) return axios .post(`${BASE_URL}/api/emp/idcard?empId=${empId}&side=${side}`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 4. 身份证更新 export function updateIdCard(id, file) { const form = new FormData() form.append("file", file) return axios .put(`${BASE_URL}/api/emp/idcard/${id}`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 5. 身份证删除 export function deleteIdCard(id) { return axios.delete(`${BASE_URL}/api/emp/idcard/${id}`, { headers: defaultHeaders }).then((res) => res.data) } // 6. 添加学历 export function addEducation(empId, type, level, school, date, file) { const form = new FormData() form.append("empId", empId) form.append("degreeType", type) form.append("degreeLevel", level) form.append("schoolName", school) form.append("gradDate", date) if (file) { form.append("certificateFile", file) } return axios .post(`${BASE_URL}/api/emp/education`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 7. 更新学历图片 export function updateEducation(id, file) { const form = new FormData() form.append("certificateFile", file) return axios .put(`${BASE_URL}/api/emp/education/${id}`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 8. 删除学历 export function deleteEducation(id) { return axios.delete(`${BASE_URL}/api/emp/education/${id}`, { headers: defaultHeaders }).then((res) => res.data) } // 9. 添加专业证书 export function addCert(empId, name, org, issueDate, expireDate, file) { const form = new FormData() form.append("empId", empId) form.append("certName", name) form.append("issueOrg", org) form.append("issueDate", issueDate) if (expireDate) form.append("expireDate", expireDate) if (file) { form.append("certificateFile", file) } return axios .post(`${BASE_URL}/api/emp/cert`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" } }) .then((res) => res.data) } // 10. 更新专业证书 export function updateCert(id, file) { const form = new FormData() form.append("certificateFile", file) return axios .put(`${BASE_URL}/api/emp/cert/${id}`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 11. 删除专业证书 export function deleteCert(id) { return axios.delete(`${BASE_URL}/api/emp/cert/${id}`, { headers: defaultHeaders }).then((res) => res.data) } // 12. 添加社保凭证 export function addSocialInsurance(empId, year, month, file) { const form = new FormData() form.append("empId", empId) form.append("year", year) form.append("month", month) if (file) { form.append("billFile", file) } return axios .post(`${BASE_URL}/api/emp/social-insurance`, form, { headers: { ...defaultHeaders, "Content-Type": "multipart/form-data" }, }) .then((res) => res.data) } // 13. 删除社保凭证 export function deleteSocialInsurance(id) { return axios.delete(`${BASE_URL}/api/emp/social-insurance/${id}`, { headers: defaultHeaders }).then((res) => res.data) } [V0_FILE]javascript:file="src/lib/apiConfig.js" project="Vue Employee Management" type="vue" export const BASE_URL = "https://api.yourdomain.com" // 替换为实际服务器地址 export const AUTH_TOKEN = "" // 登录后获取的 Bearer Token export const defaultHeaders = { Authorization: `Bearer ${AUTH_TOKEN}`, } // 更新token的方法 export const updateAuthToken = (newToken) => { defaultHeaders.Authorization = `Bearer ${newToken}` } [V0_FILE]javascript:file="src/utils/toast.js" project="Vue Employee Management" type="vue" "use client" // 简单的Toast提示工具 export function showToast(title, message, type = "info") { // 这里可以集成具体的Toast库，如 vue-toastification // 现在使用简单的alert作为示例 const typeMap = { success: "✅", error: "❌", warning: "⚠️", info: "ℹ️", } const icon = typeMap[type] || typeMap.info alert(`${icon} ${title}: ${message}`) // 实际项目中可以这样使用： // import { useToast } from 'vue-toastification' // const toast = useToast() // toast[type](message, { title }) } [V0_FILE]json:file="package.json" project="Vue Employee Management" type="vue" isEdit="true" { "name": "vue-employee-management", "version": "0.1.0", "private": true, "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.3.0", "vue-router": "^4.2.0", "axios": "^1.6.0", "lucide-vue-next": "^0.294.0" }, "devDependencies": { "@vitejs/plugin-vue": "^4.4.0", "vite": "^4.4.0" } }

基础信息

身份证上传

学历证书

专业证书

社保凭证

{initialData ? "编辑学历" : "添加学历"}

{initialData ? "编辑证书" : "添加证书"}

{initialData ? "编辑社保" : "上传社保"}

基础信息

身份证上传

学历证书

专业证书

社保凭证

员工列表 ({{ filteredEmployees.length }} / {{ employees.length }})