huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

🦄 refactor: 修改了多语言配置页面的字段，语言切换的样式

zhangrenyuan/feature-20251125114759-多语言
zhangrenyuan 2 days ago
parent
3413f3a9ec
commit
234007d3d6
2 changed files with 56 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      src/components/dialogs/LanguageSwitch.vue
  2. 94
      src/views/language/languageTranslate.vue

21
src/components/dialogs/LanguageSwitch.vue
View File

@ -5,16 +5,9 @@
width="300px"
:close-on-click-modal="false"
append-to-body
class="language-switch-dialog"
>
<el-form label-width="80px">
<!-- <el-form-item label="当前语言">
<el-input
:model-value="getLangLabel(currentLang)"
disabled
/>
</el-form-item> -->
<el-form-item label="切换语言">
<el-select
v-model="tempLang"
@ -101,14 +94,16 @@ defineExpose({
</script>
<style>
.el-dialog__body {
height: 220px !important;
overflow-y: auto;
}
<style scoped>
.dialog-footer {
display: flex;
justify-content: center;
gap: 20px;
}
/* :deep(.el-dialog__body) {
height: 220px !important;
overflow-y: auto !important;
} */
</style>

94
src/views/language/languageTranslate.vue
View File

@ -4,17 +4,17 @@
<div class="condition">
<div class="condition-item">
<el-text size="large">搜索：</el-text>
<el-input v-model="searchForm.originalText" style="width: 9vw" placeholder="请输入原文内容" clearable />
<el-input v-model="searchForm.chineseSimplified" style="width: 12vw" placeholder="请输入原文内容" clearable />
</div>
<div class="condition-item">
<el-text size="large">语言状态：</el-text>
<el-select v-model="searchForm.languageStatus" placeholder="全部" style="width: 9vw" clearable>
<el-select v-model="searchForm.languageStatus" placeholder="全部" style="width: 12vw" clearable>
<el-option label="全部" value="" />
<el-option label="已翻译" value="translated" />
<el-option label="未翻译" value="untranslated" />
</el-select>
</div>
<div class="condition-item">
<!-- <div class="condition-item">
<el-text size="large">所属模块：</el-text>
<el-select v-model="searchForm.module" placeholder="请选择功能模块" style="width: 9vw" clearable multiple>
<el-option label="工作台" value="dashboard" />
@ -27,7 +27,7 @@
<el-text size="large">配置时间：</el-text>
<el-date-picker v-model="searchForm.timeRange" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" style="width: 16vw" clearable />
</div>
</div> -->
<div class="btn">
<el-button type="primary" @click="search">搜索</el-button>
<el-button type="success" @click="reset">重置</el-button>
@ -50,13 +50,13 @@
</template>
</el-table-column>
<el-table-column prop="originalText" label="原文（中文）" width="200px">
<el-table-column prop="chineseSimplified" label="原文（中文）" width="200px">
<template #default="scope">
<el-tooltip :content="scope.row.originalText" placement="top"
v-if="scope.row.originalText && scope.row.originalText.length > 20">
<span>{{ truncateText(scope.row.originalText) }}</span>
<el-tooltip :content="scope.row.chineseSimplified" placement="top"
v-if="scope.row.chineseSimplified && scope.row.chineseSimplified.length > 20">
<span>{{ truncateText(scope.row.chineseSimplified) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.originalText }}</span>
<span v-else>{{ scope.row.chineseSimplified }}</span>
</template>
</el-table-column>
@ -80,13 +80,13 @@
</template>
</el-table-column>
<el-table-column prop="traditionalChinese" label="繁体中文" width="150px">
<el-table-column prop="chineseTraditional" label="繁体中文" width="150px">
<template #default="scope">
<el-tooltip :content="scope.row.traditionalChinese" placement="top"
v-if="scope.row.traditionalChinese && scope.row.traditionalChinese.length > 15">
<span>{{ truncateText(scope.row.traditionalChinese) }}</span>
<el-tooltip :content="scope.row.chineseTraditional" placement="top"
v-if="scope.row.chineseTraditional && scope.row.chineseTraditional.length > 15">
<span>{{ truncateText(scope.row.chineseTraditional) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.traditionalChinese }}</span>
<span v-else>{{ scope.row.chineseTraditional }}</span>
</template>
</el-table-column>
@ -110,14 +110,14 @@
</template>
</el-table-column>
<el-table-column prop="modules" label="所属模块" width="180px">
<!-- <el-table-column prop="modules" label="所属模块" width="180px">
<template #default="scope">
<el-tag v-for="module in scope.row.modules" :key="module" size="small"
style="margin-right: 4px; margin-bottom: 4px;">
{{ getModuleLabel(module) }}
</el-tag>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column prop="status" label="状态" width="120px">
<template #default="scope">
@ -160,10 +160,10 @@
/>
<!-- 编辑对话框 -->
<el-dialog v-model="showEditDialog" :title="editForm.id ? '编辑翻译' : '新增翻译'" width="20vw" draggable>
<el-dialog v-model="showEditDialog" :title="editForm.id ? '编辑翻译' : '新增翻译'" width="30vw" draggable>
<el-form :model="editForm" label-width="120px">
<el-form-item label="原文（中文）：">
<el-input v-model="editForm.originalText" placeholder="请输入原文内容" show-word-limit />
<el-input v-model="editForm.chineseSimplified" placeholder="请输入原文内容" show-word-limit />
</el-form-item>
<el-form-item label="英文：">
@ -175,7 +175,7 @@
</el-form-item>
<el-form-item label="繁体中文：">
<el-input v-model="editForm.traditionalChinese" placeholder="请输入繁体中文翻译"
<el-input v-model="editForm.chineseTraditional" placeholder="请输入繁体中文翻译"
show-word-limit />
</el-form-item>
@ -187,14 +187,14 @@
<el-input v-model="editForm.vietnamese" placeholder="请输入越南语翻译" show-word-limit />
</el-form-item>
<el-form-item label="所属模块：">
<!-- <el-form-item label="所属模块：">
<el-select v-model="editForm.modules" placeholder="请选择功能模块" multiple style="width: 100%">
<el-option label="工作台" value="dashboard" />
<el-option label="财务审核" value="finance" />
<el-option label="充值管理" value="recharge" />
<el-option label="消耗管理" value="consumption" />
</el-select>
</el-form-item>
</el-form-item> -->
</el-form>
<template #footer>
@ -240,10 +240,10 @@ const pagination = ref({
})
const searchForm = ref({
originalText: '',
chineseSimplified: '',
languageStatus: '',
module: [],
timeRange: []
// module: [],
// timeRange: []
})
const showEditDialog = ref(false)
@ -253,20 +253,20 @@ const currentDeleteRow = ref(null) // 当前要删除的行数据
const editForm = ref({
id: '',
originalText: '',
chineseSimplified: '',
english: '',
thai: '',
traditionalChinese: '',
chineseTraditional: '',
malay: '',
vietnamese: '',
modules: [],
// modules: [],
configTime: new Date()
})
// 计算属性 - 判断翻译状态
const translationStatus = computed(() => {
return (row) => {
const hasTranslation = row.english || row.thai || row.traditionalChinese || row.malay || row.vietnamese
const hasTranslation = row.english || row.thai || row.chineseTraditional || row.malay || row.vietnamese
return hasTranslation ? 'translated' : 'untranslated'
}
})
@ -277,15 +277,15 @@ const truncateText = (text) => {
return text.length > 20 ? text.substring(0, 20) + '...' : text
}
const getModuleLabel = (module) => {
const moduleMap = {
'dashboard': '工作台',
'finance': '财务审核',
'recharge': '充值管理',
'consumption': '消耗管理',
}
return moduleMap[module] || module
}
// const getModuleLabel = (module) => {
// const moduleMap = {
// 'dashboard': '工作台',
// 'finance': '财务审核',
// 'recharge': '充值管理',
// 'consumption': '消耗管理',
// }
// return moduleMap[module] || module
// }
const getStatusType = (status) => {
return status === 'translated' ? 'success' : 'info'
@ -299,10 +299,10 @@ const search = async () => {
// 重置功能
const reset = () => {
searchForm.value = {
originalText: '',
chineseSimplified: '',
languageStatus: '',
module: [],
timeRange: []
// module: [],
// timeRange: []
}
getTranslationList()
}
@ -318,7 +318,7 @@ const getTranslationList = async () => {
// 这里调用实际的API接口
const res = await API({
url: '/admin/language/translations',
url: '/language/getTranslation',
data: params
})
@ -345,13 +345,13 @@ const handleEdit = (row) => {
const handleAdd = () => {
editForm.value = {
id: '',
originalText: '',
chineseSimplified: '',
english: '',
thai: '',
traditionalChinese: '',
chineseTraditional: '',
malay: '',
vietnamese: '',
modules: [],
// modules: [],
configTime: new Date()
}
showEditDialog.value = true
@ -359,13 +359,13 @@ const handleAdd = () => {
// 保存翻译
const handleSave = async () => {
if (!editForm.value.originalText) {
if (!editForm.value.chineseSimplified) {
ElMessage.error('请输入原文内容')
return
}
try {
const url = editForm.value.id ? '/admin/language/updateTranslation' : '/admin/language/addTranslation'
const url = editForm.value.id ? '/language/updateTranslation' : '/language/addTranslation'
const res = await API({
url: url,
data: editForm.value
@ -392,7 +392,7 @@ const handleDelete = (row) => {
const handleDeleteConfirm = async () => {
try {
const res = await API({
url: '/admin/language/deleteTranslation',
url: '/language/deleteTranslation',
data: { id: currentDeleteRow.value.id }
})

Write Preview
Loading…
Cancel
Save