国内标准页面开发
This commit is contained in:
宋伟佳
@@ -21,25 +21,25 @@ const data = [
|
|||||||
component: 'Layout',
|
component: 'Layout',
|
||||||
redirect: 'noRedirect',
|
redirect: 'noRedirect',
|
||||||
name: 'PersonnelManagement',
|
name: 'PersonnelManagement',
|
||||||
meta: { title: '人员', icon: 'users-cog', permissions: ['admin'] },
|
meta: { title: '标准法规部', icon: 'users-cog', permissions: ['admin'] },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'userManagement',
|
path: 'userManagement',
|
||||||
name: 'UserManagement',
|
name: 'UserManagement',
|
||||||
component: '@/views/personnelManagement/userManagement/index',
|
component: '@/views/personnelManagement/userManagement/index',
|
||||||
meta: { title: '用户管理' },
|
meta: { title: '动态&资料' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'roleManagement',
|
path: 'roleManagement',
|
||||||
name: 'RoleManagement',
|
name: 'RoleManagement',
|
||||||
component: '@/views/personnelManagement/roleManagement/index',
|
component: '@/views/personnelManagement/roleManagement/index',
|
||||||
meta: { title: '角色管理' },
|
meta: { title: '国内标准法规' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'menuManagement',
|
path: 'menuManagement',
|
||||||
name: 'MenuManagement',
|
name: 'MenuManagement',
|
||||||
component: '@/views/personnelManagement/menuManagement/index',
|
component: '@/views/personnelManagement/menuManagement/index',
|
||||||
meta: { title: '菜单管理', badge: 'New' },
|
meta: { title: '海外标准法规', badge: 'New' },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -21,25 +21,25 @@ const data = [
|
|||||||
component: 'Layout',
|
component: 'Layout',
|
||||||
redirect: 'noRedirect',
|
redirect: 'noRedirect',
|
||||||
name: 'PersonnelManagement',
|
name: 'PersonnelManagement',
|
||||||
meta: { title: '人员', icon: 'users-cog', permissions: ['admin'] },
|
meta: { title: '标准法规部', icon: 'users-cog', permissions: ['admin'] },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'userManagement',
|
path: 'userManagement',
|
||||||
name: 'UserManagement',
|
name: 'UserManagement',
|
||||||
component: '@/views/personnelManagement/userManagement/index',
|
component: '@/views/personnelManagement/userManagement/index',
|
||||||
meta: { title: '用户管理' },
|
meta: { title: '动态&资料' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'roleManagement',
|
path: 'roleManagement',
|
||||||
name: 'RoleManagement',
|
name: 'RoleManagement',
|
||||||
component: '@/views/personnelManagement/roleManagement/index',
|
component: '@/views/personnelManagement/roleManagement/index',
|
||||||
meta: { title: '角色管理' },
|
meta: { title: '国内标准法规' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'menuManagement',
|
path: 'menuManagement',
|
||||||
name: 'MenuManagement',
|
name: 'MenuManagement',
|
||||||
component: '@/views/personnelManagement/menuManagement/index',
|
component: '@/views/personnelManagement/menuManagement/index',
|
||||||
meta: { title: '菜单管理', badge: 'New' },
|
meta: { title: '海外标准法规', badge: 'New' },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,70 +1,14 @@
|
|||||||
<!-- 滚动通知组件 -->
|
<!-- 滚动通知组件 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="vab-ad">
|
<div class="vab-ad"></div>
|
||||||
<el-carousel
|
|
||||||
v-if="adList"
|
|
||||||
height="30px"
|
|
||||||
direction="vertical"
|
|
||||||
:autoplay="true"
|
|
||||||
:interval="3000"
|
|
||||||
indicator-position="none"
|
|
||||||
>
|
|
||||||
<el-carousel-item v-for="(item, index) in adList" :key="index">
|
|
||||||
<el-tag type="warning">通知</el-tag>
|
|
||||||
<a target="_blank" :href="item.url">{{ item.title }}</a>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getList } from '@/api/ad'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'VabAd',
|
name: 'VabAd',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
nodeEnv: process.env.NODE_ENV,
|
|
||||||
adList: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.fetchData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async fetchData() {
|
|
||||||
// const { data } = await getList()
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
title: '这是我们项目的模板',
|
|
||||||
url:
|
|
||||||
'https://chu1204505056.gitee.io/admin-pro?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '这个是模板的滚动文字组件',
|
|
||||||
url:
|
|
||||||
'https://chu1204505056.gitee.io/admin-plus?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '这个可以用作通知',
|
|
||||||
url:
|
|
||||||
'https://chu1204505056.gitee.io/admin-plus?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
this.adList = data
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
methods: {},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped></style>
|
||||||
.vab-ad {
|
|
||||||
height: 30px;
|
|
||||||
padding-right: $base-padding;
|
|
||||||
padding-left: $base-padding;
|
|
||||||
margin-bottom: -20px;
|
|
||||||
line-height: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -78,9 +78,6 @@
|
|||||||
.vab-keel {
|
.vab-keel {
|
||||||
margin: $base-padding;
|
margin: $base-padding;
|
||||||
}
|
}
|
||||||
.app-main-height {
|
|
||||||
min-height: $base-app-main-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-copyright {
|
.footer-copyright {
|
||||||
min-height: 55px;
|
min-height: 55px;
|
||||||
|
|||||||
@@ -1,10 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dropdown @command="handleCommand">
|
<el-dropdown @command="handleCommand">
|
||||||
<span class="avatar-dropdown">
|
<span class="avatar-dropdown">
|
||||||
<!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
|
|
||||||
<img class="user-avatar" :src="avatar" alt="" />
|
|
||||||
<div class="user-name">
|
<div class="user-name">
|
||||||
{{ username }}
|
<span>您好,{{ username }}</span>
|
||||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,53 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<span :title="isFullscreen ? '退出全屏' : '进入全屏'">
|
<div></div>
|
||||||
<vab-icon
|
|
||||||
:icon="[
|
|
||||||
'fas',
|
|
||||||
isFullscreen ? 'compress-arrows-alt' : 'expand-arrows-alt',
|
|
||||||
]"
|
|
||||||
@click="click"
|
|
||||||
></vab-icon>
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import screenfull from 'screenfull'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'VabFullScreenBar',
|
name: 'VabFullScreenBar',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
isFullscreen: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.destroy()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
click() {
|
|
||||||
if (!screenfull.isEnabled) {
|
|
||||||
this.$baseMessage('开启全屏失败', 'error')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
screenfull.toggle()
|
|
||||||
this.$emit('refresh')
|
|
||||||
},
|
|
||||||
change() {
|
|
||||||
this.isFullscreen = screenfull.isFullscreen
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
if (screenfull.isEnabled) {
|
|
||||||
screenfull.on('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
if (screenfull.isEnabled) {
|
|
||||||
screenfull.off('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
mounted() {},
|
||||||
|
beforeDestroy() {},
|
||||||
|
methods: {},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -1,31 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<a
|
<div></div>
|
||||||
href="https://github.com/chuzhixin/vue-admin-beautiful"
|
|
||||||
target="_blank"
|
|
||||||
class="github-corner"
|
|
||||||
aria-label="View source on Github"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
width="80"
|
|
||||||
height="80"
|
|
||||||
viewBox="0 0 250 250"
|
|
||||||
class="github-color"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
|
|
||||||
<path
|
|
||||||
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
|
||||||
fill="currentColor"
|
|
||||||
style="transform-origin: 130px 106px"
|
|
||||||
class="octo-arm"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
|
||||||
fill="currentColor"
|
|
||||||
class="octo-body"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
@@ -33,43 +7,4 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped></style>
|
||||||
.github-corner {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: $base-z-index - 3;
|
|
||||||
|
|
||||||
.octo-arm {
|
|
||||||
animation: octocat-wave 560ms ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.octo-arm {
|
|
||||||
animation: octocat-wave 560ms ease-in-out infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-color {
|
|
||||||
color: #fff;
|
|
||||||
fill: $base-color-blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes octocat-wave {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: rotate(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
20%,
|
|
||||||
60% {
|
|
||||||
transform: rotate(-25deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
80% {
|
|
||||||
transform: rotate(100deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -17,12 +17,12 @@
|
|||||||
<vab-error-log />
|
<vab-error-log />
|
||||||
<vab-full-screen-bar @refresh="refreshRoute" />
|
<vab-full-screen-bar @refresh="refreshRoute" />
|
||||||
<vab-theme-bar class="hidden-xs-only" />
|
<vab-theme-bar class="hidden-xs-only" />
|
||||||
<vab-icon
|
<!-- <vab-icon-->
|
||||||
title="重载所有路由"
|
<!-- title="重载所有路由"-->
|
||||||
:pulse="pulse"
|
<!-- :pulse="pulse"-->
|
||||||
:icon="['fas', 'redo']"
|
<!-- :icon="['fas', 'redo']"-->
|
||||||
@click="refreshRoute"
|
<!-- @click="refreshRoute"-->
|
||||||
/>
|
<!-- />-->
|
||||||
<vab-avatar />
|
<vab-avatar />
|
||||||
<!-- <vab-icon
|
<!-- <vab-icon
|
||||||
title="退出系统"
|
title="退出系统"
|
||||||
|
|||||||
@@ -1,297 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="tabs-bar-container" class="tabs-bar-container">
|
<div id="tabs-bar-container" class="tabs-bar-container"></div>
|
||||||
<el-tabs
|
|
||||||
v-model="tabActive"
|
|
||||||
type="card"
|
|
||||||
class="tabs-content"
|
|
||||||
@tab-click="handleTabClick"
|
|
||||||
@tab-remove="handleTabRemove"
|
|
||||||
>
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="item in visitedRoutes"
|
|
||||||
:key="item.path"
|
|
||||||
:label="item.meta.title"
|
|
||||||
:name="item.path"
|
|
||||||
:closable="!isAffix(item)"
|
|
||||||
></el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
|
|
||||||
<el-dropdown @command="handleCommand">
|
|
||||||
<span style="cursor: pointer">
|
|
||||||
更多操作
|
|
||||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
||||||
</span>
|
|
||||||
<el-dropdown-menu slot="dropdown" class="tabs-more">
|
|
||||||
<!-- <el-dropdown-item command="refreshRoute">
|
|
||||||
<vab-icon :icon="['fas', 'circle-notch']" />
|
|
||||||
刷新
|
|
||||||
</el-dropdown-item> -->
|
|
||||||
<el-dropdown-item command="closeOtherstabs">
|
|
||||||
<vab-icon :icon="['fas', 'times-circle']" />
|
|
||||||
关闭其他
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="closeLefttabs">
|
|
||||||
<vab-icon :icon="['fas', 'arrow-alt-circle-left']"></vab-icon>
|
|
||||||
关闭左侧
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="closeRighttabs">
|
|
||||||
<vab-icon :icon="['fas', 'arrow-alt-circle-right']"></vab-icon>
|
|
||||||
关闭右侧
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="closeAlltabs">
|
|
||||||
<vab-icon :icon="['fas', 'ban']"></vab-icon>
|
|
||||||
关闭全部
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import path from 'path'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'VabTabsBar',
|
name: 'VabTabsBar',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
affixtabs: [],
|
|
||||||
tabActive: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
visitedRoutes: 'tabsBar/visitedRoutes',
|
|
||||||
routes: 'routes/routes',
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
handler(route) {
|
|
||||||
this.inittabs()
|
|
||||||
this.addtabs()
|
|
||||||
let tabActive = ''
|
|
||||||
this.visitedRoutes.forEach((item, index) => {
|
|
||||||
if (item.path === this.$route.path) {
|
|
||||||
tabActive = item.path
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.tabActive = tabActive
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
//console.log(this.visitedRoutes);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async handleTabRemove(tabActive) {
|
|
||||||
let view
|
|
||||||
this.visitedRoutes.forEach((item, index) => {
|
|
||||||
if (tabActive == item.path) {
|
|
||||||
view = item
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const { visitedRoutes } = await this.$store.dispatch(
|
|
||||||
'tabsBar/delRoute',
|
|
||||||
view
|
|
||||||
)
|
|
||||||
if (this.isActive(view)) {
|
|
||||||
this.toLastTag(visitedRoutes, view)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleTabClick(tab) {
|
|
||||||
const route = this.visitedRoutes.filter((item, index) => {
|
|
||||||
if (tab.index == index) return item
|
|
||||||
})[0]
|
|
||||||
if (this.$route.path !== route.path) {
|
|
||||||
this.$router.push({
|
|
||||||
path: route.path,
|
|
||||||
query: route.query,
|
|
||||||
fullPath: route.fullPath,
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isActive(route) {
|
|
||||||
return route.path === this.$route.path
|
|
||||||
},
|
|
||||||
isAffix(tag) {
|
|
||||||
return tag.meta && tag.meta.affix
|
|
||||||
},
|
|
||||||
filterAffixtabs(routes, basePath = '/') {
|
|
||||||
let tabs = []
|
|
||||||
routes.forEach((route) => {
|
|
||||||
if (route.meta && route.meta.affix) {
|
|
||||||
const tagPath = path.resolve(basePath, route.path)
|
|
||||||
tabs.push({
|
|
||||||
fullPath: tagPath,
|
|
||||||
path: tagPath,
|
|
||||||
name: route.name,
|
|
||||||
meta: { ...route.meta },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (route.children) {
|
|
||||||
const temptabs = this.filterAffixtabs(route.children, route.path)
|
|
||||||
if (temptabs.length >= 1) {
|
|
||||||
tabs = [...tabs, ...temptabs]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return tabs
|
|
||||||
},
|
|
||||||
inittabs() {
|
|
||||||
const affixtabs = (this.affixtabs = this.filterAffixtabs(this.routes))
|
|
||||||
for (const tag of affixtabs) {
|
|
||||||
if (tag.name) {
|
|
||||||
this.$store.dispatch('tabsBar/addVisitedRoute', tag)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
addtabs() {
|
|
||||||
const { name } = this.$route
|
|
||||||
if (name) {
|
|
||||||
this.$store.dispatch('tabsBar/addVisitedRoute', this.$route)
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
handleCommand(command) {
|
|
||||||
switch (command) {
|
|
||||||
case 'refreshRoute':
|
|
||||||
this.refreshRoute()
|
|
||||||
break
|
|
||||||
case 'closeOtherstabs':
|
|
||||||
this.closeOtherstabs()
|
|
||||||
break
|
|
||||||
case 'closeLefttabs':
|
|
||||||
this.closeLefttabs()
|
|
||||||
break
|
|
||||||
case 'closeRighttabs':
|
|
||||||
this.closeRighttabs()
|
|
||||||
break
|
|
||||||
case 'closeAlltabs':
|
|
||||||
this.closeAlltabs()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async refreshRoute() {
|
|
||||||
this.$baseEventBus.$emit('reloadrouter-view')
|
|
||||||
},
|
|
||||||
async closeSelectedTag(view) {
|
|
||||||
const { visitedRoutes } = await this.$store.dispatch(
|
|
||||||
'tabsBar/delRoute',
|
|
||||||
view
|
|
||||||
)
|
|
||||||
if (this.isActive(view)) {
|
|
||||||
this.toLastTag(visitedRoutes, view)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async closeOtherstabs() {
|
|
||||||
const view = await this.toThisTag()
|
|
||||||
await this.$store.dispatch('tabsBar/delOthersRoutes', view)
|
|
||||||
},
|
|
||||||
async closeLefttabs() {
|
|
||||||
const view = await this.toThisTag()
|
|
||||||
await this.$store.dispatch('tabsBar/delLeftRoutes', view)
|
|
||||||
},
|
|
||||||
async closeRighttabs() {
|
|
||||||
const view = await this.toThisTag()
|
|
||||||
await this.$store.dispatch('tabsBar/delRightRoutes', view)
|
|
||||||
},
|
|
||||||
async closeAlltabs() {
|
|
||||||
const view = await this.toThisTag()
|
|
||||||
const { visitedRoutes } = await this.$store.dispatch(
|
|
||||||
'tabsBar/delAllRoutes'
|
|
||||||
)
|
|
||||||
if (this.affixtabs.some((tag) => tag.path === view.path)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.toLastTag(visitedRoutes, view)
|
|
||||||
},
|
|
||||||
toLastTag(visitedRoutes, view) {
|
|
||||||
const latestView = visitedRoutes.slice(-1)[0]
|
|
||||||
if (latestView) {
|
|
||||||
this.$router.push(latestView)
|
|
||||||
} else {
|
|
||||||
this.$router.push('/')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async toThisTag() {
|
|
||||||
const view = this.visitedRoutes.filter((item, index) => {
|
|
||||||
if (item.path === this.$route.fullPath) {
|
|
||||||
return item
|
|
||||||
}
|
|
||||||
})[0]
|
|
||||||
if (this.$route.path !== view.path) this.$router.push(view)
|
|
||||||
return view
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped></style>
|
||||||
.tabs-bar-container {
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: $base-tabs-bar-height;
|
|
||||||
padding-right: $base-padding;
|
|
||||||
padding-left: $base-padding;
|
|
||||||
user-select: none;
|
|
||||||
background: $base-color-white;
|
|
||||||
border-top: 1px solid #f6f6f6;
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
.fold-unfold {
|
|
||||||
margin-right: $base-padding;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs-content {
|
|
||||||
width: calc(100% - 90px);
|
|
||||||
height: $base-tag-item-height;
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
.el-tabs__nav-next,
|
|
||||||
.el-tabs__nav-prev {
|
|
||||||
height: $base-tag-item-height;
|
|
||||||
line-height: $base-tag-item-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs__header {
|
|
||||||
border-bottom: 0;
|
|
||||||
|
|
||||||
.el-tabs__nav {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs__item {
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: $base-tag-item-height;
|
|
||||||
margin-right: 5px;
|
|
||||||
line-height: $base-tag-item-height;
|
|
||||||
border: 1px solid $base-border-color;
|
|
||||||
border-radius: $base-border-radius;
|
|
||||||
transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
|
|
||||||
|
|
||||||
&.is-active {
|
|
||||||
border: 1px solid $base-color-blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
display: flex;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,259 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<span v-if="themeBar">
|
<div></div>
|
||||||
<vab-icon
|
|
||||||
title="主题配置"
|
|
||||||
:icon="['fas', 'palette']"
|
|
||||||
@click="handleOpenThemeBar"
|
|
||||||
/>
|
|
||||||
<div class="theme-bar-setting">
|
|
||||||
<div @click="handleOpenThemeBar">
|
|
||||||
<vab-icon :icon="['fas', 'palette']" />
|
|
||||||
<p>主题配置</p>
|
|
||||||
</div>
|
|
||||||
<div @click="handleGetCode">
|
|
||||||
<vab-icon :icon="['fas', 'laptop-code']"></vab-icon>
|
|
||||||
<p>拷贝源码</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-drawer
|
|
||||||
title="主题配置"
|
|
||||||
:visible.sync="drawerVisible"
|
|
||||||
direction="rtl"
|
|
||||||
append-to-body
|
|
||||||
size="470px"
|
|
||||||
>
|
|
||||||
<el-scrollbar style="height: 94vh; overflow: hidden">
|
|
||||||
<div class="el-drawer__body">
|
|
||||||
<el-form ref="form" :model="theme" label-position="top">
|
|
||||||
<el-form-item label="主题">
|
|
||||||
<el-radio-group v-model="theme.name">
|
|
||||||
<el-radio-button label="default">默认</el-radio-button>
|
|
||||||
<el-radio-button label="green">绿荫草场</el-radio-button>
|
|
||||||
<el-radio-button label="glory">荣耀典藏</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="布局">
|
|
||||||
<el-radio-group v-model="theme.layout">
|
|
||||||
<el-radio-button label="vertical">纵向布局</el-radio-button>
|
|
||||||
<el-radio-button label="horizontal">横向布局</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="头部">
|
|
||||||
<el-radio-group v-model="theme.header">
|
|
||||||
<el-radio-button label="fixed">固定头部</el-radio-button>
|
|
||||||
<el-radio-button label="noFixed">不固定头部</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="多标签">
|
|
||||||
<el-radio-group v-model="theme.tabsBar">
|
|
||||||
<el-radio-button label="true">开启</el-radio-button>
|
|
||||||
<el-radio-button label="false">不开启</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="handleSaveTheme">
|
|
||||||
保存
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</el-drawer>
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import variables from '@/styles/variables.scss'
|
|
||||||
import { mapActions, mapGetters } from 'vuex'
|
|
||||||
import { layout as defaultLayout } from '@/config'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'VabThemeBar',
|
name: 'VabThemeBar',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
drawerVisible: false,
|
|
||||||
theme: {
|
|
||||||
name: 'default',
|
|
||||||
layout: '',
|
|
||||||
header: 'fixed',
|
|
||||||
tabsBar: '',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
layout: 'settings/layout',
|
|
||||||
header: 'settings/header',
|
|
||||||
tabsBar: 'settings/tabsBar',
|
|
||||||
themeBar: 'settings/themeBar',
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.$baseEventBus.$on('theme', () => {
|
|
||||||
this.handleOpenThemeBar()
|
|
||||||
})
|
|
||||||
const theme = localStorage.getItem('vue-admin-beautiful-theme')
|
|
||||||
if (null !== theme) {
|
|
||||||
this.theme = JSON.parse(theme)
|
|
||||||
this.handleSetTheme()
|
|
||||||
} else {
|
|
||||||
this.theme.layout = this.layout
|
|
||||||
this.theme.header = this.header
|
|
||||||
this.theme.tabsBar = this.tabsBar
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions({
|
|
||||||
changeLayout: 'settings/changeLayout',
|
|
||||||
changeHeader: 'settings/changeHeader',
|
|
||||||
changeTabsBar: 'settings/changeTabsBar',
|
|
||||||
}),
|
|
||||||
handleIsMobile() {
|
|
||||||
return document.body.getBoundingClientRect().width - 1 < 992
|
|
||||||
},
|
|
||||||
handleOpenThemeBar() {
|
|
||||||
this.drawerVisible = true
|
|
||||||
},
|
|
||||||
handleSetTheme() {
|
|
||||||
let { name, layout, header, tabsBar } = this.theme
|
|
||||||
localStorage.setItem(
|
|
||||||
'vue-admin-beautiful-theme',
|
|
||||||
`{
|
|
||||||
"name":"${name}",
|
|
||||||
"layout":"${layout}",
|
|
||||||
"header":"${header}",
|
|
||||||
"tabsBar":"${tabsBar}"
|
|
||||||
}`
|
|
||||||
)
|
|
||||||
if (!this.handleIsMobile()) this.changeLayout(layout)
|
|
||||||
this.changeHeader(header)
|
|
||||||
this.changeTabsBar(tabsBar)
|
|
||||||
document.getElementsByTagName(
|
|
||||||
'body'
|
|
||||||
)[0].className = `vue-admin-beautiful-theme-${name}`
|
|
||||||
this.drawerVisible = false
|
|
||||||
},
|
|
||||||
handleSaveTheme() {
|
|
||||||
this.handleSetTheme()
|
|
||||||
},
|
|
||||||
handleSetDfaultTheme() {
|
|
||||||
let { name } = this.theme
|
|
||||||
document
|
|
||||||
.getElementsByTagName('body')[0]
|
|
||||||
.classList.remove(`vue-admin-beautiful-theme-${name}`)
|
|
||||||
localStorage.removeItem('vue-admin-beautiful-theme')
|
|
||||||
this.$refs['form'].resetFields()
|
|
||||||
Object.assign(this.$data, this.$options.data())
|
|
||||||
this.changeHeader(defaultLayout)
|
|
||||||
this.theme.name = 'default'
|
|
||||||
this.theme.layout = this.layout
|
|
||||||
this.theme.header = this.header
|
|
||||||
this.theme.tabsBar = this.tabsBar
|
|
||||||
this.drawerVisible = false
|
|
||||||
location.reload()
|
|
||||||
},
|
|
||||||
handleGetCode() {
|
|
||||||
const url =
|
|
||||||
'https://github.com/chuzhixin/vue-admin-beautiful/tree/master/src/views'
|
|
||||||
let path = this.$route.path + '/index.vue'
|
|
||||||
if (path === '/vab/menu1/menu1-1/menu1-1-1/index.vue') {
|
|
||||||
path = '/vab/nested/menu1/menu1-1/menu1-1-1/index.vue'
|
|
||||||
}
|
|
||||||
if (path === '/vab/icon/awesomeIcon/index.vue') {
|
|
||||||
path = '/vab/icon/index.vue'
|
|
||||||
}
|
|
||||||
if (path === '/vab/icon/remixIcon/index.vue') {
|
|
||||||
path = '/vab/icon/remixIcon.vue'
|
|
||||||
}
|
|
||||||
if (path === '/vab/icon/colorfulIcon/index.vue') {
|
|
||||||
path = '/vab/icon/colorfulIcon.vue'
|
|
||||||
}
|
|
||||||
if (path === '/vab/table/comprehensiveTable/index.vue') {
|
|
||||||
path = '/vab/table/index.vue'
|
|
||||||
}
|
|
||||||
if (path === '/vab/table/inlineEditTable/index.vue') {
|
|
||||||
path = '/vab/table/inlineEditTable.vue'
|
|
||||||
}
|
|
||||||
window.open(url + path)
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped></style>
|
||||||
@mixin right-bar {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
z-index: $base-z-index;
|
|
||||||
width: 60px;
|
|
||||||
min-height: 60px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
background: $base-color-blue;
|
|
||||||
border-radius: $base-border-radius;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
padding-top: 10px;
|
|
||||||
border-bottom: 0 !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
& + div {
|
|
||||||
border-top: 1px solid $base-color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-size: $base-font-size-small;
|
|
||||||
line-height: 30px;
|
|
||||||
color: $base-color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-bar-setting {
|
|
||||||
@include right-bar;
|
|
||||||
|
|
||||||
top: calc((100vh - 110px) / 2);
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
svg:not(:root).svg-inline--fa {
|
|
||||||
display: block;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
color: $base-color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
display: block;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
font-size: 20px;
|
|
||||||
color: $base-color-white;
|
|
||||||
fill: $base-color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-drawer__body {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss">
|
|
||||||
.el-drawer__wrapper {
|
|
||||||
outline: none !important;
|
|
||||||
|
|
||||||
* {
|
|
||||||
outline: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vab-color-picker {
|
|
||||||
.el-color-dropdown__link-btn {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
+12
-12
@@ -37,17 +37,17 @@ export const constantRoutes = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
export const asyncRoutes = [
|
export const asyncRoutes = [
|
||||||
|
// {
|
||||||
|
// path: '/',
|
||||||
|
// component: Home,
|
||||||
|
// meta: {
|
||||||
|
// title: '首页',
|
||||||
|
// icon: 'home',
|
||||||
|
// affix: true,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: Home,
|
|
||||||
meta: {
|
|
||||||
title: '首页',
|
|
||||||
icon: 'home',
|
|
||||||
affix: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/index',
|
|
||||||
component: Layout,
|
component: Layout,
|
||||||
redirect: 'index',
|
redirect: 'index',
|
||||||
children: [
|
children: [
|
||||||
@@ -302,21 +302,21 @@ export const asyncRoutes = [
|
|||||||
name: 'UserManagement',
|
name: 'UserManagement',
|
||||||
component: () =>
|
component: () =>
|
||||||
import('@/views/personnelManagement/userManagement/index'),
|
import('@/views/personnelManagement/userManagement/index'),
|
||||||
meta: { title: '用户管理' },
|
meta: { title: '动态&资料' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'roleManagement',
|
path: 'roleManagement',
|
||||||
name: 'RoleManagement',
|
name: 'RoleManagement',
|
||||||
component: () =>
|
component: () =>
|
||||||
import('@/views/personnelManagement/roleManagement/index'),
|
import('@/views/personnelManagement/roleManagement/index'),
|
||||||
meta: { title: '角色管理' },
|
meta: { title: '国内标准法规' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'menuManagement',
|
path: 'menuManagement',
|
||||||
name: 'MenuManagement',
|
name: 'MenuManagement',
|
||||||
component: () =>
|
component: () =>
|
||||||
import('@/views/personnelManagement/menuManagement/index'),
|
import('@/views/personnelManagement/menuManagement/index'),
|
||||||
meta: { title: '菜单管理', badge: 'New' },
|
meta: { title: '海外标准法规', badge: 'New' },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -181,7 +181,6 @@
|
|||||||
margin-top: 1.3vh;
|
margin-top: 1.3vh;
|
||||||
line-height: 5.2vh;
|
line-height: 5.2vh;
|
||||||
background: rgba(182, 213, 255, 0.22);
|
background: rgba(182, 213, 255, 0.22);
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+12
-944
@@ -1,958 +1,26 @@
|
|||||||
<!-- 更新日志组件 -->
|
<!-- 标准发布 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="index-container">
|
<div class="home-page">
|
||||||
<el-row :gutter="20">
|
<h3>首页</h3>
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
||||||
<el-alert v-if="noticeList[0]" :closable="noticeList[0].closable">
|
|
||||||
<div
|
|
||||||
style="display: flex; align-items: center; justify-content: center"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://github.com/chuzhixin/vue-admin-beautiful"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
style="margin-right: 10px"
|
|
||||||
src="https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=flat-square&label=Stars&logo=github"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<p v-html="noticeList[0].title"></p>
|
|
||||||
</div>
|
|
||||||
</el-alert>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>访问量</span>
|
|
||||||
</div>
|
|
||||||
<vab-chart
|
|
||||||
:autoresize="true"
|
|
||||||
theme="vab-echarts-theme"
|
|
||||||
:options="fwl"
|
|
||||||
/>
|
|
||||||
<div class="bottom">
|
|
||||||
<span>
|
|
||||||
日均访问量:
|
|
||||||
|
|
||||||
<vab-count
|
|
||||||
:start-val="config1.startVal"
|
|
||||||
:end-val="config1.endVal"
|
|
||||||
:duration="config1.duration"
|
|
||||||
:separator="config1.separator"
|
|
||||||
:prefix="config1.prefix"
|
|
||||||
:suffix="config1.suffix"
|
|
||||||
:decimals="config1.decimals"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>授权数</span>
|
|
||||||
</div>
|
|
||||||
<vab-chart
|
|
||||||
:autoresize="true"
|
|
||||||
theme="vab-echarts-theme"
|
|
||||||
:options="sqs"
|
|
||||||
/>
|
|
||||||
<div class="bottom">
|
|
||||||
<span>
|
|
||||||
总授权数:
|
|
||||||
<vab-count
|
|
||||||
:start-val="config2.startVal"
|
|
||||||
:end-val="config2.endVal"
|
|
||||||
:duration="config2.duration"
|
|
||||||
:separator="config2.separator"
|
|
||||||
:prefix="config2.prefix"
|
|
||||||
:suffix="config2.suffix"
|
|
||||||
:decimals="config2.decimals"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col
|
|
||||||
v-for="(item, index) in iconList"
|
|
||||||
:key="index"
|
|
||||||
:xs="12"
|
|
||||||
:sm="6"
|
|
||||||
:md="3"
|
|
||||||
:lg="3"
|
|
||||||
:xl="3"
|
|
||||||
>
|
|
||||||
<router-link :to="item.link" target="_blank">
|
|
||||||
<el-card class="icon-panel" shadow="never">
|
|
||||||
<vab-icon
|
|
||||||
:style="{ color: item.color }"
|
|
||||||
:icon="['fas', item.icon]"
|
|
||||||
></vab-icon>
|
|
||||||
<p>{{ item.title }}</p>
|
|
||||||
</el-card>
|
|
||||||
</router-link>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
|
|
||||||
<el-card class="card" shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>依赖信息</span>
|
|
||||||
<div style="float: right">部署时间:{{ updateTime }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-btn">
|
|
||||||
<el-popover placement="top" width="250" trigger="hover">
|
|
||||||
<p>
|
|
||||||
这是一个付费群，谢谢您愿意支持开源，加群获取详细文档，群内提供vue-admin-beautiful-template基础模板
|
|
||||||
</p>
|
|
||||||
<el-image :src="require('@/assets/ewm.png')"></el-image>
|
|
||||||
<a slot="reference" target="_blank">
|
|
||||||
<el-button type="primary">QQ讨论群</el-button>
|
|
||||||
</a>
|
|
||||||
</el-popover>
|
|
||||||
<a @click="handleChangeTheme">
|
|
||||||
<el-button type="danger">修改主题和布局</el-button>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://github.com/chuzhixin/vue-admin-beautiful"
|
|
||||||
>
|
|
||||||
<el-button type="warning">
|
|
||||||
github下载源码点star（实时更新）
|
|
||||||
</el-button>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://gitee.com/chu1204505056/vue-admin-beautiful"
|
|
||||||
>
|
|
||||||
<el-button type="warning">码云下载源码点star</el-button>
|
|
||||||
</a>
|
|
||||||
<el-popover placement="top" width="250" trigger="hover">
|
|
||||||
<p>谢谢您愿意支持开源，加群获取文档，群内提供基础模板</p>
|
|
||||||
<el-image :src="require('@/assets/ewm.png')"></el-image>
|
|
||||||
<a slot="reference" target="_blank">
|
|
||||||
<el-button type="warning">文档</el-button>
|
|
||||||
</a>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
<table class="table">
|
|
||||||
<tr>
|
|
||||||
<td>@vue/cli版本</td>
|
|
||||||
<td>{{ devDependencies['@vue/cli-service'] }}</td>
|
|
||||||
<td>vue版本</td>
|
|
||||||
<td>{{ dependencies['vue'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>vuex版本</td>
|
|
||||||
<td>{{ dependencies['vuex'] }}</td>
|
|
||||||
<td>vue-router版本</td>
|
|
||||||
<td>{{ dependencies['vue-router'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>element-ui版本</td>
|
|
||||||
<td>{{ dependencies['element-ui'] }}</td>
|
|
||||||
<td>axios版本</td>
|
|
||||||
<td>{{ dependencies['axios'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>eslint版本</td>
|
|
||||||
<td>{{ devDependencies['eslint'] }}</td>
|
|
||||||
<td>prettier版本</td>
|
|
||||||
<td>{{ devDependencies['prettier'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>sass版本</td>
|
|
||||||
<td>{{ devDependencies['sass'] }}</td>
|
|
||||||
<td>mockjs版本</td>
|
|
||||||
<td>{{ dependencies['mockjs'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>zx-layouts版本</td>
|
|
||||||
<td>{{ dependencies['zx-layouts'] }}</td>
|
|
||||||
<td>lodash版本</td>
|
|
||||||
<td>{{ dependencies['lodash'] }}</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>其他信息</span>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: center">
|
|
||||||
<vab-colorful-icon style="font-size: 140px" icon-class="vab" />
|
|
||||||
<h1 style="font-size: 30px">vue-admin-beautiful</h1>
|
|
||||||
</div>
|
|
||||||
<div v-for="(item, index) in noticeList" :key="index">
|
|
||||||
<el-alert
|
|
||||||
v-if="index !== 0"
|
|
||||||
:title="item.title"
|
|
||||||
:type="item.type"
|
|
||||||
:closable="item.closable"
|
|
||||||
></el-alert>
|
|
||||||
<br />
|
|
||||||
</div>
|
|
||||||
<el-alert :closable="false" :title="userAgent" type="info"></el-alert>
|
|
||||||
<br />
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<plan></plan>
|
|
||||||
<version-information></version-information>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13">
|
|
||||||
<el-card class="card" shadow="never">
|
|
||||||
<div slot="header">
|
|
||||||
<span>更新日志</span>
|
|
||||||
</div>
|
|
||||||
<el-timeline :reverse="reverse">
|
|
||||||
<el-timeline-item
|
|
||||||
v-for="(activity, index) in activities"
|
|
||||||
:key="index"
|
|
||||||
:timestamp="activity.timestamp"
|
|
||||||
:color="activity.color"
|
|
||||||
>
|
|
||||||
{{ activity.content }}
|
|
||||||
</el-timeline-item>
|
|
||||||
</el-timeline>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import VabChart from '@/plugins/echarts'
|
|
||||||
import { dependencies, devDependencies } from '../../../package.json'
|
|
||||||
import { getList } from '@/api/changeLog'
|
|
||||||
import { getNoticeList } from '@/api/notice'
|
|
||||||
import { getRepos, getStargazers } from '@/api/github'
|
|
||||||
import Plan from './components/Plan'
|
|
||||||
import VersionInformation from './components/VersionInformation'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
components: {
|
components: {},
|
||||||
VabChart,
|
mixins: [],
|
||||||
Plan,
|
|
||||||
VersionInformation,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
timer: 0,
|
|
||||||
updateTime: process.env.VUE_APP_UPDATE_TIME,
|
|
||||||
nodeEnv: process.env.NODE_ENV,
|
|
||||||
dependencies: dependencies,
|
|
||||||
devDependencies: devDependencies,
|
|
||||||
config1: {
|
|
||||||
startVal: 0,
|
|
||||||
endVal: this.$baseLodash.random(20000, 60000),
|
|
||||||
decimals: 0,
|
|
||||||
prefix: '',
|
|
||||||
suffix: '',
|
|
||||||
separator: ',',
|
|
||||||
duration: 8000,
|
|
||||||
},
|
|
||||||
config2: {
|
|
||||||
startVal: 0,
|
|
||||||
endVal: this.$baseLodash.random(1000, 20000),
|
|
||||||
decimals: 0,
|
|
||||||
prefix: '',
|
|
||||||
suffix: '',
|
|
||||||
separator: ',',
|
|
||||||
duration: 8000,
|
|
||||||
},
|
|
||||||
config3: {
|
|
||||||
startVal: 0,
|
|
||||||
endVal: this.$baseLodash.random(1000, 20000),
|
|
||||||
decimals: 0,
|
|
||||||
prefix: '',
|
|
||||||
suffix: '',
|
|
||||||
separator: ',',
|
|
||||||
duration: 8000,
|
|
||||||
},
|
|
||||||
|
|
||||||
//访问量
|
|
||||||
fwl: {
|
|
||||||
grid: {
|
|
||||||
top: '4%',
|
|
||||||
left: '2%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '0%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: [],
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '访问量',
|
|
||||||
type: 'line',
|
|
||||||
data: [],
|
|
||||||
smooth: true,
|
|
||||||
areaStyle: {},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
//授权数
|
|
||||||
sqs: {
|
|
||||||
grid: {
|
|
||||||
top: '4%',
|
|
||||||
left: '2%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '0%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
/*boundaryGap: false,*/
|
|
||||||
data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '授权数',
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: '60%',
|
|
||||||
data: [10, 52, 20, 33, 39, 33, 22],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
//词云
|
|
||||||
cy: {
|
|
||||||
grid: {
|
|
||||||
top: '4%',
|
|
||||||
left: '2%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '0%',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'wordCloud',
|
|
||||||
gridSize: 15,
|
|
||||||
sizeRange: [12, 40],
|
|
||||||
rotationRange: [0, 0],
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
textStyle: {
|
|
||||||
normal: {
|
|
||||||
color() {
|
|
||||||
const arr = [
|
|
||||||
'#5470c6',
|
|
||||||
'#91cc75',
|
|
||||||
'#fac858',
|
|
||||||
'#ee6666',
|
|
||||||
'#73c0de',
|
|
||||||
'#975FE5',
|
|
||||||
]
|
|
||||||
let index = Math.floor(Math.random() * arr.length)
|
|
||||||
return arr[index]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'vue-admin-beautiful',
|
|
||||||
value: 15000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'element',
|
|
||||||
value: 10081,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'beautiful',
|
|
||||||
value: 9386,
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
name: 'vue',
|
|
||||||
value: 6500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'chuzhixin',
|
|
||||||
value: 6000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'good',
|
|
||||||
value: 4500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'success',
|
|
||||||
value: 3800,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'never',
|
|
||||||
value: 3000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'boy',
|
|
||||||
value: 2500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'girl',
|
|
||||||
value: 2300,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'github',
|
|
||||||
value: 2000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'hbuilder',
|
|
||||||
value: 1900,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'dcloud',
|
|
||||||
value: 1800,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'china',
|
|
||||||
value: 1700,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '1204505056',
|
|
||||||
value: 1600,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '972435319',
|
|
||||||
value: 1500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'young',
|
|
||||||
value: 1200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'old',
|
|
||||||
value: 1100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'vuex',
|
|
||||||
value: 900,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'router',
|
|
||||||
value: 800,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'money',
|
|
||||||
value: 700,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'qingdao',
|
|
||||||
value: 800,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'yantai',
|
|
||||||
value: 9000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'author is very cool',
|
|
||||||
value: 9200,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
//更新日志
|
|
||||||
reverse: true,
|
|
||||||
activities: [],
|
|
||||||
noticeList: [],
|
|
||||||
//其他信息
|
|
||||||
userAgent: navigator.userAgent,
|
|
||||||
//卡片图标
|
|
||||||
iconList: [
|
|
||||||
{
|
|
||||||
icon: 'video',
|
|
||||||
title: '视频播放器',
|
|
||||||
link: '/vab/player',
|
|
||||||
color: '#ffc069',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'table',
|
|
||||||
title: '表格',
|
|
||||||
link: '/vab/table/comprehensiveTable',
|
|
||||||
color: '#5cdbd3',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'laptop-code',
|
|
||||||
title: '源码',
|
|
||||||
link: 'https://github.com/chuzhixin/vue-admin-beautiful',
|
|
||||||
color: '#b37feb',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'book',
|
|
||||||
title: '书籍',
|
|
||||||
link: '',
|
|
||||||
color: '#69c0ff',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'bullhorn',
|
|
||||||
title: '公告',
|
|
||||||
link: '',
|
|
||||||
color: '#ff85c0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'gift',
|
|
||||||
title: '礼物',
|
|
||||||
link: '',
|
|
||||||
color: '#ffd666',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
icon: 'balance-scale-left',
|
|
||||||
title: '公平的世界',
|
|
||||||
link: '',
|
|
||||||
color: '#ff9c6e',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'coffee',
|
|
||||||
title: '休息一下',
|
|
||||||
link: '',
|
|
||||||
color: '#95de64',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.fetchData()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
clearInterval(this.timer)
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
let base = +new Date(2020, 1, 1)
|
|
||||||
let oneDay = 24 * 3600 * 1000
|
|
||||||
let date = []
|
|
||||||
|
|
||||||
let data = [Math.random() * 1500]
|
|
||||||
let now = new Date(base)
|
|
||||||
|
|
||||||
const addData = (shift) => {
|
|
||||||
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
|
|
||||||
date.push(now)
|
|
||||||
data.push(this.$baseLodash.random(20000, 60000))
|
|
||||||
|
|
||||||
if (shift) {
|
|
||||||
date.shift()
|
|
||||||
data.shift()
|
|
||||||
}
|
|
||||||
|
|
||||||
now = new Date(+new Date(now) + oneDay)
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 1; i < 6; i++) {
|
|
||||||
addData()
|
|
||||||
}
|
|
||||||
addData(true)
|
|
||||||
this.fwl.xAxis[0].data = date
|
|
||||||
this.fwl.series[0].data = data
|
|
||||||
this.timer = setInterval(() => {
|
|
||||||
addData(true)
|
|
||||||
this.fwl.xAxis[0].data = date
|
|
||||||
this.fwl.series[0].data = data
|
|
||||||
}, 3000)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick(e) {
|
|
||||||
this.$baseMessage(`点击了${e.name},这里可以写跳转`)
|
|
||||||
},
|
|
||||||
handleZrClick(e) {},
|
|
||||||
handleChangeTheme() {
|
|
||||||
this.$baseEventBus.$emit('theme')
|
|
||||||
},
|
|
||||||
async fetchData() {
|
|
||||||
// const { data } = await getList()
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
content:
|
|
||||||
'在github上获得了第一个star，感恩一位名叫Bequiet2014的github用户',
|
|
||||||
timestamp: '2020-03-23',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '增加更换主题功能',
|
|
||||||
timestamp: '2020-04-10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '大幅精简代码',
|
|
||||||
timestamp: '2020-04-14',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '修复群友反馈的bug',
|
|
||||||
timestamp: '2020-04-16',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '剔除maptalks',
|
|
||||||
timestamp: '2020-04-17',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content:
|
|
||||||
'换行符统一修改为lf 支持苹果 linux windows协同开发 强制开启最严格eslint规则 不要哭 严格是有好处的',
|
|
||||||
timestamp: '2020-04-17',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '彻底完成手机端适配,记录这一天熬夜到了晚上三点',
|
|
||||||
timestamp: '2020-04-18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content:
|
|
||||||
'删除babel-polyfill 提高打包速度 减少压缩体积（放弃ie是这个项目做出的最伟大的决定）',
|
|
||||||
timestamp: '2020-04-18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '源码精简至800k',
|
|
||||||
timestamp: '2020-04-19',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加视频播放器组件',
|
|
||||||
timestamp: '2020-04-20',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '修复路由懒加载 完善主题配色',
|
|
||||||
timestamp: '2020-04-22',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '修复全局axios拦截 加快动画展示效果 修改登录页样式',
|
|
||||||
timestamp: '2020-04-24',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '简化权限与登录逻辑 更新mockServer',
|
|
||||||
timestamp: '2020-04-25',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content:
|
|
||||||
'优化登录退出逻辑 代码更清晰 退出不再重载网页 改为重载路由形式',
|
|
||||||
timestamp: '2020-04-26',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '无端的指责只会让我更加努力 修复sidebar 简化permission',
|
|
||||||
timestamp: '2020-04-28',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '又是一个深夜 实现了表格增删改查的一键生成',
|
|
||||||
timestamp: '2020-04-30',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '大幅优化tagsview标签动画',
|
|
||||||
timestamp: '2020-05-02',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '三种图标组件实现mock模拟分页',
|
|
||||||
timestamp: '2020-05-03',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加了markdown编辑器组件',
|
|
||||||
timestamp: '2020-05-04',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加stylelint-plus自动规整排序样式',
|
|
||||||
timestamp: '2020-05-06',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加商城模板',
|
|
||||||
timestamp: '2020-05-12',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: 'github标星超过1000 感恩',
|
|
||||||
timestamp: '2020-05-13',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加验证码组件',
|
|
||||||
timestamp: '2020-05-14',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '修复横向菜单bug',
|
|
||||||
timestamp: '2020-05-16',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '又被人骂了 挺好的 让我下定决心重写了tabsBar',
|
|
||||||
timestamp: '2020-05-20',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '仿ant-design 添加雪花屏',
|
|
||||||
timestamp: '2020-05-26',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加人员管理模块',
|
|
||||||
timestamp: '2020-06-02',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: 'github标星超过2000 感恩',
|
|
||||||
timestamp: '2020-06-03',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加炫酷地图组件',
|
|
||||||
timestamp: '2020-06-11',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '抽离更多公共配置，框架使用更顺手',
|
|
||||||
timestamp: '2020-06-19',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '彻底完成了tabsBar多标签页的重构',
|
|
||||||
timestamp: '2020-06-22',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '感恩github标星过3.0K 祝大家端午节快乐',
|
|
||||||
timestamp: '2020-06-25',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '彻底重构了SideBar与TopBar 大幅精简dom渲染逻辑 全球首发',
|
|
||||||
timestamp: '2020-06-25',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加菜单管理',
|
|
||||||
timestamp: '2020-07-7',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '首次采用sass-loader 9.0写法，感谢github用户 shaonialife',
|
|
||||||
timestamp: '2020-07-7',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '添加vue-amap组件',
|
|
||||||
timestamp: '2020-07-11',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '修改zx-layouts引入方式',
|
|
||||||
timestamp: '2020-07-15',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content:
|
|
||||||
'记录这一天vue-admin-beautiful在插件市场、百度已花费超过1万元广告费用，希望一切都值得',
|
|
||||||
timestamp: '2020-07-18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '主题配置添加绿荫草场、荣耀典藏、暗黑之子模式',
|
|
||||||
timestamp: '2020-07-18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '全局axios请求全面支持Status Code拦截处理',
|
|
||||||
timestamp: '2020-07-29',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '重构全局loadding加载代码',
|
|
||||||
timestamp: '2020-07-31',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '升级stylelint自动排序功能',
|
|
||||||
timestamp: '2020-08-25',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '修复视频播放器组件重载路由失效的bug',
|
|
||||||
timestamp: '2020-09-03',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '修复极个别情况image-loader打包报错',
|
|
||||||
timestamp: '2020-09-18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content:
|
|
||||||
'全网首个基于vue3.0开发的admin框架已发布，具体请访问github',
|
|
||||||
timestamp: '2020-09-22',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '完善路由后端渲染方案，弃用之前写法',
|
|
||||||
timestamp: '2020-09-30',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '大版本迭代，请关注github tag',
|
|
||||||
timestamp: '2020-09-30',
|
|
||||||
},
|
|
||||||
/* {
|
|
||||||
content:
|
|
||||||
"面对自称加拿大华人的捕蛇者说作者laike9m的发帖诋毁，和人身攻击，本想去知乎找他理论，可奈何他的知乎已经由于经常发布错误言论被官方封号了https://www.zhihu.com/people/laike9m，既然自己都不是中国人了，就不要妄加揣测国产的开源项目了，一切都交给时间吧，后来我释怀了，laike9m、Cruii这群人不止是抹黑我的框架，甚至还去抹黑中国民营企业的佼佼者华为，充满了无奈啊，也许只有发布这样的言论，他们的目的才能达到把 https://github.com/evil-huawei/evil-huawei",
|
|
||||||
timestamp: "2020-10-01",
|
|
||||||
}, */
|
|
||||||
{
|
|
||||||
content: '凌晨两点，我累了，移除无用组件，精简package',
|
|
||||||
timestamp: '2020-10-02',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '富文本编辑器支持精细化配置',
|
|
||||||
timestamp: '2020-10-20',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '公共布局支持自动导出',
|
|
||||||
timestamp: '2020-10-23',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '遮罩添加高斯模糊',
|
|
||||||
timestamp: '2020-10-25',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: 'vue3.0 + element-plus版本正式上线',
|
|
||||||
timestamp: '2020-12-5',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '完成首页重构，跟进echarts 5.0',
|
|
||||||
timestamp: '2020-12-7',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '更新sass版本至最新',
|
|
||||||
timestamp: '2021-1-7',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: '更新vue-echarts版本至最新,options变更为option',
|
|
||||||
timestamp: '2021-2-23',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content:
|
|
||||||
'开源版品牌名升级为vue-admin-beautiful-pro，付费版vue2.x品牌升级为Admin Pro，付费版vue3.x品牌名升级为Admin Plus',
|
|
||||||
timestamp: '最近更新',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
data.map((item, index) => {
|
|
||||||
if (index === data.length - 1) {
|
|
||||||
item.color = '#0bbd87'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.activities = data
|
|
||||||
// const res = await getNoticeList()
|
|
||||||
const noticeData = [
|
|
||||||
{
|
|
||||||
title:
|
|
||||||
'温馨提示：集成版虽功能丰富，但冗余依赖过多，建议开发时使用基础版进行开发 Vab Admin Plus（vue3.0 + element-plus）已发布，欢迎体验：<a target="_blank" href="https://chu1204505056.gitee.io/admin-plus/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=#/index">Vab Admin Plus</a>',
|
|
||||||
closable: false,
|
|
||||||
type: 'success',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:
|
|
||||||
'作者寄语：感谢Star，感恩相遇，愿世间美好与我们环环相扣，加油！屏幕前的我们，打破桎梏，坚守初心。其实人生改变命运的机会并没有太多，我们并不是不优秀，我们也并不是一无是处，我们也希望驻足山巅被众人仰望，也许我们缺少的只是一个机会，缺少的只是生命中的导师，我希望这个框架帮助到更多的人，希望有一天，我们面试的时候不再胆怯，希望有一天别人看到的不仅仅是你的努力，还有你的功成名就，出人头地。',
|
|
||||||
closable: false,
|
|
||||||
type: 'warning',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:
|
|
||||||
'随笔：我一直在寻找开源的真谛，我一直再想什么是开源，我一开始觉得免费就是开源，好像又不是。我理解的开源是：你也开源，我也开源，大家一起贡献，相互帮助。我最担心的事情是：我一个小人物，去伺候一众的伸手党，我想，这不是开源该有的氛围。我还太年轻，不懂什么是格局，我只知道，无私的帮助他人，能给我带来快乐，却不能给我带来收入，当然，有时候，快乐对我来说就已经足够了。可惜我是一个人，没有精力帮助到每一个人，可惜这个世界需要赚钱，才能过上平凡的生活，可惜了我的梦想，这个物欲横流的时代，理想主义的我们，即使内心坚决如铁，也似乎寸步难行。',
|
|
||||||
closable: false,
|
|
||||||
type: 'success',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
this.noticeList = noticeData
|
|
||||||
/* getRepos({
|
|
||||||
token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
|
|
||||||
}).then((res) => {
|
|
||||||
const per_page = Math.ceil(res.data.stargazers_count / 100);
|
|
||||||
alert(per_page);
|
|
||||||
getStargazers({
|
|
||||||
token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
|
|
||||||
page: 1,
|
|
||||||
per_page: res.per_page,
|
|
||||||
}).then((res) => {
|
|
||||||
alert(JSON.stringify(res));
|
|
||||||
});
|
|
||||||
}); */
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.index-container {
|
.home-page {
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
background: #f5f7f8 !important;
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
.el-alert {
|
|
||||||
padding: $base-padding;
|
|
||||||
|
|
||||||
&--info.is-light {
|
|
||||||
min-height: 82px;
|
|
||||||
padding: $base-padding;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
color: #909399;
|
|
||||||
background-color: $base-color-white;
|
|
||||||
border: 1px solid #ebeef5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-card__body {
|
|
||||||
.echarts {
|
|
||||||
width: 100%;
|
|
||||||
height: 115px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
::v-deep {
|
|
||||||
.el-card__body {
|
|
||||||
.echarts {
|
|
||||||
width: 100%;
|
|
||||||
height: 305px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
padding-top: 20px;
|
|
||||||
margin-top: 5px;
|
|
||||||
color: #595959;
|
|
||||||
text-align: left;
|
|
||||||
border-top: 1px solid $base-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
width: 100%;
|
|
||||||
color: #666;
|
|
||||||
border-collapse: collapse;
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
td {
|
|
||||||
position: relative;
|
|
||||||
min-height: 20px;
|
|
||||||
padding: 9px 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
border: 1px solid #e6e6e6;
|
|
||||||
|
|
||||||
&:nth-child(odd) {
|
|
||||||
width: 20%;
|
|
||||||
text-align: right;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-panel {
|
|
||||||
height: 117px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-btn {
|
|
||||||
button {
|
|
||||||
margin: 5px 10px 15px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,150 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="roleManagement-container">
|
<div class="roleManagement-container">
|
||||||
<el-divider content-position="left">
|
<h3>主题</h3>
|
||||||
演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与权限控制
|
|
||||||
</el-divider>
|
|
||||||
<vab-query-form>
|
|
||||||
<vab-query-form-left-panel :span="12">
|
|
||||||
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">
|
|
||||||
添加
|
|
||||||
</el-button>
|
|
||||||
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
|
|
||||||
批量删除
|
|
||||||
</el-button>
|
|
||||||
</vab-query-form-left-panel>
|
|
||||||
<vab-query-form-right-panel :span="12">
|
|
||||||
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
|
||||||
<el-form-item>
|
|
||||||
<el-input
|
|
||||||
v-model.trim="queryForm.permission"
|
|
||||||
placeholder="请输入查询条件"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button icon="el-icon-search" type="primary" @click="queryData">
|
|
||||||
查询
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</vab-query-form-right-panel>
|
|
||||||
</vab-query-form>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
v-loading="listLoading"
|
|
||||||
:data="list"
|
|
||||||
:element-loading-text="elementLoadingText"
|
|
||||||
@selection-change="setSelectRows"
|
|
||||||
>
|
|
||||||
<el-table-column show-overflow-tooltip type="selection"></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
prop="id"
|
|
||||||
label="id"
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
show-overflow-tooltip
|
|
||||||
prop="permission"
|
|
||||||
label="权限码"
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column show-overflow-tooltip label="操作" width="200">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
|
||||||
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
:current-page="queryForm.pageNo"
|
|
||||||
:page-size="queryForm.pageSize"
|
|
||||||
:layout="layout"
|
|
||||||
:total="total"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
></el-pagination>
|
|
||||||
<edit ref="edit" @fetch-data="fetchData"></edit>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getList, doDelete } from '@/api/roleManagement'
|
|
||||||
import Edit from './components/RoleManagementEdit'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RoleManagement',
|
name: 'RoleManagement',
|
||||||
components: { Edit },
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {}
|
||||||
list: null,
|
|
||||||
listLoading: true,
|
|
||||||
layout: 'total, sizes, prev, pager, next, jumper',
|
|
||||||
total: 0,
|
|
||||||
selectRows: '',
|
|
||||||
elementLoadingText: '正在加载...',
|
|
||||||
queryForm: {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
permission: '',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.fetchData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setSelectRows(val) {
|
|
||||||
this.selectRows = val
|
|
||||||
},
|
|
||||||
handleEdit(row) {
|
|
||||||
if (row.id) {
|
|
||||||
this.$refs['edit'].showEdit(row)
|
|
||||||
} else {
|
|
||||||
this.$refs['edit'].showEdit()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleDelete(row) {
|
|
||||||
if (row.id) {
|
|
||||||
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
|
||||||
const { msg } = await doDelete({ ids: row.id })
|
|
||||||
this.$baseMessage(msg, 'success')
|
|
||||||
this.fetchData()
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
if (this.selectRows.length > 0) {
|
|
||||||
const ids = this.selectRows.map((item) => item.id).join()
|
|
||||||
this.$baseConfirm('你确定要删除选中项吗', null, async () => {
|
|
||||||
const { msg } = await doDelete({ ids })
|
|
||||||
this.$baseMessage(msg, 'success')
|
|
||||||
this.fetchData()
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.$baseMessage('未选中任何行', 'error')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSizeChange(val) {
|
|
||||||
this.queryForm.pageSize = val
|
|
||||||
this.fetchData()
|
|
||||||
},
|
|
||||||
handleCurrentChange(val) {
|
|
||||||
this.queryForm.pageNo = val
|
|
||||||
this.fetchData()
|
|
||||||
},
|
|
||||||
queryData() {
|
|
||||||
this.queryForm.pageNo = 1
|
|
||||||
this.fetchData()
|
|
||||||
},
|
|
||||||
async fetchData() {
|
|
||||||
this.listLoading = true
|
|
||||||
const { data, totalCount } = await getList(this.queryForm)
|
|
||||||
this.list = data
|
|
||||||
this.total = totalCount
|
|
||||||
setTimeout(() => {
|
|
||||||
this.listLoading = false
|
|
||||||
}, 300)
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
methods: {},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user