hourse-details-list.vue 7.6 KB

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