n20-common-lib 3.2.16 → 3.2.18

package/package.json

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

package/src/components/AdvancedFilter/formItemRender.vue

@@ -315,29 +315,32 @@ export default {
     const calcRangeWidth = (item, value, value2) => {
       let textMaxWidth = 426 - getWidth(item.label) - 16
       let textMinWidth = 160
+      // 日期区间：宽度按类型固定（与内部 el-range-editor 的 CSS 宽度对齐），
+      // 不随实际选中值变化、也不因是否选中而改变，避免选中后宽度变化
+      const rangeFixedWidthMap = {
+        daterange: 225,
+        datetimerange: 340,
+        monthrange: 200
+      }
+      if (rangeFixedWidthMap[item.type]) {
+        let widthMax = rangeFixedWidthMap[item.type]
+        if (widthMax > textMaxWidth) {
+          return textMaxWidth + 'px'
+        }
+        return widthMax + 'px'
+      }
+      // 数值区间（numberrange）无固定格式：未选中返回最小宽度，选中按实际值计算
       if (!value && !value2) {
         return textMinWidth + 'px'
-      } else {
-        if (!value || !value2) {
-          let widthMax = (getWidth(value) + getWidth(value2) + 72) * 2
-          if (widthMax < textMinWidth) {
-            return textMinWidth + 'px'
-          }
-          if (widthMax > textMaxWidth) {
-            return textMaxWidth + 'px'
-          }
-          return widthMax + 'px'
-        } else {
-          let widthMax = getWidth(value) + getWidth(value2) + 140
-          if (widthMax < textMinWidth) {
-            return textMinWidth + 'px'
-          }
-          if (widthMax > textMaxWidth) {
-            return textMaxWidth + 'px'
-          }
-          return widthMax + 'px'
-        }
       }
+      let widthMax = getWidth(value) + getWidth(value2) + 140
+      if (widthMax < textMinWidth) {
+        return textMinWidth + 'px'
+      }
+      if (widthMax > textMaxWidth) {
+        return textMaxWidth + 'px'
+      }
+      return widthMax + 'px'
     }
 
     const calcDateWidth = (item, value) => {

package/src/components/FileUploadTable/index.vue

@@ -32,15 +32,11 @@
       :height="height"
       border
       @selection-change="(selection) => (selectionList = selection)"
+      @sort-change="onSortChange"
     >
       <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"
@@ -77,7 +73,7 @@
             </div>
           </slot>
         </el-table-column>
-        <el-table-column :label="'附件名称' | $lc" :prop="keys.name">
+        <el-table-column :label="'附件名称' | $lc" :prop="keys.name" sortable="custom">
           <slot slot="header" slot-scope="scope" name="name-header" :column="scope.column">{{ '附件名称' | $lc }}</slot>
           <slot slot-scope="{ row }" name="name" :row="row">
             <span v-if="readonly">{{ row[keys.name] ? row[keys.name].replace(/\.[A-z0-9]+$/, '') : '' }}</span>
@@ -322,7 +318,6 @@ 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'
@@ -502,8 +497,7 @@ export default {
       previewName: undefined,
       previewSameOrg: false,
       seeRow: {},
-      officeStatus: false,
-      sortable: null
+      officeStatus: false
     }
   },
   computed: {
@@ -546,63 +540,31 @@ 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
+    // 点击附件名称表头排序（替代原拖动排序）
+    onSortChange({ prop, order }) {
+      // 仅处理附件名称列；order 为 null（取消排序）时不处理
+      if (prop !== this.keys.name || !order) {
+        return
       }
+      const nameKey = this.keys.name
+      // 与显示一致：去除扩展名后再比较
+      const stripName = (v) => (v == null ? '' : String(v).replace(/\.[A-z0-9]+$/, ''))
+      const dir = order === 'ascending' ? 1 : -1
+      const sorted = [...this.tableData].sort(
+        (a, b) => stripName(a[nameKey]).localeCompare(stripName(b[nameKey]), 'zh-CN', { numeric:true }) * dir
+      )
+      // 原地更新 tableData（沿用现有 splice 修改 prop 数组的模式）
+      this.tableData.splice(0, this.tableData.length, ...sorted)
+      this.$emit('sort', this.tableData.slice())
+      this.saveFileSort().catch(() => {
+        this.$message.error($lc('附件排序保存失败'))
+      })
     },
     async saveFileSort() {
       const sortList = this.tableData
@@ -1076,21 +1038,4 @@ 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>