perf: phone code api

src/components/Form/FormFields/PhoneInput.vue

@@ -1,21 +1,20 @@
 <template>
   <div>
-    <el-input v-model="rawValue.phone" required :placeholder="$tc('InputPhone')" @input="OnInputChange">
+    <el-input v-model="rawValue.phone" :placeholder="$tc('InputPhone')" required @input="onInputChange">
       <el-select
         slot="prepend"
         :placeholder="$tc('Select')"
         :value="rawValue.code"
-        style="width: 75px;"
-        @change="OnChange"
+        style="width: 105px;"
+        @change="onChange"
       >
         <el-option
           v-for="country in countries"
-          :key="country.value"
+          :key="country.name"
           :label="country.value"
           :value="country.value"
-          style="width: 200px;"
         >
-          <span style="float: left">{{ country.name }}</span>
+          <span class="country-name">{{ country.name }}</span>
           <span style="float: right; font-size: 13px">{{ country.value }}</span>
         </el-option>
       </el-select>
@@ -24,19 +23,19 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 
 export default {
   name: 'PhoneInput',
   props: {
     value: {
       type: [Object, String],
-      default: () => ({ 'code': '+86', 'phone': '' })
+      default: null
     }
   },
   data() {
     return {
-      rawValue: {}
+      rawValue: {},
+      countries: [{ 'name': 'China', 'value': '+86' }]
     }
   },
   computed: {
@@ -45,26 +44,38 @@ export default {
         return ''
       }
       return `${this.rawValue.code}${this.rawValue.phone}`
-    },
-    countries: {
-      get() {
-        return this.publicSettings.COUNTRY_CALLING_CODES
-      }
-    },
-    ...mapGetters(['publicSettings'])
+    }
   },
   mounted() {
-    this.rawValue = this.value || { code: '+86', phone: '' }
+    const defaults = { code: localStorage.getItem('prePhoneCode') || '+86', phone: '' }
+    this.rawValue = this.value || defaults
+    this.$axios.get('/api/v1/common/countries/').then(res => {
+      this.countries = res.map(item => {
+        return { name: `${item.flag} ${item.name}`, value: item.phone_code }
+      })
+    })
     this.$emit('input', this.fullPhone)
   },
   methods: {
-    OnChange(countryCode) {
+    onChange(countryCode) {
       this.rawValue.code = countryCode
-      this.OnInputChange()
+      this.onInputChange()
+      localStorage.setItem('prePhoneCode', countryCode)
     },
-    OnInputChange() {
+    onInputChange() {
       this.$emit('input', this.fullPhone)
     }
   }
 }
 </script>
+
+<style scoped>
+.country-name {
+  display: inline-block;
+  width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 5px;
+}
+</style>

src/layout/components/NavHeader/ViewSwitcher.vue

@@ -108,7 +108,7 @@ export default {
   methods: {
     async handleSelectView(key, keyPath) {
       const routeName = this.viewsMapper[key] || '/'
-      localStorage.setItem('PreView', key)
+      localStorage.setItem('preView', key)
       // Next 之前要重置 init 状态，否则这些路由守卫就不走了
       await store.dispatch('app/reset')
       if (!this.tipHasRead) {

src/utils/auth.js

@@ -1,7 +1,7 @@
 import VueCookie from 'vue-cookie'
 
-const CURRENT_ORG_KEY = 'jms_current_org'
-const CURRENT_ROLE_KEY = 'jms_current_role'
+const CURRENT_ORG_KEY = 'currentOrg'
+const CURRENT_ROLE_KEY = 'currentRole'
 let cookieNamePrefix = VueCookie.get('SESSION_COOKIE_NAME_PREFIX')
 if (!cookieNamePrefix || ['""', "''"].indexOf(cookieNamePrefix) > -1) {
   cookieNamePrefix = ''
@@ -17,7 +17,7 @@ export function setTokenToCookie(value, expires) {
 }
 
 export function getCurrentRoleLocal(username) {
-  const key = CURRENT_ROLE_KEY + '_' + username
+  const key = CURRENT_ROLE_KEY + ':' + username
   const role = localStorage.getItem(key)
   if (role) {
     return parseInt(role) || null
@@ -26,12 +26,12 @@ export function getCurrentRoleLocal(username) {
 }
 
 export function saveCurrentRoleLocal(username, role) {
-  const key = CURRENT_ROLE_KEY + '_' + username
+  const key = CURRENT_ROLE_KEY + ':' + username
   return localStorage.setItem(key, role)
 }
 
 export function getCurrentOrgLocal(username) {
-  const key = CURRENT_ORG_KEY + '_' + username
+  const key = CURRENT_ORG_KEY + ':' + username
   const value = localStorage.getItem(key)
   try {
     return JSON.parse(value)
@@ -41,18 +41,18 @@ export function getCurrentOrgLocal(username) {
 }
 
 export function saveCurrentOrgLocal(username, org) {
-  const key = CURRENT_ORG_KEY + '_' + username
+  const key = CURRENT_ORG_KEY + ':' + username
   localStorage.setItem(key, JSON.stringify(org))
   VueCookie.set('X-JMS-ORG', org.id)
 }
 
 export function setPreOrgLocal(username, org) {
-  const key = 'PRE_ORG_' + username
+  const key = 'preOrg' + ':' + username
   localStorage.setItem(key, JSON.stringify(org))
 }
 
 export function getPreOrgLocal(username) {
-  const key = 'PRE_ORG_' + username
+  const key = 'preOrg' + ':' + username
   const value = localStorage.getItem(key)
   try {
     return JSON.parse(value)

src/utils/jms.js

@@ -109,7 +109,7 @@ export function isSameView(to, from) {
 
 export function getPropView() {
   const hasPermedViews = getPermedViews()
-  const preView = localStorage.getItem('PreView')
+  const preView = localStorage.getItem('preView')
   const hasPerm = hasPermedViews.indexOf(preView) > -1
   if (hasPerm) {
     return preView