完成

Former-commit-id: 9001eac1b65eeaa0bdd4d7f563ebebbd4854c1c5 [formerly 9001eac1b65eeaa0bdd4d7f563ebebbd4854c1c5 [formerly 9001eac1b65eeaa0bdd4d7f563ebebbd4854c1c5 [formerly 9001eac1b65eeaa0bdd4d7f563ebebbd4854c1c5 [formerly 1c2b3829fe2458a1dc678aa3e3e20c069fd186e9 [formerly 87efd77bd6c9e4842534b22a90a3c57f8ad49e15]]]]]
Former-commit-id: 51b7d845391107170b6d6055fae0db9204391cab
Former-commit-id: 16c827f13aeb87f8fcbdf7c667dd60a1681833f4
Former-commit-id: a9589d815008a1c41b625905413582a2225cc811 [formerly 58f118d7086495f51c085ecfe22e046dc25a1703]
Former-commit-id: de173859d5e70870200f9eb02220b0edda9ad6d3
Former-commit-id: ec7d195132cac799568d534473a70ce9e638a21f
Former-commit-id: fb49b3ce0453630207ec44212587c3df209529a2
Former-commit-id: 76d0b5475c8b665fd9eae851ae21e4c102254b2f
Former-commit-id: fb71b68aee8dd0627982ce3c39a91017abda502e

src/components/d2-error-log-list/index.vue

@@ -1,17 +1,66 @@
 <template>
   <el-table
-    :data="log"
+    :data="logReverse"
     border
     stripe
     style="width: 100%"
     size="mini">
 
     <el-table-column type="expand">
-      <template slot-scope="props">
-        <div style="overflow: auto;">
-          <pre>{{stackBeautify(props.row.err)}}</pre>
-        </div>
-      </template>
+      <div slot-scope="props" class="d2-error-log-list__expand-group">
+        <expand-item
+          :type="props.row.type"
+          title="类型"
+          :value="props.row.type === 'log' ? '日志' : '异常'"/>
+        <expand-item
+          :type="props.row.type"
+          title="内容"
+          :value="props.row.info"/>
+        <expand-item
+          v-if="props.row.type === 'error'"
+          type="error"
+          title="报错组件"
+          :value="get(props.row.vm, '$vnode.tag', '')"/>
+        <expand-item
+          v-if="props.row.type === 'error'"
+          type="error"
+          title="错误名称"
+          :value="get(props.row.err, 'name', '')"/>
+        <expand-item
+          v-if="props.row.type === 'error'"
+          type="error"
+          title="错误信息"
+          :value="get(props.row.err, 'message', '')"/>
+        <expand-item
+          v-if="props.row.type === 'error'"
+          type="error"
+          title="错误堆栈"
+          value="见下">
+          <div style="overflow: auto;">
+            <pre>{{stackBeautify(props.row.err)}}</pre>
+          </div>
+        </expand-item>
+        <expand-item
+          :type="props.row.type"
+          title="用户名"
+          :value="get(props.row.user, 'name', '')"/>
+        <expand-item
+          :type="props.row.type"
+          title="uuid"
+          :value="props.row.uuid"/>
+        <expand-item
+          :type="props.row.type"
+          title="token"
+          :value="props.row.token"/>
+        <expand-item
+          :type="props.row.type"
+          title="页面地址"
+          :value="props.row.url"/>
+        <expand-item
+          :type="props.row.type"
+          title="时间"
+          :value="props.row.time"/>
+      </div>
     </el-table-column>
 
     <el-table-column
@@ -50,19 +99,8 @@
     </el-table-column>
 
     <el-table-column
-      label="组件"
-      width="140px"
-      :show-overflow-tooltip="true">
-      <template
-        slot-scope="scope">
-        {{scope.row.vm ? scope.row.vm.$vnode.tag : ''}}
-      </template>
-    </el-table-column>
-
-    <el-table-column
-      label="信息"
+      label="内容"
       prop="info"
-      width="200px"
       :show-overflow-tooltip="true">
     </el-table-column>
 
@@ -72,40 +110,48 @@
       :show-overflow-tooltip="true">
       <template
         slot-scope="scope">
-        {{scope.row.err ? scope.row.err.name : ''}}
+        {{get(scope.row.err, 'name', '')}}
       </template>
     </el-table-column>
 
     <el-table-column
-      label="错误信息">
+      label="错误信息"
+      width="140px">
       <template
         slot-scope="scope">
-        {{scope.row.err ? scope.row.err.message : ''}}
+        {{get(scope.row.err, 'message', '')}}
       </template>
     </el-table-column>
 
-    <el-table-column
-      label="time"
-      prop="time"
-      width="150px"
-      :show-overflow-tooltip="true">
-    </el-table-column>
-    
   </el-table>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import get from 'lodash.get'
+import ExpandItem from './components/ExpandItem'
 export default {
   name: 'd2-error-log-list',
+  components: {
+    ExpandItem
+  },
   computed: {
     ...mapState({
       log: state => state.d2admin.log
-    })
+    }),
+    logReverse () {
+      // 直接 reverse 的话有点问题
+      const res = []
+      const loglength = this.log.length
+      this.log.forEach((log, index) => {
+        res.push(this.log[loglength - 1 - index])
+      })
+      return res
+    }
   },
   methods: {
+    get,
     filterType (value, row) {
-      console.log('value', value)
       return row.type === value
     },
     stackBeautify (err) {
@@ -117,3 +163,33 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+@import '~@/assets/style/public.scss';
+.d2-error-log-list__expand-group {
+  .d2-error-log-list__expand {
+    padding-left: 20px;
+    margin-bottom: 10px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+    .d2-error-log-list__expand-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-top: 0px;
+      margin-bottom: 10px;
+    }
+    .d2-error-log-list__expand-value {
+      font-size: 12px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
+  }
+  .d2-error-log-list__expand--log {
+    border-left: 4px solid $color-info;
+  }
+  .d2-error-log-list__expand--error {
+    border-left: 4px solid $color-danger;
+  }
+}
+</style>