all-budget-table.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  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. const newData = {
  143. ryrgfy: new Decimal(ryrgfy === -1 ? 0 : ryrgfy).div(new Decimal(10000)).toFixed(4),
  144. zjtrfy: new Decimal(zjtrfy === -1 ? 0 : zjtrfy).div(new Decimal(10000)).toFixed(4),
  145. zjfyycqdtfy: new Decimal(zjfyycqdtfy === -1 ? 0 : zjfyycqdtfy).div(new Decimal(10000)).toFixed(4),
  146. wxzctxfy: new Decimal(wxzctxfy === -1 ? 0 : wxzctxfy).div(new Decimal(10000)).toFixed(4),
  147. sjfy: new Decimal(sjfy === -1 ? 0 : sjfy).div(new Decimal(10000)).toFixed(4),
  148. zbtsysyfy: new Decimal(zbtsysyfy === -1 ? 0 : zbtsysyfy).div(new Decimal(10000)).toFixed(4),
  149. wtwbyjkffy: new Decimal(wtwbyjkffy === -1 ? 0 : wtwbyjkffy).div(new Decimal(10000)).toFixed(4),
  150. qtfy: new Decimal(qtfy === -1 ? 0 : qtfy).div(new Decimal(10000)).toFixed(4),
  151. };
  152. let _total = new Decimal(newData.ryrgfy)
  153. .add(newData.zjtrfy)
  154. .add(newData.zjfyycqdtfy)
  155. .add(newData.wxzctxfy)
  156. .add(newData.sjfy)
  157. .add(newData.zbtsysyfy)
  158. .add(newData.wtwbyjkffy)
  159. .add(newData.qtfy);
  160. this.tableData = this.tableData.map((item, index) => {
  161. let readKey = '';
  162. if (index == 0) {
  163. readKey = 'ryrgfy';
  164. } else if (index == 1) {
  165. readKey = 'zjtrfy';
  166. } else if (index == 2) {
  167. readKey = 'zjfyycqdtfy';
  168. } else if (index == 3) {
  169. readKey = 'wxzctxfy';
  170. } else if (index == 4) {
  171. readKey = 'sjfy';
  172. } else if (index == 5) {
  173. readKey = 'zbtsysyfy';
  174. } else if (index == 6) {
  175. readKey = 'wtwbyjkffy';
  176. } else if (index == 7) {
  177. readKey = 'qtfy';
  178. }
  179. item.sales = newData[readKey];
  180. let ratio = 0;
  181. if (Number(_total) > 0) {
  182. ratio = (new Decimal(item.sales).div(new Decimal(_total)) * 100).toFixed(4);
  183. }
  184. item.ratio = ratio;
  185. return item;
  186. });
  187. }
  188. }).catch(err => {
  189. this.loading = false;
  190. });
  191. },
  192. getSummaries(param) {
  193. const { columns, data } = param;
  194. const sums = [];
  195. columns.forEach((column, index) => {
  196. if (index === 0) {
  197. sums[index] = '合计';
  198. return;
  199. }
  200. const values = data.map(item => Number(item[column.property]));
  201. if (!values.every(value => isNaN(value))) {
  202. sums[index] = values.reduce((prev, curr) => {
  203. const value = Number(curr);
  204. if (!isNaN(value)) {
  205. return prev + curr;
  206. } else {
  207. return prev;
  208. }
  209. }, 0);
  210. // 保留两位小数
  211. sums[index] = sums[index].toFixed(2);
  212. } else {
  213. sums[index] = '';
  214. }
  215. });
  216. return sums;
  217. }
  218. }
  219. };
  220. </script>
  221. <style lang="scss" scoped>
  222. .container {
  223. width: 800px;
  224. margin: 0 auto;
  225. }
  226. .doc-page {
  227. width: 100%;
  228. border: 1px solid #eee;
  229. tr,
  230. td {
  231. border: 1px solid #eee;
  232. }
  233. td {
  234. padding: 12px 8px;
  235. }
  236. thead th {
  237. height: 50px;
  238. line-height: 50px;
  239. text-align: center;
  240. font-weight: bold;
  241. font-size: 16px;
  242. background-color: rgba(228, 240, 254, 1);
  243. }
  244. tr td.doc-label {
  245. width: 26%;
  246. background-color: rgb(246, 246, 246);
  247. font-weight: 600;
  248. text-align: center;
  249. font-size: 14px;
  250. }
  251. }
  252. .budget-table {
  253. ::v-deep .el-table__body .el-table__cell {
  254. padding: 8px 2px;
  255. }
  256. ::v-deep .el-table__header .el-table__cell {
  257. padding: 10px 2px;
  258. }
  259. }
  260. </style>