<template>
|
<el-dropdown trigger="click" @command="changeLanguage">
|
<i :class="'iconfont icon-zhongyingwen'" class="toolBar-icon"></i>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item
|
v-for="item in languageList"
|
:key="item.value"
|
:command="item.value"
|
:disabled="language === item.value"
|
>
|
{{ item.label }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</template>
|
|
<script setup lang="ts">
|
import { useI18n } from "vue-i18n";
|
import { computed } from "vue";
|
import { useGlobalStore } from "@/stores/modules/global";
|
import { LanguageType } from "@/stores/interface";
|
import { setLanguage } from "@/api/modules/hxzk/util/util";
|
|
const i18n = useI18n();
|
const globalStore = useGlobalStore();
|
const language = computed(() => globalStore.language);
|
|
const languageList = [
|
{ label: "简体中文", value: "zh" },
|
{ label: "English", value: "en" }
|
];
|
|
const changeLanguage = async (lang: string) => {
|
try {
|
// 先调用后端接口设置语言
|
const response = await setLanguage({ lang });
|
console.log("后端语言设置结果:", response);
|
|
// 然后设置前端语言
|
i18n.locale.value = lang;
|
globalStore.setGlobalState("language", lang as LanguageType);
|
// 刷新页面以应用所有翻译变化
|
window.location.reload();
|
} catch (error) {
|
console.error("设置语言失败:", error);
|
// 如果后端调用失败，仍然设置前端语言
|
i18n.locale.value = lang;
|
globalStore.setGlobalState("language", lang as LanguageType);
|
window.location.reload();
|
}
|
};
|
</script>
|
