<template>
|
<div>
|
<basic-container>
|
<avue-form
|
ref="form"
|
:option="option"
|
v-model="form"
|
@tab-click="handleTabClick"
|
@submit="handleSubmit"
|
|
>
|
<template #email="{ disabled, size }">
|
<el-input
|
id="adfsdafdsf"
|
type="text"
|
:disabled="disabled"
|
:size="size"
|
v-model="form.email"
|
placeholder="请输入邮箱"
|
:readonly="readonly"
|
@focus="readonly = false"
|
>
|
</el-input>
|
</template>
|
</avue-form>
|
</basic-container>
|
</div>
|
</template>
|
|
<script>
|
import option from '@/option/user/info';
|
import { getUserInfo, updateInfo, updatePassword } from '@/api/system/user';
|
import md5 from 'js-md5';
|
import func from '@/utils/func';
|
import { validatenull } from '@/utils/validate';
|
import defaultAva from '@/assets/images/defaultava.png';
|
export default {
|
data() {
|
return {
|
index: 0,
|
option: option,
|
form: { },
|
readonly: true
|
};
|
},
|
created() {
|
this.handleWitch();
|
},
|
methods: {
|
handleSubmit(form, done) {
|
if (this.index === 0) {
|
form.name = form.realName;
|
updateInfo(form).then(
|
res => {
|
if (res.data.success) {
|
this.$message({
|
type: 'success',
|
message: '修改信息成功!',
|
});
|
} else {
|
this.$message({
|
type: 'error',
|
message: res.data.msg,
|
});
|
}
|
done();
|
},
|
error => {
|
window.console.log(error);
|
done();
|
}
|
);
|
} else {
|
updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(
|
res => {
|
if (res.data.success) {
|
this.$message({
|
type: 'success',
|
message: '修改密码成功，请重新登录!',
|
});
|
this.$store.dispatch('LogOut').then(() => {
|
this.$router.push({ path: '/login' })
|
})
|
} else {
|
this.$message({
|
type: 'error',
|
message: res.data.msg,
|
});
|
}
|
done();
|
},
|
error => {
|
window.console.log(error);
|
done();
|
}
|
);
|
}
|
},
|
handleWitch() {
|
if (this.index === 0) {
|
getUserInfo().then(res => {
|
const user = res.data.data;
|
this.form = {
|
id: user.id,
|
avatar: user.avatar ? user.avatar :defaultAva,
|
name: user.name,
|
realName: user.realName,
|
phone: user.phone,
|
email: user.email,
|
};
|
|
});
|
}
|
},
|
|
import uploadSuccess from '@/assets/images/uoload-success.png';
|
import uploadError from '@/assets/images/upload-error.png';
|
import cancel1 from '@/assets/images/task/cancel1.png';
|
import publish1 from '@/assets/images/task/publish1.png';
|
|
const store = useStore()
|
const token = getToken()
|
const userinforShow = defineModel('show')
|
const userInfoAs = computed(() => store.state.user.userInfo)
|
const titleList = ref(['个人信息', '修改密码', '密钥上传'])
|
const checked = ref(0)
|
const uploadUrl = computed(() => `${import.meta.env.VITE_APP_API_URL}/blade-resource/oss/endpoint/put-file`)
|
// 表单数据
|
const userInfo = ref({
|
id: '',
|
avatar: '',
|
realName: '',
|
name: '',
|
phone: '',
|
email: '',
|
deptName: '',
|
})
|
// 校验手机号
|
const validatePhone = () => {
|
const phoneRegex = /^1[3-9]\d{9}$/
|
if (!phoneRegex.test(userInfo.value.phone)) {
|
ElMessage.error('请输入正确的手机号码')
|
return false
|
}
|
return true
|
}
|
const passwordForm = ref({
|
oldPassword: '',
|
newPassword: '',
|
newPassword1: '',
|
})
|
// 头像
|
const beforeAvatarUpload = file => {
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
const isLt500KB = file.size / 1024 < 500
|
if (!isJpgOrPng) {
|
ElMessage.error('头像图片只能是 JPG/PNG 格式!')
|
return false
|
}
|
if (!isLt500KB) {
|
ElMessage.error('头像图片大小不能超过 500KB!')
|
return false
|
}
|
return true
|
}
|
const uploadLoading = ref(false)
|
|
const customUpload = async options => {
|
const { file } = options
|
uploadLoading.value = true
|
|
const formData = new FormData()
|
formData.append('file', file) // 根据后端API调整字段名
|
try {
|
const res = await request.post('/blade-resource/oss/endpoint/put-file', formData, {
|
headers: {
|
'Content-Type': 'multipart/form-data',
|
},
|
})
|
|
if (res.data.code === 200) {
|
ElMessage.success('头像上传成功')
|
userInfo.value.avatar = res.data.data.link
|
return res.data
|
} else {
|
throw new Error(res.data.msg || '上传失败')
|
}
|
} catch (error) {
|
ElMessage.error(error.response?.data?.msg || error.message || '上传失败')
|
return Promise.reject(error)
|
} finally {
|
uploadLoading.value = false
|
}
|
}
|
|
const titleClick = (item, index) => {
|
checked.value = index
|
if (index === 2) {
|
getFindLicenseDate()
|
}
|
}
|
const getUserInfoData = () => {
|
getUserInfo().then(res => {
|
const user = res.data.data
|
userInfo.value = {
|
id: user.id,
|
avatar: user.avatar,
|
name: user.name,
|
realName: user.realName,
|
phone: user.phone,
|
email: user.email,
|
deptName: user.deptName,
|
}
|
})
|
}
|
const emit = defineEmits(['logout'])
|
const submit = () => {
|
if (checked.value === 0) {
|
// if (!validatePhone()) return
|
userInfo.value.name = userInfo.value.realName
|
updateInfo(userInfo.value).then(res => {
|
if (res.data.code === 200) {
|
ElMessage.success('修改信息成功!')
|
userinforShow.value = false
|
} else {
|
ElMessage.error(res.msg)
|
}
|
})
|
} else if (checked.value === 1) {
|
updatePassword(
|
md5(passwordForm.value.oldPassword),
|
md5(passwordForm.value.newPassword),
|
md5(passwordForm.value.newPassword1)
|
).then(res => {
|
if (res.data.code === 200) {
|
ElMessage.success('修改密码成功!')
|
// 调用父组件方法
|
userinforShow.value = false
|
emit('logout')
|
} else {
|
ElMessage.error(res.msg)
|
}
|
})
|
}
|
}
|
const reset = () => {
|
if (checked.value === 0) {
|
getUserInfoData()
|
userinforShow.value = false
|
} else if (checked.value === 1) {
|
passwordForm.value = {
|
id: userInfoAs.value.userId,
|
oldPassword: '',
|
newPassword: '',
|
newPassword1: '',
|
}
|
userinforShow.value = false
|
}
|
}
|
const isSuccess = ref('')
|
const passwordTime = ref('')
|
const handleUpload = file => {
|
const formData = new FormData()
|
formData.append('file', file)
|
uploadLicense(formData)
|
.then(res => {
|
if (res.data.code !== 200) return ElMessage.error('上传失败')
|
ElMessage.success('上传成功')
|
isSuccess.value = 'success'
|
getFindLicenseDate()
|
})
|
.catch(err => {
|
isSuccess.value = 'error'
|
ElMessage.error('上传失败')
|
})
|
}
|
const getFindLicenseDate = () => {
|
findLicenseDate()
|
.then(res => {
|
if (res.data.code !== 0) return ElMessage.error('获取失败')
|
passwordTime.value = res.data.data
|
})
|
.catch(err => {
|
ElMessage.error('获取失败')
|
})
|
}
|
// const dialogImageUrl = ref('')
|
// const dialogVisible = ref(false)
|
// const handlePictureCardPreview = () => {}
|
// const handleRemove = () => {}
|
onMounted(() => {
|
getUserInfoData()
|
})
|
</script>
|
<style scoped lang="scss">
|
.user-info-new {
|
margin: 16px;
|
padding: 10px;
|
background-color: #ffffff;
|
}
|
.titleBoxs {
|
margin: 0 24px;
|
margin-bottom: 10px;
|
// background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
|
// background-size: 100% 100%;
|
p {
|
display: inline-block;
|
margin-left: 30px;
|
font-size: 16px;
|
color: #000;
|
line-height: 20px;
|
text-align: left;
|
margin-bottom: 8px;
|
}
|
}
|
:deep(.el-form-item__label) {
|
color: #000 !important;
|
}
|
:deep(.el-button) {
|
width: 150px !important;
|
}
|
.info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 80px 0 50px;
|
}
|
.password {
|
padding: 0 120px 0 50px;
|
}
|
.butn {
|
// position: absolute;
|
// bottom: 20px;
|
// left: 50%;
|
// transform: translate(-50%);
|
display: flex;
|
justify-content: center;
|
cursor: pointer;
|
img {
|
width: 96px;
|
height: 32px;
|
}
|
}
|
.titleBoxs {
|
display: flex;
|
padding: 0 20px;
|
}
|
.titleItem {
|
color: #61809c;
|
font-size: 16px;
|
margin-right: 50px;
|
cursor: pointer;
|
}
|
.activeItem {
|
border-radius: 0px 0px 0px 0px;
|
color: #51abff;
|
border-bottom: 2px solid #198cff;
|
}
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
.upload-tip {
|
margin-top: 10px;
|
color: #999;
|
font-size: 12px;
|
text-align: center;
|
}
|
.message,
|
.passwordBox {
|
margin-top: 40px;
|
}
|
.upload-file {
|
text-align: center;
|
margin-top: 60px;
|
.upload-btn {
|
width: 93px;
|
height: 38px;
|
line-height: 38px;
|
background: #1b3e6c;
|
border-radius: 8px 8px 8px 8px;
|
border: 1px solid #ffffff;
|
color: #fff;
|
text-align: center;
|
}
|
.password-time {
|
margin-top: 50px;
|
width: 100%;
|
height: 16px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #2d9dff;
|
line-height: 16px;
|
// text-align: left;
|
}
|
}
|
</style>
|
