分组新增排序

src/api/application.js

@@ -109,3 +109,18 @@ export function recordList(params) {
     params
   });
 }
+
+/**
+ * 存酒统计
+ * @returns
+ */
+export function countRecord(data) {
+  return request({
+    url: "/api/storage/countRecord",
+    method: "post",
+    data: {
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}

src/api/shop.js

@@ -455,3 +455,28 @@ export function upProSort(data) {
     data
   });
 }
+
+/**
+ * 修改分组排序
+ * @returns
+ */
+export function upGroupSort(data) {
+  return request({
+    url: `/api/tbProductGroup/upGroupSort`,
+    method: "post",
+    data
+  });
+}
+
+/**
+ * 修改分类排序
+ * @returns
+ */
+export function upCategorySort(data) {
+  return request({
+    url: `/api/tbShopCategory/upCategorySort`,
+    method: "post",
+    data
+  });
+}
+

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

@@ -19,7 +19,12 @@
                 <el-table-column label="酒名" prop="name">
                     <template v-slot="scope">
                         <div style="display: flex;align-items: center;">
-                            <el-image :src="scope.row.imgUrl" style="width:40px;height: 40px;"></el-image>
+                            <el-image :src="scope.row.imgUrl"
+                                style="width:40px;height: 40px;border-radius: 4px;background-color: #efefef;">
+                                <div class="img_error" slot="error">
+                                    <i class="icon el-icon-document-delete"></i>
+                                </div>
+                            </el-image>
                             <span style="margin-left: 10px;">{{ scope.row.name }}</span>
                         </div>
                     </template>
@@ -40,7 +45,7 @@
                     <template v-slot="scope">
                         <div style="display: flex;gap: 10px;">
                             <el-button type="text"
-                                @click="$refs.winAddModal.show({ name: scope.row.name, imgUrl: scope.row.imgUrl, expDay: scope.row.period, unit: scope.row.unit },true)">存酒</el-button>
+                                @click="$refs.winAddModal.show({ name: scope.row.name, imgUrl: scope.row.imgUrl, expDay: scope.row.period, unit: scope.row.unit }, true)">存酒</el-button>
                             <el-button type="text" @click="$refs.addModal.show(scope.row)">编辑</el-button>
                             <el-popconfirm title="确定删除吗？" @confirm="delHandle(scope.row)">
                                 <el-button type="text" slot="reference">删除</el-button>

src/views/application/components/winetotal/winetotal.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="head-container">
+        <el-table :data="tableData.data" v-loading="tableData.loading">
+            <el-table-column label="商品信息">
+                <template v-slot="scope">
+                    <div class="shop_info">
+                        <el-image :src="scope.row.imgUrl"
+                            style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;">
+                            <div class="img_error" slot="error">
+                                <i class="icon el-icon-document-delete"></i>
+                            </div>
+                        </el-image>
+                        <div class="info">
+                            <span>{{ scope.row.name }}</span>
+                        </div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="有效存酒" prop="savNum"></el-table-column>
+            <el-table-column label="已过期存酒" prop="expNum"></el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+import { countRecord } from '@/api/application'
+export default {
+    data() {
+        return {
+            tableData: {
+                data: [],
+                page: 0,
+                size: 10,
+                loading: false,
+                total: 0
+            }
+        }
+    },
+    mounted() {
+        this.getTableData()
+    },
+    methods: {
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1
+            this.getTableData()
+        },
+        // 获取商品列表
+        async getTableData() {
+            try {
+                this.tableData.loading = true
+                const res = await countRecord({
+                    page: this.tableData.page,
+                    size: this.tableData.size
+                })
+                this.tableData.loading = false
+                this.tableData.data = res.content
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.shop_info {
+    display: flex;
+
+    .info {
+        flex: 1;
+        padding-left: 8px;
+        display: flex;
+        flex-direction: column;
+
+        .tag_wrap {
+            display: flex;
+        }
+    }
+}
+</style>

src/views/application/winestorage.vue

@@ -23,6 +23,7 @@
         <div class="head-container">
             <winestorageRecord v-if="tabActive == 0" />
             <wineRecord v-if="tabActive == 1" />
+            <winetotal v-if="tabActive == 2" />
         </div>
     </div>
 </template>
@@ -30,10 +31,12 @@
 <script>
 import winestorageRecord from './components/winestorage/record.vue'
 import wineRecord from './components/wine/record.vue'
+import winetotal from './components/winetotal/winetotal.vue'
 export default {
     components: {
         winestorageRecord,
-        wineRecord
+        wineRecord,
+        winetotal
     },
     data() {
         return {

src/views/product/add_shop.vue

@@ -133,36 +133,40 @@
             </el-form-item>
             <template v-if="form.typeEnum == 'group'">
                 <el-form-item label="使用日期说明" prop="notices.dateUsed">
-                    <el-input type="textarea" v-model="form.notices.dateUsed" :autosize="{ minRows: 3, maxRows: 10}" style="width: 500px;"
+                    <el-input type="textarea" v-model="form.notices.dateUsed" :autosize="{ minRows: 3, maxRows: 10 }"
-                        placeholder="请输入使用日期说明"></el-input>
+                        style="width: 500px;" placeholder="请输入使用日期说明"></el-input>
                 </el-form-item>
                 <el-form-item label="可用时间说明" prop="notices.availableTime">
-                    <el-input type="textarea" v-model="form.notices.availableTime" :autosize="{ minRows: 3, maxRows: 10}" style="width: 500px;" placeholder="请输入可用时间说明
+                    <el-input type="textarea" v-model="form.notices.availableTime"
+                        :autosize="{ minRows: 3, maxRows: 10 }" style="width: 500px;" placeholder="请输入可用时间说明
 "></el-input>
                 </el-form-item>
                 <el-form-item label="预约方式" prop="notices.bookingType">
-                    <el-input type="textarea" v-model="form.notices.bookingType" :autosize="{ minRows: 3, maxRows: 10}" style="width: 500px;" placeholder="请输入预约方式
+                    <el-input type="textarea" v-model="form.notices.bookingType" :autosize="{ minRows: 3, maxRows: 10 }"
+                        style="width: 500px;" placeholder="请输入预约方式
 "></el-input>
                 </el-form-item>
                 <el-form-item label="退款说明" prop="notices.refundPolicy">
-                    <el-input type="textarea" v-model="form.notices.refundPolicy" :autosize="{ minRows: 3, maxRows: 10}" style="width: 500px;" placeholder="请输入退款说明
+                    <el-input type="textarea" v-model="form.notices.refundPolicy" :autosize="{ minRows: 3, maxRows: 10 }"
+                        style="width: 500px;" placeholder="请输入退款说明
 "></el-input>
                 </el-form-item>
                 <el-form-item label="团购价说明">
-                    <el-input type="textarea" v-model="form.notices.groupPurInfo" :autosize="{ minRows: 3, maxRows: 10}" style="width: 500px;"
+                    <el-input type="textarea" v-model="form.notices.groupPurInfo" :autosize="{ minRows: 3, maxRows: 10 }"
-                        placeholder="请输入团购价说明"></el-input>
+                        style="width: 500px;" placeholder="请输入团购价说明"></el-input>
                 </el-form-item>
                 <el-form-item label="门市价/划线价说明">
-                    <el-input type="textarea" v-model="form.notices.marketPriceInfo" :autosize="{ minRows: 3, maxRows: 10}" style="width: 500px;"
+                    <el-input type="textarea" v-model="form.notices.marketPriceInfo"
+                        :autosize="{ minRows: 3, maxRows: 10 }" style="width: 500px;"
                         placeholder="请输入门市价/划线价说明"></el-input>
                 </el-form-item>
                 <el-form-item label="折扣说明">
-                    <el-input type="textarea" v-model="form.notices.discountInfo" :autosize="{ minRows: 3, maxRows: 10}" style="width: 500px;"
+                    <el-input type="textarea" v-model="form.notices.discountInfo" :autosize="{ minRows: 3, maxRows: 10 }"
-                        placeholder="请输入折扣说明"></el-input>
+                        style="width: 500px;" placeholder="请输入折扣说明"></el-input>
                 </el-form-item>
                 <el-form-item label="发票说明">
-                    <el-input type="textarea" v-model="form.notices.invoiceInfo" :autosize="{ minRows: 3, maxRows: 10}" style="width: 500px;"
+                    <el-input type="textarea" v-model="form.notices.invoiceInfo" :autosize="{ minRows: 3, maxRows: 10 }"
-                        placeholder="请输入发票说明"></el-input>
+                        style="width: 500px;" placeholder="请输入发票说明"></el-input>
                 </el-form-item>
                 <el-form-item label="使用规则">
                     <Editor :minHeight="200" :value="form.notices.usageRules" v-model="form.notices.usageRules" />
@@ -297,7 +301,7 @@
                         :min="0"></el-input-number>
                 </el-form-item>
             </template>
-            <el-form-item label="排序">
+            <el-form-item label="排序" v-if="form.id">
                 <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
             </el-form-item>
             <el-form-item>

src/views/product/category.vue

@@ -4,7 +4,7 @@
             <el-button type="primary" icon="el-icon-plus" @click="$refs.addClassifyRef.show()">添加分类</el-button>
             <addClassify ref="addClassifyRef" @success="getTableData" />
         </div>
-        <div class="head-container">
+        <div class="head-container" id="table_drag">
             <el-table :data="tableData.list" v-loading="tableData.loading" row-key="id"
                 :tree-props="{ children: 'childrenList' }">
                 <el-table-column label="排序" prop="sort" sortable width="100"></el-table-column>
@@ -56,8 +56,9 @@
 </template>
 
 <script>
+// import Sortable from 'sortablejs'
 import addClassify from './components/addClassify'
-import { tbShopCategoryGet, tbShopCategoryDelete, tbShopCategoryPost } from '@/api/shop'
+import { tbShopCategoryGet, tbShopCategoryDelete, tbShopCategoryPost, upCategorySort } from '@/api/shop'
 export default {
     components: {
         addClassify
@@ -75,8 +76,37 @@ 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);
+        //             return
+        //             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)
+        //             let isParent = this.tableData.list[e.oldIndex].pid ? 1 : 0
+        //             try {
+        //                 await upCategorySort({
+        //                     strId: oid,
+        //                     endId: nid,
+        //                     ids: ids
+        //                 })
+        //                 await this.getTableData()
+        //             } catch (error) {
+        //                 console.log(error);
+        //             }
+        //         }
+        //     });
+        // },
         // 状态切换
         async showChange(e, row) {
             try {

src/views/product/components/addClassify.vue

@@ -23,7 +23,7 @@
             <el-form-item label="开关">
                 <el-switch v-model="form.isShow" :active-value="1" :inactive-value="0"></el-switch>
             </el-form-item>
-            <el-form-item label="排序">
+            <el-form-item label="排序" v-if="form.id">
                 <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
             </el-form-item>
         </el-form>
@@ -92,7 +92,7 @@ export default {
         show(obj) {
             // console.log(obj)
             this.dialogVisible = true
-            if (obj.pid) {
+            if (obj && obj.pid) {
                 this.form.pid = obj.pid
             }
             if (obj && obj.id) {

src/views/product/components/addGroup.vue

@@ -27,7 +27,7 @@
                         <el-radio :label="0">禁用</el-radio>
                     </el-radio-group>
                 </el-form-item>
-                <el-form-item label="分组排序">
+                <el-form-item label="分组排序" v-if="form.id">
                     <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
                 </el-form-item>
             </el-form>

src/views/product/components/addUnit.vue

@@ -4,7 +4,7 @@
             <el-form-item label="单位名称" prop="name">
                 <el-input v-model="form.name" placeholder="单位名称"></el-input>
             </el-form-item>
-            <el-form-item label="排序">
+            <el-form-item label="排序" v-if="form.id">
                 <el-input v-model="form.sort"></el-input>
             </el-form-item>
         </el-form>

src/views/product/group/index.vue

@@ -6,8 +6,8 @@
       </el-button>
       <addGroup ref="addGroupRef" @success="resetHandle" />
     </div>
-    <div class="head-container">
+    <div class="head-container" id="table_drag">
-      <el-table :data="tableData.list" v-loading="tableData.loading">
+      <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"
+            <el-button type="text" icon="el-icon-rank">排序</el-button>
-              @click="$refs.addGroupRef.show(scope.row)">编辑</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,

src/views/product/index.vue

@@ -32,7 +32,7 @@
       </el-row>
     </div>
     <div class="head-container" id="table_drag">
-      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading">
+      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
         <el-table-column prop="id" label="ID" width="50px"></el-table-column>
         <el-table-column label="商品信息">
           <template v-slot="scope">
@@ -133,30 +133,24 @@ export default {
     })
   },
   methods: {
-    //表格拖炸
+    //表格拖拽
     tableDrag() {
       const el = document.querySelector('#table_drag .el-table__body-wrapper tbody')
       new Sortable(el, {
         animation: 150,
         onEnd: async e => {
-          console.log('拖拽结束===', 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()
+            await this.getTableData()
-            window.location.reload();
           } catch (error) {
             console.log(error);
           }