<template>
|
<div>
|
<el-dialog title="用户详情" :visible.sync="isShow" custom-class="custom-dialog" @close='cancelDialog()'>
|
<div class="mdc-table">
|
<div class="mdc-row ">
|
<div class="mdc-col mdc-content-v-center mdc-col-30">用户名</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-20">{{user.user}}</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-15">密码</div>
|
<div class="mdc-col">
|
<div class="mdc-content-v-center" style="position: relative;height: 100%;" v-if="!isLargeAltering">
|
<span>*******</span>
|
<i class="el-icon-edit password-reset-btn" @click="showEditPw()"></i>
|
</div>
|
<el-form v-else label-position="right" :model="pwObj" :rules="myRules" size="small" ref="rpw">
|
<el-form-item prop="newPw">
|
<el-input auto-complete="off" v-model="pwObj.newPw"><el-button slot="append" @click="resetPw()">重置</el-button></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<el-dialog
|
custom-class="custom-dialog"
|
title="密码重置"
|
:visible.sync="showEditPwDialog"
|
append-to-body>
|
<el-form label-position="right" :model="pwObj" :rules="myRules" size="small" ref="rpw">
|
<el-form-item prop="newPw">
|
<el-input auto-complete="off" v-model="pwObj.newPw"><el-button slot="append" @click="resetPw()">重置</el-button></el-input>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
<div class="mdc-row">
|
<div class="mdc-col mdc-content-v-center mdc-col-30">真实姓名</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-20">{{user.name}}</div>
|
<div class="mdc-col mdc-content-v-center mdc-col-15">电话</div>
|
<div class="mdc-col mdc-content-v-center">{{user.phone}}</div>
|
</div>
|
<div class="mdc-row">
|
<div class="mdc-col mdc-content-v-center mdc-col-30">账户创建时间</div>
|
<div class="mdc-col mdc-content-v-center">{{user.ctime}}</div>
|
</div>
|
<div class="mdc-row">
|
<div class="mdc-col mdc-content-v-center mdc-col-30">最近登录时间</div>
|
<div class="mdc-col mdc-content-v-center">{{user.ltime}}</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { resetPw } from '@/api/MdcApi'
|
import { isValidPassword } from '@/utils/validate'
|
export default {
|
name: 'userDetailDialog',
|
props: {
|
isVisible: {
|
type: Boolean,
|
default: false
|
},
|
user: {
|
type: Object,
|
default: {}
|
}
|
},
|
watch: {
|
isVisible(val) {
|
this.isShow = val
|
if (!val) {
|
this.$refs.rpw.resetFields()
|
}
|
this.isLargeAltering = false
|
}
|
},
|
data() {
|
// 密码自定义规则
|
const rulesPass = (rule, value, callback) => {
|
if (!isValidPassword(value)) {
|
callback(new Error(`可用字母、数字，长度不低于6位`))
|
} else if (value.length < 6) {
|
callback(new Error(`密码不能低于6位`))
|
} else {
|
callback()
|
}
|
}
|
return {
|
isShow: this.isVisible,
|
showEditPwDialog: false, // 密码重置弹框
|
isLargeAltering: false,
|
newPw: '', // 新密码
|
isNewPwPosting: false, // 提交新密码
|
pwObj: {
|
newPw: ''
|
},
|
myRules: {
|
newPw: [
|
{ required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
|
// 自定义规则
|
{ validator: rulesPass, trigger: ['blur', 'change'] }
|
]
|
}
|
}
|
},
|
methods: {
|
/**
|
* 取消/关闭对话框
|
*/
|
cancelDialog() {
|
this.$emit('submit', { action: 'cancel' })
|
},
|
showEditPw() {
|
if (window.innerWidth > 720) {
|
this.isLargeAltering = true
|
} else {
|
this.showEditPwDialog = true
|
}
|
},
|
resetPw() {
|
// todo 重置密码操作
|
this.$refs.rpw.validate((valid) => {
|
if (valid && !this.isNewPwPosting) {
|
this.isNewPwPosting = true
|
resetPw(this.user.user, this.pwObj.newPw).then(res => {
|
// console.log(res)
|
if (res.result === 'SUCCESS') {
|
this.$emit('submit', { action: 'confirm' })
|
this.showEditPwDialog = false
|
this.isNewPwPosting = false
|
this.isLargeAltering = false
|
this.$message({
|
message: '密码重置成功',
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '密码重置失败，请重试',
|
type: 'error'
|
})
|
}
|
})
|
} else {
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
>>>.el-dialog__body{
|
padding:20px 5px;
|
}
|
.mdc-table{}
|
.mdc-row{
|
display: flex;
|
padding: 5px;
|
width: 100%;
|
}
|
.mdc-row + .mdc-row {
|
margin-top: -5px;
|
padding-top: 0;
|
}
|
.mdc-col{
|
flex: 1;
|
display: block;
|
padding: 5px;
|
width: 100%;
|
border: 1px solid #e5e5e5;
|
box-sizing: border-box;
|
}
|
.mdc-content-v-center{
|
display: flex;
|
align-items: center;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.mdc-col-15 {
|
flex: 0 0 15%;
|
max-width: 15%; }
|
.mdc-col-30 {
|
flex: 0 0 30%;
|
max-width: 30%; }
|
.mdc-col-20 {
|
flex: 0 0 20%;
|
max-width: 20%; }
|
.mdc-col + .mdc-col {
|
border-left: none;
|
}
|
.mdc-row:nth-child(n) .mdc-col{
|
border-top: none;
|
}
|
.mdc-row:first-child .mdc-col {
|
border-top: 1px solid #e5e5e5;
|
}
|
.mdc-col:nth-child(2n+1){
|
background-color: #e7f1fd;
|
}
|
.password-reset-btn{
|
position: absolute;right:10px;color:#f56c6c;font-size: 18px;
|
}
|
.password-reset-btn:hover,.password-reset-btn:active{
|
color:#67C23A;
|
}
|
</style>
|
