xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

用户管理/角色管理

dev
xuhuajiao 4 years ago
parent
5c0ea1e2eb
commit
7e3cc4432b
4 changed files with 181 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/api/system/role.js
  2. 9
      src/api/system/user.js
  3. 83
      src/views/system/role/index.vue
  4. 159
      src/views/user/menu1.vue

11
src/api/system/role.js
View File

@ -1,6 +1,6 @@
import request from '@/utils/request' import request from '@/utils/request'
// 获取角色列表
// 获取角色下拉列表 - 新增用户
export function FetchDropDownList(parameter) { export function FetchDropDownList(parameter) {
return request({ return request({
url: 'api/roles/dropdown/list', url: 'api/roles/dropdown/list',
@ -9,6 +9,15 @@ export function FetchDropDownList(parameter) {
}) })
} }
// 获取角色列表
export function FetchRolesList(parameter) {
return request({
url: 'api/roles/list',
method: 'get',
params: parameter
})
}
// 获取所有的Role // 获取所有的Role
export function getAll() { export function getAll() {
return request({ return request({

9
src/api/system/user.js
View File

@ -28,6 +28,15 @@ export function FetchDeleteUser(parameter) {
}) })
} }
// 编辑用户
export function FetchEditUser(parameter) {
return request({
url: 'api/users/edit',
method: 'put',
data: parameter
})
}
export function add(data) { export function add(data) {
return request({ return request({
url: 'api/users', url: 'api/users',

83
src/views/system/role/index.vue
View File

@ -8,16 +8,15 @@
<div class="form_item"> <div class="form_item">
<span>角色名称：</span> <span>角色名称：</span>
<el-input <el-input
v-model="query.blurry"
v-model="blurry"
clearable clearable
size="small" size="small"
placeholder="角色名称" placeholder="角色名称"
style="width: 200px;" style="width: 200px;"
class="filter-item" class="filter-item"
@keyup.enter.native="crud.toQuery"
@keyup.enter.native="getRolesList(pager = 1, blurry)"
/> />
</div> </div>
<rrOperation />
</el-col> </el-col>
<el-col class="page_add" :span="4"> <el-col class="page_add" :span="4">
<el-button class="table_add" type="primary" round @click="roleFormVisible = true">新增</el-button> <el-button class="table_add" type="primary" round @click="roleFormVisible = true">新增</el-button>
@ -30,7 +29,6 @@
:close-on-click-modal="false" :close-on-click-modal="false"
:show-close="false" :show-close="false"
:visible.sync="roleFormVisible" :visible.sync="roleFormVisible"
:title="crud.status.title"
width="960px" width="960px"
top="20px" top="20px"
> >
@ -72,7 +70,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">新增</el-button>
<el-button type="primary" round>新增</el-button>
<el-button round @click="roleFormVisible=false">关闭</el-button> <el-button round @click="roleFormVisible=false">关闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -98,24 +96,30 @@
<el-col> <el-col>
<el-table <el-table
ref="table" ref="table"
v-loading="crud.loading"
highlight-current-row highlight-current-row
style="width: 100%;" style="width: 100%;"
:data="roleData"
:data="roleList"
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
@selection-change="crud.selectionChangeHandler"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
> >
<el-table-column :selectable="checkboxT" align="center" type="selection" width="55" />
<el-table-column align="center" prop="roleName" label="角色名称" />
<!-- :selectable="checkboxT" -->
<el-table-column align="center" type="selection" width="55" />
<el-table-column align="center" prop="name" label="角色名称" />
<el-table-column align="center" prop="description" label="描述" /> <el-table-column align="center" prop="description" label="描述" />
<el-table-column header-align="center" width="700" prop="permissionList" label="相关权限">
<el-table-column header-align="center" width="700" prop="menus" label="相关权限">
<template slot-scope="scope"> <template slot-scope="scope">
<div
v-for="tag in scope.row.menus"
:key="tag.id"
style="display: inline-block"
>
<el-tag <el-tag
v-for="tag in scope.row.permissionList"
:key="tag.name"
v-if="tag.type != 2"
type="primary" type="primary"
>{{ tag.name }}</el-tag>
>
{{ tag.label }}
</el-tag>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="120" align="center" fixed="right"> <el-table-column label="操作" width="120" align="center" fixed="right">
@ -134,36 +138,33 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--分页组件--> <!--分页组件-->
<pagination />
<el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getRolesList" @size-change="handleSizeChange" />
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import crudRoles from '@/api/system/role'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import { FetchRolesList } from '@/api/system/role'
import roleTree from './role.json' import roleTree from './role.json'
const defaultForm = {
export default {
name: 'Role',
components: { },
data() {
return {
roleList: [],
page: 1,
size: 10,
blurry: null,
form: {
id: null, id: null,
roleName: null, roleName: null,
permissionAll: [], permissionAll: [],
library: [], library: [],
publish: [], publish: [],
description: null description: null
}
export default {
name: 'Role',
components: { pagination, rrOperation },
cruds() {
return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
}, },
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
return {
roleFormVisible: false, roleFormVisible: false,
recordVisible: false, recordVisible: false,
permission: { permission: {
@ -210,7 +211,31 @@ export default {
created() { created() {
this.roleTree = roleTree this.roleTree = roleTree
}, },
mounted: function() {
this.getRolesList()
},
methods: { methods: {
getRolesList(pager = 1, name) {
const param = {
page: this.page,
size: this.size,
blurry: name
}
FetchRolesList(param).then(res => {
if (res.code == 200) {
this.roleList = res.data.content
this.total = res.data.totalElements
} else {
return this.$message.error('获取角色列表数据失败！')
}
})
},
// 每条显示数据改变时的事件
handleSizeChange(size) {
// 整理参数
this.size = size
this.getRolesList()
},
// 全选反选的多选框 // 全选反选的多选框
handleCheckAllChange(index, e) { handleCheckAllChange(index, e) {
this.roleTree[index].isCheck = e this.roleTree[index].isCheck = e

159
src/views/user/menu1.vue
View File

@ -107,36 +107,35 @@
<el-form-item label="管理员名称" prop="nickName"> <el-form-item label="管理员名称" prop="nickName">
<el-input v-model="editForm.nickName" style="width: 336px" /> <el-input v-model="editForm.nickName" style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item label="管理员角色" prop="roles">
<el-input v-model="editForm.roles" disabled style="width: 336px" />
<el-form-item label="管理员角色" prop="rolesName">
<el-input v-model="editForm.rolesName" disabled style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item label="机构名称" prop="orgName"> <el-form-item label="机构名称" prop="orgName">
<el-input v-model="editForm.orgName" disabled style="width: 336px" /> <el-input v-model="editForm.orgName" disabled style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item
<!-- <el-form-item
label="管理员状态" label="管理员状态"
prop="enabled" prop="enabled"
> >
<el-select v-model="editForm.enabled" placeholder="请选择管理员状态" style="width: 336px">
<el-select v-model="editForm.enabled" placeholder="请选择管理员状态" @change="selectEnabled">
<el-option label="启用" value="true" /> <el-option label="启用" value="true" />
<el-option label="关闭" value="false" /> <el-option label="关闭" value="false" />
</el-select> </el-select>
</el-form-item> -->
<el-form-item label="管理员状态" prop="enabledName">
<el-select v-model="editForm.enabledName" style="width: 336px" @change="selectEnabled">
<el-option v-for="item in enabledData" :key="item.key" :label="item.name" :value="item" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="更改手机号" prop="phone">
<el-input v-model.number="editForm.phone" style="width: 336px" />
</el-form-item>
<el-form-item label="验证码" prop="code" class="auth_code">
<el-input v-model.number="editForm.code" style="width: 336px" />
<div class="login-code">
<span @click="countdown()">{{ verification }}</span>
</div>
<el-form-item label="登录账号" prop="phone">
<el-input v-model.number="editForm.phone" disabled style="width: 336px" />
</el-form-item> </el-form-item>
<el-form-item label="登录密码" prop="password"> <el-form-item label="登录密码" prop="password">
<el-input v-model="editForm.password" style="width: 336px" /> <el-input v-model="editForm.password" style="width: 336px" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" round>保存</el-button>
<el-button type="primary" round @click="editUser('editForm')">保存</el-button>
<el-button round @click="resetForm('editForm')">关闭</el-button> <el-button round @click="resetForm('editForm')">关闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -200,9 +199,9 @@
</template> </template>
<script> <script>
import { FetchUserList, FetchAddUser, FetchDeleteUser } from '@/api/system/user'
import { FetchUserList, FetchAddUser, FetchDeleteUser, FetchEditUser } from '@/api/system/user'
import { FetchDropDownList } from '@/api/system/role' import { FetchDropDownList } from '@/api/system/role'
import { FetchCodeMsg } from '@/api/login'
// import { FetchCodeMsg } from '@/api/login'
import { isvalidPhone } from '@/utils/validate' import { isvalidPhone } from '@/utils/validate'
import { parseTime } from '@/utils/index.js' import { parseTime } from '@/utils/index.js'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
@ -253,18 +252,19 @@ export default {
// 编辑 // 编辑
editDialogVisible: false, editDialogVisible: false,
editForm: { editForm: {
id: null,
nickName: '', nickName: '',
roles: '',
orgName: '',
roles: [],
rolesName: '',
org: '',
orgName: null,
username: null,
phone: '', phone: '',
code: '',
password: '', password: '',
enabled: null
enabled: null,
enabledName: null
}, },
// 编辑 - 手机号验证
disabledSendCode: false,
verification: '获取验证码',
countNum: 60,
enabledData: [{ key: 'true', name: '开启' }, { key: 'false', name: '关闭' }],
// 表单验证 // 表单验证
rules: { rules: {
nickName: [ nickName: [
@ -288,6 +288,12 @@ export default {
], ],
enabled: [ enabled: [
{ required: true, trigger: 'change', message: '请选择管理员状态' } { required: true, trigger: 'change', message: '请选择管理员状态' }
],
enabledName: [
{ required: true, trigger: 'change', message: '请选择管理员状态' }
],
orgName: [
{ required: true, trigger: 'blur', message: '请输入机构名称' }
] ]
} }
} }
@ -339,7 +345,7 @@ export default {
}) })
}, },
// 添加用户 // 添加用户
addUser(formName) {
addEditUser(formName) {
this.$refs[formName].validate(valid => { this.$refs[formName].validate(valid => {
if (valid) { if (valid) {
if (this.user) { if (this.user) {
@ -350,8 +356,6 @@ export default {
} }
const param = this.form const param = this.form
delete param.rolesName delete param.rolesName
console.log(param)
console.log('param')
FetchAddUser(param).then(res => { FetchAddUser(param).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.$message.success('用户创建成功') this.$message.success('用户创建成功')
@ -398,63 +402,100 @@ export default {
this.form.rolesName = obj.name this.form.rolesName = obj.name
this.form.roles.push(obj) this.form.roles.push(obj)
}, },
// 选择设备方向处理
selectEnabled(selVal) {
this.editForm.enabled = selVal.key
this.editForm.enabledName = selVal.name
},
// 当前用户项不可选中 // 当前用户项不可选中
checkboxT(row, rowIndex) { checkboxT(row, rowIndex) {
return row.id !== this.user.id return row.id !== this.user.id
}, },
// 编辑 // 编辑
editFormData(index, row) { editFormData(index, row) {
console.log(row)
this.editDialogVisible = true this.editDialogVisible = true
this.editForm.nickName = row.nickName this.editForm.nickName = row.nickName
this.editForm.id = row.id
if (row.roles) { if (row.roles) {
row.roles.forEach(item => { row.roles.forEach(item => {
this.editForm.roles = item.name
this.editForm.rolesName = item.name
item.description = '全部'
this.editForm.roles.push(item)
}) })
} }
if (row.org) { if (row.org) {
this.editForm.orgName = row.org.name this.editForm.orgName = row.org.name
this.editForm.org = row.org
} }
this.editForm.phone = row.phone this.editForm.phone = row.phone
this.editForm.enabled = row.enabled ? '开启' : '关闭'
this.editForm.username = row.username
this.editForm.enabledName = row.enabled ? '开启' : '关闭'
this.editForm.enabled = row.enabled
}, },
// 获取验证码
getAuthCode() {
const param = {
phone: this.editForm.phone
}
FetchCodeMsg(param).then(res => {
// 编辑用户 - 提交
editUser(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const param = this.editForm
delete param.rolesName
delete param.enabledName
delete param.orgName
console.log(param)
console.log('param')
FetchEditUser(param).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.countdown()
this.$message.success('该用户编辑成功')
this.editDialogVisible = false
this.getUserList(this.page)
} else { } else {
this.$message.error(res.msg) this.$message.error(res.msg)
} }
}).catch(res => {
console.log(res)
}) })
},
// 短信验证码倒计时
countdown() {
if (this.disabledSendCode) {
return
}
if (!/^1\d{10}$/.test(this.editForm.phone)) {
this.$message.error('手机号错误，请重新输入')
return
}
this.getAuthCode()
this.disabledSendCode = true
this.countNum = 60
const timer = setInterval(() => {
this.verification = this.countNum + '重新获取'
this.countNum -= 1
if (this.countNum < 1) {
clearInterval(timer)
this.verification = '重新获取'
this.disabledSendCode = false
console.log('倒计时结束')
} else {
console.log('error submit!!')
return false
} }
}, 1000)
})
}, },
// // 获取验证码
// getAuthCode() {
// const param = {
// phone: this.editForm.phone
// }
// FetchCodeMsg(param).then(res => {
// if (res.code == 200) {
// this.countdown()
// } else {
// this.$message.error(res.msg)
// }
// }).catch(res => {
// console.log(res)
// })
// },
// // 短信验证码倒计时
// countdown() {
// if (this.disabledSendCode) {
// return
// }
// if (!/^1\d{10}$/.test(this.editForm.phone)) {
// this.$message.error('手机号错误，请重新输入')
// return
// }
// this.getAuthCode()
// this.disabledSendCode = true
// this.countNum = 60
// const timer = setInterval(() => {
// this.verification = this.countNum + '重新获取'
// this.countNum -= 1
// if (this.countNum < 1) {
// clearInterval(timer)
// this.verification = '重新获取'
// this.disabledSendCode = false
// console.log('倒计时结束')
// }
// }, 1000)
// },
// 重置表单数据 // 重置表单数据
resetForm(formName) { resetForm(formName) {
this.addDialogVisible = false this.addDialogVisible = false

Write Preview
Loading…
Cancel
Save