|
|
|
@ -1,77 +1,95 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-row class="container-main" :gutter="20"> |
|
|
|
<el-col class="container-left" :xs="24" :sm="24" :md="8" :lg="6" :xl="5"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<div class="user-content"> |
|
|
|
<h4 class="info-title">个人信息</h4> |
|
|
|
<div class="el-upload"> |
|
|
|
<div class="user-img-cover"> |
|
|
|
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" :onerror="defaultImg" @click="toggleShow"> |
|
|
|
<div class="app-container category-container"> |
|
|
|
<!-- <span class="center-bg" /> --> |
|
|
|
<div class="container-main"> |
|
|
|
<div class="elect-cont-left"> |
|
|
|
<div class="container-left"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<div class="user-content"> |
|
|
|
<h4 class="info-title">个人信息</h4> |
|
|
|
<div class="el-upload"> |
|
|
|
<div class="user-img-cover"> |
|
|
|
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" :onerror="defaultImg" @click="toggleShow"> |
|
|
|
</div> |
|
|
|
<myUpload |
|
|
|
v-model="show" |
|
|
|
:headers="headers" |
|
|
|
:url="updateAvatarApi" |
|
|
|
@crop-upload-success="cropUploadSuccess" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<myUpload |
|
|
|
v-model="show" |
|
|
|
:headers="headers" |
|
|
|
:url="updateAvatarApi" |
|
|
|
@crop-upload-success="cropUploadSuccess" |
|
|
|
/> |
|
|
|
<ul class="user-info"> |
|
|
|
<li><div style="height: 100%"><i class="iconfont icon-zhanghao" />账号<div class="user-right">{{ user.username }}</div></div></li> |
|
|
|
<li><i class="iconfont icon-yonghuming" style="font-size: 13px;" />用户名<div class="user-right">{{ user.nickName }}</div></li> |
|
|
|
<li><i class="iconfont icon-xingbie" />性别<div class="user-right">男</div></li> |
|
|
|
<li><i class="iconfont icon-yonghujiaose" style="font-size: 12px;" />用户角色<div class="user-right"> {{ user.dept.name }}</div></li> |
|
|
|
<li><i class="iconfont icon-suoshuquanzong" />所属全宗<div class="user-right">全宗A</div></li> |
|
|
|
<li><i class="iconfont icon-suoshubumen" />所属部门<div class="user-right">部门A</div></li> |
|
|
|
<li><i class="iconfont icon-shoujihaoma" />手机号码<div class="user-right">{{ user.phone }}</div></li> |
|
|
|
<li><i class="iconfont icon-yonghuyouxiang" style="font-size: 12px;" />用户邮箱<div class="user-right">{{ user.email }}</div></li> |
|
|
|
<li><i class="iconfont icon-yanzhengma" />安全设置<div class="user-right"><a @click="$refs.pass.dialog = true">修改密码</a></div></li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<ul class="user-info"> |
|
|
|
<li><div style="height: 100%"><i class="iconfont icon-dengluzhanghao-fanbai" /> 登录账号<div class="user-right">{{ user.username }}</div></div></li> |
|
|
|
<li><i class="iconfont icon-yonghunicheng-fanbai" /> 用户昵称 <div class="user-right">{{ user.nickName }}</div></li> |
|
|
|
<li><i class="iconfont icon-suoshubumen-fanbai" /> 所属部门 <div class="user-right"> {{ user.dept.name }}</div></li> |
|
|
|
<li><i class="iconfont icon-shoujihaoma-fanbai" /> 手机号码 <div class="user-right">{{ user.phone }}</div></li> |
|
|
|
<li><i class="iconfont icon-yonghuyouxiang-fanbai" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li> |
|
|
|
<li> |
|
|
|
<i class="iconfont icon-anquanshezhi-fanbai" /> 安全设置 |
|
|
|
<div class="user-right"> |
|
|
|
<a @click="$refs.pass.dialog = true">修改密码</a> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col class="container-right tab-content" :xs="24" :sm="24" :md="16" :lg="18" :xl="19"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<div class="user-right-content"> |
|
|
|
</div> |
|
|
|
<div class="elect-cont-right"> |
|
|
|
<div class="container-right tab-content"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<ul class="tab-nav"> |
|
|
|
<li :class="{'active-tab-nav': activeIndex == 0}" @click="handleClick(0)">用户资料<i /></li> |
|
|
|
<li :class="{'active-tab-nav': activeIndex == 1}" @click="handleClick(1)">我的消息<i /></li> |
|
|
|
<li :class="{'active-tab-nav': activeIndex == 2}" @click="handleClick(2)">操作日志<i /></li> |
|
|
|
<li :class="{'active-tab-nav': activeIndex == 1}" @click="handleClick(1)">消息中心<i /></li> |
|
|
|
<li :class="{'active-tab-nav': activeIndex == 2}" @click="handleClick(2)">流程中心<i /></li> |
|
|
|
<li :class="{'active-tab-nav': activeIndex == 3}" @click="handleClick(3)">操作日志<i /></li> |
|
|
|
<!-- 最右侧装饰img --> |
|
|
|
<span class="tab-right-img" /> |
|
|
|
</ul> |
|
|
|
<div v-if="activeIndex == 0" class="tab-item"> |
|
|
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="65px"> |
|
|
|
<el-form-item label="昵称" prop="nickName"> |
|
|
|
<el-input v-model="form.nickName" style="width: 35%" /> |
|
|
|
<span style="color:#999;margin-left: 22px;">用户昵称不作为登录使用</span> |
|
|
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px"> |
|
|
|
<el-form-item label="用户名" prop="nickName"> |
|
|
|
<el-input v-model="form.nickName" style="width: 324px" /> |
|
|
|
<span class="form-tip">用户昵称不作为登录使用</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="手机号" prop="phone"> |
|
|
|
<el-input v-model="form.phone" style="width: 35%;" /> |
|
|
|
<span style="color: #999;margin-left: 22px;">手机号码不能重复</span> |
|
|
|
<el-form-item label="手机号码" prop="phone"> |
|
|
|
<el-input v-model="form.phone" style="width: 324px" /> |
|
|
|
<span class="form-tip">手机号码不能重复</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="性别"> |
|
|
|
<el-form-item label="用户邮箱" prop="email"> |
|
|
|
<el-input v-model="form.email" style="width: 324px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="性别" prop="gender"> |
|
|
|
<el-radio-group v-model="form.gender" style="width: 178px"> |
|
|
|
<el-radio label="男">男</el-radio> |
|
|
|
<el-radio label="女">女</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label=""> |
|
|
|
<el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="user-submit" :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<!-- 我的消息 --> |
|
|
|
<!-- 消息中心 --> |
|
|
|
<div v-if="activeIndex == 1" class="tab-item"> |
|
|
|
<messageCenter /> |
|
|
|
</div> |
|
|
|
<!-- 操作日志 --> |
|
|
|
<!-- 流程中心 --> |
|
|
|
<div v-if="activeIndex == 2" class="tab-item"> |
|
|
|
流程中心 |
|
|
|
</div> |
|
|
|
<!-- 操作日志 --> |
|
|
|
<div v-if="activeIndex == 3" class="tab-item"> |
|
|
|
<!-- <div class="head-container"> |
|
|
|
<div class="head-search"> |
|
|
|
|
|
|
|
<el-input v-model="deptName" clearable size="small" placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" class="filter-item" /> |
|
|
|
<date-range-picker v-model="query.createTime" class="date-item" /> |
|
|
|
<rrOperation /> |
|
|
|
</div> |
|
|
|
<el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button> |
|
|
|
</div> --> |
|
|
|
<el-table v-loading="loading" :data="data" style="width: 100%;"> |
|
|
|
<el-table-column prop="description" label="行为" /> |
|
|
|
<el-table-column prop="description" label="行为描述" /> |
|
|
|
<el-table-column prop="requestIp" label="IP" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" /> |
|
|
|
<el-table-column prop="browser" label="浏览器" /> |
|
|
|
@ -102,14 +120,17 @@ |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div></el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<updateEmail ref="email" :email="user.email" /> |
|
|
|
<updatePass ref="pass" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// import rrOperation from '@crud/RR.operation' |
|
|
|
// import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
import myUpload from 'vue-image-crop-upload' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import updatePass from './center/updatePass' |
|
|
|
@ -122,6 +143,7 @@ import { editUser } from '@/api/system/user' |
|
|
|
import Avatar from '@/assets/images/avatar.png' |
|
|
|
import messageCenter from './messageCenter/index.vue' |
|
|
|
export default { |
|
|
|
// rrOperation, DateRangePicker, |
|
|
|
name: 'Center', |
|
|
|
components: { updatePass, updateEmail, myUpload, messageCenter }, |
|
|
|
mixins: [crud], |
|
|
|
@ -153,6 +175,9 @@ export default { |
|
|
|
], |
|
|
|
phone: [ |
|
|
|
{ required: true, trigger: 'blur', validator: validPhone } |
|
|
|
], |
|
|
|
gender: [ |
|
|
|
{ required: true, message: '请选择性别', trigger: 'change' } |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
@ -215,99 +240,161 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped> |
|
|
|
.user-content{ |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "~@/assets/styles/mixin.scss"; |
|
|
|
@import "~@/assets/styles/variables.scss"; |
|
|
|
|
|
|
|
.app-container{ |
|
|
|
margin: 0 20px !important; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin info-title-style{ |
|
|
|
[data-theme="dark"] & { |
|
|
|
color: #fff; |
|
|
|
.iconfont{ |
|
|
|
margin-right: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
.info-title{ |
|
|
|
margin: 0; |
|
|
|
height: 40px; |
|
|
|
line-height: 40px; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
color: #359AFC; |
|
|
|
text-align: center; |
|
|
|
letter-spacing: 2px; |
|
|
|
background-color: #02255F; |
|
|
|
} |
|
|
|
.el-upload{ |
|
|
|
display: block; |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
border-radius: 50%; |
|
|
|
margin: 40px auto 60px auto; |
|
|
|
overflow: hidden; |
|
|
|
.user-img-cover{ |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
line-height: 120px; |
|
|
|
[data-theme="light"] & { |
|
|
|
color: #0C0E1E; |
|
|
|
border-bottom: 1px solid #EDEFF3; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.container-main{ |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.center-bg{ |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: -55px; |
|
|
|
width: 100%; |
|
|
|
height: 196px; |
|
|
|
background: url('~@/assets/images/grzx-bg.png') no-repeat left top; |
|
|
|
background-size: contain; |
|
|
|
} |
|
|
|
.elect-cont-left{ |
|
|
|
width: 368px !important; |
|
|
|
padding: 0 !important; |
|
|
|
} |
|
|
|
[data-theme=dark] .elect-cont-left .container-left{ |
|
|
|
min-height: calc(100vh - 158px) !important; |
|
|
|
} |
|
|
|
// [data-theme=dark] .elect-cont-right .container-right { |
|
|
|
// min-height: calc(100vh - 158px) !important; |
|
|
|
// } |
|
|
|
[data-theme=light] .elect-cont-left .container-left{ |
|
|
|
min-height: calc(100vh - 138px) !important; |
|
|
|
} |
|
|
|
[data-theme=light] .elect-cont-right .container-right { |
|
|
|
min-height: calc(100vh - 178px) !important; |
|
|
|
} |
|
|
|
.user-content{ |
|
|
|
color: #fff; |
|
|
|
.iconfont{ |
|
|
|
margin-right: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
.info-title{ |
|
|
|
height: 56px; |
|
|
|
line-height: 56px; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
text-align: center; |
|
|
|
@include info-title-style; |
|
|
|
} |
|
|
|
.el-upload{ |
|
|
|
display: block; |
|
|
|
width: 148px; |
|
|
|
height: 148px; |
|
|
|
border-radius: 50%; |
|
|
|
margin: 40px auto 60px auto; |
|
|
|
overflow: hidden; |
|
|
|
.user-img-cover{ |
|
|
|
width: 148px; |
|
|
|
height: 148px; |
|
|
|
line-height: 148px; |
|
|
|
} |
|
|
|
.avatar { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@mixin user-info-list-style{ |
|
|
|
[data-theme="dark"] & { |
|
|
|
color: #fff; |
|
|
|
& li{ |
|
|
|
border-bottom: 1px solid #113D72; |
|
|
|
} |
|
|
|
.avatar { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
& .user-right { |
|
|
|
a{ |
|
|
|
color: #3A99FD; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.user-info { |
|
|
|
padding: 0 22px; |
|
|
|
list-style: none; |
|
|
|
li{ |
|
|
|
border-bottom: 1px dashed #113D72; |
|
|
|
font-size: 14px; |
|
|
|
height: 41px; |
|
|
|
line-height: 40px; |
|
|
|
[data-theme="light"] & { |
|
|
|
color: #545B65; |
|
|
|
& li{ |
|
|
|
border-bottom: 1px solid #F5F9FC; |
|
|
|
} |
|
|
|
.user-right { |
|
|
|
float: right; |
|
|
|
& .user-right { |
|
|
|
color: #0C0E1E; |
|
|
|
a{ |
|
|
|
margin-left: 20px; |
|
|
|
color: #3A99FD; |
|
|
|
color: #0348F3; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.container-left, |
|
|
|
.container-right{ |
|
|
|
min-height: calc(100vh - 230px); |
|
|
|
.user-info { |
|
|
|
padding: 0 20px; |
|
|
|
list-style: none; |
|
|
|
@include user-info-list-style; |
|
|
|
li{ |
|
|
|
font-size: 14px; |
|
|
|
height: 41px; |
|
|
|
line-height: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-content{ |
|
|
|
::v-deep .el-form{ |
|
|
|
padding: 0 20px; |
|
|
|
.el-form-item__label{ |
|
|
|
color: #339CFF; |
|
|
|
} |
|
|
|
.el-input__inner{ |
|
|
|
height: 36px; |
|
|
|
line-height: 36px; |
|
|
|
color: #fff; |
|
|
|
border: 1px solid #339CFF; |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
.el-radio{ |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.el-button{ |
|
|
|
font-size: 16px; |
|
|
|
padding: 7px 20px; |
|
|
|
color: #fff; |
|
|
|
background: #3A99FD; |
|
|
|
} |
|
|
|
.user-right { |
|
|
|
float: right; |
|
|
|
a{ |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
input:-webkit-autofill, |
|
|
|
textarea:-webkit-autofill, |
|
|
|
select:-webkit-autofill { |
|
|
|
-webkit-text-fill-color: #fff !important; |
|
|
|
background-color: transparent; |
|
|
|
transition: background-color 50000s ease-in-out 0s; |
|
|
|
} |
|
|
|
[data-theme=light] .tab-item { |
|
|
|
::v-deep .el-form{ |
|
|
|
margin-top: 40px; |
|
|
|
} |
|
|
|
input { |
|
|
|
background-color: transparent; |
|
|
|
.user-submit{ |
|
|
|
color: #fff; |
|
|
|
background-color: #0348F3; |
|
|
|
} |
|
|
|
.app-container{ |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item{ |
|
|
|
::v-deep .el-form{ |
|
|
|
.el-form-item__label.el-form-item__label{ |
|
|
|
@include setting-item-font; |
|
|
|
} |
|
|
|
.form-tip{ |
|
|
|
margin-left: 11px; |
|
|
|
font-size: 12px; |
|
|
|
color: #A6ADB6; |
|
|
|
} |
|
|
|
.user-submit{ |
|
|
|
width: 76px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
input:-webkit-autofill, |
|
|
|
textarea:-webkit-autofill, |
|
|
|
select:-webkit-autofill { |
|
|
|
-webkit-text-fill-color: #fff !important; |
|
|
|
background-color: transparent; |
|
|
|
transition: background-color 50000s ease-in-out 0s; |
|
|
|
} |
|
|
|
input { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
</style> |
