拆分提测说明以及添加高亮显示

package.json

@@ -24,12 +24,14 @@
     "vue": "^2.5.2",
     "vue-bus": "^1.2.1",
     "vue-events": "^3.1.0",
+    "vue-highlightjs": "^1.3.3",
     "vue-json-editor": "^1.4.3",
     "vue-json-viewer": "^2.2.18",
     "vue-router": "^3.0.1",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "add": "^2.0.6",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^8.2.1",
@@ -61,6 +63,7 @@
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
+    "highlight.js": "^11.3.1",
     "html-webpack-plugin": "^2.30.1",
     "jest": "^22.0.4",
     "jest-serializer-vue": "^0.3.0",
@@ -86,7 +89,8 @@
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "yarn": "^1.22.17"
   },
   "engines": {
     "node": ">= 6.0.0",

src/main.js

@@ -14,6 +14,9 @@ import JsonViewer from 'vue-json-viewer'
 import bus from '../src/utils/bus'
 import directives from '@/directives'
 import * as filters from './filters' // global filters
+// 新添加高亮显示关键字(2021-12-27)
+import hljs from 'highlight.js'
+import 'highlight.js/styles/googlecode.css'
 
 // import Sortable from 'sortablejs'
 import {
@@ -61,6 +64,16 @@ import {
   Alert
 } from 'element-ui'
 
+Vue.directive('highlight', function(el) {
+  let blocks = el.querySelectorAll('pre code')
+  // 设置定时是解决它第一次页面没有样式问题
+  setTimeout(() => {
+    blocks.forEach(block => {
+      hljs.highlightBlock(block)
+    })
+  }, 200)
+})
+
 Vue.config.productionTip = false
 
 Vue.prototype.$axios = axios
@@ -119,8 +132,10 @@ Vue.use(Checkbox)
 Vue.use(CheckboxGroup)
 Vue.use(Popover)
 Vue.use(Alert)
+
 // Vue.use(Sortable)
 /* eslint-disable no-new */
+
 new Vue({
   el: '#app',
   router,

src/router/index.js

@@ -61,8 +61,6 @@ import BindAddress from '../views/yxm/BindAddress'
 import TestDescription from '../views/qa/TestDescription'
 // 新添加提测说明详情页面(2021-11-10)
 import DetailTestDescription from '../views/qa/DetailTestDescription'
-// 新添加提测说明
-// import AddTestDescription from '../views/qa/AddTestDescription'
 
 const originalPush = Router.prototype.push
 Router.prototype.push = function push(location) {

src/views/qa/TestDescription.vue

@@ -87,7 +87,7 @@
         </el-form-item>
         <!-- 服务及分支 -->
         <el-form-item label="服务及分支:">
-          <el-table :data="serviceAndBranchList" border style="width:90%;margin-top:5px;">
+          <el-table :data="serviceAndBranchList" border class="table-style">
             <el-table-column label="服务" width="310">
               <template slot-scope="scope">
                 <el-select v-model="scope.row.serviceName" filterable placeholder="请选择服务"
@@ -97,10 +97,10 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column label="分支" width="310">
+            <el-table-column label="分支">
               <template slot-scope="scope">
                 <el-select v-model="scope.row.branch" filterable placeholder="请选择分支" clearable
-                  @focus="focusevent(scope.row.serviceName)" style="width:280px">
+                  @focus="focusevent(scope.row.serviceName)" style="width:550px">
                   <el-option v-for="item2 in serviceBranchList" :key="item2.name" :label="item2.name"
                     :value="item2.name"></el-option>
                 </el-select>
@@ -111,10 +111,10 @@
                 <el-input v-model="scope.row.developer"></el-input>
               </template>
             </el-table-column>
-            <el-table-column label="操作">
+            <el-table-column label="操作" width="50">
               <template slot-scope="scope">
-                <el-button type="danger" size="mini" icon="el-icon-delete"
-                  @click="serviceAndBranchDelete(scope.$index)">删除
+                <el-button type="text" size="mini" @click="serviceAndBranchDelete(scope.$index)">
+                  <span style="color:red">删除</span>
                 </el-button>
               </template>
             </el-table-column>
@@ -124,7 +124,7 @@
         </el-form-item>
         <!-- apollo变更 -->
         <el-form-item label="apollo变更:">
-          <el-table :data="apolloList" border style="width:90%;margin-top:5px;">
+          <el-table :data="apolloList" border class="table-style">
             <el-table-column label="项目名称" width="230">
               <template slot-scope="scope">
                 <el-select v-model="scope.row.projectName" placeholder="请选择项目" filterable clearable>
@@ -134,21 +134,22 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column label="apollo Key" width="290">
+            <el-table-column label="apollo Key" width="220">
               <template slot-scope="scope">
                 <el-input v-model="scope.row.key">
                 </el-input>
               </template>
             </el-table-column>
-            <el-table-column label="apollo value" width="290">
+            <el-table-column label="apollo value">
               <template slot-scope="scope">
                 <el-input v-model="scope.row.value">
                 </el-input>
               </template>
             </el-table-column>
-            <el-table-column label="操作">
+            <el-table-column label="操作" width="50">
               <template slot-scope="scope">
-                <el-button type="danger" size="mini" icon="el-icon-delete" @click="apolloDelete(scope.$index)">删除
+                <el-button type="text" size="mini" @click="apolloDelete(scope.$index)">
+                  <span style="color:red">删除</span>
                 </el-button>
               </template>
             </el-table-column>
@@ -158,7 +159,7 @@
         </el-form-item>
         <!-- 数据库变更 -->
         <el-form-item label="数据库变更:">
-          <el-table :data="databaseList" border style="width:90%;margin-top:5px;">
+          <el-table :data="databaseList" border class="table-style">
             <el-table-column label="数据库名称" width="210">
               <template slot-scope="scope">
                 <el-select v-model="scope.row.db" placeholder="请选择" filterable clearable>
@@ -167,15 +168,16 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column label="sql" width="600px">
+            <el-table-column label="sql" clearable>
               <template slot-scope="scope">
                 <el-input v-model.trim="scope.row.sql" type="textarea" autosize>
                 </el-input>
               </template>
             </el-table-column>
-            <el-table-column label="操作">
+            <el-table-column label="操作" width="50px">
               <template slot-scope="scope">
-                <el-button type="danger" size="mini" icon="el-icon-delete" @click="databaseDelete(scope.$index)">删除
+                <el-button type="text" size="mini" @click="databaseDelete(scope.$index)">
+                  <span style="color:red">删除</span>
                 </el-button>
               </template>
             </el-table-column>
@@ -183,13 +185,13 @@
           <el-button type="primary" size="mini" plain class="el-icon-circle-plus" style="margin-top:10px"
             @click="addDatabaseListRow()">添加行</el-button>
         </el-form-item>
-        <el-form-item label="需求地址:" style="width:91%">
+        <el-form-item label="需求地址:" class="input-style">
           <el-input v-model="addTestDescriptionForm.requirement"></el-input>
         </el-form-item>
-        <el-form-item label="接口地址:" style="width:91%">
+        <el-form-item label="接口地址:" class="input-style">
           <el-input v-model="addTestDescriptionForm.api"></el-input>
         </el-form-item>
-        <el-form-item label="其它:" style="width:91%">
+        <el-form-item label="其它:" class="input-style">
           <el-input v-model="addTestDescriptionForm.scope" type="textarea"></el-input>
         </el-form-item>
       </el-form>
@@ -278,6 +280,9 @@ export default {
     this.getServiceList()
     // 获取所有项目
     this.getProjectNameList()
+    this.$bus.$on('refresh', () => {
+      this.getTestDescriptionList()
+    })
   },
   methods: {
     // 复制模板内容
@@ -395,11 +400,13 @@ export default {
       )
       this.addTestDescriptionForm.apollo = JSON.stringify(this.apolloList)
       this.addTestDescriptionForm.database = JSON.stringify(this.databaseList)
+      console.log('88888', this.addTestDescriptionForm)
       this.$refs.addTestDescriptionRef.validate((valid) => {
         if (!valid) {
           return false
         } else {
           // 编辑测试文档
+
           if (this.addTestDescriptionForm.id) {
             editTestDescription(this.addTestDescriptionForm).then((resp) => {
               if (resp.data.businessCode === '0000') {
@@ -491,7 +498,6 @@ export default {
     // 获取所有项目名称
     getProjectNameList() {
       getProjectNameList().then((resp) => {
-        console.log('444', resp)
         this.projectNameList = resp.data.data
       })
     }
@@ -505,4 +511,11 @@ export default {
 .el-select {
   margin: 0 10px 0 5px;
 }
+.table-style {
+  width: 95%;
+  margin-top: 5px;
+}
+.input-style {
+  width: 95%;
+}
 </style>