hourse-details-list.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  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. <el-button
  41. v-if="!isSelAnnual"
  42. type="primary"
  43. size="small"
  44. @click="handleReadyDevData"
  45. >
  46. 直接引用
  47. </el-button>
  48. <print-table-btn @click="printTable" />
  49. <div style="display: flex; align-items: center;">
  50. <year-month-select v-model="params.yearAndMonth"></year-month-select>
  51. </div>
  52. </template>
  53. <template slot="sysmSearch">
  54. <div style="display: flex; align-items: center;">
  55. <span>使用寿命:</span>
  56. <avue-input-number v-model="extraParams.sysmMin" :min="0" style="width: 90px !important;"></avue-input-number>
  57. <span style="width: 20px; text-align: center;">至</span>
  58. <avue-input-number v-model="extraParams.sysmMax" :min="0" style="width: 90px !important;"></avue-input-number>
  59. </div>
  60. </template>
  61. <template slot="zcyzSearch">
  62. <div style="display: flex; align-items: center;">
  63. <span>资产原值:</span>
  64. <avue-input-number v-model="extraParams.zcyzMin" :min="0" style="width: 90px !important;"></avue-input-number>
  65. <span style="width: 20px; text-align: center;">至</span>
  66. <avue-input-number v-model="extraParams.zcyzMax" :min="0" style="width: 90px !important;"></avue-input-number>
  67. </div>
  68. </template>
  69. <template slot="ysysmSearch">
  70. <div style="display: flex; align-items: center;">
  71. <span>已使用月数:</span>
  72. <avue-input-number v-model="extraParams.ysysmMin" :min="0" style="width: 90px !important;"></avue-input-number>
  73. <span style="width: 20px; text-align: center;">至</span>
  74. <avue-input-number v-model="extraParams.ysysmMax" :min="0" style="width: 90px !important;"></avue-input-number>
  75. </div>
  76. </template>
  77. <template slot="yzjeSearch">
  78. <div style="display: flex; align-items: center;">
  79. <span>月折旧额(每台/套):</span>
  80. <avue-input-number v-model="extraParams.yzjeMin" :min="0" style="width: 90px !important;"></avue-input-number>
  81. <span style="width: 20px; text-align: center;">至</span>
  82. <avue-input-number v-model="extraParams.yzjeMax" :min="0" style="width: 90px !important;"></avue-input-number>
  83. </div>
  84. </template>
  85. <template slot="xmIdForm">
  86. <project-select v-model="form.xmId" :params="{ yearAndMonth: params.yearAndMonth }"></project-select>
  87. </template>
  88. <template slot="assetIdForm">
  89. <asset-select
  90. v-model="form.assetId"
  91. :params="{ yearAndMonth: params.yearAndMonth, zclb: '房屋建筑物' }"
  92. @change="handleAssetChange"
  93. ></asset-select>
  94. </template>
  95. </avue-crud>
  96. <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
  97. <WideTablePrinter
  98. ref="printWideTable"
  99. :columns="wideTableColumns"
  100. :data="data"
  101. :print-title="printTitle"
  102. :rows-per-page="30"
  103. :default-landscape="true"
  104. />
  105. </basic-container>
  106. </template>
  107. <script>
  108. import { fetchDeviceData } from "@/api/yfCostManage/basicDataSetting/houseDetailList"
  109. import YearMonthSelect from "@/components/year-month-select";
  110. import UploadExcelDialog from "@/components/upload-excel-dialog";
  111. import projectSelect from "@/components/project-select";
  112. import assetSelect from "@/components/asset-select";
  113. import moment from "moment";
  114. export default window.$crudCommon({
  115. components: {
  116. YearMonthSelect,
  117. projectSelect,
  118. assetSelect,
  119. UploadExcelDialog,
  120. },
  121. data() {
  122. return {
  123. params: {
  124. yearAndMonth: moment(new Date()).format('YYYYMM'),
  125. },
  126. isSelAnnual: false,
  127. wideTableColumns: [],
  128. printTitle: "",
  129. };
  130. },
  131. watch: {
  132. 'params.yearAndMonth'(newVal) {
  133. if (newVal.length > 4) {
  134. // 是否勾选未全年
  135. this.isSelAnnual = false;
  136. } else {
  137. this.isSelAnnual = true;
  138. }
  139. this.page.currentPage = 1;
  140. this.getList(this.page);
  141. }
  142. },
  143. computed: {
  144. permissionList() {
  145. return {
  146. addBtn: !this.isSelAnnual,
  147. editBtn: !this.isSelAnnual,
  148. delBtn: !this.isSelAnnual,
  149. };
  150. },
  151. },
  152. methods: {
  153. handleImport() {
  154. let excelParams = { yearAndMonth: this.params.yearAndMonth };
  155. this.$refs.uploadExcelDialog.open('/api/kd-scientific/asset/fangwujianzhuwu/import', excelParams);
  156. },
  157. uploadAfter() {
  158. this.page.currentPage = 1;
  159. this.getList(this.page);
  160. },
  161. handleExport() {
  162. exportBloByPost(`/api/kd-scientific/asset/fangwujianzhuwu/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  163. downloadXls(res.data, `科研房屋建筑物明细表${this.params.yearAndMonth}.xlsx`);
  164. });
  165. },
  166. /**
  167. * 打印表格
  168. * @param isLandscape 是否横向打印
  169. */
  170. printTable(isLandscape) {
  171. this.wideTableColumns = this.$refs.crud.columnOption;
  172. this.printTitle = `科研房屋建筑物明细表${this.params.yearAndMonth}`;
  173. this.$nextTick(() => {
  174. this.$refs.printWideTable.printTable(isLandscape);
  175. })
  176. },
  177. handleReadyDevData() {
  178. fetchDeviceData({ yearAndMonth: this.params.yearAndMonth}).then(res => {
  179. let data = res.data;
  180. if (data.success) {
  181. this.$message.success('引用成功!');
  182. this.page.currentPage = 1;
  183. this.getList(this.page);
  184. }
  185. });
  186. },
  187. handleAssetChange({ zcbm }) {
  188. this.form = { ...this.form, zcbm };
  189. },
  190. getFormData() {
  191. const { xmId, assetId, zcbm } = this.form;
  192. return { xmId, assetId, zcbm, yearAndMonth: this.params.yearAndMonth };
  193. },
  194. },
  195. }, {
  196. // 模块路径
  197. name: 'yfCostManage/basicDataSetting/houseDetailList',
  198. res: ({ data }) => {
  199. data.records = data.records.map(item => {
  200. item.zcmc = item.asset ? item.asset.zcmc : '';
  201. item.zclb = item.asset ? item.asset.zclb : '';
  202. item.gl = item.asset ? item.asset.gl : '';
  203. item.yt = item.asset ? item.asset.yt : '';
  204. item.kssj = item.asset ? item.asset.kssj : '';
  205. item.sysm = item.asset ? item.asset.sysm : '';
  206. item.ysysm = item.asset ? item.asset.ysysm : '';
  207. item.zcyz = item.asset ? item.asset.zcyz : '';
  208. item.jcz = item.asset ? item.asset.jcz : '';
  209. item.yzje = item.asset ? item.asset.yzje : '';
  210. item.status = item.status ? item.asset.status : '';
  211. return item;
  212. });
  213. return data;
  214. },
  215. });
  216. </script>