wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多语言管理页面翻译，添加优化

Browse Source
This commit is contained in:
不做码农 2022-05-14 12:21:42 +08:00
parent aaae749c1f
commit 89b96a367e
9 changed files with 156 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/i18n/index.js
View File

@ -9,6 +9,10 @@ import pageLoginCn from './pages/login/zh-cn'
import pageLoginEn from './pages/login/en'
import pageLoginTw from './pages/login/zh-tw'
import pageLangSetCn from './pages/langSet/zh-cn'
import pageLangSetEn from './pages/langSet/en'
import pageLangSetTw from './pages/langSet/zh-tw'
const i18n = createI18n({
// 全局注入 $t 函数
globalInjection: true,
@ -16,9 +20,9 @@ const i18n = createI18n({
locale: store.getters.language, //默认选择的语言
legacy: false, // 使用 Composition API 模式，则需要将其设置为false
messages: {
'zh-cn': { ...zhCn, ...pageLoginCn },
'zh-tw': { ...zhTw, ...pageLoginTw },
'en': { ...en, ...pageLoginEn }
'zh-cn': { ...zhCn, ...pageLoginCn, ...pageLangSetCn },
'zh-tw': { ...zhTw, ...pageLoginTw, ...pageLangSetTw },
'en': { ...en, ...pageLoginEn, ...pageLangSetEn }
}
})
console.log('lang=' + store.getters.language)

9
src/i18n/lang/en.js
View File

@ -76,7 +76,13 @@ export default {
common: {
ok: 'Ok',
cancel: 'Cancel',
tips: 'tips'
tips: 'tips',
english: 'English',
chinese: 'Chinese',
traditionalChinese: 'TraditionalChinese',
name: 'Name',
content: 'Content',
addTime: 'AddTime'
},
btn: {
add: 'Add',
@ -107,5 +113,6 @@ export default {
upload: 'Upload',
view: 'To view',
copy: 'Copy',
operate: 'Operate'
}
};

9
src/i18n/lang/zh-cn.js
View File

@ -76,7 +76,13 @@ export default {
common: {
ok: '确定',
cancel: '取消',
tips: '提示'
tips: '提示',
english: '英文',
chinese: '中文',
traditionalChinese: '繁体',
name: '名称',
content: '内容',
addTime: '添加时间'
},
btn: {
add: '新增',
@ -107,5 +113,6 @@ export default {
upload: '上传',
view: '查看',
copy: '複製',
operate: '操作'
}
};

9
src/i18n/lang/zh-tw.js
View File

@ -76,7 +76,13 @@ export default {
common: {
ok: '確定',
cancel: '取消',
tips: '提示'
tips: '提示',
english: '英文',
chinese: '中文簡體',
traditionalChinese: '繁體',
name: '名稱',
content: '內容',
addTime: '添加時間'
},
btn: {
add: '新增',
@ -104,5 +110,6 @@ export default {
upload: '上傳',
view: '查看',
copy: '复制',
operate: '操作'
}
};

6
src/i18n/pages/langSet/en.js Normal file
View File

@ -0,0 +1,6 @@
export default {
language: 'Language',
languageKey: 'LanguageKey',
showWay: 'Show Way',
table: 'Table',
}

6
src/i18n/pages/langSet/zh-cn.js Normal file
View File

@ -0,0 +1,6 @@
export default {
language: '语言',
languageKey: '语言key',
showWay: '显示方式',
table: '表格',
}

6
src/i18n/pages/langSet/zh-tw.js Normal file
View File

@ -0,0 +1,6 @@
export default {
language: '语言',
languageKey: '语言key',
showWay: '显示方式',
table: '表格',
}

20
src/utils/ruoyi.js
View File

@ -1,4 +1,5 @@
const baseURL = import.meta.env.VITE_APP_BASE_API
const baseURL =
import.meta.env.VITE_APP_BASE_API
/**
* 通用js方法封装处理
* Copyright (c) 2019 ruoyi
@ -118,7 +119,9 @@ export function download(fileName) {
// 字符串格式化(%s )
export function sprintf(str) {
var args = arguments, flag = true, i = 1;
var args = arguments,
flag = true,
i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
@ -269,3 +272,16 @@ export function praseStrZero(str) {
}
return str;
}
/**
* 字符串是否为空
* @param {*} obj
* @returns
*/
export function isEmpty(obj) {
if (typeof obj == "undefined" || obj == null || obj === "") {
return true;
} else {
return false;
}
}

150
src/views/system/commonLang/index.vue
View File

@ -10,21 +10,21 @@
<div class="app-container">
<!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
<el-form-item label="语言code" prop="langCode">
<el-form-item :label="$t('language')" prop="langCode">
<el-select v-model="queryParams.langCode" placeholder="请选择语言code">
<el-option v-for="item in sys_lang_type" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="语言key" prop="langKey">
<el-form-item :label="$t('languageKey')" prop="langKey">
<el-input v-model="queryParams.langKey" placeholder="请输入语言key" />
</el-form-item>
<el-form-item label="显示方式">
<el-form-item :label="$t('showWay')">
<el-radio-group v-model="queryParams.showMode">
<el-radio-button label="1">表格</el-radio-button>
<el-radio-button label="2">行列</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="添加时间">
<el-form-item :label="$t('common.addTime')">
<el-date-picker
v-model="dateRangeAddtime"
style="width: 240px"
@ -49,14 +49,14 @@
<el-button type="primary" v-hasPermi="['system:lang:add']" plain icon="plus" @click="handleAdd">{{ $t('btn.add') }}</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" :disabled="single" v-hasPermi="['system:lang:edit']" plain icon="edit" @click="handleUpdate">{{
$t('btn.edit')
}}</el-button>
<el-button type="success" :disabled="single" v-hasPermi="['system:lang:edit']" plain icon="edit" @click="handleUpdate">
{{ $t('btn.edit') }}
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" :disabled="multiple" v-hasPermi="['system:lang:delete']" plain icon="delete" @click="handleDelete">{{
$t('btn.delete')
}}</el-button>
<el-button type="danger" :disabled="multiple" v-hasPermi="['system:lang:delete']" plain icon="delete" @click="handleDelete">
{{ $t('btn.delete') }}
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['system:lang:export']">{{ $t('btn.export') }}</el-button>
@ -77,16 +77,16 @@
<el-table-column type="selection" width="50" align="center" />
<!-- <el-table-column prop="id" label="id" align="center" /> -->
<el-table-column prop="langCode" label="语言code" align="center">
<el-table-column prop="langCode" :label="$t('language')" align="center">
<template #default="scope">
<dict-tag :options="sys_lang_type" :value="scope.row.langCode" />
</template>
</el-table-column>
<el-table-column prop="langKey" label="语言key" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="langName" label="名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="addtime" label="添加时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="langKey" :label="$t('languageKey')" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="langName" :label="$t('common.content')" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="addtime" :label="$t('common.addTime')" align="center" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="140">
<el-table-column :label="$t('btn.operate')" align="center" width="140">
<template #default="scope">
<el-button v-hasPermi="['system:lang:edit']" type="success" icon="edit" title="编辑" @click="handleUpdate(scope.row)"></el-button>
<el-button v-hasPermi="['system:lang:delete']" type="danger" icon="delete" title="删除" @click="handleDelete(scope.row)"></el-button>
@ -104,11 +104,13 @@
highlight-current-row
@sort-change="sortChange"
@selection-change="handleSelectionChange">
<el-table-column prop="langKey" label="语言key" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="zh-cn" label="中文" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="en" label="英文" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="zh-tw" label="繁体" align="center" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="140">
<el-table-column prop="langKey" :label="$t('languageKey')" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="zh-cn" :label="$t('common.chinese')" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="en" :label="$t('common.english')" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="zh-tw" :label="$t('common.traditionalChinese')" align="center" :show-overflow-tooltip="true" />
<el-table-column :label="$t('btn.operate')" align="center" width="140">
<template #default="scope">
<el-button v-hasPermi="['system:lang:edit']" type="success" icon="edit" title="编辑" @click="handleUpdateP(scope.row)"></el-button>
<!-- <el-button v-hasPermi="['system:lang:delete']" type="danger" icon="delete" title="删除" @click="handleDeleteP(scope.row)"></el-button> -->
@ -126,43 +128,37 @@
@pagination="getList" />
<!-- 添加或修改多语言配置对话框 -->
<el-dialog :title="title" :lock-scroll="false" v-model="open" width="500px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-dialog :title="title" :lock-scroll="false" v-model="open" width="550px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
<el-row :gutter="20">
<el-col :lg="24">
<el-form-item label="语言key" prop="langKey">
<el-form-item prop="langKey">
<template #label>
<el-tooltip content="翻译key，eg：message.title" placement="top">
<el-icon :size="15">
<questionFilled />
</el-icon>
</el-tooltip>
翻译key
{{ $t('languageKey') }}
</template>
<el-input v-model="form.langKey" placeholder="请输入语言key" />
</el-form-item>
</el-col>
<!-- <el-col :lg="24">
<el-form-item :label="item.langCode" prop="langName" v-for="(item, index) in form.langs" :key="index">
<el-input type="textarea" v-model="item.langName" placeholder="请输入名称" />
</el-form-item>
</el-col> -->
<el-col :lg="24">
<el-form-item label="中文内容" prop="langName">
<el-input type="textarea" v-model="form.langName" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="英文内容" prop="langNameEn">
<el-input type="textarea" v-model="form.langNameEn" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item label="繁体内容" prop="langNameTw">
<el-input type="textarea" v-model="form.langNameTw" placeholder="请输入名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-table :data="form.langList">
<el-table-column :label="$t('language')" align="center" prop="langCode" width="100">
<template #default="scope">
{{ scope.row.label }} <br />
{{ scope.row.langCode }}
</template>
</el-table-column>
<el-table-column :label="$t('common.content')" align="center">
<template #default="scope">
<el-input type="textarea" rows="2" prop="langName" v-model="scope.row.langName"></el-input>
</template>
</el-table-column>
</el-table>
</el-row>
</el-form>
<template #footer>
@ -176,16 +172,8 @@
</template>
<script setup name="commonlang">
import {
listCommonLang,
addCommonLang,
delCommonLang,
updateCommonLang,
getCommonLang,
exportCommonLang,
getCommonLangByKey,
} from '@/api/system/commonlang.js'
import { listCommonLang, delCommonLang, updateCommonLang, getCommonLang, exportCommonLang, getCommonLangByKey } from '@/api/system/commonlang.js'
import { isEmpty } from '@/utils/ruoyi.js'
const { proxy } = getCurrentInstance()
// 选中id数组数组
const ids = ref([])
@ -222,8 +210,6 @@ const state = reactive({
// langCode: [{ required: true, message: '语言code不能为空', trigger: 'change' }],
langKey: [{ required: true, pattern: /^[A-Za-z].+$/, message: '语言key不能为空', trigger: 'change' }],
langName: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
langNameEn: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
langNameTw: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
},
})
@ -272,6 +258,26 @@ function cancel() {
// 重置表单
function reset() {
form.value = {
langKey: undefined,
langList: [
{
langCode: 'zh-cn',
label: proxy.$t('common.chinese'),
langName: undefined,
},
{
langCode: 'zh-tw',
label: proxy.$t('common.traditionalChinese'),
langName: undefined,
},
{
langCode: 'en',
label: proxy.$t('common.english'),
langName: undefined,
},
],
}
proxy.resetForm('formRef')
}
@ -285,7 +291,7 @@ function handleQuery() {
function handleAdd() {
reset()
open.value = true
title.value = '添加'
title.value = proxy.$t('btn.add')
opertype.value = 1
}
@ -328,7 +334,7 @@ function handleUpdateP(row) {
const { code, data } = res
if (code == 200) {
open.value = true
title.value = '修改数据'
title.value = proxy.$t('btn.edit')
opertype.value = 2
form.value = {
@ -340,27 +346,25 @@ function handleUpdateP(row) {
// 表单提交
function submitForm() {
const formValid = ref(true)
form.value.langList.forEach((item) => {
if (isEmpty(item.langName)) {
formValid.value = false
}
})
if (!formValid.value) {
proxy.$modal.msgError(`请完成表格内容填写`)
return
}
proxy.$refs['formRef'].validate((valid) => {
if (valid) {
if (form.value.id != undefined && opertype.value === 2) {
updateCommonLang(form.value)
.then((res) => {
proxy.$modal.msgSuccess('修改成功')
proxy.$modal.msgSuccess('操作成功')
open.value = false
getList()
})
.catch(() => {})
} else {
addCommonLang(form.value)
.then((res) => {
proxy.$modal.msgSuccess('新增成功')
open.value = false
getList()
})
.catch((err) => {
//TODO 错误逻辑
})
}
}
})
}
@ -407,6 +411,6 @@ function sortChange(column) {
handleQuery()
}
handleQuery()
reset()
</script>