首页预览

src/layouts/footer/index.vue

@@ -9,7 +9,7 @@
     <div class="footer">
         <div class="info">
             <span class="m-r-20">客服邮箱：service@huorantech.cn</span>
-            <span>联系人：林经理 18818574533</span>
+            <span>联系人：孙经理 18565785395</span>
         </div>
         <div class="copyright">
             <span>© Copyright 2021 Dataforward 数据前瞻</span>

src/pages/index/list/index.vue

@@ -157,6 +157,25 @@
                 </div>
             </div>
         </template>
+        <el-drawer
+            custom-class="preview-dia"
+            size="950px"
+            :with-header="false"
+            :visible.sync="previewVisible">
+            <div class="flex j-between">
+                <div class="l-title">
+                <img src="@/assets/img/data3.png" alt="">
+                数据预览
+                </div>
+                <img width="52" src="@/assets/img/close.png" style="cursor: pointer" alt="" @click="previewVisible = false">
+            </div>
+            <div class="preview-wrap">
+                <el-table :data="previewData" class="table" id="previewTable" stripe header-align="center" row-key="id">
+                    <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
+                    <el-table-column v-for="(item,index) in previewHead" :prop="item.field" :key="index" :label="item.comment" align="center"></el-table-column>
+                </el-table>
+            </div>
+        </el-drawer>
     </div>
 </template>
 
@@ -176,7 +195,10 @@ export default {
             pageSize: 10,
             total: 0,
             hotData: [],
-            active: ''
+            active: '',
+            previewVisible: false,
+            previewHead: [],
+            previewData: []
         }
     },
     computed: {
@@ -226,7 +248,31 @@ export default {
             this.getData()
         },
         preview(row) {
-            this.$router.push(`/data?preview=true&id=${row.id}&name=${row.name}`)
+            this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
+                // 查询次数+1
+                this.$post(this.api.saveRecord, {
+                    tableId: row.id,
+                    type: 2,
+                }).then(res => { }).catch(res => { })
+
+                let comment = res.comment
+                let previewHead = []
+                comment.map(n => {
+                // id和操作时间不用显示
+                n.field != 'id' && n.field != 'operation_time' && previewHead.push(n)
+                })
+                this.previewHead = previewHead
+
+                let data = res.data
+                data.map(n => {
+                for (let i in n) {
+                    // 如果是以+0000结尾的,就表明这个是时间,则转化为正常的时间格式
+                    if (typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = util.formatDate('yyyy-MM-dd hh:mm:ss', new Date(n[i]))
+                }
+                })
+                this.previewData = data
+                this.previewVisible = true
+            }).catch(res => { })
         },
         download(row){
             // 登录了才能下载,否则直接跳转到登录页
@@ -508,4 +554,11 @@ export default {
             }
         }
     }
+    /deep/.preview-dia{
+      padding: 20px;
+      .preview-wrap{
+        height: calc(100vh - 80px);
+        overflow: auto;
+      }
+    }
 </style>