all-budget-table.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  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 size="small" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
  6. <el-button size="small" type="primary" icon="el-icon-printer" v-print="'#budgetWrap'">打印</el-button>
  7. </div>
  8. <table id="budgetWrap" 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. projectData: Object
  74. },
  75. components: {
  76. projectSelect,
  77. },
  78. data() {
  79. return {
  80. currProjectId: "",
  81. tableData: [{
  82. kmmc: '一、人员人工费用',
  83. }, {
  84. kmmc: '二、直接投入费用'
  85. }, {
  86. kmmc: '三、折旧费用与长期待摊费用'
  87. }, {
  88. kmmc: '四、无形资产摊销费用'
  89. }, {
  90. kmmc: '五、设计费用'
  91. }, {
  92. kmmc: '六、装备调试费用与试验费用'
  93. }, {
  94. kmmc: '七、委托外部研究开发费'
  95. }, {
  96. kmmc: '八、其他费用'
  97. }],
  98. selProject: {},
  99. loading: false,
  100. };
  101. },
  102. computed: {
  103. getXmDateRange() {
  104. if (this.selProject.xmkssj && this.selProject.xmjssj) {
  105. let xmkssj = moment(this.selProject.xmkssj).format('yyyy年MM月DD日');
  106. let xmjssj = moment(this.selProject.xmjssj).format('yyyy年MM月DD日')
  107. return `${xmkssj}至${xmjssj}`;
  108. }
  109. return `年 月 日至 年 月 日`;
  110. },
  111. },
  112. watch: {
  113. projectId(newVal, oldVal) {
  114. this.currProjectId = newVal;
  115. if (oldVal) {
  116. this.selProject = this.projectData;
  117. }
  118. },
  119. currProjectId(newVal) {
  120. if (!!newVal) {
  121. this.getAllBudgetData(newVal);
  122. }
  123. }
  124. },
  125. mounted() {
  126. this.currProjectId = this.projectId || '';
  127. },
  128. methods: {
  129. handleRefresh() {
  130. this.getAllBudgetData(this.currProjectId);
  131. },
  132. handleProjectChange(data) {
  133. this.selProject = data;
  134. this.$emit("change", data);
  135. },
  136. getAllBudgetData(id) {
  137. this.loading = true;
  138. getAllBudget({ xmId: id }).then(({ data }) => {
  139. this.loading = false;
  140. if (data.success) {
  141. const { ryrgfy, zjtrfy, zjfyycqdtfy, wxzctxfy, sjfy, zbtsysyfy, wtwbyjkffy, qtfy } = data.data;
  142. let _total = (new Decimal(ryrgfy).add(zjtrfy).add(zjfyycqdtfy).add(wxzctxfy).add(sjfy).add(zbtsysyfy).add(wtwbyjkffy).add(qtfy)).toFixed(2);
  143. this.tableData = this.tableData.map((item, index) => {
  144. let readKey = '';
  145. if (index == 0) {
  146. readKey = 'ryrgfy';
  147. } else if (index == 1) {
  148. readKey = 'zjtrfy';
  149. } else if (index == 2) {
  150. readKey = 'zjfyycqdtfy';
  151. } else if (index == 3) {
  152. readKey = 'wxzctxfy';
  153. } else if (index == 4) {
  154. readKey = 'sjfy';
  155. } else if (index == 5) {
  156. readKey = 'zbtsysyfy';
  157. } else if (index == 6) {
  158. readKey = 'wtwbyjkffy';
  159. } else if (index == 7) {
  160. readKey = 'qtfy';
  161. }
  162. item.sales = (data.data[readKey] === -1 ? 0 : data.data[readKey]).toFixed(0);
  163. let ratio = 0;
  164. if (Number(_total) > 0) {
  165. ratio = (new Decimal(item.sales).div(new Decimal(_total)) * 100).toFixed(2);
  166. }
  167. item.ratio = ratio;
  168. return item;
  169. });
  170. }
  171. }).catch(err => {
  172. this.loading = false;
  173. });
  174. },
  175. getSummaries(param) {
  176. const { columns, data } = param;
  177. const sums = [];
  178. columns.forEach((column, index) => {
  179. if (index === 0) {
  180. sums[index] = '合计';
  181. return;
  182. }
  183. const values = data.map(item => Number(item[column.property]));
  184. if (!values.every(value => isNaN(value))) {
  185. sums[index] = values.reduce((prev, curr) => {
  186. const value = Number(curr);
  187. if (!isNaN(value)) {
  188. return prev + curr;
  189. } else {
  190. return prev;
  191. }
  192. }, 0);
  193. // 保留两位小数
  194. sums[index] = sums[index].toFixed(2);
  195. } else {
  196. sums[index] = '';
  197. }
  198. });
  199. return sums;
  200. }
  201. }
  202. };
  203. </script>
  204. <style lang="scss" scoped>
  205. .container {
  206. width: 800px;
  207. margin: 0 auto;
  208. }
  209. .doc-page {
  210. width: 100%;
  211. border: 1px solid #eee;
  212. tr,
  213. td {
  214. border: 1px solid #eee;
  215. }
  216. td {
  217. padding: 12px 8px;
  218. }
  219. thead th {
  220. height: 50px;
  221. line-height: 50px;
  222. text-align: center;
  223. font-weight: bold;
  224. font-size: 16px;
  225. background-color: rgba(228, 240, 254, 1);
  226. }
  227. tr td.doc-label {
  228. width: 26%;
  229. background-color: rgb(246, 246, 246);
  230. font-weight: 600;
  231. text-align: center;
  232. font-size: 14px;
  233. }
  234. }
  235. .budget-table {
  236. ::v-deep .el-table__body .el-table__cell {
  237. padding: 8px 2px;
  238. }
  239. ::v-deep .el-table__header .el-table__cell {
  240. padding: 10px 2px;
  241. }
  242. }
  243. </style>