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
0a3c521361
commit
9aa1830a1b
1 changed files with 95 additions and 112 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. 207
      src/views/language/languageTranslate.vue

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

@ -6,28 +6,7 @@
<el-text size="large">搜索：</el-text>
<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: 12vw" clearable>
<el-option label="全部" value="" />
<el-option label="已翻译" value="translated" />
<el-option label="未翻译" value="untranslated" />
</el-select>
</div>
<!-- <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" />
<el-option label="财务审核" value="finance" />
<el-option label="充值管理" value="recharge" />
<el-option label="消耗管理" value="consumption" />
</el-select>
</div>
<div class="condition-item">
<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 class="btn">
<el-button type="primary" @click="search">搜索</el-button>
<el-button type="success" @click="reset">重置</el-button>
@ -50,7 +29,7 @@
</template>
</el-table-column>
<el-table-column prop="chineseSimplified" label="原文（中文）" width="200px">
<el-table-column prop="chineseSimplified" label="原文（中文）" width="180px" >
<template #default="scope">
<el-tooltip :content="scope.row.chineseSimplified" placement="top"
v-if="scope.row.chineseSimplified && scope.row.chineseSimplified.length > 20">
@ -60,83 +39,104 @@
</template>
</el-table-column>
<el-table-column prop="english" label="英文" width="150px">
<el-table-column prop="english" label="英文" width="180px" header-align="center">
<template #default="scope">
<el-tooltip :content="scope.row.english" placement="top"
v-if="scope.row.english && scope.row.english.length > 15">
<span>{{ truncateText(scope.row.english) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.english }}</span>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="flex: 1;">
<el-tooltip :content="scope.row.english" placement="top"
v-if="scope.row.english && scope.row.english.length > 15">
<span>{{ truncateText(scope.row.english) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.english }}</span>
</div>
<el-tag :type="scope.row.english ? 'success' : 'info'" size="small" style="margin-left: 8px;">
{{ scope.row.english ? '已翻译' : '未翻译' }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="thai" label="泰语" width="150px">
<el-table-column prop="thai" label="泰语" width="180px" header-align="center">
<template #default="scope">
<el-tooltip :content="scope.row.thai" placement="top"
v-if="scope.row.thai && scope.row.thai.length > 15">
<span>{{ truncateText(scope.row.thai) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.thai }}</span>
</template>
</el-table-column>
<el-table-column prop="chineseTraditional" label="繁体中文" width="150px">
<template #default="scope">
<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.chineseTraditional }}</span>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="flex: 1;">
<el-tooltip :content="scope.row.thai" placement="top"
v-if="scope.row.thai && scope.row.thai.length > 15">
<span>{{ truncateText(scope.row.thai) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.thai }}</span>
</div>
<el-tag :type="scope.row.thai ? 'success' : 'info'" size="small" style="margin-left: 8px;">
{{ scope.row.thai ? '已翻译' : '未翻译' }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="malay" label="马来语" width="150px">
<el-table-column prop="chineseTraditional" label="繁体中文" width="150px" header-align="center">
<template #default="scope">
<el-tooltip :content="scope.row.malay" placement="top"
v-if="scope.row.malay && scope.row.malay.length > 15">
<span>{{ truncateText(scope.row.malay) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.malay }}</span>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="flex: 1;">
<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.chineseTraditional }}</span>
</div>
<el-tag :type="scope.row.chineseTraditional ? 'success' : 'info'" size="small" style="margin-left: 8px;">
{{ scope.row.chineseTraditional ? '已翻译' : '未翻译' }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="vietnamese" label="越南语" width="150px">
<el-table-column prop="malay" label="马来语" width="150px" header-align="center">
<template #default="scope">
<el-tooltip :content="scope.row.vietnamese" placement="top"
v-if="scope.row.vietnamese && scope.row.vietnamese.length > 15">
<span>{{ truncateText(scope.row.vietnamese) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.vietnamese }}</span>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="flex: 1;">
<el-tooltip :content="scope.row.malay" placement="top"
v-if="scope.row.malay && scope.row.malay.length > 15">
<span>{{ truncateText(scope.row.malay) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.malay }}</span>
</div>
<el-tag :type="scope.row.malay ? 'success' : 'info'" size="small" style="margin-left: 8px;">
{{ scope.row.malay ? '已翻译' : '未翻译' }}
</el-tag>
</div>
</template>
</el-table-column>
<!-- <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 prop="status" label="状态" width="120px">
<el-table-column prop="vietnamese" label="越南语" width="150px" header-align="center">
<template #default="scope">
<el-tag :type="getStatusType(scope.row.status)" size="small">
{{ scope.row.status === 'translated' ? '已翻译' : '未翻译' }}
</el-tag>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="flex: 1;">
<el-tooltip :content="scope.row.vietnamese" placement="top"
v-if="scope.row.vietnamese && scope.row.vietnamese.length > 15">
<span>{{ truncateText(scope.row.vietnamese) }}</span>
</el-tooltip>
<span v-else>{{ scope.row.vietnamese }}</span>
</div>
<el-tag :type="scope.row.vietnamese ? 'success' : 'info'" size="small" style="margin-left: 8px;">
{{ scope.row.vietnamese ? '已翻译' : '未翻译' }}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="configTime" label="配置时间" width="180px">
<!-- 移除状态列 -->
<el-table-column prop="configTime" label="配置时间" width="180px" header-align="center">
<template #default="scope">
{{ moment(scope.row.configTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column prop="operation" label="操作" width="150px" fixed="right">
<el-table-column prop="operation" label="操作" width="155px" fixed="right" header-align="center">
<template #default="scope">
<el-button type="primary" text @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" text @click="handleDelete(scope.row)">删除</el-button>
<div style="display:flex; justify-content:center; ">
<el-button type="primary" text @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" text @click="handleDelete(scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
@ -187,14 +187,6 @@
<el-input v-model="editForm.vietnamese" placeholder="请输入越南语翻译" show-word-limit />
</el-form-item>
<!-- <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>
<template #footer>
@ -235,15 +227,13 @@ import ConfirmDialog from '@/components/dialogs/ConfirmDialog.vue'
const tableData = ref([])
const pagination = ref({
pageNum: 1,
pageSize: 10,
pageSize: 20,
total: 0
})
const searchForm = ref({
chineseSimplified: '',
languageStatus: '',
// module: [],
// timeRange: []
// 移除languageStatus字段
})
const showEditDialog = ref(false)
@ -263,13 +253,13 @@ const editForm = ref({
configTime: new Date()
})
// 计算属性 - 判断翻译状态
const translationStatus = computed(() => {
return (row) => {
const hasTranslation = row.english || row.thai || row.chineseTraditional || row.malay || row.vietnamese
return hasTranslation ? 'translated' : 'untranslated'
}
})
// 移除计算属性 - 不再需要统一的状态计算
// const translationStatus = computed(() => {
// return (row) => {
// const hasTranslation = row.english || row.thai || row.chineseTraditional || row.malay || row.vietnamese
// return hasTranslation ? 'translated' : 'untranslated'
// }
// })
// 方法定义
const truncateText = (text) => {
@ -277,20 +267,11 @@ 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
// 移除getStatusType方法，因为现在每个语言列单独判断状态
// const getStatusType = (status) => {
// return status === 'translated' ? 'success' : 'info'
// }
const getStatusType = (status) => {
return status === 'translated' ? 'success' : 'info'
}
// 搜索功能
const search = async () => {
await getTranslationList()
@ -300,9 +281,7 @@ const search = async () => {
const reset = () => {
searchForm.value = {
chineseSimplified: '',
languageStatus: '',
// module: [],
// timeRange: []
// 移除languageStatus
}
getTranslationList()
}
@ -323,10 +302,8 @@ const getTranslationList = async () => {
})
if (res.code === 200) {
tableData.value = res.data.list.map(item => ({
...item,
status: translationStatus.value(item)
}))
// 不再需要设置统一的状态字段
tableData.value = res.data.list
pagination.value.total = res.data.total
}
} catch (error) {
@ -375,6 +352,12 @@ const handleSave = async () => {
ElMessage.success(editForm.value.id ? '编辑成功' : '添加成功')
showEditDialog.value = false
getTranslationList()
} else if (res.code === 0) {
// 处理后端返回的错误信息
ElMessage.error(res.msg || '操作失败')
} else {
// 处理其他错误码
ElMessage.error(res.msg || '操作失败')
}
} catch (error) {
console.error('保存失败:', error)

Write Preview
Loading…
Cancel
Save