root/apt-nl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色管理

Browse Source
This commit is contained in:
caill
2023-05-24 14:43:07 +08:00
parent bed7c65a70
commit 1c83c365e1
5 changed files with 178 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/config/getData2.js
View File

@@ -76,3 +76,26 @@ export const sysRoleQuery = (page, size) => post('api/sysRole/query', {
page: page,
size: size
})
// 1.2 添加角色
export const sysRoleAdd = (name, remark) => post('api/sysRole/add', {
name: name,
remark: remark
})
// 1.3 修改角色
export const sysRoleEdit = (roleId, name, remark) => post('api/sysRole/edit', {
roleId: roleId,
name: name,
remark: remark
})
// 1.4 删除角色
export const sysRoleDelete = (roleId) => post('api/sysRole/delete', {
rolesIds: roleId
})
// 1.5 保存菜单
export const sysRoleMenu = (roleId, menus) => post('api/sysRole/menu', {
roleId: roleId,
menus: menus
})
// 1.6 查询菜单树
export const menuQuery = (roleId, menus) => post('api/sysRole/menuQuery', {
})

3
src/main.js
View File

@@ -9,7 +9,7 @@ import fastClick from 'fastclick'
import infiniteScroll from 'vue-infinite-scroll'
import VueTouchKeyboard from 'vue-touch-keyboard'
import 'vue-touch-keyboard/dist/vue-touch-keyboard.css'
import { DatePicker, Select, Option, Radio, Menu, MenuItem } from 'element-ui'
import { DatePicker, Select, Option, Radio, Menu, MenuItem, Tree } from 'element-ui'
import { Pagination } from 'vant'
// import '@style/layout.styl'
import '@style/common.styl'
@@ -26,6 +26,7 @@ Vue.use(Option)
Vue.use(Radio)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(Tree)
Vue.use(Pagination)
Vue.use(infiniteScroll)
Vue.use(VueTouchKeyboard)

292
src/pages/modules/systemmanage/role.vue
View File

@@ -19,13 +19,13 @@
<td>
<div class="radio__input icon_radio_checked"><i class="icon_radio"></i></div>
</td>
<td>超级管理员</td>
<td>垃圾分类几点睡浪费就冷冻机房蓝黛科技弗兰克</td>
<td>2023-05-05 08:50:08</td>
<td>{{ e.name }}</td>
<td>{{ e.remark }}</td>
<td>{{ e.createTime }}</td>
<td>
<div class="row">
<button class="button button--primary grid_button" @click="showDialog('2')">修改</button>
<button class="button button--primary grid_button" @click="showDialog('3')">删除</button>
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
<button class="button button--primary grid_button" @click="showDialog('3', e)">删除</button>
</div>
</td>
</tr>
@@ -34,45 +34,18 @@
<div class="tree_wrapper">
<div class="tree_header">
<span>角色名称</span>
<button class="button button--primary grid_button button1">保存</button>
<button class="button button--primary grid_button button1" :disabled="disabled" @click="toSave">保存</button>
</div>
<div class="tree_body_container">
<div class="tree">
<div class="tree-node is-expanded is-focusable" v-for="(e, i) in tree" :key="i">
<div class="tree-node__content" style="padding-left: 0">
<span class="icon_tree-node__expand icon_caret_right"></span>
<div class="checkbox__input" @click="toCheck(e, tree)">
<i class="icon_checkbox" :class="{'icon_checkbox_checked': e.checked}"></i>
<input type="checkbox" class="checkbox__original" v-model="e.id">
</div>
<span class="tree-node__label">{{e.label}}</span>
</div>
<div class="tree-node__children">
<div class="tree-node is-expanded is-focusable" v-for="(el, j) in e.children" :key="j">
<div class="tree-node__content" style="padding-left: 24px">
<span class="icon_tree-node__expand icon_caret_right"></span>
<div class="checkbox__input" @click="toCheck(el, e.children)">
<i class="icon_checkbox" :class="{'icon_checkbox_checked': el.checked}"></i>
<input type="checkbox" class="checkbox__original" v-model="el.id">
</div>
<span class="tree-node__label">{{el.label}}</span>
</div>
<div class="tree-node__children">
<div class="tree-node is-expanded is-focusable" v-for="(ele, t) in el.children" :key="t">
<div class="tree-node__content" style="padding-left: 48px">
<span class="icon_tree-node__expand icon_caret_right"></span>
<div class="checkbox__input" @click="toCheck(ele, el.children)">
<i class="icon_checkbox" :class="{'icon_checkbox_checked': ele.checked}"></i>
<input type="checkbox" class="checkbox__original" v-model="ele.id">
</div>
<span class="tree-node__label">{{ ele.label }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<el-tree
:data="tree"
show-checkbox
default-expand-all
node-key="menuId"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
</div>
</div>
</div>
@@ -80,6 +53,7 @@
ref="child"
:title="title"
:type="type"
:unclick="unclick"
@toSure="toSureDialog"
>
<div v-if="type === '1' || type === '2'" class="form_wraper">
@@ -87,7 +61,7 @@
<div class="form_item">
<div class="form_item__label"><i>*</i>角色名称</div>
<div class="form_item__content">
<input type="text" class="form_item__input">
<input type="text" class="form_item__input" v-model="rolename">
</div>
</div>
</div>
@@ -107,114 +81,27 @@
<script>
import jxDialog from '@components/dialog.vue'
import { sysRoleQuery, sysRoleAdd, sysRoleEdit, sysRoleDelete, menuQuery, sysRoleMenu } from '@config/getData2.js'
export default {
components: {
jxDialog
},
data () {
return {
datalist: [{name: ''}, {name: 'a'}, {name: 'a'}, {name: ''}, {name: 'a'}, {name: 'a'}],
datalist: [],
active: false,
type: '',
title: '',
rolename: '',
remark: '',
tree: [{
id: '1',
label: '智能搬运车系统',
checked: false,
children: [{
id: '1-1',
label: '首页',
checked: false,
children: [{
id: '1-1-1',
label: '首页',
checked: false
}]
}, {
id: '1-2',
label: '任务管理',
checked: false,
children: [{
id: '1-2-1',
label: '搬运起点',
checked: false
}, {
id: '1-2-2',
label: '任务列表',
checked: false
}, {
id: '1-2-3',
label: '任务操作',
checked: false
}]
}, {
id: '1-3',
label: '故障管理',
checked: false,
children: [{
id: '1-3-1',
label: '故障处理',
checked: false
}]
}, {
id: '1-4',
label: '车辆信息',
checked: false,
children: [{
id: '1-4-1',
label: '车辆状态',
checked: false
}, {
id: '1-4-2',
label: '传感器状态',
checked: false
}, {
id: '1-4-3',
label: 'AGV',
checked: false
}, {
id: '1-5',
label: '示教',
checked: false,
children: [{
id: '1-5-1',
label: '地图',
checked: false
}, {
id: '1-5-2',
label: '绘制路线',
checked: false
}, {
id: '1-5-3',
label: '地图演示',
checked: false
}]
}, {
id: '1-6',
label: '系统管理',
checked: false,
children: [{
id: '1-6-1',
label: '用户管理',
checked: false
}, {
id: '1-6-2',
label: '角色管理',
checked: false
}, {
id: '1-6-3',
label: '系统参数',
checked: false
}, {
id: '1-6-4',
label: '开发者选项',
checked: false
}]
}]
}]
}]
tree: [],
defaultProps: {
children: 'children',
label: 'title'
},
pkObj: {},
unclick: false,
disabled: false
}
},
watch: {
@@ -232,34 +119,134 @@ export default {
default:
this.title = ''
}
},
rolename (val) {
if ((this.type === '1' || this.type === '2') && val === '') {
this.unclick = true
} else {
this.unclick = false
}
}
},
created () {
this._sysRoleQuery()
this._menuQuery()
},
methods: {
showDialog (type) {
async _sysRoleQuery () {
let res = await sysRoleQuery('0', '100')
this.datalist = [...res]
},
async _menuQuery () {
let res = await menuQuery()
this.tree = [...res]
},
showDialog (type, e) {
this.type = type
this.$refs.child.active = true
switch (type) {
case '1':
this.rolename = ''
this.remark = ''
this.unclick = true
break
case '2':
this.pkObj = e
this.rolename = e.name
this.remark = e.remark
if (this.rolename === '') {
this.unclick = true
}
break
case '3':
this.pkObj = e
this.unclick = false
break
}
},
toSureDialog (type) {
switch (type) {
case '1':
console.log(type)
this._sysRoleAdd()
break
case '2':
console.log(type)
this._sysRoleEdit()
break
case '3':
console.log(type)
this._sysRoleDelete()
break
default:
console.log(type)
}
},
toCheck (e, arr) {
arr.map(el => {
if (e.id === el.id) {
e.checked = !e.checked
async _sysRoleAdd () {
this.$refs.child.disabled = true
if (!this.rolename) {
this.toast('角色名称不能为空')
this.$refs.child.disabled = false
return
}
try {
await sysRoleAdd(this.rolename, this.remark)
this.toast('操作成功')
this._sysRoleQuery()
this.$refs.child.active = false
this.$refs.child.disabled = false
} catch (e) {
this.$refs.child.active = false
this.$refs.child.disabled = false
}
},
async _sysRoleEdit () {
this.$refs.child.disabled = true
if (!this.rolename) {
this.toast('角色名称不能为空')
this.$refs.child.disabled = false
return
}
try {
await sysRoleEdit(this.pkObj.roleId, this.rolename, this.remark)
this.toast('操作成功')
this._sysRoleQuery()
this.$refs.child.active = false
this.$refs.child.disabled = false
} catch (e) {
this.$refs.child.active = false
this.$refs.child.disabled = false
}
},
async _sysRoleDelete () {
this.$refs.child.disabled = true
try {
await sysRoleDelete([this.pkObj.roleId])
this.toast('操作成功')
this._sysRoleQuery()
this.$refs.child.active = false
this.$refs.child.disabled = false
} catch (e) {
this.$refs.child.active = false
this.$refs.child.disabled = false
}
},
async _sysRoleMenu (arr) {
this.disabled = true
try {
let res = await sysRoleMenu(arr)
if (res.code === '1') {
this.toast(res.desc)
} else {
this.toast(res.desc)
}
this.disabled = false
} catch (e) {
this.disabled = false
}
},
toSave () {
let arr = this.$refs.tree.getCheckedKeys()
let arr1 = []
arr.map(el => {
arr1.push({menuId: el})
})
this._sysRoleMenu(arr1)
}
}
}
@@ -282,7 +269,8 @@ export default {
_wh(calc(50% - 10px), 100%)
overflow-y auto
.tree_header
position relative
position sticky
top -1px
z-index 99
background #d7d7d7
_font(14px, 23px, #323232, bold, center)

15
src/pages/modules/systemmanage/user.vue
View File

@@ -149,15 +149,18 @@ export default {
}
},
username (val) {
if (this.type === '1' && this.password !== '' && val !== '') {
this.unclick = false
}
if (this.type === '2' && val !== '') {
if (this.type === '1' && (this.password === '' || val === '')) {
this.unclick = true
} else if (this.type === '2' && val === '') {
this.unclick = true
} else {
this.unclick = false
}
},
password (val) {
if (this.type === '1' && this.password !== '' && val !== '') {
if (this.type === '1' && (this.password === '' || val === '')) {
this.unclick = true
} else {
this.unclick = false
}
}
@@ -199,7 +202,7 @@ export default {
this.value = el.roleId
}
})
if (this.username && this.password) {
if (this.username === '') {
this.unclick = true
}
break

66
src/style/common.styl
View File

@@ -356,69 +356,11 @@
padding 6px 12px
// tree
.tree
position: relative;
cursor: default;
background: #fff;
color: #606266;
.tree-node
white-space: nowrap;
outline: none;
.tree-node__content
display: flex;
align-items: center;
height: 26px;
cursor: pointer;
.icon_tree-node__expand
cursor: pointer;
color: #c0c4cc;
font-size: 12px;
transform: rotate(0deg);
transition: transform .3s ease-in-out;
padding: 6px;
&::before
content: '\e65b'
.icon_caret_right
transform rotate(-90deg)
.checkbox__input
color: #606266;
font-weight: 500;
font-size: 12px;
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
user-select: none;
margin-right: 8px
cursor: pointer;
.icon_checkbox
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
padding: 2px;
position: relative;
vertical-align: middle;
color #fff
border: 1px solid $green1
background-color: #fff;
border-radius 3px
&::before
content: '\E608'
.icon_checkbox_checked
.el-checkbox__inner:hover, .el-checkbox__input.is-focus .el-checkbox__inner
border-color $green1
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner
background-color $green1
.checkbox__original
opacity: 0;
outline: none;
position: absolute;
margin: 0;
width: 0;
height: 0;
z-index: -1;
.tree-node__label
font-size: 14px
.tree-node__children
overflow hidden
border-color $green1
// 车辆信息
.content_wrap