epx-frame 3.5.0-shpgy.1

package/src/frame/components/Nav.vue

@@ -0,0 +1,599 @@
+<template>
+<div>
+  <div v-if="!$isMobile" class="nav" >
+    <div class="container">
+      <div class="left">
+        <div class="logo" @click="backModule">
+          <img :src="module.ICON ? $util.getFileUrl(module.ICON):require('@/assets/images/hr.png')" alt="">
+          <span>{{module.NAME || appConfig.TITLE}}</span>
+        </div>
+        <div class="home-nav">
+          <el-menu :default-active="$route.query.moduleId" class="epx-header-menu" text-color="#fff" active-text-color='#fff' mode="horizontal">
+            <el-menu-item v-for="nav in navList" :key="nav.ID" @click.native="toPage(nav)" :index="nav.ID">
+               <el-popover
+                placement="bottom"
+                trigger="manual"
+                :value="openType===nav.ID"
+              >
+                <span slot="reference" @contextmenu.prevent="openType=nav.ID">
+                  <i :class="['fa',nav.FONT_ICON]"></i>
+                  <span>{{nav.NAME}}</span>
+                </span>
+                <div class="popover-btn" @click="toPage(nav, 1)">打开新标签</div>
+              </el-popover>
+
+              </el-menu-item>
+          </el-menu>
+           <el-dropdown @command="selectTab" v-if="tabs.length>0">
+            <span class="router-dropdown-link" >
+              {{currentTab && currentTab.title}}<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="tab in tabs" :key="tab.key" :command="tab">
+                {{tab.title}}
+                <i class="el-icon-error" @click="deleteTab(tab)"></i>
+              </el-dropdown-item>
+              <el-dropdown-item @click.native="clearTabs">
+                <el-button class="clear-routers" type="text"><i class="el-icon-document-delete"></i>清空</el-button>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+      <div class="right">
+        <!-- 换肤 -->
+        <el-popover
+          popper-class="skin-popover"
+          trigger="click"
+        >
+          <div slot="reference" class="skin">
+            <i class="skin-icon epx-icon-skin"></i>
+            <span class="skin-text">换肤</span>
+          </div>
+            <ul class="skin-theme">
+              <li v-for="theme in themeList" :class="{'is-active': theme.key===selectTheme}" :key="theme.key" @click="changeTheme(theme)">
+                <img :src="theme.icon" alt="" />
+                <i v-if="theme.key===selectTheme" class="skin-theme-select el-icon-success"></i>
+              </li>
+            </ul>
+        </el-popover>
+        <div class="setting" @click="openSetting">
+          <i class="el-icon-s-tools"></i>
+          <span>配置</span>
+        </div>
+        <div class="photo">
+          <el-avatar :src="photo"></el-avatar>
+        </div>
+          <el-dropdown trigger="click" >
+            <span class="el-dropdown-link">
+              {{user.name}}（{{currentRoleEntity.NAME}}）<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown" >
+               <el-dropdown-item command="a" v-if="roleList.length>0" >切换角色
+                 <i class="el-icon-arrow-right"></i>
+                 <div class="sub-menu">
+                   <div class="sub-menu-inner">
+                    <el-dropdown-item @click.native="switchRole(role.ID)" v-for="role in roleList" :key="role.ID">{{role.NAME}}</el-dropdown-item>
+                    <div x-arrow="" class="popper__arrow" style="left: 99px;"></div>
+                   </div>
+                 </div>
+               </el-dropdown-item>
+                <el-dropdown-item command="d" @click.native="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+      </div>
+    </div>
+  </div>
+  <!-- <van-popup v-model="isMenuShow" position="right" :style="{ width: '60%',height: 'calc(100% + 1px)',marginTop: '-1px',maxHeight: 'auto' }">
+    <epx-menu :moduleName="currentMenu.name" :modules="currentMenu.data" ></epx-menu>
+  </van-popup> -->
+</div>
+
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Container from '@/frame/views/Container'
+//, DELETE_MENU_ROUTER, DELETE_MODULE_ROUTER
+import { DELETE_USER } from '@/store/actions'
+export default {
+  name: 'epx-nav',
+  extends: Container,
+  props: {
+    msg: String
+  },
+  computed: {
+    ...mapState({
+      menus: state => state.config.menus,
+      user: state => state.user.user,
+      userInfo: state => state.user.userInfo
+    }),
+    system () {
+      return {
+        user: this.user
+      }
+    },
+    currentRoleEntity () {
+      const { currentRoleEntity = {} } = this.user
+      const { data = {} } = currentRoleEntity
+      return data
+    },
+    photo () {
+      const { PHOTO } = this.userInfo
+      if (PHOTO) return this.$util.getFileUrl(PHOTO)
+      return this.circleUrl
+    },
+    tabs () {
+      return this.$tabs.filter(item => !(item.key + '').includes('default-'))
+    },
+    currentTab () {
+      return this.$tabs.find(item => item.active === true)
+    }
+  },
+
+  data () {
+    return {
+      activeIndex: '/',
+      searchValue: '',
+      circleUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      roleList: [],
+      navList: [],
+      moduleId: '',
+      module: {},
+      showMobileMenu: false,
+      themeList: [],
+      selectTheme: '',
+      systemName: '',
+      openType: null
+    }
+  },
+  methods: {
+    logout () {
+      if (this.isModulePage) {
+        window.close()
+        return
+      }
+      this.$http.logout()
+        .then(() => {
+          this.$cookie.remove(this.appConfig.CLIENT + '-token')
+          this.$store.commit(DELETE_USER)
+          this.$util.toLogin()
+        })
+        .catch(() => {
+          this.$cookie.remove(this.appConfig.CLIENT + '-token')
+          this.$store.commit(DELETE_USER)
+          this.$util.toLogin()
+          this.$message.success('退出登录')
+        })
+    },
+    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, newTab) {
+      if (nav.MAIN_PAGE) {
+        const key = 'default-' + nav.ID
+        const navTab = this.$tabs.find(item => item.key === key)
+        if (newTab) {
+          this.$store.commit('CREATE_TAB', {
+            moduleId: nav.ID,
+            title: nav.NAME,
+            pageId: nav.MAIN_PAGE
+          })
+          this.openType = null
+        } else if (navTab) {
+          this.$store.commit('SELECT_TAB', key)
+          // const router = {
+          //   name: 'tabs',
+          //   title: nav.NAME,
+          //   key: key,
+          //   query: {
+          //     moduleId: nav.ID
+          //   }
+          // }
+          // this.$router.push(router)
+        } else {
+          this.$store.commit('CREATE_TAB', {
+            key: key,
+            moduleId: nav.ID,
+            title: nav.NAME,
+            pageId: nav.MAIN_PAGE
+          })
+        }
+      }
+    },
+    goHome () {
+      this.activeIndex = '/'
+      this.$router.push('/')
+    },
+    getRoles () {
+      this.$http.optionalRoles()
+        .then(data => {
+          this.roleList = data.entitys
+        })
+    },
+    switchRole (roleId) {
+      this.$http.roleChange({
+        roleId,
+        level: ''
+      })
+        .then(data => {
+          // this.$store.commit(CLEAR_ROUTER)
+          location.reload()
+        })
+    },
+    getModule () {
+      this.$http.get({
+        entityId: 'FM_MODULE',
+        id: this.moduleId
+      })
+        .then(data => {
+          if (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]
+      }
+      this.$http.getMenuData({
+        action: 'getMenuData',
+        moduleId: this.moduleId,
+        roleId
+      })
+        .then(data => {
+          this.navList = data
+        })
+    },
+    getSysMenu () {
+      return this.$http.find({
+        entityId: 'FM_SYSTEM',
+        'scope.CODE': this.$util.getSysId()
+      })
+    },
+    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 (tab) {
+      if (tab) {
+        this.$store.commit('SELECT_TAB', tab.key)
+      }
+    },
+    deleteTab (tab) {
+      this.$store.commit('DESTORY_TAB', tab.key)
+    },
+    openSetting () {
+      const { CLIENT } = this.appConfig
+      this.$http.get({
+        link: 'system|left join,system#serve',
+        entityId: 'FM_CLIENT',
+        id: CLIENT
+      })
+        .then(data => {
+          if (data && data.data) {
+            const aData = data.data
+            window.open(aData['SYSTEM|SERVE|FIRST_PAGE'] + '?FM_SYS_ID=' + aData['SYSTEM|CODE'])
+          }
+        })
+    },
+    clearTabs () {
+      this.$store.commit('CLEAR_TABS')
+    }
+  },
+  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
+    }
+  },
+  created () {
+    window.addEventListener('click', () => {
+      this.openType = null
+    })
+    this.selectTheme = localStorage.getItem('epx_frame_theme')
+    document.documentElement.setAttribute('data-theme', this.selectTheme)
+    this.$bus.on('showMobileMenu', v => {
+      this.showMobileMenu = v
+    })
+    this.themeList = [
+      { name: '炫紫', key: 'purple', icon: require('@/assets/images/theme/purple.png') },
+      { name: '酡红', key: 'palevioletred', icon: require('@/assets/images/theme/palevioletred.png') },
+      { name: '森绿', key: 'forestgreen', icon: require('@/assets/images/theme/forestgreen.png') },
+      { name: '深海蓝', key: 'deepblue', icon: require('@/assets/images/theme/deepblue.png') },
+      { name: '经典蓝', key: 'classicblue', icon: require('@/assets/images/theme/classicblue.png') }
+    ]
+  }
+}
+</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);
+}
+.container {
+  padding-right: 24px;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.left {
+  display: flex;
+}
+.logo{
+  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{
+    height: 32px;
+    margin-right: 12px;
+  }
+}
+.epx-header-menu {
+  height: 100%;
+}
+.home-nav{
+  display: flex;
+  &::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 {
+    @include bg_color_primary;
+}
+.home-nav::v-deep .el-menu--horizontal > .el-menu-item.is-active {
+ @include bg_color_primary;
+}
+.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;
+}
+.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;
+}
+.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: 234px;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  li {
+    float: left;
+    width: calc(50% - 24px);
+    margin: 16px;
+    margin-top: 0;
+    border-radius: 4px;
+    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: 16px;
+  margin-left: 8px;
+}
+</style>
+<style>
+.skin-popover {
+  padding: 0;
+  padding-top: 16px;
+}
+</style>

