123

src/assets/styles/common.scss

@@ -0,0 +1,86 @@
+//页面容器
+.page-container {
+	width: 100%;
+	height: calc(100vh - 50px);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	// 条件选择、搜索容器
+	.search-container {
+		width: 100%;
+		background-color: #fff;
+		padding: 10px 15px;
+		box-sizing: border-box;
+		margin-top: 7px;
+	}
+	//主要内容容器
+	.content-container {
+		width: 100%;
+		flex-grow: 1;
+		display: flex;
+		margin-top: 7px;
+		.main {
+			width: calc(100% - 287px);
+			height: 100%;
+			padding: 10px 15px;
+			box-sizing: border-box;
+			background-color: #fff;
+			.table-nav {
+				display: flex;
+				justify-content: space-between;
+				.tags {
+					display: flex;
+					.tag {
+						width: 90px;
+						height: 40px;
+						text-align: center;
+						line-height: 40px;
+						font-size: 14px;
+						border-top: 1px solid #dfe6ec;
+						border-left: 1px solid #dfe6ec;
+						cursor: pointer;
+						&:last-child {
+							border-right: 1px solid #dfe6ec;
+						}
+					}
+				}
+			}
+			&:first-child {
+				width: 100%;
+			}
+		}
+	}
+}
+.hasTagsView {
+	.page-container {
+		height: calc(100vh - 86px);
+	}
+}
+.message-style {
+	&.success {
+		background-color: #f0f9eb;
+	}
+	&.warning {
+		background-color: #fdf6ec;
+	}
+	&.info {
+		background-color: #f4f4f4;
+	}
+	&.error {
+		background-color: #fef0f0;
+	}
+	.el-notification__icon {
+		font-size: 30px !important;
+	}
+	.el-notification__group {
+		.el-notification__title {
+			font-size: 14px !important;
+		}
+		.el-notification__content {
+			margin: 0 !important;
+		}
+	}
+}
+a.linked {
+	color: #1890ff;
+}

src/assets/styles/element-variables.scss

@@ -17,15 +17,16 @@ $--button-font-weight: 400;
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
 
-$--table-border:1px solid#dfe6ec;
+$--table-border: 1px solid#dfe6ec;
 
+$--color-text-regular: #666;
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
-@import "~element-ui/packages/theme-chalk/src/index";
+@import '~element-ui/packages/theme-chalk/src/index';
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-  theme: $--color-primary;
+	theme: $--color-primary;
 }

src/assets/styles/index.scss

@@ -6,186 +6,188 @@
 @import './btn.scss';
 
 body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+	height: 100%;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
-  font-weight: 700;
+	font-weight: 700;
 }
 
 html {
-  height: 100%;
-  box-sizing: border-box;
+	height: 100%;
+	box-sizing: border-box;
+	font-size: 14px;
+	color: #666;
 }
 
 #app {
-  height: 100%;
+	height: 100%;
 }
 
 *,
 *:before,
 *:after {
-  box-sizing: inherit;
+	box-sizing: inherit;
 }
 
 .no-padding {
-  padding: 0px !important;
+	padding: 0px !important;
 }
 
 .padding-content {
-  padding: 4px 0;
+	padding: 4px 0;
 }
 
 a:focus,
 a:active {
-  outline: none;
+	outline: none;
 }
 
 a,
 a:focus,
 a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
+	cursor: pointer;
+	color: inherit;
+	text-decoration: none;
 }
 
 div:focus {
-  outline: none;
+	outline: none;
 }
 
 .fr {
-  float: right;
+	float: right;
 }
 
 .fl {
-  float: left;
+	float: left;
 }
 
 .pr-5 {
-  padding-right: 5px;
+	padding-right: 5px;
 }
 
 .pl-5 {
-  padding-left: 5px;
+	padding-left: 5px;
 }
 
 .block {
-  display: block;
+	display: block;
 }
 
 .pointer {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .inlineBlock {
-  display: block;
+	display: block;
 }
 
 .clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
+	&:after {
+		visibility: hidden;
+		display: block;
+		font-size: 0;
+		content: ' ';
+		clear: both;
+		height: 0;
+	}
 }
 
 aside {
-  background: #eef1f6;
-  padding: 8px 24px;
-  margin-bottom: 20px;
-  border-radius: 2px;
-  display: block;
-  line-height: 32px;
-  font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  color: #2c3e50;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  a {
-    color: #337ab7;
-    cursor: pointer;
-
-    &:hover {
-      color: rgb(32, 160, 255);
-    }
-  }
+	background: #eef1f6;
+	padding: 8px 24px;
+	margin-bottom: 20px;
+	border-radius: 2px;
+	display: block;
+	line-height: 32px;
+	font-size: 16px;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+	color: #2c3e50;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	a {
+		color: #337ab7;
+		cursor: pointer;
+
+		&:hover {
+			color: rgb(32, 160, 255);
+		}
+	}
 }
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+	padding: 20px;
 }
 
 .components-container {
-  margin: 30px 50px;
-  position: relative;
+	margin: 30px 50px;
+	position: relative;
 }
 
 .pagination-container {
-  margin-top: 30px;
+	margin-top: 30px;
 }
 
 .text-center {
-  text-align: center
+	text-align: center;
 }
 
 .sub-navbar {
-  height: 50px;
-  line-height: 50px;
-  position: relative;
-  width: 100%;
-  text-align: right;
-  padding-right: 20px;
-  transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+	height: 50px;
+	line-height: 50px;
+	position: relative;
+	width: 100%;
+	text-align: right;
+	padding-right: 20px;
+	transition: 600ms ease position;
+	background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
 
-  .subtitle {
-    font-size: 20px;
-    color: #fff;
-  }
+	.subtitle {
+		font-size: 20px;
+		color: #fff;
+	}
 
-  &.draft {
-    background: #d0d0d0;
-  }
+	&.draft {
+		background: #d0d0d0;
+	}
 
-  &.deleted {
-    background: #d0d0d0;
-  }
+	&.deleted {
+		background: #d0d0d0;
+	}
 }
 
 .link-type,
 .link-type:focus {
-  color: #337ab7;
-  cursor: pointer;
+	color: #337ab7;
+	cursor: pointer;
 
-  &:hover {
-    color: rgb(32, 160, 255);
-  }
+	&:hover {
+		color: rgb(32, 160, 255);
+	}
 }
 
 .filter-container {
-  padding-bottom: 10px;
+	padding-bottom: 10px;
 
-  .filter-item {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 10px;
-  }
+	.filter-item {
+		display: inline-block;
+		vertical-align: middle;
+		margin-bottom: 10px;
+	}
 }
 
 //refine vue-multiselect plugin
 .multiselect {
-  line-height: 16px;
+	line-height: 16px;
 }
 
 .multiselect--active {
-  z-index: 1000 !important;
+	z-index: 1000 !important;
 }

