35 changed files with 2656 additions and 720 deletions
@ -0,0 +1,21 @@ |
|||||
|
import Oidc from "oidc-client"; |
||||
|
|
||||
|
export const identityServerBase = localStorage.getItem('oidcLogin_url');//目标服务器登录地址
|
||||
|
export const vueBase = window.location.origin |
||||
|
|
||||
|
// 参考文档 https://github.com/IdentityModel/oidc-client-js/wiki
|
||||
|
export const mgr = new Oidc.UserManager({ |
||||
|
authority: `${identityServerBase}`, // 认证服务器
|
||||
|
client_id: localStorage.getItem('oidcLogin_clientId'), // 表示客户端的ID，必选项
|
||||
|
redirect_uri: `${vueBase}/callback`,// 表示重定向URI，认证服务器回调的客户端页面。可选项
|
||||
|
response_type: `code`, |
||||
|
scope: localStorage.getItem('oidcLogin_scopes'), // 表示申请的权限范围，可选项
|
||||
|
post_logout_redirect_uri: `${vueBase}/home?action=logout`, |
||||
|
automaticSilentRenew: false, |
||||
|
|
||||
|
// accessTokenExpiringNotificationTime: 10,
|
||||
|
// filterProtocolClaims: false,
|
||||
|
// loadUserInfo: true,
|
||||
|
// monitorSession: false,
|
||||
|
// includeIdTokenInSilentRenew : false,
|
||||
|
}); |
||||
@ -0,0 +1,25 @@ |
|||||
|
<template> |
||||
|
<!-- callback.vue（单点登录成功的回调页面） --> |
||||
|
<div |
||||
|
style="height: 100vh;" |
||||
|
v-loading="loading" |
||||
|
element-loading-text="正在加载中" |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
></div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:'callback', |
||||
|
data() { |
||||
|
return { |
||||
|
loading:true |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.$store.dispatch("user/loginBySignin").then(()=>{ |
||||
|
this.$router.push("/"); |
||||
|
}) |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,548 @@ |
|||||
|
<template> |
||||
|
<div class="appMainPage"> |
||||
|
<el-row :gutter="24"> |
||||
|
<el-col :md="16" style="margin-bottom: 10px"> |
||||
|
<div class="main"> |
||||
|
<div class="table-active"> |
||||
|
<div class="bttton-box"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-plus" |
||||
|
@click="handleCreate" |
||||
|
size="mini" |
||||
|
v-permission="['AbpIdentity.Roles.Create']" |
||||
|
>创建角色</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
icon="el-icon-refresh" |
||||
|
@click.native.prevent="Createview" |
||||
|
size="mini" |
||||
|
>刷新</el-button |
||||
|
> |
||||
|
</div> |
||||
|
<div class="query-box"> |
||||
|
<!-- 搜索 --> |
||||
|
<searchNormal |
||||
|
ref="normalSearch_roleManage" |
||||
|
@searchNormalClick="filtrate" |
||||
|
@searchNormalClear="filtrate" |
||||
|
></searchNormal> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-table |
||||
|
v-loading="tableLoading" |
||||
|
:border="true" |
||||
|
ref="multipleTable" |
||||
|
:data="tableData" |
||||
|
height="calc(100vh - 265px)" |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortChange" |
||||
|
@row-click="handleRowClick" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="角色名" |
||||
|
sortable="custom" |
||||
|
:align="'left'" |
||||
|
/> |
||||
|
<el-table-column label="操作" :align="'center'" width="150"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="Update(scope.row)" |
||||
|
v-permission="['AbpIdentity.Roles.Update']" |
||||
|
v-if="scope.row.name == 'admin' ? false : true" |
||||
|
>编辑</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="Delete(scope.row)" |
||||
|
v-permission="['AbpIdentity.Roles.Delete']" |
||||
|
v-if="scope.row.name == 'admin' ? false : true" |
||||
|
style="color:red" |
||||
|
>删除</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="Footer"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page="queryInfo.currentPage" |
||||
|
:page-sizes="[10, 15, 20]" |
||||
|
:page-size="queryInfo.pagesize" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="total" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
style="margin-left: 10px; background-color: #409eff" |
||||
|
>确定</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col |
||||
|
v-loading="treeLoading" |
||||
|
:md="8" |
||||
|
v-permission="['AbpIdentity.Roles.Update']" |
||||
|
> |
||||
|
<el-card class="box-card" shadow="never"> |
||||
|
<div slot="header" class="clearfix" style="height: 20px"> |
||||
|
<el-tooltip |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="选择指定角色的模块权限" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span class="role-span">【{{name}}角色】模块权限</span> |
||||
|
</el-tooltip> |
||||
|
<el-button |
||||
|
:loading="treeLoading" |
||||
|
:disabled="multipleSelection.length != 1" |
||||
|
icon="el-icon-check" |
||||
|
size="mini" |
||||
|
style="float: right; padding: 6px 9px" |
||||
|
type="primary" |
||||
|
@click="savePer" |
||||
|
v-permission="['AbpIdentity.Roles.ManagePermissions']" |
||||
|
v-if="name != 'admin'" |
||||
|
>保存</el-button> |
||||
|
</div> |
||||
|
<el-tree |
||||
|
ref="tree" |
||||
|
:check-strictly="false" |
||||
|
:data="permissionsData" |
||||
|
:props="defaultProps" |
||||
|
show-checkbox |
||||
|
node-key="name" |
||||
|
class="permission-tree" |
||||
|
/> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-dialog |
||||
|
:title="formTitle" |
||||
|
:visible.sync="dialogVisible" |
||||
|
width="800px" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="form" |
||||
|
:model="form" |
||||
|
label-width="70px" |
||||
|
:rules="rules" |
||||
|
> |
||||
|
<el-form-item label="名称" prop="name"> |
||||
|
<el-input v-model="form.name" style="width: 380px" maxlength="23" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="resetform">取 消</el-button> |
||||
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { |
||||
|
getPageListRoles, |
||||
|
getPermissionsRoles, |
||||
|
savePermissionsRoles, |
||||
|
updatePermissionsGranted, |
||||
|
postCreateRoles, |
||||
|
postUpdateRoles, |
||||
|
postDeleteRoles, |
||||
|
} from "@/api/wms-auth"; |
||||
|
import permission from "@/utils/permission/index"; |
||||
|
import searchNormal from "@/components/searchNormal/index.vue" |
||||
|
export default { |
||||
|
directives: { permission }, |
||||
|
components:{ |
||||
|
searchNormal |
||||
|
}, |
||||
|
name:"AbpIdentityMarkRoles", |
||||
|
data() { |
||||
|
// 自定义验证 |
||||
|
return { |
||||
|
URL: 'identity/roles', |
||||
|
// 角色名称 |
||||
|
name: '', |
||||
|
//编辑弹出 |
||||
|
dialogVisible: false, |
||||
|
//创建与编辑判断 |
||||
|
isEdit: false, |
||||
|
//弹出title |
||||
|
formTitle: "", |
||||
|
//总条数 |
||||
|
total: 0, |
||||
|
//分页器 |
||||
|
queryInfo: { |
||||
|
//当前页数 |
||||
|
currentPage: 1, |
||||
|
//每页条数 |
||||
|
pagesize: 20, |
||||
|
Sorting: "", |
||||
|
}, |
||||
|
//当前用户ID |
||||
|
usersId: "", |
||||
|
//编辑参数 |
||||
|
concurrencyStamp: "", |
||||
|
//新增参数 |
||||
|
form: { |
||||
|
name: "", |
||||
|
isDefault: true, |
||||
|
isPublic: true, |
||||
|
}, |
||||
|
// 左侧table加载 |
||||
|
tableLoading:false, |
||||
|
//权限模板树形控件加载 |
||||
|
treeLoading: false, |
||||
|
//权限模板树形控件默认勾选的数组 |
||||
|
checkedPermission: [], |
||||
|
//权限模板树形结构渲染数据 |
||||
|
permissionsData: [], |
||||
|
defaultProps: { |
||||
|
children: "children", |
||||
|
label: "displayName", |
||||
|
}, |
||||
|
//渲染权限模板参数 |
||||
|
params: { |
||||
|
providerName: "R", |
||||
|
providerKey: "", |
||||
|
}, |
||||
|
//选择行数据 |
||||
|
multipleSelection: [], |
||||
|
//table渲染 |
||||
|
tableData: [], |
||||
|
rules: { |
||||
|
name: [ |
||||
|
{ required: true, trigger: "blur", message: "请输入姓名" }, |
||||
|
{ |
||||
|
min: 1, |
||||
|
max: 23, |
||||
|
message: "长度在 1 到 23 个字符", |
||||
|
trigger: "blur", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.pageList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
//请求数据渲染table |
||||
|
pageList(val) { |
||||
|
const data = { |
||||
|
Filter: val || '', |
||||
|
Sorting: this.queryInfo.Sorting, |
||||
|
SkipCount: (this.queryInfo.currentPage - 1) * this.queryInfo.pagesize, |
||||
|
MaxResultCount: this.queryInfo.pagesize, |
||||
|
}; |
||||
|
this.tableLoading = true |
||||
|
getPageListRoles(data).then((res) => { |
||||
|
this.total = res.totalCount; |
||||
|
this.tableData = res.items; |
||||
|
this.tableLoading = false |
||||
|
}).catch(err=>{ |
||||
|
console.log(err) |
||||
|
this.tableLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
//排序 |
||||
|
sortChange(data) { |
||||
|
const { prop, order } = data; |
||||
|
if (!prop || !order) { |
||||
|
this.queryInfo.Sorting = ""; |
||||
|
this.handleFilter(); |
||||
|
return; |
||||
|
} |
||||
|
this.queryInfo.Sorting = prop + " " + order; |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
//排序触发页面更新 |
||||
|
handleFilter() { |
||||
|
this.queryInfo.currentPage = 1; |
||||
|
this.pageList(); |
||||
|
}, |
||||
|
//筛选 |
||||
|
filtrate(val) { |
||||
|
this.queryInfo.currentPage = 1; |
||||
|
this.pageList(val); |
||||
|
}, |
||||
|
//选择每页条数分页 |
||||
|
handleSizeChange(val) { |
||||
|
this.queryInfo.pagesize = val; |
||||
|
this.pageList(); |
||||
|
}, |
||||
|
//选择当前页分页 |
||||
|
handleCurrentChange(val) { |
||||
|
this.queryInfo.currentPage = val; |
||||
|
this.pageList(); |
||||
|
}, |
||||
|
//重置创建与编辑后的参数 |
||||
|
resetform() { |
||||
|
this.$refs.form.resetFields(); |
||||
|
this.dialogVisible = false; |
||||
|
this.form.name = ""; |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
}, |
||||
|
//创建角色 |
||||
|
handleCreate() { |
||||
|
this.formTitle = "创建角色"; |
||||
|
this.dialogVisible = true; |
||||
|
this.isEdit = false; |
||||
|
}, |
||||
|
//刷新 |
||||
|
Createview() { |
||||
|
this.queryInfo.currentPage = 1; |
||||
|
this.queryInfo.Sorting = ""; |
||||
|
this.$refs.normalSearch_roleManage.searchNormalClear()//清空搜索 |
||||
|
this.$refs.multipleTable.clearSort(); |
||||
|
}, |
||||
|
//编辑默认参数 |
||||
|
Update(row) { |
||||
|
if (row) { |
||||
|
this.formTitle = "编辑角色"; |
||||
|
this.dialogVisible = true; |
||||
|
this.isEdit = true; |
||||
|
this.usersId = row.id; |
||||
|
this.form.name = row.name; |
||||
|
this.concurrencyStamp = row.concurrencyStamp; |
||||
|
} |
||||
|
}, |
||||
|
//删除 |
||||
|
Delete(row) { |
||||
|
this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
}) |
||||
|
.then(() => { |
||||
|
if (this.tableData.length == 1) { |
||||
|
this.queryInfo.currentPage = this.queryInfo.currentPage - 1; |
||||
|
} |
||||
|
postDeleteRoles(row.id).then((res) => { |
||||
|
this.$successMsg("删除成功！"); |
||||
|
this.pageList(); |
||||
|
this.permissionsData = [] |
||||
|
}); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
//创建与编辑 |
||||
|
submitForm() { |
||||
|
this.$refs.form.validate((valid) => { |
||||
|
//创建报表组 |
||||
|
if (valid && !this.isEdit) { |
||||
|
postCreateRoles(this.form) |
||||
|
.then((res) => { |
||||
|
this.resetform(); |
||||
|
this.$successMsg("创建成功！"); |
||||
|
this.queryInfo.currentPage = 1; |
||||
|
this.pageList(); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
this.resetform(); |
||||
|
}); |
||||
|
} else if (valid && this.isEdit) { |
||||
|
//编辑报表 |
||||
|
const data = JSON.parse(JSON.stringify(this.form)); |
||||
|
data.concurrencyStamp = this.concurrencyStamp; |
||||
|
postUpdateRoles(data, this.usersId) |
||||
|
.then((res) => { |
||||
|
this.$successMsg("编辑成功！"); |
||||
|
this.pageList(); |
||||
|
this.resetform(); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
this.resetform(); |
||||
|
}); |
||||
|
} else { |
||||
|
this.$errorMsg("请按照提示继续输入！"); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
//模板权限保存 |
||||
|
savePer(){ |
||||
|
let _allList = [] |
||||
|
let checkedKeys = this.$refs.tree.getCheckedKeys(); |
||||
|
this.permissionsData.forEach(item=>{ |
||||
|
// 菜单层级 |
||||
|
item.children.forEach(item_menu=>{ |
||||
|
let _Granted1 = checkedKeys.indexOf(item_menu.name) >= 0 ? true : false |
||||
|
_allList.push({isGranted:_Granted1,name:item_menu.name}) |
||||
|
// 增删改层级 |
||||
|
if(item_menu.children){ |
||||
|
item_menu.children.forEach(item_handle=>{ |
||||
|
let _Granted2 = checkedKeys.indexOf(item_handle.name) >= 0 ? true : false |
||||
|
_allList.push({isGranted:_Granted2,name:item_handle.name}) |
||||
|
// 如果增删改有已选，更改父级为true |
||||
|
if(_Granted2){ |
||||
|
_allList.forEach((allItem)=>{ |
||||
|
if(allItem.name == item_handle.parentName){ |
||||
|
allItem.isGranted = true |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
this.treeLoading = true; |
||||
|
savePermissionsRoles( |
||||
|
`/permission-management/permissions?providerName=${this.params.providerName}&providerKey=${this.multipleSelection[0].name}`, |
||||
|
{permissions:_allList} |
||||
|
).then((response) => { |
||||
|
updatePermissionsGranted(this.params.providerName,this.multipleSelection[0].name).then(()=>{ |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "更新成功", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
this.treeLoading = false; |
||||
|
// 如果更改的是当前用户，则页面刷新 |
||||
|
if(this.multipleSelection[0].name == this.$store.getters.currentUserInfo.name){ |
||||
|
location.reload() |
||||
|
} |
||||
|
}).catch(()=>{ |
||||
|
this.treeLoading = false; |
||||
|
}) |
||||
|
}).catch(err=>{ |
||||
|
this.treeLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
//点击table行渲染权限模板 |
||||
|
handleRowClick(row, column, event) { |
||||
|
let that = this |
||||
|
this.name = row.name |
||||
|
this.treeLoading = true; |
||||
|
// if (row.name == "admin") { |
||||
|
// this.$notify({ |
||||
|
// title: "提示", |
||||
|
// message: "不可更改超级管理员权限", |
||||
|
// type: "warning", |
||||
|
// duration: 2000, |
||||
|
// }); |
||||
|
// this.$refs.multipleTable.clearSelection(); |
||||
|
// this.permissionsData = []; |
||||
|
// this.checkedPermission = []; |
||||
|
// } else { |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
this.$refs.multipleTable.toggleRowSelection(row); |
||||
|
// } |
||||
|
|
||||
|
this.params.providerKey = row.name; |
||||
|
getPermissionsRoles(this.params).then((res) => { |
||||
|
this.permissionsData = []; |
||||
|
this.checkedPermission = []; |
||||
|
// 根据前端菜单，进行重置分组 |
||||
|
res.groups.forEach((itemRes,indexRes) => { |
||||
|
itemRes.children = [] |
||||
|
this.permissionsData.push(itemRes) |
||||
|
// todo:使用递归优化 |
||||
|
itemRes.permissions.forEach(item => { |
||||
|
if(!item.parentName){ |
||||
|
// 当前权限 |
||||
|
if(item.isGranted)this.checkedPermission.push(item.name) |
||||
|
this.permissionsData[indexRes].children.push(item) |
||||
|
}else{ |
||||
|
// 当前权限 |
||||
|
if(item.isGranted)this.checkedPermission.push(item.name) |
||||
|
this.permissionsData[indexRes].children.forEach((pItem,pindex)=>{ |
||||
|
if(pItem.name == item.parentName){ |
||||
|
if(!this.permissionsData[indexRes].children[pindex].children)this.permissionsData[indexRes].children[pindex].children = [] |
||||
|
this.permissionsData[indexRes].children[pindex].children.push(item) |
||||
|
// 如果children中有一个为flase，当前权限，则删除父级，用于回显 |
||||
|
if(item.isGranted == false){ |
||||
|
if(this.checkedPermission.indexOf(item.parentName) >= 0){ |
||||
|
this.checkedPermission.splice(this.checkedPermission.indexOf(item.parentName),1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
that.$nextTick(() => { |
||||
|
that.$refs.tree.setCheckedKeys(this.checkedPermission) |
||||
|
}) |
||||
|
console.log('拥有权限',this.checkedPermission) |
||||
|
console.log('菜单树',this.permissionsData) |
||||
|
that.treeLoading = false; |
||||
|
}) |
||||
|
.catch((err)=>{ |
||||
|
this.$errorMsg('暂无更改权限') |
||||
|
that.treeLoading = false; |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.appMainPage { |
||||
|
padding: 20px; |
||||
|
.main { |
||||
|
|
||||
|
.table-active { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 5px 0 15px 0; |
||||
|
|
||||
|
.bttton-box { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-table__body-wrapper { |
||||
|
tbody { |
||||
|
span { |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #409eff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.Footer { |
||||
|
padding: 25px 0; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog { |
||||
|
.el-dialog__header { |
||||
|
button { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.permission-tree{ |
||||
|
padding: 20px; |
||||
|
height: 690px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
@ -0,0 +1,638 @@ |
|||||
|
<template> |
||||
|
<div class="appMainPage" v-loading="loading"> |
||||
|
<div class="main"> |
||||
|
<div class="table-active"> |
||||
|
<div class="bttton-box"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-plus" |
||||
|
@click="handleCreate" |
||||
|
size="mini" |
||||
|
v-permission="['AbpIdentity.Users.Create']" |
||||
|
>创建用户</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
icon="el-icon-refresh" |
||||
|
@click.native.prevent="Createview" |
||||
|
size="mini" |
||||
|
>刷新</el-button |
||||
|
> |
||||
|
</div> |
||||
|
<div class="query-box"> |
||||
|
<!-- 搜索 --> |
||||
|
<searchNormal |
||||
|
ref="normalSearch_UserManage" |
||||
|
@searchNormalClick="filtrate" |
||||
|
@searchNormalClear="filtrate" |
||||
|
></searchNormal> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="multipleTable" |
||||
|
:data="tableData" |
||||
|
height="calc(100vh - 260px)" |
||||
|
style="width: 100%" |
||||
|
@sort-change="sortChange" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
@row-click="handleRowClick" |
||||
|
:border="true" |
||||
|
> |
||||
|
<el-table-column :align="'center'" type="selection" width="55" /> |
||||
|
<el-table-column |
||||
|
prop="userName" |
||||
|
label="用户名" |
||||
|
width="180" |
||||
|
:align="'left'" |
||||
|
sortable="custom" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="姓名" |
||||
|
width="180" |
||||
|
:align="'left'" |
||||
|
sortable="custom" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="isActive" |
||||
|
label="是否启用" |
||||
|
sortable="custom" |
||||
|
:align="'center'" |
||||
|
width="180" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ scope.row['isActive'] | trigger('whetherOrNot', "label") }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" :align="'center'" width="230"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="Update(scope.row)" |
||||
|
v-permission="['AbpIdentity.Users.Update']" |
||||
|
v-if="scope.row.name == 'admin' ? false : true" |
||||
|
>编辑</el-button> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="deleteUser(scope.row)" |
||||
|
v-if="scope.row.name == 'admin' ? false : true" |
||||
|
v-permission="['AbpIdentity.Users.Delete']" |
||||
|
style="color:red" |
||||
|
>删除用户</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="Footer"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page="queryInfo.currentPage" |
||||
|
:page-sizes="[10, 15, 20]" |
||||
|
:page-size="queryInfo.pagesize" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="total" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
style="margin-left: 10px; background-color: #409eff" |
||||
|
>确定</el-button |
||||
|
> |
||||
|
</div> |
||||
|
<el-dialog |
||||
|
:title="formTitle" |
||||
|
:visible.sync="dialogVisible" |
||||
|
width="800px" |
||||
|
:close-on-click-modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
:append-to-body="false" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="form" |
||||
|
:model="form" |
||||
|
label-width="70px" |
||||
|
:rules="rules" |
||||
|
> |
||||
|
<el-form-item label="用户名" prop="userName"> |
||||
|
<el-input |
||||
|
v-model="form.userName" |
||||
|
maxlength="20" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="姓名" prop="name"> |
||||
|
<el-input v-model="form.name" maxlength="20" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="角色" prop="roleNames"> |
||||
|
<el-select |
||||
|
:disabled="!checkPermission(['AbpIdentity.Users.ManagePermissions']) && isEdit" |
||||
|
v-model="form.roleNames" |
||||
|
multiple |
||||
|
style="width: 100%" |
||||
|
placeholder="请选择" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.name" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="是否启用" prop="isActive"> |
||||
|
<el-select |
||||
|
v-model="form.isActive" |
||||
|
style="width: 100%" |
||||
|
placeholder="请选择" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in userOptions('whetherOrNot')" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="密码" prop="password" v-if="!isEdit"> |
||||
|
<el-input |
||||
|
ref="password" |
||||
|
v-model="form.password" |
||||
|
maxlength="16" |
||||
|
minlength="6" |
||||
|
:type="passwordType" |
||||
|
/> |
||||
|
<span class="show-pwd" @click="showPwd"> |
||||
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> |
||||
|
</span> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="resetform">取 消</el-button> |
||||
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { isvalidPhone } from "@/utils/validate"; |
||||
|
import checkPermission from '@/utils/permission' |
||||
|
import { |
||||
|
getPageListUsers, |
||||
|
usersroles, |
||||
|
postCreateUser, |
||||
|
postUpdateUser, |
||||
|
postDeleteUser, |
||||
|
getusersID, |
||||
|
} from "@/api/wms-auth"; |
||||
|
import permission from "@/utils/permission/index"; |
||||
|
import searchNormal from "@/components/searchNormal/index.vue" |
||||
|
export default { |
||||
|
directives: { permission }, |
||||
|
components:{ |
||||
|
searchNormal |
||||
|
}, |
||||
|
name:"AbpIdentityMarkUsers", |
||||
|
data() { |
||||
|
// 自定义验证 |
||||
|
const validPhone = (rule, value, callback) => { |
||||
|
if (!value) { |
||||
|
callback(new Error("请输入电话号码")); |
||||
|
} else if (!isvalidPhone(value)) { |
||||
|
callback(new Error("请输入正确的11位手机号码")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
const validName = (rule, value, callback) => { |
||||
|
if (!value) { |
||||
|
callback(new Error("请输入登录名称")); |
||||
|
} else if (/[\u4E00-\u9FA5]/g.test(value)) { |
||||
|
callback(new Error("登录名不能输入汉字")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
// 简单 |
||||
|
// const validpassword = (rule, value, callback) => { |
||||
|
// if (!value) { |
||||
|
// callback(new Error("请输入密码")); |
||||
|
// } else { |
||||
|
// if ( |
||||
|
// /^(?=.*\d)(?=.*[a-z]).{6,16}$/.test( |
||||
|
// value |
||||
|
// ) |
||||
|
// ) { |
||||
|
// callback(); |
||||
|
// } else { |
||||
|
// callback(new Error("密码必须包含字母,数字混合,最小长度为6位")); |
||||
|
// } |
||||
|
// } |
||||
|
// }; |
||||
|
// 中等 |
||||
|
// const validpassword = (rule, value, callback) => { |
||||
|
// if (!value) { |
||||
|
// callback(new Error("请输入密码")); |
||||
|
// } else { |
||||
|
// if ( |
||||
|
// /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/.test( |
||||
|
// value |
||||
|
// ) |
||||
|
// ) { |
||||
|
// callback(); |
||||
|
// } else { |
||||
|
// callback(new Error("密码必须包含大小写,数字混合,最小长度为6位")); |
||||
|
// } |
||||
|
// } |
||||
|
// }; |
||||
|
// 复杂 |
||||
|
const validpassword = (rule, value, callback) => { |
||||
|
if (!value) { |
||||
|
callback(new Error("请输入密码")); |
||||
|
} else { |
||||
|
if ( |
||||
|
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~@#$%\*-\+=:,\\?\[\]\{}]).{6,16}$/.test( |
||||
|
value |
||||
|
) |
||||
|
) { |
||||
|
callback(); |
||||
|
} else { |
||||
|
callback(new Error("密码必须包含大小写,数字与特殊字符混合,最小长度为6位")); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
const checkEmail = (rule, value, callback) => { |
||||
|
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; |
||||
|
if (!value) { |
||||
|
return callback(new Error("邮箱不能为空")); |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
if (mailReg.test(value)) { |
||||
|
callback(); |
||||
|
} else { |
||||
|
callback(new Error("请输入正确的邮箱格式")); |
||||
|
} |
||||
|
}, 100); |
||||
|
}; |
||||
|
return { |
||||
|
loading:false, |
||||
|
//编辑弹出 |
||||
|
dialogVisible: false, |
||||
|
//密码显示 |
||||
|
isEdit: false, |
||||
|
//弹出title |
||||
|
formTitle: "", |
||||
|
//总条数 |
||||
|
total: 0, |
||||
|
//分页器 |
||||
|
queryInfo: { |
||||
|
//当前页数 |
||||
|
currentPage: 1, |
||||
|
//每页条数 |
||||
|
pagesize: 20, |
||||
|
Sorting: "", |
||||
|
}, |
||||
|
//角色组 |
||||
|
options: [], |
||||
|
//当前用户ID |
||||
|
usersId: "", |
||||
|
//编辑参数 |
||||
|
concurrencyStamp: "", |
||||
|
//新增参数 |
||||
|
form: { |
||||
|
userName: "", |
||||
|
phoneNumber: "", |
||||
|
name: "", |
||||
|
email: "", |
||||
|
roleNames: [], |
||||
|
password: "", |
||||
|
surname: "", |
||||
|
lockoutEnabled: true, |
||||
|
isActive: true, |
||||
|
}, |
||||
|
//密码明文 |
||||
|
passwordType: "password", |
||||
|
// |
||||
|
multipleSelection: [], |
||||
|
//table渲染 |
||||
|
tableData: [], |
||||
|
rules: { |
||||
|
userName: [ |
||||
|
{ required: true, trigger: "blur", validator: validName }, |
||||
|
{ |
||||
|
min: 2, |
||||
|
max: 20, |
||||
|
message: "长度在 2 到 20 个字符", |
||||
|
trigger: "blur", |
||||
|
}, |
||||
|
], |
||||
|
name: [ |
||||
|
{ required: true, trigger: "blur", message: "请输入姓名" }, |
||||
|
{ |
||||
|
min: 2, |
||||
|
max: 20, |
||||
|
message: "长度在 2 到 20 个字符", |
||||
|
trigger: "blur", |
||||
|
}, |
||||
|
], |
||||
|
email: [{ required: true, validator: checkEmail, trigger: "blur" }], |
||||
|
phoneNumber: [ |
||||
|
{ required: true, trigger: "blur", validator: validPhone }, |
||||
|
], |
||||
|
password: [ |
||||
|
{ required: true, trigger: "blur", message: "请输入密码" }, |
||||
|
{ |
||||
|
min: 6, |
||||
|
max: 16, |
||||
|
message: "长度在 6 到 16 个字符", |
||||
|
trigger: "blur", |
||||
|
}, |
||||
|
], |
||||
|
roleNames: [ |
||||
|
{ required: true, message: "请选择角色", trigger: "change" }, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
//获取所有角色 |
||||
|
usersroles().then((res) => { |
||||
|
this.options = res.items; |
||||
|
}); |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.pageList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
checkPermission, |
||||
|
// 是否下拉 |
||||
|
userOptions(val){ |
||||
|
let options = this.$staticOptions[val] |
||||
|
return options() |
||||
|
}, |
||||
|
//请求数据渲染table |
||||
|
pageList(val) { |
||||
|
this.loading = true |
||||
|
const data = { |
||||
|
Filter: val || '', |
||||
|
Sorting: this.queryInfo.Sorting, |
||||
|
SkipCount: (this.queryInfo.currentPage - 1) * this.queryInfo.pagesize, |
||||
|
MaxResultCount: this.queryInfo.pagesize, |
||||
|
}; |
||||
|
getPageListUsers(data).then((res) => { |
||||
|
this.loading = false |
||||
|
const data = res; |
||||
|
this.total = data.totalCount; |
||||
|
this.tableData = data.items; |
||||
|
}).catch(()=>{ |
||||
|
this.loading = false |
||||
|
}); |
||||
|
}, |
||||
|
//密码明文显示 |
||||
|
showPwd() { |
||||
|
if (this.passwordType === "password") { |
||||
|
this.passwordType = ""; |
||||
|
} else { |
||||
|
this.passwordType = "password"; |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.password.focus(); |
||||
|
}); |
||||
|
}, |
||||
|
//排序 |
||||
|
sortChange(data) { |
||||
|
const { prop, order } = data; |
||||
|
if (!prop || !order) { |
||||
|
this.queryInfo.Sorting = ""; |
||||
|
this.handleFilter(); |
||||
|
return; |
||||
|
} |
||||
|
this.queryInfo.Sorting = prop + " " + order; |
||||
|
this.handleFilter(); |
||||
|
}, |
||||
|
//排序触发页面更新 |
||||
|
handleFilter() { |
||||
|
this.queryInfo.currentPage = 1; |
||||
|
this.pageList(); |
||||
|
}, |
||||
|
//筛选 |
||||
|
filtrate(val) { |
||||
|
this.queryInfo.currentPage = 1; |
||||
|
this.pageList(val); |
||||
|
}, |
||||
|
//选择每页条数分页 |
||||
|
handleSizeChange(val) { |
||||
|
this.queryInfo.pagesize = val; |
||||
|
this.pageList(); |
||||
|
}, |
||||
|
//选择当前页分页 |
||||
|
handleCurrentChange(val) { |
||||
|
this.queryInfo.currentPage = val; |
||||
|
this.pageList(); |
||||
|
}, |
||||
|
//重置新建与编辑后的参数 |
||||
|
resetform() { |
||||
|
this.$refs.form.resetFields(); |
||||
|
this.dialogVisible = false; |
||||
|
this.form.userName = ""; |
||||
|
this.form.phoneNumber = ""; |
||||
|
this.form.name = ""; |
||||
|
this.form.email = ""; |
||||
|
this.form.roleNames = []; |
||||
|
this.form.password = ""; |
||||
|
this.form.surname = ""; |
||||
|
this.form.isActive = ""; |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
}, |
||||
|
handleCreate() { |
||||
|
this.formTitle = "创建用户"; |
||||
|
this.dialogVisible = true; |
||||
|
this.isEdit = false; |
||||
|
this.form.phoneNumber = this.getRandomPhoneNumber() |
||||
|
this.form.email = this.getRandomEmail() |
||||
|
usersroles().then((res) => { |
||||
|
this.options = res.items |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
//刷新 |
||||
|
Createview() { |
||||
|
this.queryInfo.currentPage = 1; |
||||
|
this.queryInfo.Sorting = ""; |
||||
|
this.$refs.normalSearch_UserManage.searchNormalClear()//清空搜索 |
||||
|
usersroles().then((res) => { |
||||
|
this.options = res.items; |
||||
|
}); |
||||
|
this.$refs.multipleTable.clearSort(); |
||||
|
}, |
||||
|
//获取当前角色 |
||||
|
usersID(data) { |
||||
|
getusersID(data).then((res) => { |
||||
|
const data = res.items; |
||||
|
this.form.roleNames = data.map((item) => { |
||||
|
return item.name; |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
//编辑默认参数 |
||||
|
Update(row) { |
||||
|
if (row) { |
||||
|
this.formTitle = "编辑用户"; |
||||
|
this.usersId = row.id; |
||||
|
this.usersID(row.id); |
||||
|
this.form.userName = row.userName; |
||||
|
this.form.phoneNumber = row.phoneNumber; |
||||
|
this.form.name = row.name; |
||||
|
this.form.email = row.email; |
||||
|
this.form.surname = row.name; |
||||
|
this.form.lockoutEnabled = row.lockoutEnabled |
||||
|
this.concurrencyStamp = row.concurrencyStamp; |
||||
|
this.form.isActive = row.isActive; |
||||
|
usersroles().then((res) => { |
||||
|
this.options = res.items; |
||||
|
}); |
||||
|
this.isEdit = true; |
||||
|
this.dialogVisible = true; |
||||
|
} |
||||
|
}, |
||||
|
//新建与编辑 |
||||
|
submitForm() { |
||||
|
this.$refs.form.validate((valid) => { |
||||
|
//新建报表组 |
||||
|
if (valid && !this.isEdit) { |
||||
|
this.form.surname = this.form.name; |
||||
|
postCreateUser(this.form) |
||||
|
.then((res) => { |
||||
|
this.resetform(); |
||||
|
this.$successMsg("创建成功！"); |
||||
|
this.pageList(); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
this.resetform(); |
||||
|
}); |
||||
|
} else if (valid && this.isEdit) { |
||||
|
//编辑报表 |
||||
|
const data = JSON.parse(JSON.stringify(this.form)); |
||||
|
delete data.password; |
||||
|
data.concurrencyStamp = this.concurrencyStamp; |
||||
|
postUpdateUser(data, this.usersId) |
||||
|
.then((res) => { |
||||
|
this.$successMsg("编辑成功！"); |
||||
|
this.pageList(); |
||||
|
this.resetform(); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
this.resetform(); |
||||
|
}); |
||||
|
} else { |
||||
|
this.$errorMsg("请按照提示继续输入！"); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 删除用户 |
||||
|
deleteUser(row){ |
||||
|
this.$confirm("您确认删除 " + row.userName + " 用户吗？", "提示", { |
||||
|
confirmButtonText: "确认删除用户", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning", |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.loading = true |
||||
|
postDeleteUser(row.id) |
||||
|
.then((res) => { |
||||
|
this.loading = false |
||||
|
this.$successMsg("删除成功！"); |
||||
|
this.pageList(); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
console.log(err) |
||||
|
}) |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.multipleSelection = val; |
||||
|
}, |
||||
|
//点击table行选择 |
||||
|
handleRowClick(row, column, event) { |
||||
|
if ( |
||||
|
this.multipleSelection.length == 1 && |
||||
|
this.multipleSelection[0].id == row.id |
||||
|
) { |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
return; |
||||
|
} |
||||
|
this.$refs.multipleTable.clearSelection(); |
||||
|
this.$refs.multipleTable.toggleRowSelection(row); |
||||
|
}, |
||||
|
// 创建用户，随机生成11位电话号，去掉电话校验 |
||||
|
getRandomPhoneNumber () { |
||||
|
return '1' + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) |
||||
|
}, |
||||
|
getRandomEmail () { |
||||
|
return '' + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + '@' + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + '.com' |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.appMainPage { |
||||
|
.main { |
||||
|
.table-active { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20px 0; |
||||
|
|
||||
|
.bttton-box { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-table__body-wrapper { |
||||
|
tbody { |
||||
|
span { |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #409eff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.Footer { |
||||
|
padding: 25px; |
||||
|
// background-color: #f2f2f2; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
::v-deep button { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog { |
||||
|
.el-dialog__header { |
||||
|
button { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.el-form-item{ |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.show-pwd { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
@ -0,0 +1,32 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<el-card class="box-card"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>个人中心</span> |
||||
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> --> |
||||
|
</div> |
||||
|
<el-tabs v-model="activeTab"> |
||||
|
<el-tab-pane label="用户信息" name="userInfo"> |
||||
|
<userInfo /> |
||||
|
</el-tab-pane> |
||||
|
<!-- <el-tab-pane label="修改密码" name="resetPwd"> |
||||
|
<resetPwd /> |
||||
|
</el-tab-pane> --> |
||||
|
</el-tabs> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import resetPwd from "./resetPwd"; |
||||
|
import userInfo from "./userInfo"; |
||||
|
export default { |
||||
|
name: "Profileuser", |
||||
|
components: { resetPwd,userInfo }, |
||||
|
data() { |
||||
|
return { |
||||
|
activeTab: "userInfo", |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!-- 左右东阳版本 --> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="6" :xs="24"> |
||||
|
<el-card> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span style="font-size: 18px">个人信息</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<ul class="list-group-striped"> |
||||
|
<li> |
||||
|
<div class="left"><i class="icon el-icon-user-solid"></i></div> |
||||
|
<div class="pull-right"> |
||||
|
<p class="title">用户名</p> |
||||
|
<p class="name">{{ user.userName }}</p> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li> |
||||
|
<div class="left"><i class="icon el-icon-info"></i></div> |
||||
|
<div class="pull-right"> |
||||
|
<p class="title">姓名</p> |
||||
|
<p class="name">{{ user.name }}</p> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li> |
||||
|
<div class="left"><i class="icon el-icon-s-check"></i></div> |
||||
|
<div class="pull-right"> |
||||
|
<p class="title">角色</p> |
||||
|
<p class="name">{{ user.roles.join(',') }}</p> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="18" :xs="24"> |
||||
|
<el-card> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span style="font-size: 18px">基本资料</span> |
||||
|
</div> |
||||
|
<el-tabs v-model="activeTab"> |
||||
|
<el-tab-pane label="修改密码" name="resetPwd"> |
||||
|
<resetPwd :user="user" /> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import resetPwd from "./resetPwd"; |
||||
|
export default { |
||||
|
name: "Profileuser", |
||||
|
components: { resetPwd }, |
||||
|
data() { |
||||
|
return { |
||||
|
user: {}, |
||||
|
roleGroup: {}, |
||||
|
postGroup: {}, |
||||
|
activeTab: "resetPwd", |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.user = this.$store.getters.currentUserInfo |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.list-group-striped{ |
||||
|
list-style: none; |
||||
|
padding-left: 10px; |
||||
|
li{ |
||||
|
display: flex; |
||||
|
padding-bottom: 15px; |
||||
|
background: #e9f6ff; |
||||
|
padding: 13px 15px; |
||||
|
border-radius: 4px; |
||||
|
margin-bottom: 18px; |
||||
|
min-height: 70px; |
||||
|
} |
||||
|
.icon{ |
||||
|
font-size: 22px; |
||||
|
padding-right: 5px; |
||||
|
vertical-align: top; |
||||
|
color: #49a4f7; |
||||
|
width: 24px; |
||||
|
flex-shrink: 0; |
||||
|
padding-top: 18px; |
||||
|
} |
||||
|
.pull-right{ |
||||
|
padding-left: 10px; |
||||
|
color: #999; |
||||
|
p{ |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.title{ |
||||
|
padding-bottom: 5px; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,100 @@ |
|||||
|
<template> |
||||
|
<el-form ref="form" :model="user" :rules="rules" label-width="80px"> |
||||
|
<el-form-item label="旧密码" prop="oldPassword"> |
||||
|
<el-input |
||||
|
v-model="user.oldPassword" |
||||
|
placeholder="请输入旧密码" |
||||
|
type="password" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="新密码" prop="newPassword"> |
||||
|
<el-input |
||||
|
v-model="user.newPassword" |
||||
|
placeholder="请输入新密码" |
||||
|
type="password" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="确认密码" prop="confirmPassword"> |
||||
|
<el-input |
||||
|
v-model="user.confirmPassword" |
||||
|
placeholder="请确认密码" |
||||
|
type="password" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" size="mini" @click="submit">保存</el-button> |
||||
|
<!-- <el-button type="danger" size="mini" @click="reset">清空</el-button> --> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { postLoginUserInfo } from "@/api/wms-auth"; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
const equalToPassword = (rule, value, callback) => { |
||||
|
if (this.user.newPassword !== value) { |
||||
|
callback(new Error("两次输入的密码不一致")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}; |
||||
|
return { |
||||
|
user: { |
||||
|
oldPassword: undefined, |
||||
|
newPassword: undefined, |
||||
|
confirmPassword: undefined, |
||||
|
}, |
||||
|
// 表单校验 |
||||
|
rules: { |
||||
|
oldPassword: [ |
||||
|
{ required: true, message: "旧密码不能为空", trigger: "blur" }, |
||||
|
], |
||||
|
newPassword: [ |
||||
|
{ required: true, message: "新密码不能为空", trigger: "blur" }, |
||||
|
{ |
||||
|
min: 6, |
||||
|
max: 20, |
||||
|
message: "长度在 6 到 20 个字符", |
||||
|
trigger: "blur", |
||||
|
}, |
||||
|
], |
||||
|
confirmPassword: [ |
||||
|
{ required: true, message: "确认密码不能为空", trigger: "blur" }, |
||||
|
{ required: true, validator: equalToPassword, trigger: "blur" }, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
submit() { |
||||
|
this.$refs["form"].validate((valid) => { |
||||
|
if (valid) { |
||||
|
postLoginUserInfo({ |
||||
|
currentPassword: this.user.oldPassword, |
||||
|
newPassword: this.user.newPassword, |
||||
|
}, this.$store.getters.currentUserInfo.id) |
||||
|
.then((response) => { |
||||
|
this.$notify({ |
||||
|
title: "成功", |
||||
|
message: "修改成功", |
||||
|
type: "success", |
||||
|
duration: 2000, |
||||
|
}); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
// |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
reset() { |
||||
|
this.$refs["form"].resetFields(); |
||||
|
//this.$store.dispatch("tagsView/delView", this.$route); |
||||
|
//this.$router.push({ path: "/index" }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<el-descriptions |
||||
|
class="profileuser_userinfo_page" |
||||
|
:column="2" |
||||
|
:border="true" |
||||
|
:labelStyle="{width:'200px'}" |
||||
|
> |
||||
|
<el-descriptions-item> |
||||
|
<template slot="label"><i class="item-icon el-icon-user-solid"></i>用户名</template> |
||||
|
{{ user.userName }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template slot="label" :span="2"><i class="item-icon el-icon-info"></i>姓名</template> |
||||
|
{{ user.name }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template slot="label"><i class="item-icon el-icon-s-check"></i>角色</template> |
||||
|
{{ user.roles.join(',') }} |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
user:{} |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.user = this.$store.getters.currentUserInfo |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.profileuser_userinfo_page{ |
||||
|
padding: 20px; |
||||
|
|
||||
|
.el-descriptions-item__container{ |
||||
|
padding: 20px 10px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.item-icon{ |
||||
|
font-size: 22px; |
||||
|
margin-right: 8px; |
||||
|
color: #49a4f7; |
||||
|
line-height: 18px; |
||||
|
vertical-align: text-bottom; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue