n20-common-lib 3.1.6 → 3.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.6",
+  "version": "3.1.8",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

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/page-header.scss

@@ -1,13 +1,8 @@
 .n20-page-header {
   display: flex;
   line-height: 20px;
-  padding: 12px 16px;
-
+  padding-bottom: 2px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  &__wappr {
-    display: flex;
-    flex-wrap: wrap;
-  }
 
   .page-header__left {
     display: flex;
@@ -37,23 +32,14 @@
   }
 
   .page-header__title {
-    color: var(--text-2, #4e5969);
-    /* 14/CN-Regular */
-    font-family: 'PingFang SC';
     font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 22px; /* 157.143% */
+    line-height: 20px;
+    color: #3d4a57;
   }
 
   .page-header__content {
-    color: var(--text-1, #1d2129);
-
-    /* 16/CN-Medium */
-    font-family: 'PingFang SC';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px; /* 150% */
+    font-size: 14px;
+    line-height: 20px;
+    color: #3d4a57;
   }
 }

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,17 +107,17 @@
 </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 { getOnlyKey } from './utils'
 
 import axios from '../../utils/axios.js'
 import ClDialog from '../Dialog/index.vue'
 import InputSearch from '../InputSearch/index.vue'
 
+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 {
   name: 'AdvancedFilter',
@@ -136,14 +136,6 @@ export default {
     }
   },
   props: {
-    hasSaveView: {
-      type: Boolean,
-      default: false
-    },
-    isNotClose: {
-      type: Boolean,
-      default: false
-    },
     maxLength: {
       type: Number
     },
@@ -221,6 +213,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: {
@@ -298,7 +332,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
@@ -318,29 +352,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' : ''
-      }
-      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) {
       const key = item[this.onlyKey] || item.value
       if (this.optionsMap[key]) {
@@ -437,7 +449,7 @@ export default {
         if (Object.hasOwnProperty.call(this.model, key)) {
           // 仅当该字段在 filterList 中定义且未被选中时才清除
           if (allDefinedFields.has(key) && !selectedFields.has(key)) {
-            delete this.model[key]
+            this.$delete(this.model, key)
           }
         }
       }

package/src/components/PageHeader/index.vue

@@ -1,24 +1,20 @@
 <template>
   <div class="n20-page-header">
-    <div class="n20-page-header__wappr">
-      <div v-if="!disable" class="page-header__left" @click="$emit('back')">
-        <i :class="icon"></i>
-        <div class="page-header__title">
-          <slot name="title">{{ title }}</slot>
-        </div>
-      </div>
-      <div class="page-header__content">
-        <slot name="content">{{ content }}</slot>
+    <div v-if="!disable" class="page-header__left" @click="$emit('back')">
+      <i :class="icon"></i>
+      <div class="page-header__title">
+        <slot name="title">{{ title }}</slot>
       </div>
     </div>
-    <div>
-      <slot></slot>
+    <div class="page-header__content">
+      <slot name="content">{{ content }}</slot>
     </div>
   </div>
 </template>
 
 <script>
 import { $lc } from '../../utils/i18n/index'
+
 export default {
   name: 'PageHeader',
   props: {

package/src/components/ProFilterView/index.vue

@@ -418,48 +418,49 @@ export default {
       this.$emit('filter', this.filterObj, 'clean')
     },
     handleClear() {
-      // 收集 required 项的当前值，清空时保留
+      // 收集不需要清空的字段 key（required / isNotClose / initialValue 中的额外 key）
+      const noClearKeys = new Set()
+      const allFilterKeys = new Set()
+
+      this.filterList.forEach((item) => {
+        const keys =
+          item.type === 'daterange'
+            ? [item.startDate, item.endDate]
+            : item.type === 'numberrange'
+            ? [item.startValue, item.endValue]
+            : item.slotFields?.length
+            ? item.slotFields
+            : [item.value]
+
+        keys.forEach((k) => allFilterKeys.add(k))
+        if (item.required) {
+          keys.forEach((k) => noClearKeys.add(k))
+        }
+      })
+
+      // initialValue 中不在 filterList 里的 key 也需要保留
+      Object.keys(this.initialValue).forEach((key) => {
+        if (!allFilterKeys.has(key)) {
+          noClearKeys.add(key)
+        }
+      })
+
+      // 仅保留 noClearKeys 中的值，其余清空
       const preserved = {}
-      this.filterList
-        .filter((item) => item.required)
-        .forEach((item) => {
-          // 日期范围类型
-          if (item.startDate && this.searchValue[item.startDate] !== undefined) {
-            preserved[item.startDate] = this.searchValue[item.startDate]
-          }
-          if (item.endDate && this.searchValue[item.endDate] !== undefined) {
-            preserved[item.endDate] = this.searchValue[item.endDate]
-          }
-          // 数字范围类型
-          if (item.startValue && this.searchValue[item.startValue] !== undefined) {
-            preserved[item.startValue] = this.searchValue[item.startValue]
-          }
-          if (item.endValue && this.searchValue[item.endValue] !== undefined) {
-            preserved[item.endValue] = this.searchValue[item.endValue]
-          }
-          // 普通单值
-          if (item.value && this.searchValue[item.value] !== undefined) {
-            preserved[item.value] = this.searchValue[item.value]
-          }
-          // slot 多值绑定
-          if (item.slotFields?.length) {
-            item.slotFields.forEach((field) => {
-              if (this.searchValue[field] !== undefined) {
-                preserved[field] = this.searchValue[field]
-              }
-            })
-          }
-        })
+      for (const key in this.searchValue) {
+        if (noClearKeys.has(key)) {
+          preserved[key] = this.searchValue[key]
+        }
+      }
 
-      this.searchValue = { ...this.initialValue, ...this.getInitialSearchValue, ...preserved }
-      // 直接构建 payload，绕过 filterObj 避免 initialValue 重新注入
+      this.searchValue = preserved
       this.$emit(
         'filter',
         {
           conditionGroups: this.conditionGroups,
           searchValue: { ...this.searchValue },
-          viewId: this.selectItem ? this.selectItem.viewId : null,
-          viewType: this.selectItem ? this.selectItem.viewType : null
+          viewId: this.selectItem?.viewId ?? null,
+          viewType: this.selectItem?.viewType ?? null
         },
         'clear'
       )