国内标准页面开发
This commit is contained in:
宋伟佳
@@ -21,25 +21,25 @@ const data = [
|
||||
component: 'Layout',
|
||||
redirect: 'noRedirect',
|
||||
name: 'PersonnelManagement',
|
||||
meta: { title: '人员', icon: 'users-cog', permissions: ['admin'] },
|
||||
meta: { title: '标准法规部', icon: 'users-cog', permissions: ['admin'] },
|
||||
children: [
|
||||
{
|
||||
path: 'userManagement',
|
||||
name: 'UserManagement',
|
||||
component: '@/views/personnelManagement/userManagement/index',
|
||||
meta: { title: '用户管理' },
|
||||
meta: { title: '动态&资料' },
|
||||
},
|
||||
{
|
||||
path: 'roleManagement',
|
||||
name: 'RoleManagement',
|
||||
component: '@/views/personnelManagement/roleManagement/index',
|
||||
meta: { title: '角色管理' },
|
||||
meta: { title: '国内标准法规' },
|
||||
},
|
||||
{
|
||||
path: 'menuManagement',
|
||||
name: 'MenuManagement',
|
||||
component: '@/views/personnelManagement/menuManagement/index',
|
||||
meta: { title: '菜单管理', badge: 'New' },
|
||||
meta: { title: '海外标准法规', badge: 'New' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -21,25 +21,25 @@ const data = [
|
||||
component: 'Layout',
|
||||
redirect: 'noRedirect',
|
||||
name: 'PersonnelManagement',
|
||||
meta: { title: '人员', icon: 'users-cog', permissions: ['admin'] },
|
||||
meta: { title: '标准法规部', icon: 'users-cog', permissions: ['admin'] },
|
||||
children: [
|
||||
{
|
||||
path: 'userManagement',
|
||||
name: 'UserManagement',
|
||||
component: '@/views/personnelManagement/userManagement/index',
|
||||
meta: { title: '用户管理' },
|
||||
meta: { title: '动态&资料' },
|
||||
},
|
||||
{
|
||||
path: 'roleManagement',
|
||||
name: 'RoleManagement',
|
||||
component: '@/views/personnelManagement/roleManagement/index',
|
||||
meta: { title: '角色管理' },
|
||||
meta: { title: '国内标准法规' },
|
||||
},
|
||||
{
|
||||
path: 'menuManagement',
|
||||
name: 'MenuManagement',
|
||||
component: '@/views/personnelManagement/menuManagement/index',
|
||||
meta: { title: '菜单管理', badge: 'New' },
|
||||
meta: { title: '海外标准法规', badge: 'New' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -1,70 +1,14 @@
|
||||
<!-- 滚动通知组件 -->
|
||||
<template>
|
||||
<div class="vab-ad">
|
||||
<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>
|
||||
<div class="vab-ad"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { getList } from '@/api/ad'
|
||||
export default {
|
||||
name: 'VabAd',
|
||||
data() {
|
||||
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
|
||||
},
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.vab-ad {
|
||||
height: 30px;
|
||||
padding-right: $base-padding;
|
||||
padding-left: $base-padding;
|
||||
margin-bottom: -20px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -78,9 +78,6 @@
|
||||
.vab-keel {
|
||||
margin: $base-padding;
|
||||
}
|
||||
.app-main-height {
|
||||
min-height: $base-app-main-height;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
min-height: 55px;
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="avatar-dropdown">
|
||||
<!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
|
||||
<img class="user-avatar" :src="avatar" alt="" />
|
||||
<div class="user-name">
|
||||
{{ username }}
|
||||
<span>您好,{{ username }}</span>
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
@@ -1,53 +1,16 @@
|
||||
<template>
|
||||
<span :title="isFullscreen ? '退出全屏' : '进入全屏'">
|
||||
<vab-icon
|
||||
:icon="[
|
||||
'fas',
|
||||
isFullscreen ? 'compress-arrows-alt' : 'expand-arrows-alt',
|
||||
]"
|
||||
@click="click"
|
||||
></vab-icon>
|
||||
</span>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from 'screenfull'
|
||||
|
||||
export default {
|
||||
name: 'VabFullScreenBar',
|
||||
data() {
|
||||
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)
|
||||
}
|
||||
},
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,31 +1,5 @@
|
||||
<template>
|
||||
<a
|
||||
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>
|
||||
<div></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
@@ -33,43 +7,4 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
<vab-error-log />
|
||||
<vab-full-screen-bar @refresh="refreshRoute" />
|
||||
<vab-theme-bar class="hidden-xs-only" />
|
||||
<vab-icon
|
||||
title="重载所有路由"
|
||||
:pulse="pulse"
|
||||
:icon="['fas', 'redo']"
|
||||
@click="refreshRoute"
|
||||
/>
|
||||
<!-- <vab-icon-->
|
||||
<!-- title="重载所有路由"-->
|
||||
<!-- :pulse="pulse"-->
|
||||
<!-- :icon="['fas', 'redo']"-->
|
||||
<!-- @click="refreshRoute"-->
|
||||
<!-- />-->
|
||||
<vab-avatar />
|
||||
<!-- <vab-icon
|
||||
title="退出系统"
|
||||
|
||||
@@ -1,297 +1,16 @@
|
||||
<template>
|
||||
<div id="tabs-bar-container" class="tabs-bar-container">
|
||||
<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>
|
||||
<div id="tabs-bar-container" class="tabs-bar-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import path from 'path'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'VabTabsBar',
|
||||
data() {
|
||||
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
|
||||
},
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,259 +1,16 @@
|
||||
<template>
|
||||
<span v-if="themeBar">
|
||||
<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>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import variables from '@/styles/variables.scss'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { layout as defaultLayout } from '@/config'
|
||||
export default {
|
||||
name: 'VabThemeBar',
|
||||
data() {
|
||||
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)
|
||||
},
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@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>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
+12
-12
@@ -37,17 +37,17 @@ export const constantRoutes = [
|
||||
]
|
||||
|
||||
export const asyncRoutes = [
|
||||
// {
|
||||
// path: '/',
|
||||
// component: Home,
|
||||
// meta: {
|
||||
// title: '首页',
|
||||
// icon: 'home',
|
||||
// affix: true,
|
||||
// },
|
||||
// },
|
||||
{
|
||||
path: '/',
|
||||
component: Home,
|
||||
meta: {
|
||||
title: '首页',
|
||||
icon: 'home',
|
||||
affix: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
component: Layout,
|
||||
redirect: 'index',
|
||||
children: [
|
||||
@@ -302,21 +302,21 @@ export const asyncRoutes = [
|
||||
name: 'UserManagement',
|
||||
component: () =>
|
||||
import('@/views/personnelManagement/userManagement/index'),
|
||||
meta: { title: '用户管理' },
|
||||
meta: { title: '动态&资料' },
|
||||
},
|
||||
{
|
||||
path: 'roleManagement',
|
||||
name: 'RoleManagement',
|
||||
component: () =>
|
||||
import('@/views/personnelManagement/roleManagement/index'),
|
||||
meta: { title: '角色管理' },
|
||||
meta: { title: '国内标准法规' },
|
||||
},
|
||||
{
|
||||
path: 'menuManagement',
|
||||
name: 'MenuManagement',
|
||||
component: () =>
|
||||
import('@/views/personnelManagement/menuManagement/index'),
|
||||
meta: { title: '菜单管理', badge: 'New' },
|
||||
meta: { title: '海外标准法规', badge: 'New' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -181,7 +181,6 @@
|
||||
margin-top: 1.3vh;
|
||||
line-height: 5.2vh;
|
||||
background: rgba(182, 213, 255, 0.22);
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+12
-944
@@ -1,958 +1,26 @@
|
||||
<!-- 更新日志组件 -->
|
||||
<!-- 标准发布 -->
|
||||
<template>
|
||||
<div class="index-container">
|
||||
<el-row :gutter="20">
|
||||
<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 class="home-page">
|
||||
<h3>首页</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
name: 'Index',
|
||||
components: {
|
||||
VabChart,
|
||||
Plan,
|
||||
VersionInformation,
|
||||
},
|
||||
components: {},
|
||||
mixins: [],
|
||||
data() {
|
||||
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));
|
||||
});
|
||||
}); */
|
||||
},
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-container {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.home-page {
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,150 +1,15 @@
|
||||
<template>
|
||||
<div class="roleManagement-container">
|
||||
<el-divider content-position="left">
|
||||
演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将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>
|
||||
<h3>主题</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, doDelete } from '@/api/roleManagement'
|
||||
import Edit from './components/RoleManagementEdit'
|
||||
|
||||
export default {
|
||||
name: 'RoleManagement',
|
||||
components: { Edit },
|
||||
data() {
|
||||
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)
|
||||
},
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user