76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
||
<el-dialog :visible.sync="dialogVisible" title="重置密码" width="400px" :close-on-click-modal="false">
|
||
|
||
|
||
<el-descriptions :column="1" border>
|
||
<el-descriptions-item label="账号">{{ passwordData.userName | dv}}</el-descriptions-item>
|
||
<el-descriptions-item label="密码">
|
||
{{ password | dv}}
|
||
<el-button type="text" @click="showPassword = false" v-if="showPassword" icon="el-icon-unlock"/>
|
||
<el-button type="text" @click="showPassword = true" v-else icon="el-icon-view"/>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<div style="margin-top: 20px; text-align: center; color: red; font-size: 12px">
|
||
密码重置成功，仅在当前页面展示一次，请及时复制保存。
|
||
</div>
|
||
|
||
<el-row :gutter="4" style="margin-top: 20px;">
|
||
<el-col :span="6">
|
||
<el-button style="width: 100%" @click="handleClose" icon="el-icon-close">关闭</el-button>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-button style="width: 100%" type="primary" v-clipboard:copy="copyText" icon="el-icon-document-copy" v-clipboard:success="handleCopySuccess">复制</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'UserShowPasswordDialog',
|
||
props: {
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
passwordData: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
showPassword: false
|
||
}
|
||
},
|
||
computed: {
|
||
dialogVisible: {
|
||
get() {
|
||
return this.visible;
|
||
},
|
||
set(val) {
|
||
this.$emit('update:visible', val);
|
||
}
|
||
},
|
||
copyText() {
|
||
return `登录地址：https://ele.ccttiot.com\n账号：${this.passwordData.userName}\n密码：${this.passwordData.password}\n\n温馨提示：\n请妥善保管您的密码，并在登录系统后，及时修改密码。`;
|
||
},
|
||
password() {
|
||
return this.showPassword ? this.passwordData.password : '********';
|
||
}
|
||
},
|
||
methods: {
|
||
handleClose() {
|
||
this.$emit('update:visible', false);
|
||
},
|
||
handleCopySuccess() {
|
||
this.$message.success('复制成功');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
</style> |