n20-common-lib 2.22.59 → 2.22.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.59",
+  "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"
@@ -109,7 +113,7 @@
               :action="apiPrefix ? apiPrefix + action : action"
               :multiple="multiple"
               :headers="headers"
-              :disabled="!row[keys.type] || row._typeDisabled"
+              :disabled="!row[keys.type] || row._typeDisabled || row._uploadDisabled"
               :accept="row[keys.type] | acceptFilter(typeOptions, fileAccept)"
               :size="row[keys.type] | sizeFilter(typeOptions, fileSize)"
               :http-request="uploadHttpRequest ? (options) => uploadHttpRequest(options, row) : undefined"
@@ -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'
@@ -334,7 +340,6 @@ import importG from '../../utils/importGlobal.js'
 import Dialog from '../Dialog/index.vue'
 import Upload from '../Upload/index.vue'
 
-
 const ViewerImg = async function () {
   let { component } = await importG('v-viewer', () => import(/*webpackChunkName: "v-viewer"*/ 'v-viewer'))
   return component
@@ -348,9 +353,9 @@ const keysDefault = {
   user: 'user'
 }
 const typeOptionsDefault = [
-  { type: '001', label: $lc("信贷合同") },
-  { type: '002', label: $lc("贴现合同") },
-  { type: '003', label: $lc("其他合同") }
+  { type: '001', label: $lc('信贷合同') },
+  { type: '002', label: $lc('贴现合同') },
+  { type: '003', label: $lc('其他合同') }
 ]
 
 export default {
@@ -515,7 +520,8 @@ export default {
       officeStatus: false,
       batchUploading: false,
       // 批量上传使用的文件数据（避免直接修改计算属性）
-      _batchFileData: null
+      _batchFileData: null,
+      sortable: null
     }
   },
   computed: {
@@ -526,7 +532,7 @@ export default {
       return this.dataPorp.fileSize || undefined
     },
     fileAcceptTip() {
-      return this.dataPorp.fileAcceptTip || $lc("支持扩展名：.rar .zip .doc .docx .pdf .jpg...")
+      return this.dataPorp.fileAcceptTip || $lc('支持扩展名：.rar .zip .doc .docx .pdf .jpg...')
     },
     fileData() {
       return this.dataPorp.fileData || undefined
@@ -558,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) => ({
@@ -634,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(
@@ -658,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(
@@ -745,7 +783,7 @@ export default {
       if (code === 200) {
         let aDom = document.createElement('a')
         aDom.href = data
-        aDom.download = $lc("批量附件.pdf")
+        aDom.download = '批量附件.pdf'
         aDom.click()
 
         this.$nextTick(() => {
@@ -794,14 +832,16 @@ export default {
           }
         }
 
+        let file = files.map((item) => item.raw)
         let FD = new FormData()
-        files.forEach((item) => {
-          FD.append('file', item.raw)
+        file.forEach((item) => {
+          FD.append('file', item)
         })
 
-        let remoteFileUpload = JSON.parse(this.fileData?.data || '{}')
-        remoteFileUpload.bussValues = this.typeOptions.map((item) => item.type)
-        FD.append('remoteFileUpload', JSON.stringify(remoteFileUpload))
+        let requestData = JSON.parse(this.fileData?.data || '{}')
+        requestData.bussId = requestData.bussId ?? this.fileData?.bussId ?? ''
+        requestData.bussValues = this.typeOptions.map((item) => item.type)
+        FD.append('data', JSON.stringify(requestData))
 
         this.batchUploading = true
         let { data } = await axios.post(
@@ -819,6 +859,18 @@ export default {
 
         let responseList = Array.isArray(data) ? data : []
         let rows = responseList.map((item) => this.buildAutoMatchBatchRow(item))
+        rows.forEach((row) => {
+          let type = row[this.keys.type]
+          if (!type) {
+            return
+          }
+          let placeholderIndex = this.tableData.findIndex(
+            (item) => item[this.keys.type] === type && !item[this.keys.url] && !item[this.keys.name] && !item._name
+          )
+          if (placeholderIndex > -1) {
+            this.tableData.splice(placeholderIndex, 1)
+          }
+        })
         this.tableData.splice(0, 0, ...rows)
         let pendingFiles = [...files]
         rows.forEach((row) => {
@@ -844,6 +896,7 @@ export default {
         _percent: 100,
         _status: 'success',
         _typeDisabled: false,
+        _uploadDisabled: true,
         _typeUpdating: false,
         _shouldUpdateFileType: !item.attno,
         _lastFileType: item.attno,
@@ -981,20 +1034,22 @@ export default {
     deleteRows() {
       if (!this.selectionList.length) {
         return this.$message({
-          message: $lc("请先勾选要删除的数据！"),
+          message: $lc('请先勾选要删除的数据！'),
           type: 'warning',
           showClose: true
         })
       }
       this.$msgboxPor({
-        title: $lc("确认删除所选附件吗？"),
-        message: $lc("删除后数据不可恢复"),
+        title: $lc('确认删除所选附件吗？'),
+        message: $lc('删除后数据不可恢复'),
         type: 'error',
-        confirmButtonText: $lc("确认"),
-        cancelButtonText: $lc("取消")
-      }).then(() => {
-        this.$emit('delete-rows', this.selectionList)
-      }).catch(() => undefined)
+        confirmButtonText: $lc('确认'),
+        cancelButtonText: $lc('取消')
+      })
+        .then(() => {
+          this.$emit('delete-rows', this.selectionList)
+        })
+        .catch(() => undefined)
     },
 
     async getFileInfo(row, type) {
@@ -1228,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>