epx-frame 3.5.0-shpgy.1

package/src/frame/packages/app-nav/AppNav.vue

@@ -0,0 +1,1553 @@
+<script>
+import { mapState, mapGetters } from 'vuex'
+import Container from '@/frame/views/Container'
+import component from '@/utils/mixins/component'
+
+//, DELETE_MENU_ROUTER, DELETE_MODULE_ROUTER
+import { CREATE_TAB, SELECT_TAB, DESTORY_TAB, CLEAR_TABS, DELETE_ROUTER } from '@/store/actions'
+export default {
+  name: 'epx-app-nav',
+  extends: Container,
+  mixins: [component],
+  props: {
+    msg: String,
+    type: String,
+    firstPage: String,
+    showIndexNav: Boolean,
+    closeToLogin: Boolean,
+    showRoleChange: Boolean,
+    editPersonFlag: Boolean,
+    editPersonPage: String,
+    navOperates: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    menu: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      menus: state => state.config.menus,
+      user: state => state.user.user,
+      userInfo: state => state.user.userInfo,
+      showAppNav: state => state.config.showAppNav
+    }),
+    ...mapGetters([
+      'getTab'
+    ]),
+    system () {
+      return {
+        user: this.user
+      }
+    },
+    currentRoleEntity () {
+      const { currentRoleEntity = {} } = this.user
+      const { data = {} } = currentRoleEntity
+      return data
+    },
+    currentRoleName () {
+      const { role: roleCode, roleId } = this.$route.params
+      const role = this.roleList.find(role => (role.ID === roleId || role.CODE === roleCode))
+      if (role) return role.NAME
+      return this.$t('set the role')
+    },
+    photo () {
+      const { PHOTO } = this.userInfo
+      if (PHOTO) return this.$util.getFileUrl(PHOTO)
+      return this.circleUrl
+    },
+    logo () {
+      const { LOGO, 'SYSTEM|APP_LOGO': systemLogo } = this.appConfig
+      const { APP_LOGO: clientLogo } = this.clientConfig
+      const appLogo = LOGO || systemLogo || clientLogo
+      if (appLogo) return this.$util.getFileUrl(appLogo)
+      return null
+    },
+    tabs () {
+      return this.$tabs.filter(item => !(item.key + '').includes('default-'))
+    },
+    languageFlag () {
+      const { LANGUAGE_FLAG: languageFlag } = this.clientConfig
+      return languageFlag
+    },
+    currentLanguage () {
+      const { CODE: clientCode, LANGUAGE_DEFAULT: defaultLanguage } = this.clientConfig
+      const { LANGUAGE: userDefaultLanguage } = this.userInfo
+      const currentLanguage = this.$cookie.get(`${clientCode}-language`) || userDefaultLanguage || defaultLanguage
+      return currentLanguage
+    },
+    languageList () {
+      const { LANGUAGES: languages = '', 'LANGUAGES#': languageNames = '' } = this.clientConfig
+      // 获取当前语言
+      if (!languages) return []
+      const languageIdList = languages.split(',')
+      const languageNameList = languageNames.split(',')
+      const languageList = languageIdList.map((item, index) => ({ id: item, name: languageNameList[index] }))
+      return languageList
+    },
+    showTypeList () {
+      const list = this.roleTypeList.filter(item => this.roleTypeMap[item.code] && this.roleTypeMap[item.code].length > 0)
+      return list
+    }
+  },
+  data () {
+    return {
+      activeIndex: '/',
+      searchValue: '',
+      circleUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      roleList: [],
+      navList: [],
+      moduleId: '',
+      module: {},
+      showMobileMenu: false,
+      themeList: [],
+      selectTheme: '',
+      systemName: '',
+      openType: null,
+      popoverVisible: false,
+      manageRight: {},
+      NAME: '',
+      selectDept: '',
+      userDepts: [],
+      showSwitchRoleDialog: false,
+      activeRoleType: '',
+      roleTypeList: [],
+      roleTypeMap: {},
+      selectRole: '',
+      isSbtjxz: false,
+      setDefaultRole: false
+    }
+  },
+  watch: {
+    menuRoute (v) {
+      const { moduleId } = v
+      if (moduleId) {
+        this.moduleId = moduleId
+      } else {
+        const { moduleId } = this.$route.query
+        this.moduleId = moduleId
+      }
+    },
+    $route (v) {
+      this.showMobileMenu = false
+    },
+    showTypeList (v) {
+      if (!this.activeRoleType && v.length > 0) {
+        this.activeRoleType = v[0].code
+      }
+    }
+  },
+  methods: {
+    logout () {
+      this.$http.logout()
+        .then(() => {
+          if (this.isModulePage && !this.closeToLogin) {
+            window.close()
+            setTimeout(() => {
+              this.$util.toLogin()
+            }, 100)
+          } else {
+            this.$util.toLogin()
+            this.$message.success(this.$t('logout'))
+          }
+          if (this.appConfig['SYSTEM|LOGOUT_AFTER_REDIRECT']) {
+            window.location.href = this.appConfig['SYSTEM|LOGOUT_AFTER_REDIRECT']
+          }
+        })
+        .catch((err) => {
+          this.$message.error(err.msg || this.$t('exit failure'))
+        })
+    },
+    backModule () {
+      // this.$store.commit(DELETE_MENU_ROUTER)
+      // this.$store.commit(DELETE_MODULE_ROUTER)
+      if (this.newPage) {
+        const { id } = this.$route.params
+        const { MODULE, FIRST_PAGE, NAME } = this.appConfig
+        this.$router.push(`/app/${id}`)
+        this.$createPage({
+          key: 'nav-' + new Date().getTime(),
+          title: NAME,
+          moduleId: MODULE,
+          openType: '1',
+          query: {
+            ...this.$route.query
+          },
+          children: [{
+            component: 'app-index',
+            pageId: FIRST_PAGE,
+            moduleId: MODULE
+          }]
+        })
+      } else {
+        // 切换到nav
+        this.toPage(this.navList[0])
+      }
+    },
+    toPage (nav, type) {
+      const key = 'default-' + nav.ID
+      const navRouter = this.$tabs.find(item => item.key === key)
+      if (type === 1) {
+        this.$createPage({
+          moduleId: nav.ID,
+          title: nav.NAME,
+          component: 'module-index-page',
+          openType: '1'
+        })
+        this.$store.commit(CREATE_TAB, {
+          key: key,
+          moduleId: nav.ID,
+          title: nav.NAME,
+          pageId: nav.MAIN_PAGE
+        })
+        this.openType = null
+      } else if (navRouter) {
+        this.$store.commit(DESTORY_TAB, key)
+        this.$nextTick(() => {
+          this.$store.commit(CREATE_TAB, {
+            key: 'default-' + nav.ID,
+            moduleId: nav.ID,
+            component: 'module-index-page',
+            title: nav.NAME,
+            pageId: nav.MAIN_PAGE
+          })
+        })
+      } else {
+        this.$store.commit(CREATE_TAB, {
+          key: 'default-' + nav.ID,
+          moduleId: nav.ID,
+          component: 'module-index-page',
+          title: nav.NAME,
+          pageId: nav.MAIN_PAGE
+        })
+      }
+    },
+    toPersonInfo () {
+      if (!this.editPersonFlag) return
+      const navRouter = this.$tabs.find(item => item.key === 'default-person-info')
+      if (navRouter) {
+        this.$store.commit(DESTORY_TAB, 'default-person-info')
+      }
+      this.$store.commit(CREATE_TAB, {
+        key: 'default-person-info',
+        pageId: this.editPersonPage,
+        title: this.$t('personal center'),
+        metaId: 'FM_USER',
+        component: 'personal-info'
+      })
+    },
+    goHome () {
+      this.activeIndex = '/'
+      this.$router.push('/')
+    },
+    // getRoles () {
+    //   this.$http.optionalRoles()
+    //     .then(data => {
+    //       this.roleList = data.entitys
+    //     })
+    // },
+    async switchRoleFn () {
+      console.log('---')
+      const role = this.roleTypeMap[this.activeRoleType].find(item => item.id === this.selectRole)
+      if (!role) {
+        this.$message.error('请选择要切换的角色')
+        return
+      }
+      const { client } = this.$route.params
+      const service = role.data.service.split(',')[0]
+      await this.changeDept()
+      if (this.setDefaultRole) {
+        await this.setMain(role)
+      }
+      setTimeout(() => {
+        window.location.href = window.location.origin + window.location.pathname + '#/app/' + client + '/' + role.data.system + '/' + service + '/' + role.data.CODE
+        setTimeout(() => {
+          window.location.reload()
+        }, 10)
+      }, 10)
+    },
+
+    setMainRole (role, e) {
+      e && e.stopPropagation()
+      if (role.MAIN_ROLE !== 'true') {
+        this.$http.save({
+          action: 'setMainRole',
+          entityId: 'FM_USER_SERVICE_MAIN_ROLE',
+          serviceId: this.appConfig.ID,
+          roleId: role.ID
+        })
+          .then(() => {
+            this.$message.success(this.$t('successfully set'))
+            this.getServiceRoles()
+          })
+      }
+    },
+    getManageService () {
+      this.$http.get({
+        action: 'hasMangeService',
+        entityId: 'FM_USER',
+        querySystem: this.appConfig.SYSTEM
+      })
+        .then(data => {
+          this.manageRight = data
+        })
+    },
+    getModule () {
+      this.$http.get({
+        entityId: 'FM_MODULE',
+        id: this.moduleId
+      })
+        .then(data => {
+          if (data && data.data) {
+            this.module = { ...data.data }
+            if (this.isModulePage) {
+              document.title = this.module.NAME
+            }
+          }
+        })
+    },
+    getNavList () {
+      let { roleId, role } = this.$route.params
+      if (!roleId) {
+        const { roles = {} } = this.user
+        const currentRole = Object.entries(roles).find(([key, item]) => item.CODE === role) || []
+        roleId = currentRole[0]
+      }
+      const { MODULE } = this.appConfig
+      this.$http.getMenuData({
+        action: 'getMenuTreeData',
+        moduleId: MODULE,
+        roleId: roleId
+      })
+        .then(data => {
+          this.navList = data
+        })
+    },
+    getUserInfo () {
+      if (!this.userInfo || !this.userInfo.ID) {
+        this.$store.dispatch('GET_USER_INFO')
+      }
+    },
+    getSysMenu () {
+      return this.$http.find({
+        entityId: 'FM_SYSTEM',
+        'scope.CODE': this.$util.getSysId()
+      })
+    },
+    getServiceRoles () {
+      this.$http.get({
+        action: 'getServiceRoles',
+        entityId: 'FM_ROLE',
+        serviceId: this.appConfig.ID
+      })
+        .then(data => {
+          this.roleList = [...data.entitys]
+          const { role: roleCode, roleId } = this.$route.params
+          const role = this.roleList.find(role => (role.ID === roleId || role.CODE === roleCode))
+          this.selectRole = role.ID
+        })
+    },
+    getUserDepts () {
+      this.$http.get({
+        action: 'getUserDepts',
+        entityId: 'FM_USER'
+      })
+        .then(data => {
+          this.selectDept = this.user.deptId
+          this.userDepts = Object.keys(data).map(item => ({ id: item, name: data[item] }))
+        })
+    },
+    changeTheme (theme) {
+      document.documentElement.setAttribute('data-theme', theme.key)
+      localStorage.setItem('epx_frame_theme', theme.key)
+      this.selectTheme = theme.key
+      // this.$http.update({
+      //   entityId: 'FM_SYSTEM_CONFIG',
+      //   'bean.THEME': theme
+      // })
+      //   .then(data => {
+      //     document.documentElement.setAttribute('data-theme', theme.key)
+      //     this.selectTheme = theme.key
+      //   })
+    },
+    selectTab (router) {
+      this.$store.commit(SELECT_TAB, router.key)
+      // 清空当前的router
+    },
+    deleteTab (router) {
+      this.$store.commit(DELETE_ROUTER, router.key)
+    },
+    openService (name) {
+      const { 'SYSTEM|CODE': system, 'CLIENT|CODE': client } = this.appConfig
+      const token = this.$cookie.get(client + '-token')
+      if (name === 'client') {
+        window.open(window.location.origin + window.location.pathname + `#/hall/${client}`)
+      } else {
+        window.open(window.location.origin + window.location.pathname + `#/${name}/${client}/${name === 'system' ? system : ''}?_token=${token || ''}`)
+      }
+    },
+    clearTabs () {
+      this.$store.commit(CLEAR_TABS)
+      this.popoverVisible = false
+    },
+    tabClick (tab, event) {
+      this.$store.commit(SELECT_TAB, tab.name)
+    },
+    tabRemove (name) {
+      this.$store.commit(DESTORY_TAB, name)
+    },
+    tabsContextmenu (event) {
+      event.preventDefault()
+      this.popoverVisible = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.$refs.tabPopover.$refs.popper.style.top = (event.clientY + 5) + 'px'
+          this.$refs.tabPopover.$refs.popper.style.left = (event.clientX - 100) + 'px'
+        }, 0)
+      })
+    },
+    toAppIndex () {
+      // 获取首页
+      this.$store.commit(SELECT_TAB, 'default-index')
+    },
+    backIndex () {
+      let tab = this.getTab('default-index')
+      if (!tab) {
+        tab = this.$tabs[0]
+      }
+      this.$store.commit(CREATE_TAB, { ...tab, key: 'default-index' + new Date().getTime() })
+    },
+    switchLanguage (language) {
+      if (language.id === this.currentLanguage) return
+      const { CODE: clientCode } = this.clientConfig
+      this.$cookie.set(`${clientCode}-language`, language.id)
+      location.reload()
+    },
+    openSwitchRoleDialog () {
+      if (!this.openedSwitchRoleDialog) {
+        this.getPersonInfo()
+        this.getUserDepts()
+        this.getRoleType()
+      }
+      this.openedSwitchRoleDialog = true
+      this.showSwitchRoleDialog = true
+    },
+    getRoleType () {
+      this.$http.getCodes({
+        key: 'PR_ROLE_TYPE'
+      })
+        .then(data => {
+          this.roleTypeList = data
+        })
+    },
+    getRoleList (first) {
+      this.$http.get({
+        action: 'getRolesWithService',
+        entityId: 'FM_ROLE'
+      })
+        .then(data => {
+          const roleTypeMap = {}
+
+          data.result.map(item => {
+            const typeList = item.data.TYPE.split(',')
+            typeList.forEach(type => {
+              if (!roleTypeMap[type]) roleTypeMap[type] = []
+              if (type === '4') {
+                if (item.data.CODE !== 'teacher' || this.isSbtjxz) {
+                  roleTypeMap[type].push(item)
+                }
+              } else {
+                roleTypeMap[type].push(item)
+              }
+            })
+          })
+          this.roleTypeMap = roleTypeMap
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    setMain (role) {
+      let roleId = role.id
+      if (role.data.is_main) {
+        roleId = ''
+      }
+      return this.$http.save({
+        action: 'setMainRole',
+        entityId: 'FM_ROLE',
+        roleId
+      })
+        .then(() => {
+          return true
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          return true
+        })
+    },
+    selectRoleFn (role) {
+      this.selectRole = role.id
+    },
+    getPersonInfo () {
+      this.$http.find({
+        entityId: 'HR_CORE_PERSON',
+        'scope.ID': this.user.id
+      })
+        .then(data => {
+          if (data) {
+            this.isSbtjxz = data.data.SBTJXZ === '1'
+          }
+          this.getRoleList()
+        })
+        .catch(() => {
+          this.getRoleList()
+        })
+    },
+    changeDept () {
+      return this.$http.save({
+        action: 'changeMainDept',
+        entityId: 'FM_USER',
+        deptId: this.selectDept
+      })
+        .then(() => {
+          return true
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          return true
+        })
+    },
+    openHelpPage () {
+      const { 'SYSTEM|CODE': systemCode, 'CLIENT|CODE': clientCode, CODE } = this.appConfig
+      window.open(window.location.origin + window.location.pathname + `/#/help/${clientCode}/${systemCode}/${CODE}`)
+      // this.$store.commit(CREATE_TAB, {
+      //   key: 'default-service-page',
+      //   component: 'service-help-page',
+      //   metaId: 'FM_SERVICE_HELP',
+      //   title: '应用帮助'
+      // })
+    },
+    /**
+     * 页面跳转
+     * @param num 选中记录数(1,必须选中且只能选中一条记录；n：必须选中至少一条记录；0不需要选中记录)
+     * @param pageFlag 目标页面的标识符
+     * @param metaId 目标页面的对象
+     * @param openMode 打开方式
+     * @param params #[列表对象的某字段名]"，(如果是选中的多条记录，将字段值拼成一个字符串，用逗号隔开) "$[当前页面的某变量名]"
+     * @param comfirmMsg 操作提交之前的确认信息（如果为空，就不需要确认）
+     */
+    goPage ({ pageFlag, metaId = this.$metaId, num = 0, openMode = '3', component, pageId, menuId, pageType, confirmMsg = null, params = {} }, row) {
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      let selections = []
+      const formatParams = {}
+      const _params = { ...params }
+      // 检测是否选中元素
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.selection) selections = [...this.selection]
+      }
+      if (num !== 0 && num !== '0') {
+        if (selections.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        } else if (selections.length > 1) {
+          if (num === 1 || num === '1') {
+            this.$message.error(this.$t('Only one record can be selected'))
+            return
+          }
+        }
+      }
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      // 格式化params
+      for (const key in _params) {
+        let value = _params[key]
+        if (/\$\[(.+)\]/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || eval(`that.$tab.${valueKey}`) || ''
+          } catch (err) {
+            console.error(err)
+            value = ''
+          }
+        }
+        if (/#\{(.+)\}/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/#\{(.+)\}/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            console.error(err)
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(_params[key])) {
+          value = _params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = selections.map(item => item[key])
+            return values.join(',')
+          })
+        }
+        formatParams[key] = value
+      }
+      // 提交方法
+      const submitFn = () => {
+        this.$store.commit(CREATE_TAB, {
+          key: 'default-' + pageId,
+          pageId,
+          component
+        })
+        // this.$createPage({
+        //   flag: pageFlag,
+        //   metaId: metaId,
+        //   pageId,
+        //   menuId,
+        //   openType: openMode,
+        //   component,
+        //   pageType,
+        //   ...formatParams
+        // })
+      }
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, this.$t('hint'), {
+          confirmButtonText: this.$t('determine'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          submitFn()
+        })
+      } else {
+        submitFn()
+      }
+    },
+    renderLogo () {
+      return (
+        <div class="logo" onClick={this.backIndex}>
+          { this.logo && <img class="img-icon" src={this.logo} />}
+          <span title={this.NAME || this.appConfig.NAME}>{this.NAME || this.appConfig.NAME}</span>
+        </div>
+      )
+    },
+    renderNav () {
+      return (
+        <div class="home-nav">
+          {
+            this.type === '1' ? (
+              <div class="nav-menu">
+                <el-menu class="epx-header-menu" text-color="#fff" active-text-color='#fff' mode="horizontal">
+                  {
+                    this.menu && this.menu.map(nav => {
+                      if (nav.HIDDEN_MENU !== '1') {
+                        return (
+                          <el-menu-item key={nav.ID} index={nav.ID} class={['menu-item', { active: this.$tab.key === ('default-' + nav.ID) }]} nativeOnClick={this.toPage.bind(this, nav)} >
+                            <el-popover
+                              placement="bottom"
+                              trigger="manual"
+                              value={this.openType === nav.ID}
+                            >
+                              <span slot="reference"onContextmenu={e => { e.preventDefault(); this.openType = nav.ID }}>
+                                <i class={['fa', nav.FONT_ICON]}></i>
+                                <span>{nav.text}</span>
+                              </span>
+                              <div class="popover-btn" onClick={this.toPage.bind(this, nav, 1)}>{this.$t('open a new label')}</div>
+                            </el-popover>
+                          </el-menu-item>
+                        )
+                      }
+                    })
+                  }
+                </el-menu>
+                {
+                  this.tabs.length > 0 && (
+                    <el-dropdown onCommand={this.selectTab}>
+                      <span class="router-dropdown-link" >
+                        {this.$tab && this.$tab.title}<i class="el-icon-arrow-down el-icon--right"></i>
+                      </span>
+                      <el-dropdown-menu slot="dropdown">
+                        {
+                          this.tabs.map(tab => (
+                            <el-dropdown-item key={tab.key} command={tab}>
+                              {tab.title}
+                              <i class="el-icon-error" onClick={this.tabRemove.bind(this, tab)}></i>
+                            </el-dropdown-item>
+                          ))
+                        }
+                        <el-dropdown-item nativeOnClick={this.clearTabs}>
+                          <el-button class="clear-routers" type="text"><i class="el-icon-document-delete"></i>{this.$t('empty')}</el-button>
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  )
+                }
+              </div>
+            ) : (
+              <div>
+                {this.showIndexNav && (
+                  <el-menu class="epx-header-menu" text-color="#fff" active-text-color='#fff' mode="horizontal">
+                    <el-menu-item index="index" nativeOnClick={this.toAppIndex}> <span>{this.$t('home page')}</span></el-menu-item>
+                  </el-menu>
+                )}
+                <el-tabs class="tabs" value={this.$tab.key} onTab-click={this.tabClick} closable onTab-remove={this.tabRemove} nativeOnContextmenu={this.tabsContextmenu}>
+                  {
+                    this.tabs.map(tab => (
+                      <el-tab-pane key={tab.key} label={tab.title} name={tab.key}></el-tab-pane>
+                    ))
+                  }
+                </el-tabs>
+              </div>
+            )
+          }
+          <el-popover
+            ref="tabPopover"
+            placement="bottom"
+            width="200"
+            trigger="manual"
+            vModel={this.popoverVisible}
+          >
+            <span slot="reference" > </span>
+            <div class="popover-btn" onClick={this.clearTabs}>{this.$t('Clear tabs')}</div>
+          </el-popover>
+        </div>
+      )
+    },
+    renderOperates () {
+      return (
+        <div class="operates">
+          {
+            this.navOperates.map(operate => (
+              <el-button class="operate" size="medium" type={operate.type === 'text' ? 'text' : operate.ui} key={operate.text}
+                onClick={this.$handler.bind(this, operate)}>
+                <i class={['operate-icon', operate.icon]}></i> {operate.text}
+              </el-button>
+            ))
+          }
+          {
+            this.appConfig.SHOW_HELP === '1' && (
+              <el-button class="operate" icon="el-icon-document" size="medium" type="text" onClick={this.openHelpPage.bind(this)}>
+            帮助中心
+              </el-button>
+            )
+          }
+
+        </div>
+      )
+    },
+    renderRole () {
+      return (
+        <div class="switch-role-btn" onClick={this.openSwitchRoleDialog}>
+          {this.currentRoleName}<i class="el-icon-arrow-down el-icon--right"></i>
+        </div>
+      )
+    },
+    renderPhoto () {
+      return (
+        <div class="photo" onClick={this.toPersonInfo}>
+          <el-avatar class="avatar" src={this.photo}></el-avatar>
+        </div>
+      )
+    },
+    renderMoreOperate () {
+      return (
+        <el-dropdown trigger="click" >
+          <span class="el-dropdown__link">
+            {this.user.name || this.user.account}<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" >
+            {/* this.manageRight.clientAdmin === 'true' && <el-dropdown-item command="client" nativeOnClick={this.openService.bind(this, 'client')}>{this.$t('super administrator')}</el-dropdown-item> */}
+            {this.manageRight.systemAdmin === 'true' && <el-dropdown-item command="system" nativeOnClick={this.openService.bind(this, 'system')} >{this.$t('System administrator')}</el-dropdown-item>}
+            <el-popover
+              popper-class="skin-popover"
+              placement="left-start"
+              trigger="hover"
+            >
+              <el-dropdown-item slot="reference" command="skin" >{this.$t('skin')}</el-dropdown-item>
+              <ul class="skin-theme">
+                {
+                  this.themeList.map(theme => (
+                    <li class={{ 'is-active': theme.key === this.selectTheme }} key={theme.key} onClick={this.changeTheme.bind(this, theme)}>
+                      <img src={theme.icon} alt="" />
+                      {theme.key === this.selectTheme && <i class="skin-theme-select el-icon-success"></i>}
+                    </li>
+                  ))
+                }
+
+              </ul>
+            </el-popover>
+            {
+              this.languageFlag === '1' && (
+                <el-popover
+                  placement="left-start"
+                  trigger="hover"
+                >
+                  <el-dropdown-item slot="reference" command="language" >{this.$t('language')}</el-dropdown-item>
+                  <ul class="language-list">
+                    {
+                      this.languageList.map(language => (
+                        <li class={['language-item', { 'language-item__active': language.id === this.currentLanguage }]} onClick={this.switchLanguage.bind(this, language)}>
+                          <span>{language.name}</span>
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </el-popover>
+              )
+            }
+
+            <el-dropdown-item command="d" nativeOnClick={this.logout}>{this.$t('logout')}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      )
+    },
+    renderSwitchRoleDialog () {
+      return (
+        <el-dialog
+          class="epx-app-nav__role-switch-dialog"
+          append-to-body
+          visible={this.showSwitchRoleDialog}
+          {...{
+            on: {
+              'update:visible': v => { this.showSwitchRoleDialog = v }
+            }
+          }}
+          width="1200px"
+          top="10vh"
+        >
+          <div class="role-card__header" slot="title">
+            <span>
+              <img src={require('@/assets/images/logo.png')} />
+              <span class="role-card__title">上海市教育评估院教师综合评价平台</span>
+            </span>
+          </div>
+          <div class="role-card__body">
+            <ul class="role-type__list">
+              {
+                this.showTypeList.map(item => (
+                  <li class={['role-type__item', { 'is-active': item.code === this.activeRoleType }]} key={item.code} onClick={() => { this.activeRoleType = item.code }}>{ item.name }</li>
+                ))
+              }
+            </ul>
+            <div class="role-title">请选择角色进入系统</div>
+            <el-select vModel={this.selectDept} size="large" class="dept-select">
+              {
+                this.userDepts.map(dept => (
+                  <el-option key={dept.id} label={dept.name} value={dept.id}></el-option>
+                ))
+              }
+            </el-select>
+            <div class="role-content">
+              <div class="system-content">
+                {
+                  this.roleTypeMap[this.activeRoleType] && (
+                    <ul class="role-list" >
+                      {
+                        this.roleTypeMap[this.activeRoleType].map(role => (
+                          <li class={['role-item', { 'is-select': this.selectRole === role.id }]} key={role.id} onClick={this.selectRoleFn.bind(this, role)}>
+                            <div class="role-item__body">
+                              {role.data.NAME}
+                              <i class="epx-icon-kapianxuanzhong"></i>
+                            </div>
+                          </li>
+                        ))
+                      }
+
+                    </ul>
+                  )
+                }
+
+              </div>
+            </div>
+
+          </div>
+          <p style={{ textAlign: 'center' }}>
+            <el-checkbox vModel={this.setDefaultRole}>记住选择，以后登录默认进入该角色</el-checkbox>
+          </p>
+          <span slot="footer" class="dialog-footer">
+            <el-button onClick={() => { this.showSwitchRoleDialog = false }}>取 消</el-button>
+            <el-button type="primary" onClick={this.switchRoleFn}>确 定</el-button>
+          </span>
+        </el-dialog>
+      )
+    }
+  },
+  created () {
+    window.addEventListener('click', () => {
+      this.openType = null
+      this.popoverVisible = false
+    })
+    if (this.type === '1') {
+      this.getNavList()
+    }
+    this.getUserInfo()
+    this.getManageService()
+    this.getServiceRoles()
+    this.getUserDepts()
+
+    this.selectTheme = localStorage.getItem('epx_frame_theme')
+    document.documentElement.setAttribute('data-theme', this.selectTheme)
+    this.$bus.on('showMobileMenu', v => {
+      this.showMobileMenu = v
+    })
+    // 经典蓝：#0874E7
+    // 霞红：#CE4545
+    // 森绿：#3D8A50
+    // 薰衣草紫：#7569E2
+    // 橙橘：#EA6000
+    // 海蓝：#0F5FBD
+    // 星空蓝：#1A4586
+    // 极光蓝：#383B9E
+    // 蒂芙尼蓝：#00AAAD
+    this.themeList = [
+      { name: 'Classic blue', key: 'classicblue', icon: require('@/assets/images/theme/classicblue.png') },
+      { name: 'Rosy Clouds Red', key: 'palevioletred', icon: require('@/assets/images/theme/palevioletred.png') },
+      { name: 'Forest Green', key: 'forestgreen', icon: require('@/assets/images/theme/forestgreen.png') },
+      { name: 'Lavender Purple', key: 'purple', icon: require('@/assets/images/theme/purple.png') },
+      { name: 'Orange', key: 'orange', icon: require('@/assets/images/theme/orange.png') },
+      { name: 'Sea Blue', key: 'deepblue', icon: require('@/assets/images/theme/deepblue.png') },
+      { name: 'Sky Blue', key: 'skyblue', icon: require('@/assets/images/theme/skyblue.png') },
+      { name: 'Aurora Blue', key: 'aurorablue', icon: require('@/assets/images/theme/aurorablue.png') },
+      { name: 'Tiffanyblue Blue', key: 'tiffanyblue', icon: require('@/assets/images/theme/tiffanyblue.png') }
+    ]
+  },
+  render () {
+    if (this.$isMobile || !this.showAppNav) return null
+    return (
+      <div class="nav" style={this.style}>
+        <div class="container">
+          <div class="left">
+            { this.renderLogo() }
+            { this.renderNav() }
+          </div>
+          <div class="right">
+            { this.renderOperates() }
+            { this.renderRole() }
+            { this.renderPhoto() }
+            { this.renderMoreOperate() }
+            { this.renderSwitchRoleDialog() }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.nav{
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  @include bg_color_primary;
+  // background-color: #1f82ef;
+  box-shadow: 0px 3px 5px 0px rgba(172, 172, 172, 0.46);
+  position: relative;
+  z-index: 101;
+}
+.container {
+  padding-right: 24px;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &::v-deep {
+    .el-avatar >img {
+      width: 100%;
+    }
+  }
+}
+.left {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.logo{
+  display: flex;
+  align-items: center;
+  min-width: 216px;
+  max-width: 320px;
+    font-size: 18px;
+  color: #fff;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  padding-left: 24px;
+  // height: 49px;
+  // cursor: pointer;
+  .img-icon{
+   height: 30px;
+   margin-right: 8px;
+  }
+  >span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.epx-header-menu {
+  height: 100%;
+}
+.home-nav{
+  display: flex;
+  overflow: hidden;
+  margin-right: 20px;
+  &::v-deep
+  {
+    .el-menu {
+      @include bg_color_primary;
+      .el-menu-item {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          line-height: 58px;
+        i {
+          color: #fff;
+          margin-right: 4px;
+        }
+      }
+    }
+    .el-popover{
+      padding:2px 0px;
+    }
+  }
+}
+.router-dropdown-link {
+  margin-left: 20px;
+  cursor: pointer;
+  color: #fff;
+
+}
+.home-nav::v-deep .el-menu--horizontal > .el-menu-item:hover {
+  background-color: rgba(0,0,0,.2);
+  border-bottom: none;
+}
+.home-nav::v-deep .el-menu--horizontal > .el-menu-item.active {
+ background-color: rgba(0,0,0,.2);
+}
+.home-nav::v-deep .el-menu--horizontal > .el-menu-item.is-active {
+ border: none
+}
+.home-nav::v-deep .el-menu--horizontal {
+ border-bottom: none;
+}
+.home-nav img {
+  width: 18px;
+  height: 17px;
+  margin-right: 3px;
+  // position: relative;
+  // // top: -1px;
+  // left: -3px;
+}
+.nav-menu {
+  display: flex;
+}
+.tabs {
+  position: relative;
+  flex: 1;
+  &::v-deep {
+    .el-tabs__header {
+      margin-bottom: 0;
+    }
+    .el-tabs__item{
+      padding: 0 20px!important;
+      color: #fff!important;
+      .el-icon-close {
+        position: absolute;
+        top: 50%;
+        margin-top: -6px;
+        right: 0px;
+        display: none;
+        // opacity: 0;
+      }
+      &:hover {
+        .el-icon-close {
+         display: block;
+        }
+      }
+    }
+    .el-tabs__nav-wrap::after {
+      background: none;
+    }
+    .el-tabs__active-bar {
+      background: #fff;
+    }
+    .el-tabs__nav-next, .el-tabs__nav-prev {
+      color: #fff;
+      line-height: 60px;
+    }
+  }
+}
+.right {
+  display: flex;
+  height: 100%;
+}
+.right::v-deep .el-input__inner{
+  width: 406px;
+}
+.photo {
+  height: 68px;
+  line-height: 94px;
+  margin-left: 20px;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.clear-routers {
+  line-height: 16px;
+  i {
+    font-size: 16px;
+  }
+}
+.right::v-deep .el-dropdown__link {
+  color: #fff;
+  cursor: pointer;
+}
+::v-deep .el-dropdown-menu__item:hover {
+    .sub-menu {
+      display: block;
+    }
+  }
+
+.sub-menu {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding-right: 10px;
+  border-radius: 4px;
+  transform: translateX(-100%);
+}
+.sub-menu-inner {
+  background: #fff;
+  white-space: nowrap;
+}
+.sub-menu .popper__arrow {
+    left: auto!important;
+    right: -8px!important;
+    top: 15px!important;
+    transform: translateX(-50%) rotate(90deg);
+  }
+.mobile-nav {
+  height: 50px;
+  line-height: 50px;
+  @include bg_color_primary;
+  // background-color: #1f82ef;
+  box-shadow: 0px 3px 5px 0px rgba(172, 172, 172, 0.46);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  .logo {
+    padding: 0;
+    font-size: 16px;
+    img {
+      height: 24px;
+      margin-right: 4px;
+    }
+  }
+  .header {
+    display: flex;
+    margin: 0;
+    height: 30px;
+    align-items: center;
+    .menu-icon {
+      font-size: 24px;
+      line-height: 30px;
+      color: #fff;
+      margin-left: 6px;
+      font-weight: 400;
+    }
+  }
+}
+.skin {
+  color: #fff;
+  font-size: $--font-size-base;
+  cursor: pointer;
+}
+.skin-icon {
+  margin-right: 4px;
+  font-size: $--font-size-extra-large;
+  position: relative;
+  top: 2px;
+}
+.setting {
+  color: #fff;
+  margin-left: 12px;
+  position: relative;
+  top: 1px;
+  cursor: pointer;
+  i {
+    font-size: 16px;
+    margin-right: 6px;
+    position: relative;
+    top: 1px;
+  }
+}
+.popover-btn {
+  cursor: pointer;
+  padding: 8px 12px;
+  &:hover {
+    @include bg_color_primary(.4);
+  }
+}
+.skin-theme {
+  width: 400px;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  li {
+    float: left;
+    width: calc(33.3% - 24px);
+    margin: 12px;
+    margin-top: 0;
+    border-radius: 4px;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    .skin-theme-select {
+      position: absolute;
+      right: 4px;
+      top: 4px;
+      font-size: $--font-size-medium;
+      color: rgba(255,255,255,1);
+    }
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+}
+.el-icon-error {
+  position: relative;
+  top: 1px;
+  font-size: 16px;
+  margin-left: 8px;
+}
+.vContainer{
+  width: 96%;
+  padding: 0 2%;
+  display: flex;
+  justify-content: space-between;
+  color: #fff;
+}
+.vSystem{
+  font-size: 18px;
+}
+.vRight{
+  display: flex;
+  justify-content: space-between;
+  vertical-align:middle;
+}
+.role-button {
+  &::v-deep {
+    &.el-button.is-plain {
+      border: 1px solid rgba(255, 255, 255, 0.4);
+      background: none;
+      color: #fff;
+      &:hover {
+        border-color: rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+}
+.role-dropdown__item {
+  width: 160px;
+  display: flex;
+  justify-content: space-between;
+  .role-icon {
+    display: block;
+    color: #999;
+  }
+  .role-text {
+    display: none;
+    @include font_color_primary;
+  }
+  &:hover {
+    .role-icon {
+      display: none;
+    }
+    .role-text {
+      display: block;
+    }
+  }
+}
+.role-dropdown__item--default {
+  .role-icon {
+    display: block;
+    @include font_color_primary;
+  }
+  .role-text {
+    display: none;
+    color: #999;
+  }
+}
+.operates {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  >i {
+    font-size: 16px;
+  }
+}
+.operate {
+  color: #fff;
+  &:hover {
+    color: #fff;
+  }
+}
+.operate-icon {
+  font-size: 24px;
+}
+.language-item {
+  padding: 8px 10px;
+  margin: 4px 0;
+  cursor: pointer;
+  position: relative;
+  &::before {
+    display: none;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -10px;
+    width: calc(100% + 20px);
+    height: 100%;
+    @include bg_color_primary(.15);
+    z-index: 0;
+  }
+  &:hover, &.language-item__active {
+    &::before {
+      display: block;
+    }
+  }
+}
+.switch-role-btn {
+  border: 1px solid #fff;
+  border-radius: 4px;
+  color: #fff;
+  line-height:40px;
+  padding: 0 10px;
+  height: 40px;
+  margin-top: 9px;
+  cursor: pointer;
+}
+</style>
+<style lang="scss" scoped>
+.role-card {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 1200px;
+  background: #FFFFFF;
+  box-shadow: 1px 1px 4px 2px rgba(0,0,0,0.1000);
+}
+.role-card__header {
+  padding: 10px 20px;
+  border-bottom: 1px solid #d8d8d8;
+  line-height: 50px;
+  display: flex;
+  justify-content: space-between;
+  .el-button--text {
+    color: #D11222;
+  }
+  img {
+    width: 40px;
+    margin-right: 10px;
+  }
+}
+.role-card__icon {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+ @include bg_color_primary;
+ text-align: center;
+ border-radius: 50%;
+ font-size: 26px;
+ color: #fff;
+ margin-right: 16px;
+}
+.role-card__title {
+  color: #333333;
+  font-size: 20px;
+}
+.role-card__body {
+  padding: 20px;
+}
+.role-title {
+  font-size: 16px;
+  color: #333;
+  font-weight: 600;
+  margin: 20px 0;
+  text-align: center;
+}
+.role-tip {
+  font-size: 16px;
+  color: #666666;
+  text-align: center;
+}
+
+.system-list {
+  display: flex;
+}
+.system-item {
+  flex: 1;
+  margin: 20px;
+  background: #F1F3F7;
+}
+.system-header {
+  height: 40px;
+  background: #E7EBF3;
+  text-align: center;
+  line-height: 40px;
+}
+
+.role-content {
+  display: flex;
+}
+.role-type__list {
+  margin-right: 20px;
+  display: flex;
+}
+.role-type__item {
+  flex: 1;
+  height: 60px;
+  background: #FFFFFF;
+  border: 1px solid #E3E3E3;
+  border-left: 0;
+  text-align: center;
+  line-height: 60px;
+  color: #666;
+  cursor: pointer;
+  &:first-child {
+    border-radius: 4px 0 0 4px;
+    border-left: 1px;
+  }
+  &:last-child {
+    border-radius: 0 4px 4px 0;
+  }
+  &.is-active {
+    background: linear-gradient( 180deg, #1DAAF6 0%, #0062CD 100%);
+    border: 0;
+    height: 62px;
+    color: #fff;
+  }
+}
+.system-content {
+  flex: 1;
+  background: #F1F3F7;
+  overflow: auto;
+}
+.role-list {
+  overflow: hidden;
+  max-height: calc(80vh - 160px);
+  overflow: auto;
+  padding: 10px;
+}
+
+.role-item {
+  float: left;
+  width: calc(33.33% - 20px);
+  height: 60px;
+  margin: 10px;
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #E8E8E8;
+  background: #fff;
+  cursor: pointer;
+  position: relative;
+  &:hover {
+    box-shadow: 0px 1px 16px 2px rgba(0,0,0,0.1);
+  }
+  &.is-select {
+    @include border_color_primary;
+    @include font_color_primary;
+    .role-item__body > i {
+      display: block;
+    }
+  }
+}
+.role-item__body {
+  height: 100%;
+  line-height: 38px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  >i {
+    display: none;
+    position: absolute;
+    top: -9px;
+    right: 0;
+    @include font_color_primary;
+    font-size: 24px;
+  }
+}
+.role-item__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  @include bg_color_primary;
+  color: #fff;
+  font-size: 22px;
+  line-height: 40px;
+  text-align: center;
+  margin-bottom: 14px;
+}
+.role-item__header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  i {
+    font-size: 20px;
+    color: #FFAE00;
+  }
+}
+
+.role__set-main {
+  display: none;
+  cursor: pointer;
+  @include font_color_primary;
+}
+.dept-select {
+  width: 100%;
+  margin-bottom: 10px;
+}
+.role-operate {
+  text-align: center;
+  >p {
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+}
+.submit-btn {
+  width: 200px;
+}
+</style>
+<style lang="scss">
+.skin-popover {
+  padding: 0;
+  padding-top: 16px;
+}
+.epx-app-nav__role-switch-dialog {
+  .el-dialog__header {
+    padding: 0;
+    border:0;
+  }
+}
+</style>