1、添加多语言支持

src/views/agent/call.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" :label-width="labelWidth">
       <el-form-item :label="t('common.userId')" prop="username">
         <el-input
             v-model="queryParams.userId"
@@ -67,7 +67,7 @@
     </el-table>
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form ref="formRef" :model="form"  label-width="80px">
+      <el-form ref="formRef" :model="form"  :label-width="labelWidth">
         <el-form-item :label="t('common.userId')" prop="userId">
           <el-input v-model="form.userId" :placeholder="t('common.pleaseEnter') + t('common.userId')" />
         </el-form-item>
@@ -97,11 +97,16 @@
 </template>
 
 <script setup>
-import {ref, reactive, getCurrentInstance, onMounted, nextTick} from 'vue'
+import {ref, reactive, getCurrentInstance, onMounted, nextTick, computed} from 'vue'
 import {getCallPageList} from '@/api/system/call.js'
 import {useI18n} from '@/composables/useI18n'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
+
+// 根据语言动态设置label宽度
+const labelWidth = computed(() => {
+  return locale.value === 'vi' ? '140px' : '80px'
+})
 const { proxy } = getCurrentInstance()
 const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable")
 

src/views/agent/image.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" :label-width="labelWidth">
       <el-form-item :label="t('common.userId')" prop="username">
         <el-input
             v-model="queryParams.userId"
@@ -65,7 +65,7 @@
     </el-table>
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form ref="formRef" :model="form"  label-width="80px">
+      <el-form ref="formRef" :model="form"  :label-width="labelWidth">
         <el-form-item :label="t('common.userId')" prop="userId">
           <el-input v-model="form.userId" :placeholder="t('common.pleaseEnter') + t('common.userId')" />
         </el-form-item>
@@ -90,12 +90,17 @@
 </template>
 
 <script setup>
-import {ref, reactive, getCurrentInstance, onMounted, nextTick} from 'vue'
+import {ref, reactive, getCurrentInstance, onMounted, nextTick, computed} from 'vue'
 import {getImagePageList} from '@/api/system/image.js'
 import { isExternal } from '@/utils/validate'
 import {useI18n} from '@/composables/useI18n'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
+
+// 根据语言动态设置label宽度
+const labelWidth = computed(() => {
+  return locale.value === 'vi' ? '140px' : '80px'
+})
 
 // 获取文件路径前缀
 const filePath = import.meta.env.VITE_APP_FILE_PATH || ''

src/views/agent/position.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" :label-width="labelWidth">
       <el-form-item :label="t('common.userId')" prop="username">
         <el-input
             v-model="queryParams.userId"
@@ -60,7 +60,7 @@
     </el-table>
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form ref="formRef" :model="form"  label-width="80px">
+      <el-form ref="formRef" :model="form"  :label-width="labelWidth">
         <el-form-item :label="t('common.userId')" prop="userId">
           <el-input v-model="form.userId" :placeholder="t('common.pleaseEnter') + t('common.userId')" />
         </el-form-item>
@@ -87,11 +87,16 @@
 </template>
 
 <script setup>
-import {ref, reactive, getCurrentInstance, onMounted, nextTick} from 'vue'
+import {ref, reactive, getCurrentInstance, onMounted, nextTick, computed} from 'vue'
 import {getPositionPageList} from '@/api/system/position.js'
 import {useI18n} from '@/composables/useI18n'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
+
+// 根据语言动态设置label宽度
+const labelWidth = computed(() => {
+  return locale.value === 'vi' ? '140px' : '80px'
+})
 
 const positionList = ref([])
 const treeData = ref([])

src/views/agent/sms.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" :label-width="labelWidth">
       <el-form-item :label="t('common.userId')" prop="username">
         <el-input
             v-model="queryParams.userId"
@@ -70,7 +70,7 @@
     </el-table>
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form ref="formRef" :model="form"  label-width="80px">
+      <el-form ref="formRef" :model="form"  :label-width="labelWidth">
           <el-form-item :label="t('common.userId')" prop="userId">
             <el-input v-model="form.userId" :placeholder="t('common.pleaseEnter') + t('common.userId')" />
           </el-form-item>
@@ -97,11 +97,16 @@
 </template>
 
 <script setup>
-import {ref, reactive, getCurrentInstance, onMounted, nextTick} from 'vue'
+import {ref, reactive, getCurrentInstance, onMounted, nextTick, computed} from 'vue'
 import {getSmsPageList} from '@/api/system/sms.js'
 import {useI18n} from '@/composables/useI18n'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
+
+// 根据语言动态设置label宽度
+const labelWidth = computed(() => {
+  return locale.value === 'vi' ? '140px' : '80px'
+})
 const { proxy } = getCurrentInstance()
 const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable")
 

src/views/agent/userContact.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" :label-width="labelWidth">
       <el-form-item :label="t('common.userId')" prop="username">
         <el-input
             v-model="queryParams.userId"
@@ -69,7 +69,7 @@
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     <!-- 新增或修改会员对话框 -->
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form ref="formRef" :model="form"  label-width="80px">
+      <el-form ref="formRef" :model="form"  :label-width="labelWidth">
         <el-form-item :label="t('common.userId')" prop="userId">
           <el-input v-model="form.userId" :placeholder="t('common.pleaseEnter') + t('common.userId')" />
         </el-form-item>
@@ -95,11 +95,16 @@
   </div>
 </template>
 <script setup>
-import {ref, reactive, getCurrentInstance, onMounted, nextTick} from 'vue'
+import {ref, reactive, getCurrentInstance, onMounted, nextTick, computed} from 'vue'
 import {getContactPageList} from "@/api/system/userContact.js"
 import {useI18n} from '@/composables/useI18n'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
+
+// 根据语言动态设置label宽度
+const labelWidth = computed(() => {
+  return locale.value === 'vi' ? '140px' : '80px'
+})
 
 const title = ref("")
 const open = ref(false)