common-list.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <div>
  3. <div style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
  4. <div class="left" style="display: flex;">
  5. <div style="margin-right: 50px;">研发项目编号:{{ data[0].xmbh }}</div>
  6. <div style="margin-right: 50px;">项目项目名称:{{ data[0].xmmc }}</div>
  7. <div style="margin-right: 50px;">支出类型:<span style="color: #409EFF;">{{ getCostName }}</span></div>
  8. <div>金额单位:元</div>
  9. </div>
  10. <div class="right">
  11. <el-button
  12. type="warning"
  13. size="small"
  14. plain
  15. icon="el-icon-download"
  16. @click="handleExport"
  17. style="margin-right: 10px;"
  18. >
  19. 导出
  20. </el-button>
  21. </div>
  22. </div>
  23. <avue-crud class="common-crud" :option="options" :data="data">
  24. </avue-crud>
  25. </div>
  26. </template>
  27. <script>
  28. import {exportBlob} from "@/api/common";
  29. import {getToken} from "@/util/auth";
  30. import {downloadXls} from "@/util/util";
  31. export default {
  32. props: {
  33. // 支出类型
  34. costType: [String, Number],
  35. data: {
  36. type: Array,
  37. default: () => []
  38. }
  39. },
  40. data() {
  41. return {
  42. options: {
  43. calcHeight: 30,
  44. tip: false,
  45. searchShow: true,
  46. searchMenuSpan: 6,
  47. border: true,
  48. index: true,
  49. addBtn: false,
  50. selection: true,
  51. searchLabelWidth: 140,
  52. labelWidth: 100,
  53. menuWidth: 180,
  54. menu: false,
  55. dialogClickModal: false,
  56. refreshBtn: false,
  57. columnBtn: false,
  58. gridBtn: false,
  59. dialogWidth: 500,
  60. dialogType: "drawer",
  61. showSummary: true,
  62. sumColumnList: [
  63. {
  64. label: '合计',
  65. name: 'kjpzje',
  66. type: 'sum'
  67. },
  68. {
  69. name: 'amount',
  70. type: 'sum',
  71. },
  72. {
  73. name: 'ryrgfy',
  74. type: 'sum',
  75. },
  76. {
  77. name: 'zjtrfy',
  78. type: 'sum'
  79. },
  80. {
  81. name: 'zjfy',
  82. type: 'sum'
  83. },
  84. {
  85. name: 'wxzctx',
  86. type: 'sum'
  87. },
  88. {
  89. name: 'xcpsjfd',
  90. type: 'sum'
  91. },
  92. {
  93. name: 'qtxgfy',
  94. type: 'sum'
  95. },
  96. {
  97. name: 'wtjnjgfy',
  98. type: 'sum'
  99. },
  100. {
  101. name: 'wtjwjgfy',
  102. type: 'sum'
  103. },
  104. ],
  105. column: [
  106. {
  107. label: '凭证信息',
  108. align: 'center',
  109. children: [
  110. {
  111. label: '日期',
  112. prop: 'recordDate',
  113. width: 85,
  114. align: 'center',
  115. showOverflowTooltip: true,
  116. },
  117. {
  118. label: '种类',
  119. prop: 'zl',
  120. width: 50,
  121. align: 'center',
  122. showOverflowTooltip: true,
  123. },
  124. {
  125. label: '号数',
  126. prop: 'voucherNumber',
  127. width: 90,
  128. align: 'center',
  129. showOverflowTooltip: true,
  130. },
  131. {
  132. label: '摘要',
  133. prop: 'digest',
  134. width: 100,
  135. align: 'center',
  136. showOverflowTooltip: true,
  137. },
  138. ]
  139. },
  140. {
  141. label: '会计凭证记载金额',
  142. prop: 'kjpzje',
  143. width: 120,
  144. align: 'center',
  145. showOverflowTooltip: true,
  146. },
  147. {
  148. label: '税法规定的归集金额',
  149. prop: 'amount',
  150. width: 130,
  151. align: 'center',
  152. showOverflowTooltip: true,
  153. },
  154. {
  155. label: '费用明细(税法规定)',
  156. align: 'center',
  157. children: [
  158. {
  159. label: '人员人工费用',
  160. prop: 'ryrgfy',
  161. span: 24,
  162. minWidth: 90,
  163. align: 'center',
  164. showOverflowTooltip: true,
  165. },
  166. {
  167. label: '直接投入费用',
  168. prop: 'zjtrfy',
  169. span: 24,
  170. minWidth: 90,
  171. align: 'center',
  172. showOverflowTooltip: true,
  173. },
  174. {
  175. label: '折旧费用',
  176. prop: 'zjfy',
  177. span: 24,
  178. minWidth: 90,
  179. align: 'center',
  180. showOverflowTooltip: true,
  181. },
  182. {
  183. label: '无形资产摊销',
  184. prop: 'wxzctx',
  185. span: 24,
  186. minWidth: 90,
  187. align: 'center',
  188. showOverflowTooltip: true,
  189. },
  190. {
  191. label: '新产品设计费等',
  192. prop: 'xcpsjfd',
  193. span: 24,
  194. minWidth: 90,
  195. align: 'center',
  196. showOverflowTooltip: true,
  197. },
  198. {
  199. label: '其他相关费用',
  200. prop: 'qtxgfy',
  201. span: 24,
  202. minWidth: 90,
  203. align: 'center',
  204. showOverflowTooltip: true,
  205. },
  206. {
  207. label: '委托外部费用',
  208. align: 'center',
  209. children: [
  210. {
  211. label: '委托境内机构或个人进行研发活动所发生的费用',
  212. prop: 'wtjnjgfy',
  213. span: 24,
  214. minWidth: 110,
  215. align: 'center',
  216. showOverflowTooltip: true,
  217. },
  218. {
  219. label: '委托境外机构进行研发活动所发生的费用',
  220. prop: 'wtjwjgfy',
  221. span: 24,
  222. minWidth: 110,
  223. align: 'center',
  224. showOverflowTooltip: true,
  225. },
  226. ]
  227. },
  228. ]
  229. },
  230. ],
  231. },
  232. };
  233. },
  234. computed: {
  235. getCostName() {
  236. let costTypeObj = {1: '费用化', 2: '资本化'};
  237. return costTypeObj[this.costType];
  238. }
  239. },
  240. methods: {
  241. handleExport() {
  242. this.$message.error("暂未开发");
  243. // exportBlob(`/api/kd-scientific/goods/yanfalingliaodan/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  244. // downloadXls(res.data, `${this.params.yearAndMonth}${title}.xlsx`);
  245. // });
  246. },
  247. }
  248. };
  249. </script>
  250. <style lang="scss">
  251. .common-crud {
  252. .avue-crud__header {
  253. min-height: 0;
  254. }
  255. }
  256. </style>