n20-common-lib 3.1.21 → 3.2.0

package/package.json

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

package/src/components/AdvancedFilter/index.vue

@@ -171,6 +171,12 @@ export default {
     bussId: {
       type: String,
       default: ''
+    },
+    // 开启后，自动把 filterList 中有非空值但不在 GroupData 的项追加到可见列表
+    // 默认 false —— 完全向后兼容，仅在 ProFilterView 透传或业务方显式开启时生效
+    autoShowActiveFilters: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -288,6 +294,65 @@ export default {
     this.optionsMap = {}
   },
   methods: {
+    /**
+     * 判断某个 filterList 项在当前 model 中是否有非空值
+     * 支持 daterange / datetimerange / monthrange / numberrange / slotFields / value 四种形态
+     * 非空定义与 activeClassMap 内 hasValue 一致：null/undefined/''/空数组 均为空
+     * @param {Object} item - filterList 中的某一项
+     * @returns {boolean}
+     */
+    isFilterActive(item) {
+      const hasValue = (val) => {
+        if (Array.isArray(val)) return val.length > 0
+        return val !== null && val !== undefined && val !== ''
+      }
+      // 区间型字段：起止任一非空即视为有值
+      const rangeTypes = ['daterange', 'datetimerange', 'monthrange']
+      if (rangeTypes.includes(item.type)) {
+        return hasValue(this.model[item.startDate]) || hasValue(this.model[item.endDate])
+      }
+      // 数值区间
+      if (item.type === 'numberrange') {
+        return hasValue(this.model[item.startValue]) || hasValue(this.model[item.endValue])
+      }
+      // slot 多值绑定：slotFields 中任一字段非空即视为有值
+      if (item.slotFields && item.slotFields.length) {
+        return item.slotFields.some((field) => hasValue(this.model[field]))
+      }
+      // 默认单值字段
+      if (item.value) {
+        return hasValue(this.model[item.value])
+      }
+      return false
+    },
+    /**
+     * 当 autoShowActiveFilters 开启时，自动把 filterList 中有非空值但不在 GroupData
+     * （用户隐藏的列表）的项追加到可见列表，并同步 checkList
+     * - 跳过 static 项（由 mackData 单独处理）
+     * - 跳过已存在于 GroupData 的项
+     * - 以 { ...item } 浅拷贝追加，避免外部 filterList 引用被改
+     */
+    ensureActiveFiltersVisible() {
+      if (!this.autoShowActiveFilters) return
+
+      // 当前 GroupData 中已有的 id 集合
+      const existingIds = new Set(this.GroupData.map((item) => item[this.onlyKey]))
+
+      // 筛选出：有值 & 不在 GroupData & 非 static 的项
+      const missingActiveItems = this.filterList.filter((item) => {
+        if (existingIds.has(item[this.onlyKey])) return false
+        if (item.static) return false
+        return this.isFilterActive(item)
+      })
+
+      if (missingActiveItems.length > 0) {
+        // 浅拷贝追加到 GroupData 末尾
+        const newItems = missingActiveItems.map((item) => ({ ...item }))
+        this.GroupData = [...this.GroupData, ...newItems]
+        // 同步 checkList（按 onlyKey 取值）
+        this.checkList = this.GroupData.map((res) => res[this.onlyKey])
+      }
+    },
     // 保存视图
     saveSt() {
       this.$refs.stform.validate(async (valid) => {
@@ -673,6 +738,10 @@ export default {
       })
 
       console.log(this.filterList)
+
+      // 双保险：在 mackData 末尾兜底执行一次可见性追加
+      // 覆盖"接口异步返回隐藏列表后再次渲染"的场景，与 ProFilterView.$nextTick 调用形成双钩子
+      this.ensureActiveFiltersVisible()
     }
   }
 }

package/src/components/DynamicField/DynamicFormView.vue

@@ -0,0 +1,248 @@
+<template>
+  <cl-page class="CustomFormView">
+    <slot name="top"></slot>
+    <cl-expandable-pane v-for="(item, index) in formOptions" :key="index" :title="item.tabName">
+      <template v-if="item.slotName">
+        <slot :name="item.slotName"></slot>
+      </template>
+      <cl-descriptions>
+        <template v-for="(formItem, key) in item.list">
+          <!-- 字段标识：数组模式用 formItem.key，对象模式用 v-for 的 key -->
+          <el-descriptions-item v-if="formItem.type" :key="formItem.key || key" :label="$l(formItem.label)">
+            <template slot="label">
+              {{ formItem.label }}
+            </template>
+            <!-- 插槽 -->
+            <template v-if="formItem.type === 'slot'">
+              <div>
+                <slot :name="formItem.key || key"></slot>
+              </div>
+            </template>
+            <!-- 期限 -->
+            <template v-else-if="(formItem.key || key) === 'contractDTO_loanTerm' && formItem.type === 'input'">
+              <cl-diff
+                v-if="diff"
+                :value="`${formValue['contractDTO_loanTerm']} ${
+                  formValue['contractDTO_termUnit'] === 'DAY'
+                    ? $l('天')
+                    : formValue['contractDTO_termUnit'] === 'MONTH'
+                    ? $l('月')
+                    : formValue['contractDTO_termUnit'] === 'YEAR'
+                    ? $l('年')
+                    : ''
+                }`"
+                :old-value="`${oldFormValue['contractDTO_loanTerm']} ${
+                  oldFormValue['contractDTO_termUnit'] === 'DAY'
+                    ? $l('天')
+                    : oldFormValue['contractDTO_termUnit'] === 'MONTH'
+                    ? $l('月')
+                    : oldFormValue['contractDTO_termUnit'] === 'YEAR'
+                    ? $l('年')
+                    : ''
+                }`"
+                :tooltip="true"
+              />
+              <div v-else>
+                {{ formValue['contractDTO_loanTerm'] }}
+                {{
+                  formValue['contractDTO_termUnit'] === 'DAY'
+                    ? $l('天')
+                    : formValue['contractDTO_termUnit'] === 'MONTH'
+                    ? $l('月')
+                    : formValue['contractDTO_termUnit'] === 'YEAR'
+                    ? $l('年')
+                    : ''
+                }}
+              </div>
+            </template>
+            <!-- 结构化/费用编号 -->
+            <template
+              v-else-if="
+                $l(formItem.label) === $l('是否结构化') ||
+                ((formItem.key || key) === 'exInfoDTO_feeNo' && (formItem.key || key) !== 'mainFeeCurrencyCode')
+              "
+            >
+              <cl-diff
+                v-if="diff"
+                :value="(formValue[formItem.key || key] && formValue[formItem.key || key].name) || '--'"
+                :old-value="(oldFormValue[formItem.key || key] && oldFormValue[formItem.key || key].name) || '--'"
+                :tooltip="true"
+              />
+              <div v-else>{{ (formValue[formItem.key || key] && formValue[formItem.key || key].name) || '--' }}</div>
+            </template>
+            <!-- 地区信息 -->
+            <template v-else-if="(formItem.key || key) === 'recInfoDTO_areaInfo'">
+              <cl-diff
+                v-if="diff"
+                :value="formValue['recInfoDTO_areaInfoName'] || '--'"
+                :old-value="oldFormValue['recInfoDTO_areaInfoName'] || '--'"
+                :tooltip="true"
+              />
+              <div v-else>{{ formValue['recInfoDTO_areaInfoName'] || '--' }}</div>
+            </template>
+            <!-- 借/贷方 -->
+            <template v-else-if="(formItem.key || key) === 'contractDTO_debtorCode' || (formItem.key || key) === 'contractDTO_creditorCode'">
+              <cl-diff
+                v-if="diff"
+                :value="(formValue[formItem.key || key] && formValue[formItem.key || key].name) || '--'"
+                :old-value="(oldFormValue[formItem.key || key] && oldFormValue[formItem.key || key].name) || '--'"
+                :tooltip="true"
+              />
+              <div v-else>{{ (formValue[formItem.key || key] && formValue[formItem.key || key].name) || '--' }}</div>
+            </template>
+            <!-- 金额 -->
+            <template v-else-if="formItem.type === 'input-number'">
+              <div
+                v-if="
+                  [$l('利率'), $l('合同利率'), $l('利率（%）'), $l('合同利率（%）'), $l('中间价')].includes(
+                    $l(formItem.label)
+                  )
+                "
+              >
+                <cl-diff
+                  v-if="diff"
+                  :value="(formValue[formItem.key || key] && numerify(formValue[formItem.key || key], '0.000000')) || '--'"
+                  :old-value="(oldFormValue[formItem.key || key] && numerify(oldFormValue[formItem.key || key], '0.000000')) || '--'"
+                  :tooltip="true"
+                />
+                <span v-else>{{ formValue[formItem.key || key] ? numerify(formValue[formItem.key || key], '0.000000') : '--' }}</span>
+              </div>
+              <div v-else>
+                <cl-diff
+                  v-if="diff"
+                  :value="(formValue[formItem.key || key] && numerify(formValue[formItem.key || key], '0,0.00')) || '--'"
+                  :old-value="(oldFormValue[formItem.key || key] && numerify(oldFormValue[formItem.key || key], '0,0.00')) || '--'"
+                  :tooltip="true"
+                />
+                <span v-else>{{ formValue[formItem.key || key] ? numerify(formValue[formItem.key || key], '0,0.00') : '--' }}</span>
+              </div>
+            </template>
+            <!-- 来款国家（地区） -->
+            <template v-else-if="$l(formItem.label) === $l('来款国家（地区）')">
+              <cl-diff
+                v-if="diff"
+                :value="formValue['applyInfoDTO_areaInfoName'] || '--'"
+                :old-value="oldFormValue['applyInfoDTO_areaInfoName'] || '--'"
+                :tooltip="true"
+              />
+              <div v-else>{{ formValue['applyInfoDTO_areaInfoName'] || '--' }}</div>
+            </template>
+            <!-- 下拉枚举 -->
+            <template v-else-if="formItem.type === 'select'">
+              <div class="flex-box flex-v">
+                <div v-if="formValue[formItem.key || key] && formValue[formItem.key || key].name">
+                  <cl-diff
+                    v-if="diff"
+                    :value="(formValue[formItem.key || key] && formValue[formItem.key || key].name) || '--'"
+                    :old-value="(oldFormValue[formItem.key || key] && oldFormValue[formItem.key || key].name) || '--'"
+                    :tooltip="true"
+                  />
+                  <span v-else>{{ (formValue[formItem.key || key] && formValue[formItem.key || key].name) || '--' }}</span>
+                </div>
+                <div v-else-if="formItem.label === '结售汇性质'">
+                  <cl-diff
+                    v-if="diff"
+                    :value="formValue[formItem.key || key] || '--'"
+                    :old-value="oldFormValue[formItem.key || key] || '--'"
+                    :tooltip="true"
+                  />
+                  <span v-else>{{ formValue[formItem.key || key] || '--' }}</span>
+                </div>
+                <div v-else>
+                  <template v-if="diff">
+                    <cl-diff
+                      :value="getEnumName(formItem.enumList, formValue[formItem.key || key])"
+                      :old-value="getEnumName(formItem.enumList, oldFormValue[formItem.key || key])"
+                      :tooltip="true"
+                    />
+                  </template>
+                  <span v-else>{{ getEnumName(formItem.enumList, formValue[formItem.key || key]) }}</span>
+                </div>
+              </div>
+            </template>
+            <!-- 其他类型（含 text 类型，自动支持超长文本 Tooltip） -->
+            <template v-else>
+              <div>
+                <cl-diff
+                  v-if="diff"
+                  :value="formValue[formItem.key || key] || '--'"
+                  :old-value="oldFormValue[formItem.key || key] || '--'"
+                  :tooltip="true"
+                />
+                <div v-else>
+                  <el-tooltip
+                    v-if="formValue[formItem.key || key] && formValue[formItem.key || key].length > 50"
+                    class="item"
+                    effect="dark"
+                    :content="formValue[formItem.key || key]"
+                    placement="top"
+                  >
+                    <span>{{ formValue[formItem.key || key].slice(0, 50) + '...' }}</span>
+                  </el-tooltip>
+                  <span v-else>{{ formValue[formItem.key || key] || '--' }}</span>
+                </div>
+              </div>
+            </template>
+          </el-descriptions-item>
+        </template>
+      </cl-descriptions>
+    </cl-expandable-pane>
+    <slot name="bottom"></slot>
+  </cl-page>
+</template>
+
+<script>
+import numerify from 'numerify'
+
+import ClDescriptions from '../Descriptions/index.vue'
+import ClDiff from '../Diff/index.vue'
+import ClExpandablePane from '../Expandable/index.vue'
+import ClPage from '../PageLayout/page.vue'
+
+export default {
+  name: 'DynamicFormView',
+  components: { ClPage, ClExpandablePane, ClDescriptions, ClDiff },
+  props: {
+    // 表单配置
+    formOptions: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    formValue: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    diff: {
+      type: Boolean,
+      default: false
+    },
+    oldFormValue: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      numerify
+    }
+  },
+  methods: {
+    getEnumName(enumList, code) {
+      if (!enumList?.length) return
+      const enumData = Array.isArray(enumList) ? enumList : JSON.parse(enumList)
+      return enumData?.find((item) => (item.code || item.value) === code)?.name || '--'
+    }
+  }
+}
+</script>
+<style scoped>
+.CustomFormView {
+  font-size: 14px;
+}
+</style>

package/src/components/ProFilterView/index.vue

@@ -82,6 +82,7 @@
       :filter-id="filterId"
       :buss-id="bussId"
       :model="searchValue"
+      :auto-show-active-filters="autoExpandWithValues"
       only-key="id"
       :filter-list="filterList"
       v-bind="$attrs"
@@ -249,10 +250,16 @@ export default {
       type: Object,
       default: () => ({})
     },
-    // 筛选器默认展开/收起状态
+    // 筛选器默认展开/收起状态（与 data 中 filterExpanded 初始值对齐，无新功能）
     defaultExpanded: {
       type: Boolean,
       default: false
+    },
+    // 当筛选条件有非空值时，是否自动展开筛选区域
+    // 默认 false —— 完全向后兼容，业务方按页面粒度显式开启
+    autoExpandWithValues: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -346,6 +353,8 @@ export default {
 
         // 智能合并：保留用户已手动修改的值
         this.searchValue = newVal
+        // 父组件更新 initialValue 后，重新判定是否需要自动展开
+        this.checkAndAutoExpand()
       },
       deep: true,
       immediate: false
@@ -368,8 +377,57 @@ export default {
     }
     // 合并初始筛选值：slot 字段使用默认值，其他字段使用 initialValue 传入的值
     this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue }
+    // 初始挂载后根据筛选值情况决定是否自动展开
+    this.checkAndAutoExpand()
   },
   methods: {
+    /**
+     * 判断 searchValue 中是否有非空值
+     * 仅扫描 filterList 中声明的字段，忽略 searchValue 中其它无关 key
+     * 支持 daterange / numberrange / slotFields / value 四种 field 形态
+     * @returns {boolean}
+     */
+    hasActiveFilters() {
+      // 非空判定：null/undefined/''/空数组 均为空
+      const hasValue = (val) => {
+        if (Array.isArray(val)) return val.length > 0
+        return val !== null && val !== undefined && val !== ''
+      }
+
+      return this.filterList.some((item) => {
+        // 区间型字段（日期/日期时间/月份）：起止任一非空即视为有值
+        if (item.type === 'daterange' || item.type === 'datetimerange' || item.type === 'monthrange') {
+          return hasValue(this.searchValue[item.startDate]) || hasValue(this.searchValue[item.endDate])
+        }
+        // 数值区间
+        if (item.type === 'numberrange') {
+          return hasValue(this.searchValue[item.startValue]) || hasValue(this.searchValue[item.endValue])
+        }
+        // slot 多值绑定
+        if (item.slotFields && item.slotFields.length) {
+          return item.slotFields.some((field) => hasValue(this.searchValue[field]))
+        }
+        // 默认单值字段
+        if (item.value) {
+          return hasValue(this.searchValue[item.value])
+        }
+        return false
+      })
+    },
+    /**
+     * 当 autoExpandWithValues 开启且当前存在有效筛选值时，自动展开筛选区域
+     * 并在下一帧通知 AdvancedFilter 把"有值但被用户隐藏"的筛选项重新拉回可见列表
+     */
+    checkAndAutoExpand() {
+      if (!this.autoExpandWithValues) return
+      if (this.hasActiveFilters()) {
+        this.filterExpanded = true
+        // $nextTick 等 AdvancedFilter 的 mackData 把 GroupData 填充好后再追加
+        this.$nextTick(() => {
+          this.$refs.filter?.ensureActiveFiltersVisible()
+        })
+      }
+    },
     // 处理 slot 类型字段的输入事件，同时更新 searchValue 和 initialValue
     handleSlotInput(fieldName, val) {
       // 防御性检查：如果 fieldName 无效，不执行任何操作

package/src/index.js

@@ -66,6 +66,7 @@ import DragList from './components/DragList/index.vue'
 // 动态表单
 import DynamicField from './components/DynamicField/DynamicField.vue'
 import DynamicFieldOptions from './components/DynamicField/DynamicFieldOptions.vue'
+import DynamicFormView from './components/DynamicField/DynamicFormView.vue'
 import DynamicFieldTable from './components/DynamicField/DynamicTable.vue'
 import ElectronicArchive from './components/ElectronicArchive/index.vue'
 import Empty from './components/Empty/index.vue'
@@ -192,6 +193,7 @@ const components = [
   DynamicFieldTable,
   DynamicField,
   DynamicFieldOptions,
+  DynamicFormView,
   ContentLoading,
   ContentNull,
   NavMenu,