feat: i18n

This commit is contained in:
meilin.huang
2024-11-20 22:43:53 +08:00
parent 74ae031853
commit 99a746085b
308 changed files with 8177 additions and 3880 deletions

View File

@@ -4,80 +4,70 @@
<el-form :model="form" :inline="true" ref="menuForm" :rules="rules" label-width="auto">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item class="w100" prop="type" label="类型" required>
<el-select class="w100" v-model="form.type" :disabled="typeDisabled" placeholder="请选择">
<el-option v-for="item in ResourceTypeEnum" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
<el-form-item class="w100" prop="type" :label="$t('common.type')" required>
<enum-select :enums="ResourceTypeEnum" v-model="form.type" :disabled="typeDisabled" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item class="w100" prop="name" label="名称" required>
<el-input v-model.trim="form.name" placeholder="资源名[菜单名]" auto-complete="off"></el-input>
<el-form-item class="w100" prop="name" :label="$t('common.name')" required>
<el-input v-model.trim="form.name" auto-complete="off"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item class="w100" prop="code" label="path|code">
<template #label>
path|code
<el-tooltip
effect="dark"
content="菜单类型则为访问路径(若菜单路径不以'/'开头则访问地址会自动拼接父菜单路径)、否则为资源唯一编码"
placement="top"
>
<el-tooltip :content="$t('system.menu.menuCodeTips')" placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
<el-input v-model.trim="form.code" placeholder="菜单不以'/'开头则自动拼接父菜单路径"></el-input>
<el-input v-model.trim="form.code" :placeholder="$t('system.menu.menuCodePlaceholder')" auto-complete="off"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
<el-form-item class="w100" label="图标">
<el-form-item class="w100" :label="$t('system.menu.icon')">
<icon-selector v-model="form.meta.icon" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
<el-form-item class="w100">
<template #label>
路由名
<el-tooltip effect="dark" content="与vue的组件名一致才可使组件缓存生效如ResourceList" placement="top">
{{ $t('system.menu.routerName') }}
<el-tooltip :content="$t('system.menu.routerNameTips')" placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
<el-input v-model.trim="form.meta.routeName" placeholder="请输入路由名称"></el-input>
<el-input v-model.trim="form.meta.routeName"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
<el-form-item class="w100" prop="code">
<template #label>
组件路径
<el-tooltip effect="dark" content="访问的组件路径,如:`system/resource/ResourceList`,默认在`views`目录下" placement="top">
{{ $t('system.menu.componentPath') }}
<el-tooltip :content="$t('system.menu.componentPathTips')" placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
<el-input v-model.trim="form.meta.component" placeholder="请输入组件路径"></el-input>
<el-input v-model.trim="form.meta.component"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
<el-form-item class="w100" prop="isKeepAlive">
<template #label>
是否缓存
<el-tooltip
effect="dark"
content="选择是则会被`keep-alive`缓存(重新进入页面不会刷新页面及重新请求数据)需要路由名与vue的组件名一致"
placement="top"
>
{{ $t('system.menu.isCache') }}
<el-tooltip :content="$t('system.menu.isCacheTips')" placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
<el-select v-model="form.meta.isKeepAlive" placeholder="请选择" class="w100">
<el-select v-model="form.meta.isKeepAlive" class="w100">
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
@@ -85,21 +75,21 @@
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
<el-form-item class="w100">
<template #label>
是否隐藏
<el-tooltip effect="dark" content="选择隐藏则路由将不会出现在菜单栏中,但仍然可以访问。禁用则不可访问与操作" placement="top">
{{ $t('system.menu.isHide') }}
<el-tooltip :content="$t('system.menu.isHideTips')" placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
<el-select v-model="form.meta.isHide" placeholder="请选择" class="w100">
<el-select v-model="form.meta.isHide" class="w100">
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
<el-form-item class="w100" prop="code" label="tag不可删除">
<el-select v-model="form.meta.isAffix" placeholder="请选择" class="w100">
<el-form-item class="w100" prop="code" :label="$t('system.menu.tagIsDelete')">
<el-select v-model="form.meta.isAffix" class="w100">
<el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
@@ -107,23 +97,23 @@
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
<el-form-item class="w100" prop="linkType">
<template #label>
外链
<el-tooltip effect="dark" content="内嵌: 以iframe展示、外链: 新标签打开" placement="top">
{{ $t('system.menu.externalLink') }}
<el-tooltip content="" placement="top">
<el-icon>
<question-filled />
</el-icon>
</el-tooltip>
</template>
<el-select class="w100" @change="changeLinkType" v-model="form.meta.linkType" placeholder="请选择">
<el-option :key="0" label="" :value="0"> </el-option>
<el-option :key="1" label="内嵌" :value="1"> </el-option>
<el-option :key="2" label="外链" :value="2"> </el-option>
<el-select class="w100" @change="changeLinkType" v-model="form.meta.linkType">
<el-option :key="0" :label="$t('system.menu.no')" :value="0"> </el-option>
<el-option :key="1" :label="$t('system.menu.inline')" :value="1"> </el-option>
<el-option :key="2" :label="$t('system.menu.externalLink')" :value="2"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue && form.meta.linkType > 0">
<el-form-item prop="code" label="链接地址" class="w100">
<el-input v-model.trim="form.meta.link" placeholder="外链/内嵌的链接地址http://xxx.com"></el-input>
<el-form-item prop="code" :label="$t('system.menu.linkAddress')" class="w100">
<el-input v-model.trim="form.meta.link" :placeholder="$t('system.menu.linkPlaceholder')"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -131,8 +121,8 @@
<template #footer>
<div>
<el-button @click="cancel()"> </el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk"> </el-button>
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
@@ -146,6 +136,10 @@ import { resourceApi } from '../api';
import { ResourceTypeEnum } from '../enums';
import { notEmpty } from '@/common/assert';
import iconSelector from '@/components/iconSelector/index.vue';
import { useI18n } from 'vue-i18n';
import EnumSelect from '@/components/enumselect/EnumSelect.vue';
const { t } = useI18n();
const props = defineProps({
visible: {
@@ -185,7 +179,7 @@ const rules = {
name: [
{
required: true,
message: '请输入资源名称',
message: t('system.menu.menuNameRuleMsg'),
trigger: ['change', 'blur'],
},
],
@@ -193,11 +187,11 @@ const rules = {
const trueFalseOption = [
{
label: '是',
label: t('system.menu.yes'),
value: true,
},
{
label: '否',
label: t('system.menu.no'),
value: false,
},
];
@@ -258,7 +252,7 @@ const btnOk = async () => {
try {
await menuForm.value.validate();
} catch (e: any) {
ElMessage.error('请正确填写信息');
ElMessage.error(t('common.formValidationError'));
return false;
}
@@ -274,14 +268,14 @@ const btnOk = async () => {
await saveResouceExec();
emit('val-change', submitForm);
ElMessage.success('保存成功');
ElMessage.success(t('common.saveSuccess'));
cancel();
};
const parseMenuMeta = (meta: any) => {
let metaForm: any = {};
// 如果是菜单则校验meta
notEmpty(meta.routeName, '路由名不能为空');
notEmpty(meta.routeName, t('system.menu.routeNameNotEmpty'));
metaForm.routeName = meta.routeName;
if (meta.isKeepAlive) {
metaForm.isKeepAlive = true;