index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <div v-if="errorLogs.length>0">
  3. <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
  4. <el-button style="padding: 8px 10px;" size="small" type="danger">
  5. <svg-icon icon-class="bug" />
  6. </el-button>
  7. </el-badge>
  8. <el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body>
  9. <div slot="title">
  10. <span style="padding-right: 10px;">Error Log</span>
  11. <el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button>
  12. </div>
  13. <el-table :data="errorLogs" border>
  14. <el-table-column label="Message">
  15. <template slot-scope="{row}">
  16. <div>
  17. <span class="message-title">Msg:</span>
  18. <el-tag type="danger">
  19. {{ row.err.message }}
  20. </el-tag>
  21. </div>
  22. <br>
  23. <div>
  24. <span class="message-title" style="padding-right: 10px;">Info: </span>
  25. <el-tag type="warning">
  26. {{ row.vm.$vnode.tag }} error in {{ row.info }}
  27. </el-tag>
  28. </div>
  29. <br>
  30. <div>
  31. <span class="message-title" style="padding-right: 16px;">Url: </span>
  32. <el-tag type="success">
  33. {{ row.url }}
  34. </el-tag>
  35. </div>
  36. </template>
  37. </el-table-column>
  38. <el-table-column label="Stack">
  39. <template slot-scope="scope">
  40. {{ scope.row.err.stack }}
  41. </template>
  42. </el-table-column>
  43. </el-table>
  44. </el-dialog>
  45. </div>
  46. </template>
  47. <script>
  48. export default {
  49. name: 'ErrorLog',
  50. data() {
  51. return {
  52. dialogTableVisible: false
  53. }
  54. },
  55. computed: {
  56. errorLogs() {
  57. return this.$store.getters.errorLogs
  58. }
  59. },
  60. methods: {
  61. clearAll() {
  62. this.dialogTableVisible = false
  63. this.$store.dispatch('errorLog/clearErrorLog')
  64. }
  65. }
  66. }
  67. </script>
  68. <style scoped>
  69. .message-title {
  70. font-size: 16px;
  71. color: #333;
  72. font-weight: bold;
  73. padding-right: 8px;
  74. }
  75. </style>