n20-common-lib 3.1.4 → 3.1.6

package/src/components/Pivot/ReportSidebar.vue

@@ -0,0 +1,172 @@
+<template>
+  <!-- 左侧报表清单 -->
+  <div class="pivot-sidebar-left" :class="{ collapsed: isCollapsed }">
+    <div class="sidebar-header">
+      <span class="sidebar-title">我的报表清单</span>
+      <div class="add-report-btn" @click="handleAddReport" title="新建">
+        <i class="v3-icon-plus"></i>
+      </div>
+    </div>
+
+    <div class="report-list">
+      <div
+        v-for="(report, index) in reportList"
+        :key="report.id"
+        class="report-item"
+        :class="{ active: currentIndex === index, editing: editingId === report.id }"
+        @click="handleSelectReport(index)"
+        @mouseenter="hoveredId = report.id"
+        @mouseleave="hoveredId = null"
+      >
+        <i :class="getChartTypeIcon(report.chartType)" class="report-icon"></i>
+        <!-- 报表名称显示/编辑 -->
+        <span v-if="editingId !== report.id" class="report-name">{{ report.name }}</span>
+        <input
+          v-else
+          v-model="editingName"
+          class="report-name-input"
+          type="text"
+          @click.stop
+          @blur="handleSaveRename"
+          @keyup.enter="handleSaveRename"
+          @keyup.esc="handleCancelRename"
+        />
+        <!-- 更多操作菜单 -->
+        <div
+          v-if="editingId !== report.id"
+          class="report-more"
+          :class="{ visible: hoveredId === report.id || activeMenuId === report.id }"
+          @click.stop="handleToggleMenu(report.id)"
+        >
+          <i class="v3-icon-more"></i>
+          <div v-if="activeMenuId === report.id" class="report-menu">
+            <div class="report-menu-item" @click.stop="handleStartRename(report)">
+              <i class="v3-icon-edit"></i>
+              <span>重命名</span>
+            </div>
+            <div class="report-menu-item delete" @click.stop="handleDeleteReport(report)">
+              <i class="v3-icon-delete"></i>
+              <span>删除</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 折叠/展开指示器 -->
+    <div
+      class="scroll-bar-indicator"
+      :class="{ collapsed: isCollapsed }"
+      @click="handleToggleCollapse"
+    >
+      <i :class="isCollapsed ? 'v3-icon-right' : 'v3-icon-left'"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ReportSidebar',
+  props: {
+    // 报表列表
+    reportList: {
+      type: Array,
+      default: () => []
+    },
+    // 当前选中的报表索引
+    currentIndex: {
+      type: Number,
+      default: 0
+    },
+    // 是否折叠
+    isCollapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 报表项悬停ID
+      hoveredId: null,
+      // 当前显示菜单的报表ID
+      activeMenuId: null,
+      // 正在编辑的报表ID
+      editingId: null,
+      // 编辑中的报表名称
+      editingName: ''
+    }
+  },
+  methods: {
+    // 获取图表类型图标
+    getChartTypeIcon(type) {
+      const iconMap = {
+        bar: 'v3-icon-chart-histogram',
+        line: 'v3-icon-chart-line',
+        pie: 'v3-icon-chart-pie',
+        horizontalBar: 'v3-icon-histogram'
+      }
+      return iconMap[type] || 'v3-icon-chart-histogram'
+    },
+
+    // 选择报表
+    handleSelectReport(index) {
+      this.$emit('select', index)
+    },
+
+    // 添加报表
+    handleAddReport() {
+      this.$emit('add')
+    },
+
+    // 切换折叠状态
+    handleToggleCollapse() {
+      this.$emit('toggle-collapse')
+    },
+
+    // 切换报表菜单显示
+    handleToggleMenu(reportId) {
+      this.activeMenuId = this.activeMenuId === reportId ? null : reportId
+    },
+
+    // 开始重命名
+    handleStartRename(report) {
+      this.editingId = report.id
+      this.editingName = report.name
+      this.activeMenuId = null
+      this.$nextTick(() => {
+        const input = this.$el.querySelector('.report-name-input')
+        if (input) {
+          input.focus()
+          input.select()
+        }
+      })
+    },
+
+    // 保存重命名
+    handleSaveRename() {
+      if (this.editingId && this.editingName.trim()) {
+        this.$emit('rename', { id: this.editingId, name: this.editingName.trim() })
+      }
+      this.editingId = null
+      this.editingName = ''
+    },
+
+    // 取消重命名
+    handleCancelRename() {
+      this.editingId = null
+      this.editingName = ''
+    },
+
+    // 删除报表
+    handleDeleteReport(report) {
+      this.activeMenuId = null
+      this.$emit('delete', report)
+    },
+
+    // 关闭菜单（供外部调用）
+    closeMenu() {
+      this.activeMenuId = null
+    }
+  }
+}
+</script>

package/src/components/Pivot/TableView.vue

