other-cost-summary-list.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <basic-container>
  3. <avue-crud
  4. v-bind="bindVal"
  5. v-on="onEvent"
  6. v-model="form"
  7. :page.sync="page"
  8. >
  9. <template slot="menuLeft">
  10. <el-button
  11. type="warning"
  12. size="small"
  13. plain
  14. icon="el-icon-download"
  15. @click="handleExport"
  16. >
  17. 导出
  18. </el-button>
  19. <print-table-btn @click="printTable" />
  20. <div style="display: flex; align-items: center;">
  21. <year-month-select v-model="params.yearAndMonth"></year-month-select>
  22. </div>
  23. </template>
  24. <template slot="rqSearch">
  25. <el-date-picker
  26. v-model="params.rq"
  27. type="daterange"
  28. range-separator="至"
  29. start-placeholder="开始日期"
  30. end-placeholder="结束日期"
  31. value-format="yyyy-MM-dd"
  32. style="width: 220px !important;"
  33. >
  34. </el-date-picker>
  35. </template>
  36. </avue-crud>
  37. <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
  38. <WideTablePrinter
  39. ref="printWideTable"
  40. :columns="wideTableColumns"
  41. :data="data"
  42. :print-title="printTitle"
  43. :rows-per-page="30"
  44. :default-landscape="true"
  45. />
  46. </basic-container>
  47. </template>
  48. <script>
  49. import YearMonthSelect from "@/components/year-month-select";
  50. import {exportBlob} from "@/api/common";
  51. import {getToken} from "@/util/auth";
  52. import {downloadXls} from "@/util/util";
  53. import moment from "moment";
  54. import Decimal from "decimal.js";
  55. export default window.$crudCommon({
  56. components: {
  57. YearMonthSelect,
  58. },
  59. data() {
  60. return {
  61. params: {
  62. yearAndMonth: moment(new Date()).format('YYYYMM'),
  63. },
  64. defaultColumns: [],
  65. wideTableColumns: [],
  66. printTitle: "",
  67. };
  68. },
  69. watch: {
  70. 'params.yearAndMonth'(newVal) {
  71. this.page.currentPage = 1;
  72. this.getList(this.page);
  73. }
  74. },
  75. methods: {
  76. loadData() {},
  77. handleExport() {
  78. exportBlob(`/api/kd-scientific/lease/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  79. downloadXls(res.data, `其他费用汇总表${this.params.yearAndMonth}.xlsx`);
  80. });
  81. },
  82. /**
  83. * 打印表格
  84. * @param isLandscape 是否横向打印
  85. */
  86. printTable(isLandscape) {
  87. this.wideTableColumns = this.$refs.crud.columnOption;
  88. this.printTitle = `其他费用汇总表${this.params.yearAndMonth}`;
  89. this.$nextTick(() => {
  90. this.$refs.printWideTable.printTable(isLandscape);
  91. })
  92. },
  93. },
  94. }, {
  95. // 模块路径
  96. name: 'yfCostManage/yfCostStatistics/otherCostSummaryList',
  97. res: ({ data }) => {
  98. return data;
  99. },
  100. });
  101. </script>