project-list.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  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. :before-open="handleBeforeOpen"
  9. :permission="permissionList"
  10. >
  11. <template slot="menuLeft">
  12. <el-button
  13. type="primary"
  14. size="small"
  15. icon="el-icon-plus"
  16. @click="handleCreateClick"
  17. >
  18. 创建立项项目
  19. </el-button>
  20. <el-button
  21. type="warning"
  22. size="small"
  23. plain
  24. icon="el-icon-download"
  25. @click="handleExport"
  26. >
  27. 导出
  28. </el-button>
  29. <print-table-btn @click="printTable" />
  30. <div style="display: flex; align-items: center;">
  31. <year-month-select v-model="params.yearAndMonth" :showAllYear="false"></year-month-select>
  32. </div>
  33. </template>
  34. </avue-crud>
  35. <WideTablePrinter
  36. ref="printWideTable"
  37. :columns="wideTableColumns"
  38. :data="data"
  39. :print-title="printTitle"
  40. :rows-per-page="30"
  41. :default-landscape="true"
  42. />
  43. <el-drawer
  44. :visible.sync="drawerVisible"
  45. title="项目信息"
  46. modal-append-to-body
  47. append-to-body
  48. size="1200px"
  49. destroy-on-close
  50. >
  51. <el-tabs type="border-card">
  52. <el-tab-pane label="1、项目立项" lazy>
  53. <apply-form></apply-form>
  54. </el-tab-pane>
  55. <el-tab-pane label="2、科研预算" lazy>
  56. <project-budget></project-budget>
  57. </el-tab-pane>
  58. <el-tab-pane label="3、项目实施" lazy>
  59. <implement-form></implement-form>
  60. </el-tab-pane>
  61. <el-tab-pane label="4、项目变更" lazy>
  62. <change></change>
  63. </el-tab-pane>
  64. <el-tab-pane label="5、项目结题" lazy>
  65. <accept-form></accept-form>
  66. </el-tab-pane>
  67. <el-tab-pane label="6、项目成果" lazy></el-tab-pane>
  68. <el-tab-pane label="7、委外材料" lazy></el-tab-pane>
  69. </el-tabs>
  70. </el-drawer>
  71. </basic-container>
  72. </template>
  73. <script>
  74. import {exportBloByPost} from "@/api/common";
  75. import YearMonthSelect from "@/components/year-month-select";
  76. import moment from "moment";
  77. import {getToken} from "@/util/auth";
  78. import {downloadXls} from "@/util/util";
  79. import applyForm from "./components/apply-form.vue";
  80. import projectBudget from "./components/project-budget.vue";
  81. import implementForm from './components/implement-form.vue';
  82. import change from "./change.vue";
  83. import acceptForm from "./components/accept-form.vue";
  84. export default window.$crudCommon({
  85. components: {
  86. YearMonthSelect,
  87. applyForm,
  88. projectBudget,
  89. implementForm,
  90. change,
  91. acceptForm,
  92. },
  93. data() {
  94. return {
  95. params: {
  96. yearAndMonth: moment(new Date()).format('YYYYMM'),
  97. },
  98. wideTableColumns: [],
  99. printTitle: "",
  100. drawerVisible: false,
  101. };
  102. },
  103. watch: {
  104. 'params.yearAndMonth'(newVal) {
  105. this.page.currentPage = 1;
  106. this.getList(this.page);
  107. }
  108. },
  109. methods: {
  110. handleCreateClick() {
  111. this.drawerVisible = true;
  112. },
  113. handleExport() {
  114. exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  115. downloadXls(res.data, `科研项目汇总表${this.params.yearAndMonth}.xlsx`);
  116. });
  117. },
  118. /**
  119. * 打印表格
  120. * @param isLandscape 是否横向打印
  121. */
  122. printTable(isLandscape) {
  123. this.wideTableColumns = this.$refs.crud.columnOption;
  124. this.printTitle = `科研项目汇总表${this.params.yearAndMonth}`;
  125. this.$nextTick(() => {
  126. this.$refs.printWideTable.printTable(isLandscape);
  127. })
  128. },
  129. },
  130. }, {
  131. // 模块路径
  132. name: 'projectManage/projectList',
  133. res: ({ data }) => {
  134. return data;
  135. },
  136. });
  137. </script>