用户、角色管理
This commit is contained in:
@@ -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