room4.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <div class='compute-item'>
  3. <div class='compute-center'>
  4. <el-date-picker
  5. v-model='dateVal'
  6. value-format='yyyyMMdd'
  7. type='daterange'
  8. @change='getZhjl'
  9. size='small'
  10. style='margin-right:12px;width:230px'
  11. range-separator='-'
  12. start-placeholder='开始日期'
  13. end-placeholder='结束日期'
  14. placeholder='填报时间'
  15. ></el-date-picker>
  16. <el-date-picker
  17. v-model='dateVal'
  18. value-format='yyyyMMdd'
  19. type='daterange'
  20. @change='getZhjl'
  21. size='small'
  22. style='margin-right:12px;width:230px'
  23. range-separator='-'
  24. start-placeholder='开始日期'
  25. end-placeholder='结束日期'
  26. placeholder='验收时间'
  27. ></el-date-picker>
  28. <Select width='146' tipPlace='top' caption='是否更换:' :selectdata='isReplaceData' :placeholder='"请选择"' style='margin-right:12px'></Select>
  29. <el-input placeholder='搜索设备名称' size='small' prefix-icon='el-icon-search' v-model='searVal' style='width:192px;margin-right:12px'></el-input>
  30. <el-input placeholder='搜索设备编号' size='small' prefix-icon='el-icon-search' v-model='searVal' style='width:192px;margin-right:12px'></el-input>
  31. <el-input placeholder='搜索重要事项记录' size='small' prefix-icon='el-icon-search' v-model='searVal' style='width:192px;margin-right:12px'></el-input>
  32. <el-input placeholder='搜索描述工单编号' size='small' prefix-icon='el-icon-search' v-model='searVal' style='width:192px;margin-right:12px'></el-input>
  33. </div>
  34. <div class='compute-table'>
  35. <el-table
  36. v-loading='loading'
  37. :data='table4'
  38. style='width: 100%'
  39. :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
  40. >
  41. <el-table-column type='index' label='序号' width='50'></el-table-column>
  42. <el-table-column prop label='设备名称' show-overflow-tooltip resizable>
  43. <template slot-scope='{row}'>{{row.sbmc||'--'}}</template>
  44. </el-table-column>
  45. <el-table-column prop label='设备编号' show-overflow-tooltip resizable>
  46. <template slot-scope='{row}'>{{row.location||'--'}}</template>
  47. </el-table-column>
  48. <el-table-column prop label='重要事项记录' min-width='110' show-overflow-tooltip resizable>
  49. <template slot-scope='{row}'>{{row.matters||'--'}}</template>
  50. </el-table-column>
  51. <el-table-column prop label='描述' show-overflow-tooltip resizable>
  52. <template slot-scope='{row}'>{{row.description||'--'}}</template>
  53. </el-table-column>
  54. <el-table-column prop label='更换配件信息' align='center' show-overflow-tooltip resizable>
  55. <el-table-column prop label='是/否更换' show-overflow-tooltip resizable>
  56. <template slot-scope='{row}'>{{row.ismodel||'--'}}</template>
  57. </el-table-column>
  58. <el-table-column prop label='配件名称型号' min-width='110' show-overflow-tooltip resizable>
  59. <template slot-scope='{row}'>{{row.model||'--'}}</template>
  60. </el-table-column>
  61. <el-table-column prop label='数量' show-overflow-tooltip resizable>
  62. <template slot-scope='{row}'>{{row.cost||'--'}}</template>
  63. </el-table-column>
  64. <el-table-column prop label='费用(万元)' min-width='100' show-overflow-tooltip resizable>
  65. <template slot-scope='{row}'>{{row.cost||'--'}}</template>
  66. </el-table-column>
  67. <el-table-column prop label='费用出处' show-overflow-tooltip resizable>
  68. <template slot-scope='{row}'>{{row.source||'--'}}</template>
  69. </el-table-column>
  70. </el-table-column>
  71. <el-table-column prop label='现场照片' show-overflow-tooltip resizable>
  72. <template slot-scope='{row}'>{{row.pics || '--'}}</template>
  73. </el-table-column>
  74. <el-table-column prop label='填报时间' show-overflow-tooltip resizable>
  75. <template slot-scope='{row}'>{{row.reportedby?formatter(row.reportedby):'--'}}</template>
  76. </el-table-column>
  77. <el-table-column prop label='验收时间' show-overflow-tooltip resizable>
  78. <template slot-scope='{row}'>{{row.sjjssj?formatter(row.sjjssj):'--'}}</template>
  79. </el-table-column>
  80. <el-table-column prop label='工单编号' show-overflow-tooltip resizable>
  81. <template slot-scope='{row}'>{{row.wonum||'--'}}</template>
  82. </el-table-column>
  83. </el-table>
  84. </div>
  85. <div class='foot'>
  86. <el-pagination
  87. background
  88. layout='prev, pager, next'
  89. :total='total'
  90. :page-size='size'
  91. @prev-click='pageChanged'
  92. @next-click='pageChanged'
  93. @current-change='pageChanged'
  94. ></el-pagination>
  95. </div>
  96. </div>
  97. </template>
  98. <script>
  99. import Select from '@/components/Select/Select.vue'
  100. import moment from 'moment'
  101. export default {
  102. props: ['table4', 'total', 'page', 'size', 'loading'],
  103. data() {
  104. return {
  105. value1: '',
  106. searVal: '',
  107. // 是否更换配件
  108. isReplaceData: [
  109. { id: '1', name: '是' },
  110. { id: '0', name: '否' }
  111. ]
  112. }
  113. },
  114. components: { Select },
  115. methods: {
  116. formatter(date) {
  117. return moment.unix(date / 1000).format('YYYY.MM.DD')
  118. },
  119. pageChanged(page) {
  120. this.page = page
  121. this.$emit('Index3')
  122. }
  123. }
  124. }
  125. </script>
  126. <style lang="less" scoped>
  127. </style>
  128. <style lang="less">
  129. .compute-item {
  130. .compute-center {
  131. display: flex;
  132. align-items: center;
  133. margin-bottom: 12px;
  134. }
  135. .foot {
  136. height: 32px;
  137. display: flex;
  138. justify-content: flex-end;
  139. margin-top: 28px;
  140. }
  141. }
  142. </style>