提交pad点餐设置问题

src/views/shop/pad_setting.vue

@@ -2,8 +2,8 @@
     <div class="app-container">
         <div class="left_menu">
             <div class="search_wrap">
-                <el-input placeholder="名称/代码" v-model="query.name">
-                    <el-button slot="append" icon="el-icon-search"></el-button>
+                <el-input placeholder="名称/代码" v-model="query.name" @change="searchCateory">
+                    <el-button slot="append" icon="el-icon-search" @click="searchCateory"></el-button>
                 </el-input>
             </div>
             <div class="tree_wrap">
@@ -15,16 +15,18 @@
             <div class="header_wrap">
                 <el-button type="primary" @click="addHandle">新建</el-button>
             </div>
-            <div class="table">
-                <el-table :data="tableData.list" border height="100%" v-loading="tableData.loading">
+            <div class="table" id="table_drag">
+                <el-table ref="table" :data="tableData.list" border height="100%" v-loading="tableData.loading"
+                    row-key="id">
                     <el-table-column label="序号" type="index"></el-table-column>
+                    <el-table-column label="ID" prop="id" width="80"></el-table-column>
                     <el-table-column label="菜品名称" prop="productNames"></el-table-column>
                     <el-table-column label="类型" prop="padLayoutName"></el-table-column>
                     <el-table-column label="所属小类" prop="productCategoryName"></el-table-column>
                     <el-table-column label="自定义分类" prop="customName"></el-table-column>
-                    <el-table-column label="操作">
+                    <el-table-column label="操作" width="200">
                         <template v-slot="scope">
-                            <el-button type="text">拖动排序</el-button>
+                            <el-button type="text" v-if="isPcBowser">拖动排序</el-button>
                             <el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
                             <el-popconfirm title="确定删除吗？" @confirm="delTableHandle(scope.row.id)">
                                 <el-button type="text" slot="reference">删除</el-button>
@@ -45,10 +47,12 @@
 </template>
 
 <script>
+import Sortable from 'sortablejs'
 import AddPadPage from './components/addPadPage.vue'
 import { tbShopCategoryGet } from '@/api/shop'
-import { productGrouppage, productCategoryDelete } from '@/api/pad.js'
-import editor from 'mavon-editor';
+import { productGrouppage, productCategoryDelete, productCategorySort } from '@/api/pad.js'
+import { swapArrayEle } from '@/utils/index.js'
+
 export default {
     components: {
         AddPadPage
@@ -59,6 +63,7 @@ export default {
                 name: ''
             },
             selectCatory: '',
+            treeDataOrgin: [],
             treeData: [],
             tableData: {
                 loading: false,
@@ -71,8 +76,46 @@ export default {
     },
     mounted() {
         this.tbShopCategoryGet()
+        if (this.isPcBowser) {
+            this.$nextTick(() => {
+                this.tableDrag()
+            })
+        }
     },
     methods: {
+        // 搜索分类
+        searchCateory() {
+            this.treeData = this.treeDataOrgin.filter(item => {
+                return item.name.includes(this.query.name)
+            })
+        },
+        //表格拖拽
+        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 arr = swapArrayEle(this.tableData.list, e.oldIndex, e.newIndex)
+                    console.log(arr);
+                    let data = arr.map((item, index) => {
+                        return {
+                            id: item.id,
+                            sort: index
+                        }
+                    })
+
+                    try {
+                        await productCategorySort(data)
+                        this.getTableData()
+                    } catch (error) {
+                        console.log(error);
+                    }
+                }
+            });
+        },
         // 删除
         async delTableHandle(id) {
             try {
@@ -119,6 +162,7 @@ export default {
                     sort: 'id,desc',
                     shopId: localStorage.getItem('shopId')
                 })
+                this.treeDataOrgin = res.content
                 this.treeData = res.content
                 this.getTableData()
             } catch (error) {