[update]进行模型基础抽离

.eslintrc.js

@@ -7,24 +7,24 @@ module.exports = {
   env: {
     browser: true,
     node: true,
-    es6: true,
+    es6: true
   },
   extends: ['plugin:vue/recommended', 'eslint:recommended'],
 
   // add your custom rules here
   // it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    "vue/max-attributes-per-line": [2, {
+    'vue/max-attributes-per-line': [2, {
-      "singleline": 10,
+      'singleline': 10,
-      "multiline": {
+      'multiline': {
-        "max": 1,
+        'max': 1,
-        "allowFirstLine": false
+        'allowFirstLine': false
       }
     }],
-    "vue/singleline-html-element-content-newline": "off",
+    'vue/singleline-html-element-content-newline': 'off',
-    "vue/multiline-html-element-content-newline":"off",
+    'vue/multiline-html-element-content-newline': 'off',
-    "vue/name-property-casing": ["error", "PascalCase"],
+    'vue/name-property-casing': ['error', 'PascalCase'],
-    "vue/no-v-html": "off",
+    'vue/no-v-html': 'off',
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
       'before': true,
@@ -47,7 +47,7 @@ module.exports = {
     'curly': [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
     'generator-star-spacing': [2, {
       'before': true,
       'after': true

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "element-ui": "2.13.0",
+    "eslint-plugin-html": "^6.0.0",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
@@ -24,7 +25,9 @@
     "vue": "2.6.10",
     "vue-i18n": "^8.15.5",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
@@ -43,6 +46,7 @@
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
+    "less-loader": "^5.0.0",
     "mockjs": "1.0.1-beta3",
     "node-sass": "^4.9.0",
     "runjs": "^4.3.2",

src/layout/components/BackPlayground.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="backplayground">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+.backplayground{
+    height: 100%;
+    margin:1%;
+}
+</style>

src/layout/components/Footer.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="footer">
+    <div class="pull-right">
+      Version <strong>1.5.6-228
+      </strong> GPLv2.
+    </div>
+    <div>
+      <strong>Copyright</strong> FIT2CLOUD 飞致云 © 2014-2020
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'Footer',
+  components: {
+
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="less">
+.el-footer{
+    padding: 0;
+    height: 35px !important;
+}
+.footer{
+    height: 100%;
+    z-index: 1000;
+    background: white;
+    //border-top: 1px solid #e7eaec;
+    div{
+        font-size: 13px;
+        line-height: 35px;
+    }
+}
+</style>

src/layout/components/ListTables/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="date"
+        label="日期"
+        width="180"
+      />
+      <el-table-column
+        prop="name"
+        label="姓名"
+        width="180"
+      />
+      <el-table-column
+        prop="address"
+        label="地址"
+      />
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/layout/components/Navbar.vue

@@ -1,33 +1,32 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <el-menu class="el-menu-demo" mode="horizontal">
-
+      <el-menu-item index="0"><hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /></el-menu-item>
-    <breadcrumb class="breadcrumb-container" />
+      <el-menu-item index="1"><breadcrumb class="breadcrumb-container" /></el-menu-item>
-
+      <el-submenu index="2" class="el-submenu-right">
-    <div class="right-menu">
+        <template slot="title">
-      <el-dropdown class="avatar-container" trigger="click">
+          <img
-        <div class="avatar-wrapper">
+            src="@/assets/img/admin.png"
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+            class="header-menu-logo"
-          <i class="el-icon-caret-bottom" />
+            style="height:30px;weight:30px;border-radius: 50%;margin-right:5px;"
-        </div>
+          >管理员
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        </template>
-          <router-link to="/">
+        <el-menu-item index="2-1">个人信息</el-menu-item>
-            <el-dropdown-item>
+        <el-menu-item index="2-2">用户界面</el-menu-item>
-              Home
+        <el-menu-item index="2-2">API key</el-menu-item>
-            </el-dropdown-item>
+        <el-menu-item index="2-2">注销登录</el-menu-item>
-          </router-link>
+      </el-submenu>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
+      <el-submenu index="3" class="el-submenu-right">
-            <el-dropdown-item>Github</el-dropdown-item>
+        <template slot="title" style="font-weight:600;"><i class="fa fa-globe header-menu-icon" style="margin-right:5px;" />{{ $t('header.language') }}</template>
-          </a>
+        <el-menu-item index="3-1" @click="changeLangToZH()">中文</el-menu-item>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+        <el-menu-item index="3-2" @click="changeLangToEnglish()">English</el-menu-item>
-            <el-dropdown-item>Docs</el-dropdown-item>
+      </el-submenu>
-          </a>
+      <el-submenu index="4" class="el-submenu-right">
-          <el-dropdown-item divided @click.native="logout">
+        <template slot="title"><i class="fa fa-handshake-o header-menu-icon" style="margin-right:5px;" />{{ $t('header.help') }}</template>
-            <span style="display:block;">Log Out</span>
+        <el-menu-item index="4-1">{{ $t('header.Documents') }}</el-menu-item>
-          </el-dropdown-item>
+        <el-menu-item index="4-2">{{ $t('header.CommercialSupport') }}</el-menu-item>
-        </el-dropdown-menu>
+      </el-submenu>
-      </el-dropdown>
+    </el-menu>
-    </div>
   </div>
 </template>
 
@@ -54,10 +53,45 @@ export default {
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+    changeLangToZH() {
+      this.$i18n.locale = 'cn'
+    },
+    changeLangToEnglish() {
+      this.$i18n.locale = 'en'
     }
   }
 }
 </script>
+<style lang="scss" scoped>
+
+.el-header{
+  background-color: #ffffff;
+  //border-bottom: 1px solid #e7eaec !important;
+}
+.el-submenu-right{
+  float: right !important;
+}
+  //重置Font-weight
+.el-submenu-right /deep/ .el-submenu__title{
+  font-weight: 600;
+  border-bottom: 0px !important;
+  color: #888888 !important;
+}
+//重置导航菜单选中样式
+.el-menu--horizontal>.el-menu-item.is-active {
+  border-bottom: 0px;
+}
+.el-menu--horizontal>.el-menu-item{
+  height: 50px;
+  line-height: 50px;
+}
+.el-submenu /deep/ .el-submenu__title{
+  height: 50px;
+  line-height: 50px;
+}
+
+</style>
 
 <style lang="scss" scoped>
 .navbar {
@@ -68,7 +102,7 @@ export default {
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
-    line-height: 46px;
+    line-height:50px;
     height: 100%;
     float: left;
     cursor: pointer;

src/layout/components/index.js

@@ -1,3 +1,7 @@
 export { default as Navbar } from './Navbar'
 export { default as Sidebar } from './Sidebar'
 export { default as AppMain } from './AppMain'
+export { default as BackPlayground } from './BackPlayground'
+export { default as ListTables } from './ListTables'
+
+// export { default as Footer } from './Footer'

src/layout/index.vue

@@ -7,6 +7,7 @@
         <navbar />
       </div>
       <app-main />
+      <Footer />
     </div>
   </div>
 </template>

src/router/index.js

@@ -30,6 +30,7 @@ import Layout from '@/layout'
  * a base page that does not have permission requirements
  * all roles can be accessed
  */
+// 全局路由
 export const constantRoutes = [
   {
     path: '/404',
@@ -89,56 +90,80 @@ export const constantRoutes = [
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
  */
+// 权限路由
 export const asyncRoutes = [
+  // {
+  //   path: '/nested',
+  //   component: Layout,
+  //   redirect: '/nested/menu1',
+  //   name: 'Nested',
+  //   meta: {
+  //     title: 'Nested',
+  //     icon: 'nested'
+  //   },
+  //   children: [
+  //     {
+  //       path: 'menu1',
+  //       component: () => import('@/views/nested/menu1/index'), // Parent router-view
+  //       name: 'Menu1',
+  //       meta: { title: 'Menu1' },
+  //       children: [
+  //         {
+  //           path: 'menu1-1',
+  //           component: () => import('@/views/nested/menu1/menu1-1'),
+  //           name: 'Menu1-1',
+  //           meta: { title: 'Menu1-1' }
+  //         },
+  //         {
+  //           path: 'menu1-2',
+  //           component: () => import('@/views/nested/menu1/menu1-2'),
+  //           name: 'Menu1-2',
+  //           meta: { title: 'Menu1-2' },
+  //           children: [
+  //             {
+  //               path: 'menu1-2-1',
+  //               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+  //               name: 'Menu1-2-1',
+  //               meta: { title: 'Menu1-2-1' }
+  //             },
+  //             {
+  //               path: 'menu1-2-2',
+  //               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+  //               name: 'Menu1-2-2',
+  //               meta: { title: 'Menu1-2-2' }
+  //             }
+  //           ]
+  //         },
+  //         {
+  //           path: 'menu1-3',
+  //           component: () => import('@/views/nested/menu1/menu1-3'),
+  //           name: 'Menu1-3',
+  //           meta: { title: 'Menu1-3' }
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       path: 'menu2',
+  //       component: () => import('@/views/nested/menu2/index'),
+  //       meta: { title: 'menu2' }
+  //     }
+  //   ]
+  // },
   {
-    path: '/nested',
+    path: '/users',
     component: Layout,
-    redirect: '/nested/menu1',
+    redirect: '/users/list',
-    name: 'Nested',
+    name: 'Users',
     meta: {
-      title: 'Nested',
+      title: 'Users',
       icon: 'nested'
     },
     children: [
       {
-        path: 'menu1',
+        path: 'list',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
+        component: () => import('@/views/users/List.vue'), // Parent router-view
-        name: 'Menu1',
+        name: 'List',
-        meta: { title: 'Menu1' },
+        meta: { title: 'List' }
-        children: [
-          {
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'Menu1-1',
-            meta: { title: 'Menu1-1' }
-          },
-          {
-            path: 'menu1-2',
-            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'Menu1-2',
-            meta: { title: 'Menu1-2' },
-            children: [
-              {
-                path: 'menu1-2-1',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'Menu1-2-1',
-                meta: { title: 'Menu1-2-1' }
-              },
-              {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'Menu1-2-2',
-                meta: { title: 'Menu1-2-2' }
-              }
-            ]
-          },
-          {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'Menu1-3',
-            meta: { title: 'Menu1-3' }
-          }
-        ]
       },
       {
         path: 'menu2',
@@ -147,7 +172,6 @@ export const asyncRoutes = [
       }
     ]
   },
-
   {
     path: 'external-link',
     component: Layout,

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: 'Vue Admin Template',
+  title: 'JumpServer',
 
   /**
    * @type {boolean} true | false

src/views/users/List.vue

@@ -0,0 +1,19 @@
+<template>
+  <BackPlayground>
+    <ListTables />
+  </BackPlayground>
+</template>
+
+<script>
+import { ListTables, BackPlayground } from '@/layout/components'
+export default {
+  components: {
+    BackPlayground,
+    ListTables
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>