change.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <template>
  2. <basic-container>
  3. <div style="margin-top: 6px;">
  4. <el-form :inline="true">
  5. <el-form-item label="研发项目名称">
  6. <project-select v-model="params.xmId" clearable :noDetail="true" @change="handleProjectChange"></project-select>
  7. </el-form-item>
  8. <el-form-item label="研发项目编号">
  9. {{ selProject.xmbh }}
  10. </el-form-item>
  11. </el-form>
  12. </div>
  13. <avue-crud
  14. ref="crud"
  15. v-bind="bindVal"
  16. v-on="onEvent"
  17. v-model="form"
  18. :page.sync="page"
  19. :before-open="handleBeforeOpen"
  20. :permission="permissionList"
  21. @row-dblclick="handleRowDbClick"
  22. >
  23. <template slot="menuLeft">
  24. <el-button type="primary" size="small" icon="el-icon-position" @click="handleAddChange">
  25. 发起变更
  26. </el-button>
  27. <el-button
  28. type="warning"
  29. size="small"
  30. plain
  31. icon="el-icon-download"
  32. @click="handleExport"
  33. >
  34. 导出
  35. </el-button>
  36. <print-table-btn @click="printTable" />
  37. </template>
  38. </avue-crud>
  39. <WideTablePrinter
  40. v-if="!hidePrintTable"
  41. ref="printWideTable"
  42. :columns="wideTableColumns"
  43. :data="wideTableData"
  44. :print-title="pageTitle"
  45. :rows-per-page="30"
  46. :default-landscape="true"
  47. :zoom="80"
  48. />
  49. <el-drawer
  50. v-if="drawerVisible"
  51. :title="drawerTitle"
  52. :visible.sync="drawerVisible"
  53. modal-append-to-body
  54. append-to-body
  55. size="960px"
  56. >
  57. <change-form
  58. :projectId="params.xmId"
  59. :data="changeFormData"
  60. :disabled="isFormReadonly"
  61. @success="handleChangeSucc"
  62. >
  63. </change-form>
  64. </el-drawer>
  65. </basic-container>
  66. </template>
  67. <script>
  68. import {exportBloByPost} from "@/api/common";
  69. import {getToken} from "@/util/auth";
  70. import projectSelect from "@/components/project-select";
  71. import {downloadXls} from "@/util/util";
  72. import changeForm from "./components/change-form.vue";
  73. import Decimal from "decimal.js";
  74. export default window.$crudCommon({
  75. props: {
  76. projectId: [String, Number],
  77. hidePrintTable: {
  78. type: Boolean,
  79. default: false
  80. }
  81. },
  82. components: {
  83. changeForm,
  84. projectSelect
  85. },
  86. data() {
  87. return {
  88. params: {
  89. xmId: ''
  90. },
  91. selProject: {},
  92. drawerTitle: "",
  93. drawerVisible: false,
  94. wideTableColumns: [],
  95. wideTableData: [],
  96. changeFormData: {},
  97. isFormReadonly: false,
  98. };
  99. },
  100. watch: {
  101. "params.xmId"() {
  102. this.page.currentPage = 1;
  103. this.getList(this.page);
  104. }
  105. },
  106. computed: {
  107. pageTitle() {
  108. return `${this.selProject.xmmc || ''}项目变更列表`;
  109. }
  110. },
  111. created() {
  112. this.params.xmId = this.projectId;
  113. },
  114. methods: {
  115. handleProjectChange(data) {
  116. this.selProject = data;
  117. },
  118. handleExport() {
  119. exportBloByPost(`/api/kd-scientific/xm-bgrz/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  120. downloadXls(res.data, `${this.pageTitle}.xlsx`);
  121. });
  122. },
  123. /**
  124. * 打印表格
  125. * @param isLandscape 是否横向打印
  126. */
  127. printTable(isLandscape) {
  128. this.wideTableColumns = this.printOption.column;
  129. this.wideTableData = [...this.$refs.crud.list];
  130. this.$nextTick(() => {
  131. this.$refs.printWideTable.printTable(false);
  132. })
  133. },
  134. handleAddChange() {
  135. this.drawerVisible = true;
  136. this.isFormReadonly = false;
  137. this.drawerTitle = "发起变更";
  138. this.changeFormData = {};
  139. },
  140. handleRowDbClick(data) {
  141. this.drawerVisible = true;
  142. this.isFormReadonly = true;
  143. this.drawerTitle = "变更详情";
  144. this.changeFormData = {
  145. ...data,
  146. attachment: data.attachment ? JSON.parse(data.attachment) : []
  147. };
  148. },
  149. handleChangeSucc() {
  150. this.drawerVisible = false;
  151. this.getList();
  152. },
  153. },
  154. }, {
  155. // 模块路径
  156. name: 'projectManage/change',
  157. res: ({data}) => {
  158. // 计算预算总额
  159. const calcXmAmountTotal = list => {
  160. let total = new Decimal(0);
  161. list.forEach(item => {
  162. total = total.add(new Decimal(item.amount || 0));
  163. });
  164. return total;
  165. };
  166. const formatXmysLabel = list => {
  167. let yearAmountCN = list.map(item => {
  168. return `${item.year}年${item.amount}万元`;
  169. }).join('、');
  170. let total = calcXmAmountTotal(list);
  171. return `总计:${total}万元;其中${yearAmountCN}`
  172. }
  173. data.records = data.records.map(item => {
  174. // 项目预算
  175. if (item.zdmc === 'XMYSZEMX') {
  176. // 变更前的值
  177. let bgqmx = JSON.parse(item.bgqdz);
  178. item.bgqdzJSON = bgqmx;
  179. item.bgqdz = formatXmysLabel(bgqmx);
  180. // 变更后的值
  181. let bghmx = JSON.parse(item.bghdz);
  182. item.bghdzJSON = bghmx;
  183. item.bghdz = formatXmysLabel(bghmx)
  184. } else if (item.zdmc === 'STATUS') {
  185. let projectStatusEnum = {
  186. "1" : "开展中",
  187. "2" : "已结题",
  188. "3" : "项目暂停",
  189. "4" : "项目终止",
  190. };
  191. item.bgqdz = projectStatusEnum[item.bgqdz];
  192. item.bghdz = projectStatusEnum[item.bghdz];
  193. }
  194. return item;
  195. });
  196. return data;
  197. }
  198. });
  199. </script>