Skip to content

W
web-monitor
Commit b1aba8b5 authored by dupengyu's avatar dupengyu
1 Browse files
Options

路由 角色 权限 模块对接完成 整体流程未测试

parent 3bbb3783
Show whitespace changes
Inline Side-by-side
Showing with 2168 additions and 372 deletions
package.json
View file @ b1aba8b5
......@@ -19,6 +19,7 @@
"echarts": "^5.3.1",
"element-ui": "2.13.2",
"events": "^3.3.0",
"file-saver": "^2.0.5",
"inquirer": "^8.2.0",
"js-cookie": "2.2.0",
"moment": "^2.29.1",
......
src/api/menu.js
View file @ b1aba8b5
......@@ -4,6 +4,6 @@ import request from '@/utils/request'
export const getRouters = () => {
return request({
url: '/api/user/getRouters',
method: 'get'
method: 'post'
})
}
\ No newline at end of file
src/components/ParentView/index.vue 0 → 100644
View file @ b1aba8b5
<template >
<router-view />
</template>
src/directive/permission/hasPermi.js
View file @ b1aba8b5
......@@ -10,7 +10,6 @@ export default {
const { value } = binding
const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions
console.log(permissions)
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
......
src/layout/components/InnerLink/index.vue 0 → 100644
View file @ b1aba8b5
<template>
<div
:style="'height:' + height"
v-loading="loading"
element-loading-text="正在加载页面，请稍候！"
>
<iframe
:id="iframeId"
style="width: 100%; height: 100%"
:src="src"
frameborder="no"
></iframe>
</div>
</template>
<script>
export default {
props: {
src: {
type: String,
default: "/",
},
iframeId: {
type: String,
},
},
data() {
return {
loading: false,
height: document.documentElement.clientHeight - 94.5 + "px;",
};
},
mounted() {
var _this = this;
const iframeId = ("#" + this.iframeId).replace(/\//g, "\\/");
const iframe = document.querySelector(iframeId);
// iframe页面loading控制
if (iframe.attachEvent) {
this.loading = true;
iframe.attachEvent("onload", function () {
_this.loading = false;
});
} else {
this.loading = true;
iframe.onload = function () {
_this.loading = false;
};
}
},
};
</script>
src/layout/components/Sidebar/Item.vue
View file @ b1aba8b5
......@@ -17,25 +17,17 @@ export default {
const vnodes = []
if (icon) {
if (icon.includes('el-icon')) {
vnodes.push(<i class={[icon, 'sub-el-icon']} />)
} else {
vnodes.push(<svg-icon icon-class={icon}/>)
}
}
if (title) {
if (title.length > 5) {
vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
} else {
vnodes.push(<span slot='title'>{(title)}</span>)
}
}
return vnodes
}
}
</script>
<style scoped>
.sub-el-icon {
color: currentColor;
width: 1em;
height: 1em;
}
</style>
src/layout/components/Sidebar/SidebarItem.vue
View file @ b1aba8b5
......@@ -7,6 +7,7 @@
!item.alwaysShow
"
>
<app-link
v-if="onlyOneChild.meta"
:to="
......@@ -29,12 +30,13 @@
</template>
<template v-else>
<el-submenu id="subid" ref="subMenu" :index="resolvePath(item.path)">
<template slot="title">
<icon-item
v-if="item.meta"
:icon="item.meta && item.meta.icon"
:title="item.meta.title"
:title="item.meta.title||item.menuName"
/>
</template>
<sidebar-item
......
src/layout/components/Sidebar/index.vue
View file @ b1aba8b5
......@@ -34,11 +34,13 @@ export default {
'sidebar'
]),
routes() {
console.log('routes',this.$store.state.permission.routes)
return this.$store.state.permission.routes
},
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;
......
src/main.js
View file @ b1aba8b5
......@@ -10,6 +10,7 @@ import router from './router'
import '@/icons' // icon
import '@/permission' // permission control
import performLoader from '@/utils/global_main_loader.js'
import plugins from './plugins' // plugins
import WS from '@/utils/websocket'
import { getDicts } from "@/api/system/dict/data";
import directive from './directive' // directive
......@@ -31,6 +32,7 @@ Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.use(plugins)
Vue.component('RightToolbar', RightToolbar)
Vue.component('DictTag', DictTag)
Vue.use(directive)
......
src/permission.js
View file @ b1aba8b5
......@@ -11,6 +11,7 @@ NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register']
router.beforeEach((to, from, next) => {
console.log('console.log(to)',to)
NProgress.start()
if (getToken()) {
to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
......@@ -22,11 +23,13 @@ router.beforeEach((to, from, next) => {
next()
} else {
if (store.getters.roles.length === 0) {
console.log('console.log(store.getters.roles.length)',store.getters.roles)
isRelogin.show = true
// 判断当前用户是否已拉取完user_info信息
store.dispatch('user/getInfo').then(() => {
isRelogin.show = false
store.dispatch('GenerateRoutes').then(accessRoutes => {
console.log('accessRoutes',accessRoutes)
// 根据roles权限生成可访问的路由表
router.addRoutes(accessRoutes) // 动态添加可访问路由表
if (to.path == '/') {
......
src/router/index.js
View file @ b1aba8b5
......@@ -11,51 +11,38 @@ import Layout from '@/layout'
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/404',
component: () => import('@/views/error/404'),
hidden: true
},
{
path: '/login',
component: () => import('@/views/login/index'),
meta: { title: "登录" },
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'homePage' }
}]
},
{
path: '/alarm',
component: Layout,
redirect: '/dashboard',
name: 'alarm',
meta: { title: '告警管理', icon: 'alarm' },
children: [
{
path: 'cableTime',
name: 'cableTime',
component: () => import('@/views/alarm/cableTime/index'),
meta: { title: '漏缆监测告警' }
},
// {
// path: 'device',
// name: 'device',
// component: () => import('@/views/alarm/device/index'),
// meta: { title: '设备连接告警' }
// path: '/alarm',
// component: Layout,
// redirect: '/dashboard',
// name: 'alarm',
// meta: { title: '告警管理', icon: 'alarm' },
// children: [
// {
// path: 'cableTime',
// name: 'cableTime',
// component: () => import('@/views/alarm/cableTime/index'),
// meta: { title: '漏缆监测告警' }
// },
// {
// path: 'statistics',
// name: 'statistics',
// component: () => import('@/views/alarm/statistics/index'),
// meta: { title: '告警信息统计' }
// }
// ]
// },
{
path: 'statistics',
name: 'statistics',
component: () => import('@/views/alarm/statistics/index'),
meta: { title: '告警信息统计' }
}
]
},
{
path: '/setting',
component: Layout,
......@@ -247,7 +234,29 @@ export const constantRoutes = [
name: '角色管理',
component: () => import('@/views/system/role/index'),
meta: { title: '角色管理' }
},
{
path: 'updateUser',
name: 'UpdateUser',
component: () => import('@/views/system/user/updateUser'),
meta: { title: '个人信息管理', },
},
{
path: 'userList',
name: 'UserList',
component: () => import('@/views/system/user/userList'),
meta: { title: '用户信息列表', },
},
{
path: 'userLog',
name: 'UserLog',
component: () => import('@/views/system/user/userLog'),
meta: { title: '用户操作日志', },
}
]
},
]
......@@ -282,7 +291,13 @@ export const asyncRoutes = [
}]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
{ path: '*', redirect: '/404', hidden: true },
{
path: '/404',
component: () => import('@/views/error/404'),
hidden: true
},
]
export const dynamicRoutes = [
{
......
src/store/getters.js
View file @ b1aba8b5
......@@ -4,5 +4,6 @@ const getters = {
token: state => state.user.token,
dict: state => state.dict.dict,
roles: state => state.user.roles,
permissions: state => state.user.permissions,
}
export default getters
src/store/modules/peimission.js
View file @ b1aba8b5
......@@ -2,8 +2,8 @@ import auth from '@/plugins/auth'
import router, { constantRoutes, dynamicRoutes } from '@/router'
import { getRouters } from '@/api/menu'
import Layout from '@/layout/index'
// import ParentView from '@/components/ParentView'
// import InnerLink from '@/layout/components/InnerLink'
import ParentView from '@/components/ParentView'
import InnerLink from '@/layout/components/InnerLink'
const permission = {
state: {
......@@ -34,10 +34,13 @@ const permission = {
return new Promise(resolve => {
// 向后端请求路由数据
getRouters().then(res => {
const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data))
console.log(res)
const sdata = JSON.parse(JSON.stringify(res))
const rdata = JSON.parse(JSON.stringify(res))
const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
console.log(rewriteRoutes)
const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
router.addRoutes(asyncRoutes);
......@@ -63,11 +66,11 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
if (route.component === 'Layout') {
route.component = Layout
}
// else if (route.component === 'ParentView') {
// route.component = ParentView
// } else if (route.component === 'InnerLink') {
// route.component = InnerLink
// }
else if (route.component === 'ParentView') {
route.component = ParentView
} else if (route.component === 'InnerLink') {
route.component = InnerLink
}
else {
route.component = loadView(route.component)
}
......
src/store/modules/user.js
View file @ b1aba8b5
......@@ -7,7 +7,8 @@ const getDefaultState = () => {
token: getToken(),
userBaseInfo: {},
userId: '',
roles: []
roles: [],
permissions: []
}
}
......@@ -27,7 +28,12 @@ const mutations = {
state.userId = data
},
SET_ROLES: (state, data) => {
state.roles = handleRoles(data)
console.log('console.log(res.roleNames)')
console.log(data)
state.roles = data
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
}
......@@ -70,14 +76,20 @@ const actions = {
reject('Verification failed, please Login again.')
}
const { isAdmin } = res
let roles = isAdmin==1 ? ['admin'] : ['editor']
// roles must be a non-empty array
if (!roles || roles.length <= 0) {
reject('getInfo: roles must be a non-null array!')
if (res.roleNames && res.roleNames.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', res.roleNames)
commit('SET_PERMISSIONS', res.permissions)
} else {
commit('SET_ROLES', ['ROLE_DEFAULT'])
}
// const { isAdmin } = res
// let roles = isAdmin==1 ? ['admin'] : ['editor']
// roles must be a non-empty array
// if (!roleNames || roles.length <= 0) {
// reject('getInfo: roles must be a non-null array!')
// }
commit('SET_ROLES', roles)
// commit('SET_ROLES', roles)
commit('SET_BASEINFO', res)
resolve(res)
}).catch(error => {
......@@ -124,16 +136,6 @@ const getters = {
return state.roles
}
}
function handleRoles(data) {
if (!data) return
if(data.isAdmin == 1) {
return ['admin']
} else {
return ['editor']
}
}
export default {
namespaced: true,
state,
......
src/styles/sidebar.scss
View file @ b1aba8b5
......@@ -215,7 +215,7 @@
>.el-menu--popup {
max-height: 20vh;
min-width: 80px;
overflow-y: auto;
// overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
......
src/utils/errorCode.js 0 → 100644
View file @ b1aba8b5
export default {
'401': '认证失败，无法访问系统资源',
'403': '当前操作没有权限',
'404': '访问资源不存在',
'default': '系统未知错误，请反馈给管理员'
}
src/utils/request.js
View file @ b1aba8b5
......@@ -57,20 +57,25 @@ let errorShowing = false
service.interceptors.response.use(
response => {
console.log(response)
let res = response.data.data ? response.data.data : response.data
let res = response.data.data ? response.data.data : response.data
if (response.data.msg == "操作成功") {
res = response.data
}
// if (response.data.success) {
// res = response.data
// }
if (response.data.recordsTotal) {
res = {
recordsTotal: response.data.recordsTotal,
data: res
}
}
if (!response.data) {
res = response
}
// if (response.data.success) {
// res = response.data
// }
let config = response.config
endLoading(config.el)
let resFinal = res.rsp || res || {}
......
src/views/error/401.vue 0 → 100644
View file @ b1aba8b5
<template>
<div class="errPage-container">
<el-button icon="arrow-left" class="pan-back-btn" @click="back">
返回
</el-button>
<el-row>
<el-col :span="12">
<h1 class="text-jumbo text-ginormous">
401错误!
</h1>
<h2>您没有访问权限！</h2>
<h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
<ul class="list-unstyled">
<li class="link-type">
<router-link to="/">
回首页
</router-link>
</li>
</ul>
</el-col>
<el-col :span="12">
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
</el-col>
</el-row>
</div>
</template>
<script>
import errGif from '@/assets/401_images/401.gif'
export default {
name: 'Page401',
data() {
return {
errGif: errGif + '?' + +new Date()
}
},
methods: {
back() {
if (this.$route.query.noGoBack) {
this.$router.push({ path: '/' })
} else {
this.$router.go(-1)
}
}
}
}
</script>
<style lang="scss" scoped>
.errPage-container {
width: 800px;
max-width: 100%;
margin: 100px auto;
.pan-back-btn {
background: #008489;
color: #fff;
border: none!important;
}
.pan-gif {
margin: 0 auto;
display: block;
}
.pan-img {
display: block;
margin: 0 auto;
width: 100%;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
color: #484848;
}
.list-unstyled {
font-size: 14px;
li {
padding-bottom: 5px;
}
a {
color: #008489;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
</style>
src/views/error/404.vue 0 → 100644
View file @ b1aba8b5
<template>
<div class="wscn-http404-container">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
</div>
<div class="bullshit">
<div class="bullshit__oops">
404错误!
</div>
<div class="bullshit__headline">
{{ message }}
</div>
<div class="bullshit__info">
对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
</div>
<router-link to="/" class="bullshit__return-home">
返回首页
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Page404',
computed: {
message() {
return '找不到网页！'
}
}
}
</script>
<style lang="scss" scoped>
.wscn-http404-container{
transform: translate(-50%,-50%);
position: absolute;
top: 40%;
left: 50%;
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
&__parent {
width: 100%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
color: #222;
font-weight: bold;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>
src/views/system/menu/index.vue
View file @ b1aba8b5
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
>
<el-form-item label="菜单名称" prop="menuName">
<el-input
v-model="queryParams.menuName"
......@@ -10,7 +16,11 @@
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
<el-select
v-model="queryParams.status"
placeholder="菜单状态"
clearable
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
......@@ -20,8 +30,16 @@
</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-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>
......@@ -34,8 +52,10 @@
size="mini"
@click="handleAdd"
v-hasPermi="['system:menu:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<!-- v-hasPermi="['system:menu:add']" -->
<el-col :span="1.5">
<el-button
type="info"
......@@ -43,9 +63,15 @@
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button>
>展开/折叠</el-button
>
</el-col>
<el-col :span="7">
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
......@@ -54,20 +80,40 @@
:data="menuList"
row-key="menuId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
<el-table-column
prop="menuName"
label="菜单名称"
:show-overflow-tooltip="true"
width="160"
></el-table-column>
<el-table-column prop="icon" label="图标" align="center" width="100">
<template slot-scope="scope">
<svg-icon :icon-class="scope.row.icon" />
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
<el-table-column
prop="orderNum"
label="排序"
width="60"
></el-table-column>
<el-table-column
prop="perms"
label="权限标识"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="component"
label="组件路径"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column prop="status" label="状态" width="80">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
<dict-tag
:options="dict.type.sys_normal_disable"
:value="scope.row.status"
/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime">
......@@ -75,7 +121,11 @@
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
......@@ -83,21 +133,24 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:menu:edit']"
>修改</el-button>
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:menu:add']"
>新增</el-button>
>新增</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:menu:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
......@@ -134,15 +187,28 @@
trigger="click"
@show="$refs['iconSelect'].reset()"
>
<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
<IconSelect
ref="iconSelect"
@selected="selected"
:active-icon="form.icon"
/>
<el-input
slot="reference"
v-model="form.icon"
placeholder="点击选择图标"
readonly
>
<svg-icon
v-if="form.icon"
slot="prefix"
:icon-class="form.icon"
style="width: 25px;"
style="width: 25px"
/>
<i
v-else
slot="prefix"
class="el-icon-search el-input__icon"
/>
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
</el-input>
</el-popover>
</el-form-item>
......@@ -154,13 +220,20 @@
</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-input-number
v-model="form.orderNum"
controls-position="right"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="isFrame">
<span slot="label">
<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
<el-tooltip
content="选择是外链则路由地址需要以`http(s)://`开头"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
是否外链
......@@ -174,7 +247,10 @@
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="path">
<span slot="label">
<el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
<el-tooltip
content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
路由地址
......@@ -185,7 +261,10 @@
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="component">
<span slot="label">
<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
<el-tooltip
content="访问的组件路径，如：`system/user/index`，默认在`views`目录下"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
组件路径
......@@ -195,9 +274,16 @@
</el-col>
<el-col :span="12" v-if="form.menuType != 'M'">
<el-form-item prop="perms">
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
<el-input
v-model="form.perms"
placeholder="请输入权限标识"
maxlength="100"
/>
<span slot="label">
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
<el-tooltip
content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
权限字符
......@@ -206,9 +292,16 @@
</el-col>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="query">
<el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
<el-input
v-model="form.query"
placeholder="请输入路由参数"
maxlength="255"
/>
<span slot="label">
<el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
<el-tooltip
content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`'
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
路由参数
......@@ -218,7 +311,10 @@
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="isCache">
<span slot="label">
<el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
<el-tooltip
content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
是否缓存
......@@ -232,7 +328,10 @@
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="visible">
<span slot="label">
<el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
<el-tooltip
content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
显示状态
......@@ -242,14 +341,18 @@
v-for="dict in dict.type.sys_show_hide"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="status">
<span slot="label">
<el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
<el-tooltip
content="选择停用则路由将不会出现在侧边栏，也不能被访问"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
菜单状态
......@@ -259,7 +362,8 @@
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
......@@ -274,14 +378,20 @@
</template>
<script>
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
import {
listMenu,
getMenu,
delMenu,
addMenu,
updateMenu,
} from "@/api/system/menu";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
export default {
name: "Menu",
dicts: ['sys_show_hide', 'sys_normal_disable'],
dicts: ["sys_show_hide", "sys_normal_disable"],
components: { Treeselect, IconSelect },
data() {
return {
......@@ -304,24 +414,24 @@ export default {
// 查询参数
queryParams: {
menuName: undefined,
visible: undefined
visible: undefined,
},
// 表单参数
form: {
parentId:''
parentId: "",
},
// 表单校验
rules: {
menuName: [
{ required: true, message: "菜单名称不能为空", trigger: "blur" }
{ required: true, message: "菜单名称不能为空", trigger: "blur" },
],
orderNum: [
{ required: true, message: "菜单顺序不能为空", trigger: "blur" }
{ required: true, message: "菜单顺序不能为空", trigger: "blur" },
],
path: [
{ required: true, message: "路由地址不能为空", trigger: "blur" }
]
}
{ required: true, message: "路由地址不能为空", trigger: "blur" },
],
},
};
},
created() {
......@@ -335,7 +445,7 @@ export default {
/** 查询菜单列表 */
getList() {
this.loading = true;
listMenu(this.queryParams).then(response => {
listMenu(this.queryParams).then((response) => {
console.log(response);
this.menuList = this.handleTree(response.data, "menuId");
this.loading = false;
......@@ -349,14 +459,14 @@ export default {
return {
id: node.menuId,
label: node.menuName,
children: node.children
children: node.children,
};
},
/** 查询菜单下拉树结构 */
getTreeselect() {
listMenu().then(response => {
listMenu().then((response) => {
this.menuOptions = [];
const menu = { menuId: 0, menuName: '主类目', children: [] };
const menu = { menuId: 0, menuName: "主类目", children: [] };
menu.children = this.handleTree(response.data, "menuId");
this.menuOptions.push(menu);
});
......@@ -378,7 +488,7 @@ export default {
isFrame: "1",
isCache: "0",
visible: "0",
status: "0"
status: "0",
};
this.resetForm("form");
},
......@@ -416,24 +526,24 @@ export default {
handleUpdate(row) {
this.reset();
this.getTreeselect();
getMenu(row.menuId).then(response => {
getMenu(row.menuId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改菜单";
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.menuId != undefined) {
updateMenu(this.form).then(response => {
updateMenu(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addMenu(this.form).then(response => {
addMenu(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
......@@ -444,13 +554,17 @@ export default {
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
this.$modal
.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？')
.then(function () {
return delMenu(row.menuId);
}).then(() => {
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
})
.catch(() => {});
},
},
};
</script>
src/views/system/role/authUser.vue
View file @ b1aba8b5
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
>
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
......@@ -10,9 +16,9 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-form-item label="手机号码" prop="phone">
<el-input
v-model="queryParams.phonenumber"
v-model="queryParams.phone"
placeholder="请输入手机号码"
clearable
style="width: 240px"
......@@ -20,8 +26,16 @@
/>
</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-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>
......@@ -34,7 +48,8 @@
size="mini"
@click="openSelectUser"
v-hasPermi="['system:role:add']"
>添加用户</el-button>
>添加用户</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
......@@ -45,7 +60,8 @@
:disabled="multiple"
@click="cancelAuthUserAll"
v-hasPermi="['system:role:remove']"
>批量取消授权</el-button>
>批量取消授权</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
......@@ -54,28 +70,56 @@
icon="el-icon-close"
size="mini"
@click="handleClose"
>关闭</el-button>
>关闭</el-button
>
</el-col>
<el-col :span="1.5">
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="userList"
width="800px"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="status">
<el-table-column
label="用户名称"
prop="userName"
:show-overflow-tooltip="true"
/>
<!-- <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" /> -->
<!-- <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" /> -->
<el-table-column
label="手机"
prop="phone"
:show-overflow-tooltip="true"
/>
<!-- <el-table-column label="状态" align="center" prop="status">
<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="180">
</el-table-column> -->
<el-table-column
label="创建时间"
align="center"
prop="creationTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
<span>{{ parseTime(scope.row.creationTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
......@@ -83,16 +127,17 @@
icon="el-icon-circle-close"
@click="cancelAuthUser(scope.row)"
v-hasPermi="['system:role:remove']"
>取消授权</el-button>
>取消授权</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.current"
:limit.sync="queryParams.size"
@pagination="getList"
/>
<select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
......@@ -100,12 +145,16 @@
</template>
<script>
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
import {
allocatedUserList,
authUserCancel,
authUserCancelAll,
} from "@/api/system/role";
import selectUser from "./selectUser";
export default {
name: "AuthUser",
dicts: ['sys_normal_disable'],
dicts: ["sys_normal_disable"],
components: { selectUser },
data() {
return {
......@@ -123,12 +172,12 @@ export default {
userList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
current: 1,
size: 10,
roleId: undefined,
userName: undefined,
phonenumber: undefined
}
phonenumber: undefined,
},
};
},
created() {
......@@ -142,12 +191,11 @@ export default {
/** 查询授权用户列表 */
getList() {
this.loading = true;
allocatedUserList(this.queryParams).then(response => {
this.userList = response.rows;
this.total = response.total;
allocatedUserList(this.queryParams).then((response) => {
this.userList = response.data.records;
this.total = response.data.total;
this.loading = false;
}
);
});
},
// 返回按钮
handleClose() {
......@@ -166,8 +214,8 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userIds = selection.map(item => item.userId)
this.multiple = !selection.length
this.userIds = selection.map((item) => item.id);
this.multiple = !selection.length;
},
/** 打开授权用户表弹窗 */
openSelectUser() {
......@@ -176,24 +224,32 @@ export default {
/** 取消授权按钮操作 */
cancelAuthUser(row) {
const roleId = this.queryParams.roleId;
this.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function() {
return authUserCancel({ userId: row.userId, roleId: roleId });
}).then(() => {
this.$modal
.confirm('确认要取消该用户"' + row.userName + '"角色吗？')
.then(function () {
return authUserCancel({ userId: row.id, roleId: roleId });
})
.then(() => {
this.getList();
this.$modal.msgSuccess("取消授权成功");
}).catch(() => {});
})
.catch(() => {});
},
/** 批量取消授权按钮操作 */
cancelAuthUserAll(row) {
const roleId = this.queryParams.roleId;
const userIds = this.userIds.join(",");
this.$modal.confirm('是否取消选中用户授权数据项？').then(function() {
this.$modal
.confirm("是否取消选中用户授权数据项？")
.then(function () {
return authUserCancelAll({ roleId: roleId, userIds: userIds });
}).then(() => {
})
.then(() => {
this.getList();
this.$modal.msgSuccess("取消授权成功");
}).catch(() => {});
}
}
})
.catch(() => {});
},
},
};
</script>
\ No newline at end of file
src/views/system/role/index.vue
View file @ b1aba8b5
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
>
<el-form-item label="角色名称" prop="roleName">
<el-input
v-model="queryParams.roleName"
......@@ -46,8 +52,16 @@
></el-date-picker>
</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-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>
......@@ -60,7 +74,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['system:role:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
......@@ -71,7 +86,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:role:edit']"
>修改</el-button>
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
......@@ -82,26 +98,36 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:role:remove']"
>删除</el-button>
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:role:export']"
>导出</el-button>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="roleList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色编号" prop="roleId" width="120" />
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
<el-table-column
label="角色名称"
prop="roleName"
:show-overflow-tooltip="true"
width="150"
/>
<el-table-column
label="权限字符"
prop="roleKey"
:show-overflow-tooltip="true"
width="150"
/>
<el-table-column label="显示顺序" prop="roleSort" width="100" />
<el-table-column label="状态" align="center" width="100">
<template slot-scope="scope">
......@@ -113,12 +139,21 @@
></el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
>
<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">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.roleId !== 1">
<el-button
size="mini"
......@@ -126,21 +161,33 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:role:edit']"
>修改</el-button>
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:role:remove']"
>删除</el-button>
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
>删除</el-button
>
<el-dropdown
size="mini"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['system:role:edit']"
>
<el-button size="mini" type="text" icon="el-icon-d-arrow-right"
>更多</el-button
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
<el-dropdown-item command="handleAuthUser" icon="el-icon-user"
v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
<!-- <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item> -->
<el-dropdown-item
command="handleAuthUser"
icon="el-icon-user"
v-hasPermi="['system:role:edit']"
>分配用户</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</template>
......@@ -148,7 +195,7 @@
</el-table>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.current"
:limit.sync="queryParams.size"
......@@ -156,14 +203,17 @@
/>
<!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item prop="roleKey">
<span slot="label">
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
<el-tooltip
content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)"
placement="top"
>
<i class="el-icon-question"></i>
</el-tooltip>
权限字符
......@@ -171,7 +221,11 @@
<el-input v-model="form.roleKey" placeholder="请输入权限字符" />
</el-form-item>
<el-form-item label="角色顺序" prop="roleSort">
<el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
<el-input-number
v-model="form.roleSort"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
......@@ -179,13 +233,26 @@
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
<el-checkbox
v-model="menuExpand"
@change="handleCheckedTreeExpand($event, 'menu')"
>展开/折叠</el-checkbox
>
<el-checkbox
v-model="menuNodeAll"
@change="handleCheckedTreeNodeAll($event, 'menu')"
>全选/全不选</el-checkbox
>
<el-checkbox
v-model="form.menuCheckStrictly"
@change="handleCheckedTreeConnect($event, 'menu')"
>父子联动</el-checkbox
>
<el-tree
class="tree-border"
:data="menuOptions"
......@@ -198,7 +265,11 @@
></el-tree>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -208,7 +279,12 @@
</el-dialog>
<!-- 分配角色数据权限对话框 -->
<el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
<el-dialog
:title="title"
:visible.sync="openDataScope"
width="500px"
append-to-body
>
<el-form :model="form" label-width="80px">
<el-form-item label="角色名称">
<el-input v-model="form.roleName" :disabled="true" />
......@@ -227,9 +303,21 @@
</el-select>
</el-form-item>
<el-form-item label="数据权限" v-show="form.dataScope == 2">
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
<el-checkbox
v-model="deptExpand"
@change="handleCheckedTreeExpand($event, 'dept')"
>展开/折叠</el-checkbox
>
<el-checkbox
v-model="deptNodeAll"
@change="handleCheckedTreeNodeAll($event, 'dept')"
>全选/全不选</el-checkbox
>
<el-checkbox
v-model="form.deptCheckStrictly"
@change="handleCheckedTreeConnect($event, 'dept')"
>父子联动</el-checkbox
>
<el-tree
class="tree-border"
:data="deptOptions"
......@@ -252,12 +340,24 @@
</template>
<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
import {
listRole,
getRole,
delRole,
addRole,
updateRole,
dataScope,
changeRoleStatus,
deptTreeSelect,
} from "@/api/system/role";
import {
treeselect as menuTreeselect,
roleMenuTreeselect,
} from "@/api/system/menu";
export default {
name: "Role",
dicts: ['sys_normal_disable'],
dicts: ["sys_normal_disable"],
data() {
return {
// 遮罩层
......@@ -290,24 +390,24 @@ export default {
dataScopeOptions: [
{
value: "1",
label: "全部数据权限"
label: "全部数据权限",
},
{
value: "2",
label: "自定数据权限"
label: "自定数据权限",
},
{
value: "3",
label: "本部门数据权限"
label: "本部门数据权限",
},
{
value: "4",
label: "本部门及以下数据权限"
label: "本部门及以下数据权限",
},
{
value: "5",
label: "仅本人数据权限"
}
label: "仅本人数据权限",
},
],
// 菜单列表
menuOptions: [],
......@@ -319,26 +419,26 @@ export default {
size: 10,
roleName: undefined,
roleKey: undefined,
status: undefined
status: undefined,
},
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label"
label: "label",
},
// 表单校验
rules: {
roleName: [
{ required: true, message: "角色名称不能为空", trigger: "blur" }
{ required: true, message: "角色名称不能为空", trigger: "blur" },
],
roleKey: [
{ required: true, message: "权限字符不能为空", trigger: "blur" }
{ required: true, message: "权限字符不能为空", trigger: "blur" },
],
roleSort: [
{ required: true, message: "角色顺序不能为空", trigger: "blur" }
]
}
{ required: true, message: "角色顺序不能为空", trigger: "blur" },
],
},
};
},
created() {
......@@ -348,17 +448,16 @@ export default {
/** 查询角色列表 */
getList() {
this.loading = true;
let data = { ...this.queryParams ,...this.dateRange};
listRole(data).then(response => {
let data = { ...this.queryParams, ...this.dateRange };
listRole(data).then((response) => {
this.roleList = response.records;
this.total = response.total;
this.loading = false;
}
);
});
},
/** 查询菜单树结构 */
getMenuTreeselect() {
menuTreeselect().then(response => {
menuTreeselect().then((response) => {
this.menuOptions = response.data;
});
},
......@@ -382,14 +481,14 @@ export default {
},
/** 根据角色ID查询菜单树结构 */
getRoleMenuTreeselect(roleId) {
return roleMenuTreeselect(roleId).then(response => {
return roleMenuTreeselect(roleId).then((response) => {
this.menuOptions = response.menus;
return response;
});
},
/** 根据角色ID查询部门树结构 */
getDeptTree(roleId) {
return deptTreeSelect(roleId).then(response => {
return deptTreeSelect(roleId).then((response) => {
this.deptOptions = response.depts;
return response;
});
......@@ -397,11 +496,15 @@ export default {
// 角色状态修改
handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用";
this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
this.$modal
.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？')
.then(function () {
return changeRoleStatus(row.roleId, row.status);
}).then(() => {
})
.then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function() {
})
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
},
......@@ -420,11 +523,11 @@ export default {
if (this.$refs.menu != undefined) {
this.$refs.menu.setCheckedKeys([]);
}
this.menuExpand = false,
this.menuNodeAll = false,
this.deptExpand = true,
this.deptNodeAll = false,
this.form = {
(this.menuExpand = false),
(this.menuNodeAll = false),
(this.deptExpand = true),
(this.deptNodeAll = false),
(this.form = {
roleId: undefined,
roleName: undefined,
roleKey: undefined,
......@@ -434,8 +537,8 @@ export default {
deptIds: [],
menuCheckStrictly: true,
deptCheckStrictly: true,
remark: undefined
};
remark: undefined,
});
this.resetForm("form");
},
/** 搜索按钮操作 */
......@@ -451,9 +554,9 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.roleId)
this.single = selection.length!=1
this.multiple = !selection.length
this.ids = selection.map((item) => item.roleId);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
// 更多操作触发
handleCommand(command, row) {
......@@ -470,12 +573,12 @@ export default {
},
// 树权限（展开/折叠）
handleCheckedTreeExpand(value, type) {
if (type == 'menu') {
if (type == "menu") {
let treeList = this.menuOptions;
for (let i = 0; i < treeList.length; i++) {
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
}
} else if (type == 'dept') {
} else if (type == "dept") {
let treeList = this.deptOptions;
for (let i = 0; i < treeList.length; i++) {
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
......@@ -484,18 +587,18 @@ export default {
},
// 树权限（全选/全不选）
handleCheckedTreeNodeAll(value, type) {
if (type == 'menu') {
this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
} else if (type == 'dept') {
this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
if (type == "menu") {
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
} else if (type == "dept") {
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
}
},
// 树权限（父子联动）
handleCheckedTreeConnect(value, type) {
if (type == 'menu') {
this.form.menuCheckStrictly = value ? true: false;
} else if (type == 'dept') {
this.form.deptCheckStrictly = value ? true: false;
if (type == "menu") {
this.form.menuCheckStrictly = value ? true : false;
} else if (type == "dept") {
this.form.deptCheckStrictly = value ? true : false;
}
},
/** 新增按钮操作 */
......@@ -508,19 +611,19 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const roleId = row.roleId || this.ids
const roleId = row.roleId || this.ids;
const roleMenu = this.getRoleMenuTreeselect(roleId);
getRole(roleId).then(response => {
this.form = response.data;
getRole(roleId).then((response) => {
this.form = response;
this.open = true;
this.$nextTick(() => {
roleMenu.then(res => {
let checkedKeys = res.checkedKeys
roleMenu.then((res) => {
let checkedKeys = res.checkedKeys;
checkedKeys.forEach((v) => {
this.$nextTick(()=>{
this.$refs.menu.setChecked(v, true ,false);
})
})
this.$nextTick(() => {
this.$refs.menu.setChecked(v, true, false);
});
});
});
});
this.title = "修改角色";
......@@ -528,44 +631,42 @@ export default {
},
/** 选择角色权限范围触发 */
dataScopeSelectChange(value) {
if(value !== '2') {
if (value !== "2") {
this.$refs.dept.setCheckedKeys([]);
}
},
/** 分配数据权限操作 */
handleDataScope(row) {
this.reset();
const deptTreeSelect = this.getDeptTree(row.roleId);
getRole(row.roleId).then(response => {
this.form = response.data;
// const deptTreeSelect = []
getRole(row.roleId).then((response) => {
this.form = response;
this.openDataScope = true;
this.$nextTick(() => {
deptTreeSelect.then(res => {
this.$refs.dept.setCheckedKeys(res.checkedKeys);
});
});
// this.$nextTick(() => {
// this.$refs.dept.setCheckedKeys([]);
// });
this.title = "分配数据权限";
});
},
/** 分配用户操作 */
handleAuthUser: function(row) {
handleAuthUser: function (row) {
const roleId = row.roleId;
this.$router.push("/system/role-auth/user/" + roleId);
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.roleId != undefined) {
this.form.menuIds = this.getMenuAllCheckedKeys();
updateRole(this.form).then(response => {
updateRole(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
this.form.menuIds = this.getMenuAllCheckedKeys();
addRole(this.form).then(response => {
addRole(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
......@@ -575,10 +676,10 @@ export default {
});
},
/** 提交按钮（数据权限） */
submitDataScope: function() {
submitDataScope: function () {
if (this.form.roleId != undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys();
dataScope(this.form).then(response => {
dataScope(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.openDataScope = false;
this.getList();
......@@ -588,19 +689,27 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const roleIds = row.roleId || this.ids;
this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
this.$modal
.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？')
.then(function () {
return delRole(roleIds);
}).then(() => {
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/role/export', {
...this.queryParams
}, `role_${new Date().getTime()}.xlsx`)
}
}
this.download(
"system/role/export",
{
...this.queryParams,
},
`role_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
\ No newline at end of file
src/views/system/role/selectUser.vue
View file @ b1aba8b5
......@@ -29,23 +29,23 @@
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
<el-table-column label="手机" prop="phone" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="status">
<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="180">
<el-table-column label="创建时间" align="center" prop="creationTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
<span>{{ parseTime(scope.row.creationTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.current"
:limit.sync="queryParams.size"
@pagination="getList"
/>
</el-row>
......@@ -78,8 +78,8 @@ export default {
userList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
current: 1,
size: 10,
roleId: undefined,
userName: undefined,
phonenumber: undefined
......@@ -98,13 +98,14 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userIds = selection.map(item => item.userId);
console.log(selection);
this.userIds = selection.map(item => item.id);
},
// 查询表数据
getList() {
unallocatedUserList(this.queryParams).then(res => {
this.userList = res.rows;
this.total = res.total;
this.userList = res.data.records;
this.total = res.data.total;
});
},
/** 搜索按钮操作 */
......
src/views/system/user/api.js 0 → 100644
View file @ b1aba8b5
import request from '@/utils/request'
const path = {
list: 'api/user/selectUserPage',
create: 'api/user/saveUser',
updatePwd: 'api/user/updatePwd',
updateInfo: 'api/user/updateUserBaseInfo',
logList: 'api/sysLog/selectLogPage',
}
export function list() {
return request.post(path.list, ...arguments);
}
export function create() {
return request.post(path.create, ...arguments);
}
export function updatePwd() {
return request.post(path.updatePwd, ...arguments);
}
export function updateInfo() {
return request.post(path.updateInfo, ...arguments);
}
export function logList() {
return request.post(path.logList, ...arguments);
}
src/views/system/user/authRole.vue
View file @ b1aba8b5
......@@ -17,27 +17,50 @@
</el-form>
<h4 class="form-header h4">角色信息</h4>
<el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
<el-table
v-loading="loading"
:row-key="getRowKey"
@row-click="clickRow"
ref="table"
@selection-change="handleSelectionChange"
:data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
>
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column
type="selection"
:reserve-selection="true"
width="55"
></el-table-column>
<el-table-column label="角色编号" align="center" prop="roleId" />
<el-table-column label="角色名称" align="center" prop="roleName" />
<el-table-column label="权限字符" align="center" prop="roleKey" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
<pagination
v-show="total > 0"
:total="total"
:page.sync="pageNum"
:limit.sync="pageSize"
/>
<el-form label-width="100px">
<el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
<el-form-item
style="text-align: center; margin-left: -120px; margin-top: 30px"
>
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="close()">返回</el-button>
</el-form-item>
......@@ -59,11 +82,11 @@ export default {
pageNum: 1,
pageSize: 10,
// 选中角色编号
roleIds:[],
roleIds: [],
// 角色信息
roles: [],
// 用户信息
form: {}
form: {},
};
},
created() {
......
src/views/system/user/const.js 0 → 100644
View file @ b1aba8b5
export function formInit(data = {}) {
return {
originName: '',
realName: '',
userName: '',
deptId: '',
password: '123456',
phone: '',
email: '',
userId: '',
...data
}
}
export function formInitPwd(data = {}) {
return {
userName: '',
originPwd: '',
password: '',
sureNewPwd: '',
userId: '',
...data
}
}
export const rules = {
userName: { required: true, message: '请输入用户名', trigger: 'blur' },
deptId: { required: true, message: '请选择所在部门', trigger: 'blur' }
}
src/views/system/user/updateUser/components/baseInfo.vue 0 → 100644
View file @ b1aba8b5
<template>
<div>
<div class="title">修改基本信息</div>
<el-form ref="form" :model="form" label-width="130px" :rules="rules">
<el-form-item label="用户名:" prop="userName">
<el-input v-model="form.userName" />
</el-form-item>
<el-form-item label="所在部门:" prop="deptId">
<el-select v-model="form.deptId" style="width:100%" placeholder="请选择">
<el-option
v-for="item in departList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电话号码:">
<el-input v-model="form.phone" />
</el-form-item>
<el-form-item label="邮箱:">
<el-input v-model="form.email" />
</el-form-item>
</el-form>
<div class="btn">
<el-button type="primary" @click="confirm">确认修改</el-button>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { rules } from '../../const'
import { updateInfo } from '../../api'
export default {
data() {
let { deptId, email, phone, userId, userName } = this.$store.state.user.userBaseInfo
return {
form: {
deptId: deptId,
email: email,
phone: phone,
userId: userId,
userName: userName
},
rules
}
},
computed: {
...mapGetters('depart', ['departList']),
},
methods: {
confirm() {
this.$refs.form.validate((valid) => {
if (valid) {
updateInfo(this.form).then(res => {
this.$message.success('操作成功');
})
} else {
return false;
}
})
}
}
}
</script>
<style lang="scss" scoped>
.btn {
margin-top: 50px;
text-align: center;
}
.title {
width: 100%;
height: 60px;
background: rgba(226, 235, 255, 0.39);
line-height: 60px;
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
margin-bottom: 30px;
}
.el-form {
width: 500px;
margin: 0 auto;
}
</style>
src/views/system/user/updateUser/components/password.vue 0 → 100644
View file @ b1aba8b5
<template>
<div>
<div class="title">修改密码</div>
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="userName">
<el-input v-model="form.userName" />
</el-form-item>
<el-form-item label="原密码:" prop="originPwd">
<el-input type="password" v-model="form.originPwd" />
</el-form-item>
<el-form-item label="新密码:" prop="password">
<el-input type="password" v-model="form.password" />
</el-form-item>
<el-form-item label="确认新密码:" prop="sureNewPwd">
<el-input type="password" v-model="form.sureNewPwd" />
</el-form-item>
</el-form>
<div class="btn">
<el-button type="primary" @click="confirm">确认修改</el-button>
</div>
</div>
</template>
<script>
import { updatePwd } from '../../api';
export default {
data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入新密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
}
let { userId, userName } = this.$store.state.user.userBaseInfo
return {
form: {
userName: userName,
originPwd: '',
password: '',
sureNewPwd: '',
userId: userId
},
rules: {
userName: { required: true, message: '请输入用户名', trigger: 'blur' },
originPwd: { required: true, message: '请输入原密码', trigger: 'blur' },
password: { required: true, message: '请输入新密码', trigger: 'blur' },
sureNewPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }]
}
}
},
methods: {
confirm() {
this.$refs.form.validate((valid) => {
if (valid) {
updatePwd(this.form).then(res => {
this.$message.success('操作成功');
})
} else {
return false;
}
})
}
}
}
</script>
<style lang="scss" scoped>
.btn {
margin-top: 50px;
text-align: center;
}
.el-form {
width: 500px;
margin: 0 auto;
}
.title {
width: 100%;
height: 60px;
background: rgba(226, 235, 255, 0.39);
line-height: 60px;
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
margin-bottom: 30px;
}
</style>
src/views/system/user/updateUser/index.vue 0 → 100644
View file @ b1aba8b5
<template>
<div>
<div class="update-user-container">
<div class="header">
<div class="tab">
<div
v-for="(item, index) in options"
:key="item.id"
class="tab-item"
:class="tabIndex === index ? 'tab-active' : ''"
@click="radioChange(item.value, index)"
>
{{ item.name }}
</div>
</div>
</div>
<base-info v-if="tabIndex === 0" />
<password v-if="tabIndex === 1" />
</div>
</div>
</template>
<script>
import baseInfo from '../updateUser/components/baseInfo.vue';
import Password from '../updateUser/components/password.vue';
export default {
components: { baseInfo, Password },
data() {
return {
options: [{
name: '修改基本信息',
value: 1
},
{
name: '修改密码',
value: 2
}],
tabIndex: 0
}
},
methods: {
radioChange(val, index) {
this.tabIndex = index;
}
}
}
</script>
<style lang="scss" scoped>
.header {
display: flex;
justify-content: center;
margin-bottom: 30px;
.tab {
display: flex;
cursor: pointer;
.tab-item {
margin: 0 50px;
padding-bottom: 10px;
}
.tab-active {
color: #038ed7;
border-bottom: 1px solid #038ed7;
}
}
}
</style>
src/views/system/user/userList/components/editInfo.vue 0 → 100644
View file @ b1aba8b5
<template>
<el-dialog
:title="editText"
:visible.sync="visible"
@close="cancel"
width="700px"
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="userName">
<el-input v-model="form.userName" />
</el-form-item>
<el-form-item label="真实姓名:" prop="realName">
<el-input v-model="form.realName" />
</el-form-item>
<el-form-item label="所在部门:" prop="deptId">
<el-select
v-model="form.deptId"
style="width: 100%"
placeholder="请选择"
>
<el-option
v-for="item in departList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电话号码:">
<el-input v-model="form.phone" />
</el-form-item>
<el-form-item label="邮箱:">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item label="是否为管理员:">
<el-switch
v-model="form.isAdmin"
active-color="#13ce66"
inactive-color="#ccc"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</el-form-item>
<el-form-item v-if="flag==1">注：新用户初始密码为123456</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="confrim">确定</el-button>
</span>
</el-dialog>
</template>
<script>
import { formInit, rules } from '../../const';
import { updateInfo, create } from '../../api';
import { mapGetters } from 'vuex';
export default {
name: 'edit',
data() {
return {
rules,
form: formInit(),
visible: false
}
},
props: {
flag: {
type: Number,
default: 1
},
curInfo: {
type: Object,
default: () => { }
}
},
watch: {
flag: {
immediate: true,
handler(newV) {
this.visible = !!newV;
this.form = formInit(this.curInfo);
},
},
},
computed: {
...mapGetters('depart', ['departList']),
editText() {
return `${this.flag === 1 ? '新增' : '编辑'}基本信息`;
}
},
methods: {
cancel() {
this.form = formInit();
this.$emit('reset');
},
confrim() {
let apiMap = {
1: create,
2: updateInfo,
}
let api = apiMap[this.flag];
this.$refs['form'].validate(valid => {
let params = {
...this.form
}
if (valid) {
api(params).then(() => {
this.$message.success('操作成功');
this.$emit('reset', true);
})
}
})
}
}
}
</script>
src/views/system/user/userList/components/editPwd.vue 0 → 100644
View file @ b1aba8b5
<template>
<el-dialog
title="修改密码"
:visible.sync="visible"
@close="cancel"
width="700px"
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="用户名:" prop="userName">
<el-input v-model="form.userName" />
</el-form-item>
<el-form-item label="原密码:" prop="originPwd">
<el-input type="password" v-model="form.originPwd" />
</el-form-item>
<el-form-item label="新密码:" prop="password">
<el-input type="password" v-model="form.password" />
</el-form-item>
<el-form-item label="确认新密码:" prop="sureNewPwd">
<el-input type="password" v-model="form.sureNewPwd" />
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="confrim">确定</el-button>
</span>
</el-dialog>
</template>
<script>
import { formInitPwd } from '../../const';
import { updatePwd } from '../../api';
export default {
name: 'editPwd',
data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入新密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
}
return {
rules: {
userName: { required: true, message: '请输入用户名', trigger: 'blur' },
originPwd: { required: true, message: '请输入原密码', trigger: 'blur' },
password: { required: true, message: '请输入新密码', trigger: 'blur' },
sureNewPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }]
},
form: formInitPwd(),
visible: false
}
},
props: {
flag1: {
type: Number,
default: 0
},
curInfo: {
type: Object,
default: () => { }
}
},
watch: {
flag1: {
immediate: true,
handler(newV) {
this.visible = !!newV;
this.form = formInitPwd(this.curInfo);
},
},
},
methods: {
cancel() {
this.form = formInitPwd();
this.$emit('reset');
},
confrim() {
this.$refs['form'].validate(valid => {
let params = {
...this.form
}
if (valid) {
updatePwd(params).then(() => {
this.$message.success('操作成功');
this.$emit('reset', true);
})
}
})
}
}
}
</script>
src/views/system/user/userList/index.vue 0 → 100644
View file @ b1aba8b5
<template>
<div class="leakage-cable">
<div class="leakage-top">
<div style="color: #666666"></div>
<div class="operate-btn">
<el-button type="primary" @click="addUser">添加新用户</el-button>
</div>
</div>
<el-table
v-loading="loading"
:data="tableData"
class="statistics-table"
style="width: 100%"
:row-class-name="tableRowClassName"
:header-cell-style="{
background: '#eaf1fe',
color: '#000',
fontWeight: 700,
height: '50px',
}"
>
<el-table-column
type="index"
label="用户编号"
align="center"
width="100"
/>
<el-table-column prop="userName" label="用户名" align="center" />
<el-table-column prop="realName" label="真实姓名" align="center" />
<el-table-column prop="deptName" label="用户部门" align="center" />
<el-table-column prop="phone" label="电话号码" align="center" />
<el-table-column prop="email" label="邮箱" align="center" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="toEditPwd(scope.row)">修改密码</el-button>
<el-button type="text" @click="toEditInfo(scope.row)">修改基本信息</el-button>
</template>
</el-table-column>
</el-table>
<Pagination
:limit="params.pageSize"
:page="params.pageNum"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
<edit @reset="reset" :cur-info="curInfo" :flag="flag"></edit>
<ediPwd @reset="reset" :cur-info="curInfo" :flag1="flag1"></ediPwd>
</div>
</template>
<script>
import { list } from '../api';
import edit from './components/editInfo.vue';
import ediPwd from './components/editPwd.vue';
export default {
data() {
return {
params: {
pageNum: 1,
pageSize: 10
},
tableData: [],
total: 5,
loading: false,
curInfo: {},
flag: 0,
flag1: 0
}
},
components: {
edit,
ediPwd
},
methods: {
tableRowClassName({ row, rowIndex }) {
return rowIndex % 2 === 0 ? '' : 'single-row';
},
handlePageChange(pageData) {
this.params.pageSize = pageData.size;
this.params.pageNum = pageData.page;
this.getTableData();
},
getTableData() {
let params = {
current: this.params.pageNum,
size: this.params.pageSize
}
list(params).then(res => {
let list = res.records || [];
list.forEach(item => {
item.userId = item.id;
})
this.tableData = list;
this.total = res.total;
})
},
addUser() {
this.curInfo = {};
this.flag = 1;
},
toEditInfo(row) {
this.curInfo = row;
this.flag = 2;
},
toEditPwd(row) {
this.curInfo = row;
this.flag1 = 3;
},
reset(needRefresh) {
this.flag = 0;
this.flag1 = 0;
if(needRefresh) {
this.getTableData();
}
}
},
mounted() {
this.getTableData();
},
}
</script>
<style lang="scss" scoped>
.leakage-cable {
.leakage-top {
margin-bottom: 20px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
& ::v-deep .cell {
color: #333333;
}
& ::v-deep .stripe {
background-color: #eaf1fe;
}
& ::v-deep .red {
background-color: #f00;
}
& ::v-deep .green {
background-color: green;
}
.page {
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
.pageNum {
margin: 0 20px;
}
}
}
</style>
<style lang="scss">
.statistics-table {
.single-row {
background: #f1f6ff;
}
td {
padding: 5px !important;
}
}
</style>
\ No newline at end of file
src/views/system/user/userLog/components/search.vue 0 → 100644
View file @ b1aba8b5
<template>
<div>
<el-form
class="search-form"
:model="form"
ref="form"
label-width="80px"
:inline="true"
size="mini"
>
<el-form-item label="操作对象">
<el-select
v-model="form.operateObj"
placeholder="请选择操作对象"
clearable
>
<el-option
v-for="item in operatObj"
:key="item.dictValue"
:label="item.dictValue"
:value="+item.dictValue1"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作内容">
<el-select
v-model="form.operateContent"
placeholder="请选择操作内容"
clearable
>
<el-option
v-for="item in operatContent"
:key="item.dictValue"
:label="item.dictValue"
:value="item.dictValue1"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="操作结果">
<el-select
v-model="form.operateResult"
placeholder="请选择操作结果"
clearable
>
<el-option
v-for="(val, key) in resultEnum"
:key="val"
:label="val"
:value="+key"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="success" @click="toSearch">查询</el-button>
<el-button type="primary" @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { selectDictType } from '@/api/baseData';
export default {
name: 'search',
data() {
return {
operatContent: [],
operatObj: [],
resultEnum: {
0: '失败',
1: '成功',
},
form: formInit()
}
},
computed: {
},
mounted() {
this.getInit()
},
methods: {
toSearch() {
this.$emit('search', this.form);
},
reset() {
this.form = formInit();
this.$emit('search');
},
getInit() {
selectDictType({ dictType: '06' }).then(res => {
let list = res || [];
this.operatContent = list;
})
selectDictType({ dictType: '07' }).then(res => {
let list = res || [];
this.operatObj = list;
})
}
}
}
function formInit() {
return {
operateContent: '',
operateObj: null,
operateResult: null,
}
}
</script>
<style scoped lang="scss">
.w200 {
width: 200px;
}
.search-form {
padding: 10px;
background-color: #eaf1fe;
margin-bottom: 20px;
border-radius: 8px;
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
}
</style>
\ No newline at end of file
src/views/system/user/userLog/index.vue 0 → 100644
View file @ b1aba8b5
<template>
<!-- 用户操作日志 -->
<div class="leakage-cable">
<div class="leakage-top">
<div style="color: #666666"></div>
<div class="operate-btn">
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button type="primary" @click="isQuery = !isQuery">查询</el-button>
<el-button type="primary" @click="exportLog">导出</el-button>
</div>
</div>
<div v-if="isQuery">
<search @search="search" ref="reset" />
</div>
<el-table
:data="tableData"
style="width: 100%"
class="statistics-table"
:row-class-name="tableRowClassName"
:row-style="{ height: '50px' }"
:header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
>
<el-table-column prop="userName" label="用户名" align="center" />
<el-table-column prop="operateTypeName" label="操作类别" align="center" />
<el-table-column prop="operateObjName" label="操作对象" align="center" />
<el-table-column prop="objectName" label="对象名称" align="center" />
<el-table-column prop="operateContent" label="操作内容" align="center" />
<el-table-column
prop="operateResultName"
label="操作结果"
align="center"
/>
<el-table-column prop="creationTime" label="操作时间" align="center" />
</el-table>
<Pagination
:limit="params.size"
:page="params.current"
:total="total"
class="pagination"
@pagination="handlePageChange"
/>
</div>
</template>
<script>
import { logList } from "../api";
import search from "./components/search.vue";
import { exportLog } from "@/api/export";
import download from "@/utils/download";
import { successAlert, warningAlert } from "@/utils/alert";
export default {
data() {
return {
params: {
current: 1,
size: 10,
},
total: 10,
tableData: [],
isQuery: false,
istrue: 0,
searchOption: {},
exids: [],
};
},
components: {
search,
},
methods: {
handlePageChange(pageData) {
this.params.size = pageData.size;
this.params.current = pageData.page;
this.getTableData();
},
refresh() {
this.$refs.reset != undefined
? this.$refs.reset.reset()
: this.getTableData();
},
search(option) {
this.params.current = 1;
this.istrue = 1;
this.searchOption = option;
this.getTableData();
},
getTableData() {
let params = {
...this.params,
...this.searchOption,
};
logList(params).then((res) => {
let list = res.records || [];
this.tableData = list;
this.total = res.total;
this.exids = list.map((i) => i.id);
if (this.istrue == 1) {
if (this.tableData.length != 0) {
successAlert("操作成功");
} else {
warningAlert("查询结果为空");
}
this.istrue = 0;
}
});
},
tableRowClassName({ row, rowIndex }) {
return rowIndex % 2 === 0 ? "" : "single-row";
},
exportLog() {
if (this.exids.length == 0) {
this.$message.warning("暂无数据");
return false;
} else {
exportLog({ ids: this.exids }).then((res) => {
download(res, "vnd.ms-excel", `用户日志.xls`);
});
}
},
},
mounted() {
this.getTableData();
},
};
</script>
<style lang="scss" scoped>
.leakage-cable {
.leakage-top {
margin-bottom: 20px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
& ::v-deep .cell {
color: #333333;
}
.page {
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
.current {
margin: 0 20px;
}
}
}
</style>
<style lang="scss">
.statistics-table {
.single-row {
background: #f1f6ff;
}
td {
padding: 5px !important;
}
}
</style>
\ No newline at end of file
src/views/system/user2/authRole.vue 0 → 100644
View file @ b1aba8b5
<template>
<div class="app-container">
<h4 class="form-header h4">基本信息</h4>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="8" :offset="2">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" disabled />
</el-form-item>
</el-col>
<el-col :span="8" :offset="2">
<el-form-item label="登录账号" prop="userName">
<el-input v-model="form.userName" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
<h4 class="form-header h4">角色信息</h4>
<el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column label="角色编号" align="center" prop="roleId" />
<el-table-column label="角色名称" align="center" prop="roleName" />
<el-table-column label="权限字符" align="center" prop="roleKey" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
<el-form label-width="100px">
<el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="close()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { getAuthRole, updateAuthRole } from "@/api/system/user";
export default {
name: "AuthRole",
data() {
return {
// 遮罩层
loading: true,
// 分页信息
total: 0,
pageNum: 1,
pageSize: 10,
// 选中角色编号
roleIds:[],
// 角色信息
roles: [],
// 用户信息
form: {}
};
},
created() {
const userId = this.$route.params && this.$route.params.userId;
if (userId) {
this.loading = true;
getAuthRole(userId).then((response) => {
this.form = response.user;
this.roles = response.roles;
this.total = this.roles.length;
this.$nextTick(() => {
this.roles.forEach((row) => {
if (row.flag) {
this.$refs.table.toggleRowSelection(row);
}
});
});
this.loading = false;
});
}
},
methods: {
/** 单击选中行数据 */
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.roleIds = selection.map((item) => item.roleId);
},
// 保存选中的数据编号
getRowKey(row) {
return row.roleId;
},
/** 提交按钮 */
submitForm() {
const userId = this.form.userId;
const roleIds = this.roleIds.join(",");
updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
this.$modal.msgSuccess("授权成功");
this.close();
});
},
/** 关闭按钮 */
close() {
const obj = { path: "/system/user" };
this.$tab.closeOpenPage(obj);
},
},
};
</script>
\ No newline at end of file
vue.config.js
View file @ b1aba8b5
......@@ -8,9 +8,9 @@ function resolve(dir) {
const name = defaultSettings.title || '漏缆故障定位监测系统' // page title
const port = process.env.port || process.env.npm_config_port || 8890 // dev port
const href = 'http://101.126.159.207'
// const href = 'http://101.126.159.207'
// const href = 'http://127.0.0.1'
// const href = 'http://192.168.0.122'
const href = 'http://192.168.0.122'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment