编辑页模板

src/main/resources/templates/EditViewTemplate.ftl

@@ -9,6 +9,7 @@
         </page-title>
         <div class="edit-view__content-wrapper">
             <div class="edit-view__content-section">
+                <divider />
                 <el-form :model="formData" :rules="rules" ref="form" label-width="${labelWidth}" label-position="right"
                          size="small"
                          style="max-width: 500px;">

src/main/vue/src/components/Divider.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="page-divider">
+        <slot> 基本信息</slot>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.page-divider {
+    font-size: 14px;
+    font-weight: bold;
+    color: #000000;
+    line-height: 24px;
+    padding: 16px 0;
+    position: relative;
+    border-bottom: 1px solid #f2f3f5;
+    margin-bottom: 20px;
+
+    &::before {
+        content: '';
+        width: 2px;
+        height: 16px;
+        background: @prim;
+        position: absolute;
+        left: -20px;
+        top: 20px;
+    }
+}
+</style>

src/main/vue/src/components/PageTitle.vue

@@ -4,6 +4,9 @@
             <div class="title">{{ $route.meta.title || $route.name }}</div>
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+                <el-breadcrumb-item v-for="(item, index) in showMenus" :key="index" :to="{ path: item.path }">
+                    {{ item.name }}
+                </el-breadcrumb-item>
                 <el-breadcrumb-item>{{ $route.meta.title || $route.name }}</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
@@ -13,9 +16,18 @@
     </div>
 </template>
 <script>
+import { mapState } from 'vuex';
 export default {
     data() {
         return {};
+    },
+    computed: {
+        ...mapState(['menuPath']),
+        showMenus() {
+            return [...this.menuPath].filter(item => {
+                return item.path !== this.$route.path;
+            });
+        }
     }
 };
 </script>

src/main/vue/src/main.js

@@ -15,6 +15,7 @@ import CropUpload from '@/components/CropUpload';
 import DistrictChoose from '@/components/DistrictChoose';
 import Formatters from '@/mixins/formatters';
 import PageTitle from '@/components/PageTitle';
+import Divider from '@/components/Divider';
 import 'normalize.css/normalize.css';
 import './styles/element_theme/index.css';
 import theme from '!less-vars-loader!./styles/common/theme.less';
@@ -52,6 +53,7 @@ Vue.component('rich-text', RichText);
 Vue.component('crop-upload', CropUpload);
 Vue.component('district-choose', DistrictChoose);
 Vue.component('page-title', PageTitle);
+Vue.component('divider', Divider);
 Vue.mixin(Formatters);
 Vue.prototype.$theme = theme;
 console.log(theme);

src/main/vue/src/store.js

@@ -8,7 +8,7 @@ export default new Vuex.Store({
         tableHeight: 0,
         fetchingData: false,
         userInfo: null,
-        headerHeight: 146
+        menuPath: []
     },
     mutations: {
         updateTableHeight(state, height) {
@@ -20,14 +20,8 @@ export default new Vuex.Store({
         updateUserInfo(state, userInfo) {
             state.userInfo = userInfo;
         },
-        updateHeaderHeight(state, type) {
-            if (type === 'home') {
-                state.headerHeight = 60;
-            } else if (type === 'more') {
-                state.headerHeight = 196;
-            } else {
-                state.headerHeight = 146;
-            }
+        updateMenuPath(state, menuPath) {
+            state.menuPath = menuPath;
         }
     },
     actions: {}

src/main/vue/src/styles/app.less

@@ -210,7 +210,7 @@ li {
         .edit-view__content-section {
             background: white;
             margin: 20px;
-            padding: 20px;
+            padding: 0 20px 20px;
         }
     }
 }

src/main/vue/src/views/Admin.vue

@@ -170,13 +170,24 @@ export default {
         findActiveMenu() {
             this.activeMenu = '';
             this.menuPath = [];
+            this.$store.commit('updateMenuPath', []);
             let path = this.$route.path;
             const findActiveMenu = (parents, childMenus) => {
                 childMenus.forEach(i => {
                     let parents_copy = [...parents];
-                    if (i.path === path) {
+                    console.log(i);
+                    if (i.path === path || (i.subUrl && i.subUrl.includes(path))) {
                         parents_copy.push(i);
                         this.menuPath = parents_copy.map(i => i.name);
+                        this.$store.commit(
+                            'updateMenuPath',
+                            parents_copy.map(i => {
+                                return {
+                                    name: i.name,
+                                    path: i.path
+                                };
+                            })
+                        );
                         this.activeMenu = '' + i.id;
                     } else {
                         if (i.children) {

src/main/vue/src/views/Menus.vue

@@ -57,6 +57,18 @@
                             <el-form-item prop="category" label="分类" v-if="menu.root">
                                 <el-input v-model="menu.category"></el-input>
                             </el-form-item>
+                            <el-form-item prop="subUrl" label="子页面地址" v-if="menu.root">
+                                <el-select
+                                    v-model="menu.subUrl"
+                                    multiple
+                                    filterable
+                                    allow-create
+                                    default-first-option
+                                    placeholder="请输入子页面地址"
+                                    style="width:100%"
+                                >
+                                </el-select>
+                            </el-form-item>
                             <el-form-item prop="authorities" label="权限">
                                 <el-select
                                     v-model="menu.authorities"

src/main/vue/src/views/PartnerEdit.vue

@@ -9,6 +9,7 @@
         </page-title>
         <div class="edit-view__content-wrapper">
             <div class="edit-view__content-section">
+                <divider />
                 <el-form
                     :model="formData"
                     :rules="rules"