Merge branch 'master' of https://gitee.com/y_project/RuoYi-Vue into dev
Conflicts:
ruoyi-ui/src/assets/styles/ruoyi.scss
ruoyi-ui/src/assets/styles/sidebar.scss
ruoyi-ui/src/assets/styles/variables.scss
ruoyi-ui/src/components/ThemePicker/index.vue
ruoyi-ui/src/layout/components/Sidebar/Logo.vue
ruoyi-ui/src/layout/components/Sidebar/index.vue
ruoyi-ui/src/layout/components/TagsView/index.vue
ruoyi-ui/src/layout/index.vue
ruoyi-ui/src/store/modules/settings.js
ruoyi-ui/src/store/modules/tagsView.js
ruoyi-ui/src/views/tool/gen/index.vue
| | |
| | | margin-top: 6vh !important; |
| | | } |
| | | |
| | | .el-dialog .el-dialog__body { |
| | | .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { |
| | | overflow: auto; |
| | | overflow-x: hidden; |
| | | max-height: 70vh; |
| | |
| | | /** 表格更多操作下拉样式 */ |
| | | .el-table .el-dropdown-link { |
| | | cursor: pointer; |
| | | color: #1890ff; |
| | | color: #409EFF; |
| | | margin-left: 5px; |
| | | } |
| | | |
| | |
| | | .main-container { |
| | | min-height: 100%; |
| | | transition: margin-left .28s; |
| | | margin-left: $sideBarWidth; |
| | | margin-left: $base-sidebar-width; |
| | | position: relative; |
| | | } |
| | | |
| | | .sidebar-container { |
| | | -webkit-transition: width .28s; |
| | | transition: width 0.28s; |
| | | width: $sideBarWidth !important; |
| | | background-color: $menuBg; |
| | | width: $base-sidebar-width !important; |
| | | background-color: $base-menu-background; |
| | | height: 100%; |
| | | position: fixed; |
| | | font-size: 0px; |
| | |
| | | } |
| | | |
| | | & .theme-dark .is-active > .el-submenu__title { |
| | | color: $subMenuActiveText !important; |
| | | color: $base-menu-color-active !important; |
| | | } |
| | | |
| | | & .nest-menu .el-submenu>.el-submenu__title, |
| | | & .el-submenu .el-menu-item { |
| | | min-width: $sideBarWidth !important; |
| | | 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: $subMenuBg !important; |
| | | background-color: $base-sub-menu-background !important; |
| | | |
| | | &:hover { |
| | | background-color: $subMenuHover !important; |
| | | background-color: $base-sub-menu-hover !important; |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | .el-menu--collapse .el-menu .el-submenu { |
| | | min-width: $sideBarWidth !important; |
| | | min-width: $base-sidebar-width !important; |
| | | } |
| | | |
| | | // mobile responsive |
| | |
| | | |
| | | .sidebar-container { |
| | | transition: transform .28s; |
| | | width: $sideBarWidth !important; |
| | | width: $base-sidebar-width !important; |
| | | } |
| | | |
| | | &.hideSidebar { |
| | | .sidebar-container { |
| | | pointer-events: none; |
| | | transition-duration: 0.3s; |
| | | transform: translate3d(-$sideBarWidth, 0, 0); |
| | | transform: translate3d(-$base-sidebar-width, 0, 0); |
| | | } |
| | | } |
| | | } |
| | |
| | | $yellow:#FEC171; |
| | | $panGreen: #30B08F; |
| | | |
| | | // sidebar |
| | | $menuText:#bfcbd9; |
| | | $menuActiveText:#409EFF; |
| | | $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 |
| | | // 默认菜单主题风格 |
| | | $base-menu-color:#bfcbd9; |
| | | $base-menu-color-active:#f4f4f5; |
| | | $base-menu-background:#304156; |
| | | $base-logo-title-color: #ffffff; |
| | | |
| | | $menuBg:#304156; |
| | | $menuHover:#263445; |
| | | $sidebarTitle: #ffffff; |
| | | $base-menu-light-color:rgba(0,0,0,.70); |
| | | $base-menu-light-background:#ffffff; |
| | | $base-logo-light-title-color: #001529; |
| | | |
| | | $menuLightBg:#ffffff; |
| | | $menuLightHover:#f0f1f5; |
| | | $sidebarLightTitle: #001529; |
| | | $base-sub-menu-background:#1f2d3d; |
| | | $base-sub-menu-hover:#001528; |
| | | |
| | | $subMenuBg:#1f2d3d; |
| | | $subMenuHover:#001528; |
| | | // 自定义暗色菜单风格 |
| | | /** |
| | | $base-menu-color:hsla(0,0%,100%,.65); |
| | | $base-menu-color-active:#fff; |
| | | $base-menu-background:#001529; |
| | | $base-logo-title-color: #ffffff; |
| | | |
| | | $sideBarWidth: 200px; |
| | | $base-menu-light-color:rgba(0,0,0,.70); |
| | | $base-menu-light-background:#ffffff; |
| | | $base-logo-light-title-color: #001529; |
| | | |
| | | $base-sub-menu-background:#000c17; |
| | | $base-sub-menu-hover:#001528; |
| | | */ |
| | | |
| | | $base-sidebar-width: 200px; |
| | | |
| | | // the :export directive is the magic sauce for webpack |
| | | // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
| | | :export { |
| | | menuText: $menuText; |
| | | menuActiveText: $menuActiveText; |
| | | subMenuActiveText: $subMenuActiveText; |
| | | menuBg: $menuBg; |
| | | menuHover: $menuHover; |
| | | menuLightBg: $menuLightBg; |
| | | menuLightHover: $menuLightHover; |
| | | subMenuBg: $subMenuBg; |
| | | subMenuHover: $subMenuHover; |
| | | sideBarWidth: $sideBarWidth; |
| | | sidebarTitle: $sidebarTitle; |
| | | sidebarLightTitle: $sidebarLightTitle |
| | | menuColor: $base-menu-color; |
| | | menuLightColor: $base-menu-light-color; |
| | | menuColorActive: $base-menu-color-active; |
| | | menuBackground: $base-menu-background; |
| | | menuLightBackground: $base-menu-light-background; |
| | | subMenuBackground: $base-sub-menu-background; |
| | | subMenuHover: $base-sub-menu-hover; |
| | | sideBarWidth: $base-sidebar-width; |
| | | logoTitleColor: $base-logo-title-color; |
| | | logoLightTitleColor: $base-logo-light-title-color |
| | | } |
| | |
| | | immediate: true |
| | | }, |
| | | async theme(val) { |
| | | await this.setTheme(val) |
| | | } |
| | | }, |
| | | created() { |
| | | if(this.defaultTheme !== ORIGINAL_THEME) { |
| | | this.setTheme(this.defaultTheme) |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | | async setTheme(val) { |
| | | const oldVal = this.chalk ? this.theme : ORIGINAL_THEME |
| | | if (typeof val !== 'string') return |
| | | const themeCluster = this.getThemeCluster(val.replace('#', '')) |
| | | const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) |
| | | |
| | | const $message = this.$message({ |
| | | message: ' Compiling the theme', |
| | | message: ' 正在切换主题,请稍后...', |
| | | customClass: 'theme-message', |
| | | type: 'success', |
| | | duration: 0, |
| | |
| | | this.$emit('change', val) |
| | | |
| | | $message.close() |
| | | } |
| | | |
| | | }, |
| | | |
| | | methods: { |
| | | updateStyle(style, oldCluster, newCluster) { |
| | | let newStyle = style |
| | | oldCluster.forEach((color, index) => { |
| | |
| | | <template> |
| | | <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> |
| | | <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> |
| | | <transition name="sidebarLogoFade"> |
| | | <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> |
| | | <img v-if="logo" :src="logo" class="sidebar-logo" /> |
| | | <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> |
| | | <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> |
| | | </router-link> |
| | | <router-link v-else key="expand" class="sidebar-logo-link" to="/"> |
| | | <img v-if="logo" :src="logo" class="sidebar-logo" /> |
| | | <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> |
| | | <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> |
| | | </router-link> |
| | | </transition> |
| | | </div> |
| | |
| | | <template> |
| | | <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> |
| | | <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> |
| | | <logo v-if="showLogo" :collapse="isCollapse" /> |
| | | <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> |
| | | <el-menu |
| | | :default-active="activeMenu" |
| | | :collapse="isCollapse" |
| | | :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg" |
| | | :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'" |
| | | :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" |
| | | :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" |
| | | :unique-opened="true" |
| | | :active-text-color="settings.theme" |
| | | :collapse-transition="false" |
| | |
| | | </router-link> |
| | | </scroll-pane> |
| | | <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> |
| | | <li @click="refreshSelectedTag(selectedTag)">刷新页面</li> |
| | | <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li> |
| | | <li @click="closeOthersTags">关闭其他</li> |
| | | <li v-if="!isLastView()" @click="closeRightTags">关闭右侧</li> |
| | | <li @click="closeAllTags(selectedTag)">关闭所有</li> |
| | | <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li> |
| | | <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li> |
| | | <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li> |
| | | <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li> |
| | | <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li> |
| | | <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li> |
| | | </ul> |
| | | </div> |
| | | </template> |
| | |
| | | }, |
| | | isAffix(tag) { |
| | | return tag.meta && tag.meta.affix |
| | | }, |
| | | isFirstView() { |
| | | try { |
| | | return this.selectedTag.fullPath === this.visitedViews[1].fullPath || this.selectedTag.fullPath === '/index' |
| | | } catch (err) { |
| | | return false |
| | | } |
| | | }, |
| | | isLastView() { |
| | | try { |
| | |
| | | } |
| | | }) |
| | | }, |
| | | closeLeftTags() { |
| | | this.$store.dispatch('tagsView/delLeftTags', this.selectedTag).then(visitedViews => { |
| | | if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) { |
| | | this.toLastView(visitedViews) |
| | | } |
| | | }) |
| | | }, |
| | | closeOthersTags() { |
| | | this.$router.push(this.selectedTag).catch(()=>{}); |
| | | this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { |
| | |
| | | <template> |
| | | <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
| | | <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
| | | <sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" /> |
| | | <sidebar class="sidebar-container"/> |
| | | <div :class="{hasTagsView:needTagsView}" class="main-container"> |
| | | <div :class="{'fixed-header':fixedHeader}"> |
| | | <navbar /> |
| | |
| | | top: 0; |
| | | right: 0; |
| | | z-index: 9; |
| | | width: calc(100% - #{$sideBarWidth}); |
| | | width: calc(100% - #{$base-sidebar-width}); |
| | | transition: width 0.28s; |
| | | } |
| | | |
| | |
| | | import variables from '@/assets/styles/element-variables.scss' |
| | | import defaultSettings from '@/settings' |
| | | |
| | | const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings |
| | |
| | | const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' |
| | | const state = { |
| | | title: '', |
| | | theme: storageSetting.theme || variables.theme, |
| | | theme: storageSetting.theme || '#409EFF', |
| | | sideTheme: storageSetting.sideTheme || sideTheme, |
| | | showSettings: showSettings, |
| | | topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, |
| | |
| | | } |
| | | return false |
| | | }) |
| | | }, |
| | | |
| | | DEL_LEFT_VIEWS: (state, view) => { |
| | | const index = state.visitedViews.findIndex(v => v.path === view.path) |
| | | if (index === -1) { |
| | | return |
| | | } |
| | | state.visitedViews = state.visitedViews.filter((item, idx) => { |
| | | if (idx >= index || (item.meta && item.meta.affix)) { |
| | | return true |
| | | } |
| | | const i = state.cachedViews.indexOf(item.name) |
| | | if (i > -1) { |
| | | state.cachedViews.splice(i, 1) |
| | | } |
| | | return false |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | commit('DEL_RIGHT_VIEWS', view) |
| | | resolve([...state.visitedViews]) |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | delLeftTags({ commit }, view) { |
| | | return new Promise(resolve => { |
| | | commit('DEL_LEFT_VIEWS', view) |
| | | resolve([...state.visitedViews]) |
| | | }) |
| | | }, |
| | | } |
| | | |
| | | export default { |
| | |
| | | |
| | | <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column label="任务编号" align="center" prop="jobId" /> |
| | | <el-table-column label="任务编号" width="100" align="center" prop="jobId" /> |
| | | <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" /> |
| | | <el-table-column label="任务组名" align="center" prop="jobGroup"> |
| | | <template slot-scope="scope"> |
| | |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog title="Cron表达式生成器" :visible.sync="openCron"> |
| | | <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body class="scrollbar"> |
| | | <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab> |
| | | </el-dialog> |
| | | |
| | |
| | | v-hasPermi="['system:dept:add']" |
| | | >新增</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="info" |
| | | plain |
| | | icon="el-icon-sort" |
| | | size="mini" |
| | | @click="toggleExpandAll" |
| | | >展开/折叠</el-button> |
| | | </el-col> |
| | | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | </el-row> |
| | | |
| | | <el-table |
| | | v-if="refreshTable" |
| | | v-loading="loading" |
| | | :data="deptList" |
| | | row-key="deptId" |
| | | default-expand-all |
| | | :default-expand-all="isExpandAll" |
| | | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
| | | > |
| | | <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column> |
| | |
| | | title: "", |
| | | // 是否显示弹出层 |
| | | open: false, |
| | | // 是否展开,默认全部展开 |
| | | isExpandAll: true, |
| | | // 重新渲染表格状态 |
| | | refreshTable: true, |
| | | // 是否展开 |
| | | expand: false, |
| | | // 状态数据字典 |
| | | statusOptions: [], |
| | | // 查询参数 |
| | |
| | | this.deptOptions = this.handleTree(response.data, "deptId"); |
| | | }); |
| | | }, |
| | | /** 展开/折叠操作 */ |
| | | toggleExpandAll() { |
| | | this.refreshTable = false; |
| | | this.isExpandAll = !this.isExpandAll; |
| | | this.$nextTick(() => { |
| | | this.refreshTable = true; |
| | | }); |
| | | }, |
| | | /** 修改按钮操作 */ |
| | | handleUpdate(row) { |
| | | this.reset(); |
| | |
| | | v-hasPermi="['system:menu:add']" |
| | | >新增</el-button> |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="info" |
| | | plain |
| | | icon="el-icon-sort" |
| | | size="mini" |
| | | @click="toggleExpandAll" |
| | | >展开/折叠</el-button> |
| | | </el-col> |
| | | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| | | </el-row> |
| | | |
| | | <el-table |
| | | v-if="refreshTable" |
| | | v-loading="loading" |
| | | :data="menuList" |
| | | row-key="menuId" |
| | | :default-expand-all="isExpandAll" |
| | | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
| | | > |
| | | <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> |
| | |
| | | title: "", |
| | | // 是否显示弹出层 |
| | | open: false, |
| | | // 是否展开,默认全部折叠 |
| | | isExpandAll: false, |
| | | // 重新渲染表格状态 |
| | | refreshTable: true, |
| | | // 显示状态数据字典 |
| | | visibleOptions: [], |
| | | // 菜单状态数据字典 |
| | |
| | | this.open = true; |
| | | this.title = "添加菜单"; |
| | | }, |
| | | /** 展开/折叠操作 */ |
| | | toggleExpandAll() { |
| | | this.refreshTable = false; |
| | | this.isExpandAll = !this.isExpandAll; |
| | | this.$nextTick(() => { |
| | | this.refreshTable = true; |
| | | }); |
| | | }, |
| | | /** 修改按钮操作 */ |
| | | handleUpdate(row) { |
| | | this.reset(); |
| | |
| | | @pagination="getList" |
| | | /> |
| | | <!-- 预览界面 --> |
| | | <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body> |
| | | <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar"> |
| | | <el-tabs v-model="preview.activeName"> |
| | | <el-tab-pane |
| | | v-for="(value, key) in preview.data" |