jjkc-auxiliary-details.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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 v-for="(item, index) of listData" :data="item" :cost-type="costType" @printClick="handlePrintClick" :key="index" style="margin-bottom: 25px;"></common-list>
  19. </template>
  20. <el-empty v-else description="暂无数据"></el-empty>
  21. <WideTablePrinter
  22. ref="printWideTable"
  23. :columns="wideTableColumns"
  24. :data="wideTableData"
  25. :print-title="pageTitle"
  26. :rows-per-page="30"
  27. :default-landscape="true"
  28. :zoom="95"
  29. >
  30. <template slot="tableHeader">
  31. <div>
  32. <span style="margin-right: 140px;">{{ `研发项目编号:${currProject.xmbh}` }}</span>
  33. <span style="margin-right: 100px;">{{ `研发项目名称:${currProject.xmmc}` }}</span>
  34. <span style="margin-right: 100px;">{{ `支出类型:${currProject.costName}` }}</span>
  35. <span>{{ `金额单位:元` }}</span>
  36. </div>
  37. </template>
  38. <template slot="tableFooter">
  39. <div>
  40. <span>录入人:</span>
  41. </div>
  42. <div style="margin-top: 6px;">
  43. <span>主管人:</span>
  44. </div>
  45. </template>
  46. </WideTablePrinter>
  47. </basic-container>
  48. </template>
  49. <script>
  50. import YearMonthSelect from "@/components/year-month-select";
  51. import commonList from "./components/common-list.vue";
  52. import { getList } from "@/api/externalReports/jjkcAuxiliaryDetails";
  53. import moment from "moment";
  54. import { mapGetters } from "vuex";
  55. export default {
  56. components: {
  57. YearMonthSelect,
  58. commonList
  59. },
  60. data() {
  61. return {
  62. loading: false,
  63. searchOption: {
  64. submitBtn:false,
  65. emptyBtn:false,
  66. column: [{
  67. label: '项目名称',
  68. prop: 'xmmc',
  69. type: 'input',
  70. }]
  71. },
  72. listData: [],
  73. yearAndMonth: "",
  74. params: {},
  75. costType: 1,
  76. wideTableColumns: [],
  77. wideTableData: [],
  78. currProject: {}
  79. }
  80. },
  81. watch: {
  82. yearAndMonth() {
  83. this.loadData();
  84. },
  85. costType() {
  86. this.loadData();
  87. }
  88. },
  89. computed: {
  90. ...mapGetters(['tag']),
  91. pageTitle() {
  92. let yearAndMonthCN = this.yearAndMonth ? moment(this.yearAndMonth).format('yyyy年MM月') : '';
  93. return `${yearAndMonthCN}${this.tag.label}`;
  94. },
  95. },
  96. methods: {
  97. loadData() {
  98. let params = { ...this.params, type: this.costType };
  99. this.loading = true;
  100. getList({
  101. ...params,
  102. yearAndMonth: this.yearAndMonth,
  103. }).then(({ data }) => {
  104. this.loading = false;
  105. if (data.code == 200) {
  106. let allList = data.data.map(item => {
  107. let childArr = item.costList.map(costItem => {
  108. return { xmmc: item.xmmc, xmbh: item.xmbh, ...costItem, zl: '记', kjpzje: costItem.amount };
  109. });
  110. return childArr;
  111. });
  112. this.listData = allList;
  113. }
  114. }).catch(() => {
  115. this.loading = false;
  116. });
  117. },
  118. handleSearchBtn() {
  119. this.loadData();
  120. },
  121. handleResetBtn() {
  122. this.params = {};
  123. this.$refs.searchForm.resetForm();
  124. this.loadData();
  125. },
  126. handlePrintClick({ column, data, projectData }) {
  127. this.wideTableColumns = [...column];
  128. this.wideTableData = data;
  129. this.currProject = projectData;
  130. this.$nextTick(() => {
  131. this.$refs.printWideTable.printTable(true);
  132. })
  133. }
  134. },
  135. }
  136. </script>
  137. <style lang="scss">
  138. .cl-search-form {
  139. .el-form-item--small .el-form-item__label {
  140. display: none;
  141. }
  142. .el-form-item--small .el-form-item__content {
  143. margin-left: 8px !important;
  144. }
  145. .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  146. margin-bottom: 6px;
  147. }
  148. .avue-form__group .el-col {
  149. width: auto !important;
  150. padding-top: 0 !important;
  151. }
  152. }
  153. </style>