ui: 社保参数改为分组卡片式布局，更清晰专业
This commit is contained in:
freedakgmail
@@ -339,53 +339,97 @@ export function AccountCard({
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-4 gap-3 text-sm">
|
||||
<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>
|
||||
{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>
|
||||
)}
|
||||
{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 justify-between border-b pb-1.5"><span className="text-gray-500">养老(企业/个人)</span><span className="font-medium">{config.pensionOrg}% / {config.pensionEmp}%</span></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 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="flex justify-between border-b pb-1.5"><span className="text-gray-500">生育(企业)</span><span className="font-medium">{config.maternityOrg}%</span></div>
|
||||
{/* 最低工资标准（内联编辑，仅社保） */}
|
||||
<div className="flex justify-between items-center border-b pb-1.5">
|
||||
<span className="text-gray-500">最低工资标准</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Input
|
||||
type="number"
|
||||
value={minWageInput}
|
||||
onChange={(e) => setMinWageInput(e.target.value)}
|
||||
placeholder="0"
|
||||
className="w-20 h-7 text-sm text-right"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => updateMinWageMutation.mutate()}
|
||||
disabled={updateMinWageMutation.isPending}
|
||||
className="h-7 px-2 text-xs whitespace-nowrap"
|
||||
>
|
||||
{updateMinWageMutation.isPending ? '保存中' : '保存'}
|
||||
</Button>
|
||||
<div className="space-y-3">
|
||||
{/* 缴费基数范围 */}
|
||||
<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 && (
|
||||
<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 && (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-gray-400">医保基数上限</span>
|
||||
<span className="font-medium">¥{fmt(config.medicalBaseMax)}</span>
|
||||
</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 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">{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 flex-col">
|
||||
<span className="text-xs text-gray-400">最低工资标准</span>
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<Input
|
||||
type="number"
|
||||
value={minWageInput}
|
||||
onChange={(e) => setMinWageInput(e.target.value)}
|
||||
placeholder="0"
|
||||
className="w-20 h-7 text-sm text-right"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => updateMinWageMutation.mutate()}
|
||||
disabled={updateMinWageMutation.isPending}
|
||||
className="h-7 px-2 text-xs whitespace-nowrap"
|
||||
>
|
||||
{updateMinWageMutation.isPending ? '保存中' : '保存'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user