high-tech-person-sum-list.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <basic-container>
  3. <avue-crud
  4. ref="crud"
  5. v-bind="bindVal"
  6. v-on="onEvent"
  7. v-model="form"
  8. :page.sync="page"
  9. :before-open="handleBeforeOpen"
  10. :permission="permissionList"
  11. >
  12. <template slot="menuLeft">
  13. <el-button
  14. type="warning"
  15. size="small"
  16. plain
  17. icon="el-icon-download"
  18. @click="handleExport"
  19. >
  20. 导出
  21. </el-button>
  22. <print-table-btn @click="printTable" />
  23. <div>
  24. <year-month-select v-model="params.yearAndMonth" :showMonth="false"></year-month-select>
  25. </div>
  26. </template>
  27. </avue-crud>
  28. <WideTablePrinter
  29. ref="printWideTable"
  30. :columns="wideTableColumns"
  31. :data="data"
  32. :print-title="printTitle"
  33. :rows-per-page="30"
  34. :default-landscape="true"
  35. />
  36. </basic-container>
  37. </template>
  38. <script>
  39. import {exportBlob} from "@/api/common";
  40. import YearMonthSelect from "@/components/year-month-select";
  41. import moment from "moment";
  42. import {getToken} from "@/util/auth";
  43. import {downloadXls} from "@/util/util";
  44. export default window.$crudCommon({
  45. components: {
  46. YearMonthSelect,
  47. },
  48. data() {
  49. return {
  50. params: {
  51. yearAndMonth: moment(new Date()).format('YYYY'),
  52. },
  53. printTitle: "",
  54. wideTableColumns: [],
  55. };
  56. },
  57. watch: {
  58. 'params.yearAndMonth'(newVal) {
  59. this.page.currentPage = 1;
  60. this.getList(this.page);
  61. }
  62. },
  63. methods: {
  64. handleExport() {
  65. exportBlob(`/api/kd-scientific/technician/ndgkjryhzb/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  66. downloadXls(res.data, `${this.params.yearAndMonth}年度高新科技人员汇总表.xlsx`);
  67. });
  68. },
  69. printTable(isLandscape) {
  70. this.wideTableColumns = this.$refs.crud.columnOption;
  71. this.printTitle = `${this.params.yearAndMonth}年度高新科技人员汇总表`;
  72. this.$nextTick(() => {
  73. this.$refs.printWideTable.printTable(isLandscape);
  74. });
  75. },
  76. },
  77. }, {
  78. // 模块路径
  79. name: 'techPerson/highTechPersonSumList',
  80. res: ({ data }) => {
  81. data.records = data.records.map(item => {
  82. item.gender = item.gender ? String(item.gender) : '';
  83. return item;
  84. });
  85. return data;
  86. },
  87. });
  88. </script>