| | |
| | | <el-form-item label="姓名:"> |
| | | <el-input |
| | | class="ztzf-input" |
| | | :style="{ width: pxToRem(230) }" |
| | | :style="{ width: pxToRem(350) }" |
| | | v-model="userInfo.realName" |
| | | disabled |
| | | /> |
| | |
| | | <!-- <el-form-item label="昵称:"> |
| | | <el-input class="ztzf-input" v-model="userInfo.name" /> |
| | | </el-form-item>--> |
| | | <el-form-item label="所属单位:"> |
| | | <el-form-item label="所属部门:"> |
| | | <el-input class="ztzf-input" v-model="userInfo.deptName" disabled /> |
| | | </el-form-item> |
| | | <el-form-item label="手机号:"> |
| | |
| | | <el-button @click="reset">重置</el-button> |
| | | </div> |
| | | </div> |
| | | <!-- 密钥上传 --> |
| | | <div class="upload-file" v-else-if="checked === 2"> |
| | | <img v-if="isSuccess === 'success'" :src="uploadSuccess" alt="" /> |
| | | <div v-if="isSuccess === 'success'">上传成功</div> |
| | | <img v-if="isSuccess === 'error'" :src="uploadError" alt="" /> |
| | | <div v-if="isSuccess === 'error'">上传失败</div> |
| | | <el-upload |
| | | action="/upload" |
| | | accept=".lic" |
| | | :show-file-list="false" |
| | | :before-upload="handleUpload" |
| | | > |
| | | <div class="upload-btn">密钥上传</div> |
| | | </el-upload> |
| | | <div class="password-time">密钥有效期:{{ passwordTime || '永久有效' }}</div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import request from '@/axios'; |
| | | import { getUserInfo, updateInfo, updatePassword } from '@/api/system/user'; |
| | | import { findLicenseDate } from '@/api/system/dict'; |
| | | import { uploadLicense } from '@/api/license/uploadLicense'; |
| | | import uploadSuccess from '@/assets/images/uoload-success.png'; |
| | | import uploadError from '@/assets/images/upload-error.png'; |
| | | import cancel1 from '@/assets/images/task/cancel1.png'; |
| | |
| | | const token = getToken(); |
| | | const userinforShow = defineModel('show'); |
| | | const userInfoAs = computed(() => store.state.user.userInfo); |
| | | const titleList = ref(['个人信息', '修改密码', '密钥上传']); |
| | | const titleList = ref(['个人信息', '修改密码']); |
| | | const checked = ref(0); |
| | | const uploadUrl = computed( |
| | | () => `${import.meta.env.VITE_APP_API_URL}/blade-resource/oss/endpoint/put-file` |
| | |
| | | }); |
| | | // 校验手机号 |
| | | const validatePhone = () => { |
| | | const phoneRegex = /^1[3-9]\d{9}$/; |
| | | if (!phoneRegex.test(userInfo.value.phone)) { |
| | | ElMessage.error('请输入正确的手机号码'); |
| | | const phone = userInfo.value.phone |
| | | if (!phone) return true |
| | | const phoneRegex = /^1[3-9]\d{9}$/ |
| | | if (!phoneRegex.test(phone)) { |
| | | ElMessage.error('请输入正确的手机号码') |
| | | return false |
| | | } |
| | | return true |
| | | } |
| | | // 校验邮箱 |
| | | const validateEmail = () => { |
| | | if (!userInfo.value.email) return true // 允许为空 |
| | | const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ |
| | | if (!emailRegex.test(userInfo.value.email)) { |
| | | ElMessage.error('请输入正确的邮箱地址') |
| | | return false |
| | | } |
| | | return true |
| | | } |
| | | // 校验密码不能包含中文 |
| | | const validatePasswordNoChinese = (password) => { |
| | | const chineseRegex = /[\u4e00-\u9fa5]/; |
| | | if (chineseRegex.test(password)) { |
| | | ElMessage.error('密码不能包含中文字符'); |
| | | return false; |
| | | } |
| | | return true; |
| | | }; |
| | | // 校验密码复杂度(长度≥6位,包含字母和数字) |
| | | const validatePasswordStrength = (password) => { |
| | | if (password.length < 6) { |
| | | ElMessage.error('密码长度不能少于6位'); |
| | | return false; |
| | | } |
| | | // const hasLetter = /[a-zA-Z]/.test(password); |
| | | // const hasNumber = /\d/.test(password); |
| | | // if (!hasLetter || !hasNumber) { |
| | | // ElMessage.error('密码需同时包含字母和数字'); |
| | | // return false; |
| | | // } |
| | | return true; |
| | | }; |
| | | const passwordForm = ref({ |
| | |
| | | |
| | | const titleClick = (item, index) => { |
| | | checked.value = index; |
| | | if (index === 2) { |
| | | getFindLicenseDate(); |
| | | } |
| | | }; |
| | | const getUserInfoData = () => { |
| | | getUserInfo().then(res => { |
| | |
| | | const emit = defineEmits(['logout']); |
| | | const submit = () => { |
| | | if (checked.value === 0) { |
| | | // if (!validatePhone()) return |
| | | if (!validatePhone() || !validateEmail()) return |
| | | userInfo.value.name = userInfo.value.realName; |
| | | updateInfo(userInfo.value).then(res => { |
| | | if (res.data.code === 200) { |
| | |
| | | } |
| | | }); |
| | | } else if (checked.value === 1) { |
| | | // 原始密码校验 |
| | | if (!passwordForm.value.oldPassword) { |
| | | ElMessage.error('请输入原始密码'); |
| | | return; |
| | | } |
| | | // 中文校验 |
| | | if (!validatePasswordNoChinese(passwordForm.value.newPassword)) return; |
| | | // 新密码校验 |
| | | if (!passwordForm.value.newPassword) { |
| | | ElMessage.error('请输入新密码'); |
| | | return; |
| | | } |
| | | // 确认密码校验 |
| | | if (passwordForm.value.newPassword !== passwordForm.value.newPassword1) { |
| | | ElMessage.error('两次输入的新密码不一致'); |
| | | return; |
| | | } |
| | | |
| | | // 复杂度校验 |
| | | if (!validatePasswordStrength(passwordForm.value.newPassword)) return; |
| | | updatePassword( |
| | | md5(passwordForm.value.oldPassword), |
| | | md5(passwordForm.value.newPassword), |
| | |
| | | }; |
| | | 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 => { |
| | |
| | | margin: 16px; |
| | | padding: 10px; |
| | | background-color: #ffffff; |
| | | height: 100%; |
| | | } |
| | | .titleBoxs { |
| | | margin: 0 24px; |
| | |
| | | :deep(.el-form-item__label) { |
| | | color: #000 !important; |
| | | } |
| | | :deep(.el-button) { |
| | | width: 150px !important; |
| | | } |
| | | // :deep(.el-button) { |
| | | // width: 150px !important; |
| | | // } |
| | | .info { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | justify-content: center; |
| | | align-items: center; |
| | | padding: 0 80px 0 50px; |
| | | .section:first-child{ |
| | | margin-right: 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; |
| | |
| | | .passwordBox { |
| | | margin-top: 40px; |
| | | } |
| | | .upload-file { |
| | | text-align: center; |
| | | margin-top: 60px; |
| | | .upload-btn { |
| | | width: 93px; |
| | | height: 38px; |
| | | background: #DDEBFF; |
| | | border-radius: 8px 8px 8px 8px; |
| | | border: 1px solid #409EFF; |
| | | text-align: center; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: bold; |
| | | font-size: 14px; |
| | | color: #228CFA; |
| | | line-height: 38px; |
| | | text-align: center; |
| | | margin-top: 10px; |
| | | } |
| | | .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> |