fix: 优化手机号区号更新为空及展示问题

jumpserver · Apr 10, 2023 · dff6824 · dff6824
1 parent cbbaf7f
commit dff6824
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 deletions.
diff --git a/src/components/FormFields/PhoneInput.vue b/src/components/FormFields/PhoneInput.vue
@@ -1,10 +1,11 @@
 <template>
   <div>
-    <el-input v-model="rawValue.phone" placeholder="请输入手机号码" @change="OnInputChange">
+    <el-input v-model="rawValue.phone" :placeholder="$tc('users.inputPhone')" @input="OnInputChange">
       <el-select
         slot="prepend"
         :value="rawValue.code"
-        style="width: 80px;"
+        :placeholder="$tc('common.Select')"
+        style="width: 90px;"
         @change="OnChange"
       >
         <el-option
@@ -51,24 +52,25 @@ export default {
       ]
     }
   },
-  computed: {},
-  mounted() {
-    this.rawValue = this.value
-    if (!this.rawValue?.code) {
-      this.rawValue.code = '+86'
-    } else {
-      const value = `${this.rawValue.code}${this.rawValue.phone}`
-      this.$emit('input', value)
+  computed: {
+    fullPhone() {
+      if (!this.rawValue.phone) {
+        return ''
+      }
+      return `${this.rawValue.code} ${this.rawValue.phone}`
     }
   },
+  mounted() {
+    this.rawValue = this.value || { code: '+86', phone: '' }
+    this.$emit('input', this.fullPhone)
+  },
   methods: {
     OnChange(countryCode) {
       this.rawValue.code = countryCode
       this.OnInputChange()
     },
     OnInputChange() {
-      const value = `${this.rawValue.code}${this.rawValue.phone}`
-      this.$emit('input', value)
+      this.$emit('input', this.fullPhone)
     }
   }
 }

diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
@@ -1685,6 +1685,7 @@
   "users": {
     "Login": "Users login",
     "InviteSuccess": "Invite success",
+    "inputPhone": "Please enter your mobile phone number",
     "FileEncryptionPassword": "File encryption password",
     "OrgRoles": "Org roles",
     "RoleUsers": "Role users",

diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
@@ -1673,6 +1673,7 @@
   "users": {
     "Login": "ユーザー登録",
     "InviteSuccess": "成功招待",
+    "inputPhone": "携帯電話の番号をお願いします",
     "FileEncryptionPassword": "ファイル暗号化パスワード",
     "RoleUsers": "承認されたユーザー",
     "RoleInfo": "ロール情報",

diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
@@ -1676,6 +1676,7 @@
     "Login": "用户登录",
     "InviteSuccess": "邀请成功",
     "FileEncryptionPassword": "文件加密密码",
+    "inputPhone": "请输入手机号码",
     "RoleUsers": "授权用户",
     "RoleInfo": "角色信息",
     "RolePerms": "角色权限",

diff --git a/src/views/users/User/UserDetail/UserInfo.vue b/src/views/users/User/UserDetail/UserInfo.vue
@@ -180,7 +180,8 @@ export default {
         {
           key: this.$t('users.Phone'),
           formatter: () => {
-            return <div>{this.object.phone.phone}</div>
+            const phoneObj = this.object.phone
+            return <div>{phoneObj?.code} {phoneObj?.phone}</div>
           }
         },
         'wecom_id', 'dingtalk_id', 'feishu_id',