n20-common-lib 3.1.5 → 3.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.5",
+  "version": "3.1.7",
   "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/_coreLib.scss

@@ -50,7 +50,9 @@
 @import './page.scss';
 @import './view-toggle.scss';
 @import './pivot.scss';
+@import './dynamic-table.scss';
 @import './v3/table.scss';
 @import './v3/secondary-tab.scss';
+
 //临时引入
 @import '../../components/ChildRange/style.scss';

package/src/assets/css/dynamic-table.scss

@@ -0,0 +1,6 @@
+.dynamic-table-pro {
+  .el-form-item,
+  .el-form-item--small.el-form-item {
+    margin-bottom: 0;
+  }
+}

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/formItemRender.vue

@@ -8,7 +8,7 @@ import inputNumber from '../InputNumber/index.vue'
 import InputNumberRange from '../InputNumber/numberRange.vue'
 import selectTree from '../SelectTree/index.vue'
 import selectTreePro from '../SelectTree/pro.vue'
-import { setOptionsMap } from './utils.js'
+
 const canvas = document.createElement('canvas')
 const context = canvas.getContext('2d')
 context.font = '14px Ping Fang SC'
@@ -83,7 +83,6 @@ export default {
         resKeys.forEach((key) => {
           list = list[key]
         })
-        setOptionsMap(this.item.id, list)
         this.$set(this.item, 'options', list)
         // 同步更新 filterList 中的 options，确保两者一致，
         // 防止 AdvancedFilter 的 filterList watcher 用旧数据覆盖 reqOptions 结果

package/src/components/AdvancedFilter/index.vue

@@ -5,7 +5,7 @@
       <el-form-item
         v-for="item in GroupData"
         :key="getOnlyKey(item)"
-        :class="[prefixCls + '-item', activeClass(item)]"
+        :class="[prefixCls + '-item', activeClassMap[item.value || item[onlyKey]] || '']"
         :label="item.label"
         :required="!!item.required"
         :disabled="item.props && item.props.disabled"
@@ -107,14 +107,16 @@
 </template>
 
 <script>
-// import formItemInput from './form-item-input.vue'
 import XEUtils from 'xe-utils'
+
+import filterItem from './filterItem.vue'
+import formItemRender from './formItemRender.vue'
+
 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'
+
+const getOnlyKeys = (key, data) => (key ? data[key] : Date.now().toString(36) + Math.random().toString(36).slice(2, 7))
 
 const prefixCls = 'n20-advanced-filter'
 export default {
@@ -219,6 +221,48 @@ export default {
 
       const nonFixedItemIds = nonFixedItems.map((item) => item[this.onlyKey])
       return nonFixedItemIds.every((id) => this.checkList.includes(id))
+    },
+    // 通过深度遍历 model 所有属性触发 getter，建立完整响应式依赖
+    // 同时收集对象级 __ob__.dep，确保 $set 新增属性时也能触发重算
+    _modelValues() {
+      const model = this.model
+      // 遍历所有自有属性触发 getter（收集属性级 dep）
+      // Object.keys 在 Vue 2 内部会触发对象级 dep 收集
+      const keys = Object.keys(model)
+      const values = []
+      for (let i = 0; i < keys.length; i++) {
+        values.push(model[keys[i]])
+      }
+      return values
+    },
+    activeClassMap() {
+      // 访问 _modelValues 建立深度依赖，确保 model 任何值变化都能触发重算
+      void this._modelValues
+
+      const model = this.model
+      const hasValue = (val) => {
+        if (Array.isArray(val)) return val.length > 0
+        return val !== null && val !== undefined && val !== ''
+      }
+      const hasRange = (start, end) => hasValue(model[start]) && hasValue(model[end])
+      const rangeTypes = ['daterange', 'datetimerange', 'monthrange']
+
+      const map = {}
+      this.GroupData.forEach((item) => {
+        const key = item.value || item[this.onlyKey]
+        let isActive = false
+        if (item.type === 'numberrange') {
+          isActive = hasRange(item.startValue, item.endValue)
+        } else if (rangeTypes.includes(item.type)) {
+          isActive = hasRange(item.startDate, item.endDate)
+        } else if (item.slotFields && item.slotFields.length > 0) {
+          isActive = item.slotFields.some((field) => hasValue(model[field]))
+        } else {
+          isActive = hasValue(model[item.value])
+        }
+        map[key] = isActive ? this.prefixCls + '-active' : ''
+      })
+      return map
     }
   },
   watch: {
@@ -296,7 +340,7 @@ export default {
       this.defineCheckList = XEUtils.clone(_checkList, true)
     },
     getOnlyKey(data) {
-      return getOnlyKey(this.onlyKey, data)
+      return getOnlyKeys(this.onlyKey, data)
     },
     setOptions(id, opts) {
       this.optionsMap[id] = opts
@@ -316,26 +360,7 @@ export default {
     filter() {
       return this.model
     },
-    activeClass(item) {
-      // 判断值是否有效（非空）
-      const hasValue = (val) => {
-        if (Array.isArray(val)) return val.length > 0
-        return val !== null && val !== undefined && val !== ''
-      }
-
-      // 判断范围类型是否有效（起止值都存在）
-      const hasRange = (start, end) => hasValue(this.model[start]) && hasValue(this.model[end])
 
-      const rangeTypes = ['daterange', 'datetimerange', 'monthrange']
-
-      if (item.type === 'numberrange') {
-        return hasRange(item.startValue, item.endValue) ? this.prefixCls + '-active' : ''
-      }
-      if (rangeTypes.includes(item.type)) {
-        return hasRange(item.startDate, item.endDate) ? this.prefixCls + '-active' : ''
-      }
-      return hasValue(this.model[item.value]) ? this.prefixCls + '-active' : ''
-    },
     handleClose(item) {
       const key = item[this.onlyKey] || item.value
       if (this.optionsMap[key]) {
@@ -397,35 +422,42 @@ 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)) {
-            delete this.model[key]
+          // 仅当该字段在 filterList 中定义且未被选中时才清除
+          if (allDefinedFields.has(key) && !selectedFields.has(key)) {
+            this.$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>