all-budget-table.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <div v-loading="loading">
  3. <div class="container">
  4. <div class="operate-btn" style="text-align: right; margin: 10px 16px;">
  5. <el-button @click="handleRefresh">刷新</el-button>
  6. <el-button type="primary" v-print="'#printMe'">打印</el-button>
  7. </div>
  8. <table id="printMe" class="doc-page">
  9. <thead>
  10. <th colspan="3">研发项目经费预算表</th>
  11. </thead>
  12. <tbody>
  13. <tr>
  14. <td class="doc-label">研发项目名称</td>
  15. <td>
  16. <project-select v-model="currProjectId" @change="handleProjectChange"></project-select>
  17. </td>
  18. </tr>
  19. <tr>
  20. <td class="doc-label">项目申请单位</td>
  21. <td>{{ selProject.xmsqdw }}</td>
  22. </tr>
  23. <tr>
  24. <td class="doc-label">项目起止时间</td>
  25. <td>{{ getXmDateRange }}</td>
  26. </tr>
  27. <tr>
  28. <td class="doc-label">研究费用预算明细</td>
  29. <td style="padding: 0;">
  30. <el-table
  31. :data="tableData"
  32. border
  33. style="width: 100%"
  34. show-summary
  35. class="budget-table"
  36. :summary-method="getSummaries"
  37. >
  38. <el-table-column
  39. prop="kmmc"
  40. label="科目名称"
  41. >
  42. </el-table-column>
  43. <el-table-column
  44. prop="sales"
  45. label="科目金额(元)"
  46. width="120"
  47. align="center"
  48. >
  49. </el-table-column>
  50. <el-table-column
  51. prop="ratio"
  52. label="占总预算比例(%)"
  53. align="center"
  54. width="140"
  55. >
  56. </el-table-column>
  57. </el-table>
  58. </td>
  59. </tr>
  60. </tbody>
  61. </table>
  62. </div>
  63. </div>
  64. </template>
  65. <script>
  66. import moment from 'moment';
  67. import projectSelect from "@/components/project-select";
  68. import { getAllBudget } from "@/api/projectManage/projectList";
  69. import Decimal from "decimal.js";
  70. export default {
  71. props: {
  72. projectId: [String, Number]
  73. },
  74. components: {
  75. projectSelect,
  76. },
  77. data() {
  78. return {
  79. currProjectId: "",
  80. tableData: [{
  81. kmmc: '一、人员人工费用',
  82. }, {
  83. kmmc: '二、直接投入费用'
  84. }, {
  85. kmmc: '三、折旧费用与长期待摊费用'
  86. }, {
  87. kmmc: '四、无形资产摊销费用'
  88. }, {
  89. kmmc: '五、设计费用'
  90. }, {
  91. kmmc: '六、装备调试费用与试验费用'
  92. }, {
  93. kmmc: '七、委托外部研究开发费'
  94. }, {
  95. kmmc: '八、其他费用'
  96. }],
  97. selProject: {},
  98. loading: false,
  99. };
  100. },
  101. computed: {
  102. getXmDateRange() {
  103. if (this.selProject.xmkssj && this.selProject.xmjssj) {
  104. let xmkssj = moment(this.selProject.xmkssj).format('yyyy年MM月DD日');
  105. let xmjssj = moment(this.selProject.xmjssj).format('yyyy年MM月DD日')
  106. return `${xmkssj}至${xmjssj}`;
  107. }
  108. return `年 月 日至 年 月 日`;
  109. },
  110. },
  111. watch: {
  112. currProjectId(newVal) {
  113. if (!!newVal) {
  114. this.getAllBudgetData(newVal);
  115. }
  116. }
  117. },
  118. mounted() {
  119. this.currProjectId = this.projectId || '';
  120. },
  121. methods: {
  122. handleRefresh() {
  123. this.getAllBudgetData(this.currProjectId);
  124. },
  125. handleProjectChange(data) {
  126. this.selProject = data;
  127. },
  128. getAllBudgetData(id) {
  129. this.loading = true;
  130. getAllBudget({ xmId: id }).then(({ data }) => {
  131. this.loading = false;
  132. if (data.success) {
  133. const { xmysze } = data.data;
  134. let ysze = xmysze === -1 ? 1 : xmysze;
  135. this.tableData = this.tableData.map((item, index) => {
  136. let readKey = '';
  137. if (index == 0) {
  138. readKey = 'ryrgfy';
  139. } else if (index == 1) {
  140. readKey = 'zjtrfy';
  141. } else if (index == 2) {
  142. readKey = 'zjfyycqdtfy';
  143. } else if (index == 3) {
  144. readKey = 'wxzctxfy';
  145. } else if (index == 4) {
  146. readKey = 'sjfy';
  147. } else if (index == 5) {
  148. readKey = 'zbtsysyfy';
  149. } else if (index == 6) {
  150. readKey = 'wtwbyjkffy';
  151. } else if (index == 7) {
  152. readKey = 'qtfy';
  153. }
  154. item.sales = (data.data[readKey] === -1 ? 0 : data.data[readKey]).toFixed(2);
  155. let ratio = 0;
  156. if (item.sales) {
  157. // console.log(item.sales, ysze)
  158. ratio = (new Decimal(item.sales).div(new Decimal(ysze * 10000)) * 100).toFixed(2);
  159. }
  160. item.ratio = ratio;
  161. return item;
  162. });
  163. }
  164. }).catch(err => {
  165. this.loading = false;
  166. });
  167. },
  168. getSummaries(param) {
  169. const { columns, data } = param;
  170. const sums = [];
  171. columns.forEach((column, index) => {
  172. if (index === 0) {
  173. sums[index] = '合计';
  174. return;
  175. }
  176. const values = data.map(item => Number(item[column.property]));
  177. if (!values.every(value => isNaN(value))) {
  178. sums[index] = values.reduce((prev, curr) => {
  179. const value = Number(curr);
  180. if (!isNaN(value)) {
  181. return prev + curr;
  182. } else {
  183. return prev;
  184. }
  185. }, 0);
  186. // 保留两位小数
  187. sums[index] = sums[index].toFixed(2);
  188. } else {
  189. sums[index] = '';
  190. }
  191. });
  192. return sums;
  193. }
  194. }
  195. };
  196. </script>
  197. <style lang="scss" scoped>
  198. .container {
  199. width: 800px;
  200. margin: 0 auto;
  201. }
  202. .doc-page {
  203. width: 100%;
  204. border: 1px solid #eee;
  205. tr,
  206. td {
  207. border: 1px solid #eee;
  208. }
  209. td {
  210. padding: 12px 8px;
  211. }
  212. thead th {
  213. height: 50px;
  214. line-height: 50px;
  215. text-align: center;
  216. font-weight: bold;
  217. font-size: 16px;
  218. background-color: rgba(228, 240, 254, 1);
  219. }
  220. tr td.doc-label {
  221. width: 26%;
  222. background-color: rgb(246, 246, 246);
  223. font-weight: 600;
  224. text-align: center;
  225. font-size: 14px;
  226. }
  227. }
  228. .budget-table {
  229. ::v-deep .el-table__body .el-table__cell {
  230. padding: 8px 2px;
  231. }
  232. ::v-deep .el-table__header .el-table__cell {
  233. padding: 10px 2px;
  234. }
  235. }
  236. </style>