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

package/src/Header.vue

@@ -0,0 +1,501 @@
+<template>
+  <!-- 移动端导航栏 -->
+  <div class="mobile-header" v-if="$isMobile" :style="$component.style">
+    <div class="title">
+      <i class="el-icon-arrow-left" @click="backPage"></i>
+      <span>{{pageTitle}}</span>
+    </div>
+    <!-- <div v-if="$configs.moreFlag"> -->
+      <!-- 多选操作>1时显示more图标
+           多选操作=1时如果flag为true显示more图标，为false直接显示操作名称 -->
+      <div class="mobile-opera" v-if="operates.length>1">
+        <el-popover
+          popper-class="popper"
+          placement="bottom"
+          trigger="click"
+        >
+          <ul class="setting-list">
+              <li v-for="operate in operates" :key="operate.text" @click="listHandler(operate)">
+                <i :class="['fa',operate.icon]"></i>
+                {{operate.text}}
+              </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="[$configs.icon]" :style="{transform:'rotate(90deg)'}" v-if="$configs.icon"></i>
+            <i class="el-icon-more" :style="{transform:'rotate(90deg)'}" v-else></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>
+              {{$t('return home')}}
+            </div>
+          </div>
+        </mobile-sheet>
+
+        <!-- <i class="el-icon-more" :style="{transform:'rotate(90deg)'}"></i> -->
+      </div>
+      <div class="mobile-opera" v-else>
+        <li v-for="operate in operates" class="mobile-operate-btn" :key="operate.text" @click="listHandler(operate)">
+          <i :class="['fa',operate.icon]"></i>
+          {{operate.text}}
+        </li>
+      </div>
+  </div>
+  <!-- pc端 -->
+  <div class="header" v-else :style="$component.style">
+    <div class="header-inner">
+      <div class="title">
+        <!-- 返回箭头：页内下钻（栈 > 1）、调用方显式传 showBack（同基础 Header）、常用报表看板预览
+             （previewReport 用 openType '1' 新开页签，看板是该页签第一页、栈恒为 1，而智能体应用没有页签行，
+             不显示就没法回列表；返回会销毁本页 → 关掉页签 → 回到上一个页签）。AI 面板内预览由面板自带关闭 -->
+        <i class="el-icon-arrow-left" @click="backPage" v-if="(routeLength!==1 || showBack || reportBoardId) && !isAiAgentPage"></i>
+        <span class="">{{ pageTitle}}</span>
+      </div>
+      <ul class="tabs" v-if="tabs && tabs.length>0">
+        <!-- T30b COMPILER_FILTERS：同 header/Breadcrumb.vue —— tabTitle 是 extends 来的 method，非 filter。 -->
+        <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" >
+          <el-switch
+            class="seach-flag"
+            v-if="scopeFlag && globalSearchFields.length>0"
+            v-model="showSearchFields"
+            inactive-text="查询筛选："
+          >
+          </el-switch>
+          <el-button class="opera-item" type="primary" link @click="reloadPageConfig">
+            <i class="el-icon-refresh"></i>
+            {{'刷新页面'}}
+          </el-button>
+          <el-button class="opera-item" type="primary" link @click="switchFullscreen">
+            <i class="el-icon-full-screen"></i>
+            {{fullscreen? '取消全屏': '全屏'}}
+          </el-button>
+           <el-button v-if="(showPageConfigBtn && !isAiAgentPage) || reportBoardId" class="opera-item" type="primary" link @click="newPageSettingVisual">
+            <i class="el-icon-edit-outline"></i>
+            设计
+          </el-button>
+
+      <el-dialog
+        v-if="$configs.showHelp && $configs.help"
+        class="help-dialog"
+        v-model="showHelpDialog"
+        :modal="false"
+        width="70%"
+        :fullscreen="helpDialogFullscreen"
+      >
+        <template v-slot:header><div class="help-header">
+          <span>{{ this.$t('helptext') }}</span>
+          <i class="full-btn el-icon-full-screen" @click="helpDialogFullscreen=!helpDialogFullscreen"></i>
+        </div></template>
+        <div class="help-content" v-html="$configs.help"></div>
+      </el-dialog>
+    </div>
+      </div>
+      <div class="search-fields" v-show="showSearchFields">
+        <epx-search-fields :metaId="$metaId" :fields="globalSearchFields" :showFilter="true" :showKeyword="false" :showSearchLabel="true" @search="search"></epx-search-fields>
+      </div>
+  </div>
+</template>
+
+<script>
+import Header from '@epxing/components/src/header'
+import { evalWith } from '@epxing/utils/src/eval-with'
+import { MobileSheet } from '@epxing/components/src/mobile'
+export default {
+  name: 'epx-dashboard-header',
+  extends: Header,
+  components: { MobileSheet },
+  data () {
+    return {
+      fullscreen: false,
+      showSearchFields: !!this.searchDefaultFlag
+    }
+  },
+  props: {
+    scopeFlag: Boolean,
+    globalSearchFields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    searchDefaultFlag: Boolean,
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    // AI 助手右侧预览（AiChatPage 打开看板时传 isAiAgentPage）：隐藏返回和设计按钮，
+    // 面板自带关闭按钮，设计入口对临时注入的看板页面无意义
+    isAiAgentPage () {
+      return !!this.$query.isAiAgentPage
+    },
+    // 常用报表看板（FM_CA_REPORT_BOARD）的报表记录 id：
+    // 1) previewReport 透传的 $query.reportBoardId；
+    // 2) 兜底从临时页面 id（report-board-<报表ID>）解析，避免依赖配置是否重新应用。
+    // 有它就把"设计"按钮放开（即便在 AI 面板里），并走报表设计模式。
+    reportBoardId () {
+      if (this.$query.reportBoardId) return this.$query.reportBoardId
+      const pid = this.upPage && this.upPage.$pageId
+      if (pid && /^report-board-/.test(pid)) return pid.replace(/^report-board-/, '')
+      return ''
+    },
+    pageTitle () {
+      const _this = this
+      const { config: pageConfigs = {} } = this.$pageInfo
+      const { title = '' } = pageConfigs
+      const pageTitle = title.replace(/\$\[([^[]+)\]/g, (macth, key) => {
+        try {
+          return evalWith(`_this.${key}`, { _this }) || evalWith(`_this.$query.${key}`, { _this }) || ''
+        } catch (error) {
+          console.error(error)
+          return ''
+        }
+      })
+
+      return pageTitle || this.$query.title || this.defaultTitle || this.$query.menuTitle
+    }
+  },
+  methods: {
+    newPageSettingVisual () {
+      // 常用报表看板：打开报表设计模式，设计器保存写回 FM_CA_REPORT_BOARD.DASHBOARD_CONFIG，
+      // 不依赖 FM_PAGE_CONFIG 的 pageId（预览用的是临时注入页面）
+      if (this.reportBoardId) {
+        const routePath = this.$util.getRootPath()
+        window.open(`${routePath}/config/reportboard/${this.appConfig['CLIENT|CODE']}/${this.appConfig['SYSTEM|CODE']}/${this.reportBoardId}`)
+        // 设计在新标签页保存到 FM_CA_REPORT_BOARD；切回本预览页时重新拉取配置刷新看板
+        document.removeEventListener('visibilitychange', this.onReportBoardReturn)
+        document.addEventListener('visibilitychange', this.onReportBoardReturn)
+        return
+      }
+      if (!this.upPage.$pageId) {
+        this.$message.error(this.$t('The default page cannot be edited'))
+        return
+      }
+      const pageId = this.upPage.$pageId
+      // const route = {
+      //   metaId: 'FM_PAGE_CONFIG',
+      //   flag: 'v_visual_page_config',
+      //   component: 'visual-config-dashboard',
+      //   id: pageId,
+      //   entityId: this.upPage.$metaId,
+      //   config: this.upPage.pageConfig,
+      //   pageInstance: this.upPage,
+      //   title: this.title || this.appConfig.TITLE,
+      //   pageType: 'EDIT'
+      // }
+      // this.$createPage(route)
+      setTimeout(() => {
+        const routePath = this.$util.getRootPath()
+        window.open(`${routePath}/config/dashboard/${this.appConfig['CLIENT|CODE']}/${this.appConfig['SYSTEM|CODE']}/${pageId}`)
+        window.removeEventListener('message', this.reloadPageConfig)
+        window.addEventListener('message', this.reloadPageConfig)
+      }, 200)
+    },
+    switchFullscreen () {
+      this.$emit('fullscreen')
+    },
+    search (v) {
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+      this.timer = setTimeout(() => {
+        this.$emit('search', v)
+        clearTimeout(this.timer)
+        this.timer = null
+      }, 1000)
+    },
+    reloadPageConfig (e) {
+      if (this.timer) {
+        this.timer = null
+        clearTimeout(this.timer)
+      }
+      this.timer = setTimeout(() => {
+        this.$store.commit('DELETE_PAGE', { pageId: this.upPage.$pageId })
+        this.reloadPage()
+        this.timer = null
+        clearTimeout(this.timer)
+      }, 1000)
+    },
+    // 从报表设计标签页切回预览时：重新拉取 FM_CA_REPORT_BOARD 配置，重建临时看板页面并刷新
+    onReportBoardReturn () {
+      if (document.visibilityState !== 'visible') return
+      // 只刷新一次（reloadPage 会重建头部，监听随之失效；要再次同步可再点"设计"）
+      document.removeEventListener('visibilitychange', this.onReportBoardReturn)
+      const reportId = this.reportBoardId
+      const pid = this.upPage && this.upPage.$pageId
+      if (!reportId || !pid) return
+      this.$http.get({ entityId: 'FM_CA_REPORT_BOARD', id: reportId })
+        .then(res => {
+          const record = (res && res.data) || {}
+          let config = {}
+          try {
+            const raw = record.DASHBOARD_CONFIG
+            config = raw ? (typeof raw === 'string' ? JSON.parse(raw) : raw) : {}
+          } catch (err) {
+            config = {}
+          }
+          // 兼容信封写法 { title, metaId, config: {...} }
+          if (config && config.config && (config.config.items || config.config.itemConfigs)) {
+            config = Object.assign({ title: config.title, metaId: config.metaId }, config.config)
+          }
+          this.$store.commit('DELETE_PAGE', { pageId: pid })
+          this.$store.commit('ADD_PAGE', {
+            pageId: pid,
+            pageCode: 'dashboard',
+            metaId: config.metaId || '',
+            pageMetaId: config.metaId || '',
+            title: record.REPORT_NAME || config.title || '报表预览',
+            label: record.REPORT_NAME || config.title || '报表预览',
+            config: config
+          })
+          this.reloadPage()
+        })
+        .catch(() => {})
+    }
+  },
+  beforeUnmount () {
+    document.removeEventListener('visibilitychange', this.onReportBoardReturn)
+  }
+}
+</script>
+<style scoped lang="scss">
+.header {
+  margin-bottom: 10px;
+}
+.header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--epx-bg-card);
+  width: 100%;
+  height: 50px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  .title {
+    font-size: var(--epx-font-size-l);
+    color: #333333;
+    i {
+      font-size: 22px;
+      position: relative;
+      top: 2px;
+      cursor: pointer;
+          vertical-align: baseline;
+    }
+  }
+  .tabs {
+    display: flex;
+    flex: 1;
+    padding-left: 20px;
+  }
+  .tab-item {
+    cursor: pointer;
+    font-size: var(--epx-font-size-l);
+    line-height: 1;
+    color: #666;
+    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 #999;
+      padding: 0 12px;
+      font-size: var(--epx-font-size-xl);
+      color: #8395a7;
+      line-height: 1;
+      cursor: pointer;
+      i {
+        margin-right: 4px;
+      }
+      margin-left: 24px;
+    }
+  }
+}
+.opera-item {
+  color: #444;
+  margin: 0;
+}
+.epx-header {
+  margin-bottom: 10px;
+  padding: 6px 12px;
+  display: flex;
+}
+.mobile-header {
+  background: var(--epx-bg-card);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  font-size: var(--epx-font-size-l);
+  color: #333;
+  border-bottom: 1px solid #e3e3e3;
+  .title {
+    line-height: 20px;
+    i {
+      font-size: var(--epx-font-size-xl);
+      margin: 0;
+    }
+  }
+  i {
+    font-size: 18px;
+    color: #666;
+    margin-left: 8px;
+  }
+}
+.setting-list {
+  li {
+    padding: 6px 8px;
+    border-bottom: 1px solid #e3e3e3 ;
+    i {
+      margin-right: 6px;
+    }
+    &:last-child {
+      border:0
+    }
+  }
+}
+.help-dialog {
+
+    :deep(.el-dialog__header) {
+      padding: 15px 20px;
+      font-size: var(--epx-font-size-l);
+      line-height: 20px;
+    }
+    :deep(.el-dialog__headerbtn) {
+      top: 14px;
+    }
+    :deep(.el-dialog__body) {
+      position: relative;
+      max-height: 70vh;
+      overflow: auto;
+      padding: 10px;
+    }
+    :deep(.is-fullscreen .el-dialog__body) {
+      box-sizing: border-box;
+      height: calc(100% - 52px);
+      max-height: none;
+
+    }
+
+}
+.full-btn {
+  float: right;
+  font-size: var(--epx-font-size-base);
+  margin-right: 30px;
+  margin-top: 2px;
+  color: #999;
+  cursor: pointer;
+}
+.help-content {
+
+}
+@media screen and (max-width: 992px){
+  .mobile-header {
+    margin: 10px!important;
+    margin-bottom: 0!important;
+  }
+  .epx-header {
+    margin-bottom: 0;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: #e3e3e3;
+      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 #e3e3e3;
+    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;
+    }
+  }
+}
+.allow-click {
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary;
+  }
+}
+.mobile-operate-btn {
+  @include font_color_primary;
+  font-size: var(--epx-font-size-base);
+}
+.seach-flag {
+
+    :deep(.el-switch__label.is-active) {
+      color: #333;
+    }
+
+}
+.search-fields {
+  border-top: 1px solid #F2F3F7;
+}
+</style>

package/src/Preview.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    仪表盘预览
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-dashboard--preview',
+  props: {
+    compConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  inject: ['pageMetaId'],
+  computed: {
+    currentMetaId () {
+      const { metaId = this.pageMetaId } = this.compConfigs
+      return metaId
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>