package/src/frame/components/NavFormCatalogItem.vue

@@ -0,0 +1,9 @@
+<script>
+export default {
+  name: 'epx-nav-form-catalog-item'
+}
+</script>
+
+<style>
+
+</style>

package/src/frame/components/NumList.vue

@@ -0,0 +1,108 @@
+<template>
+  <!-- 数字列表 -->
+  <ul class="epx-num-list">
+    <li class="epx-num-item" v-for="(item, index) in config.children" :key="index" :style="{background: item.color}">
+      <div class="icon">
+        <i :class="`fa ${item.icon}`"></i>
+      </div>
+      <div class="content">
+        <p class="title">{{item.title}}</p>
+        <p class="count" :style="{color: item.color}">{{counts[index]}}</p>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'epx-num-list',
+  props: ['config'],
+  data: function () {
+    return {
+      counts: []
+    }
+  },
+  methods: {
+    getCount (index, params) {
+      this.$http.getCount({
+        ...params
+      })
+        .then(data => {
+          this.$set(this.counts, index, data.total || 0)
+        })
+    }
+  },
+  created () {
+    const { children = [] } = this.config || {}
+    children.forEach((item, index) => {
+      this.getCount(index, item.countScope)
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.epx-num-list {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.epx-num-item {
+  flex: 1;
+  padding: 10px 20px;
+  margin-right: 20px;
+  height: 120px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #4dc1f6;
+  color: #fff;
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.icon {
+  font-size: 40px;
+}
+.title {
+  font-size: 16px;
+}
+.count {
+  font-size: 28px;
+}
+@media screen and(max-width: 992px){
+  .epx-num-list {
+    background: #fff;
+    padding: 12px 0;
+  }
+  .epx-num-item {
+    background: none!important;
+    height: auto;
+    color: #333;
+  }
+  .content {
+    width: 100%;
+    display: flex;
+    flex-direction: column-reverse;
+    text-align: center;
+  }
+  .icon {
+    display: none;
+  }
+  .title {
+    font-size: 14px;
+  }
+  .count {
+    font-size: 18px;
+    margin-right: 12px;
+    margin-right: 0;
+  }
+}
+@media screen and(min-width: 992px) {
+  .count {
+    color: #fff!important;
+  }
+}
+</style>