cy-person-roster.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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>
  21. <year-month-select v-model="params.yearAndMonth" :showMonth="false"></year-month-select>
  22. </div>
  23. </template>
  24. <template slot="cygsSearch">
  25. <el-input v-model="params.cygs" />
  26. </template>
  27. <template slot="situationCountSearch">
  28. <div style="display: flex; align-items: center;">
  29. <span>参研个数:</span>
  30. <avue-input-number v-model="params.situationCountMin" :min="0" style="width: 100px !important;"></avue-input-number>
  31. <span style="width: 20px; text-align: center;">至</span>
  32. <avue-input-number v-model="params.situationCountMax" :min="0" style="width: 100px !important;"></avue-input-number>
  33. </div>
  34. </template>
  35. <template v-for="col of redColKey" :slot="col" slot-scope="{ row }">
  36. <span v-if="row.total < 183" style="color: red;" :key="col">{{ row[col] }}</span>
  37. <span v-else style="color: #606266;" :key="col">{{ row[col] }}</span>
  38. </template>
  39. </avue-crud>
  40. <WideTablePrinter
  41. ref="printWideTable"
  42. v-if="wideTableColumns.length"
  43. :columns="wideTableColumns"
  44. :data="data"
  45. :print-title="printTitle"
  46. :rows-per-page="30"
  47. :default-landscape="true"
  48. />
  49. </basic-container>
  50. </template>
  51. <script>
  52. import {exportBloByPost} from "@/api/common";
  53. import YearMonthSelect from "@/components/year-month-select";
  54. import moment from "moment";
  55. import NProgress from 'nprogress';
  56. import 'nprogress/nprogress.css';
  57. import {getToken} from "@/util/auth";
  58. import {downloadXls} from "@/util/util";
  59. import Decimal from "decimal.js";
  60. export default window.$crudCommon({
  61. components: {
  62. YearMonthSelect,
  63. },
  64. data() {
  65. return {
  66. params: {
  67. yearAndMonth: moment(new Date()).format('YYYY'),
  68. },
  69. wideTableColumns: [],
  70. printTitle: "",
  71. redColKey: ['7', '8', '9', '10', '11', '12'],
  72. };
  73. },
  74. watch: {
  75. 'params.yearAndMonth'(newVal) {
  76. this.page.currentPage = 1;
  77. this.getList(this.page);
  78. }
  79. },
  80. methods: {
  81. handleExport() {
  82. this.$confirm("是否导出吗?", "提示", {
  83. confirmButtonText: "确定",
  84. cancelButtonText: "取消",
  85. type: "warning"
  86. }).then(() => {
  87. NProgress.start();
  88. exportBloByPost(`/api/kd-scientific/technician/cyryhmc/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  89. downloadXls(res.data, `${this.params.yearAndMonth}参研人员花名册.xlsx`);
  90. NProgress.done();
  91. })
  92. });
  93. },
  94. /**
  95. * 打印表格
  96. * @param isLandscape 是否横向打印
  97. */
  98. printTable(isLandscape) {
  99. this.wideTableColumns = this.$refs.crud.columnOption;
  100. this.printTitle = `${this.params.yearAndMonth}参研人员花名册`;
  101. this.$nextTick(() => {
  102. this.$refs.printWideTable.printTable(isLandscape);
  103. })
  104. },
  105. },
  106. }, {
  107. // 模块路径
  108. name: 'techPerson/cyPersonRoster',
  109. res: ({ data }) => {
  110. data.records = data.records.map(item => {
  111. let cyxmList = item.xmList.map(item => item.xmmc);
  112. item.cyxm = cyxmList.join(';');
  113. item.situationCount = item.xmList.length;
  114. item.hoursList = item.hoursList.forEach(hourItem => {
  115. item[Number(hourItem.workDate.substring(hourItem.workDate.length - 2))] = hourItem.workHours;
  116. });
  117. let total = new Decimal(0);
  118. for (let i=0; i<12; i++) {
  119. console.log(item[`${i+1}`])
  120. total = total.add(new Decimal(item[`${i+1}`] || 0));
  121. }
  122. item.total = total;
  123. return item;
  124. });
  125. return data;
  126. }
  127. });
  128. </script>