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

src/i18n/index.js

@@ -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-cn': { ...zhCn, ...pageLoginCn, ...pageLangSetCn },
-    'zh-tw': { ...zhTw, ...pageLoginTw },
+    'zh-tw': { ...zhTw, ...pageLoginTw, ...pageLangSetTw },
-    'en': { ...en, ...pageLoginEn }
+    'en': { ...en, ...pageLoginEn, ...pageLangSetEn }
   }
 })
 console.log('lang=' + store.getters.language)

src/i18n/lang/en.js

@@ -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'
   }
 };

src/i18n/lang/zh-cn.js

@@ -76,7 +76,13 @@ export default {
   common: {
     ok: '确定',
     cancel: '取消',
-    tips: '提示'
+    tips: '提示',
+    english: '英文',
+    chinese: '中文',
+    traditionalChinese: '繁体',
+		name: '名称',
+		content: '内容',
+    addTime: '添加时间'
   },
   btn: {
     add: '新增',
@@ -90,8 +96,8 @@ export default {
     synchronize: '同步',
     generateCode: '生成代码',
     start: '启动',
-		stop: '停止',
+    stop: '停止',
-		run: '运行',
+    run: '运行',
     runOnce: '运行一次',
     log: '日志',
     expand: '展开',
@@ -107,5 +113,6 @@ export default {
     upload: '上传',
     view: '查看',
     copy: '複製',
+    operate: '操作'
   }
 };

src/i18n/lang/zh-tw.js

@@ -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: '操作'
   }
 };

src/i18n/pages/langSet/en.js

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

src/i18n/pages/langSet/zh-cn.js

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

src/i18n/pages/langSet/zh-tw.js

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

src/utils/ruoyi.js

@@ -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
@@ -94,7 +95,7 @@ export function selectDictLabel(datas, value) {
 
 // 回显数据字典（字符串数组）
 export function selectDictLabels(datas, value, separator) {
-  if(value === undefined) {
+  if (value === undefined) {
     return "";
   }
   var actions = [];
@@ -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') {
@@ -206,9 +209,9 @@ export function handleTree(data, id, parentId, children) {
 }
 
 /**
-* 参数处理
+ * 参数处理
-* @param {*} params  参数
+ * @param {*} params  参数
-*/
+ */
 export function tansParams(params) {
   let result = ''
   for (const propName of Object.keys(params)) {
@@ -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;
+  }
+}

src/views/system/commonLang/index.vue

@@ -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">{{
+        <el-button type="success" :disabled="single" v-hasPermi="['system:lang:edit']" plain icon="edit" @click="handleUpdate">
-          $t('btn.edit')
+          {{ $t('btn.edit') }}
-        }}</el-button>
+        </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">{{
+        <el-button type="danger" :disabled="multiple" v-hasPermi="['system:lang:delete']" plain icon="delete" @click="handleDelete">
-          $t('btn.delete')
+          {{ $t('btn.delete') }}
-        }}</el-button>
+        </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="langKey" :label="$t('languageKey')" align="center" :show-overflow-tooltip="true" />
-      <el-table-column prop="langName" label="名称" 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="添加时间" 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="langKey" :label="$t('languageKey')" 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-cn" :label="$t('common.chinese')" align="center" :show-overflow-tooltip="true" />
-      <el-table-column prop="zh-tw" label="繁体" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="en" :label="$t('common.english')" align="center" :show-overflow-tooltip="true" />
-      <el-table-column label="操作" align="center" width="140">
+      <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-dialog :title="title" :lock-scroll="false" v-model="open" width="550px">
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+      <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-row>
-            <el-form-item :label="item.langCode" prop="langName" v-for="(item, index) in form.langs" :key="index">
+        <el-row>
-              <el-input type="textarea" v-model="item.langName" placeholder="请输入名称" />
+          <el-table :data="form.langList">
-            </el-form-item>
+            <el-table-column :label="$t('language')" align="center" prop="langCode" width="100">
-          </el-col> -->
+              <template #default="scope">
-
+                {{ scope.row.label }} <br />
-          <el-col :lg="24">
+                {{ scope.row.langCode }}
-            <el-form-item label="中文内容" prop="langName">
+              </template>
-              <el-input type="textarea" v-model="form.langName" placeholder="请输入名称" />
+            </el-table-column>
-            </el-form-item>
+            <el-table-column :label="$t('common.content')" align="center">
-          </el-col>
+              <template #default="scope">
-          <el-col :lg="24">
+                <el-input type="textarea" rows="2" prop="langName" v-model="scope.row.langName"></el-input>
-            <el-form-item label="英文内容" prop="langNameEn">
+              </template>
-              <el-input type="textarea" v-model="form.langNameEn" placeholder="请输入名称" />
+            </el-table-column>
-            </el-form-item>
+          </el-table>
-          </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-form>
       <template #footer>
@@ -176,16 +172,8 @@
 </template>
 
 <script setup name="commonlang">
-import {
+import { listCommonLang, delCommonLang, updateCommonLang, getCommonLang, exportCommonLang, getCommonLangByKey } from '@/api/system/commonlang.js'
-  listCommonLang,
+import { isEmpty } from '@/utils/ruoyi.js'
-  addCommonLang,
-  delCommonLang,
-  updateCommonLang,
-  getCommonLang,
-  exportCommonLang,
-  getCommonLangByKey,
-} from '@/api/system/commonlang.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)
-        updateCommonLang(form.value)
+        .then((res) => {
-          .then((res) => {
+          proxy.$modal.msgSuccess('操作成功')
-            proxy.$modal.msgSuccess('修改成功')
+          open.value = false
-            open.value = false
+          getList()
-            getList()
+        })
-          })
+        .catch(() => {})
-          .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>