diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index 0e428a23..a92a17c3 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -4,15 +4,24 @@
<svg-icon class-name="size-icon" icon-class="size" />
</div>
<el-dropdown-menu slot="dropdown">
- <el-dropdown-item :disabled="size==='medium'" command="medium">Medium</el-dropdown-item>
- <el-dropdown-item :disabled="size==='small'" command="small">Small</el-dropdown-item>
- <el-dropdown-item :disabled="size==='mini'" command="mini">Mini</el-dropdown-item>
+ <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">{{
+ item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
+ data() {
+ return {
+ sizeOptions: [
+ { label: 'Default', value: 'default' },
+ { label: 'Medium', value: 'medium' },
+ { label: 'Small', value: 'small' },
+ { label: 'Mini', value: 'mini' }
+ ]
+ }
+ },
computed: {
size() {
return this.$store.getters.size
diff --git a/src/components/Sticky/index.vue b/src/components/Sticky/index.vue
index e0fb7c57..5624a989 100644
--- a/src/components/Sticky/index.vue
+++ b/src/components/Sticky/index.vue
@@ -56,23 +56,27 @@ export default {
this.width = this.width + 'px'
this.isSticky = true
},
- reset() {
+ handleReset() {
if (!this.active) {
return
}
+ this.reset()
+ },
+ reset() {
this.position = ''
this.width = 'auto'
this.active = false
this.isSticky = false
},
handleScroll() {
- this.width = this.$el.getBoundingClientRect().width
+ const width = this.$el.getBoundingClientRect().width
+ this.width = width || 'auto'
const offsetTop = this.$el.getBoundingClientRect().top
if (offsetTop < this.stickyTop) {
this.sticky()
return
}
- this.reset()
+ this.handleReset()
},
handleReize() {
if (this.isSticky) {
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index 20e16398..a6b8dbce 100644
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -82,8 +82,7 @@ export default {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
- const fixedData = this.fixData(data)
- const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+ const workbook = XLSX.read(data, { type: 'array' })
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = this.getHeaderRow(worksheet)
@@ -95,14 +94,6 @@ export default {
reader.readAsArrayBuffer(rawFile)
})
},
- fixData(data) {
- let o = ''
- let l = 0
- const w = 10240
- for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
- o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
- return o
- },
getHeaderRow(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
diff --git a/src/main.js b/src/main.js
index 831b8d6a..3fe5b9bd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,8 +10,8 @@ import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/index.scss' // global css
import App from './App'
-import router from './router'
import store from './store'
+import router from './router'
import i18n from './lang' // Internationalization
import './icons' // icon
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 97de701e..13f60efb 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -36,7 +36,7 @@ function filterAsyncRouter(routes, roles) {
const permission = {
state: {
- routers: constantRouterMap,
+ routers: [],
addRouters: []
},
mutations: {
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 723f9a12..ce619fd3 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -58,8 +58,26 @@
width: 100% !important;
}
+ // menu hover
+ .submenu-title-noDropdown,
+ .el-submenu__title {
+ &:hover {
+ background-color: $menuHover !important;
+ }
+ }
+
.is-active>.el-submenu__title {
- color: #f4f4f5 !important;
+ color: $subMenuActiveText !important;
+ }
+
+ & .nest-menu .el-submenu>.el-submenu__title,
+ & .el-submenu .el-menu-item {
+ min-width: $sideBarWidth !important;
+ background-color: $subMenuBg !important;
+
+ &:hover {
+ background-color: $subMenuHover !important;
+ }
}
}
@@ -108,16 +126,6 @@
}
}
- .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
- .sidebar-container .el-submenu .el-menu-item {
- min-width: $sideBarWidth !important;
- background-color: $subMenuBg !important;
-
- &:hover {
- background-color: $menuHover !important;
- }
- }
-
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
@@ -135,6 +143,7 @@
&.hideSidebar {
.sidebar-container {
+ pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
@@ -150,10 +159,19 @@
}
}
+// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
}
+
+ .nest-menu .el-submenu>.el-submenu__title,
+ .el-menu-item {
+ &:hover {
+ // You can use $subMenuHover
+ background-color: $menuHover !important;
+ }
+ }
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 09c3e9b0..50d9b3ef 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -9,7 +9,26 @@ $yellow:#FEC171;
$panGreen: #30B08F;
//sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+
$menuBg:#304156;
+$menuHover:#263445;
+
$subMenuBg:#1f2d3d;
-$menuHover:#001528;
+$subMenuHover:#001528;
+
$sideBarWidth: 180px;
+
+// the :export directive is the magic sauce for webpack
+:export {
+ menuText: $menuText;
+ menuActiveText: $menuActiveText;
+ subMenuActiveText: $subMenuActiveText;
+ menuBg: $menuBg;
+ menuHover: $menuHover;
+ subMenuBg: $subMenuBg;
+ subMenuHover: $subMenuHover;
+ sideBarWidth: $sideBarWidth;
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 0445827b..821392e9 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -11,7 +11,12 @@ export function parseTime(time, cFormat) {
if (typeof time === 'object') {
date = time
} else {
- if (('' + time).length === 10) time = parseInt(time) * 1000
+ if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+ time = parseInt(time)
+ }
+ if ((typeof time === 'number') && (time.toString().length === 10)) {
+ time = time * 1000
+ }
date = new Date(time)
}
const formatObj = {
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
index dff85f18..48407286 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -4,10 +4,10 @@
:show-timeout="200"
:default-active="$route.path"
:collapse="isCollapse"
+ :background-color="variables.menuBg"
+ :text-color="variables.menuText"
+ :active-text-color="variables.menuActiveText"
mode="vertical"
- background-color="#304156"
- text-color="#bfcbd9"
- active-text-color="#409EFF"
>
<sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path"/>
</el-menu>
@@ -17,6 +17,7 @@
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
export default {
components: { SidebarItem },
@@ -25,6 +26,9 @@ export default {
'permission_routers',
'sidebar'
]),
+ variables() {
+ return variables
+ },
isCollapse() {
return !this.sidebar.opened
}