ui: 社保参数改为分组卡片式布局，更清晰专业
This commit is contained in:
freedakgmail
@@ -339,53 +339,97 @@ 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">
|
||||||
{config.medicalBaseMin > 0 && (
|
<div className="text-xs font-medium text-gray-400 mb-2">缴费基数范围</div>
|
||||||
<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="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
|
||||||
)}
|
<div className="flex flex-col">
|
||||||
{config.medicalBaseMax > 0 && (
|
<span className="text-xs text-gray-400">下限</span>
|
||||||
<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>
|
<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">{config.pensionOrg}% / {config.pensionEmp}%</span></div>
|
<div className="flex flex-col">
|
||||||
<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>
|
<span className="text-xs text-gray-400">上限</span>
|
||||||
<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>
|
<span className="font-medium">¥{fmt(config.baseMax)}</span>
|
||||||
<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>
|
||||||
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">生育(企业)</span><span className="font-medium">{config.maternityOrg}%</span></div>
|
{config.medicalBaseMin > 0 && (
|
||||||
{/* 最低工资标准（内联编辑，仅社保） */}
|
<div className="flex flex-col">
|
||||||
<div className="flex justify-between items-center border-b pb-1.5">
|
<span className="text-xs text-gray-400">医保基数下限</span>
|
||||||
<span className="text-gray-500">最低工资标准</span>
|
<span className="font-medium">¥{fmt(config.medicalBaseMin)}</span>
|
||||||
<div className="flex items-center gap-1.5">
|
</div>
|
||||||
<Input
|
)}
|
||||||
type="number"
|
{config.medicalBaseMax > 0 && (
|
||||||
value={minWageInput}
|
<div className="flex flex-col">
|
||||||
onChange={(e) => setMinWageInput(e.target.value)}
|
<span className="text-xs text-gray-400">医保基数上限</span>
|
||||||
placeholder="0"
|
<span className="font-medium">¥{fmt(config.medicalBaseMax)}</span>
|
||||||
className="w-20 h-7 text-sm text-right"
|
</div>
|
||||||
/>
|
)}
|
||||||
<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>
|
||||||
{Array.isArray(config.extraInsurances) && config.extraInsurances.map((ins: any, idx: number) => (
|
{/* 险种费率 */}
|
||||||
<div key={idx} className="flex justify-between border-b pb-1.5">
|
<div className="bg-gray-50 rounded-lg p-3">
|
||||||
<span className="text-gray-500">{ins.name}(企业/个人)</span>
|
<div className="text-xs font-medium text-gray-400 mb-2">险种费率（企业 / 个人）</div>
|
||||||
<span className="font-medium">
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
|
||||||
{ins.baseType === 'fixed'
|
<div className="flex flex-col">
|
||||||
? `¥${ins.fixedAmount} / ¥${ins.empFixedAmount || 0}`
|
<span className="text-xs text-gray-400">养老</span>
|
||||||
: `${ins.orgRate}% / ${ins.empRate}%`
|
<span className="font-medium">{config.pensionOrg}% / {config.pensionEmp}%</span>
|
||||||
}
|
</div>
|
||||||
</span>
|
<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>
|
||||||
|
{/* 其他标准 */}
|
||||||
|
<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>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
Reference in New Issue
Block a user