yf-cost-bill.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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. :permission="permissionList"
  9. :summary-method="summaryMethod"
  10. >
  11. <template slot="menuLeft">
  12. <el-button
  13. v-if="!isSelAnnual"
  14. type="danger"
  15. size="small"
  16. icon="el-icon-delete"
  17. plain
  18. @click="handleDelete"
  19. >
  20. 删 除
  21. </el-button>
  22. <el-button
  23. v-if="!isSelAnnual"
  24. type="success"
  25. size="small"
  26. plain
  27. icon="el-icon-upload2"
  28. @click="handleImport"
  29. >
  30. 导入
  31. </el-button>
  32. <el-button
  33. type="warning"
  34. size="small"
  35. plain
  36. icon="el-icon-download"
  37. @click="handleExport"
  38. >
  39. 导出
  40. </el-button>
  41. <print-table-btn @click="printTable" />
  42. </template>
  43. <template slot="body">
  44. <h3 class="page-title">{{ pageTitle }}</h3>
  45. <year-month-select v-model="params.yearAndMonth"></year-month-select>
  46. </template>
  47. <template slot="xmIdForm">
  48. <project-select placeholder="请选择项目名称" v-model="form.xmId" :params="{ yearAndMonth: params.yearAndMonth }" @change="handleProjectChange"></project-select>
  49. </template>
  50. <template slot="amountSearch">
  51. <div style="display: flex; align-items: center;">
  52. <span>金额(元):</span>
  53. <avue-input-number v-model="extraParams.amountMin" :min="0" style="width: 140px !important;"></avue-input-number>
  54. <span style="width: 20px; text-align: center;">至</span>
  55. <avue-input-number v-model="extraParams.amountMax" :min="0" style="width: 140px !important;"></avue-input-number>
  56. </div>
  57. </template>
  58. </avue-crud>
  59. <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
  60. <WideTablePrinter
  61. ref="printWideTable"
  62. :columns="wideTableColumns"
  63. :data="wideTableData"
  64. :print-title="pageTitle"
  65. :rows-per-page="30"
  66. :default-landscape="true"
  67. :zoom="90"
  68. >
  69. <template slot="tableHeader">
  70. <div>
  71. <span style="margin-right: 200px;">科目:研发支出</span>
  72. <span style="margin-right: 200px;">{{ `期间:${params.yearAndMonth}` }}</span>
  73. <span style="margin-right: 200px;">币种:人民币</span>
  74. </div>
  75. </template>
  76. </WideTablePrinter>
  77. </basic-container>
  78. </template>
  79. <script>
  80. import { getList as getCompSubjectList } from "@/api/basicResource/compSubjectSetting";
  81. import YearMonthSelect from "@/components/year-month-select";
  82. import UploadExcelDialog from "@/components/upload-excel-dialog";
  83. import projectSelect from "@/components/project-select";
  84. import {exportBlob} from "@/api/common";
  85. import {getToken} from "@/util/auth";
  86. import {downloadXls, summaryMethod} from "@/util/util";
  87. import moment from "moment";
  88. import { mapGetters } from "vuex";
  89. export default window.$crudCommon({
  90. components: {
  91. YearMonthSelect,
  92. projectSelect,
  93. UploadExcelDialog,
  94. },
  95. data() {
  96. return {
  97. params: {
  98. yearAndMonth: "",
  99. },
  100. isSelAnnual: false,
  101. wideTableColumns: [],
  102. wideTableData: [],
  103. };
  104. },
  105. watch: {
  106. 'params.yearAndMonth'(newVal) {
  107. if (newVal.length > 4) {
  108. // 是否勾选未全年
  109. this.isSelAnnual = false;
  110. } else {
  111. this.isSelAnnual = true;
  112. }
  113. this.page.currentPage = 1;
  114. this.getList(this.page);
  115. },
  116. },
  117. computed: {
  118. ...mapGetters(['tag']),
  119. permissionList() {
  120. return {
  121. addBtn: !this.isSelAnnual,
  122. editBtn: !this.isSelAnnual,
  123. delBtn: !this.isSelAnnual,
  124. };
  125. },
  126. pageTitle() {
  127. let yearAndMonthCN = '';
  128. if (this.params.yearAndMonth) {
  129. let formatTemp = this.params.yearAndMonth.length <= 4 ? 'yyyy年' : 'yyyy年MM月'
  130. yearAndMonthCN = moment(this.params.yearAndMonth).format(formatTemp)
  131. }
  132. let tagName = this.tag.label.replace(/[0-9]./, '');
  133. return `${yearAndMonthCN}${tagName}`;
  134. }
  135. },
  136. mounted() {
  137. this.getSubjectList();
  138. },
  139. methods: {
  140. // 合计
  141. summaryMethod({ columns, data }) {
  142. return summaryMethod(columns, data, this.option.sumColumnList, 'esubjectName');
  143. },
  144. getSubjectList() {
  145. getCompSubjectList(1, 99999).then(res => {
  146. this.loading = false;
  147. if (res.data.code == 200) {
  148. const column = this.findObject(this.option.column, "esubjectId");
  149. column.dicData = res.data.data.records;
  150. }
  151. })
  152. },
  153. handleImport() {
  154. let excelParams = { yearAndMonth: this.params.yearAndMonth };
  155. this.$refs.uploadExcelDialog.open('/api/kd-scientific/xm/cost/details/import', excelParams);
  156. },
  157. uploadAfter() {
  158. this.page.currentPage = 1;
  159. this.getList(this.page);
  160. },
  161. handleExport() {
  162. exportBlob(`/api/kd-scientific/xm/cost/details/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  163. downloadXls(res.data, `${this.pageTitle}.xlsx`);
  164. });
  165. },
  166. /**
  167. * 打印表格
  168. * @param isLandscape 是否横向打印
  169. */
  170. printTable(isLandscape) {
  171. this.wideTableColumns = this.printOption.column;
  172. this.wideTableData = [...this.$refs.crud.list];
  173. if (this.wideTableData.length) {
  174. this.wideTableData.push(this.$refs.crud.sumsList);
  175. }
  176. this.$nextTick(() => {
  177. this.$refs.printWideTable.printTable(isLandscape);
  178. })
  179. },
  180. getFormData() {
  181. const column = this.findObject(this.option.column, "esubjectId");
  182. let currSubjectObj = column.dicData.find(item => item.id == this.form.esubjectId);
  183. return {
  184. ...this.form,
  185. esubjectName: currSubjectObj ? currSubjectObj.name : '',
  186. yearAndMonth: this.params.yearAndMonth,
  187. esubjectCode: currSubjectObj ? currSubjectObj.code : ''
  188. };
  189. },
  190. },
  191. }, {
  192. // 模块路径
  193. name: 'yfCostManage/basicDataSetting/yfCostBill',
  194. res: ({ data }) => {
  195. return data;
  196. },
  197. });
  198. </script>