多语言优化
This commit is contained in:
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="dialogType === 'add' ? '新增菜单' : '编辑菜单'"
|
||||
:title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
|
||||
width="820px"
|
||||
align-center
|
||||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-form-item :label="$t('page.form.labelMenuType')" prop="type">
|
||||
<sa-radio v-model="formData.type" type="button" dict="menu_type"></sa-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级菜单" prop="parent_id">
|
||||
<el-form-item :label="$t('page.form.labelParentMenu')" prop="parent_id">
|
||||
<el-tree-select
|
||||
v-model="formData.parent_id"
|
||||
:data="optionData.treeData"
|
||||
@@ -22,63 +22,63 @@
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入菜单名称" />
|
||||
<el-form-item :label="$t('page.form.labelMenuName')" prop="name">
|
||||
<el-input v-model="formData.name" :placeholder="$t('page.form.labelMenuName')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type < 3">
|
||||
<el-form-item prop="path">
|
||||
<template #label>
|
||||
<sa-label
|
||||
label="路由地址"
|
||||
tooltip="一级菜单:以 / 开头的绝对路径(如 /dashboard) 二级及以下:相对路径(如 console、user)"
|
||||
:label="$t('page.form.labelRoutePath')"
|
||||
:tooltip="$t('page.form.labelRoutePathTip')"
|
||||
/>
|
||||
</template>
|
||||
<el-input v-model="formData.path" placeholder="如:/dashboard 或 console" />
|
||||
<el-input v-model="formData.path" :placeholder="$t('page.form.placeholderRoutePath')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type != 3">
|
||||
<el-form-item label="组件名称" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="如: User" />
|
||||
<el-form-item :label="$t('page.form.labelComponentName')" prop="code">
|
||||
<el-input v-model="formData.code" :placeholder="$t('page.form.placeholderComponentName')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type === 2">
|
||||
<el-form-item prop="component">
|
||||
<template #label>
|
||||
<sa-label label="组件路径" tooltip="填写组件路径(views目录下) 目录菜单:留空" />
|
||||
<sa-label :label="$t('page.form.labelComponentPath')" :tooltip="$t('page.form.labelComponentPathTip')" />
|
||||
</template>
|
||||
<el-autocomplete
|
||||
class="w-full"
|
||||
v-model="formData.component"
|
||||
:fetch-suggestions="querySearch"
|
||||
clearable
|
||||
placeholder="如:/system/user 或留空"
|
||||
:placeholder="$t('page.form.placeholderComponentPath')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type != 3">
|
||||
<el-form-item label="菜单图标" prop="icon">
|
||||
<el-form-item :label="$t('page.form.labelMenuIcon')" prop="icon">
|
||||
<sa-icon-picker v-model="formData.icon" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="formData.type === 3">
|
||||
<el-form-item label="权限标识" prop="slug">
|
||||
<el-input v-model="formData.slug" placeholder="请输入权限标识" />
|
||||
<el-form-item :label="$t('page.form.labelPermSlug')" prop="slug">
|
||||
<el-input v-model="formData.slug" :placeholder="$t('page.form.placeholderPermSlug')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="formData.type === 4">
|
||||
<el-form-item label="外链地址" prop="link_url">
|
||||
<el-input v-model="formData.link_url" placeholder="如:https://saithink.top" />
|
||||
<el-form-item :label="$t('page.form.labelLinkUrl')" prop="link_url">
|
||||
<el-input v-model="formData.link_url" :placeholder="$t('page.form.placeholderLinkUrl')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="sort">
|
||||
<template #label>
|
||||
<sa-label label="排序" tooltip="数字越大越靠前" />
|
||||
<sa-label :label="$t('page.form.labelSort')" :tooltip="$t('page.form.labelSortTip')" />
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
placeholder="请输入排序"
|
||||
:placeholder="$t('page.form.placeholderSort')"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
@@ -86,7 +86,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="status">
|
||||
<template #label>
|
||||
<sa-label label="状态" tooltip="禁用后,该菜单项将不可用" />
|
||||
<sa-label :label="$t('page.form.labelStatus')" :tooltip="$t('page.form.labelStatusTip')" />
|
||||
</template>
|
||||
<sa-radio v-model="formData.status" dict="data_status" />
|
||||
</el-form-item>
|
||||
@@ -94,7 +94,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_iframe">
|
||||
<template #label>
|
||||
<sa-label label="是否内嵌" tooltip="外链模式下有效" />
|
||||
<sa-label :label="$t('page.form.labelIsIframe')" :tooltip="$t('page.form.labelIsIframeTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_iframe" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -102,7 +102,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_keep_alive">
|
||||
<template #label>
|
||||
<sa-label label="是否缓存" tooltip="切换tabs不刷新" />
|
||||
<sa-label :label="$t('page.form.labelIsKeepAlive')" :tooltip="$t('page.form.labelIsKeepAliveTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_keep_alive" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -110,7 +110,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_hidden">
|
||||
<template #label>
|
||||
<sa-label label="是否隐藏" tooltip="不在菜单栏显示,但是可以通过路由访问" />
|
||||
<sa-label :label="$t('page.form.labelIsHidden')" :tooltip="$t('page.form.labelIsHiddenTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_hidden" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -118,7 +118,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_fixed_tab">
|
||||
<template #label>
|
||||
<sa-label label="是否固定" tooltip="固定在tabs导航栏" />
|
||||
<sa-label :label="$t('page.form.labelIsFixedTab')" :tooltip="$t('page.form.labelIsFixedTabTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_fixed_tab" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -126,7 +126,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="is_full_page">
|
||||
<template #label>
|
||||
<sa-label label="是否全屏" tooltip="不继承左侧菜单和顶部导航栏" />
|
||||
<sa-label :label="$t('page.form.labelIsFullPage')" :tooltip="$t('page.form.labelIsFullPageTip')" />
|
||||
</template>
|
||||
<sa-switch v-model="formData.is_full_page" dict="yes_or_no" :showText="false" />
|
||||
</el-form-item>
|
||||
@@ -134,8 +134,8 @@
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -144,6 +144,7 @@
|
||||
import api from '@/api/system/menu'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
@@ -163,6 +164,7 @@
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const optionData = reactive({
|
||||
@@ -197,14 +199,14 @@
|
||||
/**
|
||||
* 表单验证规则
|
||||
*/
|
||||
const rules = reactive<FormRules>({
|
||||
parent_id: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
|
||||
path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
|
||||
slug: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
|
||||
link_url: [{ required: true, message: '请输入外链地址', trigger: 'blur' }]
|
||||
})
|
||||
const rules = computed<FormRules>(() => ({
|
||||
parent_id: [{ required: true, message: t('page.form.ruleParentMenuRequired'), trigger: 'change' }],
|
||||
name: [{ required: true, message: t('page.form.ruleMenuNameRequired'), trigger: 'blur' }],
|
||||
path: [{ required: true, message: t('page.form.ruleRoutePathRequired'), trigger: 'blur' }],
|
||||
code: [{ required: true, message: t('page.form.ruleComponentNameRequired'), trigger: 'blur' }],
|
||||
slug: [{ required: true, message: t('page.form.rulePermSlugRequired'), trigger: 'blur' }],
|
||||
link_url: [{ required: true, message: t('page.form.ruleLinkUrlRequired'), trigger: 'blur' }]
|
||||
}))
|
||||
|
||||
/**
|
||||
* 初始数据
|
||||
@@ -302,10 +304,10 @@
|
||||
await formRef.value.validate()
|
||||
if (props.dialogType === 'add') {
|
||||
await api.save(formData)
|
||||
ElMessage.success('新增成功')
|
||||
ElMessage.success(t('page.form.addSuccess'))
|
||||
} else {
|
||||
await api.update(formData)
|
||||
ElMessage.success('修改成功')
|
||||
ElMessage.success(t('page.form.editSuccess'))
|
||||
}
|
||||
emit('success')
|
||||
handleClose()
|
||||
|
||||
Reference in New Issue
Block a user