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

v3.1.0 rc4

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/ProtocolSelector/ProtocolSettingDialog.vue

@@ -54,7 +54,9 @@ export default {
         sftp_home: '/tmp',
         username_selector: '#username',
         password_selector: '#password',
-        submit_selector: '.btn-submit'
+        submit_selector: '.btn-submit',
+        security: 'any',
+        console: false
       },
       loading: true,
       form: {},

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/main.js

@@ -19,7 +19,7 @@ import VueLogger from 'vuejs-logger'
 import loggerOptions from './utils/logger'
 import ECharts from 'vue-echarts'
 import service from '@/utils/request'
-import { Message } from '@/utils/Message'
+import { message } from '@/utils/message'
 import xss from '@/utils/xss'
 
 /**
@@ -60,7 +60,7 @@ Vue.prototype.$axios = service
 window._ = require('lodash')
 // Vue.set(Vue.prototype, '_', _)
 
-Vue.prototype.$message = Message
+Vue.prototype.$message = message
 
 Vue.prototype.$xss = xss
 

src/utils/message.js

@@ -2,7 +2,7 @@
 import { Message as elMessage } from 'element-ui'
 
 let messageDom = null
-const Message = (options) => {
+const message = (options) => {
   // 判断弹窗是否已存在, 若存在则关闭
   if (messageDom) messageDom.close()
   messageDom = elMessage(options)
@@ -10,11 +10,11 @@ const Message = (options) => {
 
 const typeArray = ['success', 'error', 'warning', 'info']
 typeArray.forEach(type => {
-  Message[type] = options => {
+  message[type] = options => {
     if (typeof options === 'string') options = { message: options }
     options.type = type
-    return Message(options)
+    return message(options)
   }
 })
 
-export { Message }
+export { message }

src/utils/request.js

@@ -4,7 +4,7 @@ import { getTokenFromCookie } from '@/utils/auth'
 import { getErrorResponseMsg } from '@/utils/common'
 import { refreshSessionIdAge } from '@/api/users'
 import { MessageBox } from 'element-ui'
-import { Message } from '@/utils/Message'
+import { message } from '@/utils/message'
 import store from '@/store'
 import axiosRetry from 'axios-retry'
 import router from '@/router'
@@ -93,7 +93,7 @@ export function flashErrorMsg({ response, error }) {
   if (!response.config.disableFlashErrorMsg) {
     const responseErrorMsg = getErrorResponseMsg(error)
     const msg = responseErrorMsg || error.message
-    Message({
+    message({
       message: msg,
       type: 'error',
       duration: 5 * 1000

src/utils/startup.js

@@ -3,7 +3,7 @@ import store from '@/store'
 import router, { resetRouter } from '@/router'
 import Vue from 'vue'
 import VueCookie from 'vue-cookie'
-import { Message } from '@/utils/Message'
+import { message } from '@/utils/message'
 import orgUtil from '@/utils/org'
 import orgs from '@/api/orgs'
 import { getPropView, isViewHasOrgs } from '@/utils/jms'
@@ -119,7 +119,7 @@ export async function generatePageRoutes({ to, from, next }) {
   } catch (error) {
     // remove token and go to login page to re-login
     // await store.dispatch('user/resetToken')
-    Message.error(error || 'Has Error')
+    message.error(error || 'Has Error')
     Vue.$log.error('Error occur: ', error)
   }
 }

src/views/accounts/AccountTemplate/AccountTemplateList.vue

@@ -17,7 +17,7 @@ import { ActionsFormatter } from '@/components/TableFormatters'
 import ViewSecret from '@/components/AccountListTable/ViewSecret'
 
 export default {
-  name: 'AccountBackupPlanList',
+  name: 'AccountTemplateList',
   components: {
     GenericListPage,
     ViewSecret

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

@@ -80,7 +80,7 @@ export default {
     }
   },
   data() {
-    const protocols = this.asset.protocols.map(i => i.name).toString()
+    const protocols = this.asset?.protocols?.map(i => i.name).toString() || ''
     return {
       isShowCreate: false,
       accountsSelected: [],
@@ -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/assets/const.js

@@ -3,7 +3,7 @@ import ProtocolSelector from '@/components/FormFields/ProtocolSelector'
 import AssetAccounts from '@/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts'
 import rules from '@/components/DataForm/rules'
 import { Select2 } from '@/components/FormFields'
-import { Message } from '@/utils/Message'
+import { message } from '@/utils/message'
 
 export const filterSelectValues = (values) => {
   if (!values) return
@@ -19,7 +19,7 @@ export const filterSelectValues = (values) => {
         const inputValue = { name, value }
         selects.push(inputValue)
       } else {
-        Message.error(i18n.t('assets.LabelInputFormatValidation'))
+        message.error(i18n.t('assets.LabelInputFormatValidation'))
       }
     }
   })

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/settings/Ldap/ImportDialog.vue

@@ -18,7 +18,7 @@
       <div slot="footer">
         <span class="org-select">
           <span class="label">{{ $tc('common.ImportOrg') }}：</span>
-          <Select2 ref="select2" v-model="select2.value" v-bind="select2" />
+          <Select2 ref="select2" v-model="select2.value" v-bind="select2" popper-class="select-org-dropdown" />
         </span>
         <el-button type="primary" size="small" :loading="dialogLdapUserImportLoginStatus" @click="importUserClick">{{ $t('common.Import') }}</el-button>
         <el-button
@@ -157,6 +157,12 @@ export default {
 }
 </script>
 
+<style>
+.el-select-dropdown.select-org-dropdown {
+  max-width: 300px!important;
+}
+</style>
+
 <style scoped lang="scss">
   .org-select {
     float: left;

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',
-        'dingtalk_id', 'feishu_id',
+        'id', 'name', 'username', 'email',
+        {
+          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) => {