220 lines
7.7 KiB
Vue
220 lines
7.7 KiB
Vue
<template>
|
||
<div>
|
||
<a-button type="text" size="small" @click="show = true">查看</a-button>
|
||
<a-drawer v-model:visible="show" width="960px">
|
||
<div v-if="user">
|
||
<div class="flex flex-center flex-justify-start">
|
||
<a-avatar :size="72">
|
||
<a-image
|
||
alt="avatar"
|
||
v-if="user.avatar"
|
||
:src="user.avatar"
|
||
style="border-radius: 50%"
|
||
/>
|
||
</a-avatar>
|
||
<div class="ml-20">
|
||
<div class="flex flex-center flex-justify-between">
|
||
<h2>{{ user.name }}</h2>
|
||
</div>
|
||
<div class="flex flex-justify-start flex-center">
|
||
账号状态：
|
||
<div>
|
||
<a-tag color="red" v-if="user.status === 0"
|
||
>未激活
|
||
</a-tag>
|
||
<a-tag
|
||
color="green"
|
||
v-else-if="user.status === 1"
|
||
>正常
|
||
</a-tag>
|
||
<a-tag color="grey" v-else>停用/离职</a-tag>
|
||
</div>
|
||
</div>
|
||
<div>创建时间：{{ user.createTime }}</div>
|
||
</div>
|
||
</div>
|
||
<a-divider />
|
||
<div>
|
||
<div class="flex flex-center flex-justify-between">
|
||
<h2 class="padding-top padding-bottom">基础信息</h2>
|
||
<edit-user
|
||
:dept-id="user.deptId"
|
||
:info="user"
|
||
@ok="fetchInfo"
|
||
></edit-user>
|
||
</div>
|
||
<a-descriptions :data="data" bordered />
|
||
</div>
|
||
<div class="padding-top padding-bottom">
|
||
<h2 class="padding-top padding-bottom">修改</h2>
|
||
<div class="flex flex-center flex-justify-start">
|
||
<a-popconfirm
|
||
content="确定重置密码为 000000 ？"
|
||
@ok="restPwd"
|
||
>
|
||
<a-button type="primary" size="small"
|
||
>重置密码
|
||
</a-button>
|
||
</a-popconfirm>
|
||
<a-popconfirm
|
||
:content="
|
||
`确定` + this.user.status === 1
|
||
? '停用'
|
||
: '启用' + `当前账号？`
|
||
"
|
||
@ok="changeStatus"
|
||
>
|
||
<a-button
|
||
class="ml-20"
|
||
v-if="user.status === 0"
|
||
type="primary"
|
||
disabled
|
||
size="small"
|
||
>
|
||
账号未激活
|
||
</a-button>
|
||
<a-button
|
||
v-else
|
||
class="ml-20"
|
||
type="primary"
|
||
size="small"
|
||
>
|
||
{{
|
||
this.user.status === 1
|
||
? '停用账号'
|
||
: '启用账号'
|
||
}}
|
||
</a-button>
|
||
</a-popconfirm>
|
||
<div class="ml-20">
|
||
<edit-role
|
||
:userId="user.id"
|
||
:roleId="user.roleId"
|
||
@ok="fetchInfo"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import editUser from '@/views/base/components/edit-user.vue'
|
||
import editRole from '@/views/base/components/edit-role.vue'
|
||
|
||
export default {
|
||
components: {
|
||
editUser,
|
||
editRole
|
||
},
|
||
props: {
|
||
userId: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
watch: {
|
||
show: {
|
||
handler(val) {
|
||
if (val) {
|
||
this.fetchInfo()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
show: false,
|
||
user: null,
|
||
data: [
|
||
{
|
||
label: '姓名',
|
||
prop: 'name'
|
||
},
|
||
{
|
||
label: '性别',
|
||
prop: 'sex'
|
||
},
|
||
{
|
||
label: '电话',
|
||
prop: 'phone'
|
||
},
|
||
{
|
||
label: '职务',
|
||
prop: 'postName'
|
||
},
|
||
{
|
||
label: '角色',
|
||
prop: 'roleName'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
fetchInfo() {
|
||
this.$api.user.info({ userId: this.userId }).then(res => {
|
||
if (res.code === 200) {
|
||
this.user = res.data
|
||
this.fetchData(res.data)
|
||
} else {
|
||
this.$notification.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
fetchData(info) {
|
||
// 获取职务
|
||
this.$api.sys.dict({ code: 'org_post' }).then(res => {
|
||
if (res.code === 200) {
|
||
var tmp = res.data.find(e => e.value === info.post)
|
||
if (tmp) {
|
||
info.postName = tmp.label
|
||
}
|
||
this.$api.sys.roleList({ appId: '7XAp5LZk' }).then(res => {
|
||
var tmp = res.data.find(e => e.id === info.roleId)
|
||
if (tmp) {
|
||
info.roleName = tmp.name
|
||
}
|
||
info.sex = info.sex === '0' ? '男' : '女'
|
||
this.data = this.data.map(e => {
|
||
const item = {}
|
||
item.label = e.label
|
||
item.value = info[e.prop]
|
||
item.prop = e.prop
|
||
return item
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
restPwd() {
|
||
this.$api.user.retPwd({ userId: this.user.id }).then(res => {
|
||
if (res.code === 200) {
|
||
this.$notification.success(res.msg)
|
||
} else {
|
||
this.$notification.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
changeStatus() {
|
||
const data = {
|
||
userId: this.user.id,
|
||
status: this.user.status === 1 ? 2 : 1
|
||
}
|
||
this.$api.user.changeStatus(data).then(res => {
|
||
if (res.code === 200) {
|
||
this.$notification.success(res.msg)
|
||
this.user.status = data.status
|
||
this.$emit('ok')
|
||
} else {
|
||
this.$notification.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|