HINOTOR
2 years ago
parent
b5c267924a
commit
72232cbe32
@ -0,0 +1,2 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
@ -0,0 +1,5 @@
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
@ -0,0 +1,19 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
'extends': [
|
||||
'plugin:vue/essential',
|
||||
'@vue/standard'
|
||||
],
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
"space-before-function-paren": 0,
|
||||
"indent": [2, 4]
|
||||
},
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"singleQuote":true,
|
||||
"semi":false
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
presets: ['@vue/app']
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
module.exports = {
|
||||
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
|
||||
transform: {
|
||||
'^.+\\.vue$': 'vue-jest',
|
||||
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
|
||||
'jest-transform-stub',
|
||||
'^.+\\.jsx?$': 'babel-jest'
|
||||
},
|
||||
transformIgnorePatterns: ['/node_modules/'],
|
||||
moduleNameMapper: {
|
||||
'^@/(.*)$': '<rootDir>/src/$1'
|
||||
},
|
||||
snapshotSerializers: ['jest-serializer-vue'],
|
||||
testMatch: [
|
||||
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
|
||||
],
|
||||
testURL: 'http://localhost/',
|
||||
watchPlugins: [
|
||||
'jest-watch-typeahead/filename',
|
||||
'jest-watch-typeahead/testname'
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "vue-admin-permission",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"author": "Hui <543245444@qq.com>",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"serve:randy": "cross-env API_TYPE=randy vue-cli-service serve",
|
||||
"serve:peter": "cross-env API_TYPE=peter vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"analyze": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"dll": "webpack -p --progress --config ./webpack.dll.conf.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.0",
|
||||
"core-js": "^2.6.5",
|
||||
"element-ui": "^2.9.2",
|
||||
"moment": "^2.24.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.3",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.8.0",
|
||||
"@vue/cli-plugin-eslint": "^3.8.0",
|
||||
"@vue/cli-plugin-unit-jest": "^3.8.0",
|
||||
"@vue/cli-service": "^3.8.0",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"add-asset-html-webpack-plugin": "^3.1.3",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-jest": "^23.6.0",
|
||||
"clean-webpack-plugin": "^1.0.1",
|
||||
"compression-webpack-plugin": "^3.0.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"qiniu-webpack-plugin": "^0.4.2",
|
||||
"sass": "^1.18.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"svg-sprite-loader": "^3.9.2",
|
||||
"vue-template-compiler": "^2.6.10",
|
||||
"webpack-bundle-analyzer": "^2.13.1",
|
||||
"webpack-cli": "^3.2.3"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>loveRandy</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but vue-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<div class="ajax-loading" id="ajaxLoading" style="display: none;">
|
||||
<div class="overlay"></div>
|
||||
<div class="loading">
|
||||
<img src="https://media.number-7.cn/ebike-h5/static/images/common/loading.gif" alt="">
|
||||
<span>加载中，请稍后...</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
height: 100%;
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,29 @@
|
||||
import axios from '@/config/httpConfig'
|
||||
|
||||
export function fetchPermission() {
|
||||
return axios.get('/user/info')
|
||||
}
|
||||
|
||||
// 获取用户列表
|
||||
export function getUserList() {
|
||||
return axios.get('/user/list')
|
||||
}
|
||||
// 获取角色列表
|
||||
export function getRoleList() {
|
||||
return axios.get('/role/list')
|
||||
}
|
||||
// 获取所有权限
|
||||
export function getAllPermissiion() {
|
||||
return axios.get('/permission/all')
|
||||
}
|
||||
// 获取一级权限列表
|
||||
export function getFirstLevel() {
|
||||
return axios.get('/permission/resource')
|
||||
}
|
||||
// 获取次级权限列表
|
||||
export function getNextLevel(id) {
|
||||
return axios.get(`/permission/level?id=${id}`)
|
||||
}
|
||||
export function login(data) {
|
||||
return axios.post('/user/login', data)
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<svg
|
||||
:class="svgClass"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use :xlink:href="iconName"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'svg-icon',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName() {
|
||||
return `#icon-${this.iconClass}`
|
||||
},
|
||||
svgClass() {
|
||||
if (this.className) {
|
||||
return 'svg-icon ' + this.className
|
||||
} else {
|
||||
return 'svg-icon'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class='menu-container'>
|
||||
<template v-for='v in menuList'>
|
||||
<el-submenu
|
||||
:index='v.name'
|
||||
v-if='v.children&&v.children.length>0'
|
||||
:key='v.name'
|
||||
>
|
||||
<template slot='title'>
|
||||
<!-- <i
|
||||
class='iconfont'
|
||||
:class='v.meta.icon'
|
||||
></i> -->
|
||||
<svg-icon v-if="v.meta&&v.meta.icon" :icon-class="v.meta.icon"></svg-icon>
|
||||
<span>{{v.meta.name}}</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<my-nav :menuList='v.children'></my-nav>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-menu-item
|
||||
:key='v.name'
|
||||
:index='v.name'
|
||||
@click='gotoRoute(v.name)'
|
||||
v-else
|
||||
>
|
||||
<!-- <i
|
||||
class='iconfont'
|
||||
:class='v.meta.icon'
|
||||
></i> -->
|
||||
<svg-icon v-if="v.meta&&v.meta.icon" :icon-class="v.meta.icon"></svg-icon>
|
||||
<span slot='title'>{{v.meta.name}}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'my-nav',
|
||||
props: {
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gotoRoute(name) {
|
||||
this.$router.push({ name })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.menu-container {
|
||||
.svg-icon{
|
||||
margin-right:10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,2 @@
|
||||
const baseUrl = process.env.NODE_ENV === 'production' ? '/' : '/api'
|
||||
export default baseUrl
|
||||
@ -0,0 +1,133 @@
|
||||
import axios from 'axios'
|
||||
import store from '@/store/index.js'
|
||||
import baseURL from './baseUrl'
|
||||
import { Message } from 'element-ui'
|
||||
const http = {}
|
||||
|
||||
var instance = axios.create({
|
||||
timeout: 5000,
|
||||
baseURL,
|
||||
validateStatus(status) {
|
||||
switch (status) {
|
||||
case 400:
|
||||
Message.error('请求出错')
|
||||
break
|
||||
case 401:
|
||||
Message.warning({
|
||||
message: '授权失败，请重新登录'
|
||||
})
|
||||
store.commit('LOGIN_OUT')
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1000)
|
||||
return
|
||||
case 403:
|
||||
Message.warning({
|
||||
message: '拒绝访问'
|
||||
})
|
||||
break
|
||||
case 404:
|
||||
Message.warning({
|
||||
message: '请求错误,未找到该资源'
|
||||
})
|
||||
break
|
||||
case 500:
|
||||
Message.warning({
|
||||
message: '服务端错误'
|
||||
})
|
||||
break
|
||||
}
|
||||
return status >= 200 && status < 300
|
||||
}
|
||||
})
|
||||
|
||||
// 添加请求拦截器
|
||||
instance.interceptors.request.use(
|
||||
function(config) {
|
||||
// 请求头添加token
|
||||
if (store.state.UserToken) {
|
||||
config.headers.Authorization = `Bearer ${store.state.UserToken}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
function(error) {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器即异常处理
|
||||
instance.interceptors.response.use(
|
||||
response => {
|
||||
return response.data
|
||||
},
|
||||
err => {
|
||||
if (err && err.response) {
|
||||
} else {
|
||||
err.message = '连接服务器失败'
|
||||
}
|
||||
// Message.error({
|
||||
// message: err.message
|
||||
// })
|
||||
return Promise.reject(err.response)
|
||||
}
|
||||
)
|
||||
|
||||
http.get = function(url, options) {
|
||||
let loading
|
||||
if (!options || options.isShowLoading !== false) {
|
||||
loading = document.getElementById('ajaxLoading')
|
||||
loading.style.display = 'block'
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
instance
|
||||
.get(url, options)
|
||||
.then(response => {
|
||||
if (!options || options.isShowLoading !== false) {
|
||||
loading = document.getElementById('ajaxLoading')
|
||||
loading.style.display = 'none'
|
||||
}
|
||||
if (response.code === 1) {
|
||||
resolve(response.data)
|
||||
} else {
|
||||
Message.error({
|
||||
message: response.msg
|
||||
})
|
||||
reject(response.msg)
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
http.post = function(url, data, options) {
|
||||
let loading
|
||||
if (!options || options.isShowLoading !== false) {
|
||||
loading = document.getElementById('ajaxLoading')
|
||||
loading.style.display = 'block'
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
instance
|
||||
.post(url, data, options)
|
||||
.then(response => {
|
||||
if (!options || options.isShowLoading !== false) {
|
||||
loading = document.getElementById('ajaxLoading')
|
||||
loading.style.display = 'none'
|
||||
}
|
||||
if (response.code === 1) {
|
||||
resolve(response.data)
|
||||
} else {
|
||||
Message.error({
|
||||
message: response.msg
|
||||
})
|
||||
reject(response.message)
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default http
|
||||
@ -0,0 +1,19 @@
|
||||
function formatNumber(n) {
|
||||
const str = n.toString()
|
||||
return str[1] ? str : `0${str}`
|
||||
}
|
||||
|
||||
export function formatTime(date) {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
|
||||
const t1 = [year, month, day].map(formatNumber).join('/')
|
||||
const t2 = [hour, minute, second].map(formatNumber).join(':')
|
||||
|
||||
return `${t1} ${t2}`
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import Vue from 'vue'
|
||||
import SvgIcon from '@/components/SvgIcon'// svg组件
|
||||
|
||||
// register globally
|
||||
Vue.component('svg-icon', SvgIcon)
|
||||
|
||||
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
||||
const req = require.context('./svg', false, /\.svg$/)
|
||||
// console.log(req)
|
||||
requireAll(req)
|
||||
|
After Width: | Height: | Size: 852 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 532 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 777 B |
@ -0,0 +1,58 @@
|
||||
import Vue from 'vue'
|
||||
import App from '@/App'
|
||||
import store from '@/store/index'
|
||||
import router from '@/router/index'
|
||||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import './styles/index.scss'
|
||||
|
||||
import axios from './config/httpConfig'
|
||||
import * as globalFilter from './filters/filters'
|
||||
import '@/icons'
|
||||
|
||||
Vue.prototype.$http = axios
|
||||
|
||||
for (var key in globalFilter) {
|
||||
Vue.filter(key, globalFilter[key])
|
||||
}
|
||||
|
||||
Vue.use(ElementUI)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (!store.state.UserToken) {
|
||||
if (to.matched.length > 0 && !to.matched.some(record => record.meta.requiresAuth)) {
|
||||
next()
|
||||
} else {
|
||||
next({ path: '/login' })
|
||||
}
|
||||
} else {
|
||||
if (!store.state.permission.permissionList) {
|
||||
store.dispatch('permission/FETCH_PERMISSION').then(() => {
|
||||
next({ path: to.path })
|
||||
})
|
||||
} else {
|
||||
if (to.path !== '/login') {
|
||||
next()
|
||||
} else {
|
||||
next(from.fullPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
router.afterEach((to, from, next) => {
|
||||
var routerList = to.matched
|
||||
store.commit('setCrumbList', routerList)
|
||||
store.commit('permission/SET_CURRENT_MENU', to.name)
|
||||
})
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div style="background:#f0f2f5;margin-top: -20px;height:100%;">
|
||||
<div class="wscn-http404">
|
||||
<div class="pic-404"></div>
|
||||
<div class="bullshit">
|
||||
<div class="bullshit__headline">{{ message }}</div>
|
||||
<div class="bullshit__info">请检查您输入的网址是否正确</div>
|
||||
<a @click="backToHome" class="bullshit__return-home">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page404',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
backToHome() {
|
||||
this.$router.push('/')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
message() {
|
||||
return '找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面找不到页面'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.wscn-http404 {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
margin: 20px auto 60px;
|
||||
padding: 0 100px;
|
||||
overflow: hidden;
|
||||
.pic-404 {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 600px;
|
||||
padding: 150px 0;
|
||||
overflow: hidden;
|
||||
&__parent {
|
||||
width: 100%;
|
||||
}
|
||||
&__child {
|
||||
position: absolute;
|
||||
&.left {
|
||||
width: 80px;
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
animation-name: cloudLeft;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
&.mid {
|
||||
width: 46px;
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
animation-name: cloudMid;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
&.right {
|
||||
width: 62px;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
animation-name: cloudRight;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
@keyframes cloudLeft {
|
||||
0% {
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 33px;
|
||||
left: 188px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 81px;
|
||||
left: 92px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 97px;
|
||||
left: 60px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudMid {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 40px;
|
||||
left: 360px;
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
top: 130px;
|
||||
left: 180px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 160px;
|
||||
left: 120px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudRight {
|
||||
0% {
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 120px;
|
||||
left: 460px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 180px;
|
||||
left: 340px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bullshit {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 300px;
|
||||
padding: 150px 0;
|
||||
overflow: hidden;
|
||||
&__oops {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
color: #1482f0;
|
||||
opacity: 0;
|
||||
margin-bottom: 20px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__headline {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #1482f0;
|
||||
opacity: 0;
|
||||
margin-bottom: 10px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__info {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
color: grey;
|
||||
opacity: 0;
|
||||
margin-bottom: 30px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__return-home {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
background: #1482f0;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
opacity: 0;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(60px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="0"
|
||||
></el-progress>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="25"
|
||||
></el-progress>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="100"
|
||||
status="success"
|
||||
></el-progress>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="70"
|
||||
status="warning"
|
||||
></el-progress>
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
></el-progress>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="demo-image__placeholder">
|
||||
<div class="block">
|
||||
<el-image :src="src">
|
||||
<div slot="placeholder" class="image-slot">
|
||||
加载中<span class="dot">...</span>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src:
|
||||
'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>home</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
one
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="demo-image__placeholder">
|
||||
<div class="block">
|
||||
<el-image :src="src">
|
||||
<div slot="placeholder" class="image-slot">
|
||||
加载中<span class="dot">...</span>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src:
|
||||
'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
<TotalStatus/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TotalStatus from './component/total-status'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
components: {
|
||||
TotalStatus
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<router-view class="content"></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<TopAside/>
|
||||
<Content/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopAside from './top-aside'
|
||||
import Content from './content'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['isSidebarNavCollapse'])
|
||||
},
|
||||
components: {
|
||||
TopAside,
|
||||
Content
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<el-menu
|
||||
:collapse="isSidebarNavCollapse"
|
||||
background-color="#304156"
|
||||
text-color="#eee"
|
||||
active-text-color="#4dbcff"
|
||||
:default-active="currentMenu"
|
||||
>
|
||||
<DynamicMenu :menuList="sidebarMenu"></DynamicMenu>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DynamicMenu from '@/components/dynamic-menu'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isCollapse: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['isSidebarNavCollapse']),
|
||||
...mapState('permission', ['sidebarMenu', 'currentMenu'])
|
||||
},
|
||||
methods: {},
|
||||
components: {
|
||||
DynamicMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div :class="{navCollapsed:isSidebarNavCollapse}">
|
||||
<sidebarNav class="sidebar"/>
|
||||
<mainContent/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sidebarNav from './component/sidebar-nav'
|
||||
import mainContent from './component/main-content/index'
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['isSidebarNavCollapse'])
|
||||
},
|
||||
components: {
|
||||
sidebarNav,
|
||||
mainContent
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="demo-image__lazy">
|
||||
<el-image
|
||||
v-for="url in urls"
|
||||
:key="url"
|
||||
:src="url"
|
||||
lazy
|
||||
></el-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urls: [
|
||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<ul
|
||||
class="infinite-list"
|
||||
v-infinite-scroll="load"
|
||||
>
|
||||
<template v-for="(i,key) in count">
|
||||
<li
|
||||
:key="key"
|
||||
class="infinite-list-item"
|
||||
>{{ i }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
this.count += 2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
.infinite-list li{
|
||||
background:#f0f1f2;
|
||||
line-height:40px;
|
||||
margin-bottom:10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
>
|
||||
<span>卡片名称</span>
|
||||
<el-button
|
||||
style="float: right; padding: 3px 0"
|
||||
type="text"
|
||||
>操作按钮</el-button>
|
||||
</div>
|
||||
<div
|
||||
v-for="o in 4"
|
||||
:key="o"
|
||||
class="text item"
|
||||
>
|
||||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,444 @@
|
||||
|
||||
<template lang="html">
|
||||
<el-card class="box-card">
|
||||
<div>
|
||||
<div style="margin-bottom:10px;">
|
||||
<el-button type="success" icon="el-icon-plus" size="small" @click="handleNewCategory(1,0)">新增菜单</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
highlight-current-row
|
||||
border
|
||||
size="small">
|
||||
<el-table-column
|
||||
label="分类名称"
|
||||
align="left"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<a :style="`margin-left: ${(scope.row.categoryLevel - 1) * 20}px`" class="category-row">
|
||||
<i class="block-icon" v-if="scope.row.categoryLevel<3" :class="[expandData[scope.row.id] ? 'el-icon-minus' : 'el-icon-plus']" @click="toggleExpend(scope.row)"></i>
|
||||
<span v-if="scope.row.categoryLevel>=3" style="margin-left: 20px"></span>
|
||||
<span class="category-name">{{scope.row.categoryLevel}} {{ scope.row.permissionName }}
|
||||
<i class="el-icon-edit" @click="showEdit(scope.row)"></i>
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="350"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
v-if="scope.row.permissionLevel<3"
|
||||
@click="handleNewCategory(scope.row.permissionLevel+1,scope.row.id)"
|
||||
>添加子分类</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 编辑类目弹窗 -->
|
||||
<el-dialog
|
||||
title="编辑类目"
|
||||
:visible.sync="visible"
|
||||
width="30%">
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24" >
|
||||
<el-form-item label="权限名称">
|
||||
<el-input v-model="editBuild.permissionName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限代码">
|
||||
<el-input :disabled="true" v-model="editBuild.permissionCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块名">
|
||||
<el-input v-model="editBuild.module"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="update">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- 新增类目弹窗 -->
|
||||
<el-dialog
|
||||
title="新增类目"
|
||||
:visible.sync="newVisible"
|
||||
width="50%">
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24" >
|
||||
<el-form-item label="权限名称">
|
||||
<el-input v-model="firstBuild.permissionName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限代码">
|
||||
<el-input v-model="firstBuild.permissionCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块名">
|
||||
<el-input v-model="firstBuild.module"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelNewCategory">取 消</el-button>
|
||||
<el-button type="primary" @click="setNewCategory">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getFirstLevel, getNextLevel } from '@/api/permission'
|
||||
export default {
|
||||
name: 'coolefyCategory',
|
||||
data() {
|
||||
return {
|
||||
firstBuild: {
|
||||
permissionName: '',
|
||||
module: '',
|
||||
permissionCode: ''
|
||||
},
|
||||
editBuild: {
|
||||
permissionName: '',
|
||||
module: '',
|
||||
permissionCode: ''
|
||||
},
|
||||
loading: false,
|
||||
visible: false,
|
||||
newVisible: false,
|
||||
secondVisible: false,
|
||||
thirdVisible: false,
|
||||
totalRecord: 100,
|
||||
checked: false,
|
||||
indeterminate: false,
|
||||
data: [],
|
||||
list: [],
|
||||
expandData: {},
|
||||
checkedData: {},
|
||||
indeterminateData: {},
|
||||
searchData: {
|
||||
pageSize: 10,
|
||||
pageNumber: 1,
|
||||
operateType: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
},
|
||||
currentRow: '',
|
||||
form: {
|
||||
parentId: '',
|
||||
id: '',
|
||||
cnCategoryName: '',
|
||||
sort: '',
|
||||
categoryImg: ''
|
||||
},
|
||||
cnCategoryName: '',
|
||||
cnCategoryNameTwo: '',
|
||||
levelOne: {},
|
||||
|
||||
// 新建类目
|
||||
newCategoryType: '',
|
||||
parentId: 0,
|
||||
isContact: false,
|
||||
dialogVisible: false,
|
||||
putawayName: '',
|
||||
putawayCategoryId: '',
|
||||
categoryData: { categoryId: '', categoryTreePath: '' },
|
||||
categoryList: [], // 所有类目
|
||||
pageNumber: 1,
|
||||
notPutVisible: false,
|
||||
webCategoryId: '',
|
||||
webPutaway: [],
|
||||
notBelongWeb: [],
|
||||
newPutawayWeb: [],
|
||||
putawayCategoryName: '',
|
||||
// 翻译
|
||||
isTranslate: false,
|
||||
translateVisible: false,
|
||||
translateCncnCategoryName: '',
|
||||
formLabelWidth: '100px',
|
||||
|
||||
isEdit: true,
|
||||
webArr: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.search()
|
||||
},
|
||||
methods: {
|
||||
handleNewCategory(type, id) {
|
||||
this.newVisible = true
|
||||
this.newCategoryType = type
|
||||
if (id) {
|
||||
this.parentId = id
|
||||
} else {
|
||||
this.parentId = 0
|
||||
}
|
||||
},
|
||||
setNewCategory() {
|
||||
// 新增类目
|
||||
var formData = new URLSearchParams()
|
||||
for (var key in this.firstBuild) {
|
||||
if (!this.firstBuild[key]) {
|
||||
this.$message.error('请补充完数据后再操作')
|
||||
return
|
||||
}
|
||||
formData.append(key, this.firstBuild[key])
|
||||
}
|
||||
if (this.newCategoryType === 1) {
|
||||
formData.append('parentId', this.parentId)
|
||||
formData.append('resourceLevel', 1)
|
||||
formData.append('permissionLevel', 1)
|
||||
} else if (this.newCategoryType === 2) {
|
||||
formData.append('parentId', this.parentId)
|
||||
formData.append('resourceLevel', 2)
|
||||
formData.append('permissionLevel', 2)
|
||||
} else if (this.newCategoryType === 3) {
|
||||
formData.append('parentId', this.parentId)
|
||||
formData.append('resourceLevel', 3)
|
||||
formData.append('permissionLevel', 3)
|
||||
}
|
||||
},
|
||||
cancelNewCategory() {
|
||||
this.newVisible = false
|
||||
this.newCategory = this.initCategory
|
||||
},
|
||||
handleSelectTwo(item) {
|
||||
this.form.parentId = item.id
|
||||
},
|
||||
handleSelect(item) {
|
||||
this.form.parentId = item.id
|
||||
this.cnCategoryNameTwo = ''
|
||||
this.levelOne = item
|
||||
},
|
||||
|
||||
update() {
|
||||
var formData = new URLSearchParams()
|
||||
for (var key in this.editBuild) {
|
||||
if (!this.editBuild[key]) {
|
||||
this.$message.error('请补充完数据后再操作')
|
||||
return
|
||||
}
|
||||
formData.append(key, this.editBuild[key])
|
||||
}
|
||||
formData.append('parentId', this.currentRow.parentId)
|
||||
formData.append('id', this.currentRow.id)
|
||||
formData.append('resourceLevel', this.currentRow.permissionLevel)
|
||||
formData.append('permissionLevel', this.currentRow.permissionLevel)
|
||||
},
|
||||
showEdit(row) {
|
||||
this.visible = true
|
||||
this.editBuild = {
|
||||
permissionName: row.permissionName,
|
||||
module: row.module,
|
||||
permissionCode: row.permissionCode
|
||||
}
|
||||
this.currentRow = row
|
||||
},
|
||||
search() {
|
||||
getFirstLevel().then(res => {
|
||||
let data = res || []
|
||||
data = data.map(item => {
|
||||
item.childList = []
|
||||
item.isLoadChild = false
|
||||
item.cnCategoryName = item.permissionName
|
||||
item.categoryLevel = item.resourceLevel
|
||||
return item
|
||||
})
|
||||
this.data = data
|
||||
this.list = data
|
||||
})
|
||||
},
|
||||
findSourceDataById(id, list) {
|
||||
const len = list.length
|
||||
for (let i = 0; i < len; i += 1) {
|
||||
const item = list[i]
|
||||
if (item.id === id) {
|
||||
return item
|
||||
}
|
||||
if (item.childList) {
|
||||
const ret = this.findSourceDataById(id, item.childList)
|
||||
if (ret) {
|
||||
return ret
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleExpend(d) {
|
||||
let { data } = this
|
||||
if (!d.isLoadChild) {
|
||||
getNextLevel(d.id).then(r => {
|
||||
r.forEach((item, index) => {
|
||||
item.cnCategoryName = item.permissionName
|
||||
item.categoryLevel = item.resourceLevel
|
||||
})
|
||||
const childList = r || []
|
||||
this.expandData[d.id] = true
|
||||
d.isLoadChild = true
|
||||
d.childList = childList
|
||||
this.list = this.makeFlatData(data)
|
||||
})
|
||||
} else {
|
||||
this.expandData[d.id] = !this.expandData[d.id]
|
||||
this.list = this.makeFlatData(data)
|
||||
}
|
||||
},
|
||||
makeFlatData(list, level = 0) {
|
||||
const len = list.length
|
||||
let data = []
|
||||
let i = 0
|
||||
|
||||
for (; i < len; i += 1) {
|
||||
const item = list[i]
|
||||
data.push(item)
|
||||
if (item.childList && this.expandData[item.id]) {
|
||||
const childList = this.makeFlatData(
|
||||
item.childList,
|
||||
level + 1
|
||||
)
|
||||
data = data.concat(childList)
|
||||
}
|
||||
}
|
||||
return data
|
||||
},
|
||||
back() {
|
||||
this.isContact = false
|
||||
this.webArr = []
|
||||
this.webPutaway = []
|
||||
this.webCategoryId = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.block-icon {
|
||||
border: 1px solid #1ab394;
|
||||
border-radius: 2px;
|
||||
color: #1ab394;
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 14px;
|
||||
}
|
||||
.category-row {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
i.el-icon-edit {
|
||||
color: #1ab394;
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
&:hover {
|
||||
i {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.putaway-header {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-tag {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
margin-bottom: 10px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.not-belong-Web {
|
||||
min-height: 450px;
|
||||
}
|
||||
.category-item {
|
||||
display: inline-block;
|
||||
min-width: 220px;
|
||||
vertical-align: top;
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
border: 1px solid #888;
|
||||
height: 750px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: hidden;
|
||||
padding: 10px 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.category-list {
|
||||
border: 1px solid #ccc;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
font-size: 0;
|
||||
li {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
&.active {
|
||||
background: #58b7ff;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.colorBlue {
|
||||
color: #58b7ff;
|
||||
}
|
||||
.translate-item {
|
||||
margin-bottom: 10px;
|
||||
.left {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
.right {
|
||||
display: inline-block;
|
||||
}
|
||||
.category-word {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.bgc-yellow input {
|
||||
background-color: #fff000;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
/* 订单管理 */
|
||||
const Order = () => import('@/pages/order-manage')
|
||||
const OrderList = () => import('@/pages/order-manage/order-list')
|
||||
const ProductManage = () => import('@/pages/order-manage/product-manage')
|
||||
const ProductionList = () =>
|
||||
import('@/pages/order-manage/product-manage/production-list')
|
||||
const ReviewManage = () =>
|
||||
import('@/pages/order-manage/product-manage/review-manage')
|
||||
const ReturnGoods = () => import('@/pages/order-manage/return-goods')
|
||||
|
||||
/* 产品管理 */
|
||||
const Goods = () => import('@/pages/goods-manage')
|
||||
const GoodsList = () => import('@/pages/goods-manage/goods-list')
|
||||
const GoodsClassify = () => import('@/pages/goods-manage/goods-classify')
|
||||
// 权限管理
|
||||
const Permission = () => import('@/pages/permission')
|
||||
const UserManage = () => import('@/pages/permission/user-manage')
|
||||
const RoleManage = () => import('@/pages/permission/role-manage')
|
||||
const MenuManage = () => import('@/pages/permission/menu-manage')
|
||||
/* 需要权限判断的路由 */
|
||||
const dynamicRoutes = [
|
||||
{
|
||||
path: '/order',
|
||||
component: Order,
|
||||
name: 'order-manage',
|
||||
meta: {
|
||||
name: '订单管理',
|
||||
icon: 'example'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'order-list',
|
||||
component: OrderList,
|
||||
meta: {
|
||||
name: '订单列表',
|
||||
icon: 'table'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'product',
|
||||
name: 'product-manage',
|
||||
component: ProductManage,
|
||||
meta: {
|
||||
name: '生产管理',
|
||||
icon: 'user'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'product-list',
|
||||
component: ProductionList,
|
||||
meta: {
|
||||
name: '生产列表',
|
||||
icon: 'table'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'review',
|
||||
name: 'review-manage',
|
||||
component: ReviewManage,
|
||||
meta: {
|
||||
name: '审核管理',
|
||||
icon: 'eye'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'returnGoods',
|
||||
name: 'return-goods',
|
||||
component: ReturnGoods,
|
||||
meta: {
|
||||
name: '退货管理',
|
||||
icon: 'nested'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/goods',
|
||||
component: Goods,
|
||||
name: 'goods',
|
||||
meta: {
|
||||
name: '产品管理',
|
||||
icon: 'user'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'goods-list',
|
||||
component: GoodsList,
|
||||
meta: {
|
||||
name: '产品列表',
|
||||
icon: 'table'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'classify',
|
||||
name: 'goods-classify',
|
||||
component: GoodsClassify,
|
||||
meta: {
|
||||
name: '产品分类',
|
||||
icon: 'tree'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/permission',
|
||||
component: Permission,
|
||||
name: 'permission',
|
||||
meta: {
|
||||
name: '权限管理',
|
||||
icon: 'table'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'user',
|
||||
name: 'user-manage',
|
||||
component: UserManage,
|
||||
meta: {
|
||||
name: '用户管理',
|
||||
icon: 'table'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
name: 'role-manage',
|
||||
component: RoleManage,
|
||||
meta: {
|
||||
name: '角色管理',
|
||||
icon: 'eye'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'menu',
|
||||
name: 'menu-manage',
|
||||
component: MenuManage,
|
||||
meta: {
|
||||
name: '菜单管理',
|
||||
icon: 'tree'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default dynamicRoutes
|
||||
@ -0,0 +1,54 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
import Login from '@/pages/login/login'
|
||||
import NotFound from '@/pages/errorPage/404'
|
||||
import Forbidden from '@/pages/errorPage/403'
|
||||
import Layout from '@/pages/layout/index'
|
||||
import Home from '@/pages/home/index'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
/* 初始路由 */
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/login',
|
||||
component: Login
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
/* 准备动态添加的路由 */
|
||||
export const DynamicRoutes = [
|
||||
{
|
||||
path: '',
|
||||
component: Layout,
|
||||
name: 'container',
|
||||
redirect: 'home',
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
name: '首页'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
path: 'home',
|
||||
component: Home,
|
||||
name: 'home',
|
||||
meta: {
|
||||
name: '首页',
|
||||
icon: 'tree'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/403',
|
||||
component: Forbidden
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
component: NotFound
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
import state from './state'
|
||||
import getters from './getters'
|
||||
import modules from './modules'
|
||||
import actions from './actions'
|
||||
import mutations from './mutations'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
modules
|
||||
})
|
||||
@ -0,0 +1,5 @@
|
||||
import permission from './modules/permission'
|
||||
|
||||
export default {
|
||||
permission
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import { fetchPermission } from '@/api/permission'
|
||||
import router, { DynamicRoutes } from '@/router/index'
|
||||
import { recursionRouter } from '@/utils/recursion-router'
|
||||
import dynamicRouter from '@/router/dynamic-router'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
permissionList: null /** 所有路由 */,
|
||||
sidebarMenu: [] /** 导航菜单 */,
|
||||
currentMenu: '' /** 当前active导航菜单 */,
|
||||
control_list: [] /** 完整的权限列表 */,
|
||||
avatar: ''/** 头像 */,
|
||||
account: ''/** 用户角色 */
|
||||
},
|
||||
getters: {},
|
||||
mutations: {
|
||||
SET_AVATAR(state, avatar) {
|
||||
state.avatar = avatar
|
||||
},
|
||||
SET_ACCOUNT(state, account) {
|
||||
state.account = account
|
||||
},
|
||||
SET_PERMISSION(state, routes) {
|
||||
state.permissionList = routes
|
||||
},
|
||||
CLEAR_PERMISSION(state) {
|
||||
state.permissionList = null
|
||||
},
|
||||
SET_MENU(state, menu) {
|
||||
state.sidebarMenu = menu
|
||||
},
|
||||
CLEAR_MENU(state) {
|
||||
state.sidebarMenu = []
|
||||
},
|
||||
SET_CURRENT_MENU(state, currentMenu) {
|
||||
state.currentMenu = currentMenu
|
||||
},
|
||||
SET_CONTROL_LIST(state, list) {
|
||||
state.control_list = list
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async FETCH_PERMISSION({ commit, state }) {
|
||||
let permissionList = await fetchPermission()
|
||||
commit('SET_AVATAR', permissionList.avatar)
|
||||
commit('SET_ACCOUNT', permissionList.name)
|
||||
let routes = recursionRouter(permissionList.data, dynamicRouter)
|
||||
let MainContainer = DynamicRoutes.find(v => v.path === '')
|
||||
let children = MainContainer.children
|
||||
commit('SET_CONTROL_LIST', [...children, ...dynamicRouter])
|
||||
children.push(...routes)
|
||||
commit('SET_MENU', children)
|
||||
let initialRoutes = router.options.routes
|
||||
router.addRoutes(DynamicRoutes)
|
||||
commit('SET_PERMISSION', [...initialRoutes, ...DynamicRoutes])
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
LOGIN_IN(state, token) {
|
||||
state.UserToken = token
|
||||
},
|
||||
LOGIN_OUT(state) {
|
||||
state.UserToken = ''
|
||||
},
|
||||
toggleNavCollapse(state) {
|
||||
state.isSidebarNavCollapse = !state.isSidebarNavCollapse
|
||||
},
|
||||
setCrumbList(state, list) {
|
||||
state.crumbList = list
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
get UserToken() {
|
||||
return localStorage.getItem('token')
|
||||
},
|
||||
set UserToken(value) {
|
||||
localStorage.setItem('token', value)
|
||||
},
|
||||
/* 导航菜单是否折叠 */
|
||||
isSidebarNavCollapse: false,
|
||||
/* 面包屑导航列表 */
|
||||
crumbList: []
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
$mainColor:#151519;
|
||||
|
||||
@mixin table-center {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@mixin poa-center($w, $h) {
|
||||
position: absolute;
|
||||
width: $w;
|
||||
height: $h;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin t-overflow($line:1) {
|
||||
@if $line==1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@else {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $line;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,171 @@
|
||||
@charset "utf-8";
|
||||
|
||||
html {
|
||||
|
||||
color: #000;
|
||||
background: #fff;
|
||||
overflow-y: scroll;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
html * {
|
||||
outline: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
pre,
|
||||
code,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
input,
|
||||
textarea,
|
||||
p,
|
||||
blockquote,
|
||||
th,
|
||||
td,
|
||||
hr,
|
||||
button,
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
abbr,
|
||||
acronym {
|
||||
border: 0;
|
||||
font-variant: normal;
|
||||
}
|
||||
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
address,
|
||||
caption,
|
||||
cite,
|
||||
code,
|
||||
dfn,
|
||||
em,
|
||||
th,
|
||||
i,
|
||||
var {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
caption,
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ins,
|
||||
a,
|
||||
a:active,
|
||||
a:visited,
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
visibility: hidden;
|
||||
;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
.el-menu {
|
||||
border: none;
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
background: none !important;
|
||||
}
|
||||
i.el-submenu__icon-arrow {
|
||||
color: #ddd;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.el-menu-item-group__title {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-breadcrumb {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
.el-breadcrumb__inner {
|
||||
&.is-link {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: #424040 !important;
|
||||
}
|
||||
}
|
||||
.is-last-link .is-link {
|
||||
font-weight: normal;
|
||||
color: #999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.sidebar-container {
|
||||
transition: width .28s;
|
||||
width: 180px ;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
background: rgba(0,0,0,0.5)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.sidebar-container.navCollapsed {
|
||||
width: 63px ;
|
||||
}
|
||||
|
||||
.navCollapsed{
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
&>span {
|
||||
display: none;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
/* 侧边栏 */
|
||||
.sidebar {
|
||||
width: 200px !important;
|
||||
height: 100%;
|
||||
background: #304156;
|
||||
transition: all 0.25s;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
overflow-x: hidden;
|
||||
.iconfont {
|
||||
margin-right: 8px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
>div.menu-container>li.el-menu-item,
|
||||
>div.menu-container>li.el-submenu>.el-submenu__title {
|
||||
border-bottom: 1px solid rgba(238, 238, 238, 0.1);
|
||||
}
|
||||
.el-menu-item {
|
||||
background: #304156 !important;
|
||||
}
|
||||
/* 菜单hover时的背景 */
|
||||
.el-submenu__title:hover,
|
||||
.el-menu-item:hover {
|
||||
background: #223041 !important;
|
||||
}
|
||||
/* 菜单active时的背景 */
|
||||
/* .el-menu-item.is-active {
|
||||
background: #293748 !important;
|
||||
} */
|
||||
}
|
||||
|
||||
/* 主体内容 */
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
margin-left: 200px;
|
||||
transition: margin-left 0.25s;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 60px 20px 0 20px;
|
||||
}
|
||||
|
||||
/* 折叠菜单下的样式 */
|
||||
.navCollapsed {
|
||||
.sidebar {
|
||||
width: 64px !important;
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
.iconfont+span {
|
||||
display: none;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 64px;
|
||||
}
|
||||
.aside__top{
|
||||
left:64px!important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
@import './normalize.scss';
|
||||
@import './reset_element.scss';
|
||||
@import './sidebar.scss';
|
||||
@import './loading.scss';
|
||||
@import url('//at.alicdn.com/t/font_641452_q3ah7ae4qvndn29.css');
|
||||
@ -0,0 +1,35 @@
|
||||
.ajax-loading {
|
||||
display: none;
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 0 40px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
z-index: 9999;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
img {
|
||||
width: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9998;
|
||||
background: rgb(255, 255, 255);
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
/**
|
||||
*
|
||||
* @param {Array} userRouter 后台返回的用户权限json
|
||||
* @param {Array} allRouter 前端配置好的所有动态路由的集合
|
||||
* @return {Array} realRoutes 过滤后的路由
|
||||
*/
|
||||
|
||||
export function recursionRouter(userRouter = [], allRouter = []) {
|
||||
var realRoutes = allRouter
|
||||
.filter(item => userRouter.includes(item.name))
|
||||
.map(item => ({
|
||||
...item,
|
||||
children: item.children
|
||||
? recursionRouter(userRouter, item.children)
|
||||
: null
|
||||
}))
|
||||
return realRoutes
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Array} routes 用户过滤后的路由
|
||||
*
|
||||
* 递归为所有有子路由的路由设置第一个children.path为默认路由
|
||||
*/
|
||||
export function setDefaultRoute(routes) {
|
||||
routes.forEach((v, i) => {
|
||||
if (v.children && v.children.length > 0) {
|
||||
v.redirect = { name: v.children[0].name }
|
||||
setDefaultRoute(v.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
jest: true
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
describe('HelloWorld.vue', () => {
|
||||
it('renders props.msg when passed', () => {
|
||||
const msg = 'new message'
|
||||
const wrapper = shallowMount(HelloWorld, {
|
||||
propsData: { msg }
|
||||
})
|
||||
expect(wrapper.text()).toMatch(msg)
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,40 @@
|
||||
const path = require('path')
|
||||
const webpack = require('webpack')
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin')
|
||||
|
||||
// dll文件存放的目录
|
||||
const dllPath = 'public/vendor'
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
// 需要提取的库文件
|
||||
vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, dllPath),
|
||||
// 保证每次打包出来的文件名都是唯一的
|
||||
filename: `[name].dll.${Math.ceil(Math.random() * 10000)}.js`,
|
||||
// vendor.dll.js中暴露出的全局变量名
|
||||
// 保持与 webpack.DllPlugin 中名称一致
|
||||
library: '[name]_[hash]'
|
||||
},
|
||||
plugins: [
|
||||
// 清除之前的dll文件
|
||||
new CleanWebpackPlugin(['*.*'], {
|
||||
root: path.join(__dirname, dllPath)
|
||||
}),
|
||||
// 设置环境变量
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: 'production'
|
||||
}
|
||||
}),
|
||||
// manifest.json 描述动态链接库包含了哪些内容
|
||||
new webpack.DllPlugin({
|
||||
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
|
||||
// 保持与 output.library 中名称一致
|
||||
name: '[name]_[hash]',
|
||||
context: process.cwd()
|
||||
})
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2016-2023 vue-manage-system
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,5 +0,0 @@
|
||||
// Generated by 'unplugin-auto-import'
|
||||
export {}
|
||||
declare global {
|
||||
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
export {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElLink: typeof import('element-plus/es')['ElLink']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
Header: typeof import('./src/components/header.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Sidebar: typeof import('./src/components/sidebar.vue')['default']
|
||||
Tags: typeof import('./src/components/tags.vue')['default']
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>vue-manage-system</title>
|
||||
<link rel="stylesheet" href="https://at.alicdn.com/t/font_830376_qzecyukz0s.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||
Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,38 +0,0 @@
|
||||
{
|
||||
"name": "vue-manage-system",
|
||||
"version": "5.3.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.0.9",
|
||||
"axios": "^0.27.2",
|
||||
"element-plus": "^2.2.14",
|
||||
"md-editor-v3": "^2.2.1",
|
||||
"pinia": "^2.0.20",
|
||||
"vue": "^3.2.37",
|
||||
"vue-cropperjs": "^5.0.0",
|
||||
"vue-router": "^4.1.3",
|
||||
"vue-schart": "^2.0.0",
|
||||
"wangeditor": "^4.7.15",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^3.0.0",
|
||||
"@vue/compiler-sfc": "^3.1.2",
|
||||
"typescript": "^4.6.4",
|
||||
"unplugin-auto-import": "^0.11.2",
|
||||
"unplugin-vue-components": "^0.22.4",
|
||||
"vite": "^3.0.0",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vue-tsc": "^0.38.4"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
{
|
||||
"list": [{
|
||||
"id": 1,
|
||||
"name": "张三",
|
||||
"money": 123,
|
||||
"address": "广东省东莞市长安镇",
|
||||
"state": "成功",
|
||||
"date": "2019-11-1",
|
||||
"thumb": "https://lin-xin.gitee.io/images/post/wms.png"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "李四",
|
||||
"money": 456,
|
||||
"address": "广东省广州市白云区",
|
||||
"state": "成功",
|
||||
"date": "2019-10-11",
|
||||
"thumb": "https://lin-xin.gitee.io/images/post/node3.png"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "王五",
|
||||
"money": 789,
|
||||
"address": "湖南省长沙市",
|
||||
"state": "失败",
|
||||
"date": "2019-11-11",
|
||||
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "赵六",
|
||||
"money": 1011,
|
||||
"address": "福建省厦门市鼓浪屿",
|
||||
"state": "成功",
|
||||
"date": "2019-10-20",
|
||||
"thumb": "https://lin-xin.gitee.io/images/post/notice.png"
|
||||
}
|
||||
],
|
||||
"pageTotal": 4
|
||||
}
|
||||
Binary file not shown.
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElConfigProvider } from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
</script>
|
||||
<style>
|
||||
@import './assets/css/main.css';
|
||||
@import './assets/css/color-dark.css';
|
||||
</style>
|
||||
@ -1,8 +0,0 @@
|
||||
import request from '../utils/request';
|
||||
|
||||
export const fetchData = () => {
|
||||
return request({
|
||||
url: './table.json',
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
.header{
|
||||
background-color: #242f42;
|
||||
}
|
||||
.login-wrap{
|
||||
background: #324157;
|
||||
}
|
||||
.plugins-tips{
|
||||
background: #eef1f6;
|
||||
}
|
||||
.plugins-tips a{
|
||||
color: #20a0ff;
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #409EFF;
|
||||
background-color: #409EFF;
|
||||
}
|
||||
.message-title{
|
||||
color: #20a0ff;
|
||||
}
|
||||
.collapse-btn:hover{
|
||||
background: rgb(40,52,70);
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
[class*=" el-icon-lx"],
|
||||
[class^=el-icon-lx] {
|
||||
font-family: lx-iconfont !important;
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
|
||||
.content-box {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
right: 0;
|
||||
top: 70px;
|
||||
bottom: 0;
|
||||
padding-bottom: 30px;
|
||||
-webkit-transition: left .3s ease-in-out;
|
||||
transition: left .3s ease-in-out;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-collapse {
|
||||
left: 65px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.crumbs {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.plugins-tips {
|
||||
padding: 20px 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-button+.el-tooltip {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-table tr:hover {
|
||||
background: #f6faff;
|
||||
}
|
||||
|
||||
.mgb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.move-enter-active,
|
||||
.move-leave-active {
|
||||
transition: opacity .1s ease;
|
||||
}
|
||||
|
||||
.move-enter-from,
|
||||
.move-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*BaseForm*/
|
||||
|
||||
.form-box {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.form-box .line {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-time-panel__content::after,
|
||||
.el-time-panel__content::before {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
[class*=" el-icon-"], [class^=el-icon-] {
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.el-sub-menu [class^=el-icon-] {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
[hidden]{
|
||||
display: none !important;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 69 KiB |
@ -1,154 +0,0 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="collapse-btn" @click="collapseChage">
|
||||
<el-icon v-if="sidebar.collapse"><Expand /></el-icon>
|
||||
<el-icon v-else><Fold /></el-icon>
|
||||
</div>
|
||||
<div class="logo">后台管理系统</div>
|
||||
<div class="header-right">
|
||||
<div class="header-user-con">
|
||||
<!-- 消息中心 -->
|
||||
<div class="btn-bell" @click="router.push('/tabs')">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="message ? `有${message}条未读消息` : `消息中心`"
|
||||
placement="bottom"
|
||||
>
|
||||
<i class="el-icon-lx-notice"></i>
|
||||
</el-tooltip>
|
||||
<span class="btn-bell-badge" v-if="message"></span>
|
||||
</div>
|
||||
<!-- 用户头像 -->
|
||||
<el-avatar class="user-avator" :size="30" :src="imgurl" />
|
||||
<!-- 用户名下拉菜单 -->
|
||||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ username }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
|
||||
<el-dropdown-item>项目仓库</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { useSidebarStore } from '../store/sidebar';
|
||||
import { useRouter } from 'vue-router';
|
||||
import imgurl from '../assets/img/img.jpg';
|
||||
|
||||
const username: string | null = localStorage.getItem('ms_username');
|
||||
const message: number = 2;
|
||||
|
||||
const sidebar = useSidebarStore();
|
||||
// 侧边栏折叠
|
||||
const collapseChage = () => {
|
||||
sidebar.handleCollapse();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (document.body.clientWidth < 1500) {
|
||||
collapseChage();
|
||||
}
|
||||
});
|
||||
|
||||
// 用户名下拉菜单选择事件
|
||||
const router = useRouter();
|
||||
const handleCommand = (command: string) => {
|
||||
if (command == 'loginout') {
|
||||
localStorage.removeItem('ms_username');
|
||||
router.push('/login');
|
||||
} else if (command == 'user') {
|
||||
router.push('/user');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
.collapse-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 0 21px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header .logo {
|
||||
float: left;
|
||||
width: 250px;
|
||||
line-height: 70px;
|
||||
}
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 50px;
|
||||
}
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-fullscreen {
|
||||
transform: rotate(45deg);
|
||||
margin-right: 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.btn-bell,
|
||||
.btn-fullscreen {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-bell-badge {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 0px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #f56c6c;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-bell .el-icon-lx-notice {
|
||||
color: #fff;
|
||||
}
|
||||
.user-name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.user-avator {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<el-menu
|
||||
class="sidebar-el-menu"
|
||||
:default-active="onRoutes"
|
||||
:collapse="sidebar.collapse"
|
||||
background-color="#324157"
|
||||
text-color="#bfcbd9"
|
||||
active-text-color="#20a0ff"
|
||||
unique-opened
|
||||
router
|
||||
>
|
||||
<template v-for="item in items">
|
||||
<template v-if="item.subs">
|
||||
<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="item.icon"></component>
|
||||
</el-icon>
|
||||
<span>{{ item.title }}</span>
|
||||
</template>
|
||||
<template v-for="subItem in item.subs">
|
||||
<el-sub-menu
|
||||
v-if="subItem.subs"
|
||||
:index="subItem.index"
|
||||
:key="subItem.index"
|
||||
v-permiss="item.permiss"
|
||||
>
|
||||
<template #title>{{ subItem.title }}</template>
|
||||
<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
|
||||
{{ threeItem.title }}
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
|
||||
{{ subItem.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
|
||||
<el-icon>
|
||||
<component :is="item.icon"></component>
|
||||
</el-icon>
|
||||
<template #title>{{ item.title }}</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useSidebarStore } from '../store/sidebar';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const items = [
|
||||
{
|
||||
icon: 'Odometer',
|
||||
index: '/dashboard',
|
||||
title: '系统首页',
|
||||
permiss: '1',
|
||||
},
|
||||
{
|
||||
icon: 'Calendar',
|
||||
index: '1',
|
||||
title: '表格相关',
|
||||
permiss: '2',
|
||||
subs: [
|
||||
{
|
||||
index: '/table',
|
||||
title: '常用表格',
|
||||
permiss: '2',
|
||||
},
|
||||
{
|
||||
index: '/import',
|
||||
title: '导入Excel',
|
||||
permiss: '2',
|
||||
},
|
||||
{
|
||||
index: '/export',
|
||||
title: '导出Excel',
|
||||
permiss: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'DocumentCopy',
|
||||
index: '/tabs',
|
||||
title: 'tab选项卡',
|
||||
permiss: '3',
|
||||
},
|
||||
{
|
||||
icon: 'Edit',
|
||||
index: '3',
|
||||
title: '表单相关',
|
||||
permiss: '4',
|
||||
subs: [
|
||||
{
|
||||
index: '/form',
|
||||
title: '基本表单',
|
||||
permiss: '5',
|
||||
},
|
||||
{
|
||||
index: '/upload',
|
||||
title: '文件上传',
|
||||
permiss: '6',
|
||||
},
|
||||
{
|
||||
index: '4',
|
||||
title: '三级菜单',
|
||||
permiss: '7',
|
||||
subs: [
|
||||
{
|
||||
index: '/editor',
|
||||
title: '富文本编辑器',
|
||||
permiss: '8',
|
||||
},
|
||||
{
|
||||
index: '/markdown',
|
||||
title: 'markdown编辑器',
|
||||
permiss: '9',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'Setting',
|
||||
index: '/icon',
|
||||
title: '自定义图标',
|
||||
permiss: '10',
|
||||
},
|
||||
{
|
||||
icon: 'PieChart',
|
||||
index: '/charts',
|
||||
title: 'schart图表',
|
||||
permiss: '11',
|
||||
},
|
||||
{
|
||||
icon: 'Warning',
|
||||
index: '/permission',
|
||||
title: '权限管理',
|
||||
permiss: '13',
|
||||
},
|
||||
{
|
||||
icon: 'CoffeeCup',
|
||||
index: '/donate',
|
||||
title: '支持作者',
|
||||
permiss: '14',
|
||||
},
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
const onRoutes = computed(() => {
|
||||
return route.path;
|
||||
});
|
||||
|
||||
const sidebar = useSidebarStore();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 70px;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar-el-menu:not(.el-menu--collapse) {
|
||||
width: 250px;
|
||||
}
|
||||
.sidebar > ul {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,168 +0,0 @@
|
||||
<template>
|
||||
<div class="tags" v-if="tags.show">
|
||||
<ul>
|
||||
<li
|
||||
class="tags-li"
|
||||
v-for="(item, index) in tags.list"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
:key="index"
|
||||
>
|
||||
<router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link>
|
||||
<el-icon @click="closeTags(index)"><Close /></el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tags-close-box">
|
||||
<el-dropdown @command="handleTags">
|
||||
<el-button size="small" type="primary">
|
||||
标签选项
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu size="small">
|
||||
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
||||
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTagsStore } from '../store/tags';
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const isActive = (path: string) => {
|
||||
return path === route.fullPath;
|
||||
};
|
||||
|
||||
const tags = useTagsStore();
|
||||
// 关闭单个标签
|
||||
const closeTags = (index: number) => {
|
||||
const delItem = tags.list[index];
|
||||
tags.delTagsItem(index);
|
||||
const item = tags.list[index] ? tags.list[index] : tags.list[index - 1];
|
||||
if (item) {
|
||||
delItem.path === route.fullPath && router.push(item.path);
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
};
|
||||
|
||||
// 设置标签
|
||||
const setTags = (route: any) => {
|
||||
const isExist = tags.list.some(item => {
|
||||
return item.path === route.fullPath;
|
||||
});
|
||||
if (!isExist) {
|
||||
if (tags.list.length >= 8) tags.delTagsItem(0);
|
||||
tags.setTagsItem({
|
||||
name: route.name,
|
||||
title: route.meta.title,
|
||||
path: route.fullPath
|
||||
});
|
||||
}
|
||||
};
|
||||
setTags(route);
|
||||
onBeforeRouteUpdate(to => {
|
||||
setTags(to);
|
||||
});
|
||||
|
||||
// 关闭全部标签
|
||||
const closeAll = () => {
|
||||
tags.clearTags();
|
||||
router.push('/');
|
||||
};
|
||||
// 关闭其他标签
|
||||
const closeOther = () => {
|
||||
const curItem = tags.list.filter(item => {
|
||||
return item.path === route.fullPath;
|
||||
});
|
||||
tags.closeTagsOther(curItem);
|
||||
};
|
||||
const handleTags = (command: string) => {
|
||||
command === 'other' ? closeOther() : closeAll();
|
||||
};
|
||||
|
||||
// 关闭当前页面的标签页
|
||||
// tags.closeCurrentTag({
|
||||
// $router: router,
|
||||
// $route: route
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tags {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
padding-right: 120px;
|
||||
box-shadow: 0 5px 10px #ddd;
|
||||
}
|
||||
|
||||
.tags ul {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tags-li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
margin: 3px 5px 2px 3px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
height: 23px;
|
||||
border: 1px solid #e9eaec;
|
||||
background: #fff;
|
||||
padding: 0 5px 0 12px;
|
||||
color: #666;
|
||||
-webkit-transition: all 0.3s ease-in;
|
||||
-moz-transition: all 0.3s ease-in;
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
|
||||
.tags-li:not(.active):hover {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tags-li-title {
|
||||
float: left;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 5px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tags-li.active .tags-li-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tags-close-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: 1px;
|
||||
text-align: center;
|
||||
width: 110px;
|
||||
height: 30px;
|
||||
background: #fff;
|
||||
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
@ -1,28 +0,0 @@
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { usePermissStore } from './store/permiss';
|
||||
import 'element-plus/dist/index.css';
|
||||
import './assets/css/icon.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(createPinia());
|
||||
app.use(router);
|
||||
|
||||
// 注册elementplus图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
// 自定义权限指令
|
||||
const permiss = usePermissStore();
|
||||
app.directive('permiss', {
|
||||
mounted(el, binding) {
|
||||
if (!permiss.key.includes(String(binding.value))) {
|
||||
el['hidden'] = true;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
app.mount('#app');
|
||||
@ -1,23 +0,0 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
interface ObjectList {
|
||||
[key: string]: string[];
|
||||
}
|
||||
|
||||
export const usePermissStore = defineStore('permiss', {
|
||||
state: () => {
|
||||
const keys = localStorage.getItem('ms_keys');
|
||||
return {
|
||||
key: keys ? JSON.parse(keys) : <string[]>[],
|
||||
defaultList: <ObjectList>{
|
||||
admin: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
|
||||
user: ['1', '2', '3', '11', '13', '14', '15']
|
||||
}
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
handleSet(val: string[]) {
|
||||
this.key = val;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,15 +0,0 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useSidebarStore = defineStore('sidebar', {
|
||||
state: () => {
|
||||
return {
|
||||
collapse: false
|
||||
};
|
||||
},
|
||||
getters: {},
|
||||
actions: {
|
||||
handleCollapse() {
|
||||
this.collapse = !this.collapse;
|
||||
}
|
||||
}
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue