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
6 months ago
|
<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>
|