Selaa lähdekoodia

查看图纸初步提交

yunxing 4 vuotta sitten
vanhempi
commit
2d20eb908c
1 muutettua tiedostoa jossa 132 lisäystä ja 35 poistoa
  1. 132 35
      src/views/equipment/table/lookPageTable.vue

+ 132 - 35
src/views/equipment/table/lookPageTable.vue

@@ -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>