@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/HallNav.vue

@@ -0,0 +1,539 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import AppNav from '@epxing/components/src/app-nav'
+export default {
+  name: 'epx-hall-nav',
+  extends: AppNav,
+  data () {
+    return {
+      unreadMsgCount: 0,
+      NAME: ''
+    }
+  },
+  methods: {
+    getUnreadMsgCount () {
+      this.$http.getCount({
+        entityId: 'FM_MESSAGE_RECEIVED',
+        'scope.RECEIVER': '#{user.id}',
+        'scope.READ_FLAG': '0'
+      })
+        .then(data => {
+          this.unreadMsgCount = data.total
+        })
+    },
+    openFrameManage () {
+      const { 'SYSTEM|CODE': system, 'CLIENT|CODE': client } = this.appConfig
+      const rootPath = this.$util.getRootPath()
+
+      this.$util.openWindow(rootPath + `/app/${client}/${system}/ptglzx`)
+    },
+    renderOperates () {
+      return (
+        <div class="operates">
+          {
+            this.navOperates.map(operate => (
+              <el-button class="operate" size="default" 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}
+                { operate.icon === 'el-icon-s-comment' && this.unreadMsgCount > 0 ? this.clientConfig.ZNXX_TYPE === '02' ? <span class="el-badge__content badge">{this.unreadMsgCount}</span> : <span class="dot"></span> : null }
+              </el-button>
+            ))
+          }
+        </div>
+      )
+    },
+    renderMoreOperate () {
+      return (
+        <el-dropdown trigger="click" v-slots={{
+          dropdown: () => (<el-dropdown-menu >
+            { this.manageRight.clientAdmin === 'true' && <el-dropdown-item command="frame" onClick={this.openFrameManage.bind(this)}>{this.$t('Platform Management Center')}</el-dropdown-item> }
+            { this.manageRight.roleManage === 'true' && <el-dropdown-item command="role" onClick={this.openService.bind(this, 'role')}>{this.$t('navigation.role_assignment_management')}</el-dropdown-item> }
+            {
+              (this.appConfig.IS_SET_TOOLBAR ? this.toolbar.includes('skip') : this.clientConfig.THEME_FLAG !== '0') && (
+                <el-popover
+                  popper-class="epx-app-nav__skin-popover"
+                  placement="left-start"
+                  trigger="hover"
+                  width="auto"
+                  v-slots={{
+                    // reference 必须是「根节点为真实元素」的东西：EP 的 ElOnlyChild 会用
+                    // withDirectives(cloneVNode(node), [[forwardRef]]) 挂指令来拿 reference 的真实
+                    // DOM，而 Vue 的运行时指令只能落在元素上。el-dropdown-item 的根节点是
+                    // ElRovingFocusItem 组件 ⇒ 指令挂不上，Vue 只发一条 "Runtime directive used on
+                    // component with non-element root node" 的 warning 就静默失效 ⇒ tooltip 拿不到
+                    // reference ⇒ hover 完全没反应。
+                    // 用原生 li + EP 的 item 类名：根是元素、在 ul.el-dropdown-menu 里也合法、样式不变。
+                    // 原来的 command 属性没人消费（所在 el-dropdown 无 onCommand），去掉无影响。
+                    reference: () => (<li class="el-dropdown-menu__item">{this.$t('skin')}</li>)
+                  }}>
+                  <ul class="epx-app-nav__theme">
+                    {
+                      this.themeList.map(theme => (
+                        <li class={{ 'is-active': theme.key === this.selectTheme }} style={!theme.icon && theme.color ? { background: theme.color } : {}} key={theme.key} onClick={this.changeTheme.bind(this, theme)}>
+                          {theme.icon && <img src={theme.icon} alt="" />}
+                          {!theme.icon && <span class="epx-app-nav__theme-custom-label">{theme.name}</span>}
+                          {theme.key === this.selectTheme && <i class="epx-app-nav__theme-select el-icon-success"></i>}
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </el-popover>
+              )
+            }
+            {
+              this.languageFlag && (
+                <el-popover
+                  placement="left-start"
+                  trigger="hover"
+                  v-slots={{
+                    // 同上：reference 的根必须是元素，详见「换肤」那处注释
+                    reference: () => (<li class="el-dropdown-menu__item">{this.$t('language')}</li>)
+                  }}>
+                  <ul class="epx-app-nav__language-list">
+                    {
+                      this.languageList.map(language => (
+                        <li class={['epx-app-nav__language-item', { 'is-active': language.id === this.currentLanguage }]} onClick={this.switchLanguage.bind(this, language)}>
+                          <span>{language.name}</span>
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </el-popover>
+              )
+            }
+
+            <el-dropdown-item command="d" onClick={this.logout}>{this.$t('logout')}</el-dropdown-item>
+          </el-dropdown-menu>)
+        }}>
+          <span class="el-dropdown__link">
+            {this.user.name || this.user.account}<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+        </el-dropdown>
+      )
+    }
+  },
+  created () {
+    this.getUnreadMsgCount()
+    const { client } = this.user
+    this.$http.get({
+      entityId: 'FM_CLIENT',
+      id: client
+    })
+      .then(data => {
+        this.NAME = data.data['NAME#'] || data.data.NAME
+      })
+  },
+  // F15：extends AppNav 无自有 render 根，mounted 给 $el 加唯一 class 命名空间（见 pitfalls F15）
+  mounted () {
+    this.$el && this.$el.classList && this.$el.classList.add('epx-hall-nav')
+  }
+}
+</script>
+<style lang="scss">
+// F15：extends AppNav（无自有 template）去 scoped + 根唯一 class 命名空间，避免 Vue3 scoped 深层样式失效（见 pitfalls F15）
+.epx-hall-nav {
+.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);
+}
+.container {
+  padding-right: 24px;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+    .el-avatar >img {
+      width: 100%;
+    }
+
+}
+.left {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.logo{
+  display: flex;
+  align-items: center;
+  min-width: 216px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+  }
+}
+.epx-header-menu {
+  height: 100%;
+}
+.home-nav{
+  display: flex;
+  overflow: hidden;
+  margin-right: 20px;
+
+    .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 .el-menu--horizontal > .el-menu-item:hover {
+  background-color: rgba(0,0,0,.2);
+  border-bottom: none;
+}
+.home-nav .el-menu--horizontal > .el-menu-item.active {
+ background-color: rgba(0,0,0,.2);
+}
+.home-nav .el-menu--horizontal > .el-menu-item.is-active {
+ border: none
+}
+.home-nav .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;
+
+    .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: var(--epx-bg-card);
+    }
+    .el-tabs__nav-next, .el-tabs__nav-prev {
+      color: #fff;
+      line-height: 60px;
+    }
+
+}
+.right {
+  display: flex;
+  height: 100%;
+}
+.right .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: var(--epx-font-size-l);
+  }
+}
+.right .el-dropdown__link {
+  color: #fff;
+  cursor: pointer;
+}
+ .el-dropdown-menu__item:hover {
+    .sub-menu {
+      display: block;
+    }
+  }
+
+.sub-menu {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding-right: 10px;
+  border-radius: var(--epx-radius-base);
+  transform: translateX(-100%);
+}
+.sub-menu-inner {
+  background: var(--epx-bg-card);
+  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: var(--epx-font-size-l);
+    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: var(--epx-font-size-l);
+    margin-right: 6px;
+    position: relative;
+    top: 1px;
+  }
+}
+.popover-btn {
+  cursor: pointer;
+  padding: 8px 12px;
+  &:hover {
+    @include bg_color_primary(.4);
+  }
+}
+.skin-theme {
+  width: 234px;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  li {
+    float: left;
+    width: calc(50% - 24px);
+    margin: 16px;
+    margin-top: 0;
+    border-radius: var(--epx-radius-base);
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    &:nth-child(odd) {
+      margin-right: 8px;
+    }
+    &:nth-child(even) {
+      margin-left: 8px;
+    }
+    .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: var(--epx-font-size-l);
+  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 {
+
+    &.el-button.is-plain {
+      border: 1px solid rgba(255, 255, 255, 0.4);
+      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: var(--epx-text-secondary);
+  }
+  .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: var(--epx-text-secondary);
+  }
+}
+.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;
+    }
+  }
+}
+
+.operates {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  .operate {
+    position: relative;
+    padding: 10px;
+    color: #fff;
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+
+.operate-icon {
+  font-size: 24px;
+}
+
+.dot {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: red;
+  top: 10px;
+  right: 4px;
+
+}
+.badge {
+  position: absolute;
+  top: -6px;
+  right: -12px;
+}
+}
+</style>