n20-common-lib 2.22.60 → 2.22.61

package/package.json

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

package/src/components/FileUploadTable/index.vue

@@ -32,11 +32,15 @@
       :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"
@@ -320,13 +324,15 @@
 </template>
 
 <script>
-import aiCheckDialog from './aiCheckDialog.vue'
-import getJsonc from '../../assets/getJsonc.js'
 import _axios from 'axios'
 import dayjs from 'dayjs'
+import Sortable from 'sortablejs'
+import 'viewerjs/dist/viewer.css'
 import XEUtils from 'xe-utils'
 
-import 'viewerjs/dist/viewer.css'
+import aiCheckDialog from './aiCheckDialog.vue'
+
+import getJsonc from '../../assets/getJsonc.js'
 import auth from '../../utils/auth'
 import axios from '../../utils/axios'
 import { $lc } from '../../utils/i18n/index'
@@ -514,7 +520,8 @@ export default {
       officeStatus: false,
       batchUploading: false,
       // 批量上传使用的文件数据（避免直接修改计算属性）
-      _batchFileData: null
+      _batchFileData: null,
+      sortable: null
     }
   },
   computed: {
@@ -557,32 +564,64 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    tableKey() {
+      this.initSortable()
     }
   },
   mounted() {
     this.getConfiguration()
+    this.initSortable()
+  },
+  beforeDestroy() {
+    this.destroySortable()
   },
   methods: {
-    // 点击附件名称表头排序（替代原拖动排序）
-    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('附件排序保存失败'))
+    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) => ({
@@ -633,7 +672,7 @@ export default {
         })
       } else {
         if (!this.AIOptions.bussType) {
-          this.$message.error($lc("请先配置bussType"))
+          this.$message.error($lc('请先配置bussType'))
           return false
         }
         let { data, code } = await axios.post(
@@ -657,7 +696,7 @@ export default {
     // ai识别
     async AiFn(row) {
       if (!this.AIOptions.bussType) {
-        this.$message.error($lc("请先配置bussType"))
+        this.$message.error($lc('请先配置bussType'))
         return false
       }
       const { data, code } = await axios.post(
@@ -826,11 +865,7 @@ export default {
             return
           }
           let placeholderIndex = this.tableData.findIndex(
-            (item) =>
-              item[this.keys.type] === type &&
-              !item[this.keys.url] &&
-              !item[this.keys.name] &&
-              !item._name
+            (item) => item[this.keys.type] === type && !item[this.keys.url] && !item[this.keys.name] && !item._name
           )
           if (placeholderIndex > -1) {
             this.tableData.splice(placeholderIndex, 1)
@@ -1010,9 +1045,11 @@ export default {
         type: 'error',
         confirmButtonText: $lc('确认'),
         cancelButtonText: $lc('取消')
-      }).then(() => {
-        this.$emit('delete-rows', this.selectionList)
-      }).catch(() => undefined)
+      })
+        .then(() => {
+          this.$emit('delete-rows', this.selectionList)
+        })
+        .catch(() => undefined)
     },
 
     async getFileInfo(row, type) {
@@ -1246,4 +1283,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>