wbTable.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <!-- 维保 -->
  2. <template>
  3. <div class='wb-list'>
  4. <div class='eq-list-top'>
  5. <el-input
  6. placeholder='搜索设备名称、编号'
  7. size='small'
  8. @change='getList'
  9. prefix-icon='el-icon-search'
  10. v-model='keyword'
  11. style='width:192px;margin-right:12px'
  12. ></el-input>
  13. <el-input
  14. placeholder='搜索重要事项记录、描述'
  15. size='small'
  16. @change='getList'
  17. prefix-icon='el-icon-search'
  18. v-model='keyword'
  19. style='width:192px;margin-right:12px'
  20. ></el-input>
  21. <el-input
  22. placeholder='搜索任务编号'
  23. size='small'
  24. @change='getList'
  25. prefix-icon='el-icon-search'
  26. v-model='keyword'
  27. style='width:192px;margin-right:12px'
  28. ></el-input>
  29. <el-date-picker
  30. size='small'
  31. v-model='reportdate'
  32. type='date'
  33. placeholder='选择填报时间'
  34. @change='getList'
  35. style='width:180px;margin-right:12px'
  36. ></el-date-picker>
  37. <el-date-picker size='small' v-model='sjjssj' type='date' placeholder='选择验收时间' @change='getList' style='width:180px;margin-right:12px'></el-date-picker>
  38. <Select @change='getList' v-model='ischange' width='180' tipPlace='top' caption='是否更换配件信息 :' :selectdata='changeOption'></Select>
  39. </div>
  40. <el-table :data='tableData' style='width: 100%'>
  41. <el-table-column type='index' label='序号' width='80'></el-table-column>
  42. <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable>
  43. <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
  44. </el-table-column>
  45. <el-table-column prop='sbjbm' label='设备编码' show-overflow-tooltip resizable>
  46. <template slot-scope='{row}'>{{row.sbjbm || '--'}}</template>
  47. </el-table-column>
  48. <el-table-column prop='matters' label='重要事项记录' show-overflow-tooltip resizable>
  49. <template slot-scope='{row}'>{{row.matters || '--'}}</template>
  50. </el-table-column>
  51. <el-table-column prop='description' label='描述' show-overflow-tooltip resizable>
  52. <template slot-scope='{row}'>{{row.description || '--'}}</template>
  53. </el-table-column>
  54. <el-table-column label='更换配件信息' align='center'>
  55. <el-table-column prop='ischangepj' label='是/否更换'>
  56. <template slot-scope='{row}'>{{row.ischangepj || '--'}}</template>
  57. </el-table-column>
  58. <el-table-column prop='model' label='配件名称型号' show-overflow-tooltip resizable>
  59. <template slot-scope='{row}'>{{row.model || '--'}}</template>
  60. </el-table-column>
  61. <el-table-column prop='sl' label='数量'>
  62. <template slot-scope='{row}'>{{row.sl || '--'}}</template>
  63. </el-table-column>
  64. <el-table-column prop='cost' label='费用(万元)'>
  65. <template slot-scope='{row}'>{{row.cost || '--'}}</template>
  66. </el-table-column>
  67. <el-table-column prop='source' label='费用出处' show-overflow-tooltip resizable>
  68. <template slot-scope='{row}'>{{number_format(row.source,2) || '--'}}</template>
  69. </el-table-column>
  70. </el-table-column>
  71. <el-table-column prop='brand' label='现场照片'>
  72. <template slot-scope='{row}'>{{row.brand || '--'}}</template>
  73. </el-table-column>
  74. <el-table-column prop='reportdate' label='填报时间'>
  75. <template slot-scope='{row}'>{{row.reportdate?formatter(row.reportdate):'--'}}</template>
  76. </el-table-column>
  77. <el-table-column prop='sjjssj' label='验收时间'>
  78. <template slot-scope='{row}'>{{row.sjjssj?formatter(row.sjjssj): '--'}}</template>
  79. </el-table-column>
  80. <el-table-column prop='wonum' label='工单编号' show-overflow-tooltip resizable>
  81. <template slot-scope='{row}'>{{row.wonum || '--'}}</template>
  82. </el-table-column>
  83. </el-table>
  84. <div class='foot'>
  85. <el-pagination
  86. background
  87. layout='prev, pager, next'
  88. :total='total'
  89. :page-size='size'
  90. @prev-click='pageChanged'
  91. @next-click='pageChanged'
  92. @current-change='pageChanged'
  93. ></el-pagination>
  94. </div>
  95. </div>
  96. </template>
  97. <script>
  98. import { queryWbsms } from '@/api/equipmentList.js'
  99. import { mapGetters } from 'vuex'
  100. import Select from '@/components/Select/Select.vue'
  101. import { formatter, number_format } from '@/utils/format.js'
  102. export default {
  103. components: { Select },
  104. data() {
  105. return {
  106. tableData: [],
  107. total: 0,
  108. currentPage: 1,
  109. size: 10,
  110. sjjssj: '',
  111. reportdate: '',
  112. ischange: '',
  113. formatter,
  114. number_format,
  115. changeOption: [
  116. {
  117. id: '1',
  118. name: '是'
  119. },
  120. {
  121. id: ' 0',
  122. name: '否'
  123. }
  124. ],
  125. keyword: ''
  126. }
  127. },
  128. props: ['smsxt', 'major'],
  129. computed: {
  130. ...mapGetters(['floorSelect'])
  131. },
  132. methods: {
  133. pageChanged(page) {
  134. this.currentPage = page
  135. this.getList()
  136. },
  137. getList() {
  138. let getParams = {
  139. data: {
  140. smsxt: this.smsxt,
  141. // tab: this.major,
  142. // plazaId: this.$store.state.plazaId,
  143. plazaId: '1000287',
  144. page: this.currentPage,
  145. size: this.size
  146. }
  147. }
  148. queryWbsms(getParams).then(res => {
  149. this.tableData = res.data || []
  150. this.total = res.count
  151. })
  152. }
  153. },
  154. watch: {
  155. smsxt(newV, oldV) {
  156. if (newV !== oldV) {
  157. this.getList()
  158. }
  159. }
  160. },
  161. mounted() {
  162. this.getList()
  163. }
  164. }
  165. </script>
  166. <style lang="less" scoped>
  167. .wb-list {
  168. .eq-list-top {
  169. display: flex;
  170. margin-bottom: 12px;
  171. }
  172. td {
  173. overflow: hidden;
  174. text-overflow: ellipsis;
  175. white-space: nowrap;
  176. }
  177. .foot {
  178. height: 32px;
  179. display: flex;
  180. justify-content: flex-end;
  181. margin-top: 28px;
  182. }
  183. }
  184. </style>