Merge pull request #629 from veops/dev_ui_241022

feat(ui): add userPanel component

cmdb-ui/src/components/tools/UserMenu.vue

@@ -10,39 +10,13 @@
         <ops-icon class="common-settings-btn-icon" type="veops-setting" />
         <span class="common-settings-btn-text">{{ $t('settings') }}</span>
       </span>
-      <a-popover
-        overlayClassName="lang-popover-wrap"
-        placement="bottomRight"
-        :getPopupContainer="(trigger) => trigger.parentNode"
-      >
-        <span class="locale">{{ languageList.find((lang) => lang.key === locale).title }}</span>
-        <div class="lang-menu" slot="content">
-          <a
-            v-for="(lang) in languageList"
-            :key="lang.key"
-            :class="['lang-menu-item', lang.key === locale ? 'lang-menu-item_active' : '']"
-            @click="changeLang(lang.key)"
-          >
-            {{ lang.title }}
-          </a>
-        </div>
-      </a-popover>
       <a-popover
         :overlayStyle="{ width: '130px' }"
         placement="bottomRight"
         overlayClassName="custom-user"
       >
         <template slot="content">
-          <router-link :to="{ name: 'setting_person' }" :style="{ color: '#000000a6' }">
-            <div class="custom-user-item">
-              <a-icon type="user" :style="{ marginRight: '10px' }" />
-              <span>{{ $t('topMenu.personalCenter') }}</span>
-            </div>
-          </router-link>
-          <div @click="handleLogout" class="custom-user-item">
-            <a-icon type="logout" :style="{ marginRight: '10px' }" />
-            <span>{{ $t('topMenu.logout') }}</span>
-          </div>
+          <UserPanel />
         </template>
         <span class="action ant-dropdown-link user-dropdown-menu user-info-wrap">
           <a-avatar
@@ -63,11 +37,13 @@
 import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
 import DocumentLink from './DocumentLink.vue'
 import { setDocumentTitle, domTitle } from '@/utils/domUtil'
