日志异常详情加入代码高亮显示

package.json

@@ -59,7 +59,8 @@
     "vue-splitpane": "1.0.4",
     "vuex": "3.1.0",
     "wangeditor": ">=3.0.0",
-    "xlsx": "^0.11.16"
+    "xlsx": "^0.11.16",
+    "vue-highlightjs": "^1.3.3"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

src/main.js

@@ -11,6 +11,8 @@ import permission from './components/Permission'
 import 'mavon-editor/dist/css/index.css'
 import './assets/styles/element-variables.scss'
 import './assets/styles/index.scss' // global css
+import VueHighlightJS from 'vue-highlightjs'
+import 'highlight.js/styles/atom-one-dark.css'
 
 import App from './App'
 import store from './store'
@@ -19,6 +21,7 @@ import router from './router/routers'
 import './assets/icons' // icon
 import './router/index' // permission control
 
+Vue.use(VueHighlightJS)
 Vue.use(mavonEditor)
 Vue.use(permission)
 Vue.use(dict)

src/views/login.vue

@@ -22,7 +22,7 @@
           <img :src="codeUrl" @click="getCode">
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
         记住我
       </el-checkbox>
       <el-form-item style="width:100%;">

src/views/monitor/log/errorLog.vue

@@ -31,10 +31,8 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="0" width="85%">
+    <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="30px" width="85%">
-      <pre>
+      <pre v-highlightjs="errorInfo"><code class="java" /></pre>
-        {{ errorInfo }}
-      </pre>
     </el-dialog>
     <!--分页组件-->
     <el-pagination
@@ -84,7 +82,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
   .demo-table-expand {
     font-size: 0;
   }
@@ -101,4 +99,12 @@ export default {
     font-size: 12px;
 
   }
+  /deep/ .el-dialog__body{
+    padding: 0 20px 10px 20px !important;
+  }
+  .java.hljs{
+    color: #444;
+    background: #ffffff !important;
+    height: 630px !important;
+  }
 </style>

src/views/system/timing/log.vue

@@ -55,9 +55,7 @@
       </el-table-column>
     </el-table>
     <el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
-      <pre>
+      <pre v-highlightjs="errorInfo"><code class="java" /></pre>
-        {{ errorInfo }}
-      </pre>
     </el-dialog>
     <!--分页组件-->
     <el-pagination
@@ -106,3 +104,13 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .java.hljs{
+    color: #444;
+    background: #ffffff !important;
+  }
+  /deep/ .el-dialog__body{
+    padding: 0 20px 10px 20px !important;
+  }
+</style>

src/views/system/user/index.vue

@@ -75,7 +75,7 @@
                 />
               </el-select>
             </el-form-item>
-            <el-form-item style="margin-bottom: 0px;" label="角色" prop="roles">
+            <el-form-item style="margin-bottom: 0;" label="角色" prop="roles">
               <el-select v-model="form.roles" style="width: 450px;" multiple placeholder="请选择">
                 <el-option
                   v-for="item in roles"

src/views/tools/email/send.vue

@@ -11,7 +11,7 @@
       >
         <el-input v-model="domain.value" style="width: 31%" />
         <el-button icon="el-icon-plus" @click="addDomain" />
-        <el-button style="margin-left:0px;" icon="el-icon-minus" @click.prevent="removeDomain(domain)" />
+        <el-button style="margin-left:0;" icon="el-icon-minus" @click.prevent="removeDomain(domain)" />
       </el-form-item>
       <div ref="editor" class="editor" />
       <el-button :loading="loading" style="margin-left:1.6%;" size="medium" type="primary" @click="doSubmit">发送邮件</el-button>