|
@@ -2,37 +2,44 @@
|
|
|
<template>
|
|
|
<div class='look-page'>
|
|
|
<div class='eq-list-top'>
|
|
|
+ <Select @change='getList(true)' v-model='floor' width='160' tipPlace='top' caption='楼层 :' :selectdata='floorData'></Select>
|
|
|
<el-input
|
|
|
- placeholder='搜索文件名'
|
|
|
+ placeholder='请搜索文件名/上传文件名'
|
|
|
size='small'
|
|
|
- @keyup.enter.native='getList'
|
|
|
- @blur="getList"
|
|
|
+ @keyup.enter.native='getList(true)'
|
|
|
+ @blur='getList(true)'
|
|
|
clearable
|
|
|
prefix-icon='el-icon-search'
|
|
|
v-model='keyword'
|
|
|
- style='width:192px;margin-right:12px'
|
|
|
+ style='width:220px;margin-left:12px'
|
|
|
></el-input>
|
|
|
- <Select @change='getList' v-model='floor' width='180' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select>
|
|
|
- <!-- <Select @change='getList' v-model='fileType' width='180' tipPlace='top' caption='文件类型:' :selectdata='files'></Select> -->
|
|
|
</div>
|
|
|
<el-table :data='tableData' style='width: 100%' :border='true'>
|
|
|
<el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
|
|
|
- <el-table-column prop='lb' label='分类' width='300' show-overflow-tooltip resizable>
|
|
|
- <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
|
|
|
+ <el-table-column prop='lb' label='楼层' width='100' show-overflow-tooltip resizable>
|
|
|
+ <template slot-scope='{row}'>{{row.floor || '--'}}</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop='sl' label='文件名称' show-overflow-tooltip resizable>
|
|
|
- <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
|
|
|
+ <el-table-column prop='lb' label='文件目录' width='300' show-overflow-tooltip resizable>
|
|
|
+ <template slot-scope='{row}'>{{row.fileDir || '--'}}</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop='assetnum' label='文件类型' width='70' show-overflow-tooltip resizable>
|
|
|
- <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
|
|
|
+ <el-table-column prop='sl' label='文件名' show-overflow-tooltip resizable>
|
|
|
+ <template slot-scope='{row}'>{{row.fileName || '--'}}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='assetnum' label='文件类型' width='100' show-overflow-tooltip resizable>
|
|
|
+ <template slot-scope='{row}'>{{row.fileType || '--'}}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop='assetnum' label='上传文件名'>
|
|
|
- <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
|
|
|
+ <template slot-scope='{row}'>{{row.uploadFileName || '--'}}</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label='操作' width='70'>
|
|
|
+ <el-table-column label='操作' width='170'>
|
|
|
<template slot-scope='{row}'>
|
|
|
+ <el-button type='text' size='mini' @click='handlePreview(row)'>
|
|
|
+ <!-- <i class='el-icon-download'></i> -->
|
|
|
+ 预览
|
|
|
+ </el-button>
|
|
|
<el-button type='text' size='mini' @click='handleDown(row)'>
|
|
|
- <i class='el-icon-download'></i>预览
|
|
|
+ <!-- <i class='el-icon-download'></i> -->
|
|
|
+ 下载{{row.fileSize? `(${row.fileSize})` :''}}
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -43,6 +50,7 @@
|
|
|
layout='prev, pager, next'
|
|
|
:total='total'
|
|
|
:page-size='size'
|
|
|
+ :current-page='page'
|
|
|
@prev-click='pageChanged'
|
|
|
@next-click='pageChanged'
|
|
|
@current-change='pageChanged'
|
|
@@ -53,51 +61,140 @@
|
|
|
<script>
|
|
|
import { queryEquipmentList } from '@/api/equipmentList.js'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
+import { random } from 'lodash'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- tableData: [{ index: 1 }],
|
|
|
+ tableData: [],
|
|
|
+ floorData: [],
|
|
|
total: 0,
|
|
|
- currentPage: 1,
|
|
|
+ page: 1,
|
|
|
size: 11,
|
|
|
keyword: '',
|
|
|
- floor: '',
|
|
|
+ floor: 'all',
|
|
|
fileType: '',
|
|
|
- files: []
|
|
|
+ files: [],
|
|
|
}
|
|
|
},
|
|
|
props: ['major'],
|
|
|
computed: {
|
|
|
- ...mapGetters(['floorSelect'])
|
|
|
+ ...mapGetters(['floorSelect']),
|
|
|
},
|
|
|
methods: {
|
|
|
//序号的方法
|
|
|
indexMethod(index) {
|
|
|
- return (this.currentPage - 1) * this.size + index + 1
|
|
|
+ return (this.page - 1) * this.size + index + 1
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 分页器选择页码
|
|
|
+ */
|
|
|
pageChanged(page, size) {
|
|
|
- this.currentPage = page
|
|
|
+ this.page = page
|
|
|
this.getList()
|
|
|
},
|
|
|
- getList() {
|
|
|
+ /**
|
|
|
+ * 获取查看图纸列表
|
|
|
+ * @param { Boolean } initPage 是否重置页码, true是 false 否
|
|
|
+ * 更改楼层,搜索文件名时,重置页码
|
|
|
+ */
|
|
|
+ getList(initPage) {
|
|
|
+ // 重置页码
|
|
|
+ if (initPage) {
|
|
|
+ this.total = 0
|
|
|
+ this.page = 1
|
|
|
+ }
|
|
|
let postParams = {}
|
|
|
+ const { page, size, keyword, floor } = this
|
|
|
let data = {
|
|
|
- page: this.currentPage,
|
|
|
- size: this.size,
|
|
|
- plazaId: this.$store.state.plazaId,
|
|
|
- major: this.major
|
|
|
+ page,
|
|
|
+ size,
|
|
|
+ }
|
|
|
+ console.log(data)
|
|
|
+ // 楼层不为全部时,上送楼层字段
|
|
|
+ if (floor !== 'all') {
|
|
|
+ postParams.floor = floor
|
|
|
+ }
|
|
|
+ // 搜索文件名/上传文件名
|
|
|
+ if (keyword) {
|
|
|
+ data.keyword = `${keyword}:fileName,uploadFileName;`
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 模拟数据
|
|
|
+ */
|
|
|
+ let mockData = [
|
|
|
+ {
|
|
|
+ floor: 'F1',
|
|
|
+ fileDir: '03-MEP机电/02-EL电气',
|
|
|
+ fileId: '123',
|
|
|
+ fileName: 'F01层结构',
|
|
|
+ fileType: 'pdf',
|
|
|
+ fileSize: '99.2M',
|
|
|
+ uploadFileName: '万达广场 地库电梯井施工图.dwg',
|
|
|
+ fireUrl: 'xxxxx',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ floor: 'B2',
|
|
|
+ fileDir: 'dist/test2',
|
|
|
+ fileId: '123',
|
|
|
+ fileName: '文件2',
|
|
|
+ fileType: 'cad',
|
|
|
+ fileSize: '1.3M',
|
|
|
+ uploadFileName: '上传文件2',
|
|
|
+ fireUrl: 'xxxxx',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ initPage && (this.total = random(15, 90))
|
|
|
+ let max = this.size - 2
|
|
|
+ if (this.page === Math.ceil(this.total / this.size)) {
|
|
|
+ max = (this.total % this.size) - 2
|
|
|
+ }
|
|
|
+ for (let index = 0; index < max; index++) {
|
|
|
+ mockData.push({})
|
|
|
+ }
|
|
|
+ this.tableData = mockData
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 预览
|
|
|
+ */
|
|
|
+ handlePreview(row) {
|
|
|
+ window.open('http://szhyj.wanda.cn/dwg/index.html?fileId=123456')
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 下载
|
|
|
+ */
|
|
|
+ handleDown(row) {
|
|
|
+ window.open('http://mapapp.wanda.cn/editor/fmap/1000772_54/1000772_54.fmap')
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 页面窗口变化,更新 size值
|
|
|
+ * 不会实时重新渲染页面列表,只是适配不同宽度浏览器使用
|
|
|
+ */
|
|
|
+ handleResize() {
|
|
|
+ let width = document.body.clientWidth
|
|
|
+ if (width >= 1920) {
|
|
|
+ this.size = 15
|
|
|
+ } else if (width >= 1600) {
|
|
|
+ this.size = 14
|
|
|
+ } else {
|
|
|
+ this.size = 13
|
|
|
}
|
|
|
- queryEquipmentList({ data, postParams }).then(res => {
|
|
|
- //console.log(res)
|
|
|
- this.tableData = res.data.data
|
|
|
- this.total = res.data.count
|
|
|
- })
|
|
|
},
|
|
|
- handleDown() {}
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 楼层筛选下拉菜单
|
|
|
+ this.floorData = [{ id: 'all', name: '全部' }, ...this.floorSelect]
|
|
|
},
|
|
|
mounted() {
|
|
|
- // this.getList()
|
|
|
- }
|
|
|
+ // 根据分辨率更改size值
|
|
|
+ this.handleResize()
|
|
|
+ // 查询列表
|
|
|
+ this.getList()
|
|
|
+ // 监听resize事件
|
|
|
+ window.addEventListener('resize', this.handleResize)
|
|
|
+ this.$once('hook:beforeDestroy', () => {
|
|
|
+ window.removeEventListener('resize', this.handleResize)
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|