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

src/components/FormFields/PhoneInput.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-input v-model="rawValue.phone" :placeholder="$tc('users.inputPhone')" @input="OnInputChange">
+      <el-select
+        slot="prepend"
+        :value="rawValue.code"
+        :placeholder="$tc('common.Select')"
+        style="width: 90px;"
+        @change="OnChange"
+      >
+        <el-option
+          v-for="country in countries"
+          :key="country.value"
+          :label="country.value"
+          :value="country.value"
+          style="width: 200px;"
+        >
+          <span style="float: left">{{ country.name }}</span>
+          <span style="float: right; font-size: 13px">{{ country.value }}</span>
+        </el-option>
+      </el-select>
+    </el-input>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PhoneInput',
+  props: {
+    value: {
+      type: [Object, String],
+      default: () => ({ 'code': '', 'phone': '' })
+    }
+  },
+  data() {
+    return {
+      rawValue: {},
+      countries: [
+        { name: 'China(中国)', value: '+86' },
+        { name: 'HongKong(中国香港)', value: '+852' },
+        { name: 'Macao(中国澳门)', value: '+853' },
+        { name: 'Taiwan(中国台湾)', value: '+886' },
+        { name: 'America(America)', value: '+1' },
+        { name: 'Russia(Россия)', value: '+7' },
+        { name: 'France(français)', value: '+33' },
+        { name: 'Britain(Britain)', value: '+44' },
+        { name: 'Germany(Deutschland)', value: '+49' },
+        { name: 'Japan(日本)', value: '+81' },
+        { name: 'Korea(한국)', value: '+82' },
+        { name: 'India(भारत)', value: '+91' }
+      ]
+    }
+  },
+  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() {
+      this.$emit('input', this.fullPhone)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/FormFields/index.js

@@ -4,6 +4,7 @@ import Select2 from './Select2'
 import TagInput from './TagInput'
 import Switcher from './Switcher'
 import UploadKey from './UploadKey'
+import PhoneInput from './PhoneInput'
 import JsonEditor from './JsonEditor'
 import UploadField from './UploadField'
 import UpdateToken from './UpdateToken'
@@ -22,6 +23,7 @@ export default {
   TagInput,
   UploadKey,
   JsonEditor,
+  PhoneInput,
   UpdateToken,
   UploadField,
   UserPassword,
@@ -40,6 +42,7 @@ export {
   TagInput,
   UploadKey,
   JsonEditor,
+  PhoneInput,
   UpdateToken,
   UploadField,
   UserPassword,

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",

src/i18n/langs/ja.json

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

src/i18n/langs/zh.json

@@ -1676,6 +1676,7 @@
     "Login": "用户登录",
     "InviteSuccess": "邀请成功",
     "FileEncryptionPassword": "文件加密密码",
+    "inputPhone": "请输入手机号码",
     "RoleUsers": "授权用户",
     "RoleInfo": "角色信息",
     "RolePerms": "角色权限",

src/views/assets/Asset/AssetCreateUpdate/components/AccountTemplateDialog.vue

@@ -141,6 +141,7 @@ export default {
       const newAddAccounts = this.accountsSelected.filter(i => {
         if (!hasIdAccounts.includes(i.id)) {
           i.template = true
+          i.secret_type = i.secret_type.value
           return i
         }
       })

src/views/assets/Cloud/Account/AccountCreateUpdate.vue

@@ -79,6 +79,17 @@ export default {
             },
             password: {
               rules: this.$route.params.id ? [] : [RequiredChange]
+            },
+            platform: {
+              el: {
+                multiple: false,
+                ajax: {
+                  url: `/api/v1/assets/platforms/`,
+                  transformOption: (item) => {
+                    return { label: item.name, value: item.id }
+                  }
+                }
+              }
             }
           }
         },

src/views/profile/ProfileImprovement.vue

@@ -5,6 +5,7 @@
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
 import { Required } from '@/components/DataForm/rules'
+import { PhoneInput } from '@/components/FormFields'
 
 export default {
   name: 'ProfileUpdate',
@@ -36,6 +37,9 @@ export default {
         email: {
           disabled: true
         },
+        phone: {
+          component: PhoneInput
+        },
         mfa_level: {
           hidden: (formValue) => {
             return formValue.mfa_level === 2

src/views/profile/ProfileUpdate/ProfileUpdate.vue

@@ -9,6 +9,7 @@
 
 <script>
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import { PhoneInput } from '@/components/FormFields'
 import { IBox } from '@/components'
 
 export default {
@@ -40,6 +41,9 @@ export default {
         },
         email: {
           disabled: true
+        },
+        phone: {
+          component: PhoneInput
         }
       },
       submitMethod() {

src/views/users/User/UserCreateUpdate.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import UserPassword from '@/components/FormFields/UserPassword'
+import { UserPassword, PhoneInput } from '@/components/FormFields'
 import rules from '@/components/DataForm/rules'
 import { mapGetters } from 'vuex'
 
@@ -151,6 +151,9 @@ export default {
             },
             value: []
           }
+        },
+        phone: {
+          component: PhoneInput
         }
       },
       submitMethod() {

src/views/users/User/UserDetail/UserInfo.vue

@@ -176,8 +176,15 @@ export default {
             return <img src={this.object.avatar_url} alt='' height='50'/>
           }
         },
-        'name', 'username', 'email', 'phone', 'wecom_id',
+        'id', 'name', 'username', 'email',
-        'dingtalk_id', 'feishu_id',
+        {
+          key: this.$t('users.Phone'),
+          formatter: () => {
+            const phoneObj = this.object.phone
+            return <div>{phoneObj?.code} {phoneObj?.phone}</div>
+          }
+        },
+        'wecom_id', 'dingtalk_id', 'feishu_id',
         {
           key: this.$t('users.Role'),
           formatter: (item, val) => {