project-list.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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. @row-dblclick="handleRowDbClick"
  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. <template slot="lxbg" slot-scope="{ row }">
  35. <span v-if="row.lxbg === '未提交'" style="color: red;">未提交</span>
  36. <span v-if="row.lxbg === '已提交'">已提交</span>
  37. </template>
  38. <template slot="jdxbg" slot-scope="{ row }">
  39. <span v-if="row.jdxbg === '未提交'" style="color: red;">未提交</span>
  40. <span v-if="row.jdxbg === '已提交'">已提交</span>
  41. </template>
  42. <template slot="ysbg" slot-scope="{ row }">
  43. <span v-if="row.ysbg === '未提交'" style="color: red;">未提交</span>
  44. <span v-if="row.ysbg === '已提交'">已提交</span>
  45. </template>
  46. </avue-crud>
  47. <WideTablePrinter
  48. ref="printWideTable"
  49. :columns="wideTableColumns"
  50. :data="data"
  51. :print-title="printTitle"
  52. :rows-per-page="30"
  53. :default-landscape="true"
  54. />
  55. <el-drawer
  56. :visible.sync="drawerVisible"
  57. title="项目信息"
  58. modal-append-to-body
  59. append-to-body
  60. size="1280px"
  61. destroy-on-close
  62. >
  63. <el-tabs type="border-card">
  64. <el-tab-pane label="1、项目立项" lazy>
  65. <apply-form :projectId="currProjectId" :operateType="operateType" @success="handleApplySuccess"></apply-form>
  66. </el-tab-pane>
  67. <el-tab-pane label="2、科研预算" lazy>
  68. <project-budget :projectId="currProjectId"></project-budget>
  69. </el-tab-pane>
  70. <el-tab-pane label="3、项目实施" lazy>
  71. <implement :projectId="currProjectId"></implement>
  72. </el-tab-pane>
  73. <el-tab-pane label="4、项目变更" lazy>
  74. <change :projectId="currProjectId"></change>
  75. </el-tab-pane>
  76. <el-tab-pane label="5、项目结题" lazy>
  77. <accept-form :projectId="currProjectId"></accept-form>
  78. </el-tab-pane>
  79. <el-tab-pane label="6、项目成果" lazy>
  80. <result-table :projectId="currProjectId"></result-table>
  81. </el-tab-pane>
  82. <el-tab-pane label="7、委外材料" lazy>
  83. <outsourcing-doc :projectId="currProjectId"></outsourcing-doc>
  84. </el-tab-pane>
  85. </el-tabs>
  86. </el-drawer>
  87. </basic-container>
  88. </template>
  89. <script>
  90. import {exportBloByPost} from "@/api/common";
  91. import YearMonthSelect from "@/components/year-month-select";
  92. import moment from "moment";
  93. import {getToken} from "@/util/auth";
  94. import {downloadXls} from "@/util/util";
  95. import applyForm from "./components/apply-form.vue";
  96. import projectBudget from "./components/project-budget.vue";
  97. import implement from './implement.vue';
  98. import change from "./change.vue";
  99. import acceptForm from "./components/accept-form.vue";
  100. import resultTable from "./result-table.vue";
  101. import outsourcingDoc from "./components/outsourcing-doc.vue";
  102. import { Row } from "element-ui";
  103. export default window.$crudCommon({
  104. components: {
  105. YearMonthSelect,
  106. applyForm,
  107. projectBudget,
  108. implement,
  109. change,
  110. acceptForm,
  111. resultTable,
  112. outsourcingDoc,
  113. },
  114. data() {
  115. return {
  116. params: {
  117. yearAndMonth: moment(new Date()).format('YYYYMM'),
  118. },
  119. wideTableColumns: [],
  120. printTitle: "",
  121. drawerVisible: false,
  122. applyType: '', // add || edit
  123. currProjectId: '',
  124. };
  125. },
  126. watch: {
  127. 'params.yearAndMonth'(newVal) {
  128. this.page.currentPage = 1;
  129. this.loadData(this.page);
  130. }
  131. },
  132. methods: {
  133. handleCreateClick() {
  134. this.operateType = 'add',
  135. this.currProjectId = '';
  136. this.drawerVisible = true;
  137. },
  138. handleRowDbClick(data) {
  139. this.operateType = 'edit';
  140. this.currProjectId = data.id;
  141. this.drawerVisible = true;
  142. },
  143. handleApplySuccess() {
  144. this.drawerVisible = false;
  145. this.loadData();
  146. },
  147. handleExport() {
  148. exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  149. downloadXls(res.data, `科研项目汇总表${this.params.yearAndMonth}.xlsx`);
  150. });
  151. },
  152. /**
  153. * 打印表格
  154. * @param isLandscape 是否横向打印
  155. */
  156. printTable(isLandscape) {
  157. this.wideTableColumns = this.$refs.crud.columnOption;
  158. this.printTitle = `科研项目汇总表${this.params.yearAndMonth}`;
  159. this.$nextTick(() => {
  160. this.$refs.printWideTable.printTable(isLandscape);
  161. })
  162. },
  163. },
  164. }, {
  165. // 模块路径
  166. name: 'projectManage/projectList',
  167. res: ({ data }) => {
  168. data.records = data.records.map(item => {
  169. item.lxbg = item.lxbgCount > 0 ? '已提交' : '未提交';
  170. item.jdxbg = item.jdxbgCount > 0 ? '已提交' : '未提交';
  171. item.ysbg = item.ysbgCount > 0 ? '已提交' : '未提交';
  172. return item;
  173. });
  174. return data;
  175. },
  176. });
  177. </script>