mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-18 23:30:25 +08:00
feat: i18n
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user