zhangrenyuan
4 days ago
8 changed files with 570 additions and 4 deletions
-
12src/assets/SvgIcons/mutiple-language.svg
-
7src/router/index.js
-
2src/util/request.js
-
4src/utils/menuTreePermission.js
-
4src/utils/menuUtils.js
-
2src/views/activityManage/activity.vue
-
1src/views/home.vue
-
542src/views/language/languageTranslate.vue
@ -0,0 +1,12 @@ |
|||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 31" class="design-iconfont"> |
||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0085 0.38608C11.9389 0.0559933 15.4797 -0.285745 20.5862 0.38608C25.6927 1.0579 28.9411 3.89977 30.0237 7.3258C31.1063 10.7518 31.0277 17.4517 30.6289 20.8033C30.3013 24.8149 27.9662 29.5636 22.3821 30.3908C16.7979 31.2181 9.93529 30.9975 7.18245 30.0172C4.42961 29.0369 0.783904 26.9498 0.307218 21.1038C-0.169468 15.2577 -0.484463 7.41159 2.49025 4.23018C4.55287 1.77953 8.07806 0.716166 10.0085 0.38608Z" fill="#C0F2FF"/> |
||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.61719 23.264V7.64694C3.61719 6.23685 4.76029 5.09375 6.17038 5.09375H10.9232C12.4762 5.09375 14.0013 5.49747 15.3494 6.26363L15.5321 6.37035C16.6369 5.54169 17.9808 5.09375 19.3619 5.09375H24.8938C26.3039 5.09375 27.447 6.23685 27.447 7.64694V23.264C27.447 24.6741 26.3039 25.8172 24.8938 25.8172H19.3619C18.0383 25.8172 16.749 26.2285 15.6714 26.9922L15.5321 27.0938C14.1399 26.2584 12.5468 25.8172 10.9232 25.8172H6.17038C4.76029 25.8172 3.61719 24.6741 3.61719 23.264Z" fill="url(#zc4k4a1w8__paint0_linear_1264_34725)"/> |
||||
|
<path d="M21.7535 8.27734H9.12647C8.28947 8.27734 7.60547 8.96134 7.60547 9.79834V19.0593C7.60547 19.8963 8.28947 20.5803 9.12647 20.5803H13.0685L15.0305 22.5423C15.1475 22.6593 15.2915 22.7133 15.4445 22.7133C15.5975 22.7133 15.7415 22.6593 15.8585 22.5423L17.8205 20.5803H21.7625C22.5995 20.5803 23.2835 19.8963 23.2835 19.0593V9.79834C23.2745 8.96134 22.5995 8.27734 21.7535 8.27734ZM22.1045 19.0593C22.1045 19.2483 21.9515 19.4103 21.7535 19.4103H17.6945C17.5145 19.3743 17.3165 19.4283 17.1725 19.5723L15.4445 21.3003L13.7165 19.5723C13.5725 19.4283 13.3745 19.3743 13.1945 19.4103H9.12647C8.93747 19.4103 8.77547 19.2573 8.77547 19.0593V9.79834C8.77547 9.60934 8.92847 9.44734 9.12647 9.44734H21.7535C21.9515 9.44734 22.1045 9.60034 22.1045 9.79834V19.0593Z" fill="#fff"/> |
||||
|
<path d="M10.8119 10.9941C10.5149 10.9941 10.2719 11.2281 10.2539 11.5251V17.1051C10.2539 17.4111 10.5059 17.6631 10.8119 17.6631C11.1179 17.6631 11.3699 17.4111 11.3699 17.1051V11.5251C11.3519 11.2281 11.1089 10.9941 10.8119 10.9941ZM15.5009 13.1001C15.3389 12.9741 15.1319 12.8841 14.8979 12.8391C14.6639 12.7851 14.3939 12.7671 14.0969 12.7671C13.8449 12.7671 13.6199 12.7941 13.4309 12.8391C13.2419 12.8841 13.0709 12.9471 12.9269 13.0191C12.7829 13.0911 12.6569 13.1811 12.5579 13.2711C12.4769 13.3521 12.4049 13.4421 12.3509 13.5231C12.2699 13.6221 12.2159 13.7481 12.2159 13.8831C12.2159 14.1891 12.4679 14.4411 12.7739 14.4411C13.0439 14.4411 13.2689 14.2521 13.3229 14.0001L13.3319 13.9911C13.3769 13.9461 13.4309 13.9011 13.4939 13.8651C13.5659 13.8291 13.6469 13.7931 13.7369 13.7751C13.8359 13.7481 13.9439 13.7391 14.0789 13.7391C14.2139 13.7391 14.3399 13.7481 14.4479 13.7751C14.5469 13.7931 14.6279 13.8291 14.6909 13.8741C14.7539 13.9191 14.7989 13.9731 14.8349 14.0451C14.8709 14.1171 14.8889 14.2251 14.8889 14.3421V14.4231L14.0339 14.5041C13.7819 14.5311 13.5479 14.5671 13.3409 14.6301C13.1249 14.6931 12.9269 14.7741 12.7649 14.8911C12.6029 15.0081 12.4679 15.1701 12.3779 15.3591C12.2879 15.5481 12.2339 15.7821 12.2339 16.0521C12.2339 16.2591 12.2699 16.4481 12.3329 16.6281C12.3959 16.7991 12.4949 16.9611 12.6209 17.0871C12.7469 17.2131 12.8999 17.3211 13.0799 17.3841C13.2599 17.4561 13.4669 17.4921 13.7009 17.4921C13.9799 17.4921 14.2409 17.4291 14.4839 17.3121C14.6369 17.2311 14.7899 17.1411 14.9339 17.0331V17.2041C14.9339 17.5011 15.1769 17.7441 15.4739 17.7441C15.7709 17.7441 16.0139 17.5011 16.0139 17.2041V14.3601C16.0139 14.0631 15.9689 13.8111 15.8879 13.6041C15.7979 13.3971 15.6719 13.2261 15.5009 13.1001ZM14.8889 16.0431C14.8169 16.0971 14.7449 16.1601 14.6729 16.2051C14.5829 16.2681 14.4929 16.3221 14.4119 16.3671C14.3219 16.4121 14.2409 16.4481 14.1599 16.4751C14.0789 16.5021 14.0069 16.5111 13.9349 16.5111C13.7459 16.5111 13.6109 16.4751 13.5119 16.4031C13.4219 16.3401 13.3859 16.2051 13.3859 16.0251C13.3859 15.9171 13.4039 15.8181 13.4489 15.7461C13.4939 15.6741 13.5479 15.6111 13.6289 15.5571C13.7189 15.5031 13.8269 15.4581 13.9529 15.4311C14.0879 15.3951 14.2499 15.3771 14.4299 15.3591L14.8979 15.3141V16.0431H14.8889ZM20.4959 13.2081C20.3879 13.0641 20.2439 12.9471 20.0639 12.8751C19.8929 12.8031 19.6769 12.7671 19.4249 12.7671C19.2809 12.7671 19.1369 12.7851 18.9929 12.8301C18.8489 12.8751 18.7139 12.9291 18.5789 12.9921C18.4439 13.0641 18.3269 13.1451 18.2009 13.2351L18.0929 13.3161V13.2171V13.2981C18.0929 12.9921 17.8409 12.7491 17.5349 12.7491C17.2289 12.7491 16.9769 12.9921 16.9769 13.2981V13.2171V17.1951C16.9769 17.5011 17.2289 17.7531 17.5349 17.7531C17.8409 17.7531 18.0929 17.5011 18.0929 17.1951V14.3871C18.1739 14.3151 18.2549 14.2521 18.3449 14.1801C18.4439 14.1081 18.5429 14.0361 18.6419 13.9821C18.7409 13.9281 18.8309 13.8831 18.9299 13.8471C19.0199 13.8201 19.1009 13.8021 19.1729 13.8021C19.2899 13.8021 19.3799 13.8201 19.4429 13.8471C19.4969 13.8741 19.5419 13.9191 19.5779 13.9911C19.6139 14.0721 19.6409 14.1711 19.6499 14.3061C19.6589 14.4501 19.6679 14.6211 19.6679 14.8281V17.1951C19.6679 17.5011 19.9199 17.7531 20.2259 17.7531C20.5319 17.7531 20.7839 17.5011 20.7839 17.1951V14.4141C20.7839 14.1621 20.7659 13.9371 20.7209 13.7391C20.6849 13.5321 20.6039 13.3521 20.4959 13.2081Z" fill="#fff"/> |
||||
|
<defs> |
||||
|
<linearGradient id="zc4k4a1w8__paint0_linear_1264_34725" x1="39.3619" y1="16.0938" x2="19.665" y2="-7.37491" gradientUnits="userSpaceOnUse"> |
||||
|
<stop stop-color="#2FB7FC"/> |
||||
|
<stop offset="1" stop-color="#82DEFF"/> |
||||
|
</linearGradient> |
||||
|
</defs> |
||||
|
</svg> |
||||
@ -0,0 +1,542 @@ |
|||||
|
<template> |
||||
|
<!-- 筛选与搜索区域 --> |
||||
|
<el-card class="card1" style="margin-bottom: 1vh;"> |
||||
|
<div class="condition"> |
||||
|
<div class="condition-item"> |
||||
|
<el-text size="large">搜索：</el-text> |
||||
|
<el-input v-model="searchForm.originalText" style="width: 9vw" 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-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> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
|
||||
|
<el-card class="card2"> |
||||
|
<!-- 功能按钮区域 --> |
||||
|
<div class="add-item"> |
||||
|
<el-button type="success" @click="handleAdd">添加</el-button> |
||||
|
<el-button class="add-item-export" @click="handleBatchImport">批量导入</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<el-table :data="tableData" style="width: 82vw;height:70vh;" :row-style="{ height: '50px' }"> |
||||
|
<el-table-column type="index" label="序号" width="80px" fixed="left"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="originalText" 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> |
||||
|
<span v-else>{{ scope.row.originalText }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="english" label="英文" width="150px"> |
||||
|
<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> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="thai" label="泰语" width="150px"> |
||||
|
<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="traditionalChinese" 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> |
||||
|
<span v-else>{{ scope.row.traditionalChinese }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="malay" label="马来语" width="150px"> |
||||
|
<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> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="vietnamese" label="越南语" width="150px"> |
||||
|
<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> |
||||
|
</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"> |
||||
|
<template #default="scope"> |
||||
|
<el-tag :type="getStatusType(scope.row.status)" size="small"> |
||||
|
{{ scope.row.status === 'translated' ? '已翻译' : '未翻译' }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="configTime" label="配置时间" width="180px"> |
||||
|
<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"> |
||||
|
<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> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分页组件 --> |
||||
|
<div style="margin-top: 20px;display: flex;"> |
||||
|
<el-pagination background v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" |
||||
|
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" style="margin-top: 1vh;" |
||||
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
|
||||
|
<!-- 确认删除对话框 --> |
||||
|
<ConfirmDialog |
||||
|
v-model="showDeleteDialog" |
||||
|
message="删除该翻译记录！" |
||||
|
@confirm="handleDeleteConfirm" |
||||
|
@cancel="handleDeleteCancel" |
||||
|
@close="handleDeleteClose" |
||||
|
/> |
||||
|
|
||||
|
<!-- 编辑对话框 --> |
||||
|
<el-dialog v-model="showEditDialog" :title="editForm.id ? '编辑翻译' : '新增翻译'" width="20vw" draggable> |
||||
|
<el-form :model="editForm" label-width="120px"> |
||||
|
<el-form-item label="原文（中文）："> |
||||
|
<el-input v-model="editForm.originalText" placeholder="请输入原文内容" show-word-limit /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="英文："> |
||||
|
<el-input v-model="editForm.english" placeholder="请输入英文翻译" show-word-limit /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="泰语："> |
||||
|
<el-input v-model="editForm.thai" placeholder="请输入泰语翻译" show-word-limit /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="繁体中文："> |
||||
|
<el-input v-model="editForm.traditionalChinese" placeholder="请输入繁体中文翻译" |
||||
|
show-word-limit /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="马来语："> |
||||
|
<el-input v-model="editForm.malay" placeholder="请输入马来语翻译" show-word-limit /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="越南语："> |
||||
|
<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> |
||||
|
<el-button @click="showEditDialog = false">取消</el-button> |
||||
|
<el-button type="primary" @click="handleSave">保存</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 批量导入对话框 --> |
||||
|
<el-dialog v-model="showImportDialog" title="批量导入" width="40vw" draggable> |
||||
|
<div style="margin-bottom: 20px;"> |
||||
|
<el-text>下载导入模板：</el-text> |
||||
|
<el-button type="text" @click="downloadTemplate">中文/英文/泰语/繁体中文/马来语/越南语模板</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change="handleFileChange" |
||||
|
:show-file-list="false"> |
||||
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
||||
|
</el-upload> |
||||
|
|
||||
|
<template #footer> |
||||
|
<el-button @click="showImportDialog = false">取消</el-button> |
||||
|
<el-button type="primary" @click="handleImport">导入</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
||||
|
import { onMounted, ref, computed } from 'vue' |
||||
|
import API from "@/util/http.js" |
||||
|
import moment from 'moment' |
||||
|
import { UploadFilled } from '@element-plus/icons-vue' |
||||
|
import ConfirmDialog from '@/components/dialogs/ConfirmDialog.vue' |
||||
|
|
||||
|
// 响应式数据 |
||||
|
const tableData = ref([]) |
||||
|
const pagination = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0 |
||||
|
}) |
||||
|
|
||||
|
const searchForm = ref({ |
||||
|
originalText: '', |
||||
|
languageStatus: '', |
||||
|
module: [], |
||||
|
timeRange: [] |
||||
|
}) |
||||
|
|
||||
|
const showEditDialog = ref(false) |
||||
|
const showImportDialog = ref(false) |
||||
|
const showDeleteDialog = ref(false) |
||||
|
const currentDeleteRow = ref(null) // 当前要删除的行数据 |
||||
|
|
||||
|
const editForm = ref({ |
||||
|
id: '', |
||||
|
originalText: '', |
||||
|
english: '', |
||||
|
thai: '', |
||||
|
traditionalChinese: '', |
||||
|
malay: '', |
||||
|
vietnamese: '', |
||||
|
modules: [], |
||||
|
configTime: new Date() |
||||
|
}) |
||||
|
|
||||
|
// 计算属性 - 判断翻译状态 |
||||
|
const translationStatus = computed(() => { |
||||
|
return (row) => { |
||||
|
const hasTranslation = row.english || row.thai || row.traditionalChinese || row.malay || row.vietnamese |
||||
|
return hasTranslation ? 'translated' : 'untranslated' |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 方法定义 |
||||
|
const truncateText = (text) => { |
||||
|
if (!text) return '' |
||||
|
return text.length > 20 ? text.substring(0, 20) + '...' : text |
||||
|
} |
||||
|
|
||||
|
const getModuleLabel = (module) => { |
||||
|
const moduleMap = { |
||||
|
'dashboard': '工作台', |
||||
|
'finance': '财务审核', |
||||
|
'recharge': '充值管理', |
||||
|
'consumption': '消耗管理', |
||||
|
} |
||||
|
return moduleMap[module] || module |
||||
|
} |
||||
|
|
||||
|
const getStatusType = (status) => { |
||||
|
return status === 'translated' ? 'success' : 'info' |
||||
|
} |
||||
|
|
||||
|
// 搜索功能 |
||||
|
const search = async () => { |
||||
|
await getTranslationList() |
||||
|
} |
||||
|
|
||||
|
// 重置功能 |
||||
|
const reset = () => { |
||||
|
searchForm.value = { |
||||
|
originalText: '', |
||||
|
languageStatus: '', |
||||
|
module: [], |
||||
|
timeRange: [] |
||||
|
} |
||||
|
getTranslationList() |
||||
|
} |
||||
|
|
||||
|
// 获取翻译列表 |
||||
|
const getTranslationList = async () => { |
||||
|
try { |
||||
|
const params = { |
||||
|
pageNum: pagination.value.pageNum, |
||||
|
pageSize: pagination.value.pageSize, |
||||
|
...searchForm.value |
||||
|
} |
||||
|
|
||||
|
// 这里调用实际的API接口 |
||||
|
const res = await API({ |
||||
|
url: '/admin/language/translations', |
||||
|
data: params |
||||
|
}) |
||||
|
|
||||
|
if (res.code === 200) { |
||||
|
tableData.value = res.data.list.map(item => ({ |
||||
|
...item, |
||||
|
status: translationStatus.value(item) |
||||
|
})) |
||||
|
pagination.value.total = res.data.total |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('获取翻译列表失败:', error) |
||||
|
ElMessage.error('获取数据失败') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 编辑翻译 |
||||
|
const handleEdit = (row) => { |
||||
|
editForm.value = { ...row } |
||||
|
showEditDialog.value = true |
||||
|
} |
||||
|
|
||||
|
// 新增翻译 |
||||
|
const handleAdd = () => { |
||||
|
editForm.value = { |
||||
|
id: '', |
||||
|
originalText: '', |
||||
|
english: '', |
||||
|
thai: '', |
||||
|
traditionalChinese: '', |
||||
|
malay: '', |
||||
|
vietnamese: '', |
||||
|
modules: [], |
||||
|
configTime: new Date() |
||||
|
} |
||||
|
showEditDialog.value = true |
||||
|
} |
||||
|
|
||||
|
// 保存翻译 |
||||
|
const handleSave = async () => { |
||||
|
if (!editForm.value.originalText) { |
||||
|
ElMessage.error('请输入原文内容') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
const url = editForm.value.id ? '/admin/language/updateTranslation' : '/admin/language/addTranslation' |
||||
|
const res = await API({ |
||||
|
url: url, |
||||
|
data: editForm.value |
||||
|
}) |
||||
|
|
||||
|
if (res.code === 200) { |
||||
|
ElMessage.success(editForm.value.id ? '编辑成功' : '添加成功') |
||||
|
showEditDialog.value = false |
||||
|
getTranslationList() |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('保存失败:', error) |
||||
|
ElMessage.error('保存失败') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 删除翻译 - 打开确认对话框 |
||||
|
const handleDelete = (row) => { |
||||
|
currentDeleteRow.value = row |
||||
|
showDeleteDialog.value = true |
||||
|
} |
||||
|
|
||||
|
// 确认删除 |
||||
|
const handleDeleteConfirm = async () => { |
||||
|
try { |
||||
|
const res = await API({ |
||||
|
url: '/admin/language/deleteTranslation', |
||||
|
data: { id: currentDeleteRow.value.id } |
||||
|
}) |
||||
|
|
||||
|
if (res.code === 200) { |
||||
|
ElMessage.success('删除成功') |
||||
|
getTranslationList() |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('删除失败:', error) |
||||
|
ElMessage.error('删除失败') |
||||
|
} finally { |
||||
|
showDeleteDialog.value = false |
||||
|
currentDeleteRow.value = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 取消删除 |
||||
|
const handleDeleteCancel = () => { |
||||
|
showDeleteDialog.value = false |
||||
|
currentDeleteRow.value = null |
||||
|
} |
||||
|
|
||||
|
// 关闭删除对话框 |
||||
|
const handleDeleteClose = () => { |
||||
|
showDeleteDialog.value = false |
||||
|
currentDeleteRow.value = null |
||||
|
} |
||||
|
|
||||
|
// 批量导入 |
||||
|
const handleBatchImport = () => { |
||||
|
showImportDialog.value = true |
||||
|
} |
||||
|
|
||||
|
// 下载模板 |
||||
|
const downloadTemplate = () => { |
||||
|
// 这里实现下载模板的逻辑 |
||||
|
ElMessage.info('模板下载功能待实现') |
||||
|
} |
||||
|
|
||||
|
// 文件变化处理 |
||||
|
const handleFileChange = (file) => { |
||||
|
// 这里处理文件上传逻辑 |
||||
|
console.log('文件变化:', file) |
||||
|
} |
||||
|
|
||||
|
// 导入处理 |
||||
|
const handleImport = () => { |
||||
|
// 这里实现导入逻辑 |
||||
|
ElMessage.info('导入功能待实现') |
||||
|
} |
||||
|
|
||||
|
// 分页处理 |
||||
|
const handleSizeChange = (val) => { |
||||
|
pagination.value.pageSize = val |
||||
|
pagination.value.pageNum = 1 |
||||
|
getTranslationList() |
||||
|
} |
||||
|
|
||||
|
const handleCurrentChange = (val) => { |
||||
|
pagination.value.pageNum = val |
||||
|
getTranslationList() |
||||
|
} |
||||
|
|
||||
|
// 生命周期 |
||||
|
onMounted(() => { |
||||
|
getTranslationList() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
// 搜索卡片样式 - 与活动管理一致 |
||||
|
.card1 { |
||||
|
background: #F3FAFE; |
||||
|
} |
||||
|
|
||||
|
// 数据表格卡片样式 - 与活动管理一致 |
||||
|
.card2 { |
||||
|
background: #E7F4FD; |
||||
|
} |
||||
|
|
||||
|
// 表头背景等 - 与活动管理一致 |
||||
|
:deep(.el-table__header-wrapper), |
||||
|
:deep(.el-table__body-wrapper), |
||||
|
:deep(.el-table__cell), |
||||
|
/* 表格 */ |
||||
|
:deep(.el-table__body td) { |
||||
|
background-color: #F3FAFE !important; |
||||
|
} |
||||
|
|
||||
|
/* 表头 */ |
||||
|
:deep(.el-table__header th) { |
||||
|
background-color: #F3FAFE !important; |
||||
|
} |
||||
|
|
||||
|
/* 鼠标悬停 */ |
||||
|
:deep(.el-table__row:hover > .el-table__cell) { |
||||
|
background-color: #E5EBFE !important; |
||||
|
} |
||||
|
|
||||
|
.condition { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
.condition-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
min-width: 180px; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 4px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.add-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 4px; |
||||
|
margin-bottom: 1vh; |
||||
|
.add-item-export { |
||||
|
background-color: #5870FF; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 标签样式 |
||||
|
.el-tag { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
// 上传组件样式 |
||||
|
.upload-demo { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
:deep(.el-upload-dragger) { |
||||
|
width: 100%; |
||||
|
height: 180px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue