用户、角色管理
This commit is contained in:
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="showDialog('1')">新增角色</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row_2">
|
||||
<div class="grid_wrapper">
|
||||
<table>
|
||||
<tr>
|
||||
<th width="56px">选中</th>
|
||||
<th width="100px">角色名称</th>
|
||||
<th>描述</th>
|
||||
<th width="115px">创建日期</th>
|
||||
<th width="75px">操作</th>
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tree_wrapper">
|
||||
<div class="tree_header">
|
||||
<span>角色名称</span>
|
||||
<button class="button button--primary grid_button button1">保存</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<jxDialog
|
||||
ref="child"
|
||||
:title="title"
|
||||
:type="type"
|
||||
@toSure="toSureDialog"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>角色名称</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item allwidth">
|
||||
<div class="form_item__label">备注</div>
|
||||
<div class="form_item__content">
|
||||
<textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
|
||||
</jxDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jxDialog from '@components/dialog.vue'
|
||||
export default {
|
||||
components: {
|
||||
jxDialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [{name: ''}, {name: 'a'}, {name: 'a'}, {name: ''}, {name: 'a'}, {name: 'a'}],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
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
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加角色'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改角色'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDialog (type) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
},
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
console.log(type)
|
||||
break
|
||||
case '2':
|
||||
console.log(type)
|
||||
break
|
||||
case '3':
|
||||
console.log(type)
|
||||
break
|
||||
default:
|
||||
console.log(type)
|
||||
}
|
||||
},
|
||||
toCheck (e, arr) {
|
||||
arr.map(el => {
|
||||
if (e.id === el.id) {
|
||||
e.checked = !e.checked
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.row_2
|
||||
_fj()
|
||||
_wh(100%, calc(100% - 50px))
|
||||
.grid_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
overflow-y auto
|
||||
.grid_wrapper table td
|
||||
white-space normal
|
||||
.button+.button
|
||||
margin-left 0
|
||||
margin-top 10px
|
||||
.tree_wrapper
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
overflow-y auto
|
||||
.tree_header
|
||||
position relative
|
||||
z-index 99
|
||||
background #d7d7d7
|
||||
_font(14px, 23px, #323232, bold, center)
|
||||
padding 12px 10px
|
||||
.button1
|
||||
position absolute
|
||||
right 10px
|
||||
top 10px
|
||||
.tree_body_container
|
||||
height calc(100% - 47px)
|
||||
padding 12px 10px
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="right_side">
|
||||
<div class="buttons_wrapper">
|
||||
<div class="row">
|
||||
<button class="button button--primary" @click="addData">添加用户</button>
|
||||
<button class="button button--primary" @click="showDialog('1')">添加用户</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_wrapper">
|
||||
@@ -18,83 +18,87 @@
|
||||
</tr>
|
||||
<tr v-for="(e, i) in datalist" :key="i">
|
||||
<td>{{i+1}}</td>
|
||||
<td>{{e.name}}</td>
|
||||
<td>{{e.name}}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>admin</td>
|
||||
<td>管理员</td>
|
||||
<td>18888888888</td>
|
||||
<td>男</td>
|
||||
<td>2023-05-05 08:50:08</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<button class="button button--primary">修改</button>
|
||||
<button class="button button--primary">分配角色</button>
|
||||
<button class="button button--primary" @click="setPass">重置密码</button>
|
||||
<button class="button button--primary">删除</button>
|
||||
<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('4')">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<jxDialog
|
||||
ref="child1"
|
||||
title="添加用户">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>用户名</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">电话</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">姓名</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">性别</div>
|
||||
<div class="form_item__content">
|
||||
<div class="form_item__radio">
|
||||
<div class="radio__input"><i class="iconfont icon_radio icon_radio_checked"></i></div>
|
||||
<div class="radio__label">男</div>
|
||||
ref="child"
|
||||
:title="title"
|
||||
:type="type"
|
||||
@toSure="toSureDialog"
|
||||
>
|
||||
<div v-if="type === '1' || type === '2'" class="form_wraper">
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>用户名</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="username">
|
||||
</div>
|
||||
<div class="form_item__radio">
|
||||
<div class="radio__input"><i class="iconfont icon_radio"></i></div>
|
||||
<div class="radio__label">女</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">电话</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="phone">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">姓名</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">性别</div>
|
||||
<div class="form_item__content">
|
||||
<div class="form_item__radio" v-for="(e, i) in sexArr" :key="i">
|
||||
<div class="radio__input" :class="{'icon_radio_checked': e.value === sex}" @click="toRadio(e)">
|
||||
<i class="icon_radio"></i>
|
||||
<input type="radio" class="radio__original" v-model="e.value">
|
||||
</div>
|
||||
<div class="radio__label">{{ e.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div v-if="type === '1'" class="form_item">
|
||||
<div class="form_item__label"><i>*</i>密码</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input" v-model="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">角色</div>
|
||||
<div class="form_item__content">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="form_item">
|
||||
<div class="form_item__label"><i>*</i>密码</div>
|
||||
<div class="form_item__content">
|
||||
<input type="text" class="form_item__input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<div class="form_item__label">角色</div>
|
||||
<div class="form_item__content">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === '3'" class="form_wraper">确定重置密码吗？</div>
|
||||
<div v-if="type === '4'" class="form_wraper">确定删除该用户吗？</div>
|
||||
</jxDialog>
|
||||
<jxDialog ref="child2">确定重置密码吗？</jxDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -106,7 +110,16 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datalist: [{name: 'a氪金大佬发家里的饭交流交流'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ac'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'ad'}],
|
||||
datalist: [{name: ''}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}],
|
||||
active: false,
|
||||
type: '',
|
||||
title: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
sexArr: [{label: '男', value: '1'}, {label: '女', value: '2'}],
|
||||
sex: '1',
|
||||
password: '',
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '超级管理员'
|
||||
@@ -120,16 +133,54 @@ export default {
|
||||
value: '选项4',
|
||||
label: '开发人员'
|
||||
}],
|
||||
value: '',
|
||||
active: false
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type (val) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
this.title = '添加用户'
|
||||
break
|
||||
case '2':
|
||||
this.title = '修改用户'
|
||||
break
|
||||
case '3':
|
||||
this.title = ''
|
||||
break
|
||||
case '4':
|
||||
this.title = ''
|
||||
break
|
||||
default:
|
||||
this.title = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addData () {
|
||||
this.$refs.child1.active = true
|
||||
showDialog (type) {
|
||||
this.type = type
|
||||
this.$refs.child.active = true
|
||||
},
|
||||
setPass () {
|
||||
this.$refs.child2.active = true
|
||||
toSureDialog (type) {
|
||||
switch (type) {
|
||||
case '1':
|
||||
console.log(type)
|
||||
break
|
||||
case '2':
|
||||
console.log(type)
|
||||
break
|
||||
case '3':
|
||||
console.log(type)
|
||||
break
|
||||
case '4':
|
||||
console.log(type)
|
||||
break
|
||||
default:
|
||||
console.log(type)
|
||||
}
|
||||
},
|
||||
toRadio (e) {
|
||||
this.sex = e.value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user