<template>
|
<div>
|
<div class="bgColor" @click.self="hideView"></div>
|
<slide-view
|
:listener-ids="['manager-main-container']"
|
:no-listener-ids="['depTable']"
|
:body-style="{padding: '10px 30px', height: '100%'}"
|
class="d-view"
|
@side-close="hideView">
|
<flexbox
|
orient="vertical"
|
style="height: 100%;">
|
<flexbox class="detail-header">
|
<div class="header-name"/>
|
<img
|
class="header-close"
|
src="@/assets/img/task_close.png"
|
@click="hideView" >
|
</flexbox>
|
<div class="detail-body">
|
<div class="dialog-top">
|
<img
|
:src="data.Avatar"
|
alt="">
|
<span>{{ data.Name }}</span>
|
<!--<div class="dialog-btn-group">
|
<el-button
|
type="primary"
|
size="medium"
|
@click="editBtn"> 编 辑 </el-button>
|
<el-dropdown
|
v-if="userUpdateAuth || userEnablesAuth"
|
trigger="click"
|
@command="handleCommand">
|
<el-button size="medium">
|
更 多<i class="el-icon-arrow-down el-icon--right"/>
|
</el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-if="userUpdateAuth"
|
command="reset">重置密码</el-dropdown-item>
|
<el-dropdown-item
|
v-if="userEnablesAuth"
|
command="status">{{ data.status === 0 ? '激 活' : '禁 用' }}</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div> -->
|
<div class="dialog-remark">
|
<p>账号状态：{{ {'1':'已激活', 2: '已禁用', 4: '未激活', 5: '退出企业' }[data.Status] }}</p>
|
</div>
|
</div>
|
<div class="dialog-content">
|
<flexbox
|
v-for="(item, index) in detailList"
|
:key="index"
|
class="content-items"
|
align="stretch">
|
<div class="content-items-name">{{ item.value }}</div>
|
<div class="content-items-value">{{ data|formatedInfo(item.field) }}</div>
|
</flexbox>
|
</div>
|
</div>
|
</flexbox>
|
</slide-view>
|
</div>
|
</template>
|
|
<script>
|
import SlideView from '@/components/SlideView'
|
import { mapGetters } from 'vuex'
|
|
export default {
|
/** 审批详情 */
|
name: 'EmployeeDetail',
|
components: {
|
SlideView
|
},
|
filters: {
|
formatedInfo (data, field) {
|
console.log(data, field)
|
if (field === 'IsLeader') {
|
return { true: '是', false: '否' }[data.IsLeader]
|
} else if (field === 'Gender') {
|
return { 1: '男', 2: '女' }[data.Gender]
|
} else if (field === 'Status') {
|
return { 1: '已激活',
|
2: '已禁用',
|
4: '未激活',
|
5: '退出企业'}[data.Status]
|
}
|
return data[field] || '暂无'
|
}
|
},
|
props: {
|
// 详情信息
|
data: Object
|
},
|
data () {
|
return {
|
detailList: [
|
{ field: 'IsLeader', value: '是否为上级' },
|
{ field: 'MobilePhone', value: '手机号（登录名）' },
|
{ field: 'Gender', value: '性别' },
|
{ field: 'Email', value: '邮箱' },
|
{ field: 'MainDepartmentName', value: '部门' },
|
{ field: 'Position', value: '职务' },
|
{ field: 'Address', value: '地址' }
|
]
|
}
|
},
|
computed: {
|
...mapGetters(['manage']),
|
// 员工编辑操作权限
|
userUpdateAuth () {
|
return this.manage && this.manage.users && this.manage.users.userUpdate
|
},
|
// 员工禁用启用权限
|
userEnablesAuth () {
|
return this.manage && this.manage.users && this.manage.users.userEnables
|
}
|
},
|
watch: {},
|
mounted () {},
|
methods: {
|
editBtn () {
|
this.$emit('edit')
|
},
|
handleCommand (command) {
|
this.$emit('command', command)
|
},
|
//* * 点击关闭按钮隐藏视图 */
|
hideView () {
|
this.$emit('hide-view')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.detail-header {
|
position: relative;
|
min-height: 60px;
|
.header-name {
|
font-size: 14px;
|
color: #333333;
|
flex: 1;
|
}
|
.header-close {
|
display: block;
|
width: 40px;
|
height: 40px;
|
margin-left: 20px;
|
padding: 10px;
|
cursor: pointer;
|
}
|
}
|
|
.dialog-top > img {
|
vertical-align: middle;
|
margin-right: 10px;
|
height: 80px;
|
}
|
.dialog-btn-group {
|
float: right;
|
}
|
.dialog-remark {
|
font-size: 14px;
|
color: #999;
|
margin-top: 10px;
|
p + p {
|
margin-top: 5px;
|
}
|
.user-img {
|
width: 100px;
|
min-width: 32px;
|
min-height: 32px;
|
height: 100px;
|
margin-right: 8px;
|
border-radius: 50%;
|
}
|
}
|
.dialog-content {
|
margin-top: 20px;
|
padding-top: 20px;
|
border-top: 1px solid #e6e6e6;
|
.content-items {
|
padding: 10px 0;
|
.content-items-name {
|
width: 132px;
|
color: #777;
|
flex-shrink: 0;
|
}
|
.content-items-value {
|
flex: 1;
|
}
|
}
|
}
|
|
.detail-body {
|
flex: 1;
|
overflow-y: auto;
|
width: 100%;
|
}
|
|
.d-view {
|
position: fixed;
|
width: 1200px;
|
top: 0px;
|
// width: 100%;
|
// top: 500px;
|
bottom: 0px;
|
right: 0px;
|
// background: #FFFFFF;
|
box-shadow: 0px -4px 12px 0px rgba(61, 121, 204, 0.2);
|
border-radius: 24px 0px 0px 0px;
|
}
|
.bgColor {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
overflow: hidden;
|
outline: 0;
|
filter: alpha(opacity=60);
|
background-color: rgba(51, 51, 51, 0.2);
|
z-index: 100;
|
}
|
</style>
|
