339 lines
9.2 KiB
Vue
339 lines
9.2 KiB
Vue
<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="grid_wrapper">
|
||
<table>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>用户名</th>
|
||
<th>姓名</th>
|
||
<th>电话</th>
|
||
<th>性别</th>
|
||
<th>创建日期</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
<tr v-for="(e, i) in datalist" :key="i">
|
||
<td>{{i+1}}</td>
|
||
<td>{{ e.username }}</td>
|
||
<td>{{ e.personName }}</td>
|
||
<td>{{ e.phone }}</td>
|
||
<td>{{ e.gender }}</td>
|
||
<td>{{ e.createTime }}</td>
|
||
<td>
|
||
<div class="row">
|
||
<button class="button button--primary grid_button" @click="showDialog('2', e)">修改</button>
|
||
<button class="button button--primary grid_button" @click="showDialog('3', e)">重置密码</button>
|
||
<button class="button button--primary grid_button" @click="showDialog('4', e)">删除</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<jxDialog
|
||
ref="child"
|
||
:title="title"
|
||
:type="type"
|
||
:unclick="unclick"
|
||
@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>
|
||
<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.roleId"
|
||
:label="item.name"
|
||
:value="item.roleId">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="type === '3'" class="form_wraper">确定重置密码吗？</div>
|
||
<div v-if="type === '4'" class="form_wraper">确定删除该用户吗？</div>
|
||
</jxDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import jxDialog from '@components/dialog.vue'
|
||
import {usersQuery, sysRoleQuery, usersAdd, usersEdit, usersDelete} from '@config/getData2.js'
|
||
export default {
|
||
components: {
|
||
jxDialog
|
||
},
|
||
data () {
|
||
return {
|
||
datalist: [],
|
||
active: false,
|
||
type: '',
|
||
title: '',
|
||
username: '',
|
||
phone: '',
|
||
name: '',
|
||
sexArr: [{label: '男', value: '男'}, {label: '女', value: '女'}],
|
||
sex: '',
|
||
password: '',
|
||
options: [],
|
||
value: '',
|
||
disabled1: false,
|
||
pkObj: {},
|
||
unclick: false
|
||
}
|
||
},
|
||
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 = ''
|
||
}
|
||
},
|
||
username (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 === '')) {
|
||
this.unclick = true
|
||
} else {
|
||
this.unclick = false
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
this._usersQuery()
|
||
this._sysRoleQuery()
|
||
},
|
||
methods: {
|
||
async _usersQuery () {
|
||
let res = await usersQuery('0', '100')
|
||
this.datalist = [...res]
|
||
},
|
||
async _sysRoleQuery () {
|
||
let res = await sysRoleQuery('0', '100')
|
||
this.options = [...res]
|
||
},
|
||
showDialog (type, e) {
|
||
this.type = type
|
||
this.$refs.child.active = true
|
||
switch (type) {
|
||
case '1':
|
||
this.username = ''
|
||
this.phone = ''
|
||
this.name = ''
|
||
this.sex = ''
|
||
this.password = ''
|
||
this.value = ''
|
||
this.unclick = true
|
||
break
|
||
case '2':
|
||
this.pkObj = e
|
||
this.username = e.username
|
||
this.phone = e.phone
|
||
this.name = e.personName
|
||
this.sex = this.gender
|
||
this.options.map(el => {
|
||
if (el.roleId === e.roles[0].roleId) {
|
||
this.value = el.roleId
|
||
}
|
||
})
|
||
if (this.username === '') {
|
||
this.unclick = true
|
||
}
|
||
break
|
||
case '3':
|
||
this.pkObj = e
|
||
this.unclick = false
|
||
break
|
||
case '4':
|
||
this.pkObj = e
|
||
this.unclick = false
|
||
break
|
||
}
|
||
},
|
||
toSureDialog (type) {
|
||
switch (type) {
|
||
case '1':
|
||
this._usersAdd()
|
||
break
|
||
case '2':
|
||
this._usersEdit()
|
||
break
|
||
case '3':
|
||
this.resetPassword()
|
||
break
|
||
case '4':
|
||
this._usersDelete()
|
||
break
|
||
}
|
||
},
|
||
toRadio (e) {
|
||
this.sex = e.value
|
||
},
|
||
async _usersAdd () {
|
||
this.$refs.child.disabled = true
|
||
if (!this.username) {
|
||
this.toast('用户名不能为空')
|
||
this.$refs.child.disabled = false
|
||
return
|
||
}
|
||
if (!this.password) {
|
||
this.toast('密码不能为空')
|
||
this.$refs.child.disabled = false
|
||
return
|
||
}
|
||
try {
|
||
let rolesIds = []
|
||
this.options.map(el => {
|
||
if (el.roleId === this.value) {
|
||
rolesIds.push(el)
|
||
}
|
||
})
|
||
await usersAdd(this.username, this.name, this.sex, this.phone, rolesIds, this.password)
|
||
this.toast('操作成功')
|
||
this._usersQuery()
|
||
this.$refs.child.active = false
|
||
this.$refs.child.disabled = false
|
||
} catch (e) {
|
||
this.$refs.child.active = false
|
||
this.$refs.child.disabled = false
|
||
}
|
||
},
|
||
async _usersEdit () {
|
||
this.$refs.child.disabled = true
|
||
if (!this.username) {
|
||
this.toast('用户名不能为空')
|
||
this.$refs.child.disabled = false
|
||
return
|
||
}
|
||
try {
|
||
let rolesIds = []
|
||
this.options.map(el => {
|
||
if (el.roleId === this.value) {
|
||
rolesIds.push(el)
|
||
}
|
||
})
|
||
let obj = {
|
||
userId: this.pkObj.userId,
|
||
username: this.username,
|
||
personName: this.name,
|
||
gender: this.sex,
|
||
phone: this.phone,
|
||
rolesIds: rolesIds
|
||
}
|
||
await usersEdit(obj)
|
||
this.toast('操作成功')
|
||
this._usersQuery()
|
||
this.$refs.child.active = false
|
||
this.$refs.child.disabled = false
|
||
} catch (e) {
|
||
this.$refs.child.active = false
|
||
this.$refs.child.disabled = false
|
||
}
|
||
},
|
||
async resetPassword () {
|
||
this.$refs.child.disabled = true
|
||
try {
|
||
let obj = {
|
||
userId: this.pkObj.userId,
|
||
password: '123456'
|
||
}
|
||
await usersEdit(obj)
|
||
this.toast('操作成功')
|
||
this._usersQuery()
|
||
this.$refs.child.active = false
|
||
this.$refs.child.disabled = false
|
||
} catch (e) {
|
||
this.$refs.child.active = false
|
||
this.$refs.child.disabled = false
|
||
}
|
||
},
|
||
async _usersDelete () {
|
||
this.$refs.child.disabled = true
|
||
try {
|
||
await usersDelete([this.pkObj.userId])
|
||
this.toast('操作成功')
|
||
this._usersQuery()
|
||
this.$refs.child.active = false
|
||
this.$refs.child.disabled = false
|
||
} catch (e) {
|
||
this.$refs.child.active = false
|
||
this.$refs.child.disabled = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@style/mixin'
|
||
.grid_wrapper
|
||
height calc(100% - 50px)
|
||
overflow-y auto
|
||
</style>
|