@@ -0,0 +1,341 @@
+<template>
+  <!-- 表格视图 -->
+  <div class="table-view">
+    <div v-if="hasData" class="table-wrapper">
+      <!-- 数据概览头部 -->
+      <!-- <div class="table-header">
+        <div class="table-title">数据概览</div>
+        <div class="table-desc">
+          <template v-if="isCrossMode">
+            按行维度「{{ rowDimensionLabel }}」、列维度「{{ columnDimensionLabel }}」交叉分析后的结果，共 {{ dataCount }} 条
+          </template>
+          <template v-else>
+            按维度「{{ dimensionLabel }}」聚合后的结果，共 {{ dataCount }} 条
+          </template>
+        </div>
+      </div> -->
+
+      <!-- 表格容器 -->
+      <div class="table-container">
+        <vxe-table
+          ref="vxeTable"
+          :data="tableData"
+          :height="'100%'"
+          :scroll-y="{ enabled: true, gt: 0 }"
+          :scroll-x="{ enabled: true, gt: 0 }"
+          :row-config="{ isHover: true }"
+          :column-config="{ resizable: true }"
+          show-header-overflow
+          show-overflow
+          auto-resize
+          class="pivot-vxe-table"
+        >
+          <!-- 动态列渲染 - 支持多级表头 -->
+          <template v-for="col in vxeColumns">
+            <!-- 分组列（多级表头） -->
+            <vxe-colgroup
+              v-if="col.children && col.children.length > 0"
+              :key="col.key"
+              :title="col.title"
+              :header-align="col.headerAlign || 'center'"
+            >
+              <vxe-column
+                v-for="childCol in col.children"
+                :key="childCol.key"
+                :field="childCol.key"
+                :title="childCol.title"
+                :min-width="childCol.minWidth"
+                :align="childCol.align"
+                :header-align="childCol.headerAlign"
+              >
+                <template #default="{ row }">
+                  <div class="metric-cell-content">
+                    <span v-if="childCol.aggregateType === 'count'" class="metric-count">
+                      {{ formatCount(row._groupCount) }} 笔
+                    </span>
+                    <span v-else class="metric-value">{{ formatNumber(row[childCol.key]) }}</span>
+                  </div>
+                </template>
+              </vxe-column>
+            </vxe-colgroup>
+
+            <!-- 普通列 -->
+            <vxe-column
+              v-else
+              :key="col.field"
+              :field="col.field"
+              :title="col.title"
+              :min-width="col.minWidth"
+              :align="col.align"
+              :header-align="col.headerAlign"
+            >
+              <template #default="{ row }">
+                <!-- 维度列：直接显示值 -->
+                <template v-if="col.type === 'dimension'">
+                  {{ row[col.field] }}
+                </template>
+                <!-- 指标列：根据聚合类型显示 -->
+                <template v-else-if="col.type === 'metric'">
+                  <div class="metric-cell-content">
+                    <span v-if="col.aggregateType === 'count'" class="metric-count">
+                      {{ formatCount(row._groupCount) }} 笔
+                    </span>
+                    <span v-else class="metric-value">{{ formatNumber(row[col.field]) }}</span>
+                  </div>
+                </template>
+              </template>
+            </vxe-column>
+          </template>
+
+          <!-- 空状态 -->
+          <template #empty>
+            <Empty type="noData2" :height="200" :width="200" content="暂无数据" />
+          </template>
+        </vxe-table>
+      </div>
+
+      <!-- 分页组件 -->
+      <div class="cross-pagination">
+        <div class="pagination-info">共{{ totalCount }}条</div>
+        <div class="pagination-controls">
+          <div class="pagination-btn" :class="{ disabled: currentPage <= 1 }" @click="handlePrevPage">
+            <i class="v3-icon-left"></i>
+          </div>
+          <div class="pagination-current">{{ currentPage }}</div>
+          <span class="pagination-separator">/</span>
+          <div class="pagination-total">{{ totalPages }}</div>
+          <div class="pagination-btn" :class="{ disabled: currentPage >= totalPages }" @click="handleNextPage">
+            <i class="v3-icon-right"></i>
+          </div>
+        </div>
+        <div class="pagination-size-select" @click="showPageSizeDropdown = !showPageSizeDropdown">
+          <span>{{ pageSize }}条/页</span>
+          <i class="v3-icon-down"></i>
+          <div v-if="showPageSizeDropdown" class="pagination-size-dropdown">
+            <div
+              v-for="size in pageSizeOptions"
+              :key="size"
+              class="pagination-size-option"
+              :class="{ active: pageSize === size }"
+              @click.stop="handlePageSizeChange(size)"
+            >
+              {{ size }}条/页
+            </div>
+          </div>
+        </div>
+        <div class="pagination-jump">
+          <span class="pagination-jump-label">前往</span>
+          <input type="number" class="pagination-jump-input" :value="currentPage" @change="handleJumpToPage" min="1" />
+          <span class="pagination-jump-label">页</span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="empty-state">
+      <Empty type="noData2" :height="200" :width="200" content="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Empty from '../Empty/index.vue'
+
+export default {
+  name: 'TableView',
+  components: {
+    Empty
+  },
+  props: {
+    // 是否有数据
+    hasData: {
+      type: Boolean,
+      default: false
+    },
+    // 数据条数
+    dataCount: {
+      type: Number,
+      default: 0
+    },
+    // 维度标签
+    dimensionLabel: {
+      type: String,
+      default: ''
+    },
+    // 是否交叉统计模式
+    isCrossMode: {
+      type: Boolean,
+      default: false
+    },
+    // 行维度标签（交叉统计用）
+    rowDimensionLabel: {
+      type: String,
+      default: ''
+    },
+    // 列维度标签（交叉统计用）
+    columnDimensionLabel: {
+      type: String,
+      default: ''
+    },
+    // 表格列定义
+    tableColumns: {
+      type: Array,
+      default: () => []
+    },
+    // 交叉表列定义
+    crossTableColumns: {
+      type: Array,
+      default: () => []
+    },
+    // 分页后的表格数据
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    // 总数据条数
+    totalCount: {
+      type: Number,
+      default: 0
+    },
+    // 当前页
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 每页条数
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    // 每页条数选项
+    pageSizeOptions: {
+      type: Array,
+      default: () => [10, 20, 50, 100]
+    },
+    // 总页数
+    totalPages: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      showPageSizeDropdown: false
+    }
+  },
+  computed: {
+    // 转换为 vxe-table 列格式（支持多级表头）
+    vxeColumns() {
+      // 计算列最小宽度的辅助函数
+      const calcMinWidth = (title, isDimension) => {
+        // 基础宽度：标题字符数 * 14px + 左右 padding 32px
+        const titleWidth = (title?.length || 0) * 14 + 32
+        // 维度列最小 120px，指标列最小 100px
+        const baseMin = isDimension ? 120 : 100
+        return Math.max(titleWidth, baseMin)
+      }
+
+      if (this.isCrossMode) {
+        return this.crossTableColumns.map((col) => {
+          // 分组列（多级表头）
+          if (col.type === 'group' && col.children) {
+            return {
+              key: col.key,
+              title: col.title,
+              type: 'group',
+              headerAlign: 'center',
+              // 递归处理子列
+              children: col.children.map((childCol) => ({
+                field: childCol.key,
+                title: childCol.title,
+                minWidth: calcMinWidth(childCol.title, false),
+                align: 'right',
+                headerAlign: 'right',
+                type: childCol.type,
+                aggregateType: childCol.aggregateType
+              }))
+            }
+          }
+          // 普通列
+          const isDimension = col.type === 'dimension'
+          return {
+            field: col.key,
+            title: col.title,
+            minWidth: calcMinWidth(col.title, isDimension),
+            align: isDimension ? 'left' : 'right',
+            headerAlign: isDimension ? 'left' : 'right',
+            type: col.type,
+            aggregateType: col.aggregateType
+          }
+        })
+      } else {
+        return this.tableColumns.map((col) => {
+          const isDimension = col.type === 'dimension'
+          return {
+            field: col.key,
+            title: col.title,
+            minWidth: calcMinWidth(col.title, isDimension),
+            align: isDimension ? 'left' : 'right',
+            headerAlign: isDimension ? 'left' : 'right',
+            type: col.type,
+            aggregateType: col.aggregateType
+          }
+        })
+      }
+    }
+  },
+  methods: {
+    // 格式化数值显示
+    formatNumber(val) {
+      if (val === null || val === undefined || val === '') return '--'
+      const num = parseFloat(val)
+      if (isNaN(num)) return '--'
+      return num.toLocaleString('en-US', { minimumFractionDigits: 2 })
+    },
+
+    // 格式化笔数显示（0 显示为 "-"，其他显示数字）
+    formatCount(count) {
+      if (count === null || count === undefined || count === 0) return '-'
+      return count
+    },
+
+    // 上一页
+    handlePrevPage() {
+      if (this.currentPage > 1) {
+        this.$emit('prev-page')
+      }
+    },
+
+    // 下一页
+    handleNextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.$emit('next-page')
+      }
+    },
+
+    // 跳转到指定页
+    handleJumpToPage(e) {
+      const page = parseInt(e.target.value)
+      if (page && page >= 1 && page <= this.totalPages) {
+        this.$emit('jump-page', page)
+      }
+    },
+
+    // 每页条数变更
+    handlePageSizeChange(size) {
+      this.showPageSizeDropdown = false
+      this.$emit('page-size-change', size)
+    },
+
+    // 关闭下拉菜单（供外部调用）
+    closeDropdown() {
+      this.showPageSizeDropdown = false
+    },
+
+    // 刷新表格（供外部调用）
+    refreshTable() {
+      if (this.$refs.vxeTable) {
+        this.$refs.vxeTable.refreshColumn()
+      }
+    }
+  }
+}
+</script>