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

package/src/components/HeaderNav.vue

@@ -0,0 +1,447 @@
+<template>
+  <!-- 移动端导航栏 -->
+  <div class="mobile-header" v-if="$isMobile">
+    <div class="title">
+      <i class="ri-arrow-left-s-line" @click="backPage"></i>
+      <span>{{title || appConfig.TITLE}}</span>
+    </div>
+    <div class="mobile-opera">
+      <el-popover
+        popper-class="popper"
+        placement="bottom"
+        trigger="click"
+      >
+        <ul class="setting-list">
+          <li><i class="el-icon-question"></i>帮助</li>
+          <li @click="pageSetting"><i class="el-icon-document-copy"></i>页面设置</li>
+          <li @click="metaSetting"><i class="el-icon-coin"></i>对象设置</li>
+        </ul>
+        <template v-slot:reference><i class="el-icon-more" :style="{transform:'rotate(90deg)'}"></i></template>
+      </el-popover>
+       <i class="menu-icon el-icon-s-fold" v-if="menu" @click="isMenuShow=true"></i>
+      <!-- P2a Task3：van-popup → MobileSheet（el-drawer 底座）。size="60%" 对应原 width:60%；
+           保留的 height/marginTop 是原补 van-popup 边缘 1px 缝的 hack，换底座后是否仍需要——
+           未能在真实浏览器核实（本机无可达 dev server + 有并行会话在改同一工作树，未敢自起
+           服务），按 brief 的三步走 Step 1 原样保留，未删。详见 task-3-report.md。 -->
+      <mobile-sheet v-model="isMenuShow" position="right" size="60%">
+        <div class="menu-container">
+          <epx-menu class="menu"  v-if="menu" :modules="menu" :moduleId="module.ID" :moduleName="module.NAME" >
+          </epx-menu>
+          <div class="to-index" @click="backIndex">
+            <i class="el-icon-house"></i>
+            返回首页
+          </div>
+        </div>
+      </mobile-sheet>
+
+      <!-- <i class="el-icon-more" :style="{transform:'rotate(90deg)'}"></i> -->
+    </div>
+  </div>
+  <!-- pc端 -->
+  <div class="header" v-else>
+    <div class="header-inner">
+      <div class="title">
+        <i class="ri-arrow-left-s-line" @click="backPage"></i>
+        <span class="">{{title || appConfig.TITLE}}</span>
+      </div>
+      <ul class="tabs" v-if="tabs && tabs.length>0">
+        <li :class="['tab-item', { 'active': tab.active}]" v-for="(tab, index) in tabs" :key="index" @click="change(tab, index)">{{ tabTitle(tab, index) }}</li>
+      </ul>
+      <div class="opera">
+          <slot name="opera">
+            <el-dropdown v-if="showPageConfigBtn || showMetaConfigBtn">
+              <span class="el-dropdown-link">
+                <el-button class="more" plain size="default"><i class="el-icon-more"></i></el-button>
+              </span>
+                <template v-slot:dropdown><el-dropdown-menu>
+                  <template v-if="showPageConfigBtn">
+                    <el-dropdown-item v-if="pageMode==='pageTab'" @click="pageSetting( 'tab')">导航栏配置</el-dropdown-item>
+                    <el-dropdown-item @click="pageSettingVisual">页面可视化配置</el-dropdown-item>
+                    <el-dropdown-item @click="pageSetting">页面代码模式配置</el-dropdown-item>
+                  </template>
+                  <el-dropdown-item v-if="showMetaConfigBtn" @click="metaSetting">对象设置</el-dropdown-item>
+                </el-dropdown-menu></template>
+            </el-dropdown>
+          </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CREATE_TAB } from '@epxing/core/src/store/actions'
+import { mapGetters } from 'vuex'
+import { MobileSheet } from '@epxing/components/src/mobile'
+export default {
+  name: 'epx-header-nav',
+  components: { MobileSheet },
+  props: {
+    title: {
+      type: String,
+      default () {
+        return ''
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getPageByMetaId',
+      'getPageById',
+      'getTab'
+    ])
+  },
+  data () {
+    return {
+      tabs: [],
+      showMobileMenu: false,
+      isMenuShow: false,
+      pageMode: '',
+      activeTab: {},
+      module: {},
+      menu: null,
+      showPageConfigBtn: false,
+      showMetaConfigBtn: false
+    }
+  },
+  inject: {
+    getMenuInfo: {
+      default: () => null
+    }
+  },
+  methods: {
+    // T14：filter → method（Vue 3 移除 filters）
+    tabTitle (tab, index) {
+      const title = tab.title || '标签页' + (index + 1)
+      if (tab.countFlag) {
+        return title + '（' + (tab.count || 0) + '）'
+      }
+      return title
+    },
+    back () {
+      this.backPage()
+    },
+    pageSettingVisual (mode) {
+      // 当前页面id
+      if (!this.$pageId) {
+        this.$message.error('系统默认页面，无法编辑')
+        return
+      }
+      let pageId = this.$pageId
+      // 标签页模式
+      if (this.pageMode === 'pageTab' && mode !== 'tab') {
+        const { pageMetaId, pageFlag } = this.activeTab
+        const page = this.getPageByMetaId(pageMetaId, pageFlag)
+        if (page && page.pageId) {
+          pageId = page.pageId
+        }
+      }
+      // 可视化配置走**新窗口**，与 components/src/header/Header.vue 的 newPageSettingVisual 对齐。
+      // 原来这里是 `$createPage(route)` 就地开一页：设计器挤在业务页面的页栈里，改完还得手动回退，
+      // 而且同一个「...」菜单在另一个头部组件（epx-header）下是开新窗口的，两边行为不一致。
+      // `/config/visual/:client/:system/:pageId` 是配置页的独立路由（core/src/router/config.js），
+      // ConfigPage.vue 命中它时会带 newWindow:true 渲染可视化配置页 —— 该模式组件里本来就实现了
+      // （VisualConfigPage.vue 的 newWindow 分支）。
+      // 先广播 CLOSE_WINDOW 关掉上一次开的设计器（PageDesigner.vue 监听它），200ms 后再开，
+      // 避免两个设计器同时改同一个页面。
+      window.postMessage('CLOSE_WINDOW', '/')
+      setTimeout(() => {
+        const routePath = this.$util.getRootPath()
+        const { 'CLIENT|CODE': clientCode, 'SYSTEM|CODE': systemCode } = this.appConfig
+        this.configWindow = window.open(`${routePath}/config/visual/${clientCode}/${systemCode}/${pageId}`)
+        // 配置窗保存后会 postMessage 回来，这里刷新当前页。重复注册前先摘，避免多次点击叠加监听。
+        window.removeEventListener('message', this.reloadPageConfigByWindow)
+        window.addEventListener('message', this.reloadPageConfigByWindow)
+      }, 200)
+    },
+    // 配置窗保存后回传 { pageId }：清掉该页缓存并重载，让改动立刻可见。
+    // e.data 也可能是 'CLOSE_WINDOW' 这种字符串，取 .pageId 得到 undefined、不会命中，故无需额外判类型。
+    reloadPageConfigByWindow (e) {
+      if (e.data && e.data.pageId && e.data.pageId === this.$pageId) {
+        clearTimeout(this.configReloadTimer)
+        this.configReloadTimer = setTimeout(() => {
+          this.$store.commit('DELETE_PAGE', { pageId: e.data.pageId })
+          this.$reloadPage()
+          this.configReloadTimer = null
+        }, 1000)
+      }
+    },
+    pageSetting (mode) {
+      // 当前页面id
+      if (!this.$pageId) {
+        this.$message.error('系统默认页面，无法编辑')
+        return
+      }
+      let pageId = this.$pageId
+      // 标签页模式
+      if (this.pageMode === 'pageTab' && mode !== 'tab') {
+        const { pageMetaId, pageFlag } = this.activeTab
+        const page = this.getPageByMetaId(pageMetaId, pageFlag)
+        if (page && page.pageId) {
+          pageId = page.pageId
+        }
+      }
+      const route = {
+        metaId: 'FM_PAGE_CONFIG',
+        // flag: 'v_page_info',
+        flag: 'v_page_tabs',
+        id: pageId,
+        entityId: this.$metaId,
+        title: this.title || this.appConfig.TITLE,
+        pageType: 'EDIT'
+      }
+      this.$createPage(route)
+      // if (this.currentMenuRouters.length > 0) {
+      //   this.$pushMenuRoute(route)
+      // } else {
+      //   this.$pushModuleRoute(route)
+      // }
+    },
+    metaSetting () {
+      if (!this.$metaId) {
+        this.$message.error('当前页面没有配置对象')
+        return
+      }
+      const route = {
+        metaId: 'FM_ENTITY',
+        flag: 'v_edit',
+        id: this.$metaId,
+        component: 'add',
+        pageType: 'EDIT'
+      }
+      this.$createPage(route)
+    },
+    change (tab, index) {
+      const tabs = [...this.tabs]
+      tabs.forEach(item => (item.active = false))
+      tabs[index].active = true
+      this.tabs = [...tabs]
+      this.$bus.emit('changeTab', tab, tabs)
+    },
+    pageShortcutOperation () {
+      this.$http.get({
+        action: 'pageShortcutOperation',
+        entityId: 'FM_ENTITY_RIGHT',
+        metaId: this.$metaId
+      })
+        .then(data => {
+          this.showMetaConfigBtn = data.META
+          this.showPageConfigBtn = data.PAGE && !!this.$pageId
+        })
+    },
+    onChange ({ key, ...props }) {
+      if (key === 'pageTab') {
+        const { activeTab } = props
+        this.pageMode = 'pageTab'
+        this.activeTab = activeTab
+      }
+    },
+    backIndex () {
+      const tab = this.getTab('default-index') || this.$store.state.tabs.homeTab
+      if (tab) this.$store.commit(CREATE_TAB, { ...tab, key: 'default-index' + new Date().getTime() })
+    }
+  },
+  created () {
+    if (this.getMenuInfo) {
+      const { module, menu } = this.getMenuInfo()
+      this.menu = menu
+      this.module = module
+    }
+    this.pageShortcutOperation()
+
+    // this.$bus.on('tabs', tabs => {
+    //   this.tabs = [...tabs]
+    // })
+  },
+  mounted () {
+    const showMobileMenuFn = (v) => {
+      this.showMobileMenu = v
+    }
+    // ⚠️ 既有缺陷，本次**不改**（属行为变更，超出 Task 17 的内存范畴）：下面注册的是
+    // `v => showMobileMenuFn`——它把函数**返回**出去而不是调用它，所以这个监听实际上什么也不做。
+    // 这里只把它存成引用，好在卸载时按引用摘掉自己这一个，语义保持原样。
+    this.showMobileMenuHandler = v => showMobileMenuFn
+    this.$bus.on('showMobileMenu', this.showMobileMenuHandler)
+  },
+  beforeUnmount () {
+    // T17 修复轮 1（评审 C1）：原来不带 handler，会删光该事件全部监听（含 AppNav 这种 App 外壳的）
+    // ⚠️ N6（修复轮 2）：handler 已置 null 时 `off(e, null)` 又会退化成全量删，所以先判非空。
+    if (this.showMobileMenuHandler) this.$bus.off('showMobileMenu', this.showMobileMenuHandler)
+    this.showMobileMenuHandler = null
+    this.tabs = []
+    // 摘掉 pageSettingVisual 注册的全局 message 监听与未触发的重载定时器，避免卸载后仍持有实例引用
+    window.removeEventListener('message', this.reloadPageConfigByWindow)
+    clearTimeout(this.configReloadTimer)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.header {
+  height: 60px;
+  margin-bottom: 10px;
+}
+.header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--epx-bg-card);
+  position: relative;
+  // top: -10px;
+  // left: -9px;
+  // width: calc(100% + 19px);
+  height: 60px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  .title {
+    font-size: var(--epx-font-size-l);
+    color: var(--epx-text);
+    i {
+      font-size: 22px;
+      position: relative;
+      top: 2px;
+      cursor: pointer;
+    }
+  }
+  .tabs {
+    display: flex;
+    flex: 1;
+    padding-left: 20px;
+  }
+  .tab-item {
+    cursor: pointer;
+    font-size: var(--epx-font-size-l);
+    line-height: 1;
+    color: var(--epx-text);
+    padding: 0 12px;
+    border-right: 1px solid #ccc;
+    &.active {
+      @include font_color_primary;
+    }
+    &:last-child {
+      border: 0
+    }
+  }
+  .opera {
+
+      :deep(.el-button) {
+        padding: 8px 16px;
+      }
+
+    .more {
+      font-size: var(--epx-font-size-xl);
+      padding: 5px 14px;
+    }
+    .opera-text {
+      border: 1px solid var(--epx-border);
+      padding: 0 12px;
+      font-size: var(--epx-font-size-xl);
+      color: var(--epx-text-secondary);
+      line-height: 1;
+      cursor: pointer;
+      i {
+        margin-right: 4px;
+      }
+      margin-left: 24px;
+    }
+  }
+}
+.epx-header {
+  margin-bottom: 10px;
+  padding: 6px 12px;
+  display: flex;
+}
+.mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  .title {
+    line-height: 20px;
+    i {
+      font-size: var(--epx-font-size-xl);
+      margin: 0;
+    }
+  }
+  i {
+    font-size: 18px;
+    color: var(--epx-text);
+    margin-left: 8px;
+  }
+}
+.setting-list {
+  li {
+    padding: 8px 2px;
+    border-bottom: 1px solid var(--epx-border) ;
+    i {
+      margin-right: 6px;
+    }
+    &:last-child {
+      border:0
+    }
+  }
+}
+@media screen and (max-width: 992px){
+  .epx-header {
+    margin-bottom: 0;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: var(--epx-border);
+      transform: scaleY(0.5);
+    }
+
+      :deep(.el-page-header__title) {
+        display: none;
+      }
+      :deep(.el-page-header__left) {
+        margin-right: 0;
+        &::after {
+          display: none;
+        }
+      }
+      :deep(.el-page-header__content) {
+        flex: 1;
+        text-align: center;
+        font-size: var(--epx-font-size-l);
+      }
+
+  }
+}
+.menu-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .menu {
+    flex: 1;
+  }
+  .to-index {
+    flex-shrink: 0;
+    width: 100%;
+    height: 44px;
+    border-top: 1px solid var(--epx-border);
+    font-size: var(--epx-font-size-base);
+    @include font_color_primary;
+    text-align: center;
+    line-height: 44px;
+    i {
+      @include font_color_primary;
+      position: relative;
+      top: 1px;
+      margin-right: 4px;
+    }
+  }
+}
+</style>
+<style>
+.popper {
+  min-width: 100px;
+  padding: 0 10px;
+}
+</style>