src/assets/styles/sidebar.scss

@@ -1,223 +1,222 @@
 #app {
-
-  .main-container {
-    min-height: 100%;
-    transition: margin-left .28s;
-    margin-left: $base-sidebar-width;
-    position: relative;
-  }
-
-  .sidebar-container {
-    -webkit-transition: width .28s;
-    transition: width 0.28s;
-    width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
-    height: 100%;
-    position: fixed;
-    font-size: 0px;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1001;
-    overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
-
-    // reset element-ui css
-    .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-    }
-
-    .scrollbar-wrapper {
-      overflow-x: hidden !important;
-    }
-
-    .el-scrollbar__bar.is-vertical {
-      right: 0px;
-    }
-
-    .el-scrollbar {
-      height: 100%;
-    }
-
-    &.has-logo {
-      .el-scrollbar {
-        height: calc(100% - 50px);
-      }
-    }
-
-    .is-horizontal {
-      display: none;
-    }
-
-    a {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    .svg-icon {
-      margin-right: 16px;
-    }
-
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-    }
-
-    .el-menu-item, .el-submenu__title {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-    }
-
-    // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
-      }
-    }
-
-    & .theme-dark .is-active > .el-submenu__title {
-      color: $base-menu-color-active !important;
-    }
-
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
-      min-width: $base-sidebar-width !important;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
-      }
-    }
-
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
-    & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
-
-      &:hover {
-        background-color: $base-sub-menu-hover !important;
-      }
-    }
-  }
-
-  .hideSidebar {
-    .sidebar-container {
-      width: 54px !important;
-    }
-
-    .main-container {
-      margin-left: 54px;
-    }
-
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      .el-tooltip {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
-      }
-    }
-
-    .el-submenu {
-      overflow: hidden;
-
-      &>.el-submenu__title {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
-
-      }
-    }
-
-    .el-menu--collapse {
-      .el-submenu {
-        &>.el-submenu__title {
-          &>span {
-            height: 0;
-            width: 0;
-            overflow: hidden;
-            visibility: hidden;
-            display: inline-block;
-          }
-        }
-      }
-    }
-  }
-
-  .el-menu--collapse .el-menu .el-submenu {
-    min-width: $base-sidebar-width !important;
-  }
-
-  // mobile responsive
-  .mobile {
-    .main-container {
-      margin-left: 0px;
-    }
-
-    .sidebar-container {
-      transition: transform .28s;
-      width: $base-sidebar-width !important;
-    }
-
-    &.hideSidebar {
-      .sidebar-container {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$base-sidebar-width, 0, 0);
-      }
-    }
-  }
-
-  .withoutAnimation {
-
-    .main-container,
-    .sidebar-container {
-      transition: none;
-    }
-  }
+	.main-container {
+		min-height: 100%;
+		transition: margin-left 0.28s;
+		margin-left: $base-sidebar-width;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.sidebar-container {
+		-webkit-transition: width 0.28s;
+		transition: width 0.28s;
+		width: $base-sidebar-width !important;
+		background-color: $base-menu-background;
+		height: 100%;
+		position: fixed;
+		font-size: 0px;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 1001;
+		overflow: hidden;
+		-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+		box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+
+		// reset element-ui css
+		.horizontal-collapse-transition {
+			transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+		}
+
+		.scrollbar-wrapper {
+			overflow-x: hidden !important;
+		}
+
+		.el-scrollbar__bar.is-vertical {
+			right: 0px;
+		}
+
+		.el-scrollbar {
+			height: 100%;
+		}
+
+		&.has-logo {
+			.el-scrollbar {
+				height: calc(100% - 50px);
+			}
+		}
+
+		.is-horizontal {
+			display: none;
+		}
+
+		a {
+			display: inline-block;
+			width: 100%;
+			overflow: hidden;
+		}
+
+		.svg-icon {
+			margin-right: 16px;
+		}
+
+		.el-menu {
+			border: none;
+			height: 100%;
+			width: 100% !important;
+		}
+
+		.el-menu-item,
+		.el-submenu__title {
+			overflow: hidden !important;
+			text-overflow: ellipsis !important;
+			white-space: nowrap !important;
+		}
+
+		// menu hover
+		.submenu-title-noDropdown,
+		.el-submenu__title {
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.06) !important;
+			}
+		}
+
+		& .theme-dark .is-active > .el-submenu__title {
+			color: $base-menu-color-active !important;
+		}
+
+		& .nest-menu .el-submenu > .el-submenu__title,
+		& .el-submenu .el-menu-item {
+			min-width: $base-sidebar-width !important;
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.06) !important;
+			}
+		}
+
+		& .theme-dark .nest-menu .el-submenu > .el-submenu__title,
+		& .theme-dark .el-submenu .el-menu-item {
+			background-color: $base-sub-menu-background !important;
+
+			&:hover {
+				background-color: $base-sub-menu-hover !important;
+			}
+		}
+	}
+
+	.hideSidebar {
+		.sidebar-container {
+			width: 54px !important;
+		}
+
+		.main-container {
+			margin-left: 54px;
+		}
+
+		.submenu-title-noDropdown {
+			padding: 0 !important;
+			position: relative;
+
+			.el-tooltip {
+				padding: 0 !important;
+
+				.svg-icon {
+					margin-left: 20px;
+				}
+			}
+		}
+
+		.el-submenu {
+			overflow: hidden;
+
+			& > .el-submenu__title {
+				padding: 0 !important;
+
+				.svg-icon {
+					margin-left: 20px;
+				}
+			}
+		}
+
+		.el-menu--collapse {
+			.el-submenu {
+				& > .el-submenu__title {
+					& > span {
+						height: 0;
+						width: 0;
+						overflow: hidden;
+						visibility: hidden;
+						display: inline-block;
+					}
+				}
+			}
+		}
+	}
+
+	.el-menu--collapse .el-menu .el-submenu {
+		min-width: $base-sidebar-width !important;
+	}
+
+	// mobile responsive
+	.mobile {
+		.main-container {
+			margin-left: 0px;
+		}
+
+		.sidebar-container {
+			transition: transform 0.28s;
+			width: $base-sidebar-width !important;
+		}
+
+		&.hideSidebar {
+			.sidebar-container {
+				pointer-events: none;
+				transition-duration: 0.3s;
+				transform: translate3d(-$base-sidebar-width, 0, 0);
+			}
+		}
+	}
+
+	.withoutAnimation {
+		.main-container,
+		.sidebar-container {
+			transition: none;
+		}
+	}
 }
 
 // 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: rgba(0, 0, 0, 0.06) !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
