RepairMaintenance.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <div class='equipment-page'>
  3. <!-- 搜索框 -->
  4. <div class='equipment-search-container'>
  5. <van-search class='equipment-search' v-model='keyword' placeholder='请输入事项类型' @search='onSearch' />
  6. <!-- TODO: 空状态 自定义图标 -->
  7. <!-- <template #action>
  8. <div class='search' @click='onSearch'>搜索</div>
  9. </template>-->
  10. <!-- </van-search> -->
  11. </div>
  12. <!-- 维保列表 -->
  13. <div class='equipment-list' v-if='list.length'>
  14. <!-- 维保 -->
  15. <div class='info-box' v-for="(data, index) in list" :key="data.workorderid || data.wonum + index" @click="handleClickDetail(data)">
  16. <div class="info-box-border">
  17. <h2 class="info-title">{{data.sbmc || '--'}}</h2>
  18. <div class='cell'>
  19. <span class='left'>设备内码:</span>
  20. <span class='right'>{{data.assetnum || '--'}}</span>
  21. </div>
  22. <div class='cell'>
  23. <span class='left'>事项类型:</span>
  24. <span class='right'>{{data.matters || '--'}}</span>
  25. </div>
  26. <div class='cell'>
  27. <span class='left'>{{'费\u3000\u3000用:'}}</span>
  28. <span class='right'>{{data.cost | formatCost}}</span>
  29. </div>
  30. <div class='cell'>
  31. <span class='left'>填报时间:</span>
  32. <span class='right'>{{data.reportdate | formatDate}}</span>
  33. </div>
  34. <div class='cell'>
  35. <span class='left'>验收时间:</span>
  36. <span class='right'>{{data.sjjssj | formatDate}}</span>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. <!-- 无数据 -->
  42. <van-empty class='m-empty' v-if='!list.length' description='暂无数据'>
  43. <template #image>
  44. <img class='no-data' src='../../assets/images/search_null.png' alt />
  45. </template>
  46. </van-empty>
  47. </div>
  48. </template>
  49. <script>
  50. /**
  51. * 设备页面(正常/或者维修或维保)
  52. * 点击设备卡片,跳转到改页面
  53. *
  54. */
  55. import Vue from 'vue'
  56. import { Search, Popup, Button, Empty } from 'vant'
  57. Vue.use(Search).use(Popup).use(Button).use(Empty)
  58. import { mapGetters } from 'vuex'
  59. import moment from 'moment'
  60. export default {
  61. props: {
  62. type: {
  63. type: String,
  64. default: 'maintenance', //默认维保
  65. },
  66. list: {
  67. type: Array,
  68. default: () => {
  69. return []
  70. },
  71. },
  72. },
  73. data() {
  74. return {
  75. keyword: '',
  76. }
  77. },
  78. computed: {
  79. ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
  80. },
  81. components: {},
  82. created() {
  83. },
  84. beforeMount() { },
  85. mounted() { },
  86. filters: {
  87. formatDate(value) {
  88. if (!value) return '--'
  89. return moment(value).format('YYYY-MM-DD HH:MM')
  90. },
  91. formatCost(value) {
  92. if (!value) return '--'
  93. return `${value} 万元`
  94. },
  95. },
  96. methods: {
  97. /**
  98. * 搜索
  99. */
  100. onSearch() {
  101. this.$emit("onSearch", this.keyword)
  102. },
  103. // 跳转详情页
  104. handleClickDetail(data) {
  105. data.type = this.type;
  106. this.$router.push({name: "MaintenanceRecordDetail", params: data});
  107. },
  108. },
  109. }
  110. </script>
  111. <style lang='less' scoped>
  112. .equipment-page {
  113. width: 100%;
  114. height: 100%;
  115. background-color: #f5f6f7;
  116. // 搜索
  117. .equipment-search-container {
  118. width: 100%;
  119. height: 55px;
  120. // background-color: #fff;
  121. text-align: center;
  122. .equipment-search {
  123. width: 80%;
  124. margin: 0 auto;
  125. background: none;
  126. }
  127. .van-search__content {
  128. background: #fff;
  129. border-radius: 50px;
  130. }
  131. }
  132. // 主要维保
  133. .equipment-list {
  134. width: 100%;
  135. min-height: 1px;
  136. max-height: calc(100% - 55px);
  137. overflow: auto;
  138. font-size: 14px;
  139. font-weight: 400;
  140. color: #333333;
  141. .info-box {
  142. width: 100%;
  143. overflow: auto;
  144. padding: 0 16px;
  145. background-color: #ffffff;
  146. .info-box-border {
  147. padding: 16px 0;
  148. border-bottom: 1px solid #e6e6e6;
  149. .info-title {
  150. font-size: 16px;
  151. color: #333333;
  152. }
  153. .cell {
  154. width: 100%;
  155. min-height: 20px;
  156. margin-top: 8px;
  157. display: flex;
  158. .left {
  159. width: 75px;
  160. color: #666;
  161. font-size: 14px;
  162. }
  163. .right {
  164. flex: 1;
  165. color: #333;
  166. font-size: 14px;
  167. }
  168. }
  169. }
  170. }
  171. }
  172. // 空状态
  173. .m-empty {
  174. // position: fixed;
  175. // top: 0;
  176. // left: 0;
  177. // width: 100%;
  178. // height: 100%;
  179. display: flex;
  180. align-items: center;
  181. /deep/ .van-empty__image {
  182. display: flex;
  183. justify-content: center;
  184. align-items: flex-end;
  185. img {
  186. width: auto;
  187. height: auto;
  188. }
  189. }
  190. }
  191. }
  192. </style>