提交pad点餐设置问题

src/api/pad.js

@@ -69,3 +69,15 @@ export function productGroupPut(data) {
     data
   });
 }
+
+/**
+ * 拖动排序
+ * @returns
+ */
+export function productCategorySort(data) {
+  return request({
+    url: "/api/pad/productCategory/sort",
+    method: "post",
+    data
+  });
+}

src/utils/index.js

@@ -438,3 +438,15 @@ export function formatDecimal(num = 0, decimal = 2, isInt = false) {
     return parseFloat(num).toFixed(decimal);
   }
 }
+
+/**
+ * 传入数组，以及要交换位置的2个元素的下标
+ * @param {*} arr
+ * @param {*} i1
+ * @param {*} i2
+ * @returns
+ */
+export function swapArrayEle(arr, i1, i2) {
+  arr[i1] = arr.splice(i2, 1, arr[i1])[0];
+  return arr;
+}

src/views/application/member_points.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>会员积分</div>
+</template>

src/views/product/category.vue

@@ -25,18 +25,18 @@
                             @change="showChange($event, scope.row)"></el-switch>
                     </template>
                 </el-table-column>
-                <el-table-column label="颜色">
+                <!-- <el-table-column label="颜色">
                     <template v-slot="scope">
                         <div
                             :style="{ width: '20px', height: '20px', borderRadius: '50%', backgroundColor: scope.row.style || '#efefef' }">
                         </div>
                     </template>
-                </el-table-column>
+                </el-table-column> -->
                 <el-table-column label="操作" width="300">
                     <template v-slot="scope">
-                        <el-button type="text" size="mini" round icon="el-icon-plus"
+                        <!-- <el-button type="text" size="mini" round icon="el-icon-plus"
                             @click="$refs.addClassifyRef.show({ pid: scope.row.id })"
-                            v-if="!scope.row.pid">添加子分类</el-button>
+                            v-if="!scope.row.pid">添加子分类</el-button> -->
                         <el-button type="text" size="mini" round icon="el-icon-edit"
                             @click="$refs.addClassifyRef.show(scope.row)">编辑</el-button>
                         <el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">

src/views/product/components/addClassify.vue

@@ -14,12 +14,12 @@
             <el-form-item label="分类图片">
                 <uploadImg ref="uploadImg" @success="res => form.pic = res[0]" @remove="form.pic = ''" />
             </el-form-item>
-            <el-form-item label="颜色标识">
+            <!-- <el-form-item label="颜色标识">
                 <el-color-picker v-model="form.style"></el-color-picker>
                 <div style="color: #999;">
                     标识色用在无图模式时的商品点单按钮显示，可以更有效的从视觉.上进行商品分组。
                 </div>
-            </el-form-item>
+            </el-form-item> -->
             <el-form-item label="开关">
                 <el-switch v-model="form.isShow" :active-value="1" :inactive-value="0"></el-switch>
             </el-form-item>

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-input placeholder="名称/代码" v-model="query.name" @change="searchCateory">
-                    <el-button slot="append" icon="el-icon-search"></el-button>
+                    <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">
+            <div class="table" id="table_drag">
-                <el-table :data="tableData.list" border height="100%" v-loading="tableData.loading">
+                <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 { productGrouppage, productCategoryDelete, productCategorySort } from '@/api/pad.js'
-import editor from 'mavon-editor';
+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) {