n20-common-lib 3.1.5 → 3.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -74,6 +74,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-transform-flow-comments": "^7.14.5",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "^5.0.8",

package/src/assets/css/pivot.scss

@@ -33,6 +33,8 @@
 /* 左侧边栏 */
 .pivot-sidebar-left {
   width: 280px;
+  min-width: 280px;
+  flex-shrink: 0;
   background: #f2f3f5;
   border-right: 1px solid #e5e6eb;
   display: flex;
@@ -257,6 +259,7 @@
 /* 主内容区域 */
 .pivot-main {
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -484,6 +487,7 @@
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: hidden;
 }
 
 .chart-wrapper {
@@ -528,81 +532,6 @@
   min-height: 0;
 }
 
-.table-container {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-
-.pivot-table {
-  width: 100%;
-  min-width: 769px;
-  border-collapse: collapse;
-  table-layout: fixed;
-  font-size: 14px;
-
-  th,
-  td {
-    padding: 10px 16px;
-    border-right: 1px solid #e5e6eb;
-    border-bottom: 1px solid #e5e6eb;
-    height: 57px;
-    box-sizing: border-box;
-  }
-
-  th {
-    background: #f2f3f5;
-    font-weight: 500;
-    color: #1d2129;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    text-align: left;
-    height: 40px;
-  }
-
-  th.metric-header {
-    text-align: right;
-  }
-
-  td.dimension-cell {
-    text-align: left;
-    color: #1d2129;
-    vertical-align: middle;
-  }
-
-  td.metric-cell {
-    text-align: right;
-    vertical-align: middle;
-
-    .cell-content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      justify-content: center;
-      height: 100%;
-    }
-
-    .cell-value {
-      font-family: 'Open Sans', sans-serif;
-      font-size: 14px;
-      line-height: 22px;
-      color: #1d2129;
-    }
-
-    .cell-count {
-      font-family: 'PingFang SC', sans-serif;
-      font-size: 12px;
-      line-height: 20px;
-      color: #86909c;
-    }
-  }
-
-  tbody tr:hover {
-    background: #f7f8fa;
-  }
-}
-
 .empty-state {
   width: 100%;
   height: 100%;
@@ -615,6 +544,8 @@
 /* 右侧边栏 */
 .pivot-sidebar-right {
   width: 280px;
+  min-width: 280px;
+  flex-shrink: 0;
   background: #fff;
   border-left: 1px solid #e5e6eb;
   display: flex;
@@ -1067,6 +998,8 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
+  overflow: hidden;
 }
 
 .table-header {
@@ -1088,88 +1021,76 @@
   font-family: 'PingFang SC', sans-serif;
 }
 
-/* 交叉统计表格样式 */
-.cross-table-container {
+/* vxe-table 表格样式 */
+.table-container {
   flex: 1;
-  overflow: auto;
-}
-
-.cross-pivot-table {
+  min-height: 0;
+  overflow: hidden;
   width: 100%;
-  min-width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
 }
 
-.cross-header-row th {
-  background: #f2f3f5;
-  border-right: 1px solid #e5e6eb;
-  border-bottom: 1px solid #e5e6eb;
-  padding: 9px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #1d2129;
-  text-align: center;
-  height: 40px;
-  box-sizing: border-box;
-}
+.pivot-vxe-table {
+  font-family: 'PingFang SC', sans-serif;
 
-.cross-dimension-header {
-  width: 177px;
-  min-width: 177px;
-  text-align: left !important;
-}
+  /* 表头样式 */
+  .vxe-table--header-wrapper {
+    .vxe-header--column {
+      background: #f2f3f5;
+      font-weight: 500;
+      color: #1d2129;
+      font-size: 14px;
+      border-right: 1px solid #e5e6eb;
+    }
 
-.cross-metric-header {
-  width: 148px;
-  min-width: 148px;
-  text-align: right !important;
-}
+    /* 多级表头样式 */
+    .vxe-header--row {
+      .vxe-header--column {
+        border-bottom: 1px solid #e5e6eb;
+      }
+    }
 
-.cross-data-row td {
-  padding: 10px 16px;
-  border-right: 1px solid #e5e6eb;
-  border-bottom: 1px solid #e5e6eb;
-  font-size: 14px;
-  color: #1d2129;
-  vertical-align: middle;
-  height: 57px;
-  box-sizing: border-box;
-}
+    /* 多级表头父级样式 */
+    .vxe-header--column.col--group {
+      background: #f7f8fa;
+      text-align: center;
+      border-bottom: 1px solid #e5e6eb;
+    }
+  }
 
-.cross-dimension-cell {
-  background: #fff;
-  text-align: left !important;
-  width: 177px;
-  min-width: 177px;
+  /* 单元格样式 */
+  .vxe-body--column {
+    font-size: 14px;
+    color: #1d2129;
+    border-right: 1px solid #e5e6eb;
+  }
+
+  /* 悬停行样式 */
+  .vxe-body--row.row--hover {
+    background: #f7f8fa;
+  }
 }
 
-.cross-metric-cell {
-  background: #fff;
-  text-align: right !important;
-  width: 148px;
-  min-width: 148px;
+/* 指标单元格内容 */
+.metric-cell-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  height: 100%;
 }
 
-.cross-metric-value {
-  display: block;
+.metric-value {
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
-  font-weight: 400;
-  color: #1d2129;
   line-height: 22px;
+  color: #1d2129;
 }
 
-.cross-metric-count {
-  display: block;
+.metric-count {
   font-family: 'PingFang SC', sans-serif;
   font-size: 12px;
-  color: #86909c;
   line-height: 20px;
-}
-
-.cross-data-row:hover td {
-  background: #f7f8fa;
+  color: #86909c;
 }
 
 /* 分页组件 */

package/src/components/AdvancedFilter/index.vue

@@ -109,13 +109,15 @@
 <script>
 // import formItemInput from './form-item-input.vue'
 import XEUtils from 'xe-utils'
-import axios from '../../utils/axios.js'
-import ClDialog from '../Dialog/index.vue'
-import InputSearch from '../InputSearch/index.vue'
+
 import filterItem from './filterItem.vue'
 import formItemRender from './formItemRender.vue'
 import { getOnlyKey } from './utils'
 
+import axios from '../../utils/axios.js'
+import ClDialog from '../Dialog/index.vue'
+import InputSearch from '../InputSearch/index.vue'
+
 const prefixCls = 'n20-advanced-filter'
 export default {
   name: 'AdvancedFilter',
@@ -334,6 +336,9 @@ export default {
       if (rangeTypes.includes(item.type)) {
         return hasRange(item.startDate, item.endDate) ? this.prefixCls + '-active' : ''
       }
+      if (item.slotFields && item.slotFields.length > 0) {
+        return item.slotFields.some((field) => hasValue(this.model[field])) ? this.prefixCls + '-active' : ''
+      }
       return hasValue(this.model[item.value]) ? this.prefixCls + '-active' : ''
     },
     handleClose(item) {
@@ -397,34 +402,41 @@ export default {
       this.$emit('clear')
     },
     setModelData(list) {
-      let arr = []
+      // 收集当前选中列表中的所有字段
+      const selectedFields = new Set()
       list.forEach((res) => {
-        // 收集普通字段的 value
-        if (res.value) {
-          arr.push(res.value)
-        }
-        // 收集日期范围类型的字段
-        if (res.startDate && res.endDate) {
-          arr.push(res.startDate)
-          arr.push(res.endDate)
-        }
-        // 收集数字范围类型的字段
-        if (res.startValue && res.endValue) {
-          arr.push(res.startValue)
-          arr.push(res.endValue)
-        }
-        // 收集插槽类型可能的自定义字段（slotFields 数组）
+        if (res.value) selectedFields.add(res.value)
+        if (res.startDate) selectedFields.add(res.startDate)
+        if (res.endDate) selectedFields.add(res.endDate)
+        if (res.startValue) selectedFields.add(res.startValue)
+        if (res.endValue) selectedFields.add(res.endValue)
         if (res.type === 'slot' && Array.isArray(res?.slotFields)) {
           res?.slotFields.forEach((field) => {
-            if (field && !arr.includes(field)) {
-              arr.push(field)
-            }
+            if (field) selectedFields.add(field)
           })
         }
       })
+
+      // 收集 filterList 中定义的所有字段
+      const allDefinedFields = new Set()
+      this.filterList.forEach((item) => {
+        if (item.value) allDefinedFields.add(item.value)
+        if (item.startDate) allDefinedFields.add(item.startDate)
+        if (item.endDate) allDefinedFields.add(item.endDate)
+        if (item.startValue) allDefinedFields.add(item.startValue)
+        if (item.endValue) allDefinedFields.add(item.endValue)
+        if (item.type === 'slot' && Array.isArray(item?.slotFields)) {
+          item?.slotFields.forEach((field) => {
+            if (field) allDefinedFields.add(field)
+          })
+        }
+      })
+
+      // 只清除：在 filterList 中定义但不在选中列表中的字段
       for (const key in this.model) {
         if (Object.hasOwnProperty.call(this.model, key)) {
-          if (!arr.includes(key)) {
+          // 仅当该字段在 filterList 中定义且未被选中时才清除
+          if (allDefinedFields.has(key) && !selectedFields.has(key)) {
             delete this.model[key]
           }
         }

package/src/components/Pivot/ChartView.vue

@@ -2,10 +2,6 @@
   <!-- 图表视图 -->
   <div class="chart-view">
     <div v-if="hasData" class="chart-wrapper">
-      <div class="chart-header">
-        <div class="chart-title">数据概览</div>
-        <div class="chart-desc">按维度「{{ dimensionLabel }}」聚合后的结果，共 {{ dataCount }} 条</div>
-      </div>
       <div v-if="unitLabel" class="chart-unit-label">{{ unitLabel }}</div>
       <div ref="chartContainer" class="chart-container"></div>
     </div>
@@ -16,8 +12,8 @@
 </template>
 
 <script>
-import Empty from '../Empty/index.vue'
 import importG from '../../utils/importGlobal.js'
+import Empty from '../Empty/index.vue'
 
 export default {
   name: 'ChartView',
@@ -106,4 +102,4 @@ export default {
     this.destroyChart()
   }
 }
-</script>
+</script>

package/src/components/Pivot/TableView.vue

@@ -3,96 +3,96 @@
   <div class="table-view">
     <div v-if="hasData" class="table-wrapper">
       <!-- 数据概览头部 -->
-      <div class="table-header">
+      <!-- <div class="table-header">
         <div class="table-title">数据概览</div>
-        <div class="table-desc">按维度「{{ dimensionLabel }}」聚合后的结果，共 {{ dataCount }} 条</div>
-      </div>
-
-      <!-- 分组统计表格 -->
-      <template v-if="!isCrossMode">
-        <div class="table-container">
-          <table class="pivot-table">
-            <thead>
-              <tr>
-                <th
-                  v-for="col in tableColumns"
-                  :key="col.key"
-                  :class="col.type === 'metric' ? 'metric-header' : 'dimension-header'"
-                  :style="col.width ? { width: col.width } : null"
-                >
-                  {{ col.title }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(row, index) in tableData" :key="index">
-                <td
-                  v-for="col in tableColumns"
-                  :key="col.key"
-                  :class="col.type === 'metric' ? 'metric-cell' : 'dimension-cell'"
-                  :style="col.width ? { width: col.width } : null"
-                >
-                  <template v-if="col.type === 'metric'">
-                    <div class="cell-content">
-                      <span v-if="col.aggregateType === 'count'" class="cell-count"
-                        >{{ formatCount(row._groupCount) }} 笔</span
-                      >
-                      <span v-else class="cell-value">{{ formatNumber(row[col.key]) }}</span>
-                    </div>
-                  </template>
-                  <template v-else>
-                    {{ row[col.key] }}
-                  </template>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+        <div class="table-desc">
+          <template v-if="isCrossMode">
+            按行维度「{{ rowDimensionLabel }}」、列维度「{{ columnDimensionLabel }}」交叉分析后的结果，共 {{ dataCount }} 条
+          </template>
+          <template v-else>
+            按维度「{{ dimensionLabel }}」聚合后的结果，共 {{ dataCount }} 条
+          </template>
         </div>
-      </template>
+      </div> -->
 
-      <!-- 交叉统计表格 -->
-      <template v-else>
-        <div class="cross-table-container">
-          <table class="cross-pivot-table">
-            <thead>
-              <!-- 主表头行 -->
-              <tr class="cross-header-row">
-                <!-- 显示第一个维度列 -->
-                <th class="cross-dimension-header">
-                  {{ crossTableColumns.find((c) => c.type === 'dimension')?.title }}
-                </th>
-                <!-- 指标列 -->
-                <th
-                  v-for="col in crossTableColumns.filter((c) => c.type === 'metric')"
-                  :key="'header-' + col.key"
-                  class="cross-metric-header"
-                >
-                  {{ col.title }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(row, index) in tableData" :key="index" class="cross-data-row">
-                <!-- 第一个维度值 -->
-                <td class="cross-dimension-cell">
-                  {{ row[crossTableColumns.find((c) => c.type === 'dimension')?.key] }}
-                </td>
-                <!-- 指标列 -->
-                <td
-                  v-for="col in crossTableColumns.filter((c) => c.type === 'metric')"
-                  :key="'cell-' + row._groupKey + '-' + col.key"
-                  class="cross-metric-cell"
-                >
-                  <span v-if="col.aggregateType === 'count'" class="cross-metric-count"
-                    >{{ formatCount(row._groupCount) }} 笔</span
-                  >
-                  <span v-else class="cross-metric-value">{{ formatNumber(row[col.key]) }}</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </template>
+      <!-- 表格容器 -->
+      <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">
@@ -165,6 +165,16 @@ export default {
       type: Boolean,
       default: false
     },
+    // 行维度标签（交叉统计用）
+    rowDimensionLabel: {
+      type: String,
+      default: ''
+    },
+    // 列维度标签（交叉统计用）
+    columnDimensionLabel: {
+      type: String,
+      default: ''
+    },
     // 表格列定义
     tableColumns: {
       type: Array,
@@ -211,6 +221,67 @@ export default {
       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) {
@@ -257,6 +328,13 @@ export default {
     // 关闭下拉菜单（供外部调用）
     closeDropdown() {
       this.showPageSizeDropdown = false
+    },
+
+    // 刷新表格（供外部调用）
+    refreshTable() {
+      if (this.$refs.vxeTable) {
+        this.$refs.vxeTable.refreshColumn()
+      }
     }
   }
 }