package/src/components/IconCard.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-col :span="24/mcolumn" :md="24/column" >
+    <el-card  class="icon-card" shadow="hover" @click="routerLink(link)">
+      <template v-slot:header><div v-if="cardTitle" >
+        <slot name="header">
+          <div class="card-title">
+            {{cardTitle}}
+          </div>
+        </slot>
+      </div></template>
+      <div class="card-container">
+        <div class="icon" :style="iconStyle">
+          <slot name="icon" class="icon">
+            <img v-if="icon" :src="icon" alt="">
+          </slot>
+        </div>
+        <div class="content">
+          <slot name="title">
+            <p :class="`title ${cardTitle? 'sub-title' : ''}`" v-if="title">{{title}}</p>
+          </slot>
+          <slot name="desc">
+            <p class="desc" v-if="desc">{{desc}}</p>
+          </slot>
+          <slot name="rate">
+            <el-rate
+              v-if="rate"
+              :model-value="rate"
+              disabled
+              show-score
+              text-color="#ff9900">
+          </el-rate>
+          </slot>
+        </div>
+      </div>
+    </el-card>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'epx-icon-card',
+  inject: ['column', 'mcolumn'],
+  props: {
+    title: String,
+    icon: String,
+    desc: String,
+    rate: String,
+    cardTitle: String,
+    iconStyle: Object,
+    link: String
+  },
+  methods: {
+    routerLink (link) {
+      if (link) this.$router.push(link)
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.icon-card {
+  margin-bottom: 20px;
+  border: 0;
+  background: #f8f8fb;
+  cursor: pointer;
+
+    :deep(>.el-card__header) {
+      padding: 12px 20px;
+    }
+    :deep(>.el-card__body) {
+      padding: 20px 14px
+    }
+    :deep(.el-rate__icon) {
+      margin-right: 0;
+    }
+
+}
+
+.card-title{
+  // font-size: var(--epx-font-size-l);
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+  // font-weight: 600;
+  line-height: 1;
+}
+
+.card-container {
+  display: flex;
+  align-items: center;
+}
+.icon {
+  margin-right: 12px;
+  height: 50px;
+  img {
+    height: 100%;
+  }
+}
+.title {
+  // font-size: var(--epx-font-size-l);
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+  // font-weight: 600;
+  white-space: nowrap;
+  line-height: 1;
+  margin-bottom: 4px;
+}
+.sub-title {
+  font-weight: normal;
+  // font-size: var(--epx-font-size-base);
+  font-size: var(--epx-font-size-s);
+  color: var(--epx-text);
+}
+.desc {
+  // font-size: var(--epx-font-size-base);
+  font-size: var(--epx-font-size-s);
+  line-height: 20px;
+  color: var(--epx-text-secondary);
+}
+@media only screen and (max-width: 992px) {
+  .card-container{
+    display: block;
+    text-align: center;
+    .icon{
+      margin-right: 0px;
+      margin-bottom: 9px;
+    }
+    .title{
+      // overflow: hidden;
+      // white-space: nowrap;
+      // text-overflow: ellipsis;
+      white-space:pre-wrap;
+      font-size: 13px;
+      color: var(--epx-text);
+      line-height: 16px;
+    }
+  }
+  .el-col{
+    padding-left: 0!important;
+    padding-right: 0!important;
+  }
+  .icon-card :deep(.el-card__body){
+    height: 142px;
+    box-sizing: border-box;
+  }
+  .card-title{
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    // white-space:pre-wrap;
+  }
+  .el-card{
+    border: none;
+    border-right: 1px solid var(--epx-border);
+    border-bottom: 1px solid var(--epx-border);
+  }
+}
+</style>

package/src/components/IconFontLibrary.vue

@@ -0,0 +1,61 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import EntityFindVue from '@epxing/components/src/entity-list-find'
+import { MobileGrid, MobileGridItem } from '@epxing/components/src/mobile'
+export default {
+  name: 'epx-icon-font-library',
+  components: { MobileGrid, MobileGridItem },
+  extends: EntityFindVue,
+  pageFlag: true,
+  pageSize: 100,
+  data () {
+    return {
+      renderComponents: [this.renderSearch, this.renderTable]
+    }
+  },
+  methods: {
+    renderTable () {
+      return (
+        <div ref="grid" >
+          <MobileGrid gutter="10" style={{ minHeight: '40px' }}>
+            {
+              this.data.length === 0 && (
+                <MobileGridItem text="暂无更多" v-slots={{ icon: () => (<i style={{ fontSize: '30px', marginBottom: '12px' }} class="el-icon-folder"></i>) }}>
+                </MobileGridItem>
+              )
+            }
+            {
+              this.data.map(item => (
+                <MobileGridItem key={item.ID} text={item.NAME} onClick={this.selectEntity.bind(this, null, item)} v-slots={{ icon: () => (<i style={{ fontSize: '30px', marginBottom: '12px' }} class={[item.TYPE !== '2' && 'fa', item.CODE]}></i>) }}>
+                </MobileGridItem>
+              ))
+            }
+          </MobileGrid>
+          {
+            this.$configs.pageFlag && (
+              <div class="pagination">
+                <el-pagination
+                  v-loading={this.loading}
+                  currentPage={this.currentPage}
+                  pageSizes={[5, 10, 15, 20, 30, 50, 100, 200]}
+                  pageSize={this.pageSize}
+                  layout="prev, pager, next, jumper, sizes,total"
+                  total={this.total}
+                  onSizeChange={this.sizeChange}
+                  onCurrentChange={this.currentChange}
+                >
+                </el-pagination>
+              </div>
+            )
+          }
+        </div>
+      )
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>