clunt
/
RuoYi-Cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pre Merge pull request !271 from 刘永建/dev_lyj

This commit is contained in:
刘永建 2022-10-25 03:31:05 +00:00 committed by Gitee
parent c759728269 b6e3a1c49e
commit 67fdef801e
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
44 changed files with 5374 additions and 4735 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ruoyi-ui/.env.development
View File

@ -1,11 +1,11 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 页面标题
VUE_APP_TITLE = 智能作业系统
# 开发环境配置
ENV = 'development'
# 智能作业系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

16
ruoyi-ui/.env.production
View File

@ -1,8 +1,8 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
# 生产环境配置
ENV = 'production'
# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'
# 页面标题
VUE_APP_TITLE = 智能作业系统
# 生产环境配置
ENV = 'production'
# 智能作业系统/生产环境
VUE_APP_BASE_API = '/prod-api'

20
ruoyi-ui/.env.staging
View File

@ -1,10 +1,10 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# 若依管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'
# 页面标题
VUE_APP_TITLE = 智能作业系统
NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# 智能作业系统/测试环境
VUE_APP_BASE_API = '/stage-api'

182
ruoyi-ui/package.json
View File

@ -1,90 +1,92 @@
{
"name": "ruoyi",
"version": "3.6.1",
"description": "若依管理系统",
"author": "若依",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"keywords": [
"vue",
"admin",
"dashboard",
"element-ui",
"boilerplate",
"admin-template",
"management-system"
],
"repository": {
"type": "git",
"url": "https://gitee.com/y_project/RuoYi-Cloud.git"
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"echarts": "4.9.0",
"element-ui": "2.15.10",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
"highlight.js": "9.18.5",
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-meta": "2.4.0",
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",
"vuex": "3.6.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
"babel-eslint": "10.1.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "4.1.0",
"compression-webpack-plugin": "5.0.2",
"connect": "3.6.6",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"lint-staged": "10.5.3",
"runjs": "4.4.2",
"sass": "1.32.13",
"sass-loader": "10.1.1",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"vue-template-compiler": "2.6.12"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
{
"name": "ruoyi",
"version": "3.6.1",
"description": "智能作业系统",
"author": "若依",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"keywords": [
"vue",
"admin",
"dashboard",
"element-ui",
"boilerplate",
"admin-template",
"management-system"
],
"repository": {
"type": "git",
"url": "https://gitee.com/y_project/RuoYi-Cloud.git"
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0",
"bpmn-js": "^7.2.1",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"echarts": "4.9.0",
"element-ui": "2.15.10",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
"highlight.js": "9.18.5",
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-meta": "2.4.0",
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",
"vuex": "3.6.0",
"workflow-bpmn-modeler": "^0.2.8"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
"babel-eslint": "10.1.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "4.1.0",
"compression-webpack-plugin": "5.0.2",
"connect": "3.6.6",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"lint-staged": "10.5.3",
"runjs": "4.4.2",
"sass": "1.32.13",
"sass-loader": "10.1.1",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"vue-template-compiler": "2.6.12"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

140
ruoyi-ui/src/App.vue
View File

@ -1,28 +1,112 @@
<template>
<div id="app">
<router-view />
<theme-picker />
</div>
</template>
<script>
import ThemePicker from "@/components/ThemePicker";
export default {
name: "App",
components: { ThemePicker },
metaInfo() {
return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
titleTemplate: title => {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
}
}
}
};
</script>
<style scoped>
#app .theme-picker {
display: none;
}
</style>
<template>
<div id="app">
<router-view />
<theme-picker />
</div>
</template>
<script>
import ThemePicker from "@/components/ThemePicker";
import WaterMark from '@/plugins/waterMark.js'
export default {
name: "App",
components: { ThemePicker },
metaInfo() {
return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
titleTemplate: title => {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
}
}
},
mounted() {
// this.initWartHeight = document.body.clientHeight
// this.initWaterMark(this.initWartHeight)
// window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
//添加水印
initWaterMark(height) {
let userInfo = this.$store.state.user.userInfo,
_time = this.$global.createTime('day'),
_str = '测试角色' + ' / ' + '测试用户' + ' / ' + _time
console.log(userInfo, '水印')
WaterMark(_str, height)
},
handleScroll() {
this.$nextTick(() => {
let height = document.getElementById('app-main').scrollHeight
console.log('内容区高度', height)
if (height && this.initWartHeight != height) {
this.initWartHeight = height
this.initWaterMark(height)
}
})
},
// 根据当前路由设置hasOpen
isOpenIframePage() {
console.log(this.componentsArr, 'this.componentsArr')
const target = this.componentsArr.find(item => {
console.log(item, 'item')
return item.path === this.$route.query.path
})
if (target && !target.hasOpen) {
target.hasOpen = true
}
},
// 遍历路由的所有页面，把含有iframeComponent标识的收集起来
getComponentsArr() {
// debugger
const router = this.$router
const routes = router.options.routes
// console.log(router.options.routes, '打印 router.options.routes')
const iframeArr = [] //routes.filter(item => item.iframeComponent)
const [{ iframeComponent = null } = {}] = iframeArr || []
// if (sessionStorage.getItem('iframeMenuList')) return false
// 处理单客画像客户明细切换页签改变问题
const [{ name: custRouteName, path, component }] = routes.filter(item => item.name === 'uCustView')
const custComponent = { name: custRouteName, menuUrl: path, component }
// console.log(custViews, 'custViews')
if (sessionStorage.getItem('iframeMenuList')) {
const iframeMenuList = JSON.parse(sessionStorage.getItem('iframeMenuList')) || []
// console.log(routes,iframeArr,'iframeArr')
console.log(iframeMenuList, 'options 1111')
return [...iframeMenuList, custComponent].map(item => {
const name = item.menuId || item.menuUrl.replace('/', '')
return {
name,
path: item.menuUrl,
menuUrl: item.menuUrl,
hasOpen: false, // 是否打开过，默认false
component: iframeComponent, // 组件文件的引用
// fullPath: item.fullPath,
}
})
}
return false
},
// 初始化iframe
initIframe() {
// debugger
const componentsArr = this.getComponentsArr()
console.log(componentsArr, 'componentsArr')
if (componentsArr) {
componentsArr.forEach(item => {
Vue.component(item.name, item.component)
})
this.componentsArr = componentsArr
console.log(this.componentsArr, 'this.componentsArr')
// 判断当前路由是否iframe页
this.isOpenIframePage()
}
},
},
};
</script>
<style scoped>
#app .theme-picker {
display: none;
}
</style>

122
ruoyi-ui/src/api/login.js
View File

@ -1,61 +1,61 @@
import request from '@/utils/request'
// 登录方法
export function login(username, password, code, uuid) {
return request({
url: '/auth/login',
headers: {
isToken: false
},
method: 'post',
data: { username, password, code, uuid }
})
}
// 注册方法
export function register(data) {
return request({
url: '/auth/register',
headers: {
isToken: false
},
method: 'post',
data: data
})
}
// 刷新方法
export function refreshToken() {
return request({
url: '/auth/refresh',
method: 'post'
})
}
// 获取用户详细信息
export function getInfo() {
return request({
url: '/system/user/getInfo',
method: 'get'
})
}
// 退出方法
export function logout() {
return request({
url: '/auth/logout',
method: 'delete'
})
}
// 获取验证码
export function getCodeImg() {
return request({
url: '/code',
headers: {
isToken: false
},
method: 'get',
timeout: 20000
})
}
import request from '@/utils/request'
// 登录方法
export function login(username, password, code, uuid) {
return request({
url: '/system/login',
headers: {
isToken: false
},
method: 'post',
data: { username, password, code, uuid }
})
}
// 注册方法
export function register(data) {
return request({
url: '/system/register',
headers: {
isToken: false
},
method: 'post',
data: data
})
}
// 刷新方法
export function refreshToken() {
return request({
url: '/system/refresh',
method: 'post'
})
}
// 获取用户详细信息
export function getInfo() {
return request({
url: '/system/user/getInfo',
method: 'get'
})
}
// 退出方法
export function logout() {
return request({
url: '/system/logout',
method: 'delete'
})
}
// 获取验证码
export function getCodeImg() {
return request({
url: '/code',
headers: {
isToken: false
},
method: 'get',
timeout: 20000
})
}

52
ruoyi-ui/src/api/system/dept.js
View File

@ -1,52 +0,0 @@
import request from '@/utils/request'
// 查询部门列表
export function listDept(query) {
return request({
url: '/system/dept/list',
method: 'get',
params: query
})
}
// 查询部门列表（排除节点）
export function listDeptExcludeChild(deptId) {
return request({
url: '/system/dept/list/exclude/' + deptId,
method: 'get'
})
}
// 查询部门详细
export function getDept(deptId) {
return request({
url: '/system/dept/' + deptId,
method: 'get'
})
}
// 新增部门
export function addDept(data) {
return request({
url: '/system/dept',
method: 'post',
data: data
})
}
// 修改部门
export function updateDept(data) {
return request({
url: '/system/dept',
method: 'put',
data: data
})
}
// 删除部门
export function delDept(deptId) {
return request({
url: '/system/dept/' + deptId,
method: 'delete'
})
}

120
ruoyi-ui/src/api/system/menu.js
View File

@ -1,60 +1,60 @@
import request from '@/utils/request'
// 查询菜单列表
export function listMenu(query) {
return request({
url: '/system/menu/list',
method: 'get',
params: query
})
}
// 查询菜单详细
export function getMenu(menuId) {
return request({
url: '/system/menu/' + menuId,
method: 'get'
})
}
// 查询菜单下拉树结构
export function treeselect() {
return request({
url: '/system/menu/treeselect',
method: 'get'
})
}
// 根据角色ID查询菜单下拉树结构
export function roleMenuTreeselect(roleId) {
return request({
url: '/system/menu/roleMenuTreeselect/' + roleId,
method: 'get'
})
}
// 新增菜单
export function addMenu(data) {
return request({
url: '/system/menu',
method: 'post',
data: data
})
}
// 修改菜单
export function updateMenu(data) {
return request({
url: '/system/menu',
method: 'put',
data: data
})
}
// 删除菜单
export function delMenu(menuId) {
return request({
url: '/system/menu/' + menuId,
method: 'delete'
})
}
import request from '@/utils/request'
// 查询菜单列表
export function listMenu(query) {
return request({
url: '/system/menu/list',
method: 'get',
params: query
})
}
// 查询菜单详细
export function getMenu(menuId) {
return request({
url: '/system/menu/' + menuId,
method: 'get'
})
}
// 查询菜单下拉树结构
export function treeselect() {
return request({
url: '/system/menu/treeselect',
method: 'get'
})
}
// 根据角色ID查询菜单下拉树结构
export function roleMenuTreeselect(roleId) {
return request({
url: '/system/menu/roleMenuTreeselect/' + roleId,
method: 'get'
})
}
// 新增菜单
export function addMenu(data) {
return request({
url: '/system/menu',
method: 'post',
data: data
})
}
// 修改菜单
export function updateMenu(data) {
return request({
url: '/system/menu',
method: 'put',
data: data
})
}
// 删除菜单
export function delMenu(menuId) {
return request({
url: '/system/menu/' + menuId,
method: 'delete'
})
}

52
ruoyi-ui/src/api/system/org.js Normal file
View File

@ -0,0 +1,52 @@
import request from '@/utils/request'
// 查询机构列表
export function listSysOrg(query) {
return request({
url: '/system/org/list',
method: 'get',
params: query
})
}
// 查询机构列表（排除节点）
export function listSysOrgExcludeChild(orgId) {
return request({
url: '/system/org/list/exclude/' + orgId,
method: 'get'
})
}
// 查询机构详细
export function getSysOrg(orgId) {
return request({
url: '/system/org/' + orgId,
method: 'get'
})
}
// 新增机构
export function addSysOrg(data) {
return request({
url: '/system/org',
method: 'post',
data: data
})
}
// 修改机构
export function updateSysOrg(data) {
return request({
url: '/system/org',
method: 'put',
data: data
})
}
// 删除机构
export function delSysOrg(orgId) {
return request({
url: '/system/org/' + orgId,
method: 'delete'
})
}

238
ruoyi-ui/src/api/system/role.js
View File

