CN-906 fix: 面包屑功能调整(部分)

src/components/layout/Header.vue

@@ -208,6 +208,7 @@ import {
   handleSpecialValue
 } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
+import _ from 'lodash'
 
 export default {
   name: 'Header',
@@ -301,41 +302,17 @@ export default {
       } */
     },
     breadcrumb () {
-      const breadcrumbMap = []
-      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-      this.$store.getters.menuList.forEach(menu => {
-        if (this.$_.isEmpty(menu.children) && menu.route) {
-          breadcrumbMap.push({
-            name: this.$t(menu.i18n),
-            path: menu.route,
-            columnName: menu.columnName,
-            columnValue: menu.columnValue
-          })
-        } else if (!this.$_.isEmpty(menu.children)) {
-          menu.children.forEach(child => {
-            breadcrumbMap.push({
-              name: child.i18n ? this.$t(child.i18n) : child.name,
-              parentName: menu.i18n ? this.$t(menu.i18n) : menu.name,
-              path: child.route,
-              columnName: child.columnName,
-              columnValue: child.columnValue
-            })
-          })
-        }
-      })
-      const breadcrumb = breadcrumbMap.find(b => this.route === b.path)
+      const breadcrumb = []
+      this.generateBreadcrumb(breadcrumb, this.$store.getters.menuList)
+
       const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
       const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
-      let result = []
+
+      let result = [...breadcrumb]
       if (fourthMenu) {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu, fourthMenu] : []
+        result = [...result, thirdMenu, fourthMenu]
       } else if (thirdMenu) {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu] : []
-      } else {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
-      }
-      if (!breadcrumb.parentName) {
-        result = result.filter((r, i) => i > 0)
+        result = [...result, thirdMenu]
       }
       return result
     },
@@ -359,6 +336,7 @@ export default {
       }
     },
     async breadcrumb (n) {
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
       if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
         if (this.dnsQtypeMapData.size === 0) {
           this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
@@ -399,6 +377,22 @@ export default {
     }
   },
   methods: {
+    generateBreadcrumb (breadcrumb, menus) {
+      const menu = menus.find(m => m.route === this.route)
+      if (menu) {
+        breadcrumb.unshift(menu.i18n ? this.$t(menu.i18n) : menu.name)
+        return true
+      } else {
+        for (let i = 0; i < menus.length; i++) {
+          if (!_.isEmpty(menus[i].children)) {
+            if (this.generateBreadcrumb(breadcrumb, menus[i].children)) {
+              breadcrumb.unshift(menus[i].i18n ? this.$t(menus[i].i18n) : menus[i].name)
+              return true
+            }
+          }
+        }
+      }
+    },
     handleClose () {
       this.showChangePin = false
     },

src/permission.js

@@ -36,11 +36,12 @@ router.beforeEach(async (to, from, next) => {
         store.commit('setRoleList', roleList)
       }
       if (to.path) {
-        if (hasMenu(store.getters.menuList, to.path)) {
+        next()
+        /* if (hasMenu(store.getters.menuList, to.path)) {
           next()
         } else {
           ElMessage.error('No access') // TODO 国际化
-        }
+        } */
       }
     }
   } else {

src/router/index.js

@@ -39,6 +39,10 @@ const routes = [
         path: '/knowledgeBase',
         component: () => import('@/views/setting/KnowledgeBase')
       },
+      {
+        path: '/knowledgeBase/form',
+        component: () => import('@/views/setting/KnowledgeBaseForm')
+      },
       {
         name: 'Administration',
         path: '/administration',

src/views/setting/KnowledgeBase.vue

@@ -10,8 +10,8 @@
         @search="search"
     >
       <template v-slot:top-tool-right>
-        <button id="roles-add" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
-                type="button" @click="add">
+        <button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10"
+                type="button" @click="jumpToCreatePage">
           <i class="cn-icon-add cn-icon"></i>
         </button>
       </template>
@@ -54,15 +54,8 @@ export default {
   data () {
     return {
       url: api.knowledgeBase,
-      tableId: 'knowledgeBaseTable', // 需要分页的table的id，用于记录每页数量
-      blankObject: { // 空白对象
-        tagName: '',
-        buildIn: '',
-        id: '',
-        tagType: '',
-        remark: '',
-        updateTime: ''
-      }
+      tableId: 'knowledgeBaseTable' // 需要分页的table的id，用于记录每页数量
+
     }
   },
   methods: {
@@ -74,6 +67,14 @@ export default {
         }
       })
     },
+    jumpToCreatePage () {
+      this.$router.push({
+        path: '/knowledgeBase/form',
+        query: {
+          t: +new Date()
+        }
+      })
+    },
     getTableData () {
       this.tools.loading = false
       this.tableData = [

src/views/setting/KnowledgeBaseForm.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-form :model="editObject" label-position="left" label-width="120px" ref="form">
+    <!--name-->
+    <el-form-item :label="$t('config.roles.name')" prop="name">
+      <el-input  maxlength="64" placeholder="" id="role-box-input-name"
+                 show-word-limit size="small" type="text" v-model="editObject.tagName"></el-input>
+    </el-form-item>
+    <el-form-item :label="$t('config.roles.name')" prop="name">
+      <el-input  maxlength="64" placeholder="" id="role-box-input-name"
+                 show-word-limit size="small" type="text" v-model="editObject.tagName"></el-input>
+    </el-form-item>
+    <el-form-item :label="$t('overall.remark')">
+      <el-input maxlength="256" show-word-limit :rows="2" size='mini' type="textarea" v-model="editObject.remark" id="role-box-input-remark"/>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
+import _ from 'lodash'
+export default {
+  name: 'CreateKnowledgeBase',
+  methods: {
+
+  },
+  setup () {
+    const { query } = useRoute()
+    const knowledgeBaseId = ref(query.id || '')
+    // 空白对象
+    const blankObject = {
+      tagName: '',
+      buildIn: '',
+      id: '',
+      tagType: '',
+      remark: '',
+      updateTime: ''
+    }
+    const editObject = ref(_.cloneDeep(blankObject))
+    return {
+      knowledgeBaseId,
+      editObject,
+      blankObject
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>