重构组件

src/Aside.vue

+<template>
+  <div class="ezj-aside" :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EzjAside',
+  props: {
+    width: { String, default: '295px' }
+  },
+  computed: {
+    style() {
+      return {
+        width: this.width
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ezj-aside {
+  width: 295px;
+}
+</style>

src/Container.vue

+<template>
+  <div class="ezj-container">
+    <ezj-aside>
+      <ezj-menu :menus="menus" @select="onSelect"></ezj-menu>
+    </ezj-aside>
+    <ezj-main :title="currentPage.title" v-if="currentPage" :key="activeId">
+      <slot>
+        <ezj-form-pane v-bind="currentPage" v-if="currentPage.form"></ezj-form-pane>
+      </slot>
+    </ezj-main>
+  </div>
+</template>
+
+<script>
+import EzjAside from './Aside'
+import EzjMenu from './Menu'
+import EzjMain from './Main'
+import EzjFormPane from './FormPane'
+
+export default {
+  name: 'EzjContainer',
+  props: {
+    menus: {
+      type: Array,
+      required: true,
+      default() {
+        return []
+      }
+    },
+    defaultActive: { type: String }
+  },
+  components: { EzjAside, EzjMenu, EzjMain, EzjFormPane },
+  data() {
+    return {
+      activeId: this.defaultActive
+    }
+  },
+  computed: {
+    currentPage() {
+      let found = null
+      for (let i = 0; i < this.menus.length; i++) {
+        let menu = this.menus[i]
+        if (menu.group) {
+          found = this.find(menu.group.submenus, this.activeId)
+          if (found) {
+            break
+          }
+        } else if (menu.submenus) {
+          found = this.find(menu.submenus, this.activeId)
+          if (found) {
+            break
+          }
+        } else {
+          found = this.find(this.menus, this.activeId)
+          if (found) {
+            break
+          }
+        }
+      }
+      return found
+    }
+  },
+  methods: {
+    find(arr, id) {
+      return arr.find(item => item.id === id)
+    },
+    onSelect(id) {
+      this.activeId = id
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ezj-container {
+  display: flex;
+}
+</style>

src/FormPane.vue

@@ -72,9 +72,12 @@ export default {
     },
     // 更新
     updateData() {
-      const { action, data = {} } = this.update
+      const { action, data = {}, callback } = this.update
       axios.post(action, { data }).then(res => {
         console.log(res)
+        if (callback) {
+          callback(res.data)
+        }
       })
     },
     onSubmit() {}

src/Main.vue

+<template>
+  <div class="ezj-main">
+    <div class="ezj-main__hd">
+      <slot name="header">
+        <h1 class="ezj-main__title">{{title}}</h1>
+      </slot>
+    </div>
+    <div class="ezj-main__bd">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ezj-main {
+  flex: 1;
+  margin: 0 40px;
+}
+.ezj-main__title {
+  font-size: 24px;
+  color: #000;
+}
+</style>

src/Menu.vue

+<template>
+  <div class="ezj-menu">
+    <template v-for="menu in menus">
+      <div
+        :class="{'ezj-menu__item': true,'has-shadow': menu.hasShadow, 'is-active': menu.isActive}"
+        :key="menu.id"
+      >
+        <div class="ezj-menu__title" @click="handleClick(menu.id)">{{menu.title}}</div>
+        <!-- 分组 -->
+        <div class="ezj-menu-group" v-if="menu.group">
+          <div class="ezj-menu-group__title">{{menu.group.title}}</div>
+          <div class="ezj-submenu" v-if="menu.group.submenus" :key="menu.group.title">
+            <template v-for="submenu in menu.group.submenus">
+              <div
+                class="ezj-submenu__item"
+                :key="submenu.id"
+                @click="handleClick(submenu.id)"
+              >{{submenu.title}}</div>
+            </template>
+          </div>
+        </div>
+        <!-- 子菜单 -->
+        <div class="ezj-submenu" v-if="menu.submenus" :key="menu.title">
+          <template v-for="submenu in menu.submenus">
+            <div
+              class="ezj-submenu__item"
+              :key="submenu.id"
+              @click="handleClick(submenu.id)"
+            >{{submenu.title}}</div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EzjMenu',
+  props: {
+    menus: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    router: { type: Boolean, default: false },
+    defaultActive: { type: String }
+  },
+  data() {
+    return {
+      currentActive: null
+    }
+  },
+  watch: {
+    defaultActive: {
+      immediate: true,
+      handler(value) {
+        this.currentActive = value
+      }
+    }
+  },
+  methods: {
+    handleClick(id) {
+      this.currentActive = id
+      this.$emit('select', id)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ezj-menu__item {
+  margin-bottom: 10px;
+
+  &.has-shadow {
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
+
+    .ezj-submenu__item {
+      margin: 20px;
+    }
+  }
+  &.is-active {
+    .ezj-menu__title {
+      color: #fff;
+      background-color: #c41230;
+      border: 0;
+    }
+  }
+}
+.ezj-menu__title {
+  height: 60px;
+  font-size: 18px;
+  line-height: 60px;
+  color: #000;
+  text-align: center;
+  border: 1px solid #d8dce6;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: #fff;
+    background-color: #c41230;
+    border: 0;
+  }
+}
+.ezj-menu-group__title {
+  margin: 10px 0;
+}
+.ezj-submenu {
+  overflow: hidden;
+}
+.ezj-submenu__item {
+  margin: 10px 0;
+  font-size: 18px;
+  line-height: 20px;
+  cursor: pointer;
+}
+</style>

src/index.js

@@ -27,8 +27,9 @@ import EzjForm from './Form'
 import EzjTabs from './Tabs'
 import EzjTabPane from './TabPane'
 import EzjTabForm from './TabForm'
+import EzjContainer from './Container'
 
-const components = [EzjForm, EzjTabs, EzjTabPane, EzjTabForm]
+const components = [EzjForm, EzjTabs, EzjTabPane, EzjTabForm, EzjContainer]
 
 const install = function(Vue) {
   if (install.installed) return

vue.config.js

@@ -5,6 +5,6 @@ module.exports = {
     }
   },
   devServer: {
-    proxy: 'https://kelley.ezijing.com'
+    proxy: 'https://api.ezijing.com'
   }
 }