@ -1,119 +1,119 @@
import request from '@/utils/request'
// 查询角色列表
export function listRole(query) {
return request({
url: '/system/role/list',
method: 'get',
params: query
})
}
// 查询角色详细
export function getRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'get'
})
}
// 新增角色
export function addRole(data) {
return request({
url: '/system/role',
method: 'post',
data: data
})
}
// 修改角色
export function updateRole(data) {
return request({
url: '/system/role',
method: 'put',
data: data
})
}
// 角色数据权限
export function dataScope(data) {
return request({
url: '/system/role/dataScope',
method: 'put',
data: data
})
}
// 角色状态修改
export function changeRoleStatus(roleId, status) {
const data = {
roleId,
status
}
return request({
url: '/system/role/changeStatus',
method: 'put',
data: data
})
}
// 删除角色
export function delRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'delete'
})
}
// 查询角色已授权用户列表
export function allocatedUserList(query) {
return request({
url: '/system/role/authUser/allocatedList',
method: 'get',
params: query
})
}
// 查询角色未授权用户列表
export function unallocatedUserList(query) {
return request({
url: '/system/role/authUser/unallocatedList',
method: 'get',
params: query
})
}
// 取消用户授权角色
export function authUserCancel(data) {
return request({
url: '/system/role/authUser/cancel',
method: 'put',
data: data
})
}
// 批量取消用户授权角色
export function authUserCancelAll(data) {
return request({
url: '/system/role/authUser/cancelAll',
method: 'put',
params: data
})
}
// 授权用户选择
export function authUserSelectAll(data) {
return request({
url: '/system/role/authUser/selectAll',
method: 'put',
params: data
})
}
// 根据角色ID查询部门树结构
export function deptTreeSelect(roleId) {
return request({
url: '/system/role/deptTree/' + roleId,
method: 'get'
})
}
import request from '@/utils/request'
// 查询角色列表
export function listRole(query) {
return request({
url: '/system/role/list',
method: 'get',
params: query
})
}
// 查询角色详细
export function getRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'get'
})
}
// 新增角色
export function addRole(data) {
return request({
url: '/system/role',
method: 'post',
data: data
})
}
// 修改角色
export function updateRole(data) {
return request({
url: '/system/role',
method: 'put',
data: data
})
}
// 角色数据权限
export function dataScope(data) {
return request({
url: '/system/role/dataScope',
method: 'put',
data: data
})
}
// 角色状态修改
export function changeRoleStatus(roleId, status) {
const data = {
roleId,
status
}
return request({
url: '/system/role/changeStatus',
method: 'put',
data: data
})
}
// 删除角色
export function delRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'delete'
})
}
// 查询角色已授权用户列表
export function allocatedUserList(query) {
return request({
url: '/system/role/authUser/allocatedList',
method: 'get',
params: query
})
}
// 查询角色未授权用户列表
export function unallocatedUserList(query) {
return request({
url: '/system/role/authUser/unallocatedList',
method: 'get',
params: query
})
}
// 取消用户授权角色
export function authUserCancel(data) {
return request({
url: '/system/role/authUser/cancel',
method: 'put',
data: data
})
}
// 批量取消用户授权角色
export function authUserCancelAll(data) {
return request({
url: '/system/role/authUser/cancelAll',
method: 'put',
params: data
})
}
// 授权用户选择
export function authUserSelectAll(data) {
return request({
url: '/system/role/authUser/selectAll',
method: 'put',
params: data
})
}
// 根据角色ID查询机构树结构
export function sysOrgTreeSelect(roleId) {
return request({
url: '/system/role/orgTree/' + roleId,
method: 'get'
})
}

6
ruoyi-ui/src/api/system/user.js
View File

@ -126,10 +126,10 @@ export function updateAuthRole(data) {
})
}
// 查询部门下拉树结构
export function deptTreeSelect() {
// 查询机构下拉树结构
export function sysOrgTreeSelect() {
return request({
url: '/system/user/deptTree',
url: '/system/user/orgTree',
method: 'get'
})
}

BIN
ruoyi-ui/src/assets/img/banner/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
ruoyi-ui/src/assets/img/banner/head_avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
ruoyi-ui/src/assets/img/banner/head_bank_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
ruoyi-ui/src/assets/img/banner/header_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
ruoyi-ui/src/assets/img/banner/new_pro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 B

BIN
ruoyi-ui/src/assets/img/banner/newpro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 705 B

BIN
ruoyi-ui/src/assets/img/banner/pro_hot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 619 B

BIN
ruoyi-ui/src/assets/img/banner/red_black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 B

BIN
ruoyi-ui/src/assets/img/banner/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
ruoyi-ui/src/assets/img/home/head_bg_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
ruoyi-ui/src/assets/logo-imgs/安全退出icon@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1000 B

382
ruoyi-ui/src/assets/styles/index.scss
View File

@ -1,191 +1,191 @@
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@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;
}
label {
font-weight: 700;
}
html {
height: 100%;
box-sizing: border-box;
}
#app {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.no-padding {
padding: 0px !important;
}
.padding-content {
padding: 4px 0;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
div:focus {
outline: none;
}
.fr {
float: right;
}
.fl {
float: left;
}
.pr-5 {
padding-right: 5px;
}
.pl-5 {
padding-left: 5px;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
.inlineBlock {
display: block;
}
.clearfix {
&: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);
}
}
}
//main-container全局样式
.app-container {
padding: 20px;
}
.components-container {
margin: 30px 50px;
position: relative;
}
.pagination-container {
margin-top: 30px;
}
.text-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%);
.subtitle {
font-size: 20px;
color: #fff;
}
&.draft {
background: #d0d0d0;
}
&.deleted {
background: #d0d0d0;
}
}
.link-type,
.link-type:focus {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
//refine vue-multiselect plugin
.multiselect {
line-height: 16px;
}
.multiselect--active {
z-index: 1000 !important;
}
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@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;
}
label {
font-weight: 700;
}
html {
height: 100%;
box-sizing: border-box;
}
#app {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.no-padding {
padding: 0px !important;
}
.padding-content {
padding: 4px 0;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
div:focus {
outline: none;
}
.fr {
float: right;
}
.fl {
float: left;
}
.pr-5 {
padding-right: 5px;
}
.pl-5 {
padding-left: 5px;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
.inlineBlock {
display: block;
}
.clearfix {
&: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);
}
}
}
//main-container全局样式
.app-container {
//padding: 20px;
}
.components-container {
margin: 30px 50px;
position: relative;
}
.pagination-container {
margin-top: 30px;
}
.text-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%);
.subtitle {
font-size: 20px;
color: #fff;
}
&.draft {
background: #d0d0d0;
}
&.deleted {
background: #d0d0d0;
}
}
.link-type,
.link-type:focus {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
//refine vue-multiselect plugin
.multiselect {
line-height: 16px;
}
.multiselect--active {
z-index: 1000 !important;
}

455
ruoyi-ui/src/assets/styles/sidebar.scss
View File

@ -1,227 +1,228 @@
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: $base-sidebar-width;
position: relative;
}
.sidebarHide {
margin-left: 0!important;
}
.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;
}
}
}
// 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;
}
}
}
#app {
.main-container {
transition: margin-left .28s;
margin-left: $base-sidebar-width;
position: relative;
overflow-y: hidden;
top: 80px;
}
.sidebarHide {
margin-left: 0!important;
}
.sidebar-container {
-webkit-transition: width .28s;
transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
height: calc(100vh - 80px);
position: fixed;
font-size: 0px;
top: 80px;
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;
}
}
}
// 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;
}
}
}

528
ruoyi-ui/src/components/Header.vue Normal file
View File

@ -0,0 +1,528 @@
<template>
<div class="header">
<div class="banner-box">
<img src="../assets/img/banner/head_bank_logo.png" alt="" class="bank_logo" />
<div class="header-name">
<span class="bigcharacter-logo">天津银行公司业务智能作业系统</span>
<span class="ismallcharacter-logo">BUSINESS INTELLIGENCE OPERATING SYSTEM OF BANK OF TIANJIN</span>
</div>
<!-- <div class="model_wrap">
<div class="banner-model">
<el-badge :is-dot="getDaRankNewStatus" class="banner-model spc_dot">
<div @click="toRbRank" class="model-item">
<img src="../assets/img/banner/red_black.png" class="banner-icon" />
<p>红黑榜</p>
</div>
</el-badge>
</div>
<el-badge :is-dot="listNewStatus" class="banner-model">
<div @click="toNewProd" class="model-item">
<img src="../assets/img/banner/new_pro.png" class="banner-icon" />
<p>新品上架</p>
</div>
</el-badge>
<el-badge class="banner-model">
<div @click="toHotPro" class="model-item">
<img src="../assets/img/banner/pro_hot.png" class="banner-icon" />
<p>产品热销</p>
</div>
</el-badge>
</div> -->
<div class="banner-user">
<img src="../assets/img/banner/head_avatar.png" />
<div>
<p></p>
<p>数据日期：</p>
</div>
</div>
<el-dropdown @command="handleClickCommand" trigger="click">
<span>
{{ currentRoleName }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in roleList" :key="item.roleId" :command="item.roleId">{{
item.roleName
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 修改密码 -->
<div class="icon-l"></div>
<div class="logout">
<el-tooltip popper-class="func-tootip" placement="bottom" effect="light">
<div class="logout-text" slot="content">退出登录</div>
<img src="../assets/logo-imgs/安全退出icon@2x.png" alt="" class="icon-close" @click="logout" />
</el-tooltip>
</div>
<div class="resetPwd">
<span class="reset-text" @click="modifyPwd">修改密码</span>
</div>
</div>
<el-dialog
class="pwd-dialog"
title="修改密码"
append-to-body
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="true"
width="600px"
:before-close="cancle"
>
<el-form ref="pwdForm" size="small" :model="pwdForm" :rules="pwdRule">
<el-form-item label="用户名" >
<el-input v-model="pwdForm.loginName" readonly></el-input>
</el-form-item>
<el-form-item label="原密码" prop="oldPassword">
<el-input v-model="pwdForm.oldPassword" placeholder="请输入原密码" show-password></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="pwdForm.newPassword" placeholder="请输入新密码" show-password></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPwd">
<el-input v-model="pwdForm.confirmPwd" placeholder="请再次输入新密码" show-password></el-input>
</el-form-item>
<el-form-item label="密码格式" required>
<div class="reind-text">8~18个字符，以数字或字母开头，可以包含的特殊字符有：`.~!@#%*()?-_=+。</div>
</el-form-item>
</el-form>
<div class="func-btn">
<el-button type="default" size="small" @click="cancle">取消</el-button>
<el-button type="primary" size="small" @click="updatePwd">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
// inject: ['reload'],
data() {
const validateNewPassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入新密码'))
} else {
if (this.pwdForm.confirmPwd !== '') {
this.$refs.pwdForm.validateField('confirmPwd')
}
callback()
}
}
const validateConfirmPwd = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入新密码'))
} else if (value !== this.pwdForm.newPassword) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return {
roleList: [],
getState: true,
getDaRankNewStatus: false,
listNewStatus: false,
currentRole: '',
currentRoleName: '',
dialogVisible: false,
pwdForm: {
loginName: '',
oldPassword: '',
newPassword: '',
confirmPwd: '',
},
pwdRule: {
newPassword: [
{ validator: validateNewPassword, trigger: 'blur' },
{ required: true, message: '请输入新密码', trigger: 'blur' },
{
pattern: /^[A-Za-z0-9][A-Za-z0-9`~!@#%*()?\-_=+.]{7,17}$/,
message: '8~18个字符，以数字或字母开头，可以包含的特殊字符有：`~!@#%*()?-_=+.',
trigger: 'blur',
},
],
confirmPwd: [
{ validator: validateConfirmPwd, trigger: 'blur' },
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
],
},
isNew: true,
isNewRank: true,
etDate: '',
}
},
watch: {
//监控头部顶部新品上架和红黑榜-new图片显示的问题
changeState: {
handler(newVal) {
this.$store.state.user.headerState = newVal
if (!newVal) {
this.listNewStatus = false
}
},
},
changeStateRed: {
handler(newVal) {
this.$store.state.user.StateRed = newVal
if (!newVal) {
this.getDaRankNewStatus = false
}
},
},
},
methods: {
...mapMutations({
// setUserInfo: 'SET_USER_INFO',
// setRoleList: 'SET_ROLE_LIST',
// switchMenuLoaded: 'SWITCH_MENU_LOADED',
// changeState: 'changeState',
// changeStateRed: 'changeStateRed',
}),
...mapActions({
logout: 'doLogOut',
}),
async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
}).catch(() => {});
},
// doLogout() {
// this.logout()
// .then(res => {
// this.$message.success('注销成功，即将为您跳转到登录页！')
// setTimeout(() => location.reload(), 1500)
// })
// .catch(err => {
// this.$message.success('注销成功，即将为您跳转到登录页！')
// setTimeout(() => this.doClean(), 1500)
// })
// },
modifyPwd() {
this.pwdForm.loginName = this.userInfo.loginName
this.dialogVisible = true
},
cancle() {
this.dialogVisible = false
this.$refs.pwdForm.resetFields()
},
updatePwd() {
this.$refs.pwdForm.validate(valid => {
if (valid) {
if (this.pwdForm.confirmPwd !== this.pwdForm.newPassword) {
this.$message({
message: '两次输入的密码不一致',
type: 'error',
})
return
}
const { newPassword, ...args } = this.pwdForm
this.$api.sys.user
.resetPassword({
...args,
password: newPassword,
})
.then(res => {
if (res.data.code == 200) {
this.$message.success('修改密码成功，请重新登录！')
this.dialogVisible = false
setTimeout(() => {
this.doClean()
}, 500)
} else {
this.$message({
message: res.data.msg,
type: 'error',
})
}
})
} else {
this.$message.error('请检查输入项！')
}
})
},
doClean() {
// this.$store.commit('RESET_USER')
// this.$store.commit('RESET_APP')
// this.$auth.removeToken()
// location.reload()
},
//切换角色
handleClickCommand(command) {
this.currentRole = command
let role = this.roleList.find(item => item.roleId === command)
this.currentRoleName = role.roleName
this.roleChangeFn(this, role.roleId)
},
toNewProd() {
this.listNewStatus = false
window.sessionStorage.setItem('headerState', 'false')
this.$router.push({
path: '/pm/newProd',
})
},
toHotPro() {
this.listNewStatus = false
this.$router.push({
path: '/pm/hotPro',
})
},
toActive() {
this.isNew = false
this.$router.push({
path: '/mkt/activeQuery',
})
},
toRbRank() {
this.getDaRankNewStatus = false
window.sessionStorage.setItem('StateRed', 'false')
this.$router.push({
path: '/ws/rbRank',
})
},
},
computed: {
...mapGetters({
}),
},
created() {},
mounted() {
// if (this.userInfo.userName === '') {
// this.$store.commit('RESET_USER')
// this.$store.commit('RESET_APP')
// this.$auth.removeToken()
// this.$router.replace({ path: '/login' })
// }
// const role = this.roleList.find(item => item.roleId === this.userInfo.roleId)
// ;[this.currentRoleName, this.currentRole] = !role ? ['', ''] : [role.roleName, role.roleId]
// if (window.sessionStorage.getItem('headerState') !== 'false') {
// if (this.$store.state.user.headerState) {
// //查询新品上架是是否有数据更新接口
// this.$http.post(this.$api.pmApi.listNewStatus, {}).then(res => {
// if (res.data.code == 200) {
// let newState = res.data.data.isNew
// if (newState != 0) {
// this.listNewStatus = true
// } else {
// this.listNewStatus = false
// }
// } else {
// this.$message({
// message: res.data.msg,
// type: 'error',
// })
// }
// })
// } else {
// this.listNewStatus = false
// }
// }
// if (window.sessionStorage.getItem('StateRed') !== 'false') {
// if (this.$store.state.user.StateRed) {
// // 获取红黑榜是否存在新榜
// this.$http.post(this.$api.main.getDaRankNewStatus, {}).then(res => {
// if (res.data.code == 200) {
// let redState = res.data.data.isNew
// if (redState != 0) {
// this.getDaRankNewStatus = true
// } else {
// this.getDaRankNewStatus = false
// }
// } else {
// this.$message({
// message: res.data.msg,
// type: 'error',
// })
// }
// })
// } else {
// this.getDaRankNewStatus = false
// }
// }
// const getLoginNum = sessionStorage.getItem('userLoginNum')
// if (sessionStorage.getItem('userLoginNum') === '1') {
// this.$confirm('当前为首次登陆，是否前往修改密码？', '提示', {
// type: 'warning',
// })
// .then(() => {
// sessionStorage.removeItem('userLoginNum')
// this.modifyPwd()
// })
// .catch(() => {
// sessionStorage.removeItem('userLoginNum')
// })
// }
//
// this.etDate = sessionStorage.getItem('etDate')
// console.log(this.etDate, 'this.etDate')
},
}
</script>
<style lang="scss">
.header {
width: 100%;
// height: 100%;
height: 80px;
}
.banner-box {
// width: 100%;
display: flex;
align-items: center;
height: 100%;
font-size: 0.16rem;
.bank_logo {
width: 100px;
margin: 0;
height: auto;
margin: 0 30px;
margin-right: 40px;
}
.banner-model {
width: 80px;
text-align: center;
cursor: pointer;
.model-item {
display: flex;
align-items: center;
font-size: 14px;
}
.banner-icon {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.02rem;
background-size: contain;
background-repeat: no-repeat;
}
p {
line-height: 18px;
// font-size: 12px;
}
.el-badge {
.el-badge__content.is-fixed.is-dot {
top: 6px !important;
right: 12px !important;
}
.el-badge__content.is-dot {
height: 8px !important;
width: 8px !important;
}
}
}
.model_wrap {
display: flex;
margin-left: auto;
.banner-model:first-child {
margin-left: auto;
}
}
.el-divider--vertical {
margin: 15px 8px !important;
}
.banner-user {
display: flex;
align-items: center;
margin-right: 30px;
margin-left: auto;
img {
margin: 0 10px 0 10px;
height: 38px;
width: 38px;
background-size: contain;
}
p {
font-size: 0.14rem;
line-height: 20px;
}
}
.el-dropdown {
// max-width: 100px; //角色名称过长不显示注释
text-align: center;
// line-height: 44px;
font-size: 0.16rem;
font-weight: bold;
cursor: pointer;
}
.logout {
width: 0.2rem;
height: 0.2rem;
color: red;
// margin: 0 0.4rem 0 0.22rem;
margin-right: 20px;
margin-bottom: 10px;
cursor: pointer;
}
}
</style>
<style lang="scss" scoped>
::v-deep .el-badge__content.is-fixed.is-dot {
right: 15px;
margin-top: 6px;
margin-right: 17px;
background: red;
}
::v-deep .spc_dot .el-badge__content.is-fixed.is-dot {
left: 39px;
margin-top: 1px !important;
}
.resetPwd {
cursor: pointer;
width: 56px;
height: 14px;
margin-right: 24px;
}
.icon-l{
width: 1px;
height: 14px;
margin-right: 20px;
margin-left: 20px;
background: #B9C8DF;
}
.icon-close{
width: 15px;
height: 16px;
}
.header-name {
width: 308px;
height: 40px;
// margin: 20px 0 0 10px;
display: flex;
flex-wrap: wrap;
}
.bigcharacter-logo{
width: 308px;
height: 22px;
color: rgba(34, 34, 34, 1);
font-size: 22px;
font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
text-align: left;
font-weight: bolder;
line-height: 33px;
margin-bottom: 8px;
}
.ismallcharacter-logo{
width: 308px;
height: 9px;
display: inline-block;
color: rgba(34, 34, 34, 1);
font-size: 9px;
transform: scale(0.75);
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight:600;
white-space: nowrap;
line-height: 14px;
margin-left: -39px;
}
</style>

