You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.6 KiB
87 lines
2.6 KiB
<template> |
|
<el-dropdown class="head-icon" :size="state.size.size" :teleported="false"> |
|
<el-button :size="state.size.size" icon="Avatar" circle></el-button> |
|
<template #dropdown> |
|
<el-dropdown-menu> |
|
<el-dropdown-item v-if="center" @click="router.push(center)"> |
|
{{ t('head.center') }} |
|
</el-dropdown-item> |
|
<el-dropdown-item @click="updatePass">{{ t('pwd.changePwd') }}</el-dropdown-item> |
|
<el-dropdown-item @click="dispatch('logout'); emit('logout')">{{ t('head.logout') |
|
}}</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</template> |
|
</el-dropdown> |
|
|
|
<el-dialog :title="t('pwd.changePwd')" v-model="flag.update" :size="state.size.size" :close-on-click-modal="false" |
|
top="10vh" width="40%"> |
|
<ModifyForm :width="150" :param="password" @cancel="flag.update = false" |
|
@confirm="emit('updatePwd', password); flag.update = false" :rules="rules" :items="items"> |
|
</ModifyForm> |
|
</el-dialog> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { useStore } from "vuex"; |
|
import { reactive, onMounted, ref } from "vue"; |
|
import { Element, ModifyForm } from "noob-mengyxu"; |
|
import { useRouter } from "vue-router"; |
|
import { useI18n } from "vue3-i18n"; |
|
const { t } = useI18n(); |
|
|
|
const { state, commit, dispatch } = useStore(); |
|
const { SimpleRequired, SimplePassword } = Element; |
|
const router = useRouter(); |
|
const flag = reactive({ |
|
update: false |
|
}) |
|
const password = ref({ |
|
new: '', |
|
reNew: '', |
|
old: '' |
|
}) |
|
const emit = defineEmits(["updatePwd", "logout"]); |
|
|
|
const props = defineProps({ |
|
center: { |
|
type: String, |
|
default: null, |
|
}, |
|
}) |
|
|
|
const rules = { |
|
old: [new SimpleRequired('pwd.oldPwd')], |
|
new: [new SimpleRequired('pwd.newPwd'), new SimplePassword()], |
|
reNew: [{ |
|
required: true, |
|
trigger: 'blur', |
|
validator: (rule: any, value: any, callback: any) => { |
|
if (value == null || value === '') { |
|
callback(new Error(t('pwd.plsRePwd'))); |
|
} else if (value != password.value.new) { |
|
callback(new Error(t('pwd.rePwdError'))); |
|
} |
|
callback(); |
|
} |
|
}] |
|
} |
|
|
|
const items = [ |
|
{ i18n: 'pwd.oldPwd', code: 'old', type: "password" }, |
|
{ i18n: 'pwd.newPwd', code: 'new', type: "password" }, |
|
{ i18n: 'pwd.rePwd', code: 'reNew', type: "password" }, |
|
] |
|
|
|
const updatePass = () => { |
|
password.value = { |
|
new: '', |
|
reNew: '', |
|
old: '' |
|
}; |
|
flag.update = true; |
|
} |
|
|
|
onMounted(() => { }); |
|
</script> |
|
<style lang="scss" scoped></style> |