ww-cost-ledger.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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. >
  10. <template slot="menuLeft">
  11. <el-button
  12. v-if="!isSelAnnual"
  13. type="danger"
  14. size="small"
  15. icon="el-icon-delete"
  16. plain
  17. @click="handleDelete"
  18. >
  19. 删 除
  20. </el-button>
  21. <el-button
  22. v-if="!isSelAnnual"
  23. type="success"
  24. size="small"
  25. plain
  26. icon="el-icon-upload2"
  27. @click="handleImport"
  28. >
  29. 导入
  30. </el-button>
  31. <el-button
  32. type="warning"
  33. size="small"
  34. plain
  35. icon="el-icon-download"
  36. @click="handleExport"
  37. >
  38. 导出
  39. </el-button>
  40. <print-table-btn @click="printTable" />
  41. <div style="display: flex; align-items: center;">
  42. <year-month-select v-model="params.yearAndMonth"></year-month-select>
  43. </div>
  44. </template>
  45. <template slot="rqSearch">
  46. <el-date-picker
  47. v-model="params.rq"
  48. type="daterange"
  49. range-separator="至"
  50. start-placeholder="开始日期"
  51. end-placeholder="结束日期"
  52. value-format="yyyy-MM-dd"
  53. style="width: 220px !important;"
  54. >
  55. </el-date-picker>
  56. </template>
  57. <template slot="xmIdForm">
  58. <project-select placeholder="请选择项目名称" v-model="form.xmId" :params="{ yearAndMonth: params.yearAndMonth }" @change="handleProjectChange"></project-select>
  59. </template>
  60. </avue-crud>
  61. <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
  62. <WideTablePrinter
  63. ref="printWideTable"
  64. :columns="wideTableColumns"
  65. :data="data"
  66. :print-title="printTitle"
  67. :rows-per-page="30"
  68. :default-landscape="true"
  69. />
  70. </basic-container>
  71. </template>
  72. <script>
  73. import YearMonthSelect from "@/components/year-month-select";
  74. import UploadExcelDialog from "@/components/upload-excel-dialog";
  75. import projectSelect from "@/components/project-select";
  76. import {exportBlob} from "@/api/common";
  77. import {getToken} from "@/util/auth";
  78. import {downloadXls} from "@/util/util";
  79. import moment from "moment";
  80. export default window.$crudCommon({
  81. components: {
  82. YearMonthSelect,
  83. projectSelect,
  84. UploadExcelDialog,
  85. },
  86. data() {
  87. return {
  88. params: {
  89. yearAndMonth: moment(new Date()).format('YYYYMM'),
  90. },
  91. isSelAnnual: false,
  92. wideTableColumns: [],
  93. printTitle: "",
  94. };
  95. },
  96. watch: {
  97. 'params.yearAndMonth'(newVal) {
  98. if (newVal.length > 4) {
  99. // 是否勾选未全年
  100. this.isSelAnnual = false;
  101. } else {
  102. this.isSelAnnual = true;
  103. }
  104. this.page.currentPage = 1;
  105. this.getList(this.page);
  106. }
  107. },
  108. computed: {
  109. permissionList() {
  110. return {
  111. addBtn: !this.isSelAnnual,
  112. editBtn: !this.isSelAnnual,
  113. delBtn: !this.isSelAnnual,
  114. };
  115. },
  116. },
  117. methods: {
  118. loadData() {},
  119. getFormData() {
  120. return { ...this.form, yearAndMonth: this.params.yearAndMonth };
  121. },
  122. handleImport() {
  123. let excelParams = { yearAndMonth: this.params.yearAndMonth };
  124. this.$refs.uploadExcelDialog.open('/api/kd-scientific/direct-cost/import', excelParams);
  125. },
  126. uploadAfter() {
  127. this.page.currentPage = 1;
  128. this.getList(this.page);
  129. },
  130. handleExport() {
  131. exportBlob(`/api/kd-scientific/direct-cost/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  132. downloadXls(res.data, `${this.params.yearAndMonth}委托外部研发费用-基本信息台账.xlsx`);
  133. });
  134. },
  135. /**
  136. * 打印表格
  137. * @param isLandscape 是否横向打印
  138. */
  139. printTable(isLandscape) {
  140. this.wideTableColumns = this.$refs.crud.columnOption;
  141. this.printTitle = `${this.params.yearAndMonth}委托外部研发费用-基本信息台账`;
  142. this.$nextTick(() => {
  143. this.$refs.printWideTable.printTable(isLandscape);
  144. })
  145. },
  146. },
  147. }, {
  148. // 模块路径
  149. name: 'yfCostManage/basicDataSetting/wwCostLedger',
  150. res: ({ data }) => {
  151. return data;
  152. },
  153. });
  154. </script>