222
ruoyi-ui/src/components/PageTabs.vue Normal file
View File

@ -0,0 +1,222 @@
<template>
<div class="tabs">
<ul :style="{ width: isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 200px)' }">
<li
class="tabs-li"
v-for="(item, index) in tabdate.tabname"
:class="{ active: isActive(index) }"
:key="index"
@click="gotonext(index)"
>
<!-- @contextmenu.prevent="onContext($event, item)" -->
<span class="tabs-li-title" >{{ item }}</span>
</li>
</ul>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
props: {
tabdate: {
type: Object,
default: () => {},
},
},
data() {
return {
collapse: false,
}
},
computed: {
showTabs() {
return this.tabList.length > 0
},
...mapGetters({
}),
},
created(){
// console.log(this.tabname)
},
methods: {
isActive(path) {
return path === this.tabdate.activecontent
},
onContext(e, item) {
console.log(e)
},
gotonext(index) {
this.tabdate.activecontent = index
this.$emit('tabchange',index)
},
},
}
</script>
<style scoped>
.tabs {
position: relative;
height: 39px;
padding-right: 20px;
background-color: #ffffff00;
}
/*
.tabs:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background: #d9d9d9;
top: 44px;
} */
.tabs ul {
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
position: relative;
padding-left: 0px;
margin-top: 0px;
}
.tabs-li {
width: 100px;
height: 40px;
margin-right: 10px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
line-height: 38px;
border: 1px solid #d9d9d9;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-width: 1px 1px 0;
background: #ffffff;
text-align: center;
padding: 0 5px 0 12px;
vertical-align: middle;
color: #333;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.tabs-li.active {
height: 43px;
line-height: 43px;
border: 1px solid #d9d9d9;
border-width: 1px 1px 0;
background-color: #006CE1;
position: relative;
bottom: 4px;
}
.tabs-li::marker {
color: #ffffff00;
}
.tabs-li.active:after {
position: absolute;
width: 100%;
height: 1px;
background: #f2f2f2;
top: 28px;
margin-left: calc(-100% + 5px);
z-index: 1000;
}
.tabs-li:not(.active):hover {
background: #f8f8f8;
}
.tabs-li-title {
/*float: left;*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 5px;
color: #2D4E83;
}
.tabs-li.active .tabs-li-title,
.tabs-li:not(.active) .tabs-li-title:hover {
color: #FFFFFF;
}
.tabs-close-box {
display: none;
cursor: pointer;
position: absolute;
box-sizing: border-box;
text-align: center;
border: 1px solid #d9d9d9;
border-radius: 8px;
background: #fff;
z-index: 1000;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.context-menu-item {
color: #666666;
font-size: 12px;
padding: 5px 10px;
border-bottom: 1px solid #d9d9d9;
}
.context-menu-item:nth-last-child(1) {
border: none;
}
.context-menu-item:hover {
background: #93c1da;
color: #fff;
}
.tab-btn {
padding: 0 5px;
font-size: 16px;
font-weight: bold;
line-height: 29px;
cursor: pointer;
position: absolute;
right: 5px;
}
.tabs-close-box:before {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -16px;
right: 38px;
padding: 0;
border-bottom: 8px solid #ffffff;
border-top: 8px solid transparent;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
display: block;
content: '';
z-index: 12;
}
.tabs-close-box:after {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -18px;
right: 37px;
padding: 0;
border-bottom: 9px solid #cccccc;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
display: block;
content: '';
z-index: 10;
}
</style>

42
ruoyi-ui/src/components/RightFence.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div class="right-fence-box">
<div class="content">
右侧边栏111
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
}
</script>
<style lang="scss">
//右侧边栏布局
.right-fence-box {
// width: 423px;
width: 25.5%;
min-height: calc(100% - 100px);
border-radius: 6px;
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
border-radius: 6px;
background: #ffffff;
position: absolute;
overflow-y: auto;
right: 24px;
top: 24px;
.content{
margin-top: 20%;
text-align: center;
}
.tab{
font-size: 2px;
background: red;
}
}
</style>

131
ruoyi-ui/src/layout/components/AppMain.vue
View File

@ -1,61 +1,70 @@
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view v-if="!$route.meta.link" :key="key" />
</keep-alive>
</transition>
<iframe-toggle />
</section>
</template>
<script>
import iframeToggle from "./IframeToggle/index"
export default {
name: 'AppMain',
components: { iframeToggle },
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;
}
.fixed-header + .app-main {
padding-top: 50px;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 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;
}
}
</style>
<template>
<section class="app-main">
<div class="left-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view v-if="!$route.meta.link" :key="key" />
</keep-alive>
</transition>
</div>
<RightFence></RightFence>
<iframe-toggle />
</section>
</template>
<script>
import iframeToggle from "./IframeToggle/index"
import RightFence from '@/components/RightFence.vue'
export default {
name: 'AppMain',
components: { iframeToggle, RightFence },
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
}
}
}
</script>
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
background-color: #EBEFFB;
height: calc(100vh - 50px);
width: 100%;
overflow-y: auto;
position: relative;
padding: 24px;
}
.left-main{
width: calc(75% - 40px);
}
.fixed-header + .app-main {
padding-top: 50px;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
height: calc(100vh - 80px);
}
.fixed-header + .app-main {
padding-top: 24px;
}
}
</style>
<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
padding-right: 17px;
}
}
</style>

186
ruoyi-ui/src/layout/components/Sidebar/Logo.vue
View File

@ -1,93 +1,93 @@
<template>
<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.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.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link>
</transition>
</div>
</template>
<script>
import logoImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss'
export default {
name: 'SidebarLogo',
props: {
collapse: {
type: Boolean,
required: true
}
},
computed: {
variables() {
return variables;
},
sideTheme() {
return this.$store.state.settings.sideTheme
}
},
data() {
return {
title: '若依管理系统',
logo: logoImg
}
}
}
</script>
<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
background: #2b2f3a;
text-align: center;
overflow: hidden;
& .sidebar-logo-link {
height: 100%;
width: 100%;
& .sidebar-logo {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 12px;
}
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0px;
}
}
}
</style>
<template>
<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.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.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link>
</transition>
</div>
</template>
<script>
import logoImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss'
export default {
name: 'SidebarLogo',
props: {
collapse: {
type: Boolean,
required: true
}
},
computed: {
variables() {
return variables;
},
sideTheme() {
return this.$store.state.settings.sideTheme
}
},
data() {
return {
title: '智能作业系统',
logo: logoImg
}
}
}
</script>
<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
background: #2b2f3a;
text-align: center;
overflow: hidden;
& .sidebar-logo-link {
height: 100%;
width: 100%;
& .sidebar-logo {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 12px;
}
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0px;
}
}
}
</style>

114
ruoyi-ui/src/layout/components/Sidebar/index.vue
View File

@ -1,57 +1,57 @@
<template>
<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.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";
export default {
components: { SidebarItem, Logo },
computed: {
...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() {
const route = this.$route;
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
}
return path;
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
}
}
};
</script>
<template>
<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.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";
export default {
components: { SidebarItem, Logo },
computed: {
...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() {
const route = this.$route;
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
}
return path;
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
}
}
};
</script>

243
ruoyi-ui/src/layout/index.vue
View File

@ -1,111 +1,132 @@
<template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<tags-view v-if="needTagsView" />
</div>
<app-main />
<right-panel>
<settings />
</right-panel>
</div>
</div>
</template>
<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
RightPanel,
Settings,
Sidebar,
TagsView
},
mixins: [ResizeMixin],
computed: {
...mapState({
theme: state => state.settings.theme,
sideTheme: state => state.settings.sideTheme,
sidebar: state => state.app.sidebar,
device: state => state.app.device,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
},
variables() {
return variables;
}
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.sidebarHide .fixed-header {
width: 100%;
}
.mobile .fixed-header {
width: 100%;
}
</style>
<template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div class="app-layout-header">
<div class="me-header">
<p-header></p-header>
</div>
</div>
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<!-- <tags-view v-if="needTagsView" />-->
</div>
<app-main />
<right-panel>
<settings />
</right-panel>
<RightFence></RightFence>
</div>
</div>
</template>
<script>
import RightPanel from '@/components/RightPanel'
import pHeader from '@/components/Header'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
RightPanel,
pHeader,
Settings,
Sidebar,
TagsView
},
mixins: [ResizeMixin],
computed: {
...mapState({
theme: state => state.settings.theme,
sideTheme: state => state.settings.sideTheme,
sidebar: state => state.app.sidebar,
device: state => state.app.device,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
},
variables() {
return variables;
}
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-layout-header {
width: 100%;
position: fixed;
}
.me-header {
width: 100%;
// height: 0.6rem;
height: 80px;
background-image: url('./../assets/img/home/head_bg_logo.png');
color: #333;
// background-size: cover;
background-size: 100% 100%;
}
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
overflow-y: hidden;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.sidebarHide .fixed-header {
width: 100%;
}
.mobile .fixed-header {
width: 100%;
}
</style>

174
ruoyi-ui/src/main.js
View File

@ -1,86 +1,88 @@
import Vue from 'vue'
import Cookies from 'js-cookie'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'
import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online! ! !
*/
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
import Vue from 'vue'
import Cookies from 'js-cookie'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import global from './plugins/global';
import { download } from '@/utils/request'
import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
Vue.prototype.$global = global;
// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online! ! !
*/
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

473
ruoyi-ui/src/plugins/global.js Normal file
View File

@ -0,0 +1,473 @@
import axios from 'axios'
const global = {
// 表单必输项
requiredRule: {
required: true,
message: '该项为必输项！',
trigger: ['blur', 'change'],
},
// 文件上传接口
uploadURL: process.env.VUE_APP_BASE_API + 'sys/file/upload',
//影像平台接口上传接口文件
uploadToIcon: process.env.VUE_APP_BASE_API + '/sys/file/uploadToIcon',
//文件下载
downLoadUrl: process.env.VUE_APP_BASE_API + 'sys/file/download?fileId=',
// 公告文件上传接口
uploadToIconSf: process.env.VUE_APP_BASE_API + '/sys/file/upload',
// 图片
// getPicUrl:'/get/{value}/mg.do'
getPicUrl: process.env.VUE_APP_BASE_API + '/sys/file/get/{value}/mg.do',
// 码值转换
getNameByCode: (codeInfo, codeValue, isMult = false) => {
if (!codeInfo) {
return codeValue
}
if (!codeValue) {
return ''
}
if (isMult) codeValue = isMult ? codeValue.split(',') : codeValue
let codeName = '',
codeValues = []
for (let i = 0; i < codeInfo.length; i++) {
if (Array.isArray(codeValue)) {
for (let j = 0; j < codeValue.length; j++) {
if (codeValue[j] == codeInfo[i].value) {
codeValues.push(codeInfo[i].content)
}
}
} else {
if (codeValue == codeInfo[i].value) {
codeName = codeInfo[i].content
break
}
}
codeName = codeValues.join(',')
}
return codeName == '' ? codeValue : codeName
},
// 分转元
regFenToYuan: val => {
let num = Number(val)
if (!isNaN(num)) {
num = num * 0.01 + ''
let reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g //千分符的正则
return num.replace(reg, '$1,')
} else {
return null
}
},
// 判断字符串是否为空
isEmptyStr(str) {
if (str == '') return true
const regu = '^[ ]+$'
const re = new RegExp(regu)
return re.test(str)
},
//文件下载/表格导出
downloadFiles(_url, _params, _this, requestFn = 'download') {
_this.$http[requestFn](_url, _params).then(response => {
if (_url === _this.$api.cmApi.exporAllCstInfo) {
console.log(response, 'response')
// if (response.isOK) {
// _this.$message.successs(response.msg)
// } else {
// _this.$message.error(response.msg)
// }
} else if (!response.data.code) {
let contentDisposition = response.headers['content-disposition']
const blob = new Blob([response.data])
if ('download' in document.createElement('a')) {
const elink = document.createElement('a')
let fileName = decodeURI(contentDisposition.substring(contentDisposition.indexOf('filename=') + 9, contentDisposition.length));
fileName = fileName.replace((/"/g), "");
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
} else {
navigator.msSaveBlob(blob, fileName)
}
} else {
_this.$message.error(response.msg)
}
})
},
/* 文件下载/表格导出
* 支持影像平台下载
*/
downloadImage(_url, _params, _this, requestFn = 'download') {
_this.$http[requestFn](_url, _params).then(response => {
if (!response.data.code) {
let fileName = response.headers['content-disposition']
const blob = new Blob([response.data])
if ('download' in document.createElement('a')) {
const elink = document.createElement('a')
// 公共方法不支持截取，去掉fileName两边的""
fileName = fileName.substr(0, fileName.length - 1)
let spcStr = (fileName.split('=')[1]).substr(1)
elink.download = fileName && decodeURI(spcStr)
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
} else {
navigator.msSaveBlob(blob, fileName)
}
} else {
_this.$message.error(response.msg)
}
})
},
/**
* 每隔几个字符进行添加对应标记
* @param {*} str 需要添加标记的字符串
* @param {*} vkey 标记
* @param {*} vnum 字符个数
*/
strReplace: (str, vnum = 2, vkey = '-') => {
if (!str) return ''
let result = ''
for (var i = 0, len = str.length; i < len; i++) {
result += str[i]
if (i % vnum == 1) result += vkey
}
if (result.slice(-1) == vkey) result = result.slice(0, -1)
return result
},
/**
* 判断是否是数组
*/
isArrayFn: value => {
if (typeof Array.isArray === 'function') {
return Array.isArray(value)
} else {
return Object.prototype.toString.call(value) === '[object Array]'
}
},
/**
* isEmpty 判空
*/
isEmpty: str => {
let flag = true
if (str != null && str != undefined)
flag =
str
.replace(/(^\s*)|(\s*$)/g, '')
.replace(/<\/?.+?>/g, '')
.replace(/[\r\n]/g, '').length > 0 ?
false :
true
return flag
},
/**
* 时间格式化
* @param {*} time 传入的时间
*/
timeFamat(time) {
var newTime = new Date(time)
var year = newTime.getFullYear() //年
var month = newTime.getMonth() + 1 //月
var day = newTime.getDate() //日
var clock = year + '-'
if (month < 10) clock += '0'
clock += month + '-'
if (day < 10) clock += '0'
clock += day
return clock
},
/**
* 创建当前时间
* @param {*} isTrue 精确到年、月、天标识
*/
createTime: isTrue => {
var now = new Date()
var year = now.getFullYear() //年
var month = now.getMonth() + 1 //月
var day = now.getDate() //日
var hh = now.getHours() //时
var mm = now.getMinutes() //分
var ss = now.getSeconds() //秒
if (isTrue == 'year') return year
var clock = year + '-'
if (month < 10) clock += '0'
if (isTrue == 'month') return (clock += month)
clock += month + '-'
if (day < 10) clock += '0'
clock += day
//精确到天
if (isTrue == 'day') return clock
clock += clock + ' '
if (hh < 10) clock += '0'
clock += hh + ':'
if (mm < 10) clock += '0'
clock += mm + ':'
if (ss < 10) clock += '0'
clock += ss
return clock
},
//加法
NumberAdd: (arg1, arg2, n = 2) => {
var r1, r2, m
try {
r1 = arg1.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return ((arg1 * m + arg2 * m) / m).toFixed(n)
},
//减法
NumberSub: (arg1, arg2) => {
var r1, r2, m, n
try {
r1 = arg1.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
//动态控制精度长度
n = r1 >= r2 ? r1 : r2
return ((arg1 * m - arg2 * m) / m).toFixed(n)
},
//乘法
NumberMul: (arg1, arg2) => {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString()
try {
m += s1.split('.')[1].length
} catch (e) {}
try {
m += s2.split('.')[1].length
} catch (e) {}
return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m)
},
//除法
NumberDiv: (arg1, arg2) => {
var t1 = 0,
t2 = 0,
r1,
r2
try {
t1 = arg1.toString().split('.')[1].length
} catch (e) {}
try {
t2 = arg2.toString().split('.')[1].length
} catch (e) {}
r1 = Number(arg1.toString().replace('.', ''))
r2 = Number(arg2.toString().replace('.', ''))
return (r1 / r2) * Math.pow(10, t2 - t1)
},
/*
检查数组是否有重复
keyName:数组里面的对象的属性名
*/
isArrayRepeat: (arr, keyName) => {
let hash = {}
if (keyName) {
for (let i in arr) {
if (hash[arr[i][keyName]]) {
return true
} else {
hash[arr[i][keyName]] = true
}
}
} else {
for (let i in arr) {
if (hash[arr[i]]) {
return true
} else {
hash[arr[i]] = true
}
}
}
return false
},
/*
异步请求顺序执行
_arr:方法名
*/
async getAllFn(_arr, _this) {
for (let i = 0; i < _arr.length; i++) {
await this.getReqDataFn(_arr[i], _this)
}
},
getReqDataFn(fn, _this) {
var p = new Promise(resolve => {
_this[fn]()
setTimeout(() => {
resolve()
}, 100)
})
return p
},
/*
格式化金额数字, 加千分位并保留两位小数
params: num(传入的金额)
*/
formatAmountNum: num => {
if (num == 0) {
return num
}
if (!num) {
return
}
num = num + ''
if (!num.includes('.')) {
num += '.'
}
return num
.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
return $1 + ','
})
.replace(/\.$/, '.00')
},
/**
* 时间比较大小
*/
compareDate: (sDate, eDate, isSame = false) => {
let st = new Date(sDate)
let et = new Date(eDate)
let flag = !st && !et ? false : st.getTime() >= et.getTime() ? false : true
if (isSame) flag = !st && !et ? false : st.getTime() > et.getTime() ? false : true
return flag
},
/**
* 手机号码验证
*/
checkPhoneFn: (mobile) => {
let reg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[0-9])[0-9]{8}$/;
return reg.test(mobile)
},
/**
* 将指定日期区间按月份分割
* @param {Object} beginDate 开始日期
* @param {Object} endDate 结束日期
* @return {Array} 分割好的array数组
*/
dateCutByMonth(beginDate, endDate) {
//分割好的数组
let dateCutList = new Array();
let b_date = new Date(beginDate);
let e_date = new Date(endDate);
//获取各个年份
let b_year = parseInt(b_date.getFullYear());
let e_year = parseInt(e_date.getFullYear());
//获取各个月份
let b_month = parseInt(b_date.getMonth()) + 1;
let e_month = parseInt(e_date.getMonth()) + 1;
//获取日期之间相差的月数
let month_list = monthList();
//按月份分割日期
for (let i = 0; i < month_list.length; i++) {
//当前月开始日期:第一天
let i_b_date = new Date(month_list[i]);
i_b_date.setDate(1);
//当前月最后一天
let i_e_date = new Date(month_list[i]);
i_e_date.setMonth(i_e_date.getMonth() + 1);
i_e_date.setDate(1);
i_e_date.setDate(i_e_date.getDate() - 1);
//第一次循环：开始月份
if (i == 0) {
let i_e_ymd = dateToString(i_e_date);
dateCutList.push([beginDate, i_e_ymd]);
//除第一次和最后一次循环：中间月份
} else if (i != 0 && i != month_list.length - 1) {
let i_b_ymd = dateToString(i_b_date);
let i_e_ymd = dateToString(i_e_date);
dateCutList.push([i_b_ymd, i_e_ymd]);
//最后一次循环：结束月份
} else if (i == month_list.length - 1) {
let i_b_ymd = dateToString(i_b_date);
dateCutList.push([i_b_ymd, endDate]);
}
}
return dateCutList;
/**
* 获取日期区间的月份集合
*/
function monthList() {
//相差的月份总数
let result = new Array();
let b = new Date(b_year, b_month - 1, 1);
let e = new Date(e_year, e_month - 1, 1);
while (b < e) {
result.push(b.getFullYear() + "-" + (b.getMonth() + 1));
b.setMonth(b.getMonth() + 1);
}
result.push(e_year + "-" + e_month);
return result;
}
/**
* 将日期转换为指定格式的字符串
* @param {Date} date 要转换的日期
*/
function dateToString(date) {
let month = (date.getMonth() + 1);
let day = date.getDate();
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
return date.getFullYear() + "-" + (month) + "-" + day;
}
},
}
export default global

32
ruoyi-ui/src/plugins/waterMark.js Normal file
View File

@ -0,0 +1,32 @@
let style
let clearWaterMark = () => {
if (style) style.remove
}
export default function createWaterMark(str,_height) {
clearWaterMark()
if (!str) return
let width = window.parseInt(document.body.clientWidth),
canvasWidth = width / window.parseInt(width / 400),
fontFamily = window.getComputedStyle(document.body)['font-family'],
canvas = document.createElement('canvas')
canvas.width = canvasWidth
canvas.height = 200
let cxt = canvas.getContext('2d')
cxt.rotate((-20 * Math.PI) / 180)
cxt.font = `18px${fontFamily}`
cxt.fillStyle = 'rgba(8,8,8,0.2)'
cxt.fillText(str, 50, 200)
let imgSrc = canvas.toDataURL('image/png')
style = document.createElement('style')
style.innerHTML = `.with-watermark:before{
content:"";
width:100%;
pointer-events:none;
height:${_height}px;
display:block;
position:absolute;
z-index:99999;
background-image:url("${imgSrc}")
}`
;(document.head.append || document.head.appendChild).apply(document.head, [style])
}

230
ruoyi-ui/src/store/modules/user.js
View File

@ -1,115 +1,115 @@
import { login, logout, getInfo, refreshToken } from '@/api/login'
import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
const user = {
state: {
token: getToken(),
name: '',
avatar: '',
roles: [],
permissions: []
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_EXPIRES_IN: (state, time) => {
state.expires_in = time
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
},
actions: {
// 登录
Login({ commit }, userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => {
let data = res.data
setToken(data.access_token)
commit('SET_TOKEN', data.access_token)
setExpiresIn(data.expires_in)
commit('SET_EXPIRES_IN', data.expires_in)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
GetInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.user
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : 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)
}).catch(error => {
reject(error)
})
})
},
// 刷新token
RefreshToken({commit, state}) {
return new Promise((resolve, reject) => {
refreshToken(state.token).then(res => {
setExpiresIn(res.data)
commit('SET_EXPIRES_IN', res.data)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 退出系统
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
},
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
}
}
export default user
import { login, logout, getInfo, refreshToken } from '@/api/login'
import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
const user = {
state: {
token: getToken(),
name: '',
avatar: '',
roles: [],
permissions: []
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_EXPIRES_IN: (state, time) => {
state.expires_in = time
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
},
actions: {
// 登录
Login({ commit }, userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => {
let data = res.data
setToken(data.access_token)
commit('SET_TOKEN', data.access_token)
setExpiresIn(data.expires_in)
commit('SET_EXPIRES_IN', data.expires_in)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
GetInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.user
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : 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)
}).catch(error => {
reject(error)
})
})
},
// 刷新token
RefreshToken({commit, state}) {
return new Promise((resolve, reject) => {
refreshToken(state.token).then(res => {
setExpiresIn(res.data)
commit('SET_EXPIRES_IN', res.data)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 退出系统
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
},
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
}
}
export default user

973
ruoyi-ui/src/views/index.vue
View File

@ -1,875 +1,98 @@
<template>
<div class="app-container home">
<el-row :gutter="20">
<el-col :sm="24" :lg="24">
<blockquote class="text-warning" style="font-size: 14px">
领取阿里云通用云产品1888优惠券
<br />
<el-link
href="https://www.aliyun.com/minisite/goods?userCode=brki8iof"
type="primary"
target="_blank"
>https://www.aliyun.com/minisite/goods?userCode=brki8iof</el-link
>
<br />
领取腾讯云通用云产品2860优惠券
<br />
<el-link
href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console"
type="primary"
target="_blank"
>https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</el-link
>
<br />
阿里云服务器折扣区
<el-link href="http://aly.ruoyi.vip" type="primary" target="_blank"
>>☛☛点我进入☚☚</el-link
>
&nbsp;&nbsp;&nbsp; 腾讯云服务器秒杀区
<el-link href="http://txy.ruoyi.vip" type="primary" target="_blank"
>>☛☛点我进入☚☚</el-link
><br />
<h4 class="text-danger">
云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)
</h4>
</blockquote>
<hr />
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :sm="24" :lg="12" style="padding-left: 20px">
<h2>若依后台管理框架</h2>
<p>
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
</p>
<p>
<b>当前版本:</b> <span>v{{ version }}</span>
</p>
<p>
<el-tag type="danger">&yen;免费开源</el-tag>
</p>
<p>
<el-button
type="primary"
size="mini"
icon="el-icon-cloudy"
plain
@click="goTarget('https://gitee.com/y_project/RuoYi-Cloud')"
>访问码云</el-button
>
<el-button
size="mini"
icon="el-icon-s-home"
plain
@click="goTarget('http://ruoyi.vip')"
>访问主页</el-button
>
</p>
</el-col>
<el-col :sm="24" :lg="12" style="padding-left: 50px">
<el-row>
<el-col :span="12">
<h2>技术选型</h2>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<h4>后端技术</h4>
<ul>
<li>SpringBoot</li>
<li>SpringCloud</li>
<li>Nacos</li>
<li>Sentinel</li>
<li>Seata</li>
<li>Minio</li>
<li>...</li>
</ul>
</el-col>
<el-col :span="6">
<h4>前端技术</h4>
<ul>
<li>Vue</li>
<li>Vuex</li>
<li>Element-ui</li>
<li>Axios</li>
<li>Echarts</li>
<li>Quill</li>
<li>...</li>
</ul>
</el-col>
</el-row>
</el-col>
</el-row>
<el-divider />
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="12" :lg="8">
<el-card class="update-log">
<div slot="header" class="clearfix">
<span>联系信息</span>
</div>
<div class="body">
<p>
<i class="el-icon-s-promotion"></i> 官网：<el-link
href="http://www.ruoyi.vip"
target="_blank"
>http://www.ruoyi.vip</el-link
>
</p>
<p>
<i class="el-icon-user-solid"></i> QQ群：<s>满42799195</s> <s>满170157040</s>
<s>满130643120</s> <s>满225920371</s> <s>满201705537</s> <s>满236543183</s>
<s>满213618602</s> <a href="https://jq.qq.com/?_wv=1027&k=kiU5WDls" target="_blank">
148794840</a
>
</p>
<p>
<i class="el-icon-chat-dot-round"></i> 微信：<a
href="javascript:;"
>/ *若依</a
>
</p>
<p>
<i class="el-icon-money"></i> 支付宝：<a
href="javascript:;"
class="支付宝信息"
>/ *若依</a
>
</p>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="8">
<el-card class="update-log">
<div slot="header" class="clearfix">
<span>更新日志</span>
</div>
<el-collapse accordion>
<el-collapse-item title="v3.6.1 - 2022-10-01">
<ol>
<li>数据逻辑删除不进行唯一验证</li>
<li>支持多权限字符匹配角色数据权限</li>
<li>页面内嵌iframe切换tab不刷新数据</li>
<li>新增密码最大错误次数/锁定时间</li>
<li>登录日志新增解锁账户功能</li>
<li>通用下载方法新增config配置选项</li>
<li>操作日志记录支持排除敏感属性字段</li>
<li>Excel注解支持导出对象的子列表方法</li>
<li>Excel注解支持自定义隐藏属性列</li>
<li>Excel注解支持backgroundColor属性设置背景色</li>
<li>升级spring-cloud-alibaba到最新版2021.0.4.0</li>
<li>升级spring-cloud到最新版2021.0.4</li>
<li>升级spring-boot到最新版本2.7.3</li>
<li>升级spring-boot-admin到最新版2.7.5</li>
<li>升级seata到最新版1.5.2</li>
<li>升级druid到最新版本1.2.12</li>
<li>升级fastjson到最新版2.0.14</li>
<li>升级pagehelper到最新版1.4.5</li>
<li>升级core-js到最新版本3.25.2</li>
<li>升级dynamic-ds到最新版本3.5.2</li>
<li>升级element-ui到最新版本2.15.10</li>
<li>修复多文件上传报错出现的异常问题</li>
<li>修复图片预览组件src属性为null值控制台报错问题</li>
<li>修复使用FastDFS上传头像失败提示文件名没有后缀问题</li>
<li>优化seata单独依赖模块</li>
<li>优化任务过期不执行调度</li>
<li>优化字典数据使用store存取</li>
<li>优化代码生成同步后值NULL问题</li>
<li>优化定时任务支持执行父类方法</li>
<li>优化修改资料头像被覆盖的问题</li>
<li>优化修改用户登录账号重复验证</li>
<li>优化用户个人信息接口防止修改部门</li>
<li>优化布局设置使用el-drawer抽屉显示</li>
<li>优化日志注解记录限制请求地址的长度</li>
<li>优化导入更新用户数据前校验数据权限</li>
<li>优化excel/scale属性导出单元格数值类型</li>
<li>优化日志操作中重置按钮时重复查询的问题</li>
<li>优化多个相同角色数据导致权限SQL重复问题</li>
<li>优化表格上右侧工具条（搜索按钮显隐&右侧样式凸出）</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v3.6.0 - 2022-07-16">
<ol>
<li>Excel注解支持color字体颜色</li>
<li>用户头像上传限制只能为图片格式</li>
<li>检查定时任务bean所在包名是否为白名单配置</li>
<li>字典类型必须以字母开头，且只能为（小写字母，数字，下滑线）</li>
<li>升级spring-cloud-alibaba到最新版2021.0.1.0</li>
<li>升级spring-cloud到最新版2021.0.3</li>
<li>升级spring-boot到最新版本2.7.1</li>
<li>升级spring-boot-admin到最新版2.7.2</li>
<li>升级seata到最新版1.5.1</li>
<li>升级pagehelper到最新版1.4.3</li>
<li>升级dynamic-ds到最新版本3.5.1</li>
<li>升级fastjson到最新版2.0.9</li>
<li>升级druid到最新版本1.2.11</li>
<li>升级transmittable-thread-local到最新版本2.13.2</li>
<li>升级element-ui到最新版本2.15.9</li>
<li>修复字典数据显示不全问题</li>
<li>修复操作日志查询类型条件为0时会查到所有数据</li>
<li>优化验证码开关变量名</li>
<li>优化设置分页参数默认值</li>
<li>优化对空字符串参数处理的过滤</li>
<li>优化Maven使用阿里云镜像站加速</li>
<li>优化用户列表查询不显示密码字段</li>
<li>优化表单构建按钮不显示正则校验</li>
<li>优化字典类型删除多余的mapper注解</li>
<li>优化字典数据回显样式下拉框显示值</li>
<li>优化用户管理左侧树型组件增加选中高亮保持</li>
<li>优化新增用户与角色信息&用户与岗位信息逻辑</li>
<li>优化数据监控Spring Security权限认证过时代码</li>
<li>优化岗位长主键溢出问题将查询返回类型改为Long</li>
<li>优化删除无用admin-client依赖声明，避免造成误解</li>
<li>优化默认不启用压缩文件缓存防止node_modules过大</li>
<li>优化获取body请求数据缓存过滤器CacheRequestFilter</li>
<li>优化网关通过注解解决循环引用及Bean重复问题删除allow配置</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v3.5.0 - 2022-04-11">
<ol>
<li>开启TopNav没有子菜单情况隐藏侧边栏</li>
<li>侧边栏菜单名称过长悬停显示标题</li>
<li>用户访问控制时校验数据权限，防止越权</li>
<li>导出Excel时屏蔽公式，防止CSV注入风险</li>
<li>组件ImageUpload支持多图同时选择上传</li>
<li>组件FileUpload支持多文件同时选择上传</li>
<li>代码生成树表新增(展开/折叠)</li>
<li>代码生成子表支持日期/字典配置</li>
<li>代码生成编辑修改打开新页签</li>
<li>添加页签openPage支持传递参数</li>
<li>添加清理分页的线程变量方法</li>
<li>修改npm即将过期的注册源地址</li>
<li>用户缓存信息添加部门ancestors祖级列表</li>
<li>升级spring-cloud到最新版2021.0.1</li>
<li>升级spring-boot到最新版本2.6.6</li>
<li>升级spring-boot-admin到最新版2.6.6</li>
<li>升级spring-boot-mybatis到最新版2.2.2</li>
<li>降级jsencrypt版本兼容IE浏览器</li>
<li>修复分页组件请求两次问题</li>
<li>修复表单清除元素位置未垂直居中问题</li>
<li>修复Excel注解prompt/combo同时使用不生效问题</li>
<li>修复导入Excel时字典字段类型为Long转义为空问题</li>
<li>修复登录超时刷新页面跳转登录页面还提示重新登录问题</li>
<li>修复Xss注解字段值为空时的异常问题</li>
<li>优化IP地址获取到多个的问题</li>
<li>优化文件上传兼容Weblogic环境</li>
<li>代码生成同步保留必填/类型选项</li>
<li>优化Excel格式化不同类型的日期对象</li>
<li>优化菜单表关键字导致的插件报错问题</li>
<li>优化Oracle用户头像列为空时不显示问题</li>
<li>优化页面若未匹配到字典标签则返回原字典值</li>
<li>优化修复登录失效后多次请求提示多次弹窗问题</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v3.4.0 - 2022-01-24">
<ol>
<li>新增Vue3前端代码生成模板</li>
<li>新增图片预览组件</li>
<li>新增压缩插件实现打包Gzip</li>
<li>新增docker一键复制的脚本</li>
<li>自定义xss校验注解实现</li>
<li>路由支持单独配置菜单或角色权限</li>
<li>前端支持设置是否需要防止数据重复提交</li>
<li>预览组件支持多图显示</li>
<li>代码生成列表图片支持预览</li>
<li>代码生成新增Java类型Boolean</li>
<li>定时任务目标字符串过滤特殊字符</li>
<li>定时任务目标字符串验证包名白名单</li>
<li>升级nacos到最新版2.0.4</li>
<li>升级spring-cloud到最新版2021.0.0</li>
<li>升级spring-boot到最新版本2.6.3</li>
<li>升级spring-boot-admin到最新版2.6.1</li>
<li>升级pagehelper到最新版1.4.1</li>
<li>升级fastjson到最新版1.2.79</li>
<li>SQL工具类新增检查关键字方法</li>
<li>修复打包后字体图标偶现的乱码问题</li>
<li>修复版本差异导致的懒加载报错问题</li>
<li>修复选项卡点击右键刷新丢失参数问题</li>
<li>修复登录失效后多次请求提示多次弹窗问题</li>
<li>优化加载字典缓存数据</li>
<li>优化代码生成同步更新字段</li>
<li>优化代码生成字典组重复问题</li>
<li>优化空值不进行回显数据字典</li>
<li>优化用户导入提示溢出则显示滚动条</li>
<li>优化定时任务cron表达式小时设置24</li>
<li>优化部门修改缩放后出现的错位问题</li>
<li>优化分页方法设置成通用方便灵活调用</li>
<li>优化用户管理部门查询选择节点后分页参数初始</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v3.3.0 - 2021-12-13">
<ol>
<li>新增配套并同步的Vue3前端版本</li>
<li>新增认证对象简化权限验证</li>
<li>新增tab对象简化页签操作</li>
<li>修改获取缓存信息方式</li>
<li>修改权限认证注解实现</li>
<li>自定义文字复制剪贴指令</li>
<li>升级axios到最新版本0.24.0</li>
<li>升级core-js到最新版本3.19.1</li>
<li>升级jsencrypt到最新版本3.2.1</li>
<li>升级js-cookie到最新版本3.0.1</li>
<li>升级clipboard到最新版本2.0.8</li>
<li>升级velocity到最新版本2.3</li>
<li>升级spring-boot到最新版本2.5.6</li>
<li>升级spring-boot-admin到最新版2.5.4</li>
<li>升级dynamic-ds到最新版本3.5.0</li>
<li>代码生成预览支持复制内容</li>
<li>修复五级以上菜单出现的404问题</li>
<li>生产环境使用路由懒加载提升页面响应速度</li>
<li>任务屏蔽违规字符&参数忽略双引号中的逗号</li>
<li>优化用户个人信息接口防止修改用户名</li>
<li>优化登录/验证码请求headers不设置token</li>
<li>优化注册成功提示消息类型success</li>
<li>优化下载解析blob响应是否登录失效</li>
<li>修复字符串无法被反转义问题</li>
<li>修复响应体过大出现的乱码问题</li>
<li>修复回显数据字典组的键值错误</li>
<li>修复代码生成复选框字典遗漏问题</li>
<li>修复代码生成模板主子表删除缺少事务</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v3.2.0 - 2021-10-12">
<ol>
<li>菜单管理支持配置路由参数</li>
<li>定时任务支持在线生成cron表达式</li>
<li>自定义弹层溢出滚动样式</li>
<li>自定义可拖动弹窗宽度指令</li>
<li>自定义可拖动弹窗高度指令</li>
<li>修改时检查用户数据权限范围</li>
<li>修复保存配置主题颜色失效问题</li>
<li>新增暗色菜单风格主题</li>
<li>菜单&部门新增展开/折叠功能</li>
<li>页签新增关闭左侧&添加图标</li>
<li>代码生成主子表多选行数据</li>
<li>日期范围支持添加多组</li>
<li>Excel导入支持@Excels注解</li>
<li>Excel注解支持导入导出标题信息</li>
<li>Excel注解支持自定义数据处理器</li>
<li>日志注解新增是否保存响应参数</li>
<li>定时任务对检查异常进行事务回滚</li>
<li>补充定时任务表字段注释</li>
<li>定时任务屏蔽ldap远程调用</li>
<li>新增通用方法简化下载使用</li>
<li>新增通用方法简化模态/缓存使用</li>
<li>新增data-dict组件简化数据字典使用</li>
<li>禁用dict-tag组件的渐变动画</li>
<li>默认首页使用keep-alive缓存</li>
<li>升级springcloud到最新版2020.0.4</li>
<li>升级spring-boot到最新版本2.5.5</li>
<li>升级spring-boot-admin到最新版2.5.2</li>
<li>升级pagehelper到最新版1.4.0</li>
<li>升级fastjson到最新版1.2.78</li>
<li>升级druid到最新版1.2.8</li>
<li>升级element-ui到最新版本2.15.6</li>
<li>升级sass-loader到最新版本10.1.1</li>
<li>升级dart-sass到版本1.32.13</li>
<li>升级file-saver到最新版本2.0.5</li>
<li>优化异常处理信息</li>
<li>验证码默认20s超时</li>
<li>优化代码生成导入表按创建时间排序</li>
<li>优化代码生成点击预览重置激活tab</li>
<li>修复主子表代码模板方法名错误问题</li>
<li>修复xss过滤后格式出现的异常</li>
<li>修复多图组件验证失败被删除问题</li>
<li>请求参数新增reasonable分页合理化属性</li>
<li>修复代码生成页面数据编辑保存之后总是跳转第一页的问题</li>
<li>修复带safari浏览器无法格式化utc日期格式yyyy-MM-dd'T'HH:mm:ss.SSS问题</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v3.1.0 - 2021-08-02">
<ol>
<li>支持配置XSS跨站脚本过滤</li>
<li>支持配置验证码开关&类型</li>
<li>新增是否开启用户注册功能</li>
<li>用户管理新增分配角色功能</li>
<li>角色管理新增分配用户功能</li>
<li>系统布局配置支持动态标题开关</li>
<li>增加字典标签样式回显dict组件</li>
<li>FileUpload组件支持多文件上传</li>
<li>ImageUpload组件支持多图片上传</li>
<li>封装通用iframe组件</li>
<li>菜单路由配置支持内链访问</li>
<li>全局注册通用组件</li>
<li>富文本默认上传返回url类型</li>
<li>富文本新增上传文件大小限制</li>
<li>增加自定义弹窗拖拽指令</li>
<li>顶部菜单排除隐藏的默认路由</li>
<li>跳转路由高亮相对应的菜单栏</li>
<li>日志列表支持排序操作</li>
<li>分页组件新增pagerCount属性</li>
<li>定时任务屏蔽http(s)远程调用</li>
<li>文件服务本地资源允许跨域访问</li>
<li>升级spring-boot到最新版本2.5.3</li>
<li>升级spring-boot-admin到最新版2.4.3</li>
<li>升级spring-boot-mybatis到最新版2.2.0</li>
<li>升级nacos到最新版2.0.3</li>
<li>升级pagehelper到最新版1.3.1</li>
<li>升级minio到最新版本8.2.2</li>
<li>升级tobato到最新版本1.27.2</li>
<li>升级dynamic-ds到最新版本3.4.1</li>
<li>升级commons.io到最新版本v2.11.0</li>
<li>升级common-pool到最新版本2.10.0</li>
<li>升级commons.fileupload到最新版本v1.4</li>
<li>升级element-ui到最新版本2.15.3</li>
<li>优化统一网关错误码响应</li>
<li>修复导出含params属性对象参数问题</li>
<li>修复任意账户越权问题</li>
<li>修复定时任务日志执行状态显示</li>
<li>修改登录失效返回值code401</li>
<li>用户信息长度校验限制</li>
<li>角色&菜单新增字段属性提示信息</li>
<li>修复用户搜索分页变量错误</li>
<li>优化部门父级启用状态</li>
<li>启用部门状态排除顶级节点</li>
<li>定时任务新增更多操作</li>
<li>优化代码生成模板</li>
<li>优化顶部菜单显示样式</li>
<li>优化导入用户显示样式</li>
<li>优化用户不能删除自己</li>
<li>密码框新增显示切换密码图标</li>
<li>BLOB下载时清除URL对象引用</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v3.0.0 - 2021-06-10">
<ol>
<li>新增菜单导航显示风格TopNav（false为左侧导航菜单，true为顶部导航菜单）</li>
<li>布局设置支持保存&重置配置</li>
<li>富文本编辑器支持自定义上传地址</li>
<li>富文本编辑组件新增readOnly属性</li>
<li>优化参数&字典缓存操作</li>
<li>新增IE浏览器版本过低提示页面</li>
<li>页签TagsView新增关闭右侧功能</li>
<li>显隐列组件加载初始默认隐藏列</li>
<li>关闭头像上传窗口还原默认图片</li>
<li>个人信息添加手机&邮箱重复验证</li>
<li>代码生成模板树表操作列添加新增按钮</li>
<li>代码生成模板修复主子表字段重名问题</li>
<li>支持docker部署项目</li>
<li>升级springcloud到最新版2020.0.3</li>
<li>升级spring-boot-alibaba到最新版2021.1</li>
<li>升级nacos到最新版2.0.1 性能提升</li>
<li>升级spring-boot到最新版本2.5.0</li>
<li>升级spring-boot-admin到最新版2.4.1</li>
<li>升级swagger到最新版本3.0.0</li>
<li>升级mybatis到最新版3.5.6</li>
<li>升级dynamic-ds到最新版本3.3.2</li>
<li>升级minio到最新版本8.2.1</li>
<li>升级fastjson到最新版1.2.76</li>
<li>升级druid到最新版本v1.2.6</li>
<li>修复四级菜单无法显示问题</li>
<li>修复树表数据显示不全&加载慢问题</li>
<li>修复关闭confirm提示框控制台报错问题</li>
<li>上传媒体类型添加视频格式</li>
<li>增加feign客户端IP头部信息</li>
<li>修复两处存在SQL注入漏洞问题</li>
<li>优化图片工具类读取文件，防止异常</li>
<li>修复导出角色数据范围翻译缺少仅本人</li>
<li>修复表单构建选择下拉选择控制台报错问题</li>
<li>修复请求形参未传值记录日志异常问题</li>
<li>调整sql默认为当前时间</li>
<li>修改ip字段长度防止ipv6地址长度不够</li>
<li>删除操作日志记录信息</li>
<li>修复firefox下表单构建拖拽会新打卡一个选项卡</li>
<li>用户&角色单条删除时使其逻辑删除</li>
<li>优化树表代码生成模板</li>
<li>修正通知公告日志记录类型</li>
<li>修正后端导入表权限标识</li>
<li>过滤BindingResult对象，防止异常</li>
<li>Redis设置HashKey序列化</li>
<li>优化Excel导入增加空行判断</li>
<li>树级结构更新子节点使用replaceFirst</li>
<li>富文本工具栏配置视频</li>
<li>修正模板字符编码</li>
<li>优化通用下载完成后删除节点</li>
<li>角色非自定义权限范围清空选择值</li>
<li>修改主题后mini类型按钮无效问题</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v2.5.0 - 2021-02-02">
<ol>
<li>增加分布式事务seata支持</li>
<li>代码生成模板支持主子表</li>
<li>表格右侧工具栏组件支持显隐列</li>
<li>图片组件添加预览&移除功能</li>
<li>Excel注解支持Image图片导出</li>
<li>操作按钮组调整为朴素按钮样式</li>
<li>代码生成支持文件上传组件</li>
<li>代码生成日期控件区分范围</li>
<li>代码生成数据库文本类型生成表单文本域</li>
<li>用户手机邮箱&菜单组件修改允许空字符串</li>
<li>修复header获取username中文情况下乱码</li>
<li>修复角色管理-编辑角色-功能权限显示异常</li>
<li>修正操作日志删除接口路径</li>
<li>修复IE11浏览器报错问题</li>
<li>修复sentinel流量告警前端不响应</li>
<li>修正侧边栏静态路由丢失问题</li>
<li>修复导入数据为负浮点数时丢失精度问题</li>
<li>修复Get请求参数特殊值无法正确的传参</li>
<li>更换过期的共享配置属性</li>
<li>添加启动执行脚本</li>
<li>升级element-ui到最新版本2.15.0</li>
<li>升级spring-boot到最新版本2.3.7</li>
<li>升级spring-cloud到Hoxton.SR9</li>
<li>升级spring-boot-alibaba到最新版2.2.5</li>
<li>升级spring-boot-admin到最新版2.3.1</li>
<li>升级druid到最新版本v1.2.4</li>
<li>升级fastjson到最新版1.2.75</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v2.4.0 - 2020-12-22">
<ol>
<li>增加分布式文件Minio支持</li>
<li>支持多数据源切换</li>
<li>修复多级菜单之间切换无法缓存的问题</li>
<li>三级菜单自动配置组件</li>
<li>支持主题风格配置</li>
<li>服务之间feign调用传递用户信息</li>
<li>删除用户和角色解绑关联</li>
<li>去除用户手机邮箱部门必填验证</li>
<li>代码生成预览支持高亮显示</li>
<li>获取请求token方法移至权限工具类</li>
<li>代码生成预览提供滚动机制</li>
<li>权限工具类增加管理员判断</li>
<li>日志记录增加过滤多文件场景</li>
<li>修改用户头像预览宽高</li>
<li>Excel支持注解align对齐方式</li>
<li>项目添加robots.txt 防止系统被搜索引擎收录</li>
<li>移除path-to-regexp正则匹配插件</li>
<li>修改Set可能导致嵌套的问题</li>
<li>调整代码生成页列宽</li>
<li>回显数据字典防止空值报错</li>
<li>支持get请求映射params参数</li>
<li>登录后push添加catch防止出现检查错误</li>
<li>防止安全扫描YUI出现的风险提示</li>
<li>代码生成删除多余的数字float类型</li>
<li>Excel支持导入Boolean型数据</li>
<li>修正转换字符串的目标字符集属性</li>
<li>删除多余的依赖</li>
<li>修改node-sass为dart-sass</li>
<li>升级poi到最新版本4.1.2</li>
<li>升级axios到最新版本0.21.0</li>
<li>升级element-ui到最新版本2.14.1</li>
<li>升级vue到最新版本2.6.12</li>
<li>升级vuex到最新版本3.6.0</li>
<li>升级vue-cli到版本4.5.9</li>
<li>升级vue-router到最新版本3.4.9</li>
<li>升级vue-cli到最新版本4.4.6</li>
<li>升级vue-cropper到最新版本0.5.5</li>
<li>升级clipboard到最新版本2.0.6</li>
<li>升级core-js到最新版本3.8.1</li>
<li>升级echarts到最新版本4.9.0</li>
<li>升级file-saver到最新版本2.0.4</li>
<li>升级fuse.js到最新版本6.4.3</li>
<li>升级js-beautify到最新版本1.13.0</li>
<li>升级js-cookie到最新版本2.2.1</li>
<li>升级path-to-regexp到最新版本6.2.0</li>
<li>升级quill到最新版本1.3.7</li>
<li>升级screenfull到最新版本5.0.2</li>
<li>升级sortablejs到最新版本1.10.2</li>
<li>升级vuedraggable到最新版本2.24.3</li>
<li>升级chalk到最新版本4.1.0</li>
<li>升级eslint到最新版本7.15.0</li>
<li>升级eslint-plugin-vue到最新版本7.2.0</li>
<li>升级lint-staged到最新版本10.5.3</li>
<li>升级runjs到最新版本4.4.2</li>
<li>升级sass-loader到最新版本10.1.0</li>
<li>升级script-ext-html-webpack-plugin到最新版本2.1.5</li>
<li>升级svg-sprite-loader到最新版本5.1.1</li>
<li>升级vue-template-compiler到最新版本2.6.12</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v2.3.0 - 2020-11-20">
<ol>
<li>新增文件服务应用（支持本地、FastDFS）</li>
<li>优化头像样式，鼠标移入悬停遮罩</li>
<li>AjaxResult重写put方法，以方便链式调用</li>
<li>代码生成支持上传控件</li>
<li>新增图片上传组件</li>
<li>支持用户头像更新</li>
<li>调整默认首页</li>
<li>角色权限验证hasRole匹配改为equals</li>
<li>修正数组权限为空判断</li>
<li>修正注释选中节点和半选节点获取</li>
<li>升级pagehelper到最新版1.3.0</li>
<li>升级fastjson到最新版1.2.74</li>
<li>修正定时任务执行一次权限标识</li>
<li>修复页签关闭所有固定标签路由不刷新问题</li>
<li>表单构建布局型组件新增按钮</li>
<li>调整日志路径到模块目录</li>
<li>修正菜单提示信息错误</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v2.2.0 - 2020-10-10">
<ol>
<li>移除 OAuth2 改为 Redis</li>
<li>升级SpringCloud到最新版本Hoxton.SR8</li>
<li>升级SpringCloud Alibaba到最新版本2.2.3</li>
<li>升级SpringBoot Admin到最新版本2.3.0</li>
<li>升级Fastjson到最新版1.2.73</li>
<li>新增在线用户会话管理</li>
<li>修改用户个人资料/密码同步缓存信息</li>
<li>修复前端通用导出方法参数传值请求方式问题</li>
<li>菜单新增是否缓存keep-alive</li>
<li>菜单&数据权限新增（展开/折叠 全选/全不选 父子联动）</li>
<li>Job与Gen模块增加Redis默认配置</li>
<li>新增表格右侧工具栏组件right-toolbar</li>
<li>代码生成支持同步数据库</li>
<li>代码生成支持富文本控件</li>
<li>代码生成树模板去掉多余双引号</li>
<li>代码生成添加select必填选项</li>
<li>代码生成页面时不忽略remark属性</li>
<li>修复代码生成下载路径错误</li>
<li>左侧菜单文字过长显示省略号</li>
<li>表格操作列间距调整</li>
<li>Excel注解支持自动统计数据总和</li>
<li>Excel注解支持设置BigDecimal精度&舍入规则</li>
<li>导入Excel整形值校验优化</li>
<li>导出Excel类型NUMERIC支持精度浮点类型</li>
<li>导出Excel调整targetAttr获取值方法，防止get方法不规范</li>
<li>Token续期调整为后端刷新</li>
<li>Token设置默认有效期时长12小时</li>
<li>网关白名单放入nacos配置&支持模糊匹配</li>
<li>修复富文本工具栏样式不对齐问题</li>
<li>Editor组件优化，支持自定义高度&图片冲突问题</li>
<li>
修复富文本空格和缩进保存后不生效问题&删除重复的placeholder
</li>
<li>限制系统内置参数不允许删除</li>
<li>修正调用目标字符串最大长度</li>
<li>修改自定义权限实现</li>
<li>优化递归菜单&部门子节点</li>
<li>修改sass为node-sass，避免el-icon图标乱码</li>
<li>修复根节点为子部门时，树状结构显示问题</li>
<li>全局异常状态汉化拦截处理</li>
<li>唯一限制条件只返回单条数据</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v2.1.0 - 2020-08-02">
<ol>
<li>表格工具栏右侧添加刷新&显隐查询栏</li>
<li>OAuth自动刷新续签Token</li>
<li>网关支持黑名单配置</li>
<li>权限配置自动注册</li>
<li>Feign配置自动注册</li>
<li>代码生成支持选择上级菜单</li>
<li>代码生成支持复选框</li>
<li>代码生成支持自定义路径</li>
<li>验证码类型支持（数组计算、字符验证）</li>
<li>Excel支持sort导出排序</li>
<li>Excel支持分割字符串组内容</li>
<li>excel 导入数字不需要格式化 ，导入允许列和属性个数不一致</li>
<li>新增菜单默认主类目</li>
<li>升级vue-cli版本到4.4.4</li>
<li>修改 node-sass 为 dart-sass</li>
<li>升级element-ui版本到2.13.2</li>
<li>删除babel，提高编译速度</li>
<li>修复验证码异常时network面板的中文会出现乱码问题</li>
<li>修复 utils/index.js 中不包含 parseTime 函数的 bug</li>
<li>优化selectDictLabel方法，数组迭代器换为some</li>
<li>修复客户端模式认证会出现错误</li>
<li>检查字符支持小数点&降级改成异常提醒</li>
<li>定时任务添加cron表达式验证</li>
<li>代码生成查询条件修正</li>
<li>修正角色管理导出权限权限字符</li>
<li>修正防止切换权限用户后登录出现404</li>
<li>终端设置安全码加密&更新缓存</li>
<li>修复头像上传成功二次打开无法改变裁剪框大小和位置问题</li>
<li>修复布局为small者mini用户表单显示错位问题</li>
<li>修复代码生成点击多次表修改数据不变化的问题</li>
<li>修复代码生成导入表结构出现异常页面不提醒问题</li>
<li>修复角色权限修改时已有权限未自动勾选异常</li>
<li>创建用户不允许选择系统管理员角色</li>
<li>添加全局异常处理（网关异常&业务异常）</li>
<li>修复终端查询Enter键搜索时是刷新页面而不是查询列表</li>
<li>删除job重复表单参数</li>
<li>代码生成浮点型改用BigDecimal</li>
<li>表单类型为Integer/Long设置整形默认值</li>
<li>修改用户管理复选框宽度，防止部分浏览器出现省略号</li>
<li>
RedisCache中所有方法参数添加final，并优化list取出效率，添加其它常用redis方法
</li>
<li>修正定时任务日志权限字符</li>
<li>添加Jackson时区配置</li>
<li>代码生成相关问题修复</li>
<li>自定义oauth2返回异常信息</li>
<li>升级nacos到最新版1.3.0 全新内核构建</li>
<li>修正【代码生成】功能无法下载的问题</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v2.0.0 - 2019-12-02">
<ol>
<li>新增代码生成</li>
<li>新增@RepeatSubmit注解，防止重复提交</li>
<li>新增菜单主目录添加/删除操作</li>
<li>日志记录过滤特殊对象，防止转换异常</li>
<li>修改代码生成路由脚本错误</li>
<li>用户上传头像实时同步缓存，无需重新登录</li>
<li>调整切换页签后不重新加载数据</li>
<li>添加jsencrypt实现参数的前端加密</li>
<li>系统退出删除用户缓存记录</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v2.0.0 - 2020-06-10">
<ol>
<li>使用Sentinel代替Hystrix</li>
<li>菜单新增终端管理配置</li>
<li>菜单新增Nacos&Sentinel控制台</li>
<li>代码生成适配Cloud</li>
<li>记录登录退出日志信息</li>
<li>网关验证码过滤器添加放行校验</li>
<li>个性化的定制自动加载类</li>
<li>定时任务调整label-width，防止部署出现错位</li>
<li>调整表头固定列默认样式</li>
<li>代码生成模板调整，字段为String并且必填则加空串条件</li>
<li>代码生成字典Integer/Long使用parseInt</li>
<li>修复退出登录重定向到登录页，登录后参数丢失。</li>
<li>修正岗位导出权限注解</li>
<li>修复首页搜索菜单外链无法点击跳转问题</li>
<li>修复菜单管理选择图标，backspace删除时不过滤数据</li>
<li>用户管理部门分支节点不可检查&显示计数</li>
<li>数据范围过滤属性调整</li>
<li>字典管理添加缓存读取</li>
<li>参数管理支持缓存操作</li>
<li>升级fastjson到最新版1.2.70 修复高危安全漏洞</li>
<li>dev启动默认打开浏览器</li>
<li>使用vue-cli默认source-map</li>
<li>slidebar eslint报错优化</li>
<li>当tags-view滚动关闭右键菜单</li>
<li>支持一级菜单（和主页同级）在main区域显示</li>
<li>限制外链地址必须以http(s)😕/开头</li>
<li>tagview & sidebar 主题颜色与element ui(全局)同步</li>
<li>
修复dict_sort不可update为0的问题&查询返回增加dict_sort升序排序
</li>
<li>权限部分代码调整</li>
<li>其他细节优化</li>
</ol>
</el-collapse-item>
<el-collapse-item title="v1.0.0 - 2020-05-20">
<ol>
<li>若依微服务系统正式发布</li>
</ol>
</el-collapse-item>
</el-collapse>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="8">
<el-card class="update-log">
<div slot="header" class="clearfix">
<span>捐赠支持</span>
</div>
<div class="body">
<img
src="https://oscimg.oschina.net/oscnet/up-d6695f82666e5018f715c41cb7ee60d3b73.png"
alt="donate"
width="100%"
/>
<span style="display: inline-block; height: 30px; line-height: 30px"
>你可以请作者喝杯咖啡表示鼓励</span
>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "Index",
data() {
return {
// 版本号
version: "3.6.1",
};
},
methods: {
goTarget(href) {
window.open(href, "_blank");
},
},
};
</script>
<style scoped lang="scss">
.home {
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
}
}
</style>
<template>
<div class="app-container home-page">
<PageTabs
class="alive-tabs"
:tabdate="tabdate">
</PageTabs>
<div class="tabs-content">
<el-row>
<el-col :span="5">
<div style="background-color: #00afff;height: 90%">
</div>
</el-col>
<el-col :span="19">
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import PageTabs from '@/components/PageTabs'
export default {
name: 'home',
components: {
PageTabs
},
data() {
return {
tabdate:{
tabname:['待办事项','已办事项','通知与提醒','统计与分析'],
activecontent:0
},
}
},
computed: {
...mapGetters({
codeCombo: 'getCodeCombo',
permissionList: 'getPermission',
}),
},
activated() {
},
created() {
console.log('用户基本信息', sessionStorage.getItem('userInfo'))
console.log('缓存', JSON.stringify(sessionStorage.sessionObj))
let roleType =
sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo')).roleType
? JSON.parse(sessionStorage.getItem('userInfo')).roleType
: ''
this.isManager = roleType == '90040005'
let orgId = sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo')).orgId
},
methods: {
getHomeInfo(orgId) {
let apiUrl = this.$api.main.getOrgOverViewInfo
this.$http.post(apiUrl, { orgId }).then(res => {
if (res.data.code == 200) {
let data = res.data.data
let { overViewDets, pieMap } = data
this.overViewDets = overViewDets
this.pieMap = pieMap
this.loadFlag = true
}
})
},
getSetInfo(orgId) {
this.$http.post(this.$api.main.getOrgPositionInfo, { orgId }).then(res => {
if (res.data.code == 200) {
this.setInfo = res.data.data || {}
this.loadSetInfo = true
} else {
}
})
},
},
}
</script>
<style lang="scss" scoped>
.home-page {
width: 100%;
height: calc(100% - 0.3rem);
}
.tabs-content{
width: 100%;
height: calc(100vh - 219px);
background-color: #ffffff;
box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);
border-radius: 6px;
padding: 24px;
}
</style>

