freedak/TurboHR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: 社保参数改为分组卡片式布局，更清晰专业

Browse Source
This commit is contained in:
freedakgmail
2026-08-17 22:01:03 +08:00
parent f9ed465c09
commit 5e4b0b3fa9
1 changed files with 88 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/social-insurance/AccountCard.tsx
+67 -23
View File
@@ -339,24 +339,77 @@ export function AccountCard({
</div> </div>
</> </>
) : ( ) : (
<div className="grid md:grid-cols-4 gap-3 text-sm"> <div className="space-y-3">
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数下限</span><span className="font-medium">¥{fmt(config.baseMin)}</span></div> {/* 缴费基数范围 */}
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数上限</span><span className="font-medium">¥{fmt(config.baseMax)}</span></div> <div className="bg-gray-50 rounded-lg p-3">
<div className="text-xs font-medium text-gray-400 mb-2">缴费基数范围</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
<div className="flex flex-col">
<span className="text-xs text-gray-400">下限</span>
<span className="font-medium">¥{fmt(config.baseMin)}</span>
</div>
<div className="flex flex-col">
<span className="text-xs text-gray-400">上限</span>
<span className="font-medium">¥{fmt(config.baseMax)}</span>
</div>
{config.medicalBaseMin > 0 && ( {config.medicalBaseMin > 0 && (
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">医保基数下限</span><span className="font-medium">¥{fmt(config.medicalBaseMin)}</span></div> <div className="flex flex-col">
<span className="text-xs text-gray-400">医保基数下限</span>
<span className="font-medium">¥{fmt(config.medicalBaseMin)}</span>
</div>
)} )}
{config.medicalBaseMax > 0 && ( {config.medicalBaseMax > 0 && (
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">医保基数上限</span><span className="font-medium">¥{fmt(config.medicalBaseMax)}</span></div> <div className="flex flex-col">
<span className="text-xs text-gray-400">医保基数上限</span>
<span className="font-medium">¥{fmt(config.medicalBaseMax)}</span>
</div>
)} )}
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">养老(企业/个人)</span><span className="font-medium">{config.pensionOrg}% / {config.pensionEmp}%</span></div> </div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">医疗(企业/个人)</span><span className="font-medium">{config.medicalOrg}% / {config.medicalEmp}%{(config.medicalOrgExtra > 0 || config.medicalEmpExtra > 0) && ` + ¥${fmt(config.medicalOrgExtra)}/¥${fmt(config.medicalEmpExtra)}`}</span></div> </div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">失业(企业/个人)</span><span className="font-medium">{config.unemploymentOrg}% / {config.unemploymentEmp}%</span></div> {/* 险种费率 */}
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">工伤(企业)</span><span className="font-medium">{config.injuryOrg}%</span></div> <div className="bg-gray-50 rounded-lg p-3">
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">生育(企业)</span><span className="font-medium">{config.maternityOrg}%</span></div> <div className="text-xs font-medium text-gray-400 mb-2">险种费率（企业 / 个人）</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
<div className="flex flex-col">
<span className="text-xs text-gray-400">养老</span>
<span className="font-medium">{config.pensionOrg}% / {config.pensionEmp}%</span>
</div>
<div className="flex flex-col">
<span className="text-xs text-gray-400">医疗</span>
<span className="font-medium">{config.medicalOrg}% / {config.medicalEmp}%{(config.medicalOrgExtra > 0 || config.medicalEmpExtra > 0) && ` + ¥${fmt(config.medicalOrgExtra)}/¥${fmt(config.medicalEmpExtra)}`}</span>
</div>
<div className="flex flex-col">
<span className="text-xs text-gray-400">失业</span>
<span className="font-medium">{config.unemploymentOrg}% / {config.unemploymentEmp}%</span>
</div>
<div className="flex flex-col">
<span className="text-xs text-gray-400">工伤</span>
<span className="font-medium">{config.injuryOrg}%</span>
</div>
<div className="flex flex-col">
<span className="text-xs text-gray-400">生育</span>
<span className="font-medium">{config.maternityOrg}%</span>
</div>
{Array.isArray(config.extraInsurances) && config.extraInsurances.map((ins: any, idx: number) => (
<div key={idx} className="flex flex-col">
<span className="text-xs text-gray-400">{ins.name}</span>
<span className="font-medium">
{ins.baseType === 'fixed'
? `¥${ins.fixedAmount} / ¥${ins.empFixedAmount || 0}`
: `${ins.orgRate}% / ${ins.empRate}%`}
</span>
</div>
))}
</div>
</div>
{/* 其他标准 */}
<div className="bg-gray-50 rounded-lg p-3">
<div className="text-xs font-medium text-gray-400 mb-2">其他标准</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
{/* 最低工资标准（内联编辑，仅社保） */} {/* 最低工资标准（内联编辑，仅社保） */}
<div className="flex justify-between items-center border-b pb-1.5"> <div className="flex flex-col">
<span className="text-gray-500">最低工资标准</span> <span className="text-xs text-gray-400">最低工资标准</span>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5 mt-0.5">
<Input <Input
type="number" type="number"
value={minWageInput} value={minWageInput}
@@ -375,17 +428,8 @@ export function AccountCard({
</Button> </Button>
</div> </div>
</div> </div>
{Array.isArray(config.extraInsurances) && config.extraInsurances.map((ins: any, idx: number) => (
<div key={idx} className="flex justify-between border-b pb-1.5">
<span className="text-gray-500">{ins.name}(企业/个人)</span>
<span className="font-medium">
{ins.baseType === 'fixed'
? `¥${ins.fixedAmount} / ¥${ins.empFixedAmount || 0}`
: `${ins.orgRate}% / ${ins.empRate}%`
}
</span>
</div> </div>
))} </div>
</div> </div>
)} )}
</Card> </Card>