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

package/src/components/MetaList.vue

@@ -0,0 +1,108 @@
+<script>
+import { createVNode, render } from 'vue'
+import ListVue from '@epxing/components/src/entity-list'
+import GenTestData from './GenTestData.vue'
+export default {
+  name: 'epx-meta-list',
+  extends: ListVue,
+  methods: {
+    META_COPY () {
+
+    },
+    // 生成测试数据：选中一个对象后打开弹窗，调用 sfrescujuykz 逻辑编排
+    genTestData (config, row) {
+      let item = row
+      if (!item) {
+        if (this.selection.length > 1) {
+          this.$message.error('请不要选择多个记录')
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        }
+        item = this.selection[0]
+      }
+      const extraParams = config && config.params ? this.$formatParams(config.params, [item]) : {}
+      // Vue3 无 Vue.extend/$mount/$destroy：命令式挂载改用 createVNode + 共享 appContext + render()，
+      // 与 packages/business/src/popup.js、form-item/Date.vue 的 mountPicker() 是同一套 idiom。
+      // 不直接调用 $popup：$popup 固定挂载 Popup.vue（内部渲染 epx-router-view，按 metaId/component
+      // 路由打开一个"页面"）；GenTestData 不是页面，是自带 <el-dialog> 的独立组件，走 $popup 会在它
+      // 自己的弹窗外面再套一层弹窗壳，且 GenTestData 自身的 props（metaId/metaCode/extraParams 等）
+      // 也传不进去，故直接复用这套更底层、专为"挂载独立组件"设计的 idiom。
+      const container = document.createElement('div')
+      document.body.appendChild(container)
+      const vnode = createVNode(GenTestData, {
+        metaId: item.ID,
+        metaCode: item.CODE || item.META_ID || '',
+        metaName: item.NAME || item.LABEL || '',
+        hostMetaId: this.$metaId,
+        extraParams,
+        onClosed: () => {
+          render(null, container)
+          if (container.parentNode) {
+            container.parentNode.removeChild(container)
+          }
+        }
+      })
+      vnode.appContext = this.$.appContext
+      render(vnode, container)
+      const instance = vnode.component && vnode.component.proxy
+      if (instance) instance.open()
+    },
+    getMetaFields (config, row) {
+      let item = null
+      if (row) {
+        item = row
+      } else {
+        if (this.selection.length > 1) {
+          this.$message.error('请不要选择多个记录')
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        }
+        item = this.selection[0]
+      }
+      this.getMetaConfig(item.ID)
+        .then(data => {
+          this.$alert('<p style="white-space:pre-wrap; max-height:460px;overflow:auto">' + data.field_config + '</p>', '字段配置', {
+            dangerouslyUseHTMLString: true,
+            customClass: 'entity-list__meta--fields'
+          })
+        })
+    },
+    getMetaEntityFields (config, row) {
+      let item = null
+      if (row) {
+        item = row
+      } else {
+        if (this.selection.length > 1) {
+          this.$message.error('请不要选择多个记录')
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        }
+        item = this.selection[0]
+      }
+      this.getMetaConfig(item.ID)
+        .then(data => {
+          this.$alert('<p style="white-space:pre-wrap; max-height:460px;overflow:auto">' + data.entity_config + '</p>', '实体类内容', {
+            dangerouslyUseHTMLString: true,
+            customClass: 'entity-list__meta--fields'
+          })
+        })
+    },
+    getMetaConfig (id) {
+      return this.$http.$request({
+        action: 'getMetaConfig',
+        entityId: this.$metaId,
+        metaId: id
+      })
+    }
+  }
+}
+</script>

package/src/components/Nav.vue