438
ruoyi-ui/src/views/login.vue
View File

@ -1,219 +1,219 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">若依后台管理系统</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
</div>
</div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
name: "Login",
data() {
return {
codeUrl: "",
loginForm: {
username: "admin",
password: "admin123",
rememberMe: false,
code: "",
uuid: ""
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
},
loading: false,
// 验证码开关
captchaEnabled: true,
// 注册开关
register: false,
redirect: undefined
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
this.getCode();
this.getCookie();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
}
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
}
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
</style>
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">若依后台管理系统</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
</div>
</div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
name: "Login",
data() {
return {
codeUrl: "",
loginForm: {
username: "admin",
password: "admin123",
rememberMe: false,
code: "",
uuid: ""
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
},
loading: false,
// 验证码开关
captchaEnabled: true,
// 注册开关
register: false,
redirect: undefined
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
this.getCode();
this.getCookie();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
}
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
}
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
</style>

418
ruoyi-ui/src/views/register.vue
View File

@ -1,209 +1,209 @@
<template>
<div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">若依后台管理系统</h3>
<el-form-item prop="username">
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="registerForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input
v-model="registerForm.confirmPassword"
type="password"
auto-complete="off"
placeholder="确认密码"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="registerForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="register-code">
<img :src="codeUrl" @click="getCode" class="register-code-img"/>
</div>
</el-form-item>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleRegister"
>
<span v-if="!loading">注 册</span>
<span v-else>注 册 中...</span>
</el-button>
<div style="float: right;">
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-register-footer">
<span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
</div>
</div>
</template>
<script>
import { getCodeImg, register } from "@/api/login";
export default {
name: "Register",
data() {
const equalToPassword = (rule, value, callback) => {
if (this.registerForm.password !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
codeUrl: "",
registerForm: {
username: "",
password: "",
confirmPassword: "",
code: "",
uuid: ""
},
registerRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" },
{ min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" },
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
],
confirmPassword: [
{ required: true, trigger: "blur", message: "请再次输入您的密码" },
{ required: true, validator: equalToPassword, trigger: "blur" }
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
},
loading: false,
captchaEnabled: true
};
},
created() {
this.getCode();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.registerForm.uuid = res.uuid;
}
});
},
handleRegister() {
this.$refs.registerForm.validate(valid => {
if (valid) {
this.loading = true;
register(this.registerForm).then(res => {
const username = this.registerForm.username;
this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
dangerouslyUseHTMLString: true,
type: 'success'
}).then(() => {
this.$router.push("/login");
}).catch(() => {});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
})
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.register {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.register-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.register-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.register-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-register-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.register-code-img {
height: 38px;
}
</style>
<template>
<div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">若依后台管理系统</h3>
<el-form-item prop="username">
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="registerForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input
v-model="registerForm.confirmPassword"
type="password"
auto-complete="off"
placeholder="确认密码"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="registerForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleRegister"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="register-code">
<img :src="codeUrl" @click="getCode" class="register-code-img"/>
</div>
</el-form-item>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleRegister"
>
<span v-if="!loading">注 册</span>
<span v-else>注 册 中...</span>
</el-button>
<div style="float: right;">
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-register-footer">
<span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
</div>
</div>
</template>
<script>
import { getCodeImg, register } from "@/api/login";
export default {
name: "Register",
data() {
const equalToPassword = (rule, value, callback) => {
if (this.registerForm.password !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
codeUrl: "",
registerForm: {
username: "",
password: "",
confirmPassword: "",
code: "",
uuid: ""
},
registerRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" },
{ min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" },
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
],
confirmPassword: [
{ required: true, trigger: "blur", message: "请再次输入您的密码" },
{ required: true, validator: equalToPassword, trigger: "blur" }
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
},
loading: false,
captchaEnabled: true
};
},
created() {
this.getCode();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.registerForm.uuid = res.uuid;
}
});
},
handleRegister() {
this.$refs.registerForm.validate(valid => {
if (valid) {
this.loading = true;
register(this.registerForm).then(res => {
const username = this.registerForm.username;
this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
dangerouslyUseHTMLString: true,
type: 'success'
}).then(() => {
this.$router.push("/login");
}).catch(() => {});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
})
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.register {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.register-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.register-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.register-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-register-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.register-code-img {
height: 38px;
}
</style>

672
ruoyi-ui/src/views/system/dept/index.vue → ruoyi-ui/src/views/system/org/index.vue
View File

@ -1,336 +1,336 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="部门名称" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入部门名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="部门状态" clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
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="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
<el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="200">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:dept:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:dept:add']"
>新增</el-button>
<el-button
v-if="scope.row.parentId != 0"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:dept:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级部门" prop="parentId">
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Dept",
dicts: ['sys_normal_disable'],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 表格树数据
deptList: [],
// 部门树选项
deptOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否展开，默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
deptName: undefined,
status: undefined
},
// 表单参数
form: {},
// 表单校验
rules: {
parentId: [
{ required: true, message: "上级部门不能为空", trigger: "blur" }
],
deptName: [
{ required: true, message: "部门名称不能为空", trigger: "blur" }
],
orderNum: [
{ required: true, message: "显示排序不能为空", trigger: "blur" }
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
created() {
this.getList();
},
methods: {
/** 查询部门列表 */
getList() {
this.loading = true;
listDept(this.queryParams).then(response => {
this.deptList = this.handleTree(response.data, "deptId");
this.loading = false;
});
},
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.deptId,
label: node.deptName,
children: node.children
};
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deptId: undefined,
parentId: undefined,
deptName: undefined,
orderNum: undefined,
leader: undefined,
phone: undefined,
email: undefined,
status: "0"
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
if (row != undefined) {
this.form.parentId = row.deptId;
}
this.open = true;
this.title = "添加部门";
listDept().then(response => {
this.deptOptions = this.handleTree(response.data, "deptId");
});
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
getDept(row.deptId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改部门";
});
listDeptExcludeChild(row.deptId).then(response => {
this.deptOptions = this.handleTree(response.data, "deptId");
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.deptId != undefined) {
updateDept(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDept(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
return delDept(row.deptId);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
};
</script>
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="机构名称" prop="orgName">
<el-input
v-model="queryParams.orgName"
placeholder="请输入机构名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="机构状态" clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:sysOrg: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="sysOrgList"
row-key="orgId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="orgName" label="机构名称" width="260"></el-table-column>
<el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="200">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:sysOrg:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:sysOrg:add']"
>新增</el-button>
<el-button
v-if="scope.row.parentId != 0"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:sysOrg:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改机构对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级机构" prop="parentId">
<treeselect v-model="form.parentId" :options="sysOrgOptions" :normalizer="normalizer" placeholder="选择上级机构" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="机构名称" prop="orgName">
<el-input v-model="form.orgName" placeholder="请输入机构名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="机构状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listSysOrg, getSysOrg, delSysOrg, addSysOrg, updateSysOrg, listSysOrgExcludeChild } from "@/api/system/org";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "SysOrg",
dicts: ['sys_normal_disable'],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 表格树数据
sysOrgList: [],
// 机构树选项
sysOrgOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否展开，默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
orgName: undefined,
status: undefined
},
// 表单参数
form: {},
// 表单校验
rules: {
parentId: [
{ required: true, message: "上级机构不能为空", trigger: "blur" }
],
orgName: [
{ required: true, message: "机构名称不能为空", trigger: "blur" }
],
orderNum: [
{ required: true, message: "显示排序不能为空", trigger: "blur" }
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
created() {
this.getList();
},
methods: {
/** 查询机构列表 */
getList() {
this.loading = true;
listSysOrg(this.queryParams).then(response => {
this.sysOrgList = this.handleTree(response.data, "orgId");
this.loading = false;
});
},
/** 转换机构数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.orgId,
label: node.orgName,
children: node.children
};
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
orgId: undefined,
parentId: undefined,
orgName: undefined,
orderNum: undefined,
leader: undefined,
phone: undefined,
email: undefined,
status: "0"
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
if (row != undefined) {
this.form.parentId = row.orgId;
}
this.open = true;
this.title = "添加机构";
listSysOrg().then(response => {
this.sysOrgOptions = this.handleTree(response.data, "orgId");
});
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
getSysOrg(row.orgId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改机构";
});
listSysOrgExcludeChild(row.orgId).then(response => {
this.sysOrgOptions = this.handleTree(response.data, "orgId");
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.orgId != undefined) {
updateSysOrg(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSysOrg(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.orgName + '"的数据项？').then(function() {
return delSysOrg(row.orgId);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
};
</script>

1214
ruoyi-ui/src/views/system/role/index.vue
View File

File diff suppressed because it is too large Load Diff

1338
ruoyi-ui/src/views/system/user/index.vue
View File

File diff suppressed because it is too large Load Diff

4
ruoyi-ui/src/views/system/user/profile/index.vue
View File

@ -24,8 +24,8 @@
<div class="pull-right">{{ user.email }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="tree" />所属部门
<div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
<svg-icon icon-class="tree" />所属机构
<div class="pull-right" v-if="user.sysOrg">{{ user.sysOrg.orgName }} / {{ postGroup }}</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="peoples" />所属角色

598
ruoyi-ui/src/views/tool/gen/genInfoForm.vue
View File

@ -1,299 +1,299 @@
<template>
<el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
<el-row>
<el-col :span="12">
<el-form-item prop="tplCategory">
<span slot="label">生成模板</span>
<el-select v-model="info.tplCategory" @change="tplSelectChange">
<el-option label="单表（增删改查）" value="crud" />
<el-option label="树表（增删改查）" value="tree" />
<el-option label="主子表（增删改查）" value="sub" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="packageName">
<span slot="label">
生成包路径
<el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.packageName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="moduleName">
<span slot="label">
生成模块名
<el-tooltip content="可理解为子系统名，例如 system" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.moduleName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="businessName">
<span slot="label">
生成业务名
<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.businessName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="functionName">
<span slot="label">
生成功能名
<el-tooltip content="用作类描述，例如 用户" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.functionName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
上级菜单
<el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<treeselect
:append-to-body="true"
v-model="info.parentMenuId"
:options="menus"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择系统菜单"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="genType">
<span slot="label">
生成代码方式
<el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
<el-radio v-model="info.genType" label="1">自定义路径</el-radio>
</el-form-item>
</el-col>
<el-col :span="24" v-if="info.genType == '1'">
<el-form-item prop="genPath">
<span slot="label">
自定义路径
<el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.genPath">
<el-dropdown slot="append">
<el-button type="primary">
最近路径快速选择
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="info.tplCategory == 'tree'">
<h4 class="form-header">其他信息</h4>
<el-col :span="12">
<el-form-item>
<span slot="label">
树编码字段
<el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeCode" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
树父编码字段
<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeParentCode" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
树名称字段
<el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeName" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="info.tplCategory == 'sub'">
<h4 class="form-header">关联信息</h4>
<el-col :span="12">
<el-form-item>
<span slot="label">
关联子表的表名
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
<el-option
v-for="(table, index) in tables"
:key="index"
:label="table.tableName + '：' + table.tableComment"
:value="table.tableName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
子表关联的外键名
<el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.subTableFkName" placeholder="请选择">
<el-option
v-for="(column, index) in subColumns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { Treeselect },
props: {
info: {
type: Object,
default: null
},
tables: {
type: Array,
default: null
},
menus: {
type: Array,
default: []
},
},
data() {
return {
subColumns: [],
rules: {
tplCategory: [
{ required: true, message: "请选择生成模板", trigger: "blur" }
],
packageName: [
{ required: true, message: "请输入生成包路径", trigger: "blur" }
],
moduleName: [
{ required: true, message: "请输入生成模块名", trigger: "blur" }
],
businessName: [
{ required: true, message: "请输入生成业务名", trigger: "blur" }
],
functionName: [
{ required: true, message: "请输入生成功能名", trigger: "blur" }
],
}
};
},
created() {},
watch: {
'info.subTableName': function(val) {
this.setSubTableColumns(val);
}
},
methods: {
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.menuId,
label: node.menuName,
children: node.children
};
},
/** 选择子表名触发 */
subSelectChange(value) {
this.info.subTableFkName = '';
},
/** 选择生成模板触发 */
tplSelectChange(value) {
if(value !== 'sub') {
this.info.subTableName = '';
this.info.subTableFkName = '';
}
},
/** 设置关联外键 */
setSubTableColumns(value) {
for (var item in this.tables) {
const name = this.tables[item].tableName;
if (value === name) {
this.subColumns = this.tables[item].columns;
break;
}
}
}
}
};
</script>
<template>
<el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
<el-row>
<el-col :span="12">
<el-form-item prop="tplCategory">
<span slot="label">生成模板</span>
<el-select v-model="info.tplCategory" @change="tplSelectChange">
<el-option label="单表（增删改查）" value="crud" />
<el-option label="树表（增删改查）" value="tree" />
<el-option label="主子表（增删改查）" value="sub" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="packageName">
<span slot="label">
生成包路径
<el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.packageName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="moduleName">
<span slot="label">
生成模块名
<el-tooltip content="可理解为子系统名，例如 system" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.moduleName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="businessName">
<span slot="label">
生成业务名
<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.businessName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="functionName">
<span slot="label">
生成功能名
<el-tooltip content="用作类描述，例如 用户" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.functionName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
上级菜单
<el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<treeselect
:append-to-body="true"
v-model="info.parentMenuId"
:options="menus"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择系统菜单"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="genType">
<span slot="label">
生成代码方式
<el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
<el-radio v-model="info.genType" label="1">自定义路径</el-radio>
</el-form-item>
</el-col>
<el-col :span="24" v-if="info.genType == '1'">
<el-form-item prop="genPath">
<span slot="label">
自定义路径
<el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.genPath">
<el-dropdown slot="append">
<el-button type="primary">
最近路径快速选择
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="info.tplCategory == 'tree'">
<h4 class="form-header">其他信息</h4>
<el-col :span="12">
<el-form-item>
<span slot="label">
树编码字段
<el-tooltip content="树显示的编码字段名， 如：org_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeCode" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
树父编码字段
<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeParentCode" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
树名称字段
<el-tooltip content="树节点的显示名称字段名， 如：org_name" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeName" placeholder="请选择">
<el-option
v-for="(column, index) in info.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="info.tplCategory == 'sub'">
<h4 class="form-header">关联信息</h4>
<el-col :span="12">
<el-form-item>
<span slot="label">
关联子表的表名
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
<el-option
v-for="(table, index) in tables"
:key="index"
:label="table.tableName + '：' + table.tableComment"
:value="table.tableName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
子表关联的外键名
<el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.subTableFkName" placeholder="请选择">
<el-option
v-for="(column, index) in subColumns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { Treeselect },
props: {
info: {
type: Object,
default: null
},
tables: {
type: Array,
default: null
},
menus: {
type: Array,
default: []
},
},
data() {
return {
subColumns: [],
rules: {
tplCategory: [
{ required: true, message: "请选择生成模板", trigger: "blur" }
],
packageName: [
{ required: true, message: "请输入生成包路径", trigger: "blur" }
],
moduleName: [
{ required: true, message: "请输入生成模块名", trigger: "blur" }
],
businessName: [
{ required: true, message: "请输入生成业务名", trigger: "blur" }
],
functionName: [
{ required: true, message: "请输入生成功能名", trigger: "blur" }
],
}
};
},
created() {},
watch: {
'info.subTableName': function(val) {
this.setSubTableColumns(val);
}
},
methods: {
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.menuId,
label: node.menuName,
children: node.children
};
},
/** 选择子表名触发 */
subSelectChange(value) {
this.info.subTableFkName = '';
},
/** 选择生成模板触发 */
tplSelectChange(value) {
if(value !== 'sub') {
this.info.subTableName = '';
this.info.subTableFkName = '';
}
},
/** 设置关联外键 */
setSubTableColumns(value) {
for (var item in this.tables) {
const name = this.tables[item].tableName;
if (value === name) {
this.subColumns = this.tables[item].columns;
break;
}
}
}
}
};
</script>

272
ruoyi-ui/vue.config.js
View File

@ -1,136 +1,136 @@
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: 'static',
// 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
},
css: {
loaderOptions: {
sass: {
sassOptions: { outputStyle: "expanded" }
}
}
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: [
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
new CompressionPlugin({
cache: false, // 不启用文件缓存
test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩
})
],
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single'),
{
from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
to: './' //到根目录下
}
}
)
}
}
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '智能作业系统' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: 'static',
// 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:9998`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
},
css: {
loaderOptions: {
sass: {
sassOptions: { outputStyle: "expanded" }
}
}
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: [
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
new CompressionPlugin({
cache: false, // 不启用文件缓存
test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩
})
],
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single'),
{
from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
to: './' //到根目录下
}
}
)
}
}