27 changed files with 499 additions and 882 deletions
-
5src/api/login.js
-
9src/api/system/menu.js
-
9src/api/upload/upload.js
-
2src/assets/icons/iconfont.js
-
6src/assets/styles/iconfont.css
-
16src/assets/styles/sidebar.scss
-
2src/assets/styles/variables.scss
-
2src/layout/components/Sidebar/Item.vue
-
19src/layout/components/Sidebar/SidebarItem.vue
-
1src/layout/components/TagsView/index.vue
-
1src/router/index.js
-
107src/router/routers.js
-
7src/store/modules/user.js
-
4src/views/components/MyAlbum.vue
-
3src/views/components/ThemeGalleryList.vue
-
111src/views/components/upload.vue
-
62src/views/content/material/materialList/index.vue
-
2src/views/content/publish/historyList/index.vue
-
9src/views/content/publish/urgentMessage/index.vue
-
1src/views/content/theme/index.vue
-
2src/views/dashboard/HomeThemeGallery.vue
-
7src/views/device/list/index.vue
-
24src/views/forgetPassword/index.vue
-
9src/views/immediateRelease/index.vue
-
4src/views/system/role/index.vue
-
435src/views/system/user/index.vue
-
516src/views/user/menu1.vue
2
src/assets/icons/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,516 +0,0 @@ |
|||||
<template> |
|
||||
<div class="app-container"> |
|
||||
<!--工具栏--> |
|
||||
<div class="head-container"> |
|
||||
<el-row type="flex"> |
|
||||
<el-col :span="20" class="col_flex"> |
|
||||
<!-- 搜索 --> |
|
||||
<div class="form_item"> |
|
||||
<span>角色名称：</span> |
|
||||
<el-input |
|
||||
v-model="query.role_name" |
|
||||
clearable |
|
||||
size="small" |
|
||||
placeholder="角色名称" |
|
||||
style="width: 200px;" |
|
||||
class="filter-item" |
|
||||
@keyup.enter.native="getUserList(page,query.role_name)" |
|
||||
@clear="getUserList(page,query.role_name)" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="form_item"> |
|
||||
<span>管理员名称：</span> |
|
||||
<el-input |
|
||||
v-model="query.nickName" |
|
||||
clearable |
|
||||
size="small" |
|
||||
placeholder="管理员名称" |
|
||||
style="width: 200px;" |
|
||||
class="filter-item" |
|
||||
@keyup.enter.native="getUserList(page,query.nickName)" |
|
||||
@clear="getUserList(page,query.nickName)" |
|
||||
/> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col class="page_add" :span="4"> |
|
||||
<el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
<!--新增用户--> |
|
||||
<el-dialog |
|
||||
append-to-body |
|
||||
:close-on-click-modal="false" |
|
||||
:show-close="false" |
|
||||
:visible.sync="addDialogVisible" |
|
||||
title="新增" |
|
||||
width="576px" |
|
||||
> |
|
||||
<el-form ref="form" :inline="true" :rules="rules" :model="form" size="small" label-width="100px"> |
|
||||
<el-form-item |
|
||||
label="手机号" |
|
||||
prop="username" |
|
||||
> |
|
||||
<el-input v-model="form.username" style="width: 336px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
label="管理员名称" |
|
||||
prop="nickName" |
|
||||
> |
|
||||
<el-input v-model="form.nickName" style="width: 336px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
label="管理员角色" |
|
||||
prop="rolesName" |
|
||||
> |
|
||||
<el-select v-model="form.rolesName" placeholder="请选择管理员角色" style="width: 336px" @change="selectRoles"> |
|
||||
<el-option |
|
||||
v-for="item in roleList" |
|
||||
:key="item.id" |
|
||||
:value="item.name" |
|
||||
:label="item.name" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
label="管理员状态" |
|
||||
prop="enabled" |
|
||||
> |
|
||||
<el-select v-model="form.enabled" placeholder="请选择管理员状态" style="width: 336px"> |
|
||||
<el-option label="启用" value="true" /> |
|
||||
<el-option label="关闭" value="false" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button type="primary" round @click="addUser('form')">保存</el-button> |
|
||||
<el-button round @click="resetForm('form')">关闭</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
<!-- 编辑用户 --> |
|
||||
<el-dialog |
|
||||
append-to-body |
|
||||
:close-on-click-modal="false" |
|
||||
:show-close="false" |
|
||||
:visible.sync="editDialogVisible" |
|
||||
title="编辑" |
|
||||
width="576px" |
|
||||
> |
|
||||
<el-form |
|
||||
ref="editForm" |
|
||||
:inline="true" |
|
||||
:model="editForm" |
|
||||
:rules="rules" |
|
||||
size="small" |
|
||||
label-width="100px" |
|
||||
> |
|
||||
<el-form-item label="管理员名称" prop="nickName"> |
|
||||
<el-input v-model="editForm.nickName" style="width: 336px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="管理员角色" prop="rolesName"> |
|
||||
<el-input v-model="editForm.rolesName" disabled style="width: 336px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="机构名称" prop="orgName"> |
|
||||
<el-input v-model="editForm.orgName" disabled style="width: 336px" /> |
|
||||
</el-form-item> |
|
||||
<!-- <el-form-item |
|
||||
label="管理员状态" |
|
||||
prop="enabled" |
|
||||
> |
|
||||
<el-select v-model="editForm.enabled" placeholder="请选择管理员状态" @change="selectEnabled"> |
|
||||
<el-option label="启用" value="true" /> |
|
||||
<el-option label="关闭" value="false" /> |
|
||||
</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 label="登录账号" prop="phone"> |
|
||||
<el-input v-model.number="editForm.phone" disabled style="width: 336px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="登录密码" prop="password"> |
|
||||
<el-input v-model="editForm.password" style="width: 336px" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button type="primary" round @click="editUser('editForm')">保存</el-button> |
|
||||
<el-button round @click="resetForm('editForm')">关闭</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
<!--表格渲染--> |
|
||||
<el-row :gutter="15"> |
|
||||
<el-col> |
|
||||
<el-table |
|
||||
ref="table" |
|
||||
:data="userList" |
|
||||
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }" |
|
||||
style="width: 100%;" |
|
||||
> |
|
||||
<el-table-column :selectable="checkboxT" type="selection" width="55" /> |
|
||||
<el-table-column prop="username" width="135" align="center" label="登录账号" /> |
|
||||
<el-table-column prop="nickName" align="center" label="管理员名称" /> |
|
||||
<el-table-column prop="roles" align="center" label="管理角色"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-for="(item,index) in scope.row.roles" :key="index"> |
|
||||
<div>{{ item.name }}</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="org" align="center" label="机构名称"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div>{{ scope.row.org ? scope.row.org.name : '' }}</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="phone" align="center" label="手机号码" /> |
|
||||
<el-table-column label="状态" align="center" prop="enabled"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div>{{ scope.row.enabled ? '启用' : '关闭' }}</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="createTime" width="155" align="center" label="创建日期"> |
|
||||
<template slot-scope="{row}"> |
|
||||
<div>{{ row.createTime | parseTime }}</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- v-if="checkPer(['admin','user:edit','user:del'])" --> |
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-button |
|
||||
type="primary" |
|
||||
class="edit_btn" |
|
||||
@click="editFormData(scope.$index, scope.row)" |
|
||||
>编辑</el-button> |
|
||||
<el-button |
|
||||
type="danger" |
|
||||
class="delt_btn" |
|
||||
:disabled="scope.row.id === user.id" |
|
||||
@click="deleteUser(scope.row)" |
|
||||
>删除</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<!--分页组件--> |
|
||||
<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="getUserList" @size-change="handleSizeChange" /> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchUserList, FetchAddUser, FetchDeleteUser, FetchEditUser } from '@/api/system/user' |
|
||||
import { FetchDropDownList } from '@/api/system/role' |
|
||||
// import { FetchCodeMsg } from '@/api/login' |
|
||||
import { isvalidPhone } from '@/utils/validate' |
|
||||
import { parseTime } from '@/utils/index.js' |
|
||||
import { mapGetters } from 'vuex' |
|
||||
export default { |
|
||||
name: 'User', |
|
||||
filters: { |
|
||||
parseTime(time, cFormat) { |
|
||||
return parseTime(time, cFormat) |
|
||||
} |
|
||||
}, |
|
||||
components: { }, |
|
||||
// 数据字典 |
|
||||
data() { |
|
||||
// 自定义验证 |
|
||||
const validPhone = (rule, value, callback) => { |
|
||||
if (!value) { |
|
||||
callback(new Error('请输入手机号码')) |
|
||||
} else if (!isvalidPhone(value)) { |
|
||||
callback(new Error('请输入正确的11位手机号码')) |
|
||||
} else { |
|
||||
callback() |
|
||||
} |
|
||||
} |
|
||||
return { |
|
||||
// 用户管理 list |
|
||||
userList: [], |
|
||||
total: 0, |
|
||||
page: 1, |
|
||||
size: 10, |
|
||||
// 角色 list |
|
||||
roleList: [], |
|
||||
// 搜索 |
|
||||
query: { |
|
||||
role_name: '', |
|
||||
nickName: '' |
|
||||
}, |
|
||||
// 新增form |
|
||||
addDialogVisible: false, |
|
||||
form: { |
|
||||
username: null, |
|
||||
nickName: '', |
|
||||
roles: [], |
|
||||
rolesName: '', |
|
||||
enabled: null, |
|
||||
org: null, |
|
||||
phone: null |
|
||||
}, |
|
||||
// 编辑 |
|
||||
editDialogVisible: false, |
|
||||
editForm: { |
|
||||
id: null, |
|
||||
nickName: '', |
|
||||
roles: [], |
|
||||
rolesName: '', |
|
||||
org: '', |
|
||||
orgName: null, |
|
||||
username: null, |
|
||||
phone: '', |
|
||||
password: '', |
|
||||
enabled: null, |
|
||||
enabledName: null |
|
||||
}, |
|
||||
enabledData: [{ key: 'true', name: '开启' }, { key: 'false', name: '关闭' }], |
|
||||
// 表单验证 |
|
||||
rules: { |
|
||||
nickName: [ |
|
||||
{ required: true, message: '请输入管理员名称', trigger: 'blur' }, |
|
||||
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' } |
|
||||
], |
|
||||
phone: [ |
|
||||
{ required: true, trigger: 'blur', validator: validPhone } |
|
||||
], |
|
||||
code: [ |
|
||||
{ required: true, trigger: 'blur', message: '请输入验证码' } |
|
||||
], |
|
||||
password: [ |
|
||||
{ required: true, trigger: 'blur', message: '请输入密码' } |
|
||||
], |
|
||||
username: [ |
|
||||
{ required: true, trigger: 'blur', validator: validPhone } |
|
||||
], |
|
||||
rolesName: [ |
|
||||
{ required: true, message: '请选择管理员角色', trigger: 'change' } |
|
||||
], |
|
||||
enabled: [ |
|
||||
{ required: true, trigger: 'change', message: '请选择管理员状态' } |
|
||||
], |
|
||||
enabledName: [ |
|
||||
{ required: true, trigger: 'change', message: '请选择管理员状态' } |
|
||||
], |
|
||||
orgName: [ |
|
||||
{ required: true, trigger: 'blur', message: '请输入机构名称' } |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapGetters([ |
|
||||
'user' |
|
||||
]) |
|
||||
}, |
|
||||
mounted: function() { |
|
||||
this.getUserList() |
|
||||
this.getDropdownList() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 获取用户列表的数据 |
|
||||
getUserList(pager = 1, name) { |
|
||||
this.page = pager |
|
||||
const param = { |
|
||||
page: this.page, |
|
||||
size: this.size, |
|
||||
blurry: name |
|
||||
} |
|
||||
FetchUserList(param).then(res => { |
|
||||
if (res.code == 200) { |
|
||||
this.userList = res.data.content |
|
||||
this.total = res.data.totalElements |
|
||||
// this.size = res.data.size |
|
||||
} else { |
|
||||
return this.$message.error('获取用户列表数据失败！') |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 每条显示数据改变时的事件 |
|
||||
handleSizeChange(size) { |
|
||||
// 整理参数 |
|
||||
this.size = size |
|
||||
this.getUserList() |
|
||||
}, |
|
||||
// 获取角色list |
|
||||
getDropdownList() { |
|
||||
const param = { |
|
||||
} |
|
||||
FetchDropDownList(param).then(res => { |
|
||||
if (res.code == 200) { |
|
||||
this.roleList = res.data |
|
||||
} else { |
|
||||
return this.$message.error('获取角色下拉列表数据失败！') |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 添加用户 |
|
||||
addEditUser(formName) { |
|
||||
this.$refs[formName].validate(valid => { |
|
||||
if (valid) { |
|
||||
if (this.user) { |
|
||||
this.form.org = this.user.org |
|
||||
} |
|
||||
if (this.form.username) { |
|
||||
this.form.phone = this.form.username |
|
||||
} |
|
||||
const param = this.form |
|
||||
delete param.rolesName |
|
||||
FetchAddUser(param).then(res => { |
|
||||
if (res.code == 200) { |
|
||||
this.$message.success('用户创建成功') |
|
||||
this.addDialogVisible = false |
|
||||
this.getUserList(this.page) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}) |
|
||||
} else { |
|
||||
console.log('error submit!!') |
|
||||
return false |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 删除数组 |
|
||||
deleteUser(row) { |
|
||||
const param = [] |
|
||||
param.push(row.id) |
|
||||
this.$confirm('你确定要删除该用户, 是否继续?', '提示', { |
|
||||
confirmButtonText: '确定', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning' |
|
||||
}).then(() => { |
|
||||
FetchDeleteUser(param).then(res => { |
|
||||
if (res.code == 200) { |
|
||||
this.$message.success('用户删除成功 ！') |
|
||||
this.getUserList(this.page) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}) |
|
||||
}).catch(() => { |
|
||||
this.$message({ type: 'success', message: '已取消删除' }) |
|
||||
}) |
|
||||
}, |
|
||||
// select - 角色 |
|
||||
selectRoles(vId) { |
|
||||
let obj = {} |
|
||||
obj = this.roleList.find((item) => { |
|
||||
return item.name === vId |
|
||||
}) |
|
||||
obj.description = '全部' |
|
||||
this.form.rolesName = obj.name |
|
||||
this.form.roles.push(obj) |
|
||||
}, |
|
||||
// 选择设备方向处理 |
|
||||
selectEnabled(selVal) { |
|
||||
this.editForm.enabled = selVal.key |
|
||||
this.editForm.enabledName = selVal.name |
|
||||
}, |
|
||||
// 当前用户项不可选中 |
|
||||
checkboxT(row, rowIndex) { |
|
||||
return row.id !== this.user.id |
|
||||
}, |
|
||||
// 编辑 |
|
||||
editFormData(index, row) { |
|
||||
console.log(row) |
|
||||
this.editDialogVisible = true |
|
||||
this.editForm.nickName = row.nickName |
|
||||
this.editForm.id = row.id |
|
||||
if (row.roles) { |
|
||||
row.roles.forEach(item => { |
|
||||
this.editForm.rolesName = item.name |
|
||||
item.description = '全部' |
|
||||
this.editForm.roles.push(item) |
|
||||
}) |
|
||||
} |
|
||||
if (row.org) { |
|
||||
this.editForm.orgName = row.org.name |
|
||||
this.editForm.org = row.org |
|
||||
} |
|
||||
this.editForm.phone = row.phone |
|
||||
this.editForm.username = row.username |
|
||||
this.editForm.enabledName = row.enabled ? '开启' : '关闭' |
|
||||
this.editForm.enabled = row.enabled |
|
||||
}, |
|
||||
// 编辑用户 - 提交 |
|
||||
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) { |
|
||||
this.$message.success('该用户编辑成功') |
|
||||
this.editDialogVisible = false |
|
||||
this.getUserList(this.page) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}) |
|
||||
} else { |
|
||||
console.log('error submit!!') |
|
||||
return false |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// // 获取验证码 |
|
||||
// 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) { |
|
||||
this.addDialogVisible = false |
|
||||
this.editDialogVisible = false |
|
||||
this.$refs[formName].resetFields() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
|
||||
.el-dialog__header { |
|
||||
background-color: #f1f1f1; |
|
||||
} |
|
||||
.edit_code { |
|
||||
margin-left: 20px; |
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue