123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 |
- <!-- 查看图纸-->
- <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='请搜索文件名/上传文件名'
- size='small'
- @keyup.enter.native='getList(true)'
- @blur='getList(true)'
- clearable
- prefix-icon='el-icon-search'
- v-model='keywords'
- style='width:220px;margin-left:12px'
- ></el-input>
- </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='110' show-overflow-tooltip resizable>
- <template slot-scope='{row}'>{{row.floor || '--'}}</template>
- </el-table-column>
- <el-table-column prop='lb' label='文件目录' width='400' show-overflow-tooltip resizable>
- <template slot-scope='{row}'>{{row.fullPath || '--'}}</template>
- </el-table-column>
- <el-table-column prop='sl' label='文件名' width='250' show-overflow-tooltip resizable>
- <template slot-scope='{row}'>{{row.pathName || '--'}}</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.fileName || '--'}}</template>
- </el-table-column>
- <el-table-column label='操作' width='170'>
- <template slot-scope='{row}'>
- <!-- 无fileId,设置禁用 -->
- <el-button type='text' size='mini' :disabled='!Boolean(row.fileId)' @click='handlePreview(row.fileId)'>
- <!-- <i class='el-icon-download'></i> -->
- 预览
- </el-button>
- <!-- 无fileUrl,设置禁用 -->
- <el-button type='text' size='mini' :disabled='!Boolean(row.fileUrl)' @click='handleDown(row.fileUrl)'>
- <!-- <i class='el-icon-download'></i> -->
- 下载{{row.fileSize? `(${row.fileSize})` :''}}
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- <div class='foot'>
- <el-pagination
- background
- layout='prev, pager, next'
- :total='total'
- :page-size='size'
- :current-page='page'
- @prev-click='pageChanged'
- @next-click='pageChanged'
- @current-change='pageChanged'
- ></el-pagination>
- </div>
- </div>
- </template>
- <script>
- import { queryPicList } from '@/api/equipmentList.js'
- import { mapGetters } from 'vuex'
- import { random } from 'lodash'
- export default {
- data() {
- return {
- tableData: [],
- floorData: [],
- total: 0,
- page: 1,
- size: 11,
- keywords: '',
- floor: 'all',
- fileType: '',
- files: [],
- }
- },
- props: ['smsxt'],
- computed: {
- // floorSelect2 id: e.gname, name: e.code,使用的gname
- ...mapGetters(['plazaId', 'floorSelect2']),
- },
- created() {
- // 楼层筛选下拉菜单
- this.floorData = [{ id: 'all', name: '全部' }, ...this.floorSelect2]
- },
- mounted() {
- // 根据分辨率更改size值
- this.handleResize()
- // 查询列表
- this.getList()
- // 监听resize事件
- window.addEventListener('resize', this.handleResize)
- this.$once('hook:beforeDestroy', () => {
- window.removeEventListener('resize', this.handleResize)
- })
- },
- methods: {
- //序号的方法
- indexMethod(index) {
- return (this.page - 1) * this.size + index + 1
- },
- /**
- * 分页器选择页码
- */
- pageChanged(page, size) {
- this.page = page
- this.getList()
- },
- /**
- * 获取查看图纸列表
- * @param { Boolean } initPage 是否重置页码, true是 false 否
- * 更改楼层,搜索文件名时,重置页码
- */
- async getList(initPage) {
- // 重置页码
- if (initPage) {
- this.total = 0
- this.page = 1
- }
- const { plazaId, page, size, keywords, floor } = this
- // 专业,按照配置文件中的对应关系进行转换
- const Spes = __systemConf.conf.smsxt_szhyj[this.smsxt]
- let getParams = {
- page,
- size,
- ProjectId: '(YSY)CZWDGC', // plazaId,
- Spes,
- }
- // 楼层为全部时,上送完整楼层列表字段
- if (floor === 'all') {
- let floorArr = [],
- floorStr = ''
- this.floorSelect2.map((item) => floorArr.push(item.id))
- floorStr = floorArr.join(',')
- getParams.Floors = floorStr
- } else {
- getParams.Floors = floor
- }
- // 搜索文件名/上传文件名
- if (keywords) {
- getParams.keywords = keywords
- }
- let res = await queryPicList({ getParams })
- this.tableData = res?.data || []
- this.total = res?.count || 0
- },
- /**
- * 预览
- */
- handlePreview(fileId) {
- let url = 'http://szhyj.wanda.cn/dwg/index.html?fileId='
- if (['serve', 'aly_dev'].includes(process.env.NODE_ENV)) {
- url = 'http://39.106.116.51:8081/dwg/index.html?fileId='
- }
- window.open(url + fileId)
- },
- /**
- * 下载
- */
- handleDown(fileUrl) {
- let url = 'http://szhyj.wanda.cn/upload'
- if (['serve', 'aly_dev'].includes(process.env.NODE_ENV)) {
- url = 'http://39.106.116.51:8088/upload/'
- }
- window.open(url + fileUrl)
- },
- /**
- * 页面窗口变化,更新 size值
- * 不会实时重新渲染页面列表,只是适配不同宽度浏览器使用
- */
- handleResize() {
- let width = document.body.clientWidth
- if (width >= 1920) {
- this.size = 15
- } else if (width >= 1600) {
- this.size = 14
- } else {
- this.size = 13
- }
- },
- },
- }
- </script>
- <style lang="less" scoped>
- .look-page {
- .eq-list-top {
- display: flex;
- margin-bottom: 12px;
- }
- td {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .foot {
- height: 32px;
- display: flex;
- justify-content: flex-end;
- margin-top: 28px;
- }
- }
- </style>
|