分组新增排序

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 {