common-page.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  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="useDate">
  5. <span>日期:</span>
  6. <el-date-picker
  7. v-model="params.useDateRange"
  8. type="daterange"
  9. range-separator="至"
  10. start-placeholder="开始日期"
  11. end-placeholder="结束日期"
  12. value-format="yyyy-MM-dd"
  13. style="width: 220px !important;"
  14. >
  15. </el-date-picker>
  16. </template>
  17. <template slot-scope="{size}" slot="menuForm">
  18. <el-button type="primary" :size="size" icon="el-icon-search" @click="handleSearchBtn">查询</el-button>
  19. <el-button :size="size" icon="el-icon-delete" @click="handleResetBtn">清空</el-button>
  20. </template>
  21. </avue-form>
  22. <h3 class="page-title">{{ pageTitle }}</h3>
  23. <div style="display: flex; align-items: center;">
  24. <year-month-select v-model="yearAndMonth" :showAllYear="false" style="margin: 6px 0 20px;"></year-month-select>
  25. </div>
  26. <template v-if="listData.length">
  27. <common-list
  28. v-for="(item, index) of listData"
  29. :data="item"
  30. :type="type"
  31. :key="index"
  32. style="margin-bottom: 25px;"
  33. @printClick="handlePrintClick"
  34. @exportClick="handleExportClick"
  35. ></common-list>
  36. </template>
  37. <el-empty v-else description="暂无数据"></el-empty>
  38. <WideTablePrinter
  39. ref="printWideTable"
  40. :columns="wideTableColumns"
  41. :data="wideTableData"
  42. :print-title="pageTitle"
  43. :rows-per-page="30"
  44. :default-landscape="true"
  45. :zoom="95"
  46. >
  47. <template slot="tableHeader">
  48. <div>
  49. <span style="margin-right: 140px;">{{ `研发项目编号:${currProject.xmbh}` }}</span>
  50. <span>{{ `研发项目名称:${currProject.xmmc}` }}</span>
  51. </div>
  52. </template>
  53. <template slot="tableFooter">
  54. <div>
  55. <span style="margin-right: 140px;">发料人:</span>
  56. <span>发料人:</span>
  57. </div>
  58. <div style="margin-top: 6px;">
  59. <span>项目负责人:</span>
  60. </div>
  61. </template>
  62. </WideTablePrinter>
  63. </basic-container>
  64. </template>
  65. <script>
  66. import YearMonthSelect from "@/components/year-month-select";
  67. import commonList from "./common-list.vue";
  68. import { getList } from "@/api/yfCostManage/yfCostStatistics/clCost";
  69. import moment from "moment";
  70. import Decimal from "decimal.js";
  71. import { mapGetters } from "vuex";
  72. import {exportBloByPost} from "@/api/common";
  73. import {getToken} from "@/util/auth";
  74. import {downloadXls} from "@/util/util";
  75. export default {
  76. props: {
  77. type: {
  78. type: String,
  79. // 材料、动力、燃料
  80. default: "材料"
  81. },
  82. },
  83. components: {
  84. YearMonthSelect,
  85. commonList
  86. },
  87. data() {
  88. return {
  89. loading: false,
  90. searchOption: {
  91. submitBtn:false,
  92. emptyBtn:false,
  93. column: [{
  94. label: '项目名称',
  95. prop: 'xmmc',
  96. type: 'input',
  97. }, {
  98. label: '材料名称',
  99. prop: 'name',
  100. }, {
  101. label: '型号规格',
  102. prop: 'model',
  103. display: this.type === '材料' ? true : false,
  104. }, {
  105. label: '日期',
  106. prop: 'useDate',
  107. type: 'date',
  108. }]
  109. },
  110. listData: [],
  111. yearAndMonth: "",
  112. params: {},
  113. wideTableColumns: [],
  114. wideTableData: [],
  115. currProject: {}
  116. }
  117. },
  118. watch: {
  119. yearAndMonth() {
  120. this.loadData();
  121. }
  122. },
  123. computed: {
  124. ...mapGetters(['tag']),
  125. pageTitle() {
  126. let yearAndMonthCN = this.yearAndMonth ? moment(this.yearAndMonth).format('yyyy年MM月') : '';
  127. return `${yearAndMonthCN}${this.tag.label}`.replace(/每月/g, '');
  128. }
  129. },
  130. methods: {
  131. loadData() {
  132. let params = { ...this.params };
  133. if (params.useDateRange && params.useDateRange.length) {
  134. params.dateMin = params.useDateRange[0];
  135. params.dateMax = params.useDateRange[1];
  136. }
  137. delete params.useDateRange;
  138. this.loading = true;
  139. getList({
  140. ...params,
  141. yearAndMonth: this.yearAndMonth,
  142. type: this.type,
  143. }).then(({ data }) => {
  144. this.loading = false;
  145. if (data.code == 200) {
  146. let allList = [];
  147. data.data.map(item => {
  148. Object.keys(item).map(key => {
  149. console.log(item[key])
  150. let newList = item[key].map(childItem => {
  151. childItem.amount = new Decimal(childItem.unitPrice || 0).mul(new Decimal(childItem.useQuantity || 0)).toFixed(2);
  152. return childItem;
  153. })
  154. allList.push(newList);
  155. });
  156. });
  157. this.listData = allList;
  158. }
  159. }).catch(() => {
  160. this.loading = false;
  161. });
  162. },
  163. handleSearchBtn() {
  164. this.loadData();
  165. },
  166. handleResetBtn() {
  167. this.params = {};
  168. this.$refs.searchForm.resetForm();
  169. this.loadData();
  170. },
  171. handlePrintClick({ column, data, projectData }) {
  172. this.wideTableColumns = [...column];
  173. this.wideTableData = data;
  174. this.currProject = projectData;
  175. this.$nextTick(() => {
  176. this.$refs.printWideTable.printTable(true);
  177. })
  178. },
  179. handleExportClick({ xmId, useDate, yearAndMonth }) {
  180. const exportParams = { useDate, xmId, yearAndMonth, type: this.type };
  181. exportBloByPost(`/api/kd-scientific/goods/yanfalingliaodan/export?${this.website.tokenHeader}=${getToken()}`, exportParams).then(res => {
  182. downloadXls(res.data, `${this.pageTitle}.xlsx`);
  183. });
  184. },
  185. },
  186. }
  187. </script>
  188. <style lang="scss">
  189. .cl-search-form {
  190. .el-form-item--small .el-form-item__label {
  191. display: none;
  192. }
  193. .el-form-item--small .el-form-item__content {
  194. margin-left: 8px !important;
  195. }
  196. .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  197. margin-bottom: 6px;
  198. }
  199. .avue-form__group .el-col {
  200. width: auto !important;
  201. padding-top: 0 !important;
  202. }
  203. }
  204. </style>