|
|
|
|
@ -1,14 +1,15 @@ |
|
|
|
|
<script setup> |
|
|
|
|
import { onMounted, ref, computed } from 'vue' |
|
|
|
|
import { onMounted, ref, computed, onUnmounted, onBeforeUnmount } from 'vue' |
|
|
|
|
import { |
|
|
|
|
userChangeService, |
|
|
|
|
userChangePasswordService, |
|
|
|
|
userCodeRegisterService, |
|
|
|
|
} from '@/api/user/user.js' |
|
|
|
|
// import { defineEmits } from 'vue' |
|
|
|
|
import useUserStore from '@/store/modules/user' |
|
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
|
import { ElMessage, dayjs } from 'element-plus' |
|
|
|
|
|
|
|
|
|
import { Edit } from '@element-plus/icons-vue' |
|
|
|
|
const props = defineProps({ |
|
|
|
|
name: { |
|
|
|
|
type: String, |
|
|
|
|
@ -36,12 +37,12 @@ const passFormVisible = ref(false) |
|
|
|
|
|
|
|
|
|
//dialog |
|
|
|
|
const form = ref({}) |
|
|
|
|
|
|
|
|
|
const formLabelWidth = '80px' |
|
|
|
|
//打开dialog |
|
|
|
|
form.value = { ...props.userData, code: '' } |
|
|
|
|
const openInfo = () => { |
|
|
|
|
dialogFormVisible.value = true |
|
|
|
|
form.value = { ...props.userData } |
|
|
|
|
codeVisible.value = false |
|
|
|
|
// console.log(form.value, 'form') |
|
|
|
|
} |
|
|
|
|
const openPass = () => { |
|
|
|
|
@ -64,20 +65,21 @@ const checkNewSame = (rule, value, cb) => { |
|
|
|
|
} |
|
|
|
|
//信息校验 |
|
|
|
|
const infoRules = { |
|
|
|
|
nickName: [ |
|
|
|
|
{ required: true, message: '请输入昵称', trigger: 'blur' }, |
|
|
|
|
{ |
|
|
|
|
max: 10, |
|
|
|
|
min: 1, |
|
|
|
|
message: '昵称长度最小一位最大十位', |
|
|
|
|
trigger: ['change', 'blur'], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
phone: [ |
|
|
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
|
|
|
|
{ |
|
|
|
|
pattern: /^1[3-9]\d{9}$/, |
|
|
|
|
message: '手机号格式不正确', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
nickName: [ |
|
|
|
|
{ required: true, message: '请输入昵称', trigger: 'blur' }, |
|
|
|
|
{ |
|
|
|
|
pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_]{1,10}$/, |
|
|
|
|
message: '昵称格式不正确', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
trigger: ['change', 'blur'], |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
} |
|
|
|
|
@ -117,15 +119,49 @@ const rules = { |
|
|
|
|
const infoRef = ref() |
|
|
|
|
//修改用户信息 |
|
|
|
|
const emit = defineEmits(['get-message']) |
|
|
|
|
//验证码倒计时 |
|
|
|
|
const countdown = ref(0) |
|
|
|
|
//修改手机号 |
|
|
|
|
const codeVisible = ref(false) |
|
|
|
|
//切换可见性 |
|
|
|
|
const toggleVisibility = () => { |
|
|
|
|
codeVisible.value = !codeVisible.value |
|
|
|
|
if (codeVisible.value == true) { |
|
|
|
|
// 清空输入框 |
|
|
|
|
form.value.phone = '' |
|
|
|
|
} else { |
|
|
|
|
// 如果输入框为空，可以设置为某个默认值，比如'sample text' |
|
|
|
|
form.value.phone = props.userData.phone // 这里可以根据需要自定义默认值 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 切换输入框的值，如果输入框当前有值则设置为空，如果没有值则设置为一个默认值 |
|
|
|
|
const toggleInputValue = () => {} |
|
|
|
|
//验证码 |
|
|
|
|
const codecode = ref() |
|
|
|
|
const codeSubmit = async () => { |
|
|
|
|
await infoRef.value.validate() |
|
|
|
|
// console.log('开始发起注册验证码') |
|
|
|
|
const phoness = form.value.phone |
|
|
|
|
userCodeRegisterService(phoness) |
|
|
|
|
.then((response) => { |
|
|
|
|
codecode.value = response.data |
|
|
|
|
console.log(codecode.value, 'codecode') |
|
|
|
|
}) |
|
|
|
|
.catch((error) => { |
|
|
|
|
console.log(error.message, 'error') |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const changePhone = () => { |
|
|
|
|
codeVisible.value = true |
|
|
|
|
} |
|
|
|
|
const changeInfo = async () => { |
|
|
|
|
await infoRef.value.validate() |
|
|
|
|
const userInfo = { |
|
|
|
|
await userChangeService({ |
|
|
|
|
phone: form.value.phone, |
|
|
|
|
id: form.value.id, |
|
|
|
|
nickName: form.value.nickName, |
|
|
|
|
} |
|
|
|
|
const jsonData = JSON.stringify(userInfo) |
|
|
|
|
await userChangeService(jsonData).then(() => { |
|
|
|
|
}).then(() => { |
|
|
|
|
ElMessage.success('修改成功') |
|
|
|
|
emit('get-message', form.value.nickName) |
|
|
|
|
}) |
|
|
|
|
@ -138,12 +174,11 @@ const cancleInfo = () => { |
|
|
|
|
const userStore = useUserStore() |
|
|
|
|
const onSubmit = async () => { |
|
|
|
|
await formRef.value.validate() |
|
|
|
|
const passData = ref({ |
|
|
|
|
await userChangePasswordService({ |
|
|
|
|
oldPassword: pwdForm.value.old_pwd, |
|
|
|
|
newPassword: pwdForm.value.new_pwd, |
|
|
|
|
username: props.userData.username, |
|
|
|
|
}) |
|
|
|
|
await userChangePasswordService(passData.value) |
|
|
|
|
.then(() => { |
|
|
|
|
ElMessage.success('密码修改成功') |
|
|
|
|
passFormVisible.value = false |
|
|
|
|
@ -173,8 +208,22 @@ const flagVisible = ref(true) |
|
|
|
|
|
|
|
|
|
//展示当前日期 |
|
|
|
|
const currentDate = new Date() |
|
|
|
|
const formattedDate = dayjs(currentDate).format('YYYY-MM-DD') |
|
|
|
|
const formattedDate = ref() |
|
|
|
|
// const formattedDate = dayjs(currentDate).format('YYYY-MM-DD HH:mm:ss') |
|
|
|
|
// const timer = ref() |
|
|
|
|
|
|
|
|
|
//获取验证码 |
|
|
|
|
let timer |
|
|
|
|
const updateCountdown = () => { |
|
|
|
|
if (countdown.value > 0) { |
|
|
|
|
countdown.value-- |
|
|
|
|
} else { |
|
|
|
|
clearInterval(timer) // 清除计时器 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
onBeforeUnmount(() => { |
|
|
|
|
clearInterval(timer) // 组件销毁前清除计时器，避免内存泄漏 |
|
|
|
|
}) |
|
|
|
|
onMounted(() => { |
|
|
|
|
username.value = props.data.name |
|
|
|
|
const hireDate = new Date(props.data.joinWorkTime) |
|
|
|
|
@ -182,6 +231,12 @@ onMounted(() => { |
|
|
|
|
// const currentDate = new Date() |
|
|
|
|
const millisecondsPerDay = 1000 * 60 * 60 * 24 |
|
|
|
|
daysOnJob.value = Math.floor((currentDate - hireDate) / millisecondsPerDay) |
|
|
|
|
let timer = setInterval(() => { |
|
|
|
|
formattedDate.value = dayjs(currentDate).format('YYYY-MM-DD HH:mm:ss') |
|
|
|
|
}, 100) |
|
|
|
|
}) |
|
|
|
|
onUnmounted(() => { |
|
|
|
|
clearInterval(timer) |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
<template> |
|
|
|
|
@ -212,7 +267,7 @@ onMounted(() => { |
|
|
|
|
title="登录信息" |
|
|
|
|
style="width: 800px; text-align: center" |
|
|
|
|
> |
|
|
|
|
<el-form :rules="infoRules" ref="infoRef" :data="form"> |
|
|
|
|
<el-form :model="form" :rules="infoRules" ref="infoRef" size="large"> |
|
|
|
|
<el-form-item label="用户名" :label-width="formLabelWidth"> |
|
|
|
|
<el-input :disabled="true" v-model="form.username" autocomplete="off" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
@ -220,13 +275,53 @@ onMounted(() => { |
|
|
|
|
<el-input v-model="form.nickName" autocomplete="off" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="手机" :label-width="formLabelWidth" prop="phone"> |
|
|
|
|
<el-input v-model="form.phone" autocomplete="off" /> |
|
|
|
|
<el-input v-model="form.phone" autocomplete="off" style="width: 92%" /> |
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
plain |
|
|
|
|
circle |
|
|
|
|
@click="toggleVisibility" |
|
|
|
|
style="margin-left: 2%" |
|
|
|
|
> |
|
|
|
|
<el-icon> |
|
|
|
|
<Edit /> |
|
|
|
|
</el-icon> |
|
|
|
|
</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
<el-form-item |
|
|
|
|
label="验证码" |
|
|
|
|
:label-width="formLabelWidth" |
|
|
|
|
prop="code" |
|
|
|
|
v-if="codeVisible" |
|
|
|
|
> |
|
|
|
|
<el-input |
|
|
|
|
type="text" |
|
|
|
|
v-model="form.code" |
|
|
|
|
placeholder="请输入验证码" |
|
|
|
|
size="large" |
|
|
|
|
style="width: 84%" |
|
|
|
|
/> |
|
|
|
|
<div class="p" v-if="countdown > 0"> |
|
|
|
|
<p>{{ countdown }} 秒</p> |
|
|
|
|
</div> |
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
plain |
|
|
|
|
v-if="countdown <= 0" |
|
|
|
|
@click="codeSubmit" |
|
|
|
|
:disabled="countdown > 0" |
|
|
|
|
> |
|
|
|
|
发送验证码 |
|
|
|
|
</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<template #footer> |
|
|
|
|
<div class="dialog-footer"> |
|
|
|
|
<el-button @click="cancleInfo">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="changeInfo">确认</el-button> |
|
|
|
|
<el-button type="primary" @click="changeInfo, toggleInputValue"> |
|
|
|
|
确认 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-dialog> |
|
|
|
|
@ -235,7 +330,7 @@ onMounted(() => { |
|
|
|
|
title="修改密码" |
|
|
|
|
style="width: 800px; text-align: center" |
|
|
|
|
> |
|
|
|
|
<el-form :rules="rules" ref="formRef" :data="pwdForm"> |
|
|
|
|
<el-form :rules="rules" ref="formRef" :model="pwdForm"> |
|
|
|
|
<el-form-item label="原密码" prop="old_pwd" :label-width="formLabelWidth"> |
|
|
|
|
<el-input |
|
|
|
|
type="password" |
|
|
|
|
@ -287,7 +382,7 @@ onMounted(() => { |
|
|
|
|
margin-right: 68px; |
|
|
|
|
} |
|
|
|
|
.intro { |
|
|
|
|
width: 60%; |
|
|
|
|
width: 50%; |
|
|
|
|
height: 22px; |
|
|
|
|
font-family: Inter, Inter; |
|
|
|
|
font-weight: bold; |
|
|
|
|
|
ww
3 months ago