n20-common-lib 3.2.3 → 3.2.5

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,249 @@
+<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>
+
+<style lang="scss" scoped>
+.info-card + .info-card {
+  margin-top: 8px;
+}
+.info-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 12px 16px;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  // 右下角装饰logo - 相对于整个卡片定位
+  .corner-logo {
+    position: absolute;
+    bottom: 0;
+    right: -16px;
+    width: 120px;
+    height: 120px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .info-card-header {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    position: relative;
+    width: 100%;
+    flex-shrink: 0;
+    z-index: 1;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      position: relative;
+      flex-shrink: 0;
+
+      .header-logo {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        position: relative;
+      }
+
+      .header-title {
+        font-family: 'PingFang SC', 'Medium', sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        color: #1d2129;
+        white-space: nowrap;
+        position: relative;
+        flex-shrink: 0;
+      }
+    }
+
+    .header-right {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 2px;
+      overflow: hidden;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: rgba(0, 122, 255, 0.06);
+      }
+
+      .collapse-text {
+        font-family: 'PingFang SC', 'Regular', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: #007aff;
+        white-space: nowrap;
+      }
+
+      .collapse-arrow {
+        width: 14px;
+        height: 14px;
+        position: relative;
+        flex-shrink: 0;
+        transition: transform 0.3s ease;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          width: 8px;
+          height: 2px;
+          background-color: #007aff;
+          border-radius: 1px;
+          top: 50%;
+          left: 50%;
+          transition: all 0.3s ease;
+        }
+
+        &::before {
+          transform: translate(-50%, -50%) rotate(45deg);
+          margin-left: -2px;
+        }
+
+        &::after {
+          transform: translate(-50%, -50%) rotate(-45deg);
+          margin-left: 2px;
+        }
+
+        &.expanded {
+          &::before {
+            transform: translate(-50%, -50%) rotate(-45deg);
+            margin-left: -3px;
+          }
+
+          &::after {
+            transform: translate(-50%, -50%) rotate(45deg);
+            margin-left: 3px;
+          }
+        }
+      }
+    }
+  }
+
+  .info-card-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    position: relative;
+    width: 100%;
+    flex: 1;
+    z-index: 1;
+  }
+
+  // 折叠动画（Vue 2.6 transition 类名：无 -from/-to 后缀）
+  .collapse-enter-active,
+  .collapse-leave-active {
+    transition: all 0.3s ease;
+    overflow: hidden;
+  }
+
+  .collapse-enter,
+  .collapse-leave-to {
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  .collapse-enter-to,
+  .collapse-leave {
+    max-height: 2000px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/src/components/ProFilterView/advancedQuery.vue

@@ -555,7 +555,7 @@ export default {
     updatefield(field, row) {
       this.$set(row, 'advancedQueryType', field.advancedQueryType)
       if (field.advancedQueryType === 4) {
-        field.options = field.options.map((item) => {
+        field.options = field?.options?.map((item) => {
           if (field.props?.labelKey) {
             item.label = item[field.props.labelKey]
           }
@@ -564,7 +564,7 @@ export default {
           }
           return item
         })
-        this.$set(row, 'options', field.options)
+        this.$set(row, 'options', field?.options)
       }
       // slot 类型特殊处理
       if (field.type === 'slot') {
@@ -614,42 +614,16 @@ export default {
     // 获取字段选项
     getFieldOptions(field) {
       const fieldConfig = this.fieldOptions.find((f) => f.value === field)
-      return fieldConfig ? fieldConfig.options : []
+      return fieldConfig ? fieldConfig?.options : []
     },
     // 更新操作符对应的值
     updateOperatorOptions(field, condition) {
+      // if (condition.valueType === 'slot') return
       this.$set(condition, 'valueType', field.type)
       this.$set(condition, 'value', '')
       if (field.type === 'dateRangePicker' || field.type === 'inputNumberRange') {
         this.$set(condition, 'value', {})
       }
-
-      /* if (condition.operator === 'between') {
-        const fieldType = this.getFieldType(condition.field)
-        if (fieldType === 'number') {
-          condition.value = { start: undefined, end: undefined }
-        } else if (fieldType === 'date' || fieldType === 'daterange') {
-          condition.value = []
-        } else {
-          condition.value = { start: '', end: '' }
-        }
-      } else {
-        const fieldType = this.getFieldType(condition.field)
-        if (fieldType === 'select') {
-          condition.value = []
-        } else {
-          condition.value = ''
-        }
-      } */
-    },
-    // 提交表单
-    submitForm() {
-      /* const formData = {
-        value: this.value
-      }
-      this.$emit('confirm', formData)
-      this.$emit('close') */
-      console.log(this.value, 'this.value')
     }
   }
 }