jjkc-auxiliary-details.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <basic-container v-loading="loading">
  3. <avue-form ref="searchForm" v-model="params" :option="searchOption" class="cl-search-form">
  4. <template slot-scope="{size}" slot="menuForm">
  5. <el-button type="primary" :size="size" icon="el-icon-search" @click="handleSearchBtn">查询</el-button>
  6. <el-button :size="size" icon="el-icon-delete" @click="handleResetBtn">清空</el-button>
  7. </template>
  8. </avue-form>
  9. <h3 class="page-title">{{ pageTitle }}</h3>
  10. <div style="display: flex; align-items: center;">
  11. <year-month-select v-model="yearAndMonth" :showAllYear="false" style="margin: 6px 0 20px;"></year-month-select>
  12. <el-radio-group v-model="costType" size="mini" style="margin: 8px 0 20px 8px;">
  13. <el-radio-button :label="1">费用化明细表</el-radio-button>
  14. <el-radio-button :label="2">资本化明细表</el-radio-button>
  15. </el-radio-group>
  16. </div>
  17. <template v-if="listData.length">
  18. <common-list
  19. v-for="(item, index) of listData"
  20. :data="item" :cost-type="costType"
  21. @printClick="handlePrintClick"
  22. @exportClick="handleExportClick"
  23. :key="index"
  24. style="margin-bottom: 25px;"
  25. ></common-list>
  26. </template>
  27. <el-empty v-else description="暂无数据"></el-empty>
  28. <WideTablePrinter
  29. ref="printWideTable"
  30. :columns="wideTableColumns"
  31. :data="wideTableData"
  32. :print-title="pageTitle"
  33. :rows-per-page="30"
  34. :default-landscape="true"
  35. :zoom="95"
  36. >
  37. <template slot="tableHeader">
  38. <div>
  39. <span style="margin-right: 140px;">{{ `研发项目编号:${currProject.xmbh}` }}</span>
  40. <span style="margin-right: 100px;">{{ `研发项目名称:${currProject.xmmc}` }}</span>
  41. <span style="margin-right: 100px;">{{ `支出类型:${currProject.costName}` }}</span>
  42. <span>{{ `金额单位:元` }}</span>
  43. </div>
  44. </template>
  45. <template slot="tableFooter">
  46. <div>
  47. <span>录入人:</span>
  48. </div>
  49. <div style="margin-top: 6px;">
  50. <span>主管人:</span>
  51. </div>
  52. </template>
  53. </WideTablePrinter>
  54. </basic-container>
  55. </template>
  56. <script>
  57. import YearMonthSelect from "@/components/year-month-select";
  58. import commonList from "./components/common-list.vue";
  59. import { getList } from "@/api/externalReports/jjkcAuxiliaryDetails";
  60. import moment from "moment";
  61. import { mapGetters } from "vuex";
  62. import {exportBloByPost} from "@/api/common";
  63. import {getToken} from "@/util/auth";
  64. import {downloadXls} from "@/util/util";
  65. export default {
  66. components: {
  67. YearMonthSelect,
  68. commonList
  69. },
  70. data() {
  71. return {
  72. loading: false,
  73. searchOption: {
  74. submitBtn:false,
  75. emptyBtn:false,
  76. column: [{
  77. label: '项目名称',
  78. prop: 'xmmc',
  79. type: 'input',
  80. }]
  81. },
  82. listData: [],
  83. yearAndMonth: "",
  84. params: {},
  85. costType: 1,
  86. wideTableColumns: [],
  87. wideTableData: [],
  88. currProject: {}
  89. }
  90. },
  91. watch: {
  92. yearAndMonth() {
  93. this.loadData();
  94. },
  95. costType() {
  96. this.loadData();
  97. }
  98. },
  99. computed: {
  100. ...mapGetters(['tag']),
  101. pageTitle() {
  102. let yearAndMonthCN = this.yearAndMonth ? moment(this.yearAndMonth).format('yyyy年MM月') : '';
  103. return `${yearAndMonthCN}${this.tag.label}`;
  104. },
  105. },
  106. methods: {
  107. loadData() {
  108. let params = { ...this.params, type: this.costType };
  109. this.loading = true;
  110. getList({
  111. ...params,
  112. yearAndMonth: this.yearAndMonth,
  113. }).then(({ data }) => {
  114. this.loading = false;
  115. if (data.code == 200) {
  116. let allList = data.data.map(item => {
  117. let childArr = item.costList.map(costItem => {
  118. return { xmmc: item.xmmc, xmbh: item.xmbh, xmId: item.xmId, ...costItem, zl: '记' };
  119. });
  120. return childArr;
  121. });
  122. this.listData = allList;
  123. }
  124. }).catch(() => {
  125. this.loading = false;
  126. });
  127. },
  128. handleSearchBtn() {
  129. this.loadData();
  130. },
  131. handleResetBtn() {
  132. this.params = {};
  133. this.$refs.searchForm.resetForm();
  134. this.loadData();
  135. },
  136. handlePrintClick({ column, data, projectData }) {
  137. this.wideTableColumns = [...column];
  138. this.wideTableData = data;
  139. this.currProject = projectData;
  140. this.$nextTick(() => {
  141. this.$refs.printWideTable.printTable(true);
  142. })
  143. },
  144. handleExportClick({ xmId }) {
  145. const exportParams = { xmId, ...this.params, type: this.costType, yearAndMonth: this.yearAndMonth };
  146. exportBloByPost(`/api/kd-scientific/xm/cost/details/deduction-list/export?${this.website.tokenHeader}=${getToken()}`, exportParams).then(res => {
  147. downloadXls(res.data, `${this.pageTitle}.xlsx`);
  148. });
  149. },
  150. },
  151. }
  152. </script>
  153. <style lang="scss">
  154. .cl-search-form {
  155. .el-form-item--small .el-form-item__label {
  156. display: none;
  157. }
  158. .el-form-item--small .el-form-item__content {
  159. margin-left: 8px !important;
  160. }
  161. .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  162. margin-bottom: 6px;
  163. }
  164. .avue-form__group .el-col {
  165. width: auto !important;
  166. padding-top: 0 !important;
  167. }
  168. }
  169. </style>