-    }
-  }
+	& > .el-menu {
+		.svg-icon {
+			margin-right: 16px;
+		}
+	}
+
+	.nest-menu .el-submenu > .el-submenu__title,
+	.el-menu-item {
+		&:hover {
+			// you can use $subMenuHover
+			background-color: rgba(0, 0, 0, 0.06) !important;
+		}
+	}
+
+	// the scroll bar appears when the subMenu is too long
+	> .el-menu--popup {
+		max-height: 100vh;
+		overflow-y: auto;
+
+		&::-webkit-scrollbar-track-piece {
+			background: #d3dce6;
+		}
+
+		&::-webkit-scrollbar {
+			width: 6px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: #99a9bf;
+			border-radius: 20px;
+		}
+	}
 }

src/components/SizeSelect/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-dropdown trigger="click" @command="handleSetSize">
+    <div>
+      <svg-icon class-name="size-icon" icon-class="size" />
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <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
+    }
+  },
+  methods: {
+    handleSetSize(size) {
+      this.$ELEMENT.size = size
+      this.$store.dispatch('app/setSize', size)
+      this.refreshView()
+      this.$message({
+        message: 'Switch Size Success',
+        type: 'success'
+      })
+    },
+    refreshView() {
+      // In order to make the cached page re-rendered
+      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
+
+      const { fullPath } = this.$route
+
+      this.$nextTick(() => {
+        this.$router.replace({
+          path: '/redirect' + fullPath
+        })
+      })
+    }
+  }
+
+}
+</script>

src/components/iFrame/index.vue

@@ -1,36 +1,31 @@
 <template>
-  <div v-loading="loading" :style="'height:' + height">
-    <iframe
-      :src="src"
-      frameborder="no"
-      style="width: 100%; height: 100%"
-      scrolling="auto"
-    />
-  </div>
+	<div v-loading="loading" :style="'height:' + height">
+		<iframe :src="src" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
+	</div>
 </template>
 <script>
-export default {
-  props: {
-    src: {
-      type: String,
-      required: true
-    },
-  },
-  data() {
-    return {
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true,
-      url: this.src
-    };
-  },
-  mounted: function () {
-    setTimeout(() => {
-      this.loading = false;
-    }, 300);
-    const that = this;
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
-  }
-};
+	export default {
+		props: {
+			src: {
+				type: String,
+				required: true
+			}
+		},
+		data() {
+			return {
+				height: document.documentElement.clientHeight - 94.5 + 'px;',
+				loading: true,
+				url: this.src
+			}
+		},
+		mounted: function () {
+			setTimeout(() => {
+				this.loading = false
+			}, 300)
+			const that = this
+			window.onresize = function temp() {
+				that.height = document.documentElement.clientHeight - 94.5 + 'px;'
+			}
+		}
+	}
 </script>

src/components/shortcutMenu/index.vue

