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

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">{{
-          $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('修改成功')
-            open.value = false
-            getList()
-          })
-          .catch(() => {})
-      } else {
-        addCommonLang(form.value)
-          .then((res) => {
-            proxy.$modal.msgSuccess('新增成功')
-            open.value = false
-            getList()
-          })
-          .catch((err) => {
-            //TODO 错误逻辑
-          })
-      }
+      updateCommonLang(form.value)
+        .then((res) => {
+          proxy.$modal.msgSuccess('操作成功')
+          open.value = false
+          getList()
+        })
+        .catch(() => {})
     }
   })
 }
@@ -407,6 +411,6 @@ function sortChange(column) {
 
   handleQuery()
 }
-
 handleQuery()
+reset()
 </script>