project-list.vue 7.0 KB

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