新增商品列表拖拽排序

.env.development

@@ -1,10 +1,10 @@
 ENV = 'development'
 
 # 接口地址
-# VUE_APP_BASE_API  = 'http://192.168.2.44:8000'
+VUE_APP_BASE_API  = 'http://192.168.2.42:8000'
 # VUE_APP_BASE_API  = 'http://192.168.2.133:8000'
 # VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
-VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
+# VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
 # VUE_APP_BASE_API  = 'http://192.168.2.96:8000'
 VUE_APP_WS_API = 'ws://192.168.2.128:8000'
 

.env.production

@@ -2,8 +2,8 @@ ENV = 'production'
 
 # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
-VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
+# VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
-# VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
+VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
 # VUE_APP_BASE_API  = 'http://192.168.2.98:8000'
 # 如果接口是 http 形式， wss 需要改为 ws
 VUE_APP_WS_API = 'wss://123.56.110.252

package.json

@@ -45,7 +45,7 @@
     "path-to-regexp": "2.4.0",
     "qs": "^6.10.1",
     "screenfull": "4.2.0",
-    "sortablejs": "1.8.4",
+    "sortablejs": "^1.15.2",
     "vue": "^2.6.14",
     "vue-amap": "^0.5.10",
     "vue-clipboard2": "^0.3.3",

src/api/shop.js

@@ -443,3 +443,15 @@ export function queryAllShopUser(params) {
     }
   });
 }
+
+/**
+ * 修改商品排序
+ * @returns
+ */
+export function upProSort(data) {
+  return request({
+    url: `/api/tbProduct/upProSort`,
+    method: "post",
+    data
+  });
+}

src/views/application/components/winestorage/record.vue

@@ -18,8 +18,8 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary">查询</el-button>
+                    <el-button type="primary" @click="getTableData">查询</el-button>
-                    <el-button>重置</el-button>
+                    <el-button @click="resetHandle">重置</el-button>
                 </el-form-item>
             </el-form>
         </div>
@@ -122,8 +122,10 @@ export default {
     methods: {
         // 重置查询
         resetHandle() {
-            this.tableData.page = 0;
+            this.tableData.page = 0
             this.query.name = ''
+            this.query.telphone = ''
+            this.query.status = 1
             this.getTableData()
         },
         // 分页回调
@@ -133,8 +135,8 @@ export default {
         },
         // 获取商品列表
         async getTableData() {
-            this.tableData.loading = true
             try {
+                this.tableData.loading = true
                 const res = await storageList({
                     ...this.query,
                     page: this.tableData.page,

src/views/product/index.vue

@@ -31,8 +31,9 @@
         </el-col>
       </el-row>
     </div>
-    <div class="head-container">
+    <div class="head-container" id="table_drag">
-      <el-table :data="tableData.data" v-loading="tableData.loading">
+      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading">
+        <el-table-column prop="id" label="ID" width="50px"></el-table-column>
         <el-table-column label="商品信息">
           <template v-slot="scope">
             <div class="shop_info">
@@ -79,7 +80,9 @@
         </el-table-column>
         <el-table-column label="操作" width="200">
           <template v-slot="scope">
-            <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }">
+            <el-button type="text" icon="el-icon-rank">排序</el-button>
+            <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }"
+              style="margin-left: 20px !important;">
               <el-button type="text" icon="el-icon-edit">编辑</el-button>
             </router-link>
             <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
@@ -98,9 +101,10 @@
 </template>
 
 <script>
+import Sortable from 'sortablejs'
 import dayjs from 'dayjs'
 import settings from '@/settings'
-import { tbProduct, tbShopCategoryGet, tbProductDelete, tbProductIsHot } from '@/api/shop'
+import { tbProduct, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort } from '@/api/shop'
 export default {
   data() {
     return {
@@ -124,8 +128,41 @@ export default {
   mounted() {
     this.getTableData()
     this.tbShopCategoryGet()
+    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.data[e.oldIndex].id
+          let nid = this.tableData.data[e.newIndex].id
+          let ids = this.tableData.data.map(item => item.id)
+          // let arr = [...this.tableData.data] // 获取表数据
+          // arr.splice(e.oldIndex, 1, ...arr.splice(e.newIndex, 1, arr[e.oldIndex])); // 数据处理
+          // this.$nextTick(() => {
+          //   this.tableData.data = [...arr]
+          // })
+          try {
+            await upProSort({
+              strId: oid,
+              endId: nid,
+              ids: ids
+            })
+            // await this.getTableData()
+            window.location.reload();
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      });
+    },
     // 设置热门
     async changeHot(e, row) {
       console.log(row)
@@ -145,6 +182,7 @@ export default {
       this.query.name = ''
       this.query.categoryId = ''
       this.query.typeEnum = ''
+      this.tableData.page = 0
       this.getTableData()
     },
     // 分页回调
@@ -199,6 +237,15 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.handle {
+  font-size: 18px;
+  color: #999;
+
+  &:hover {
+    cursor: grab;
+  }
+}
+
 .shop_info {
   display: flex;