salaryTemplate.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <!-- font-family: Microsoft YaHei, sans-serif; -->
  7. <style> @page {
  8. size: A4 portrait;
  9. margin: 15px;
  10. }
  11. body {
  12. margin: 0;
  13. font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
  14. }
  15. table {
  16. width: 100%;
  17. border-collapse: collapse;
  18. font-size: 10px;
  19. }
  20. th, td {
  21. text-align: center;
  22. padding: 5px;
  23. border: 1px solid black;
  24. }
  25. .border {
  26. border: 1px solid black !important;
  27. }
  28. .header {
  29. background-color: #f2f2f2;
  30. /*font-weight: bold;*/
  31. }
  32. .total-row {
  33. font-weight: bold;
  34. background-color: lightgray;
  35. text-align: center;
  36. }
  37. /* 用于模拟13列布局 */
  38. .col-1 { width: calc(100% / 13); }
  39. </style>
  40. </head>
  41. <body>
  42. <table>
  43. <!-- 第一行 -->
  44. <tr class="header border col-12" >
  45. <td align="center" valign="middle"bgcolor="#c0c0c0" colspan="13">工资单</td>
  46. </tr>
  47. <!-- 第二行 -->
  48. <tr class="header border">
  49. <td class="col-4" colspan="4" align="left" valign="middle"> ${financialSalaryDetail.companyName}</td>
  50. <td class="col-4" colspan="4" align="center" valign="middle">
  51. <div style="display: inline;">${financialSalaryDetail.year}年 第</div><div style="display: inline;">${financialSalaryDetail.month}期</div> </td>
  52. <td class="col-4" colspan="5" align="right" valign="middle">单位:元</td>
  53. </tr>
  54. <!-- 第三行 -->
  55. <tr class="header border">
  56. <td class="col-1" align="center" valign="middle">员工姓名</td>
  57. <td class="col-1" align="center" valign="middle">身份证号</td>
  58. <td class="col-1" align="center" valign="middle">应发工资</td>
  59. <td class="col-1" align="center" valign="middle">实发工资</td>
  60. <td class="col-1" align="center" valign="middle">奖金及其他</td>
  61. <td class="col-1" align="center" valign="middle">养老保险</td>
  62. <td class="col-1" align="center" valign="middle">医疗保险</td>
  63. <td class="col-1" align="center" valign="middle">失业险</td>
  64. <td class="col-1" align="center" valign="middle">大病险</td>
  65. <td class="col-1" align="center" valign="middle">公积金</td>
  66. <td class="col-1" align="center" valign="middle">个税</td>
  67. <td class="col-1" align="center" valign="middle">其他扣款</td>
  68. <td class="col-1" align="center" valign="middle">备注</td>
  69. </tr>
  70. <!-- 动态数据行 -->
  71. <#list financialSalaryDetail.details as item>
  72. <tr class="border">
  73. <td class="col-1" align="center">${ item.employeeName }</td>
  74. <td class="col-1" align="center">${ item.idCode }</td>
  75. <td class="col-1" align="center">${ item.planSalary }</td>
  76. <td class="col-1" align="center">${ item.actuallySalary }</td>
  77. <td class="col-1" align="center">${ item.bonusAmount }</td>
  78. <td class="col-1" align="center">${ item.endowmentInsurance }</td>
  79. <td class="col-1" align="center">${ item.medicalInsurance }</td>
  80. <td class="col-1" align="center">${ item.unemploymentBenefit }</td>
  81. <td class="col-1" align="center">${ item.seriousIllnessInsurance }</td>
  82. <td class="col-1" align="center">${ item.housingFund }</td>
  83. <td class="col-1" align="center">${ item.individualIncomeTax }</td>
  84. <td class="col-1" align="center">${ item.otherCut }</td>
  85. <td class="col-1" align="center">${ item.remark }</td>
  86. </tr>
  87. </#list>
  88. <!-- 合计行-->
  89. <tr class="total-row border">
  90. <td class="col-1" align="center" colspan="1">合计</td>
  91. <td class="col-1" align="center" colspan="1"></td>
  92. <!-- 这里根据实际计算结果填充 -->
  93. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.planSalary}</td>
  94. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.actuallySalary }</td>
  95. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.bonusAmount }</td>
  96. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.endowmentInsurance }</td>
  97. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.medicalInsurance}</td>
  98. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.unemploymentBenefit }</td>
  99. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.seriousIllnessInsurance}</td>
  100. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.housingFund }</td>
  101. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.individualIncomeTax}</td>
  102. <td class="col-1" align="center" colspan="1">${ financialSalaryDetail.otherCut }</td>
  103. <td class="col-1" align="center" colspan="1"></td>
  104. <!-- ... 类似地填充剩余单元格 -->
  105. </tr>
  106. </table>
  107. </body>
  108. </html>