分组新增排序

src/views/product/group/index.vue

@@ -6,8 +6,8 @@
       </el-button>
       <addGroup ref="addGroupRef" @success="resetHandle" />
     </div>
-    <div class="head-container">
-      <el-table :data="tableData.list" v-loading="tableData.loading">
+    <div class="head-container" id="table_drag">
+      <el-table :data="tableData.list" v-loading="tableData.loading" row-key="id">
         <el-table-column label="排序" sortable prop="sort"></el-table-column>
         <el-table-column label="分组名称" prop="name"></el-table-column>
         <el-table-column label="状态">
@@ -16,10 +16,11 @@
               @change="showChange($event, scope.row)"></el-switch>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="200">
+        <el-table-column label="操作" width="240">
           <template v-slot="scope">
-            <el-button type="text" size="mini" round icon="el-icon-edit"
-              @click="$refs.addGroupRef.show(scope.row)">编辑</el-button>
+            <el-button type="text" icon="el-icon-rank">排序</el-button>
+            <el-button type="text" size="mini" round icon="el-icon-edit" @click="$refs.addGroupRef.show(scope.row)"
+              style="margin-left: 20px !important;">编辑</el-button>
             <el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
               <el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
                 删除
@@ -35,8 +36,9 @@
 </template>
 
 <script>
+import Sortable from 'sortablejs'
 import addGroup from '../components/addGroup'
-import { tbProductGroupGet, tbProductGroupDelete, tbProductGroupPut } from '@/api/shop'
+import { tbProductGroupGet, tbProductGroupDelete, tbProductGroupPut, upGroupSort } from '@/api/shop'
 export default {
   components: {
     addGroup
@@ -54,8 +56,35 @@ export default {
   },
   mounted() {
     this.getTableData()
+    this.$nextTick(() => {
+      this.tableDrag()
+    })
   },
   methods: {
+    //表格拖拽
+    tableDrag() {
+      const el = document.querySelector('#table_drag .el-table__body-wrapper tbody')
+      new Sortable(el, {
+        animation: 150,
+        onEnd: async e => {
+          // console.log('拖拽结束===', e);
+          if (e.oldIndex == e.newIndex) return
+          let oid = this.tableData.list[e.oldIndex].id
+          let nid = this.tableData.list[e.newIndex].id
+          let ids = this.tableData.list.map(item => item.id)
+          try {
+            await upGroupSort({
+              strId: oid,
+              endId: nid,
+              ids: ids
+            })
+            await this.getTableData()
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      });
+    },
     // 状态切换
     async showChange(e, row) {
       try {
@@ -91,8 +120,8 @@ export default {
     },
     // 获取商品列表
     async getTableData() {
-      this.tableData.loading = true
       try {
+        this.tableData.loading = true
         const res = await tbProductGroupGet({
           page: this.tableData.page,
           size: this.tableData.size,