@@ -0,0 +1,93 @@
+<template>
+	<div class="shortcut" :style="{ height: moreStatus ? 'auto' : '50px' }" @mouseleave="moreClose">
+		<div class="tags" @mouseenter="moreOpen">
+			<router-link v-for="i in 20" :key="i" to="/" class="tag">
+				<span>系统管理</span>
+				<i class="el-icon-error" v-show="delStatus"></i>
+			</router-link>
+		</div>
+		<div class="btns">
+			<a href="javascript:void(0);" title="删除" @click="delStatus = !delStatus">
+				<i class="el-icon-delete"></i>
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				moreStatus: false,
+				delStatus: false
+			}
+		},
+		computed: {
+			theme() {
+				return this.$store.state.settings.theme
+			}
+		},
+		methods: {
+			isActive(route) {
+				return route.path === this.$route.path
+			},
+			activeStyle(tag) {
+				if (!this.isActive(tag)) return {}
+				return {
+					'background-color': this.theme,
+					'border-color': this.theme
+				}
+			},
+			moreOpen() {
+				this.moreStatus = true
+			},
+			moreClose() {
+				this.moreStatus = false
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.shortcut {
+		min-height: 50px;
+		line-height: 50px;
+		padding: 0 10px;
+		overflow: hidden;
+		display: flex;
+		.tags {
+			flex: 1;
+			.tag {
+				font-size: 14px;
+				color: #999093;
+				margin-right: 20px;
+				display: inline-block;
+				position: relative;
+				i {
+					position: absolute;
+					top: 20%;
+					right: -10px;
+				}
+			}
+		}
+		.btns {
+			width: 50px;
+			display: flex;
+			justify-content: space-between;
+			.more-open i {
+				transform: rotate(-90deg);
+				-webkit-transform: rotate(-90deg);
+				-moz-transform: rotate(-90deg);
+				-o-transform: rotate(-90deg);
+				-mz-transform: rotate(-90deg);
+			}
+			.more-close i {
+				transform: rotate(90deg);
+				-webkit-transform: rotate(90deg);
+				-moz-transform: rotate(90deg);
+				-o-transform: rotate(90deg);
+				-mz-transform: rotate(90deg);
+			}
+		}
+	}
+</style>

src/components/treeChoice/index.vue

@@ -0,0 +1,57 @@
+<template>
+	<div class="tree-choice">
+		<el-input placeholder="输入名称搜索" v-model="filterText" style="margin-bottom: 10px"></el-input>
+		<el-tree :data="dataList" node-key="id" default-expand-all :highlight-current="true" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" @node-click="nodeClick">
+			<span class="custom-tree-node" slot-scope="{ data }">
+				<span>{{ data.menuName }}</span>
+			</span>
+		</el-tree>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			dataList: Array,
+			nodeKey: {
+				type: String,
+				default: 'id'
+			},
+			nodeVal: {
+				type: String,
+				default: 'name'
+			}
+		},
+		data() {
+			return {
+				//搜索字段
+				filterText: ''
+			}
+		},
+		watch: {
+			filterText(val) {
+				this.$refs.tree.filter(val)
+			}
+		},
+		methods: {
+			//搜索过滤节点
+			filterNode(value, data) {
+				if (!value) return true
+				return data[this.nodeVal].indexOf(value) !== -1
+			},
+			nodeClick(data) {
+				this.$emit('itemClick', data)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.tree-choice {
+		background-color: #fff;
+		padding: 10px 15px;
+		width: 280px;
+		margin-right: 7px;
+		flex-shrink: 0;
+	}
+</style>

src/layout/components/AppMain.vue

@@ -1,57 +1,56 @@
 <template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <keep-alive :include="cachedViews">
-        <router-view :key="key" />
-      </keep-alive>
-    </transition>
-  </section>
+	<section class="app-main">
+		<transition name="fade-transform" mode="out-in">
+			<keep-alive :include="cachedViews">
+				<router-view :key="key" />
+			</keep-alive>
+		</transition>
+	</section>
 </template>
 
 <script>
-export default {
-  name: 'AppMain',
-  computed: {
-    cachedViews() {
-      return this.$store.state.tagsView.cachedViews
-    },
-    key() {
-      return this.$route.path
-    }
-  }
-}
+	export default {
+		name: 'AppMain',
+		computed: {
+			cachedViews() {
+				return this.$store.state.tagsView.cachedViews
+			},
+			key() {
+				return this.$route.path
+			}
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
-.app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
+	.app-main {
+		/* 50= navbar  50  */
+		min-height: calc(100vh - 50px);
+		width: 100%;
+		position: relative;
+	}
 
-.fixed-header+.app-main {
-  padding-top: 50px;
-}
+	.fixed-header + .app-main {
+		padding-top: 50px;
+	}
 
-.hasTagsView {
-  .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
-  }
+	.hasTagsView {
+		.app-main {
+			/* 84 = navbar + tags-view = 50 + 34 */
+			min-height: calc(100vh - 84px);
+		}
 
-  .fixed-header+.app-main {
-    padding-top: 84px;
-  }
-}
+		.fixed-header + .app-main {
+			padding-top: 84px;
+		}
+	}
 </style>
 
 <style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 17px;
-  }
-}
+	// fix css style bug in open el-dialog
+	.el-popup-parent--hidden {
+		.fixed-header {
+			padding-right: 17px;
+		}
+	}
 </style>

src/layout/components/Navbar.vue

@@ -2,10 +2,13 @@
 	<div class="navbar">
 		<!-- 导航伸缩按钮 -->
 		<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
+		<ShortcutMenu class="shortcut-menu" />
 		<div class="right-menu">
 			<template v-if="device !== 'mobile'">
 				<search id="header-search" class="right-menu-item" />
+				<el-tooltip content="布局大小" effect="dark" placement="bottom">
+					<size-select id="size-select" class="right-menu-item hover-effect" />
+				</el-tooltip>
 				<screenfull id="screenfull" class="right-menu-item hover-effect" />
 			</template>
 
@@ -34,12 +37,16 @@
 	import Hamburger from '@/components/Hamburger'
 	import Screenfull from '@/components/Screenfull'
 	import Search from '@/components/HeaderSearch'
+	import SizeSelect from '@/components/SizeSelect'
+	import ShortcutMenu from '@/components/shortcutMenu'
 
 	export default {
 		components: {
 			Hamburger,
 			Screenfull,
-			Search
+			Search,
+			ShortcutMenu,
+			SizeSelect
 		},
 		computed: {
 			...mapGetters(['sidebar', 'avatar', 'device']),
@@ -83,12 +90,16 @@
 
 <style lang="scss" scoped>
 	.navbar {
-		height: 50px;
+		width: 100%;
+		display: flex;
+		min-height: 50px;
 		overflow: hidden;
 		position: relative;
 		background: #fff;
 		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
+		.shortcut-menu {
+			flex: 1;
+		}
 		.hamburger-container {
 			line-height: 46px;
 			height: 100%;
@@ -117,8 +128,7 @@
 		}
 
 		.right-menu {
-			float: right;
-			height: 100%;
+			height: 50px;
 			line-height: 50px;
 
 			&:focus {

src/layout/components/Settings/index.vue

@@ -47,10 +47,10 @@
 				<el-switch v-model="tagsView" class="drawer-switch" />
 			</div>
 
-			<div class="drawer-item">
+			<!-- <div class="drawer-item">
 				<span>固定 Header</span>
 				<el-switch v-model="fixedHeader" class="drawer-switch" />
-			</div>
+			</div> -->
 
 			<div class="drawer-item">
 				<span>显示 Logo</span>

src/layout/index.vue

@@ -6,12 +6,13 @@
 		<sidebar class="sidebar-container" v-show="!enlarge" />
 		<!-- 右侧内容区域 -->
 		<div :class="{ hasTagsView: needTagsView, left0: enlarge }" class="main-container">
-			<div :class="{ 'fixed-header': fixedHeader }" v-show="!enlarge">
+			<div class="top-bar" v-show="!enlarge">
 				<!-- 顶部菜单 -->
 				<navbar />
 				<!-- tab小标签 -->
 				<tags-view v-if="needTagsView" />
 			</div>
+			<div class="empty" v-show="!enlarge"></div>
 			<!-- 主内容 -->
 			<app-main />
 			<!-- 右侧进入主题设置 -->
@@ -79,7 +80,8 @@
 		position: relative;
 		height: 100%;
 		width: 100%;
-
+		background-color: #f0f2f5;
+		overflow: hidden;
 		&.mobile.openSidebar {
 			position: fixed;
 			top: 0;
@@ -112,7 +114,21 @@
 	.mobile .fixed-header {
 		width: 100%;
 	}
+	.top-bar {
+		width: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 999;
+	}
 	.left0 {
 		margin-left: 0 !important;
 	}
+	.empty {
+		width: 100%;
+		height: 50px;
+	}
+	.hasTagsView .empty {
+		height: 84px;
+	}
 </style>

src/main.js

@@ -13,6 +13,7 @@ import router from './router'
 import directive from './directive'
 import plugins from './plugins'
 import { download } from '@/utils/request'
+import '@/assets/styles/common.scss'
 
 import './assets/icons'
 import './permission'

src/plugins/del.js

@@ -1,9 +0,0 @@
-import { MessageBox } from 'element-ui'
-
-export default function () {
-	return MessageBox.confirm('确认删除吗', '系统提示', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'warning'
-	})
-}

src/plugins/index.js

@@ -4,7 +4,6 @@ import cache from './cache'
 import modal from './modal'
 import download from './download'
 import msg from './msg'
-import del from './del'
 
 export default {
 	install(Vue) {
@@ -20,7 +19,5 @@ export default {
 		Vue.prototype.$download = download
 		// 提示框
 		Vue.prototype.$msg = msg
-		//删除确认框
-		Vue.prototype.$del = del
 	}
 }

src/plugins/msg.js

@@ -1,27 +1,29 @@
-import { Notification } from "element-ui";
 export default function (param = {}) {
-  if (!param.title) {
-    switch (param.type) {
-      case "success":
-        param.title = "成功";
-        break;
-      case "warning":
-        param.title = "警告";
-        break;
-      case "info":
-        param.title = "消息";
-        break;
-      case "error":
-        param.title = "错误";
-        break;
-    }
-  }
-  if (!param.message) return;
-  this.$notify({
-    title: param.title,
-    message: param.message,
-    type: param.type || "success",
-    duration: param.duration || 3000,
-    customClass: "elemsg-notify",
-  });
+	if (!param.title) {
+		switch (param.type) {
+			case 'success':
+				param.title = '成功'
+				break
+			case 'warning':
+				param.title = '警告'
+				break
+			case 'info':
+				param.title = '消息'
+				break
+			case 'error':
+				param.title = '错误'
+				break
+		}
+	}
+	if (!param.title && !param.type) {
+		param.title = '成功'
+	}
+	if (!param.message) return
+	this.$notify({
+		title: param.title,
+		message: param.message,
+		type: param.type || 'success',
+		duration: param.duration || 3000,
+		customClass: 'message-style ' + (param.type || 'success')
+	})
 }

src/store/modules/user.js

@@ -63,18 +63,20 @@ const user = {
 			return new Promise((resolve, reject) => {
 				getInfo()
 					.then((res) => {
-						const user = res.user
-						const avatar = user.avatar == '' ? require('@/assets/images/profile.jpg') : process.env.VUE_APP_BASE_API + user.avatar
-						if (res.roles && res.roles.length > 0) {
-							// 验证返回的roles是否是一个非空数组
-							commit('SET_ROLES', res.roles)
-							commit('SET_PERMISSIONS', res.permissions)
-						} else {
-							commit('SET_ROLES', ['ROLE_DEFAULT'])
+						if (res.code == 200) {
+							const user = res.user
+							const avatar = user.avatar == '' ? require('@/assets/images/profile.jpg') : process.env.VUE_APP_BASE_API + user.avatar
+							if (res.roles && res.roles.length > 0) {
+								// 验证返回的roles是否是一个非空数组
+								commit('SET_ROLES', res.roles)
+								commit('SET_PERMISSIONS', res.permissions)
+							} else {
+								commit('SET_ROLES', ['ROLE_DEFAULT'])
+							}
+							commit('SET_NAME', user.userName)
+							commit('SET_AVATAR', avatar)
+							resolve(res)
 						}
-						commit('SET_NAME', user.userName)
-						commit('SET_AVATAR', avatar)
-						resolve(res)
 					})
 					.catch((error) => {
 						reject(error)

src/views/system/levelPosition/index.vue

@@ -1,113 +1,118 @@
 <template>
-	<div class="app-container">
-		<div class="item">
-			<div class="left_tag">
-				<div class="role border_role" :class="{ activeClass: tabIndex == 1 }" @click="toTab1">级别</div>
-				<div class="role" :class="{ activeClass: tabIndex == 2 }">职务</div>
-			</div>
-			<div class="right_add">
-				<el-button type="primary" icon="el-icon-plus" class="add_btn" v-show="tabIndex == 1" @click="addLevel" v-hasPermi="['system:levelPosition:addLevel']">添加</el-button>
-				<el-button type="primary" icon="el-icon-plus" class="add_btn" v-show="tabIndex == 2" @click="addPost" v-hasPermi="['system:levelPosition:addPost']">添加</el-button>
+	<div class="page-container">
+		<div class="content-container">
+			<div class="main">
+				<div class="table-nav">
+					<div class="tags">
+						<div class="tag" :style="isActive(1)" @click="toTab1">级别</div>
+						<div class="tag" :style="isActive(2)" @click="toTab2">职务</div>
+					</div>
+					<div class="actions">
+						<el-button type="primary" plain size="small " v-show="tabIndex == 1" @click="addLevel" v-hasPermi="['system:levelPosition:addLevel']">添加</el-button>
+						<el-button type="primary" plain size="small " v-show="tabIndex == 2" @click="addPost" v-hasPermi="['system:levelPosition:addPost']">添加</el-button>
+					</div>
+				</div>
+				<!-- 级别表格 -->
+				<el-table
+					v-loading="loading"
+					:data="levelList"
+					border
+					:header-cell-style="{ 'text-align': 'center' }"
+					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
+					highlight-current-row
+					@current-change="rowClick"
+					v-show="tabIndex == 1"
+				>
+					<el-table-column label="级别" prop="levelName" width="200">
+						<template slot-scope="scope">
+							<a href="javascript:void(0);" class="linked" @click="toTab2">{{ scope.row.levelName }}</a>
+						</template>
+					</el-table-column>
+					<el-table-column label="黑星" prop="blackStar" width="100" />
+					<el-table-column label="红星" prop="redStar" width="100" />
+					<el-table-column label="描述" prop="remarks" width="500" />
+					<el-table-column label="操作" class-name="small-padding fixed-width">
+						<template slot-scope="scope">
+							<el-button size="mini" type="text" icon="el-icon-edit" @click="updLevel(scope.row)" v-hasPermi="['system:levelPosition:updLevel']">编辑</el-button>
+							<el-button size="mini" type="text" icon="el-icon-delete" @click="delLevel(scope.row)" v-hasPermi="['system:levelPosition:delLevel']">删除</el-button>
+							<el-button size="mini" type="text" icon="el-icon-top" @click="levelUpOrder(scope.row)" v-hasPermi="['system:levelPosition:upLevel']">上升</el-button>
+							<el-button size="mini" type="text" icon="el-icon-bottom" @click="levelDownOrder(scope.row)" v-hasPermi="['system:levelPosition:downLevel']">下降</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<!-- 职务表格 -->
+				<el-table v-loading="loading" :data="postList" border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" v-show="tabIndex == 2">
+					<el-table-column label="职务" prop="jobName" width="150" />
+					<el-table-column label="级别" width="150">
+						<template slot-scope="scope">
+							{{ getLevelName(scope.row.levelId) }}
+						</template>
+					</el-table-column>
+					<el-table-column label="部门" width="150">
+						<template slot-scope="scope">
+							{{ getDeptName(scope.row.deptId) }}
+						</template>
+					</el-table-column>
+					<el-table-column label="描述" prop="remarks" width="400" />
+					<el-table-column label="操作" class-name="small-padding fixed-width">
+						<template slot-scope="scope">
+							<el-button size="mini" type="text" icon="el-icon-edit" @click="updPost(scope.row)" v-hasPermi="['system:levelPosition:updPost']">编辑</el-button>
+							<el-button size="mini" type="text" icon="el-icon-delete" @click="delPost(scope.row)" v-hasPermi="['system:levelPosition:delPost']">删除</el-button>
+							<el-button size="mini" type="text" icon="el-icon-top" @click="postUpOrder(scope.row)" v-hasPermi="['system:levelPosition:upPost']">上升</el-button>
+							<el-button size="mini" type="text" icon="el-icon-bottom" @click="postDownOrder(scope.row)" v-hasPermi="['system:levelPosition:downPost']">下降</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<!-- 添加修改级别弹窗 -->
+				<el-dialog title="编辑级别" :visible.sync="levelShow" width="30%">
+					<el-form ref="levelForm" :model="levelForm" :rules="levelRules" label-width="100px">
+						<el-form-item label="级别" prop="levelName">
+							<div style="width: 200px"><el-input v-model="levelForm.levelName" placeholder="请输入级别" /></div>
+						</el-form-item>
+						<el-form-item label="黑星" prop="blackStar">
+							<el-input-number v-model="levelForm.blackStar" step-strictly :min="0"></el-input-number>
+						</el-form-item>
+						<el-form-item label="红星" prop="redStar">
+							<el-input-number v-model="levelForm.redStar" step-strictly :min="0"></el-input-number>
+						</el-form-item>
+						<el-form-item label="描述" prop="remarks">
+							<div style="width: 300px"><el-input v-model="levelForm.remarks" placeholder="请输入描述" /></div>
+						</el-form-item>
+					</el-form>
+					<div slot="footer" class="dialog-footer">
+						<el-button type="primary" @click="levelSub">确 定</el-button>
+						<el-button @click="levelCancel">取 消</el-button>
+					</div>
+				</el-dialog>
+				<!-- 添加修改职务弹窗 -->
+				<el-dialog title="编辑职务" :visible.sync="postShow" width="30%">
+					<el-form ref="postForm" :model="postForm" :rules="postRules" label-width="100px">
+						<el-form-item label="职务" prop="jobName">
+							<div style="width: 200px"><el-input v-model="postForm.jobName" placeholder="请输入职务" /></div>
+						</el-form-item>
+						<el-form-item label="部门" prop="deptId">
+							<el-cascader
+								v-model="deptIds"
+								:options="deptTree"
+								:props="{ expandTrigger: 'hover', value: 'deptId', label: 'deptName', checkStrictly: true }"
+								@change="deptChange"
+								:show-all-levels="false"
+							></el-cascader>
+						</el-form-item>
+						<el-form-item label="级别" prop="levelName">
+							<div style="width: 200px"><el-input disabled v-model="postForm.levelName" placeholder="请输入职务" /></div>
+						</el-form-item>
+						<el-form-item label="描述" prop="remarks">
+							<div style="width: 300px"><el-input v-model="postForm.remarks" placeholder="请输入描述" /></div>
+						</el-form-item>
+					</el-form>
+					<div slot="footer" class="dialog-footer">
+						<el-button type="primary" @click="postSub">确 定</el-button>
+						<el-button @click="postCancel">取 消</el-button>
+					</div>
+				</el-dialog>
 			</div>
 		</div>
-		<!-- 级别表格 -->
-		<el-table
-			v-loading="loading"
-			:data="levelList"
-			border
-			:header-cell-style="{ 'text-align': 'center' }"
-			:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
-			@row-dblclick="toTab2"
-			v-show="tabIndex == 1"
-		>
-			<el-table-column label="级别" prop="levelName" width="200">
-				<template slot-scope="scope">
-					<a href="javascript:void(0);">{{ scope.row.levelName }}</a>
-				</template>
-			</el-table-column>
-			<el-table-column label="黑星" prop="blackStar" width="100" />
-			<el-table-column label="红星" prop="redStar" width="100" />
-			<el-table-column label="描述" prop="remarks" width="500" />
-			<el-table-column label="操作" class-name="small-padding fixed-width">
-				<template slot-scope="scope">
-					<el-button size="mini" type="text" icon="el-icon-edit" @click="updLevel(scope.row)" v-hasPermi="['system:levelPosition:updLevel']">编辑</el-button>
-					<el-button size="mini" type="text" icon="el-icon-delete" @click="delLevel(scope.row)" v-hasPermi="['system:levelPosition:delLevel']">删除</el-button>
-					<el-button size="mini" type="text" icon="el-icon-top" @click="levelUpOrder(scope.row)" v-hasPermi="['system:levelPosition:upLevel']">上升</el-button>
-					<el-button size="mini" type="text" icon="el-icon-bottom" @click="levelDownOrder(scope.row)" v-hasPermi="['system:levelPosition:downLevel']">下降</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
-		<!-- 职务表格 -->
-		<el-table v-loading="loading" :data="postList" border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" v-show="tabIndex == 2">
-			<el-table-column label="职务" prop="jobName" width="150" />
-			<el-table-column label="级别" width="150">
-				<template slot-scope="scope">
-					{{ getLevelName(scope.row.levelId) }}
-				</template>
-			</el-table-column>
-			<el-table-column label="部门" width="150">
-				<template slot-scope="scope">
-					{{ getDeptName(scope.row.deptId) }}
-				</template>
-			</el-table-column>
-			<el-table-column label="描述" prop="remarks" width="400" />
-			<el-table-column label="操作" class-name="small-padding fixed-width">
-				<template slot-scope="scope">
-					<el-button size="mini" type="text" icon="el-icon-edit" @click="updPost(scope.row)" v-hasPermi="['system:levelPosition:updPost']">编辑</el-button>
-					<el-button size="mini" type="text" icon="el-icon-delete" @click="delPost(scope.row)" v-hasPermi="['system:levelPosition:delPost']">删除</el-button>
-					<el-button size="mini" type="text" icon="el-icon-top" @click="postUpOrder(scope.row)" v-hasPermi="['system:levelPosition:upPost']">上升</el-button>
-					<el-button size="mini" type="text" icon="el-icon-bottom" @click="postDownOrder(scope.row)" v-hasPermi="['system:levelPosition:downPost']">下降</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
-		<!-- 添加修改级别弹窗 -->
-		<el-dialog title="编辑级别" :visible.sync="levelShow" width="30%">
-			<el-form ref="levelForm" :model="levelForm" :rules="levelRules" label-width="100px">
-				<el-form-item label="级别" prop="levelName">
-					<div style="width: 200px"><el-input v-model="levelForm.levelName" placeholder="请输入级别" /></div>
-				</el-form-item>
-				<el-form-item label="黑星" prop="blackStar">
-					<el-input-number v-model="levelForm.blackStar" step-strictly :min="0"></el-input-number>
-				</el-form-item>
-				<el-form-item label="红星" prop="redStar">
-					<el-input-number v-model="levelForm.redStar" step-strictly :min="0"></el-input-number>
-				</el-form-item>
-				<el-form-item label="描述" prop="remarks">
-					<div style="width: 300px"><el-input v-model="levelForm.remarks" placeholder="请输入描述" /></div>
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button type="primary" @click="levelSub">确 定</el-button>
-				<el-button @click="levelCancel">取 消</el-button>
-			</div>
-		</el-dialog>
-		<!-- 添加修改职务弹窗 -->
-		<el-dialog title="编辑职务" :visible.sync="postShow" width="30%">
-			<el-form ref="postForm" :model="postForm" :rules="postRules" label-width="100px">
-				<el-form-item label="职务" prop="jobName">
-					<div style="width: 200px"><el-input v-model="postForm.jobName" placeholder="请输入职务" /></div>
-				</el-form-item>
-				<el-form-item label="部门" prop="deptId">
-					<el-cascader
-						v-model="deptIds"
-						:options="deptTree"
-						:props="{ expandTrigger: 'hover', value: 'deptId', label: 'deptName', checkStrictly: true }"
-						@change="deptChange"
-						:show-all-levels="false"
-					></el-cascader>
-				</el-form-item>
-				<el-form-item label="级别" prop="levelName">
-					<div style="width: 200px"><el-input disabled v-model="postForm.levelName" placeholder="请输入职务" /></div>
-				</el-form-item>
-				<el-form-item label="描述" prop="remarks">
-					<div style="width: 300px"><el-input v-model="postForm.remarks" placeholder="请输入描述" /></div>
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button type="primary" @click="postSub">确 定</el-button>
-				<el-button @click="postCancel">取 消</el-button>
-			</div>
-		</el-dialog>
 	</div>
 </template>
 
@@ -186,7 +191,18 @@
 				}
 			})
 		},
+		computed: {
+			theme() {
+				return this.$store.state.settings.theme
+			}
+		},
 		methods: {
+			isActive(index) {
+				if (this.tabIndex != index) return {}
+				return {
+					color: this.theme
+				}
+			},
 			//获取级别数据
 			getLevelList() {
 				if (!checkPermi(['system:levelPosition:listLevel'])) {
@@ -248,7 +264,8 @@
 			},
 			//删除级别
 			delLevel(row) {
-				this.$del()
+				this.$modal
+					.confirm()
 					.then(() => {
 						levelDel(row.levelId).then((res) => {
 							if (res.code == 200) {
@@ -361,14 +378,17 @@
 			toTab1() {
 				this.tabIndex = 1
 			},
-			//跳转到职务
-			toTab2(data) {
-				this.postForm.levelId = data.levelId
-				this.postForm.levelName = data.levelName
-				this.tabIndex = 2
+			//级别行单击
+			rowClick(e) {
+				this.postForm.levelId = e.levelId
+				this.postForm.levelName = e.levelName
 				this.postList = []
 				this.getPostList()
 			},
+			//跳转到职务
+			toTab2() {
+				this.tabIndex = 2
+			},
 			//获取职务数据
 			getPostList() {
 				if (!checkPermi(['system:levelPosition:listPost'])) {
@@ -406,7 +426,8 @@
 			},
 			//删除职务
 			delPost(row) {
-				this.$del()
+				this.$modal
+					.confirm()
 					.then(() => {
 						postDel(row.jobId).then((res) => {
 							if (res.code == 200) {
@@ -529,44 +550,4 @@
 	}
 </script>
 
-<style scoped lang="scss">
-	.app-container {
-		width: 1154px;
-		user-select: none;
-	}
-	.role {
-		width: 90px;
-		height: 40px;
-		text-align: center;
-		line-height: 40px;
-		font-size: 14px;
-		border: 1px solid #dfe6ec;
-		border-bottom: none;
-	}
-	.add_btn {
-		width: 80px;
-		height: 35px;
-		text-align: center;
-	}
-	.item {
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-	}
-	.dataTable {
-		width: 656px;
-	}
-	.left_tag {
-		display: flex;
-	}
-	.border_role {
-		border-right: none;
-		cursor: pointer;
-	}
-	.activeClass {
-		color: #409eff;
-	}
-	.tableRowClassName {
-		background: olive;
-	}
-</style>
+<style scoped lang="scss"></style>

src/views/system/tableHead/index.vue

@@ -1,55 +1,41 @@
 <template>
-	<div class="table-head">
-		<el-row :gutter="20">
-			<el-col :span="4" :xs="24">
-				<div class="menu">
-					<el-input placeholder="输入菜单名称搜索" v-model="filterText" style="margin-bottom: 20px"></el-input>
-					<el-tree
-						:data="menuList"
-						node-key="id"
-						default-expand-all
-						:highlight-current="true"
-						:expand-on-click-node="false"
-						:filter-node-method="filterNode"
-						ref="tree"
-						@node-click="menuClick"
-					>
-						<span class="custom-tree-node" slot-scope="{ data }">
-							<span>{{ data.menuName }}</span>
-						</span>
-					</el-tree>
+	<div class="page-container">
+		<div class="search-container">
+			<el-input v-model="queryParams.columnName" placeholder="输入表头名称" clearable size="small" style="width: 150px" />
+			<el-button type="primary" plain size="small " style="margin-left: 3px" @click="getList" v-hasPermi="['system:tableHead:listTable']">搜索</el-button>
+		</div>
+		<div class="content-container">
+			<TreeChoice :dataList="menuList" nodeKey="id" nodeVal="menuName" @itemClick="menuClick" />
+			<div class="main">
+				<div class="table-nav">
+					<div class="tags">
+						<div class="tag" :style="isActive(1)">表头管理</div>
+					</div>
+					<div class="actions">
+						<el-button type="primary" plain size="small " style="margin: 0 0 10px 3px" @click="handleAdd" v-hasPermi="['system:tableHead:addTable']">添加</el-button>
+					</div>
 				</div>
-			</el-col>
-			<el-col :span="20" :xs="24">
-				<div class="main">
-					<template v-if="menuId">
-						<el-input v-model="queryParams.columnName" placeholder="输入表头名称" clearable size="small" style="width: 150px; margin-bottom: 10px" />
-						<el-button type="primary" plain size="small " style="margin: 0 0 10px 3px" @click="getList" v-hasPermi="['system:tableHead:listTable']">搜索</el-button>
-						<el-button type="primary" plain size="small " style="margin: 0 0 10px 3px" @click="handleAdd" v-hasPermi="['system:tableHead:addTable']">新增</el-button>
-					</template>
-					<el-table v-loading="loading" :data="tableHeadList">
-						<el-table-column type="index" width="100" align="center" label="序号" />
-						<el-table-column label="列名称" prop="columnName" width="120" />
-						<el-table-column label="前端列名" prop="uiColumn" :show-overflow-tooltip="true" width="150" />
-						<el-table-column label="后端列名" prop="apiColum" :show-overflow-tooltip="true" width="150" />
-						<el-table-column label="是否必须显示" align="center" width="100">
-							<template slot-scope="scope">
-								<el-switch v-model="scope.row.required" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
-							</template>
-						</el-table-column>
-						<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-							<template slot-scope="scope" v-if="scope.row.roleId !== 1">
-								<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:tableHead:updTable']">修改</el-button>
-								<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tableHead:delTable']">删除</el-button>
-							</template>
-						</el-table-column>
-					</el-table>
+				<el-table v-loading="loading" :data="tableHeadList" border>
+					<el-table-column type="index" width="100" align="center" label="序号" />
+					<el-table-column label="列名称" prop="columnName" width="120" />
+					<el-table-column label="前端列名" prop="uiColumn" :show-overflow-tooltip="true" width="150" />
+					<el-table-column label="后端列名" prop="apiColum" :show-overflow-tooltip="true" width="150" />
+					<el-table-column label="是否必须显示" align="center" width="100">
+						<template slot-scope="scope">
+							<el-switch v-model="scope.row.required" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+						</template>
+					</el-table-column>
+					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+						<template slot-scope="scope" v-if="scope.row.roleId !== 1">
+							<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:tableHead:updTable']">修改</el-button>
+							<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tableHead:delTable']">删除</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
 
-					<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-				</div>
-			</el-col>
-		</el-row>
-		<!-- 添加表头对话框 -->
+				<pagination v-show="total > queryParams.pageSize" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+			</div>
+		</div>
 		<el-dialog title="添加表头" :visible.sync="open" width="500px" append-to-body>
 			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
 				<el-form-item label="所属菜单" prop="menuId">
@@ -84,15 +70,23 @@
 <script>
 	import { listMenu, tableHeadAdd, tableHeadList, tableHeadUpd, tableHeadDel } from '@/api/system/tableHead'
 	import { checkPermi } from '@/utils/permission'
+	import TreeChoice from '@/components/treeChoice/index.vue'
 	export default {
 		name: 'TableHead',
 		dicts: ['sys_tableHead_required'],
+		components: {
+			TreeChoice
+		},
+		computed: {
+			theme() {
+				return this.$store.state.settings.theme
+			}
+		},
 		data() {
 			return {
+				tabIndex: 1,
 				//遮罩层
 				loading: false,
-				//搜索菜单
-				filterText: '',
 				//菜单数据
 				menuList: [],
 				//选中的菜单id
@@ -131,15 +125,16 @@
 				}
 			}
 		},
-		watch: {
-			filterText(val) {
-				this.$refs.tree.filter(val)
-			}
-		},
 		created() {
 			this.getMenuList()
 		},
 		methods: {
+			isActive(index) {
+				if (this.tabIndex != index) return {}
+				return {
+					color: this.theme
+				}
+			},
 			//获取菜单
 			getMenuList() {
 				listMenu().then((res) => {
@@ -148,24 +143,10 @@
 					}
 				})
 			},
-			//搜索过滤节点
-			filterNode(value, data) {
-				if (!value) return true
-				return data.menuName.indexOf(value) !== -1
-			},
-			/** 转换菜单数据结构 */
-			normalizer(node) {
-				if (node.children && !node.children.length) {
-					delete node.children
-				}
-				return {
-					id: node.menuId,
-					label: node.menuName,
-					children: node.children
-				}
-			},
+
 			//点击菜单
 			menuClick(data) {
+				console.log(data)
 				this.tableHeadList = []
 				this.menuId = data.menuId
 				this.menuName = data.menuName
@@ -205,7 +186,8 @@
 			},
 			//删除表头数据
 			handleDelete(data) {
-				this.$del()
+				this.$modal
+					.confirm()
 					.then(() => {
 						tableHeadDel(data.id).then((res) => {
 							if (res.code == 200) {
@@ -311,13 +293,4 @@
 	}
 </script>
 
-<style scoped lang="scss">
-	.table-head {
-		.menu {
-			padding: 10px;
-		}
-		.main {
-			padding: 10px;
-		}
-	}
-</style>
+<style scoped lang="scss"></style>

src/views/tool/swagger/index.vue

@@ -1,15 +1,23 @@
 <template>
-  <i-frame :src="url" />
+	<div>
+		<button v-clipboard:copy="$store.state.user.token" v-clipboard:success="succ">复制token</button>
+		<i-frame :src="url" />
+	</div>
 </template>
 <script>
-import iFrame from "@/components/iFrame/index";
-export default {
-  name: "Swagger",
-  components: { iFrame },
-  data() {
-    return {
-      url: process.env.VUE_APP_BASE_API + "/swagger-ui/index.html"
-    };
-  },
-};
+	import iFrame from '@/components/iFrame/index'
+	export default {
+		name: 'Swagger',
+		components: { iFrame },
+		data() {
+			return {
+				url: process.env.VUE_APP_BASE_API + '/swagger-ui/index.html'
+			}
+		},
+		methods: {
+			succ() {
+				this.$msg({ message: '复制成功' })
+			}
+		}
+	}
 </script>