From 192c37c946f6b4941160e243db9da865855b75a8 Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Thu, 6 Jun 2024 09:13:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=95=86=E5=93=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=8B=96=E6=8B=BD=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  4 +-
 .env.production                               |  4 +-
 package.json                                  |  2 +-
 src/api/shop.js                               | 12 ++++
 .../components/winestorage/record.vue         | 10 ++--
 src/views/product/index.vue                   | 55 +++++++++++++++++--
 6 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/.env.development b/.env.development
index 54539eb..a678005 100644
--- a/.env.development
+++ b/.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'
 
diff --git a/.env.production b/.env.production
index ffc2fc2..3b02e74 100644
--- a/.env.production
+++ b/.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://admintestpapi.sxczgkj.cn'
+# VUE_APP_BASE_API  = 'https://cashieradmin.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
diff --git a/package.json b/package.json
index 8f631d1..a5eb161 100644
--- a/package.json
+++ b/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",
diff --git a/src/api/shop.js b/src/api/shop.js
index cd0d917..9b150c4 100644
--- a/src/api/shop.js
+++ b/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
+  });
+}
diff --git a/src/views/application/components/winestorage/record.vue b/src/views/application/components/winestorage/record.vue
index 9915b5b..036f86d 100644
--- a/src/views/application/components/winestorage/record.vue
+++ b/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>重置</el-button>
+                    <el-button type="primary" @click="getTableData">查询</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,
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index 3625eeb..b4c4510 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -31,8 +31,9 @@
         </el-col>
       </el-row>
     </div>
-    <div class="head-container">
-      <el-table :data="tableData.data" v-loading="tableData.loading">
+    <div class="head-container" id="table_drag">
+      <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;