lookPageTable.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <!-- 查看图纸-->
  2. <template>
  3. <div class='look-page'>
  4. <div class='eq-list-top'>
  5. <Select @change='getList(true)' v-model='floor' width='160' tipPlace='top' caption='楼层 :' :selectdata='floorData'></Select>
  6. <el-input
  7. placeholder='请搜索文件名/上传文件名'
  8. size='small'
  9. @keyup.enter.native='getList(true)'
  10. @blur='getList(true)'
  11. clearable
  12. prefix-icon='el-icon-search'
  13. v-model='keywords'
  14. style='width:220px;margin-left:12px'
  15. ></el-input>
  16. </div>
  17. <el-table :data='tableData' style='width: 100%' :border='true'>
  18. <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
  19. <el-table-column prop='lb' label='楼层' width='110' show-overflow-tooltip resizable>
  20. <template slot-scope='{row}'>{{row.floor || '--'}}</template>
  21. </el-table-column>
  22. <el-table-column prop='lb' label='文件目录' width='400' show-overflow-tooltip resizable>
  23. <template slot-scope='{row}'>{{row.fullPath || '--'}}</template>
  24. </el-table-column>
  25. <el-table-column prop='sl' label='文件名' width='250' show-overflow-tooltip resizable>
  26. <template slot-scope='{row}'>{{row.pathName || '--'}}</template>
  27. </el-table-column>
  28. <el-table-column prop='assetnum' label='文件类型' width='100' show-overflow-tooltip resizable>
  29. <template slot-scope='{row}'>{{row.fileType || '--'}}</template>
  30. </el-table-column>
  31. <el-table-column prop='assetnum' label='上传文件名'>
  32. <template slot-scope='{row}'>{{row.fileName || '--'}}</template>
  33. </el-table-column>
  34. <el-table-column label='操作' width='170'>
  35. <template slot-scope='{row}'>
  36. <!-- 无fileId,设置禁用 -->
  37. <el-button type='text' size='mini' :disabled='!Boolean(row.fileId)' @click='handlePreview(row.fileId)'>
  38. <!-- <i class='el-icon-download'></i> -->
  39. 预览
  40. </el-button>
  41. <!-- 无fileUrl,设置禁用 -->
  42. <el-button type='text' size='mini' :disabled='!Boolean(row.fileUrl)' @click='handleDown(row.fileUrl)'>
  43. <!-- <i class='el-icon-download'></i> -->
  44. 下载{{row.fileSize? `(${row.fileSize})` :''}}
  45. </el-button>
  46. </template>
  47. </el-table-column>
  48. </el-table>
  49. <div class='foot'>
  50. <el-pagination
  51. background
  52. layout='prev, pager, next'
  53. :total='total'
  54. :page-size='size'
  55. :current-page='page'
  56. @prev-click='pageChanged'
  57. @next-click='pageChanged'
  58. @current-change='pageChanged'
  59. ></el-pagination>
  60. </div>
  61. </div>
  62. </template>
  63. <script>
  64. import { queryPicList } from '@/api/equipmentList.js'
  65. import { mapGetters } from 'vuex'
  66. import { random } from 'lodash'
  67. export default {
  68. data() {
  69. return {
  70. tableData: [],
  71. floorData: [],
  72. total: 0,
  73. page: 1,
  74. size: 11,
  75. keywords: '',
  76. floor: 'all',
  77. fileType: '',
  78. files: [],
  79. }
  80. },
  81. props: ['smsxt'],
  82. computed: {
  83. // floorSelect2 id: e.gname, name: e.code,使用的gname
  84. ...mapGetters(['plazaId', 'floorSelect2']),
  85. },
  86. created() {
  87. // 楼层筛选下拉菜单
  88. this.floorData = [{ id: 'all', name: '全部' }, ...this.floorSelect2]
  89. },
  90. mounted() {
  91. // 根据分辨率更改size值
  92. this.handleResize()
  93. // 查询列表
  94. this.getList()
  95. // 监听resize事件
  96. window.addEventListener('resize', this.handleResize)
  97. this.$once('hook:beforeDestroy', () => {
  98. window.removeEventListener('resize', this.handleResize)
  99. })
  100. },
  101. methods: {
  102. //序号的方法
  103. indexMethod(index) {
  104. return (this.page - 1) * this.size + index + 1
  105. },
  106. /**
  107. * 分页器选择页码
  108. */
  109. pageChanged(page, size) {
  110. this.page = page
  111. this.getList()
  112. },
  113. /**
  114. * 获取查看图纸列表
  115. * @param { Boolean } initPage 是否重置页码, true是 false 否
  116. * 更改楼层,搜索文件名时,重置页码
  117. */
  118. async getList(initPage) {
  119. // 重置页码
  120. if (initPage) {
  121. this.total = 0
  122. this.page = 1
  123. }
  124. const { plazaId, page, size, keywords, floor } = this
  125. // 专业,按照配置文件中的对应关系进行转换
  126. const Spes = __systemConf.conf.smsxt_szhyj[this.smsxt]
  127. let getParams = {
  128. page,
  129. size,
  130. ProjectId: '(YSY)CZWDGC', // plazaId,
  131. Spes,
  132. }
  133. // 楼层为全部时,上送完整楼层列表字段
  134. if (floor === 'all') {
  135. let floorArr = [],
  136. floorStr = ''
  137. this.floorSelect2.map((item) => floorArr.push(item.id))
  138. floorStr = floorArr.join(',')
  139. getParams.Floors = floorStr
  140. } else {
  141. getParams.Floors = floor
  142. }
  143. // 搜索文件名/上传文件名
  144. if (keywords) {
  145. getParams.keywords = keywords
  146. }
  147. let res = await queryPicList({ getParams })
  148. this.tableData = res?.data || []
  149. this.total = res?.count || 0
  150. },
  151. /**
  152. * 预览
  153. */
  154. handlePreview(fileId) {
  155. let url = 'http://szhyj.wanda.cn/dwg/index.html?fileId='
  156. if (['serve', 'aly_dev'].includes(process.env.NODE_ENV)) {
  157. url = 'http://39.106.116.51:8081/dwg/index.html?fileId='
  158. }
  159. window.open(url + fileId)
  160. },
  161. /**
  162. * 下载
  163. */
  164. handleDown(fileUrl) {
  165. let url = 'http://szhyj.wanda.cn/upload'
  166. if (['serve', 'aly_dev'].includes(process.env.NODE_ENV)) {
  167. url = 'http://39.106.116.51:8088/upload/'
  168. }
  169. window.open(url + fileUrl)
  170. },
  171. /**
  172. * 页面窗口变化,更新 size值
  173. * 不会实时重新渲染页面列表,只是适配不同宽度浏览器使用
  174. */
  175. handleResize() {
  176. let width = document.body.clientWidth
  177. if (width >= 1920) {
  178. this.size = 15
  179. } else if (width >= 1600) {
  180. this.size = 14
  181. } else {
  182. this.size = 13
  183. }
  184. },
  185. },
  186. }
  187. </script>
  188. <style lang="less" scoped>
  189. .look-page {
  190. .eq-list-top {
  191. display: flex;
  192. margin-bottom: 12px;
  193. }
  194. td {
  195. overflow: hidden;
  196. text-overflow: ellipsis;
  197. white-space: nowrap;
  198. }
  199. .foot {
  200. height: 32px;
  201. display: flex;
  202. justify-content: flex-end;
  203. margin-top: 28px;
  204. }
  205. }
  206. </style>