[update]进行模型基础抽离

This commit is contained in:
OrangeM21
2020-03-20 16:08:03 +08:00
parent a104143d64
commit 577c9c80c8
14 changed files with 285 additions and 86 deletions

View File

@@ -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
// it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
'vue/max-attributes-per-line': [2, {
'singleline': 10,
'multiline': {
'max': 1,
'allowFirstLine': false
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline":"off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/name-property-casing': ['error', 'PascalCase'],
'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

View File

@@ -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",

BIN
src/assets/img/admin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -1,33 +1,32 @@
<template>
<div class="navbar">
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb class="breadcrumb-container" />
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
<el-dropdown-item>Github</el-dropdown-item>
</a>
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
<el-dropdown-item>Docs</el-dropdown-item>
</a>
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<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>
<el-menu-item index="1"><breadcrumb class="breadcrumb-container" /></el-menu-item>
<el-submenu index="2" class="el-submenu-right">
<template slot="title">
<img
src="@/assets/img/admin.png"
class="header-menu-logo"
style="height:30px;weight:30px;border-radius: 50%;margin-right:5px;"
>管理员
</template>
<el-menu-item index="2-1">个人信息</el-menu-item>
<el-menu-item index="2-2">用户界面</el-menu-item>
<el-menu-item index="2-2">API key</el-menu-item>
<el-menu-item index="2-2">注销登录</el-menu-item>
</el-submenu>
<el-submenu index="3" class="el-submenu-right">
<template slot="title" style="font-weight:600;"><i class="fa fa-globe header-menu-icon" style="margin-right:5px;" />{{ $t('header.language') }}</template>
<el-menu-item index="3-1" @click="changeLangToZH()">中文</el-menu-item>
<el-menu-item index="3-2" @click="changeLangToEnglish()">English</el-menu-item>
</el-submenu>
<el-submenu index="4" class="el-submenu-right">
<template slot="title"><i class="fa fa-handshake-o header-menu-icon" style="margin-right:5px;" />{{ $t('header.help') }}</template>
<el-menu-item index="4-1">{{ $t('header.Documents') }}</el-menu-item>
<el-menu-item index="4-2">{{ $t('header.CommercialSupport') }}</el-menu-item>
</el-submenu>
</el-menu>
</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;

View File

@@ -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'

View File

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

View File

@@ -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',
name: 'Nested',
redirect: '/users/list',
name: 'Users',
meta: {
title: 'Nested',
title: 'Users',
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: 'list',
component: () => import('@/views/users/List.vue'), // Parent router-view
name: 'List',
meta: { title: 'List' }
},
{
path: 'menu2',
@@ -147,7 +172,6 @@ export const asyncRoutes = [
}
]
},
{
path: 'external-link',
component: Layout,

View File

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

19
src/views/users/List.vue Normal file
View File

@@ -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>