340 lines
10 KiB
Vue
340 lines
10 KiB
Vue
<template>
|
||
<div class="my" style="margin-top:7vh ;">
|
||
<el-row :gutter="10">
|
||
<div class="mybox">
|
||
<el-col :span="infoWidth" :xs="24">
|
||
<el-card class="box-card1">
|
||
<!-- 标题 -->
|
||
<template #header>
|
||
<div class="card-header">
|
||
<div v-if="isShowDiv"></div>
|
||
<div style="font-weight: bold">个人信息 <span v-if="isShowPassword">:</span></div>
|
||
<el-button v-if="isShowDiv" @click="changePassword" type="primary" plain size="small">修改密码</el-button>
|
||
</div>
|
||
|
||
</template>
|
||
<div class="userDetail">
|
||
<div class="userInfo_item">
|
||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||
<el-icon size="18" style="margin-right: 5px">
|
||
<User />
|
||
</el-icon>
|
||
<strong>工号 :</strong>
|
||
|
||
|
||
</div>
|
||
<div>{{ userParams.userNumber }}</div>
|
||
</div>
|
||
<div class="userInfo_item">
|
||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||
<el-icon size="18" style="margin-right: 5px">
|
||
<Notification />
|
||
</el-icon>
|
||
<strong>邮箱 :</strong>
|
||
|
||
</div>
|
||
<div>{{ userParams.email }}</div>
|
||
</div>
|
||
<div class="userInfo_item">
|
||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||
<el-icon size="18" style="margin-right: 5px">
|
||
<Notification />
|
||
</el-icon><strong>登录账号 :</strong>
|
||
|
||
</div>
|
||
<div>{{ userParams.loginAccount }}</div>
|
||
</div>
|
||
<div class="userInfo_item">
|
||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||
<el-icon size="18" style="margin-right: 5px">
|
||
<Folder />
|
||
</el-icon>
|
||
<strong>用户名称 :</strong>
|
||
|
||
</div>
|
||
<div>{{ userParams.userName }}</div>
|
||
</div>
|
||
<div class="userInfo_item">
|
||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||
<el-icon size="18" style="margin-right: 5px">
|
||
<Folder />
|
||
</el-icon>
|
||
<strong>手机号码 :</strong>
|
||
|
||
</div>
|
||
<div>{{ userParams.userPhone }}</div>
|
||
</div>
|
||
<div class="userInfo_item">
|
||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||
<el-icon size="18" style="margin-right: 5px">
|
||
<Folder />
|
||
</el-icon>
|
||
<strong>账号类型 :</strong>
|
||
|
||
</div>
|
||
<div>{{ userParams.accountType }}</div>
|
||
</div>
|
||
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<div class="line" v-if="isShowPassword"></div>
|
||
<el-col :span="10" :xs="24" v-if="isShowPassword">
|
||
<el-card class="box-card">
|
||
<!-- 标题 -->
|
||
<template #header>
|
||
<div class="card-header">
|
||
<div style="font-weight: bold">{{ isInitPassword ? '修改密码 :' : '初始化密码 :' }}</div>
|
||
</div>
|
||
</template>
|
||
<div class="card-body">
|
||
<el-form label-width="120px" ref="passwordRef" :model="userPassword" :rules="rules">
|
||
<el-form-item label="旧密码" prop="oldPassword" :required="true" style="text-align:left;margin: 7vh 0;"
|
||
v-if="isInitPassword">
|
||
<el-input placeholder="请输入旧密码" v-model="userPassword.oldPassword" type="password" :prefix-icon="Lock"
|
||
show-password="true" />
|
||
</el-form-item>
|
||
<el-form-item label="新密码" prop="newPassword" :required="true" style="text-align:left;margin: 7vh 0">
|
||
<el-input placeholder="请输入新密码" v-model="userPassword.newPassword" type="password" :prefix-icon="Lock"
|
||
show-password="true" />
|
||
</el-form-item>
|
||
<el-form-item label="确认密码" prop="confirmPassword" :required="true"
|
||
style="text-align:left;margin-top: 7vh;margin-bottom: 5vh">
|
||
<el-input placeholder="请确认新密码" v-model="userPassword.confirmPassword" type="password"
|
||
:prefix-icon="Lock" show-password="true" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<div class="button-word">
|
||
<el-button color="#409eff" @click="handleSubmit" style="color: white">提交</el-button>
|
||
<el-button color="#409eff" @click="close" style="color: white">关闭</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ElNotification } from 'element-plus'
|
||
import { useTagsView } from '@/stores/tagsview.js'
|
||
import { editPassword } from "@/api/auth/auth";
|
||
import { Lock } from '@element-plus/icons-vue'
|
||
import { ref } from 'vue';
|
||
|
||
const infoWidth = ref(22)
|
||
const isShowDiv = ref(true)
|
||
const isShowPassword = ref(false);
|
||
const isInitPassword = ref(true);
|
||
const userParams = ref({});
|
||
const passwordRef = ref();
|
||
const router = useRouter()
|
||
const userPassword = ref({
|
||
oldPassword: '',
|
||
newPassword: '',
|
||
confirmPassword: ''
|
||
});
|
||
const tagsViewStore = useTagsView()
|
||
|
||
const validatePasswordComplexity = (rule, value, callback) => {
|
||
const reg = /^(?=.*[a-zA-Z])(?=.*\d).{1,9}$/; //密码必须是至少包含字母、数字，1-9位
|
||
if (!reg.test(value)) {
|
||
callback(new Error("密码必须是至少包含字母、数字，1-9位"));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
|
||
|
||
const validatePasswordEquality = (rule, value, callback) => {
|
||
if (userPassword.value.newPassword != value) {
|
||
callback(new Error("两次输入密码不一致!"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
const rules = reactive({
|
||
oldPassword: [
|
||
{ required: true, message: "旧密码不能为空", trigger: ["change", "blur"] },
|
||
],
|
||
newPassword: [
|
||
{ required: true, message: "新密码不能为空", trigger: ["change", "blur"] },
|
||
{
|
||
required: true,
|
||
trigger: ["change", "blur"],
|
||
validator: validatePasswordComplexity
|
||
}
|
||
],
|
||
confirmPassword: [
|
||
{ required: true, message: "确认密码不能为空", trigger: ["change", "blur"] },
|
||
{
|
||
required: true,
|
||
trigger: ["change", "blur"],
|
||
validator: validatePasswordEquality
|
||
}
|
||
],
|
||
})
|
||
|
||
const getInfo = async () => {
|
||
await getAuthInfo().then(res => {
|
||
userParams.value = res.data.user
|
||
isInitPassword.value = res.data.initPassword
|
||
})
|
||
}
|
||
|
||
const belongToRole = (roles) => {
|
||
if (!roles) return;
|
||
return roles.map(item => item.roleName).join('，')
|
||
}
|
||
|
||
// 修改密码
|
||
const handleSubmit = async () => {
|
||
ElMessageBox.confirm(
|
||
'提交成功',
|
||
{
|
||
confirmButtonText: '关闭',
|
||
dangerouslyUseHTMLString: true,
|
||
// type: 'warning',
|
||
center: true,
|
||
showCancelButton: false,
|
||
'show-close': false,
|
||
customStyle: {
|
||
'max-width': '15%',
|
||
height: '40%'
|
||
},
|
||
message: `<svg t="1726160648055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2671" data-spm-anchor-id="a313x.search_index.0.i2.2bb23a81IdR6cV" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#67c23a" p-id="2672" data-spm-anchor-id="a313x.search_index.0.i3.2bb23a81IdR6cV" class=""></path></svg>
|
||
<br><br><div style="font-size: 18px;text-align:center"> 提交成功</div><br><br>`
|
||
|
||
}
|
||
)
|
||
editPassword({
|
||
...userPassword.value
|
||
}).then(res => {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: res.code === 1000 ? 'success' : 'error'
|
||
})
|
||
if (res.code === 1000) {
|
||
passwordRef.value.resetFields()
|
||
}
|
||
})
|
||
}
|
||
// 关闭
|
||
const close = () => {
|
||
// tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||
// router.push('/')
|
||
isShowPassword.value = false
|
||
isShowDiv.value = true
|
||
infoWidth.value = 22
|
||
}
|
||
|
||
const changePassword = () => {
|
||
isShowPassword.value = true
|
||
isShowDiv.value = false
|
||
infoWidth.value = 10
|
||
}
|
||
// onMounted(() => {
|
||
// getInfo()
|
||
// })
|
||
</script>
|
||
<style lang="scss">
|
||
body,
|
||
div {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.my {
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
|
||
.mybox {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between
|
||
}
|
||
|
||
.box-card {
|
||
height: 100%;
|
||
// width: 100%;
|
||
// background-color: blue;
|
||
|
||
}
|
||
|
||
.card-body {
|
||
width: 90%;
|
||
// display: flex;
|
||
height: 45vh;
|
||
// background-color: red;
|
||
|
||
// justify-content: space-around;
|
||
// flex-direction: column;
|
||
}
|
||
|
||
.line {
|
||
|
||
border-left: 1px solid #000;
|
||
}
|
||
|
||
.userDetail {
|
||
.userImg {
|
||
height: 170px;
|
||
text-align: center;
|
||
border-bottom-style: solid;
|
||
border-color: #daddd2;
|
||
border-width: 1px;
|
||
|
||
.avatar {
|
||
width: 150px;
|
||
height: 150px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.userInfo_item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
// height: 70px;
|
||
height: 9vh;
|
||
// border-bottom-style: solid;
|
||
// border-color: #daddd2;
|
||
// border-width: 1px;
|
||
//text-align: left;
|
||
//line-height: 40px;
|
||
|
||
}
|
||
|
||
.userInfo_label {
|
||
width: 100%;
|
||
border-bottom-style: solid;
|
||
border-color: #daddd2;
|
||
border-width: 2px;
|
||
}
|
||
|
||
//
|
||
//.userInfo_item > div {
|
||
// float: right;
|
||
//}
|
||
|
||
.button-word {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|