@@ -0,0 +1,604 @@
+<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" :ellipsis="false">
+            <el-menu-item v-for="nav in navList" :key="nav.ID" @click="toPage(nav)" :index="nav.ID">
+               <el-popover
+                placement="bottom"
+                trigger="manual"
+                :value="openType===nav.ID"
+              >
+                <template v-slot:reference><span @contextmenu.prevent="openType=nav.ID">
+                  <i :class="['fa',nav.FONT_ICON]"></i>
+                  <span>{{nav.NAME}}</span>
+                </span></template>
+                <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>
+            <template v-slot:dropdown><el-dropdown-menu>
+              <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="clearTabs">
+                <el-button class="clear-routers" type="primary" link><i class="el-icon-document-delete"></i>清空</el-button>
+              </el-dropdown-item>
+            </el-dropdown-menu></template>
+          </el-dropdown>
+        </div>
+      </div>
+      <div class="right">
+        <!-- 换肤 -->
+        <el-popover
+          popper-class="skin-popover"
+          trigger="click"
+        >
+          <template v-slot:reference><div class="skin">
+            <i class="skin-icon epx-icon-skin"></i>
+            <span class="skin-text">换肤</span>
+          </div></template>
+            <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>
+            <template v-slot:dropdown><el-dropdown-menu >
+               <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="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="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu></template>
+          </el-dropdown>
+      </div>
+    </div>
+  </div>
+  <!-- 这里原来注释着一个右侧抽屉菜单（van-popup + epx-menu，受 isMenuShow 控制）。
+       P2c 撤净 Vant 后该组件已不存在，照着取消注释会直接得到未知组件，
+       故只保留意图记录：如要恢复，用 mobile/Sheet.vue（position="right"）重写外壳，
+       里面的 epx-menu 用法不变。 -->
+</div>
+
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Container from '@epxing/core/src/Container'
+//, DELETE_MENU_ROUTER, DELETE_MODULE_ROUTER
+import { DELETE_USER } from '@epxing/core/src/store/actions'
+import storage from '@epxing/utils/src/storage'
+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 require('@/assets/images/photo.png')
+    },
+    tabs () {
+      return this.$tabs.filter(item => !(item.key + '').includes('default-'))
+    },
+    currentTab () {
+      return this.$tabs.find(item => item.active === true)
+    }
+  },
+
+  data () {
+    return {
+      activeIndex: '/',
+      searchValue: '',
+      roleList: [],
+      navList: [],
+      moduleId: '',
+      module: {},
+      showMobileMenu: false,
+      themeList: [],
+      selectTheme: '',
+      systemName: '',
+      openType: null
+    }
+  },
+  methods: {
+    logout () {
+      if (this.isModulePage) {
+        window.close()
+        return
+      }
+      this.$http.logout()
+        .then(() => {
+          this.$util.removeToken(this.appConfig.CLIENT)
+          this.$store.commit(DELETE_USER)
+          this.$util.toLogin()
+        })
+        .catch(() => {
+          this.$util.removeToken(this.appConfig.CLIENT)
+          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.getUserMenuTreeData({
+        moduleId: this.moduleId,
+        roleId,
+        mode: this.$isMobile ? 'move' : 'pc'
+      })
+        .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)
+      storage.set('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
+            this.$util.openWindow(aData['SYSTEM|SERVE|FIRST_PAGE'] + '?FM_SYS_ID=' + aData['SYSTEM|CODE'])
+          }
+        })
+    },
+    clearTabs () {
+      this.$store.commit('CLEAR_TABS')
+    },
+    clearOpenType () {
+      this.openType = null
+    }
+  },
+  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.clearOpenType)
+    this.selectTheme = storage.get('epx_frame_theme')
+    document.documentElement.setAttribute('data-theme', this.selectTheme)
+    const showMobileMenuFn = (v) => {
+      this.showMobileMenu = v
+    }
+    this.$bus.on('showMobileMenu', showMobileMenuFn)
+    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') }
+    ]
+  },
+  unmounted () {
+    window.removeEventListener('click', this.clearOpenType)
+  }
+}
+</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;
+
+    :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;
+        }
+      }
+    }
+    :deep(.el-popover) {
+      padding:2px 0px;
+    }
+
+}
+.router-dropdown-link {
+  margin-left: 20px;
+  cursor: pointer;
+  color: #fff;
+
+}
+.home-nav :deep(.el-menu--horizontal > .el-menu-item:hover) {
+    @include bg_color_primary;
+}
+.home-nav :deep(.el-menu--horizontal > .el-menu-item.is-active) {
+ @include bg_color_primary;
+}
+.home-nav :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 :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: var(--epx-font-size-l);
+  }
+}
+.right :deep(.el-dropdown-link) {
+  color: #fff;
+  cursor: pointer;
+}
+ :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: 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;
+}
+</style>
+<style>
+.skin-popover {
+  padding: 0;
+  padding-top: 16px;
+}
+</style>