kj-auxiliary-details.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  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. <!-- 开始时间 -->
  25. <template slot="kssjSearch">
  26. <el-date-picker
  27. v-model="params.kssjRange"
  28. type="daterange"
  29. range-separator="至"
  30. start-placeholder="开始日期"
  31. end-placeholder="结束日期"
  32. value-format="yyyy-MM-dd"
  33. style="width: 240px !important;"
  34. >
  35. </el-date-picker>
  36. </template>
  37. </avue-crud>
  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. export default window.$crudCommon({
  55. components: {
  56. YearMonthSelect,
  57. },
  58. data() {
  59. return {
  60. params: {
  61. yearAndMonth: moment(new Date()).format('YYYYMM'),
  62. },
  63. wideTableColumns: [],
  64. printTitle: "",
  65. };
  66. },
  67. watch: {
  68. 'params.yearAndMonth'(newVal) {
  69. this.page.currentPage = 1;
  70. this.getList(this.page);
  71. }
  72. },
  73. methods: {
  74. loadData() {},
  75. handleExport() {
  76. exportBlob(`/api/kd-scientific/attendance/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  77. downloadXls(res.data, `${this.params.yearAndMonth}研发费用明细表.xlsx`);
  78. });
  79. },
  80. /**
  81. * 打印表格
  82. * @param isLandscape 是否横向打印
  83. */
  84. printTable(isLandscape) {
  85. this.wideTableColumns = this.$refs.crud.columnOption;
  86. this.printTitle = `${this.params.yearAndMonth}研发费用明细表.xlsx`;
  87. this.$nextTick(() => {
  88. this.$refs.printWideTable.printTable(isLandscape);
  89. })
  90. },
  91. },
  92. }, {
  93. // 模块路径
  94. name: 'externalReports/kjAuxiliaryDetails',
  95. res: ({ data }) => {
  96. return data;
  97. },
  98. });
  99. </script>