n20-common-lib 3.1.4 → 3.1.5

package/src/components/AdvancedFilter/index.vue

@@ -110,11 +110,11 @@
 // 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, getOptionsMap, setOptionsMap } from './utils'
-import ClDialog from '../Dialog/index.vue'
+import { getOnlyKey } from './utils'
 
 const prefixCls = 'n20-advanced-filter'
 export default {
@@ -194,7 +194,8 @@ export default {
         pageNo: this.filterId,
         name: ''
       },
-      stVisible: false
+      stVisible: false,
+      optionsMap: {}
     }
   },
   computed: {
@@ -247,6 +248,9 @@ export default {
     this.getFilterList()
     this.getDefaultCheck()
   },
+  beforeDestroy() {
+    this.optionsMap = {}
+  },
   methods: {
     // 保存视图
     saveSt() {
@@ -295,7 +299,7 @@ export default {
       return getOnlyKey(this.onlyKey, data)
     },
     setOptions(id, opts) {
-      setOptionsMap(id, opts)
+      this.optionsMap[id] = opts
       this.setChoices(id, opts)
     },
     setChoices(id, data) {
@@ -333,6 +337,11 @@ export default {
       return hasValue(this.model[item.value]) ? this.prefixCls + '-active' : ''
     },
     handleClose(item) {
+      const key = item[this.onlyKey] || item.value
+      if (this.optionsMap[key]) {
+        delete this.optionsMap[key]
+      }
+
       switch (item.type) {
         case 'select':
           this.$set(this.model, item.value, item.multiple ? [] : null)
@@ -359,12 +368,18 @@ export default {
           break
         case 'daterange':
         case 'datetimerange':
-        case ' monthrange':
+        case 'monthrange':
           this.$set(this.model, item.startDate, null)
           this.$set(this.model, item.endDate, null)
           break
         case 'slot': {
           this.$set(this.model, item.value, null)
+          // 清空 slotFields 中定义的所有字段
+          if (item.slotFields?.length) {
+            item.slotFields.forEach((field) => {
+              this.$set(this.model, field, null)
+            })
+          }
           break
         }
       }
@@ -384,15 +399,28 @@ export default {
     setModelData(list) {
       let arr = []
       list.forEach((res) => {
+        // 收集普通字段的 value
         if (res.value) {
           arr.push(res.value)
-        } else if (res.startDate && res.endDate) {
+        }
+        // 收集日期范围类型的字段
+        if (res.startDate && res.endDate) {
           arr.push(res.startDate)
           arr.push(res.endDate)
-        } else if (res.startValue && res.endValue) {
+        }
+        // 收集数字范围类型的字段
+        if (res.startValue && res.endValue) {
           arr.push(res.startValue)
           arr.push(res.endValue)
         }
+        // 收集插槽类型可能的自定义字段（slotFields 数组）
+        if (res.type === 'slot' && Array.isArray(res?.slotFields)) {
+          res?.slotFields.forEach((field) => {
+            if (field && !arr.includes(field)) {
+              arr.push(field)
+            }
+          })
+        }
       })
       for (const key in this.model) {
         if (Object.hasOwnProperty.call(this.model, key)) {
@@ -523,9 +551,9 @@ export default {
           this.mackData(_data)
         })
         .finally(() => {
-          for (const key in getOptionsMap()) {
-            if (Object.hasOwnProperty.call(getOptionsMap(), key)) {
-              const data = getOptionsMap()[key]
+          for (const key in this.optionsMap) {
+            if (Object.hasOwnProperty.call(this.optionsMap, key)) {
+              const data = this.optionsMap[key]
               this.setChoices(key, data)
             }
           }

package/src/components/AdvancedFilter/utils.js

@@ -1,10 +1,2 @@
 export const getOnlyKey = (key, data) =>
   key ? data[key] : Date.now().toString(36) + Math.random().toString(36).slice(2, 7)
-let options = {}
-export const setOptionsMap = (key, value) => {
-  options[key] = value
-}
-
-export const getOptionsMap = () => {
-  return options
-}

package/src/components/Pivot/CLAUDE.md

@@ -0,0 +1,117 @@
+# Pivot 数据透视组件
+
+## 组件作用描述
+
+Pivot 是一个基于 Vue 2.6 和 vxe-table 的数据透视组件，通过 Dialog 弹窗呈现。核心功能是将外部传入的表格数据进行多维度聚合分析，支持分组统计和交叉统计两种模式，可视化方式包括图表视图和表格视图。
+
+## 依赖说明
+
+| 依赖       | 版本 | 用途                           |
+| ---------- | ---- | ------------------------------ |
+| vxe-table  | \*   | 表格核心，支持大数据虚拟滚动   |
+| xe-utils   | \*   | vxe-table 工具库，数据聚合计算 |
+| echarts    | \*   | 图表渲染（仅分组统计模式可用） |
+| Dialog     | 内置 | 弹窗容器                       |
+| ViewToggle | 内置 | 视图切换控件                   |
+
+## Props 接口
+
+```typescript
+{
+  visible: Boolean // 控制弹窗显示，默认 false
+  dataSource: Array // 数据源，外部传入的原始表格数据
+  columns: Array // 列定义，格式: { key, label, type }
+  dimensionsField: Array // 维度字段，未指定默认columns中string类型的字段
+  metricsField: Array // 聚合计算字段，未指定默认columns中number类型的字段
+}
+```
+
+### columns 列定义
+
+```javascript
+// 维度字段 typeof dataSource[index].region  === 'string'
+{ prop: 'region', label: '地区' }
+// 指标字段 typeof dataSource[index].amount  === 'number'
+{ prop: 'amount', label: '金额' }
+```
+
+> 分组维度 (dimensions) 和计算指标 (metrics) 的可选项由外部通过 `columns` 配置传入，组件根据 dataSource 数据源中对应的 columns 中的 prop 自动区分：
+>
+> - `'string' | 'date'` → 作为维度字段
+> - `'number'` → 作为指标字段（支持聚合）
+
+## 核心功能
+
+### 1. 统计模式
+
+| 模式             | 说明                             | 可视化              |
+| ---------------- | -------------------------------- | ------------------- |
+| 分组统计 (group) | 按维度字段分组，聚合计算每个指标 | 图表视图 + 表格视图 |
+| 交叉统计 (cross) | 行列交叉分析                     | 仅表格视图          |
+
+### 2. 聚合方式
+
+每项指标支持独立设置聚合类型：
+
+| 类型  | 说明   |
+| ----- | ------ |
+| sum   | 求和   |
+| count | 计数   |
+| avg   | 平均值 |
+| max   | 最大值 |
+| min   | 最小值 |
+
+### 3. 图表类型（仅分组统计模式）
+
+- 柱状图
+- 折线图
+- 饼图
+- 条形图
+
+> 交叉统计模式仅支持表格展示，不渲染图表。
+
+### 4. 多报表管理
+
+- 新建报表
+- 重命名报表
+- 删除报表
+- 报表配置本地持久化 (localStorage)
+
+## 布局结构
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│                         Dialog                                │
+│                       width: 1360px (固定)                    │
+├──────────────┬─────────────────────────────┬─────────────────┤
+│  左侧边栏     │         主内容区域           │   右侧边栏       │
+│  280px       │         flex: 1            │   280px         │
+│              │                             │                 │
+│ 我的报表清单   │ 工具栏 (标题/统计信息)      │ 维度配置          │
+│ - 报表1      ├─────────────────────────────┤                 │
+│ - 报表2      │                             │ 报表标题         │
+│ - 报表3      │ 图表视图 / 表格视图          │ 统计类型         │
+│              │                             │ 展示形式         │
+│              │                             │ 分组维度         │
+│              │                             │ 计算指标         │
+└──────────────┴─────────────────────────────┴─────────────────┘
+```
+
+## 开发进度
+
+| 功能       | 状态            | 说明                       |
+| ---------- | --------------- | -------------------------- |
+| 分组统计   | ✅ 完成，待优化 | 支持图表和表格双视图       |
+| 交叉统计   | ✅ 完成，待优化 | 仅表格视图，无图表         |
+| 图表渲染   | ✅ 完成，待优化 | echarts 实现，分组模式可用 |
+| 虚拟滚动   | ⬜ 待实现       | 依赖 vxe-table，大数据优化 |
+| 指标聚合   | ✅ 完成，待优化 | 支持每指标独立设置聚合类型 |
+| 多报表管理 | ✅ 完成，待优化 | CRUD + localStorage 持久化 |
+| 分页       | ✅ 完成，待优化 | 表格统计支持               |
+
+## 注意事项
+
+1. **组件宽度固定为 1360px**，不接受动态调整
+2. **dimensions 和 metrics 由外部传入**，如未配置，组件根据 columns 配置自动派生可用选项
+3. **交叉统计模式不渲染图表**，切换到该模式时会自动切换为表格视图
+4. **虚拟滚动待实现**，当前版本在大数据量场景下可能存在性能问题

package/src/components/Pivot/ChartView.vue

@@ -0,0 +1,109 @@
+<template>
+  <!-- 图表视图 -->
+  <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>
+    <div v-else class="empty-state">
+      <Empty type="noData2" :height="200" :width="200" content="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Empty from '../Empty/index.vue'
+import importG from '../../utils/importGlobal.js'
+
+export default {
+  name: 'ChartView',
+  components: {
+    Empty
+  },
+  props: {
+    // 是否有数据
+    hasData: {
+      type: Boolean,
+      default: false
+    },
+    // 数据条数
+    dataCount: {
+      type: Number,
+      default: 0
+    },
+    // 维度标签
+    dimensionLabel: {
+      type: String,
+      default: ''
+    },
+    // 单位标签
+    unitLabel: {
+      type: String,
+      default: ''
+    },
+    // 图表配置
+    chartOption: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chartInstance: null
+    }
+  },
+  watch: {
+    // 监听图表配置变化
+    chartOption: {
+      deep: true,
+      handler() {
+        if (this.chartInstance) {
+          this.chartInstance.setOption(this.chartOption, true)
+        }
+      }
+    }
+  },
+  methods: {
+    // 初始化图表
+    async initChart() {
+      if (!this.$refs.chartContainer) return
+      if (!this.hasData) return
+
+      const echarts = await importG('echarts', () => import(/*webpackChunkName "echarts"*/ 'echarts'))
+
+      if (!this.chartInstance) {
+        this.chartInstance = echarts.init(this.$refs.chartContainer)
+      }
+
+      if (this.chartOption) {
+        this.chartInstance.setOption(this.chartOption, true)
+      }
+    },
+
+    // 调整图表大小
+    resizeChart() {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    },
+
+    // 销毁图表
+    destroyChart() {
+      if (this.chartInstance) {
+        this.chartInstance.dispose()
+        this.chartInstance = null
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    this.destroyChart()
+  }
+}
+</script>