feat: 完善KAM Mapping功能

src/api/module/system.ts

@@ -157,4 +157,19 @@ export const FirstInitSubscribe = (params: any, config: any) => {
     },
     config
   )
+}
+
+
+/**
+ * 选择Customer之后重新获取登录信息
+ */
+export const handleCustomerSelection = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'kam_customer_auto_login',
+      ...params
+    },
+    config
+  )
 }

src/stores/modules/user.ts

@@ -16,10 +16,17 @@ interface UserInfo {
   PASSWORD_CHANGE_CYCLE: number // 密码修改周期（多少天需要改一次）
   last_pwd_change: string // 上次密码修改时间
   is_desensitization_kln?: string // Mask Customer Information
+  kam_customers_name: Array<{ kam_customers_name: string }>
+}
+interface CustomerInfo {
+  name: string
+  isShowMapping: boolean
 }
 interface UserState {
   userInfo: UserInfo
   isFirstLogin: boolean
+  originalUName: string
+  customerInfo: CustomerInfo
 }
 
 /**
@@ -54,7 +61,9 @@ export const useUserStore = defineStore('user', {
     userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}'),
     isFirstLogin: localStorage.getItem('isFirstLogin')
       ? JSON.parse(localStorage.getItem('isFirstLogin'))
-      : false
+      : false,
+    originalUName: localStorage.getItem('originalUName') || JSON.parse(localStorage.getItem('userInfo') || '{}')?.uname || '',
+    customerInfo: JSON.parse(localStorage.getItem('customerInfo') || '{"name": "", "isShowMapping": false}')
   }),
   getters: {
     userName(state) {
@@ -64,6 +73,10 @@ export const useUserStore = defineStore('user', {
         return state.userInfo.uname || ''
       }
     },
+    isShowMapping(state) {
+      return state.customerInfo.isShowMapping
+    },
+
     dateFormat(state) {
       return state.userInfo.date_format || getDateFormat()
     },
@@ -76,21 +89,39 @@ export const useUserStore = defineStore('user', {
     }
   },
   actions: {
-    setUserInfo(userInfo: any, isFirstLogin?: boolean) {
+    // isFirstLogin字段是
+    /**
+     * 
+     * @param userInfo 
+     * @param isFromMapping 用来判断是否从映射的时候获取的用户信息
+     * @param isFirstLogin 用来判断是不是该用户第一次使用，如果是第一次使用，那么需要跳转到修改密码页面修改密码之后才能继续使用系统
+     */
+    setUserInfo(userInfo: any, isFromMapping?: boolean, isFirstLogin?: boolean) {
       this.userInfo = userInfo
       localStorage.setItem('userInfo', JSON.stringify(userInfo))
-
+      if (!isFromMapping) {
+        this.originalUName = userInfo.uname
+        localStorage.setItem('originalUName', userInfo.uname)
+      }
       if (isFirstLogin !== undefined) {
         localStorage.setItem('isFirstLogin', JSON.stringify(isFirstLogin))
         this.isFirstLogin = isFirstLogin
       }
     },
 
