n20-common-lib 3.2.4 → 3.2.6

package/src/components/DynamicField/DynamicFieldMixin.js

@@ -4,43 +4,94 @@ const obj = {
     this.setRules()
   },
   data() {
-    return {}
+    return {
+      // batch 批处理内部标志：withBatch 包裹期间 _batchDepth>0，
+      // 期间 setType 的 requiredFlag 变更只标记 dirty，不立即 setRules，由批次末尾合并触发一次
+      _batchDepth: 0,
+      _batchRulesDirty: false
+    }
   },
   methods: {
+    // 批处理包裹器：可重入。一次用户动作（如 valueChange/setView）内连续多次 setType，
+    // 合并成末尾一次 setRules，避免 O(全表) rules 重建风暴。批次外（含异步逸出的 setType）保持原即时语义。
+    withBatch(fn) {
+      this._batchDepth++
+      try {
+        return fn()
+      } finally {
+        this._batchDepth--
+        if (this._batchDepth === 0 && this._batchRulesDirty) {
+          this._batchRulesDirty = false
+          this.setRules()
+        }
+      }
+    },
     // 对相关方法进行设置
     setType(name, value) {
       this.form.forEach((item) => {
+        for (const key in item.list) {
+          if (item.list && item.list[key].type === 'group-container') {
+            const index = item.list[key].fields.findIndex((id) => {
+              return id.fieldCode === name
+            })
+            if (index !== -1) {
+              item.list[key].fields[index] = { ...item.list[key].fields[index], ...value }
+              return false
+            }
+          }
+        }
         if (item.list && item.list[name]) {
-          console.log(value)
           item.list[name] = { ...item.list[name], ...value }
-          console.log(item.list[name])
         }
       })
-      // 更新rules
+      // 更新rules：批次内只标记 dirty，批次外立即触发
       if (value.hasOwnProperty('requiredFlag')) {
-        this.setRules()
+        if (this._batchDepth > 0) {
+          this._batchRulesDirty = true
+        } else {
+          this.setRules()
+        }
       }
     },
     // 生成校验rules
     setRules() {
       const rules = {}
       this.form.forEach((item) => {
+        let msg = ''
         for (const key in item.list) {
-          let msg = ''
-          if (item.list[key].requiredMessage) {
-            msg = item.list[key].requiredMessage
-          } else if (['select', 'date-picker', 'searchSelect', 'daterange'].includes(item.list[key].type)) {
-            msg = $lc('请选择') + item.list[key].label
+          if (item.list && item.list[key].type === 'group-container') {
+            item.list[key].fields.forEach((item2) => {
+              if (item2.requiredMessage) {
+                msg = item2.requiredMessage
+              } else if (['select', 'date-picker', 'searchSelect', 'daterange'].includes(item2.type)) {
+                msg = $lc('请选择') + item2.label
+              } else {
+                msg = $lc('请输入') + item2.label
+              }
+              rules[item2.fieldCode] = [
+                {
+                  required: item2.requiredFlag && item2.type,
+                  message: msg,
+                  trigger: ['submit', 'change']
+                }
+              ]
+            })
           } else {
-            msg = $lc('请输入') + item.list[key].label
-          }
-          rules[key] = [
-            {
-              required: item.list[key].requiredFlag && item.list[key].type,
-              message: msg,
-              trigger: ['submit', 'change']
+            if (item.list[key].requiredMessage) {
+              msg = item.list[key].requiredMessage
+            } else if (['select', 'date-picker', 'searchSelect', 'daterange'].includes(item.list[key].type)) {
+              msg = $lc('请选择') + item.list[key].label
+            } else {
+              msg = $lc('请输入') + item.list[key].label
             }
-          ]
+            rules[key] = [
+              {
+                required: item.list[key].requiredFlag && item.list[key].type,
+                message: msg,
+                trigger: ['submit', 'change']
+              }
+            ]
+          }
         }
       })
       this.rules = { ...rules, ...this.staticRules }

package/src/components/DynamicField/DynamicFormView.vue

@@ -81,7 +81,12 @@
               <div v-else>{{ formValue['recInfoDTO_areaInfoName'] || '--' }}</div>
             </template>
             <!-- 借/贷方 -->
-            <template v-else-if="(formItem.key || key) === 'contractDTO_debtorCode' || (formItem.key || key) === 'contractDTO_creditorCode'">
+            <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) || '--'"
@@ -101,20 +106,33 @@
               >
                 <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')) || '--'"
+                  :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>
+                <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')) || '--'"
+                  :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>
+                <span v-else>{{
+                  formValue[formItem.key || key] ? numerify(formValue[formItem.key || key], '0,0.00') : '--'
+                }}</span>
               </div>
             </template>
             <!-- 来款国家（地区） -->
@@ -137,7 +155,9 @@
                     :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>
+                  <span v-else>{{
+                    (formValue[formItem.key || key] && formValue[formItem.key || key].name) || '--'
+                  }}</span>
                 </div>
                 <div v-else-if="formItem.label === '结售汇性质'">
                   <cl-diff
@@ -241,8 +261,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-.CustomFormView {
-  font-size: 14px;
-}
-</style>

package/src/components/DynamicField/contentPop.vue

@@ -103,8 +103,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-.contentPop {
-  font-size: 14px;
-}
-</style>

package/src/components/DynamicField/tableView.vue

@@ -136,8 +136,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-.contentPop {
-  font-size: 14px;
-}
-</style>

package/src/components/FileUploadTable/index.vue

@@ -25,6 +25,7 @@
       </div>
     </div>
     <el-table
+      ref="elTable"
       :key="tableKey"
       :data="tableData"
       :row-key="keys.rowKey"
@@ -35,6 +36,11 @@
       <slot name="selection-column">
         <el-table-column type="selection" width="50" align="center" />
       </slot>
+      <el-table-column :label="'排序' | $lc" width="50" align="center">
+        <template slot-scope="{ row }">
+          <i class="n20-icon-tuodong file-upload-table__drag-handle" :data-row-key="row[keys.rowKey]"></i>
+        </template>
+      </el-table-column>
       <template v-if="dataPorp.slotHeader">
         <el-table-column
           v-for="item in dataPorp.slotHeader"
@@ -316,6 +322,7 @@ import aiCheckDialog from './aiCheckDialog.vue'
 import getJsonc from '../../assets/getJsonc.js'
 import _axios from 'axios'
 import dayjs from 'dayjs'
+import Sortable from 'sortablejs'
 import XEUtils from 'xe-utils'
 
 import 'viewerjs/dist/viewer.css'
@@ -495,7 +502,8 @@ export default {
       previewName: undefined,
       previewSameOrg: false,
       seeRow: {},
-      officeStatus: false
+      officeStatus: false,
+      sortable: null
     }
   },
   computed: {
@@ -538,12 +546,81 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    tableKey() {
+      this.initSortable()
     }
   },
   mounted() {
     this.getConfiguration()
+    this.initSortable()
+  },
+  beforeDestroy() {
+    this.destroySortable()
   },
   methods: {
+    initSortable() {
+      this.$nextTick(() => {
+        this.destroySortable()
+
+        const $tbody = this.$refs.elTable?.$el?.querySelector('.el-table__body-wrapper > table > tbody')
+        if (!$tbody) {
+          return
+        }
+
+        this.sortable = Sortable.create($tbody, {
+          handle: '.file-upload-table__drag-handle',
+          ghostClass: 'file-upload-table__sortable-ghost',
+          setData(dataTransfer) {
+            dataTransfer.setData('Text', '')
+          },
+          onEnd: ({ oldIndex, newIndex }) => {
+            if (
+              oldIndex === newIndex ||
+              oldIndex === undefined ||
+              newIndex === undefined ||
+              oldIndex < 0 ||
+              newIndex < 0
+            ) {
+              return
+            }
+
+            const targetRow = this.tableData.splice(oldIndex, 1)[0]
+            if (!targetRow) {
+              return
+            }
+            this.tableData.splice(newIndex, 0, targetRow)
+            this.$emit('sort', this.tableData.slice())
+            this.saveFileSort().catch(() => {
+              this.$message.error($lc('附件排序保存失败'))
+            })
+          }
+        })
+      })
+    },
+    destroySortable() {
+      if (this.sortable) {
+        this.sortable.destroy()
+        this.sortable = null
+      }
+    },
+    async saveFileSort() {
+      const sortList = this.tableData
+        .map((row, index) => ({
+          beid: row.beid || row[this.keys.rowKey],
+          fileSort: String(index + 1)
+        }))
+        .filter((item) => item.beid)
+
+      if (!sortList.length) {
+        return
+      }
+
+      await axios.post(
+        this.apiPrefix ? `${this.apiPrefix}/neams/eamsbaserecord/fileSort` : '/neams/eamsbaserecord/fileSort',
+        sortList
+      )
+    },
     // ai校验取消
     aiCheckCancel(beid) {
       this.tableData.forEach((item) => {
@@ -999,4 +1076,21 @@ export default {
   right: 46px;
   top: 10px;
 }
+
+.file-upload-table__drag-handle {
+  display: inline-block;
+  color: #909399;
+  font-size: 16px;
+  cursor: move;
+}
+
+.file-upload-table__drag-handle:hover {
+  color: #606266;
+}
+
+.file-upload-table__sortable-ghost {
+  opacity: 0.8;
+  color: #fff !important;
+  background: #42b983 !important;
+}
 </style>

package/src/components/InfoCard/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="info-card" :style="{ backgroundColor: backgroundColor }">
+    <!-- 右下角装饰logo -->
+    <img v-if="cornerLogo" v-show="isExpanded" :src="cornerLogo" class="corner-logo" alt="corner logo" />
+
+    <!-- 顶部标题区域 -->
+    <div class="info-card-header">
+      <div class="header-left">
+        <img v-if="logo" :src="logo" class="header-logo" alt="logo" />
+        <i v-if="icon" :class="icon"></i>
+        <span class="header-title">{{ title }}</span>
+      </div>
+
+      <!-- 右上角展开/收起按钮 -->
+      <div v-if="collapsible" class="header-right" @click="toggleCollapse">
+        <span class="collapse-text">{{ isExpanded ? $lc('收起') : $lc('展开') }}</span>
+        <i class="collapse-arrow" :class="{ expanded: isExpanded }"></i>
+      </div>
+    </div>
+
+    <!-- 表单内容插槽 -->
+    <transition name="collapse">
+      <div v-show="isExpanded || !collapsible" class="info-card-content">
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoCard',
+  props: {
+    // icon
+    icon: {
+      type: String,
+      default: ''
+    },
+    // 顶部图标
+    logo: {
+      type: String,
+      default: ''
+    },
+    // 标题文本
+    title: {
+      type: String,
+      default: '',
+      required: true
+    },
+    // 背景色
+    backgroundColor: {
+      type: String,
+      default: '#e8f7ff'
+    },
+    // 右下角装饰logo
+    cornerLogo: {
+      type: String,
+      default: ''
+    },
+    // 是否可折叠
+    collapsible: {
+      type: Boolean,
+      default: false
+    },
+    // 默认是否展开
+    defaultExpanded: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isExpanded: this.defaultExpanded
+    }
+  },
+  methods: {
+    toggleCollapse() {
+      this.isExpanded = !this.isExpanded
+      this.$emit('collapse-change', this.isExpanded)
+    }
+  }
+}
+</script>

package/src/components/Pivot/index.vue

@@ -1540,8 +1540,4 @@ export default {
     }
   }
 }
-</script>
-
-<style lang="scss">
-@import '../../assets/css/pivot.scss';
-</style>
+</script>

package/src/components/ProFilterView/advancedQuery.vue

@@ -618,7 +618,7 @@ export default {
     },
     // 更新操作符对应的值
     updateOperatorOptions(field, condition) {
-      if (condition.valueType === 'slot') return
+      // if (condition.valueType === 'slot') return
       this.$set(condition, 'valueType', field.type)
       this.$set(condition, 'value', '')
       if (field.type === 'dateRangePicker' || field.type === 'inputNumberRange') {

package/src/components/ViewToggle/index.vue

@@ -48,7 +48,9 @@ export default {
   data() {
     return {
       // 自适应模式下指示器的测量数据
-      measuredIndicator: { width: 0, height: 0, translateX: 0 }
+      measuredIndicator: { width: 0, height: 0, translateX: 0 },
+      indicatorResizeObserver: null,
+      indicatorRaf: null
     }
   },
   computed: {
@@ -85,8 +87,8 @@ export default {
       // 自适应模式：基于 DOM 测量定位
       const { width, height, translateX } = this.measuredIndicator
       return {
-        width: `${width - 2 * gap}px`,
-        height: `${height - 2 * gap}px`,
+        width: `${Math.max(width - 2 * gap, 0)}px`,
+        height: `${Math.max(height - 2 * gap, 0)}px`,
         top: `${gap}px`,
         left: `${gap}px`,
         transform: `translateX(${translateX}px)`
@@ -95,17 +97,33 @@ export default {
   },
   watch: {
     value() {
-      if (!this.isFixedWidth) this.$nextTick(this.updateIndicator)
+      if (!this.isFixedWidth) this.$nextTick(this.syncIndicatorObserver)
     },
     options: {
       deep: true,
       handler() {
-        if (!this.isFixedWidth) this.$nextTick(this.updateIndicator)
+        if (!this.isFixedWidth) this.$nextTick(this.syncIndicatorObserver)
       }
+    },
+    itemWidth() {
+      this.$nextTick(this.syncIndicatorObserver)
+    },
+    itemHeight() {
+      if (!this.isFixedWidth) this.$nextTick(this.scheduleIndicatorUpdate)
     }
   },
   mounted() {
-    if (!this.isFixedWidth) this.updateIndicator()
+    this.syncIndicatorObserver()
+  },
+  activated() {
+    if (!this.isFixedWidth) this.scheduleIndicatorUpdate()
+  },
+  beforeDestroy() {
+    this.destroyIndicatorObserver()
+    if (this.indicatorRaf) {
+      this.cancelIndicatorFrame(this.indicatorRaf)
+      this.indicatorRaf = null
+    }
   },
   methods: {
     // 统一尺寸格式化
@@ -113,6 +131,56 @@ export default {
       if (typeof val === 'number') return `${val}px`
       return isNaN(val) ? val : `${val}px`
     },
+    syncIndicatorObserver() {
+      this.destroyIndicatorObserver()
+      if (this.isFixedWidth) return
+      this.scheduleIndicatorUpdate()
+
+      if (typeof window === 'undefined' || typeof window.ResizeObserver === 'undefined') {
+        if (typeof window !== 'undefined') {
+          window.addEventListener('resize', this.scheduleIndicatorUpdate)
+        }
+        return
+      }
+
+      this.indicatorResizeObserver = new window.ResizeObserver(() => {
+        this.scheduleIndicatorUpdate()
+      })
+      const container = this.$refs.container
+      const items = this.$refs.items || []
+      const activeIndex = this.options.findIndex((item) => item.value === this.value)
+      if (container) this.indicatorResizeObserver.observe(container)
+      if (items[activeIndex]) this.indicatorResizeObserver.observe(items[activeIndex])
+    },
+    destroyIndicatorObserver() {
+      if (this.indicatorResizeObserver) {
+        this.indicatorResizeObserver.disconnect()
+        this.indicatorResizeObserver = null
+      }
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', this.scheduleIndicatorUpdate)
+      }
+    },
+    requestIndicatorFrame(callback) {
+      if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+        return window.requestAnimationFrame(callback)
+      }
+      return setTimeout(callback, 16)
+    },
+    cancelIndicatorFrame(frameId) {
+      if (typeof window !== 'undefined' && typeof window.cancelAnimationFrame === 'function') {
+        window.cancelAnimationFrame(frameId)
+        return
+      }
+      clearTimeout(frameId)
+    },
+    scheduleIndicatorUpdate() {
+      if (this.indicatorRaf) this.cancelIndicatorFrame(this.indicatorRaf)
+      this.indicatorRaf = this.requestIndicatorFrame(() => {
+        this.indicatorRaf = null
+        this.updateIndicator()
+      })
+    },
     // 自适应模式下测量激活项的位置
     updateIndicator() {
       const items = this.$refs.items

package/src/index.js

@@ -137,6 +137,7 @@ import tableProV3 from './components/v3/TablePro/index.vue'
 import FileUploadTableV3 from './components/v3/UploadList/index.vue'
 import ViewToggle from './components/ViewToggle/index.vue'
 import WorkCard from './components/WorkCard/index.vue'
+import InfoCard from './components/InfoCard/index.vue'
 import WornPagination from './components/WornPagination/index.vue'
 import VTableLoading from './directives/loading/index.js'
 
@@ -266,6 +267,7 @@ const components = [
   BusiDatePicker,
   TableTransfer,
   WorkCard,
+  InfoCard,
   UploadMsg,
   Tree,
   DateChoose,
@@ -436,6 +438,7 @@ export {
   Upload,
   UploadMsg,
   WorkCard,
+  InfoCard,
   WornPagination,
   /* v3组件*/
   tableProV3,