+import UserPanel from './userPanel.vue'
 
 export default {
   name: 'UserMenu',
   components: {
     DocumentLink,
+    UserPanel
   },
   data() {
     return {

cmdb-ui/src/components/tools/userPanel.vue

@@ -0,0 +1,487 @@
+<template>
+  <div class="user-panel">
+    <a-avatar
+      class="user-panel-avatar"
+      size="small"
+      icon="user"
+      :src="avatarSrc"
+    />
+    <div class="user-panel-nickname">
+      {{ userInfo.nickname }}
+    </div>
+    <div class="user-panel-info">
+      <ops-icon
+        type="veops-company"
+        class="user-panel-info-icon"
+      />
+      <div class="user-panel-info-text">
+        {{ companyName }}
+      </div>
+    </div>
+    <div class="user-panel-info">
+      <ops-icon
+        type="veops-emails"
+        class="user-panel-info-icon"
+      />
+      <div class="user-panel-info-text">
+        {{ email }}
+      </div>
+    </div>
+
+    <div class="user-panel-btn">
+      <div
+        v-for="(item) in userBtnGroup"
+        :key="item.type"
+        class="user-panel-btn-item"
+        @click="clickBtnGroup(item.type)"
+      >
+        <ops-icon
+          :type="item.icon"
+          class="user-panel-btn-icon"
+        />
+        <span class="user-panel-btn-title">
+          {{ $t(item.title) }}
+        </span>
+      </div>
+    </div>
+
+    <div class="user-panel-row">
+      <div class="user-panel-row-label">
+        {{ $t('userPanel.switchLanguage') }}
+      </div>
+
+      <div class="user-panel-lang">
+        <div
+          v-for="(lang, index) in languageList"
+          :key="index"
+          :class="['user-panel-lang-item', lang.key === locale ? 'user-panel-lang-item_active' : '']"
+          @click="changeLang(lang.key)"
+        >
+          {{ lang.title }}
+        </div>
+      </div>
+    </div>
+
+    <div class="user-panel-row">
+      <div class="user-panel-row-label">
+        {{ $t('userPanel.bindAccount') }}
+      </div>
+
+      <div class="user-panel-bind">
+        <a-tooltip
+          v-for="(item) in bindList"
+          :key="item.type"
+          :title="$t(item.title)"
+        >
+          <ops-icon
+            class="user-panel-bind-item"
+            :type="userInfo.notice_info && userInfo.notice_info[item.type] ? item.existedIcon : item.icon"
+            @click="handleBindInfo(item.type)"
+          />
+        </a-tooltip>
+      </div>
+    </div>
+
+    <div class="user-panel-account">
+      <div
+        v-for="(item, index) in accountActions"
+        :key="index"
+        class="user-panel-account-item"
+        @click="handleLogout"
+      >
+        <ops-icon class="user-panel-account-icon" :type="item.icon" />
+        <span class="user-panel-account-title">
+          {{ $t(item.title) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState, mapMutations } from 'vuex'
+import { setDocumentTitle, domTitle } from '@/utils/domUtil'
+import {
+  bindPlatformByUid,
+  unbindPlatformByUid,
+} from '@/api/employee'
+import { getCompanyInfo } from '@/api/company'
+
+export default {
+  name: 'UserPanel',
+  data() {
+    return {
+      userBtnGroup: [
+        {
+          icon: 'veops-personal',
+          title: 'userPanel.myProfile',
+          type: 'myProfile'
+        },
+        {
+          icon: 'a-veops-account1',
+          title: 'userPanel.accountPassword',
+          type: 'accountPassword'
+        }
+      ],
+      languageList: [
+        {
+          title: '简中',
+          key: 'zh'
+        },
+        {
+          title: 'EN',
+          key: 'en'
+        },
+      ],
+      bindList: [
+        {
+          type: 'wechatApp',
+          icon: 'qiyeweixin',
+          existedIcon: 'wechatApp',
+          title: 'wechat'
+        },
+        {
+          type: 'feishuApp',
+          icon: 'ops-setting-notice-feishu-selected',
+          existedIcon: 'feishuApp',
+          title: 'feishu'
+        },
+        {
+          type: 'dingdingApp',
+          icon: 'ops-setting-notice-dingding-selected',
+          existedIcon: 'dingdingApp',
+          title: 'dingding'
+        },
+      ],
+      accountActions: [
+        {
+          icon: 'veops-switch',
+          title: 'userPanel.switchAccount'
+        },
+        {
+          icon: 'veops-sign_out',
+          title: 'userPanel.logout'
+        },
+      ],
+      hoverBindAccountList: []
+    }
+  },
+  computed: {
+    ...mapState({
+      email: (state) => state.user.email,
+      locale: (state) => state.locale,
+      userInfo: (state) => state.user,
+      companyName: (state) => state.company.name
+    }),
+    avatarSrc() {
+      const avatar = this.userInfo.avatar
+      if (!avatar) {
+        return null
+      }
+
+      return avatar.startsWith('https') ? avatar : `/api/common-setting/v1/file/${avatar}`
+    }
+  },
+  mounted() {
+    if (this.companyName === undefined) {
+      this.getCompanyInfo()
+    }
+  },
+  methods: {
+    ...mapActions(['Logout', 'GetInfo']),
+    ...mapMutations(['SET_LOCALE', 'SET_COMPANY_NAME']),
+    async getCompanyInfo() {
+      const res = await getCompanyInfo()
+      const name = res?.info?.name || ''
+      this.SET_COMPANY_NAME(name)
+    },
+
+    changeLang(lang) {
+      this.SET_LOCALE(lang)
+      this.$i18n.locale = lang
+      this.$nextTick(() => {
+        setDocumentTitle(`${this.$t(this.$route.meta.title)} - ${domTitle}`)
+      })
+    },
+    handleBindInfo(platform) {
+      const isBind = this?.userInfo?.notice_info?.[platform]
+      const uid = this?.userInfo?.uid
+
+      if (isBind) {
+        this.$confirm({
+          title: this.$t('warning'),
+          content: this.$t('cs.person.confirmUnbind'),
+          onOk: () => {
+            unbindPlatformByUid(platform, uid)
+              .then(() => {
+                this.$message.success(this.$t('cs.person.unbindSuccess'))
+              })
+              .finally(() => {
+                this.GetInfo()
+              })
+          },
+        })
+      } else {
+        bindPlatformByUid(platform, uid)
+          .then(() => {
+            this.$message.success(this.$t('cs.person.bindSuccess'))
+          })
+          .finally(() => {
+            this.GetInfo()
+          })
+      }
+    },
+
+    handleLogout() {
+      this.$confirm({
+        title: this.$t('tip'),
+        content: this.$t('topMenu.confirmLogout'),
+        onOk: () => {
+          this.Logout()
+        },
+        onCancel() {},
+      })
+    },
+
+    clickBtnGroup(type) {
+      switch (type) {
+        case 'myProfile':
+          if (this.$route.name === 'setting_person') {
+            this.$bus.$emit('changeSettingPersonCurrent', '1')
+          } else {
+            this.$router.push({
+              name: 'setting_person',
+              query: {
+                current: '1'
+              }
+            })
+          }
+          break
+        case 'accountPassword':
+          if (this.$route.name === 'setting_person') {
+            this.$bus.$emit('changeSettingPersonCurrent', '2')
+          } else {
+            this.$router.push({
+              name: 'setting_person',
+              query: {
+                current: '2'
+              }
+            })
+          }
+          break
+        default:
+          break
+      }
+    },
+
+    handleBindAccountMouse(type, isHover) {
+      const index = this.hoverBindAccountList.findIndex((item) => item === type)
+      if (isHover && index === -1) {
+        this.hoverBindAccountList.push(type)
+      } else if (!isHover && index !== -1) {
+        this.hoverBindAccountList.splice(index, 1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.user-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 350px;
+  padding: 0 20px;
+
+  &-avatar {
+    width: 62px;
+    height: 62px;
+    border-radius: 62px;
+    margin-top: 13px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #000000;
+    background-color: #FFFFFF;
+    font-size: 48px !important;
+  }
+
+  &-nickname {
+    color: #1D2129;
+    font-size: 15px;
+    font-weight: 700;
+
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    margin-top: 8px;
+  }
+
+  &-info {
+    display: flex;
+    align-items: center;
+    column-gap: 6px;
+    margin-top: 6px;
+    max-width: 100%;
+
+    &-icon {
+      flex-shrink: 0;
+      font-size: 12px;
+    }
+
+    &-text {
+      font-size: 12px;
+      font-weight: 400;
+      color: #4E5969;
+
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-wrap: nowrap;
+    }
+  }
+
+  &-btn {
+    width: 100%;
+    height: 72px;
+    display: flex;
+    align-items: center;
+    margin-top: 11px;
+
+    &-icon {
+      font-size: 22px;
+      color: #CACDD9;
+    }
+
+    &-title {
+      font-size: 14px;
+      font-weight: 400;
+      color: #1D2129;
+      margin-top: 8px;
+    }
+
+    &-item {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: #F7F8FA;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #EBEFF8;
+
+        .user-panel-btn-icon {
+          color: #2F54EB;
+        }
+
+        .user-panel-btn-title {
+          color: #2F54EB;
+        }
+      }
+    }
+  }
+
+  &-row {
+    width: 100%;
+    margin-top: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #4E5969;
+    }
+  }
+
+  &-lang {
+    display: flex;
+    align-items: center;
+    height: 28px;
+    width: 108px;
+    border-radius: 28px;
+    overflow: hidden;
+
+    &-item {
+      flex: 1;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #F7F8FA;
+      cursor: pointer;
+
+      &:first-child {
+        border-right: solid 1px #E4E7ED;
+      }
+
+      &_active {
+        background-color: #EBEFF8;
+        color: #2F54EB;
+      }
+
+      &:hover {
+        color: #2F54EB;
+      }
+    }
+  }
+
+  &-bind {
+    display: flex;
+    align-items: center;
+    column-gap: 22px;
+
+    &-item {
+      cursor: pointer;
+      font-size: 16px;
+    }
+  }
+
+  &-account {
+    margin-top: 22px;
+    padding-top: 13px;
+    padding-bottom: 20px;
+    border-top: solid 1px #F0F1F5;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 100%;
+
+    &-icon {
+      font-size: 14px;
+      color: #CACDD9;
+    }
+
+    &-title {
+      font-size: 14px;
+      color: #86909C;
+      margin-left: 5px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      cursor: pointer;
+
+      &:hover {
+        .user-panel-account-icon {
+          color: #2F54EB;
+        }
+
+        .user-panel-account-title {
+          color: #2F54EB;
+        }
+      }
+    }
+  }
+}
+</style>

cmdb-ui/src/lang/en.js

@@ -168,6 +168,15 @@ export default {
         monetaryAmount: 'monetary amount',
         custom: 'custom',
     },
+    userPanel: {
+      myProfile: 'My Profile',
+      accountPassword: 'Password',
+      notice: 'Notice',
+      switchLanguage: 'Switch Language',
+      bindAccount: 'Bind Account',
+      switchAccount: 'Switch Account',
+      logout: 'Logout'
+    },
     cmdb: cmdb_en,
     cs: cs_en,
     acl: acl_en,

cmdb-ui/src/lang/zh.js

@@ -168,6 +168,15 @@ export default {
         monetaryAmount: '货币金额',
         custom: '自定义',
     },
+    userPanel: {
+      myProfile: '个人中心',
+      accountPassword: '账号密码',
+      notice: '通知中心',
+      switchLanguage: '切换语言',
+      bindAccount: '绑定账号',
+      switchAccount: '切换账号',
+      logout: '退出账号'
+    },
     cmdb: cmdb_zh,
     cs: cs_zh,
     acl: acl_zh,

cmdb-ui/src/store/global/company.js

@@ -0,0 +1,11 @@
+const company = {
+  state: {
+    name: undefined
+  },
+  mutations: {
+    SET_COMPANY_NAME: (state, name) => {
+      state.name = name
+    },
+  },
+}
+export default company

cmdb-ui/src/store/global/user.js

@@ -46,7 +46,8 @@ const user = {
     sex: '',
     position_name: '',
     direct_supervisor_id: null,
-    auth_enable: {}
+    auth_enable: {},
+    notice_info: {}
   },
 
   mutations: {
@@ -54,7 +55,7 @@ const user = {
       state.token = token
     },
 
-    SET_USER_INFO: (state, { name, welcome, avatar, roles, info, uid, rid, username, mobile, department_id, employee_id, email, nickname, sex, position_name, direct_supervisor_id, annual_leave }) => {
+    SET_USER_INFO: (state, { name, welcome, avatar, roles, info, uid, rid, username, mobile, department_id, employee_id, email, nickname, sex, position_name, direct_supervisor_id, annual_leave, notice_info }) => {
       state.name = name
       state.welcome = welcome
       state.avatar = avatar
@@ -73,6 +74,7 @@ const user = {
       state.position_name = position_name
       state.direct_supervisor_id = direct_supervisor_id
       state.annual_leave = annual_leave
+      state.notice_info = notice_info
     },
 
     LOAD_ALL_USERS: (state, users) => {
@@ -160,7 +162,8 @@ const user = {
               sex: res.sex,
               position_name: res.position_name,
               direct_supervisor_id: res.direct_supervisor_id,
-              annual_leave: res.annual_leave
+              annual_leave: res.annual_leave,
+              notice_info: res.notice_info
             })
           })
         }).catch(error => {

cmdb-ui/src/store/index.js

@@ -7,6 +7,7 @@ import user from './global/user'
 import routes from './global/routes'
 import notice from './global/notice'
 import getters from './global/getters'
+import company from './global/company'
 import appConfig from '@/config/app'
 
 Vue.use(Vuex)
@@ -16,7 +17,8 @@ const store = new Vuex.Store({
     app,
     user,
     routes,
-    notice
+    notice,
+    company
   },
   state: {
     windowWidth: 800,

cmdb-ui/src/views/setting/companyInfo/index.vue

@@ -47,6 +47,7 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 import { getCompanyInfo, postCompanyInfo, putCompanyInfo } from '@/api/company'
 import SpanTitle from '../components/spanTitle.vue'
 import { mixinPermissions } from '@/utils/mixin'
@@ -82,6 +83,7 @@ export default {
     } else {
       this.infoData = res.info
       this.getId = res.id
+      this.SET_COMPANY_NAME(res?.info?.name || '')
     }
   },
   computed: {
@@ -122,6 +124,7 @@ export default {
     },
   },
   methods: {
+    ...mapMutations(['SET_COMPANY_NAME']),
     async onSubmit() {
       this.$refs.infoData.validate(async (valid) => {
         if (valid) {
@@ -130,6 +133,7 @@ export default {
           } else {
             await putCompanyInfo(this.getId, this.infoData)
           }
+          this.SET_COMPANY_NAME(this.infoData.name || '')
           this.$message.success(this.$t('saveSuccess'))
         } else {
           this.$message.warning(this.$t('cs.companyInfo.checkInputCorrect'))

cmdb-ui/src/views/setting/person/index.vue

@@ -2,27 +2,13 @@
   <div class="setting-person">
     <div class="setting-person-left">
       <div
-        @click="
-          () => {
-            $refs.personForm.clearValidate()
-            $nextTick(() => {
-              current = '1'
-            })
-          }
-        "
+        @click="clickSideItem('1')"
         :class="{ 'setting-person-left-item': true, 'setting-person-left-item-selected': current === '1' }"
       >
         <ops-icon type="icon-shidi-yonghu" />{{ $t('cs.person.spanTitle') }}
       </div>
       <div
-        @click="
-          () => {
-            $refs.personForm.clearValidate()
-            $nextTick(() => {
-              current = '2'
-            })
-          }
-        "
+        @click="clickSideItem('2')"
         :class="{ 'setting-person-left-item': true, 'setting-person-left-item-selected': current === '2' }"
       >
         <a-icon type="unlock" theme="filled" />{{ $t('cs.person.accountAndPassword') }}
@@ -240,7 +226,14 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    this.$bus.$off('changeSettingPersonCurrent', this.clickSideItemv)
+  },
   mounted() {
+    this.$bus.$on('changeSettingPersonCurrent', this.clickSideItem)
+    if (this.$route?.query?.current) {
+      this.current = this.$route.query.current
+    }
     this.getAllFlatEmployees()
     this.getAllFlatDepartment()
     this.getEmployeeByUid()
@@ -249,6 +242,12 @@ export default {
     ...mapActions(['GetInfo']),
     getDepartmentName,
     getDirectorName,
+    clickSideItem(type) {
+      this.$refs.personForm.clearValidate()
+      this.$nextTick(() => {
+        this.current = type
+      })
+    },
     getEmployeeByUid() {
       getEmployeeByUid(this.uid).then((res) => {
         this.form = { ...res }