日志改为使用表格展示

Former-commit-id: 4ac4f563a31922a4b52ae88ad6d5637c3c9cd9e4 [formerly 4ac4f563a31922a4b52ae88ad6d5637c3c9cd9e4 [formerly 4ac4f563a31922a4b52ae88ad6d5637c3c9cd9e4 [formerly 4ac4f563a31922a4b52ae88ad6d5637c3c9cd9e4 [formerly 6eaf7f1696013d04d62331e44b247409cc2d4ebe [formerly 4e1c4ad157f4ad09a37f305c549ceaa692373fd1]]]]]
Former-commit-id: db738b0352d4d8722fa76538a090676a663abd5d
Former-commit-id: 0cc00ff0f436c2dc505cc29283a70afda48d0e13
Former-commit-id: 92faa11b7ff81af8d2cd22c003ec86ca7bb3d530 [formerly 20db4e2893d54c1c9e5822cdf407fb9e459410e1]
Former-commit-id: 476c6b23696a4492469a742de2f586f45f67fd1e
Former-commit-id: 0f772cebc6bf6d6b0ea6792c5d2a47c116ac0fad
Former-commit-id: 05661be17dfa5747c0be88c0d400a4906fbac365
Former-commit-id: 5d8d8bddbf40c35e706382f972a14b98f7ced909
Former-commit-id: 57baa8fdae4a99071521527a3463025d86ca35b6

src/views/system/log/index.vue

@@ -1,6 +1,21 @@
 <template>
   <d2-container>
-    <template slot="header">
+    <el-table
+      :data="log"
+      size="mini"
+      style="width: 100%"
+      stripe>
+      <el-table-column
+        prop="time"
+        label="Time"
+        width="140">
+      </el-table-column>
+      <el-table-column
+        prop="message"
+        label="Message">
+      </el-table-column>
+    </el-table>
+    <template slot="footer">
       <el-button
         type="primary"
         size="mini"
@@ -10,28 +25,16 @@
         Upload {{log.length}} log data
       </el-button>
     </template>
-    <section class="page">
-      <p
-        class="log"
-        v-for="(logItem, logIndex) in log"
-        :key="logIndex">
-        <span class="log-time">{{logItem.time}}</span>
-        <span
-          class="log-message"
-          :class="`log-message--${logItem.type}`">
-          {{logItem.message}}
-        </span>
-        <span class="log-url"> - {{logItem.meta.url}}</span>
-      </p>
-    </section>
   </d2-container>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import { get } from 'lodash'
 export default {
   data () {
     return {
+      get,
       uploading: false
     }
   },
@@ -41,6 +44,11 @@ export default {
     ])
   },
   methods: {
+    handleLogConsole (log) {
+      // 打印一条日志的所有信息到控制台
+      console.log(log)
+    },
+    // 日志上传
     handleUpload () {
       this.uploading = true
       this.$notify({
@@ -60,46 +68,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.page {
-  .log {
-    margin: 4px -4px;
-    padding: 4px;
-    border-radius: 2px;
-    font-size: 14px;
-    &:hover {
-      background-color: $color-bg;
-    }
-    &:first-child {
-      margin-top: 0px;
-    }
-    &:last-child {
-      margin-bottom: 0px;
-    }
-    .log-time {
-      color: $color-text-main;
-      margin-right: 10px;
-    }
-    .log-url {
-      color: $color-text-placehoder;
-    }
-    .log-message {
-      font-weight: bold;
-      color: $color-text-normal;
-      &.log-message--success {
-        color: $color-success;
-      }
-      &.log-message--warning {
-        color: $color-warning;
-      }
-      &.log-message--info {
-        color: $color-info;
-      }
-      &.log-message--danger {
-        color: $color-danger;
-      }
-    }
-  }
-}
-</style>