From 71f0619d18d2a95c0abb47e9a428b69ba19a74b6 Mon Sep 17 00:00:00 2001 From: selfrelease Date: Sun, 16 Aug 2026 11:57:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=B5=E5=AD=90=E7=AD=BE=E7=BD=B2?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E3=80=8C=E5=BE=85=E7=AD=BE=E5=90=88=E5=90=8C?= =?UTF-8?q?=E3=80=8D=EF=BC=8C=E6=8C=89=E5=91=98=E5=B7=A5=E8=81=9A=E5=90=88?= =?UTF-8?q?+=E5=82=AC=E5=8A=9E=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 菜单「电子签署」改名为「待签合同」 2. 页面重构为两个 Tab： - 待签合同：按员工聚合展示所有未签文件（EsignRecord PENDING/SIGNING + LaborContract signDate 为空），展开可 查看该员工名下所有待签文件详情 - 签署记录：原有全部签署记录列表（保留筛选功能） 3. 催办功能：点击催办生成一次性自动登录链接（24h有效）， 指向员工端签署页，弹窗展示二维码+可复制链接，HR 发给 员工扫码直接进入签署 4. 后端新增接口： - GET /esign/pending 待签合同按员工聚合列表 - POST /esign/remind 催办生成自动登录链接 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- backend/src/routes/esign.routes.ts | 138 ++++++++++ frontend/src/components/layout/SidebarNav.tsx | 2 +- frontend/src/lib/api-services.ts | 6 + frontend/src/pages/ESign.tsx | 251 ++++++++++++++++-- 4 files changed, 373 insertions(+), 24 deletions(-) diff --git a/backend/src/routes/esign.routes.ts b/backend/src/routes/esign.routes.ts index 9c05b56..9ce2dea 100644 --- a/backend/src/routes/esign.routes.ts +++ b/backend/src/routes/esign.routes.ts @@ -11,6 +11,7 @@ */ import { Router, Response, NextFunction } from 'express' import { z } from 'zod' +import jwt from 'jsonwebtoken' import multer from 'multer' import path from 'path' import fs from 'fs' @@ -23,6 +24,8 @@ import { renderTemplate, getTemplateById } from '../services/template.service' const router = Router() router.use(authMiddleware) +const AUTO_LOGIN_SECRET = process.env.JWT_SECRET || 'dev-secret' + /** 场景与组织电子签开关的映射 */ const SCENE_ORG_FLAG_MAP: Record = { CONTRACT: null, // 合同签署不需要额外开关（默认允许） @@ -74,6 +77,141 @@ router.get('/', async (req: AuthRequest, res: Response, next: NextFunction) => { } catch (err) { next(err) } }) +/** + * 待签合同列表（按员工聚合） + * GET /esign/pending + * + * 汇总两类未签署记录，按员工聚合： + * 1. EsignRecord 中 status 为 PENDING/SIGNING 的（所有场景） + * 2. LaborContract 中 signDate 为空且员工在职的（纸质合同未登记签署日期） + * + * 返回格式：[{ employeeId, name, department, phone, pendingItems: [{ type, title, scene, signMethod, status, createdAt, recordId, contractId }] }] + */ +router.get('/pending', async (req: AuthRequest, res: Response, next: NextFunction) => { + try { + const orgId = req.user!.orgId + + // 1. 查询未完成的 EsignRecord + const pendingEsign = await prisma.eSignRecord.findMany({ + where: { + orgId, + status: { in: ['PENDING', 'SIGNING'] }, + }, + include: { + employee: { select: { id: true, name: true, department: true, phone: true, status: true } }, + }, + orderBy: { createdAt: 'desc' }, + }) + + // 2. 查询 signDate 为空的 LaborContract（且员工在职） + const pendingContracts = await prisma.laborContract.findMany({ + where: { + orgId, + signDate: null, + employee: { status: 'ACTIVE' }, + }, + include: { + employee: { select: { id: true, name: true, department: true, phone: true, status: true } }, + }, + orderBy: { createdAt: 'desc' }, + }) + + // 3. 按员工聚合 + const employeeMap = new Map() + + // 辅助函数：添加员工到 map + const ensureEmployee = (emp: { id: string; name: string; department: string | null; phone: string | null }) => { + if (!employeeMap.has(emp.id)) { + employeeMap.set(emp.id, { + employeeId: emp.id, + name: emp.name, + department: emp.department, + phone: emp.phone, + pendingItems: [], + }) + } + return employeeMap.get(emp.id)! + } + + // 汇总 EsignRecord + for (const r of pendingEsign) { + const emp = ensureEmployee(r.employee) + emp.pendingItems.push({ + type: 'esign', + recordId: r.id, + contractId: r.contractId, + title: r.documentTitle, + scene: r.scene, + signMethod: r.signMethod, + status: r.status, + createdAt: r.createdAt, + }) + } + + // 汇总 LaborContract（排除已有 EsignRecord 关联的，避免重复） + const esignContractIds = new Set(pendingEsign.filter(r => r.contractId).map(r => r.contractId)) + for (const c of pendingContracts) { + if (esignContractIds.has(c.id)) continue // 已有电子签署记录的不重复 + const emp = ensureEmployee(c.employee) + emp.pendingItems.push({ + type: 'contract', + recordId: null, + contractId: c.id, + title: `${c.contractType}合同`, + scene: 'CONTRACT', + signMethod: c.signMethod, + status: 'PENDING', + createdAt: c.createdAt, + }) + } + + // 转为数组，按待签数量降序、姓名排序 + const result = Array.from(employeeMap.values()).sort((a, b) => { + if (b.pendingItems.length !== a.pendingItems.length) return b.pendingItems.length - a.pendingItems.length + return a.name.localeCompare(b.name) + }) + + res.json({ success: true, data: result }) + } catch (err) { next(err) } +}) + +/** + * 催办 — 生成员工一次性自动登录链接（指向员工端签署页） + * POST /esign/remind body: { employeeId } + * + * 返回自动登录 URL，HR 可复制或生成二维码发给员工 + */ +router.post('/remind', async (req: AuthRequest, res: Response, next: NextFunction) => { + try { + const { employeeId } = req.body + if (!employeeId) { + return res.status(400).json({ success: false, error: { code: 'BAD_REQUEST', message: '缺少 employeeId' } }) + } + const employee = await prisma.employee.findFirst({ + where: { id: employeeId, orgId: req.user!.orgId, status: 'ACTIVE' }, + select: { id: true, name: true, phone: true, orgId: true }, + }) + if (!employee) { + return res.status(404).json({ success: false, error: { code: 'NOT_FOUND', message: '员工不存在或已离职' } }) + } + // 生成一次性 token（24 小时有效，给员工充足时间签署） + const token = jwt.sign( + { id: employee.id, orgId: employee.orgId, role: 'EMPLOYEE_AUTO', name: employee.name }, + AUTO_LOGIN_SECRET, + { expiresIn: '24h' }, + ) + const url = `${process.env.PORTAL_BASE_URL || ''}/portal/auto-login?token=${token}&redirect=/portal/esign` + await auditLog(req, 'REMIND', 'ESIGN', employeeId, { employeeName: employee.name }) + res.json({ success: true, data: { url, token, employeeName: employee.name, phone: employee.phone } }) + } catch (err) { next(err) } +}) + /** * 发起签署 * - 校验组织电子签开关 diff --git a/frontend/src/components/layout/SidebarNav.tsx b/frontend/src/components/layout/SidebarNav.tsx index 1ba6131..0c596a4 100644 --- a/frontend/src/components/layout/SidebarNav.tsx +++ b/frontend/src/components/layout/SidebarNav.tsx @@ -37,7 +37,7 @@ const navGroups: NavGroup[] = [ items: [ { path: '/', label: '工作台', icon: LayoutDashboard }, { path: '/calendar', label: '工作日历', icon: CalendarDays }, - { path: '/esign', label: '电子签署', icon: PenTool }, + { path: '/esign', label: '待签合同', icon: PenTool }, ], }, { diff --git a/frontend/src/lib/api-services.ts b/frontend/src/lib/api-services.ts index 536b5c9..d7877af 100644 --- a/frontend/src/lib/api-services.ts +++ b/frontend/src/lib/api-services.ts @@ -644,6 +644,12 @@ export const benefitApi = { export const esignApi = { list: (params?: { status?: string; scene?: string }) => get('/esign', { params: params || {} }).then(unwrap()), + /** 待签合同列表（按员工聚合） */ + pending: () => + get('/esign/pending').then(unwrap()), + /** 催办（生成自动登录链接） */ + remind: (employeeId: string) => + post('/esign/remind', { employeeId }).then(unwrap()), create: (data: { contractId?: string; employeeId: string; documentTitle: string; documentContent?: string; remark?: string; scene?: string; templateId?: string; templateVars?: Record }) => post('/esign/create', data), detail: (id: string) => diff --git a/frontend/src/pages/ESign.tsx b/frontend/src/pages/ESign.tsx index a52c0f3..a5a6ba9 100644 --- a/frontend/src/pages/ESign.tsx +++ b/frontend/src/pages/ESign.tsx @@ -1,16 +1,18 @@ /** - * 电子签署管理页面 + * 待签合同 / 电子签署管理页面 + * - Tab1 待签合同：按员工聚合展示所有未签署文件，支持催办（生成二维码/链接） + * - Tab2 签署记录：全部签署记录列表（状态/场景/签署方式筛选） * - 发起电子签署（场景选择 + 模板自动渲染 + 组织开关校验） * - 线下手签登记（上传扫描件 + 签署信息 + 证据链） - * - 签署记录列表（状态/场景/签署方式筛选） * - 签署详情（含证据链查看） * - 取消签署 */ -import { useState, useRef, useEffect } from 'react' +import { useState, useRef, useEffect, Fragment } from 'react' import { useSearchParams } from 'react-router-dom' import { toast } from 'sonner' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' -import { PenTool, Plus, RefreshCw, ExternalLink, FileText, AlertCircle, Shield, ChevronLeft, Clock, CheckCircle2, XCircle, Eye, Upload, FileCheck } from 'lucide-react' +import { QRCodeSVG } from 'qrcode.react' +import { PenTool, Plus, RefreshCw, ExternalLink, FileText, AlertCircle, Shield, ChevronLeft, Clock, CheckCircle2, XCircle, Eye, Upload, FileCheck, Bell, Copy, Check, ChevronDown, ChevronRight, User } from 'lucide-react' import { esignApi, employeeApi } from '../lib/api-services' import PageGuide from '../components/ui/PageGuide' import Card from '../components/ui/Card' @@ -43,6 +45,7 @@ const SIGN_METHOD_CONFIG: Record = { export default function ESign() { const queryClient = useQueryClient() + const [activeTab, setActiveTab] = useState<'pending' | 'records'>('pending') const [filterStatus, setFilterStatus] = useState('') const [filterScene, setFilterScene] = useState('') const [showCreate, setShowCreate] = useState(false) @@ -83,6 +86,26 @@ export default function ESign() { }, }) + /** 待签合同列表（按员工聚合） */ + const { data: pendingList = [], isLoading: pendingLoading } = useQuery({ + queryKey: ['esign-pending'], + queryFn: async () => { + return await esignApi.pending() + }, + }) + + /** 催办（生成自动登录链接） */ + const remindMutation = useMutation({ + mutationFn: (employeeId: string) => esignApi.remind(employeeId) as any, + onSuccess: (data: any) => { + queryClient.invalidateQueries({ queryKey: ['esign-pending'] }) + toast.success(`催办链接已生成，可复制或展示二维码给员工`, { + description: data?.phone ? `员工手机：${data.phone}` : '', + }) + }, + onError: (err: any) => toast.error(err?.response?.data?.error?.message || '催办失败'), + }) + const { data: rosterData = [] } = useQuery({ queryKey: ['employees-for-esign'], queryFn: async () => { @@ -135,26 +158,51 @@ export default function ESign() { return (
- 通过电子签署模块发起合同、离职协议、规章制度等文件的在线签署。员工在员工端通过手机验证码确认签署，签署全流程自动记录证据链（IP、时间戳、验证码），可作为劳动仲裁举证材料。 + 管理员工合同、协议、规章等文件的签署。未签署的按员工聚合在「待签合同」中催办；已签署的记录在「签署记录」中查看。
-

电子签署

-

在线合同签署，验证码确认 + 证据链留存

+

待签合同

+

合同签署管理，验证码确认 + 证据链留存

- - -
- 签署流程 -
- ① HR在系统发起签署（自动渲染模板文件） → ② 员工在员工端查看待签文件 → ③ 员工获取手机验证码 → ④ 验证码确认签署 → ⑤ 自动记录证据链（IP/UA/时间戳/验证码） → ⑥ 合同自动回写签署方式 -
+ {/* Tab 切换 */} +
+
+ +
- +
+ + +
+
+ {/* ===== Tab1: 待签合同（按员工聚合） ===== */} + {activeTab === 'pending' && ( + remindMutation.mutate(empId)} remindLoading={remindMutation.isPending} remindData={remindMutation.data} onDetail={(id) => setDetailId(id)} /> + )} + + {/* ===== Tab2: 签署记录 ===== */} + {activeTab === 'records' && ( + <>
-
- - -
{/* 签署记录列表 */} @@ -274,6 +314,8 @@ export default function ESign() {
)} + + )} {/* 发起签署 Modal */} {showCreate && ( @@ -734,3 +776,166 @@ function ESignDetail({ id, onBack }: { id: string; onBack: () => void }) {
) } + +/** + * 待签合同 Tab — 按员工聚合展示待签文件，支持催办 + */ +function PendingTab({ pendingList, loading, onRemind, remindLoading, remindData, onDetail }: { + pendingList: any[] + loading: boolean + onRemind: (employeeId: string) => void + remindLoading: boolean + remindData: any + onDetail: (id: string) => void +}) { + const [expandedEmp, setExpandedEmp] = useState(null) + const [remindEmpId, setRemindEmpId] = useState(null) + const [copied, setCopied] = useState(false) + + const handleCopy = (url: string) => { + navigator.clipboard?.writeText(url) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } + + if (loading) { + return
加载中...
 + } + + if (pendingList.length === 0) { + return ( + +
+ + 所有合同均已签署，暂无待签项 +
+ + ) + } + + return ( + <> + +
+ + + + + + + + + + + + + {pendingList.map((emp: any) => { + const expanded = expandedEmp === emp.employeeId + return ( + + setExpandedEmp(expanded ? null : emp.employeeId)} + > + + + + + + + + {/* 展开行：待签文件列表 */} + {expanded && ( + + + + + )} + + ) + })} + +
员工部门手机号待签数操作
+ {expanded ? : } + +
+
+ +
+ {emp.name} +
+ 		{emp.department || '—'}{emp.phone || '—'} + + {emp.pendingItems.length} + + e.stopPropagation()}> + +
+
+ {emp.pendingItems.map((item: any, idx: number) => ( +
+ + {item.title} + {SCENE_CONFIG[item.scene] && ( + {SCENE_CONFIG[item.scene].label} + )} + + {(SIGN_METHOD_CONFIG[item.signMethod] || SIGN_METHOD_CONFIG.ELECTRONIC).label} + + {new Date(item.createdAt).toLocaleDateString('zh-CN')} + {item.type === 'esign' && item.recordId && ( + + )} + {item.type === 'contract' && ( + 纸质合同未登记签署日期 + )} +
+ ))} +
+
+
+ + + {/* 催办结果弹窗：二维码 + 链接 */} + {remindData && remindEmpId && ( + { setRemindEmpId(null); }} title="催办 — 发送给员工" size="sm"> +
+
+
+ +
+

+ 员工 {remindData.employeeName} 扫码后自动登录员工端签署页面 +

+

链接 24 小时内有效

+
+
+ {remindData.url} + +
+
+
+
+ + )} + + ) +}