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
-
109src/router/routers.js
-
9src/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
-
437src/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