多语言优化

saiadmin-artd/src/views/system/user/modules/edit-dialog.vue

@@ -1,36 +1,36 @@
 <template>
   <el-dialog
     v-model="visible"
-    :title="dialogType === 'add' ? '新增用户' : '编辑用户'"
+    :title="dialogType === 'add' ? $t('page.form.titleAdd') : $t('page.form.titleEdit')"
     width="800px"
     align-center
     :close-on-click-modal="false"
     @close="handleClose"
   >
     <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
-      <el-form-item label="头像" prop="avatar">
+      <el-form-item :label="$t('page.form.labelAvatar')" prop="avatar">
         <sa-image-picker v-model="formData.avatar" round />
       </el-form-item>
       <el-row>
         <el-col :span="12">
-          <el-form-item label="用户名" prop="username">
+          <el-form-item :label="$t('page.form.labelUsername')" prop="username">
             <el-input v-model="formData.username" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="真实姓名" prop="realname">
+          <el-form-item :label="$t('page.form.labelRealname')" prop="realname">
             <el-input v-model="formData.realname" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row v-if="dialogType === 'add'">
         <el-col :span="12">
-          <el-form-item label="密码" prop="password">
+          <el-form-item :label="$t('page.form.labelPassword')" prop="password">
             <el-input type="password" v-model="formData.password" show-password />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="确认密码" prop="password_confirm">
+          <el-form-item :label="$t('page.form.labelPasswordConfirm')" prop="password_confirm">
             <el-input type="password" v-model="formData.password_confirm" show-password />
           </el-form-item>
         </el-col>
@@ -38,20 +38,20 @@
 
       <el-row>
         <el-col :span="12">
-          <el-form-item label="邮箱" prop="email">
-            <el-input v-model="formData.email" placeholder="请输入邮箱" />
+          <el-form-item :label="$t('page.form.labelEmail')" prop="email">
+            <el-input v-model="formData.email" :placeholder="$t('page.form.placeholderEmail')" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="手机号" prop="phone">
-            <el-input v-model="formData.phone" placeholder="请输入手机号" />
+          <el-form-item :label="$t('page.form.labelPhone')" prop="phone">
+            <el-input v-model="formData.phone" :placeholder="$t('page.form.placeholderPhone')" />
           </el-form-item>
         </el-col>
       </el-row>
 
       <el-row>
         <el-col :span="12">
-          <el-form-item label="部门" prop="dept_id">
+          <el-form-item :label="$t('page.form.labelDept')" prop="dept_id">
             <el-tree-select
               v-model="formData.dept_id"
               :data="optionData.deptData"
@@ -62,7 +62,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="角色" prop="role_ids">
+          <el-form-item :label="$t('page.form.labelRole')" prop="role_ids">
             <el-select v-model="formData.role_ids" multiple clearable>
               <el-option
                 v-for="role in optionData.roleList"
@@ -77,7 +77,7 @@
 
       <el-row>
         <el-col :span="12">
-          <el-form-item label="岗位" prop="post_ids">
+          <el-form-item :label="$t('page.form.labelPost')" prop="post_ids">
             <el-select v-model="formData.post_ids" multiple clearable>
               <el-option
                 v-for="post in optionData.postList"
@@ -89,14 +89,14 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="性别" prop="gender">
+          <el-form-item :label="$t('page.form.labelGender')" prop="gender">
             <sa-radio v-model="formData.gender" dict="gender" valueType="string" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24">
-          <el-form-item label="状态" prop="status">
+          <el-form-item :label="$t('page.form.labelStatus')" prop="status">
             <sa-radio v-model="formData.status" dict="data_status" />
           </el-form-item>
         </el-col>
@@ -104,12 +104,12 @@
 
       <el-row>
         <el-col :span="24">
-          <el-form-item label="备注" prop="remark">
+          <el-form-item :label="$t('page.form.labelRemark')" prop="remark">
             <el-input
               v-model="formData.remark"
               type="textarea"
               :rows="3"
-              placeholder="请输入备注"
+              :placeholder="$t('page.form.placeholderRemark')"
             />
           </el-form-item>
         </el-col>
@@ -117,8 +117,8 @@
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="handleClose">取消</el-button>
-        <el-button type="primary" @click="handleSubmit">提交</el-button>
+        <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
       </div>
     </template>
   </el-dialog>
@@ -130,6 +130,8 @@
   import deptApi from '@/api/system/dept'
   import roleApi from '@/api/system/role'
   import postApi from '@/api/system/post'
+  import { ElMessage } from 'element-plus'
+  import { useI18n } from 'vue-i18n'
 
   interface Props {
     modelValue: boolean
@@ -149,6 +151,7 @@
   })
 
   const emit = defineEmits<Emits>()
+  const { t } = useI18n()
 
   const formRef = ref<FormInstance>()
   const optionData = reactive({
@@ -167,30 +170,30 @@
 
   const validatePasswordConfirm = (rule: any, value: any, callback: any) => {
     if (value !== formData.password) {
-      callback(new Error('两次输入的密码不一致'))
+      callback(new Error(t('page.form.rulePasswordNotMatch')))
     } else {
       callback()
     }
   }
 
   // 表单验证规则
-  const rules: FormRules = {
+  const rules = computed<FormRules>(() => ({
     username: [
-      { required: true, message: '请输入用户名', trigger: 'blur' },
-      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+      { required: true, message: t('page.form.ruleUsernameRequired'), trigger: 'blur' },
+      { min: 2, max: 20, message: t('page.form.ruleUsernameLength'), trigger: 'blur' }
     ],
     password: [
-      { required: true, message: '请输入密码', trigger: 'blur' },
-      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
+      { required: true, message: t('page.form.rulePasswordRequired'), trigger: 'blur' },
+      { min: 6, max: 20, message: t('page.form.rulePasswordLength'), trigger: 'blur' }
     ],
     password_confirm: [
-      { required: true, message: '请输入确认密码', trigger: 'blur' },
-      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
+      { required: true, message: t('page.form.rulePasswordConfirmRequired'), trigger: 'blur' },
+      { min: 6, max: 20, message: t('page.form.rulePasswordLength'), trigger: 'blur' },
       { validator: validatePasswordConfirm, trigger: 'blur' }
     ],
-    dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
-    role_ids: [{ required: true, message: '请选择角色', trigger: 'blur' }]
-  }
+    dept_id: [{ required: true, message: t('page.form.ruleDeptRequired'), trigger: 'change' }],
+    role_ids: [{ required: true, message: t('page.form.ruleRoleRequired'), trigger: 'blur' }]
+  }))
 
   // 初始表单数据
   const initialFormData = {
@@ -287,10 +290,10 @@
       await formRef.value.validate()
       if (props.dialogType === 'add') {
         await api.save(formData)
-        ElMessage.success('新增成功')
+        ElMessage.success(t('page.form.addSuccess'))
       } else {
         await api.update(formData)
-        ElMessage.success('修改成功')
+        ElMessage.success(t('page.form.editSuccess'))
       }
       emit('success')
       handleClose()