yf-cost-summary-list.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <basic-container>
  3. <avue-crud
  4. v-bind="bindVal"
  5. v-on="onEvent"
  6. v-model="form"
  7. :summaryMethod="summaryMethod"
  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. </template>
  20. <template slot="body">
  21. <h3 class="page-title">{{ pageTitle }}</h3>
  22. <year-month-select v-model="params.yearAndMonth" :showAllYear="false"></year-month-select>
  23. </template>
  24. </avue-crud>
  25. <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
  26. </basic-container>
  27. </template>
  28. <script>
  29. import YearMonthSelect from "@/components/year-month-select";
  30. import {exportBloByPost} from "@/api/common";
  31. import {getToken} from "@/util/auth";
  32. import {downloadXls, summaryMethod} from "@/util/util";
  33. import moment from "moment";
  34. import { mapGetters } from "vuex";
  35. export default window.$crudCommon({
  36. components: {
  37. YearMonthSelect,
  38. },
  39. data() {
  40. return {
  41. params: {
  42. yearAndMonth: "",
  43. },
  44. defaultColumns: [],
  45. wideTableColumns: [],
  46. printTitle: "",
  47. };
  48. },
  49. watch: {
  50. 'params.yearAndMonth'() {
  51. this.getList();
  52. }
  53. },
  54. computed: {
  55. ...mapGetters(['tag']),
  56. pageTitle() {
  57. let yearAndMonthCN = this.params.yearAndMonth ? moment(this.params.yearAndMonth).format("yyyy年MM月") : '';
  58. return `${yearAndMonthCN}${this.tag.label}`.replace(/每月/g, '');
  59. }
  60. },
  61. methods: {
  62. // 合计
  63. summaryMethod({ columns, data }) {
  64. return summaryMethod(columns, data, this.option.sumColumnList, 'yearAndMonth');
  65. },
  66. loadData() {
  67. this.loading = true;
  68. this.api[this.option.list || 'getList'](this.getSearchParams()).then(res => {
  69. if (res.data.code == 200) {
  70. this.data = res.data.data;
  71. }
  72. this.loading = false;
  73. });
  74. },
  75. handleExport() {
  76. exportBloByPost(`/api/kd-scientific/cost/summary/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  77. downloadXls(res.data, `${this.pageTitle}.xlsx`);
  78. });
  79. },
  80. },
  81. }, {
  82. // 模块路径
  83. name: 'yfCostManage/yfCostStatistics/yfCostSummaryList',
  84. });
  85. </script>