fix: 风险评估拖拽排序功能

package.json

@@ -86,7 +86,7 @@
     "screenfull": "^5.0.2",
     "script-loader": "^0.7.2",
     "signature_pad": "^3.0.0-beta.3",
-    "sortablejs": "^1.10.2",
+    "sortablejs": "^1.14.0",
     "ua-parser-js": "^0.7.21",
     "v-fit-columns": "^0.2.0",
     "video.js": "^7.8.4",

src/mixins/sortable.js

@@ -0,0 +1,43 @@
+import Sortable from 'sortablejs'
+/**
+ * 组件必须提供一个sortableEnd方法用于拖拽数据更新
+ */
+export default {
+  data() {
+    return {
+      sortable: null
+    }
+  },
+  methods: {
+    // 初始化拖拽排序
+    initSortable() {
+      // 获取表格的tbody元素
+      const el = this.$refs.elTable.$el.querySelectorAll(
+        '.el-table__body-wrapper > table > tbody'
+      )[0]
+      this.sortable = new Sortable(el, {
+        // 拖拽时的类名
+        ghostClass: 'sortable-ghost',
+        // 拖拽动画时间
+        animation: 150,
+        // 结束拖拽时的回调
+        onEnd: this.sortableEnd
+      })
+    },
+    // 重新实例化sortable
+    refreshSortable() {
+      this.$nextTick(() => {
+        if (this.sortable) {
+          this.sortable.destroy()
+        }
+        this.initSortable()
+      })
+    }
+  },
+  // 销毁实例
+  beforeDestroy() {
+    if (this.sortable) {
+      this.sortable.destroy()
+    }
+  }
+}

src/views/platform/risk/riskDetail.vue

@@ -105,7 +105,14 @@
                         <el-button type="success" size="mini" icon="ibps-icon-add" @click="onAdd">新增风险项</el-button>
                         <el-button type="danger" size="mini" icon="ibps-icon-remove" @click="onRemove">删除</el-button>
                     </div>
-                    <el-table height="300px" :data="tableList" border @selection-change="handleSelectionChange">
+                    <el-alert
+                        style="margin-bottom: 12px"
+                        title=""
+                        type="success"
+                        :closable="false"
+                        description="提示：可以拖动表格数据进行排序"
+                    />
+                    <el-table ref="eltable1" height="300px" :data="tableList" border @selection-change="handleSelectionChange">
                         <el-table-column
                             width="50"
                             type="selection"
@@ -329,11 +336,14 @@
 import dayjs from 'dayjs'
 import ibpsUserSelector from '@/business/platform/org/selector'
 import { getImage } from '@/api/platform/file/attachment'
+import sortableJs from '@/mixins/sortable'
+import Sortable from 'sortablejs'
 export default {
     components: {
         ibpsUserSelector,
         IbpsCustomDialog: () => import('@/business/platform/data/templaterender/custom-dialog')
     },
+    mixins: [sortableJs],
     props: {
         culWays: {
             type: Object,
@@ -502,6 +512,53 @@ export default {
         }
     },
     methods: {
+        // 初始化拖拽排序
+        initSortable () {
+            // 获取表格的tbody元素
+            console.log(this.$refs)
+            const el = this.$refs.eltable1.$el.querySelectorAll(
+                '.el-table__body-wrapper > table > tbody'
+            )[0]
+            this.sortable = new Sortable(el, {
+                // 拖拽时的类名
+                ghostClass: 'sortable-ghost',
+                // 拖拽动画时间
+                animation: 150,
+                // 结束拖拽时的回调
+                onEnd: this.sortableEnd
+            })
+        },
+        sortableEnd (evt) {
+            const { oldIndex, newIndex } = evt
+            // 复制原数组
+            const newData = [...this.tableList]
+            // 操作副本
+            const movedItem = newData.splice(oldIndex, 1)[0]
+            newData.splice(newIndex, 0, movedItem)
+            // 重新赋值（引用变化，触发更新）
+            this.tableList = []
+            this.$nextTick(() => {
+                // 确保数据已更新到DOM
+                this.tableList = newData.map((t, index) => ({
+                    ...t,
+                    tenant_id_: index
+                })) // 可结合表格自身的强制更新
+            })
+            // this.$forceUpdate()
+            // const { oldIndex, newIndex } = evt
+            // const temData = JSON.parse(JSON.stringify(this.tableList))
+            // // 处理数据交换
+            // const currRow = temData.splice(oldIndex, 1)[0]
+            // temData.splice(newIndex, 0, currRow)
+            // console.log(
+            //   'temData==>',
+            //   temData.map((t) => t.yao_su_tiao_kuan_)
+            // )
+            // this.tableList = temData
+            // this.$nextTick(() => {
+            //   this.$refs.eltable1.doLayout()
+            // })
+        },
         handleSelectionChange (val) {
             this.multipleSelection = val
         },
@@ -544,6 +601,7 @@ export default {
                 this.userId = data[0].bian_zhi_ren_
                 this.time = data[0].bian_zhi_shi_jian
                 this.form.xuan_ze_feng_xian = data[0].xuan_ze_feng_xian
+                data.sort((a, b) => a.tenant_id_ - b.tenant_id_)
                 this.tableList = data
                 this.tableList.forEach(i => {
                     if (!Object.hasOwn(i, 'qian_zai_yuan_yin')) i.qian_zai_yuan_yin = ''
@@ -689,6 +747,7 @@ export default {
                 this.rowParams = row
             }
             this.dialogVisible = true
+            !this.readonly && this.refreshSortable()
         },
         // 计算风险指数
         culRate (row) {

src/views/platform/risk/riskPeopleTable.vue

@@ -54,12 +54,14 @@
 <script>
 import ibpsUserSelector from '@/business/platform/org/selector'
 import RiskDetail from './riskDetail.vue'
+import sortableJs from '@/mixins/sortable'
 
 export default {
     components: {
         ibpsUserSelector,
         RiskDetail
     },
+    mixins: [sortableJs],
     props: {
         params: {
             type: Object,
@@ -95,6 +97,13 @@ export default {
         this.getPeopleList()
     },
     methods: {
+        sortableEnd (evt) {
+            const { oldIndex, newIndex } = evt
+            // 处理数据交换
+            const currRow = this.tableList.splice(oldIndex, 1)[0]
+            this.tableList.splice(newIndex, 0, currRow)
+            console.log('排序已变更', this.tableList)
+        },
         // 获取人员部门
         getPersonPosition (id) {
             const userList = this.$store.getters.userList