+    setCustomerInfo(customerInfo: CustomerInfo) {
+      this.customerInfo = customerInfo
+      localStorage.setItem('customerInfo', JSON.stringify(customerInfo))
+    },
     async logout(isNeedLogout: boolean = true) {
       if (isNeedLogout) {
         await $api.logout().then(() => { })
       }
       localStorage.removeItem('userInfo')
+      localStorage.removeItem('originalUName')
+      localStorage.removeItem('customerInfo')
+      this.originalUName = ''
+      this.customerInfo = { name: '', isShowMapping: false }
       this.userInfo = {}
       if (localStorage.getItem('isFirstLogin')) {
         localStorage.removeItem('isFirstLogin')

src/views/Layout/src/components/Header/HeaderView.vue

@@ -234,7 +234,7 @@ const handleDemoVideo = () => {
           <span style="margin-top: -1px" class="font_family icon-icon_search_b"></span>
         </template>
       </el-input>
-      <KAMMapping></KAMMapping>
+      <KAMMapping v-if="userStore.isLogin"></KAMMapping>
       <div class="notice-icon" v-if="userStore.isLogin">
         <span v-if="notificationMsgStore.hasNewMsg" class="unread-tip-icon"></span>
         <el-button

src/views/Layout/src/components/Header/components/KAMMapping.vue

@@ -1,34 +1,101 @@
 <script setup lang="ts">
-const customer = ref('')
-const isShowMapping = ref(true)
+import { useUserStore } from '@/stores/modules/user'
+import { use } from 'vxe-pc-ui'
+
+const userStore = useUserStore()
+const customer = ref(userStore.customerInfo.name || '')
+const isShowMapping = ref(userStore.customerInfo.isShowMapping || false)
 const visible = ref(false)
 const myPopover = ref()
 const customerSearchQuery = ref('')
 
-const customerList = ref([
-  'alice@dummy customer.com',
-  'bob@dummy customer.com',
-  'charlie@dummy customer.com',
-  'dave@dummy customer.com'
-])
-const showCustomerList = ref(customerList.value)
+const customerList = ref(userStore.userInfo?.kam_customers_name)
+const showCustomerList = ref(userStore.userInfo?.kam_customers_name)
+watch(
+  () => userStore.userInfo.kam_customers_name,
+  (newVal) => {
+    if (newVal) {
+      customerList.value = newVal
+      showCustomerList.value = newVal
+    }
+  },
+  { immediate: true, deep: true }
+)
 
 const filterCustomer = (query: string) => {
   showCustomerList.value = customerList.value.filter((item) => {
-    return item.includes(query)
+    return item.kam_customers_name?.includes(query)
   })
 }
-const changeShowMapping = () => {
+
+const loadingVisible = ref(false)
+const changeShowMapping = async () => {
+  userStore.setCustomerInfo({ name: '', isShowMapping: isShowMapping.value })
   customer.value = ''
+  if (!isShowMapping.value && userStore.originalUName !== userStore.userInfo.uname) {
+    try {
+      loadingVisible.value = true
+      const res = await $api.handleCustomerSelection({ uname: userStore.originalUName })
+      if (res.code === 200) {
+        userStore.setUserInfo(
+          {
+            ...res.data.user_info,
+            kam_customers_name: userStore.userInfo.kam_customers_name
+          },
+          true
+        )
+        window.location.reload()
+      }
+    } catch (err) {
+      console.error('Error occurred while selecting customer:', err)
+    } finally {
+      loadingVisible.value = false
+    }
+  }
 }
-const changeCustomer = (cust: string) => {
+const changeCustomer = async (cust: string) => {
+  if (cust === customer.value) return
   customer.value = cust
   myPopover.value?.hide()
+  try {
+    loadingVisible.value = true
+    const res = await $api.handleCustomerSelection({ uname: cust })
+    if (res.code === 200) {
+      userStore.setUserInfo(
+        {
+          ...res.data.user_info,
+          kam_customers_name: userStore.userInfo.kam_customers_name
+        },
+        true
+      )
+      userStore.setCustomerInfo({ name: cust, isShowMapping: true })
+      window.location.reload()
+    }
+  } catch (err) {
+    console.error('Error occurred while selecting customer:', err)
+  } finally {
+    loadingVisible.value = false
+  }
 }
+watch(
+  () => userStore.customerInfo,
+  (newVal) => {
+    if (newVal && customer.value !== newVal.name) {
+      customer.value = newVal.name
+      isShowMapping.value = newVal.isShowMapping
+      changeCustomer(newVal.name)
+    }
+  },
+  { deep: true }
+)
 </script>
 
 <template>
   <div
+    v-loading.fullscreen.lock="loadingVisible"
+    element-loading-text="Loading..."
+    element-loading-custom-class="element-loading"
+    element-loading-background="rgb(43, 47, 54, 0.7)"
     class="kam-mapping-container"
     :class="{ focus: visible }"
     :style="{ 'justify-content': !isShowMapping ? 'center' : 'space-between' }"
@@ -69,10 +136,10 @@ const changeCustomer = (cust: string) => {
           <div
             class="customer-item"
             v-for="cust in showCustomerList"
-            :key="cust"
-            @click="changeCustomer(cust)"
+            :key="cust.kam_customers_name"
+            @click="changeCustomer(cust.kam_customers_name)"
           >
-            {{ cust }}
+            {{ cust.kam_customers_name }}
           </div>
         </div>
       </div>

src/views/Login/src/loginView.vue

@@ -239,12 +239,12 @@ const handleResult = (res: any) => {
         type: 'warning',
         confirmButtonClass: 'el-button--dark'
       })
-      userStore.setUserInfo(res.data?.user_info || {}, true)
+      userStore.setUserInfo(res.data?.user_info || {}, false, true)
       router.push({
         name: 'Reset Password'
       })
     } else if (data.msg === 'First login, please change your password') {
-      userStore.setUserInfo(res.data?.user_info || {}, true)
+      userStore.setUserInfo(res.data?.user_info || {}, false, true)
       firstLoginTipsRef.value.openDialog()
     }
   }