index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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. :span-method="spanMethod"
  9. >
  10. <template slot="menuLeft">
  11. <el-button
  12. type="warning"
  13. size="small"
  14. plain
  15. icon="el-icon-download"
  16. @click="handleExport"
  17. >
  18. 导出
  19. </el-button>
  20. <div>
  21. <year-month-select v-model="params.yearAndMonth"></year-month-select>
  22. </div>
  23. </template>
  24. </avue-crud>
  25. </basic-container>
  26. </template>
  27. <script>
  28. import {exportBloByPost} from "@/api/common";
  29. import YearMonthSelect from "@/components/year-month-select";
  30. import moment from "moment";
  31. import NProgress from 'nprogress';
  32. import 'nprogress/nprogress.css';
  33. import {getToken} from "@/util/auth";
  34. import {downloadXls} from "@/util/util";
  35. export default window.$crudCommon({
  36. components: {
  37. YearMonthSelect,
  38. },
  39. data() {
  40. return {
  41. params: {
  42. yearAndMonth: moment(new Date()).format('YYYYMM'),
  43. spanArr: [
  44. { prop: 'projectName', span: [] },
  45. ]
  46. },
  47. };
  48. },
  49. watch: {
  50. 'params.yearAndMonth'(newVal) {
  51. this.page.currentPage = 1;
  52. this.getList(this.page);
  53. }
  54. },
  55. methods: {
  56. getList() {
  57. this.data = [{
  58. projectName: '项目1'
  59. }, {
  60. projectName: '项目1'
  61. }, {
  62. projectName: '项目1'
  63. }, {
  64. projectName: '项目2'
  65. }, {
  66. projectName: '项目3'
  67. }];
  68. },
  69. spanMethod({ row, column, rowIndex, columnIndex }) {
  70. let fields = ["projectName"];
  71. let cellValue = row[column.property];
  72. if (cellValue && fields.includes(column.property)) {
  73. let prevRow = this.data[rowIndex - 1];
  74. let nextRow = this.data[rowIndex + 1];
  75. if (prevRow && prevRow[column.property] === cellValue) {
  76. return { rowspan: 0, colspan: 0 };
  77. } else {
  78. let countRowspan = 1;
  79. while (nextRow && nextRow[column.property] === cellValue) {
  80. nextRow = this.data[++countRowspan + rowIndex];
  81. }
  82. if (countRowspan > 1) {
  83. row.hbFlag = true;
  84. return { rowspan: countRowspan, colspan: 1 };
  85. }
  86. }
  87. }
  88. },
  89. handleExport() {
  90. this.$confirm("是否导出吗?", "提示", {
  91. confirmButtonText: "确定",
  92. cancelButtonText: "取消",
  93. type: "warning"
  94. }).then(() => {
  95. NProgress.start();
  96. exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  97. downloadXls(res.data, `项目参研人员汇总表${this.params.yearAndMonth}.xlsx`);
  98. NProgress.done();
  99. })
  100. });
  101. },
  102. },
  103. }, {
  104. // 模块路径
  105. name: 'cyPersonSumList'
  106. });
  107. </script>