lookPageTable.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!-- 查看图纸-->
  2. <template>
  3. <div class='look-page'>
  4. <div class='eq-list-top'>
  5. <el-input
  6. placeholder='搜索文件名'
  7. size='small'
  8. @keyup.enter.native='getList'
  9. @blur="getList"
  10. clearable
  11. prefix-icon='el-icon-search'
  12. v-model='keyword'
  13. style='width:192px;margin-right:12px'
  14. ></el-input>
  15. <Select @change='getList' v-model='floor' width='180' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select>
  16. <!-- <Select @change='getList' v-model='fileType' width='180' tipPlace='top' caption='文件类型:' :selectdata='files'></Select> -->
  17. </div>
  18. <el-table :data='tableData' style='width: 100%' :border='true'>
  19. <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
  20. <el-table-column prop='lb' label='分类' width='300' show-overflow-tooltip resizable>
  21. <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
  22. </el-table-column>
  23. <el-table-column prop='sl' label='文件名称' show-overflow-tooltip resizable>
  24. <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
  25. </el-table-column>
  26. <el-table-column prop='assetnum' label='文件类型' width='70' show-overflow-tooltip resizable>
  27. <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
  28. </el-table-column>
  29. <el-table-column prop='assetnum' label='上传文件名'>
  30. <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
  31. </el-table-column>
  32. <el-table-column label='操作' width='70'>
  33. <template slot-scope='{row}'>
  34. <el-button type='text' size='mini' @click='handleDown(row)'>
  35. <i class='el-icon-download'></i>预览
  36. </el-button>
  37. </template>
  38. </el-table-column>
  39. </el-table>
  40. <div class='foot'>
  41. <el-pagination
  42. background
  43. layout='prev, pager, next'
  44. :total='total'
  45. :page-size='size'
  46. @prev-click='pageChanged'
  47. @next-click='pageChanged'
  48. @current-change='pageChanged'
  49. ></el-pagination>
  50. </div>
  51. </div>
  52. </template>
  53. <script>
  54. import { queryEquipmentList } from '@/api/equipmentList.js'
  55. import { mapGetters } from 'vuex'
  56. export default {
  57. data() {
  58. return {
  59. tableData: [{ index: 1 }],
  60. total: 0,
  61. currentPage: 1,
  62. size: 11,
  63. keyword: '',
  64. floor: '',
  65. fileType: '',
  66. files: []
  67. }
  68. },
  69. props: ['major'],
  70. computed: {
  71. ...mapGetters(['floorSelect'])
  72. },
  73. methods: {
  74. //序号的方法
  75. indexMethod(index) {
  76. return (this.currentPage - 1) * this.size + index + 1
  77. },
  78. pageChanged(page, size) {
  79. this.currentPage = page
  80. this.getList()
  81. },
  82. getList() {
  83. let postParams = {}
  84. let data = {
  85. page: this.currentPage,
  86. size: this.size,
  87. plazaId: this.$store.state.plazaId,
  88. major: this.major
  89. }
  90. queryEquipmentList({ data, postParams }).then(res => {
  91. //console.log(res)
  92. this.tableData = res.data.data
  93. this.total = res.data.count
  94. })
  95. },
  96. handleDown() {}
  97. },
  98. mounted() {
  99. // this.getList()
  100. }
  101. }
  102. </script>
  103. <style lang="less" scoped>
  104. .look-page {
  105. .eq-list-top {
  106. display: flex;
  107. margin-bottom: 12px;
  108. }
  109. td {
  110. overflow: hidden;
  111. text-overflow: ellipsis;
  112. white-space: nowrap;
  113. }
  114. .foot {
  115. height: 32px;
  116. display: flex;
  117. justify-content: flex-end;
  118. margin-top: 28px;
  119. }
  120. }
  121. </style>