新增存酒管理

src/api/application.js

@@ -25,3 +25,75 @@ export function appCenterGet() {
     method: "get"
   });
 }
+
+/**
+ * 新增/编辑酒品
+ * @returns
+ */
+export function tbShopStorageGood(data, method = "post") {
+  return request({
+    url: "/api/tbShopStorageGood",
+    method: method,
+    data: {
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}
+
+/**
+ * 查询酒品列表
+ * @returns
+ */
+export function tbShopStorageGoodlist(data) {
+  return request({
+    url: "/api/tbShopStorageGood/list",
+    method: "post",
+    data: {
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}
+
+/**
+ * 新增存酒
+ * @returns
+ */
+export function storageWin(data) {
+  return request({
+    url: "/api/storage",
+    method: "post",
+    data: {
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}
+
+/**
+ * 查询存酒列表
+ * @returns
+ */
+export function storageList(data) {
+  return request({
+    url: "/api/storage/list",
+    method: "post",
+    data: {
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}
+
+/**
+ * 存取酒
+ * @returns
+ */
+export function storagePut(data) {
+  return request({
+    url: "/api/storage",
+    method: "put",
+    data
+  });
+}

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

@@ -1,42 +1,108 @@
 <template>
-    <el-dialog :title="form.id ? '编辑酒品' : '添加酒品'" :visible.sync="dialogVisible" @close="reset">
+    <div>
-        <div class="head-container">
+        <el-dialog :title="form.id ? '编辑酒品' : '添加酒品'" :visible.sync="dialogVisible" @close="reset">
-            <div class="tab_wrap">
+            <div class="head-container" v-if="!form.id">
-                <div class="tab" :style="{ '--index': form.source }">
+                <div class="tab_wrap">
-                    <div class="item" v-for="(item, index) in tabs" :key="item.value"
+                    <div class="tab" :style="{ '--index': form.source }">
-                        :class="{ active: index == form.source }" @click="tabChange(item)">
+                        <div class="item" v-for="(item, index) in tabs" :key="item.value"
-                        {{ item.label }}
+                            :class="{ active: index == form.source }" @click="tabChange(item)">
+                            {{ item.label }}
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+            <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+                <template v-if="form.source == 0">
-            <el-form-item label="酒品名" prop="name">
+                    <el-form-item label="酒品名" prop="name">
-                <el-input v-model="form.name" placeholder="请输入酒品名" />
+                        <el-input v-model="form.name" placeholder="请输入酒品名" />
-            </el-form-item>
+                    </el-form-item>
-            <el-form-item label="酒品图片" prop="imgUrl">
+                    <el-form-item label="酒品图片">
-            </el-form-item>
+                        <uploadImg ref="uploadImg" :limit="1" @success="e => form.imgUrl = e[0]"
-            <el-form-item label="单位" prop="unit">
+                            @remove="form.imgUrl = ''" />
-                <el-input v-model="form.name" placeholder="请选择单位，如：瓶" />
+                    </el-form-item>
-            </el-form-item>
+                </template>
-            <el-form-item label="有效期">
+                <template v-else>
-                <el-input-number v-model="form.period" controls-position="right" :min="1"
+                    <template v-if="!form.id">
-                    placeholder="请输入有效期(天)"></el-input-number>
+                        <el-form-item label="选择商品" prop="name">
-            </el-form-item>
+                            <div>
-        </el-form>
+                                <el-button type="primary" icon="el-icon-plus"
-        <span slot="footer" class="dialog-footer">
+                                    @click="$refs.shopListRef.show([...productIds])">
-            <el-button @click="dialogVisible = false">取 消</el-button>
+                                    添加商品
-            <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+                                </el-button>
-        </span>
+                            </div>
-    </el-dialog>
+                            <div class="shop_list">
+                                <div class="item_wrap" v-for="(item, index) in productIds" :key="item.id"
+                                    @click="productIds.splice(index, 1)">
+                                    <div class="item" :data-index="index + 1">
+                                        <el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
+                                    </div>
+                                    <div class="name">{{ item.name }}</div>
+                                </div>
+                            </div>
+                        </el-form-item>
+                    </template>
+                    <template v-else>
+                        <el-form-item label="商品">
+                            <div class="goods_info">
+                                <el-image :src="form.imgUrl" style="width: 50px;height: 50px;"></el-image>
+                                <div class="info">{{ form.name }}</div>
+                            </div>
+                        </el-form-item>
+                    </template>
+                </template>
+                <el-form-item label="单位">
+                    <el-input v-model="form.unit" placeholder="请输入单位" style="width: 200px;" />
+                    <!-- <el-select v-model="form.unitId" placeholder="请选择单位" style="width: 200px;" @change="selectUnitt">
+                        <el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
+                    </el-select>
+                    <el-button type="primary" plain icon="el-icon-plus"
+                        @click="$refs.addUnitRef.show()">添加单位</el-button> -->
+                </el-form-item>
+                <el-form-item label="有效期(天)">
+                    <el-input-number v-model="form.period" controls-position="right" step-strictly :min="1"
+                        placeholder="请输入有效期(天)"></el-input-number>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+            </span>
+        </el-dialog>
+        <addUnit ref="addUnitRef" @success="tbShopUnit" />
+        <shopList ref="shopListRef" @success="slectShop" />
+    </div>
 </template>
 
 <script>
-import { queryAllShopUser } from '@/api/shop'
+import { tbShopStorageGood } from '@/api/application'
+import { queryAllShopUser, tbShopUnit } from '@/api/shop'
+import uploadImg from '@/components/uploadImg'
+import addUnit from '@/views/product/components/addUnit'
+import shopList from '@/components/shopList'
 export default {
+    components: {
+        uploadImg,
+        addUnit,
+        shopList
+    },
     data() {
+        const nameValidator = (rule, value, callback) => {
+            if (this.form.source == 0) {
+                if (!this.form.name) {
+                    callback(new Error('请输入酒名名'))
+                } else {
+                    callback()
+                }
+            } else {
+                if (!this.productIds.length) {
+                    callback(new Error('请选择商品'))
+                } else {
+                    callback()
+                }
+            }
+        }
         return {
-            dialogVisible: true,
+            dialogVisible: false,
             tabs: [
                 {
                     value: 0,
@@ -47,15 +113,22 @@ export default {
                     label: '从商品添加'
                 }
             ],
+            units: [],
             loading: false,
             options: [],
+            productIds: [],
             form: {
-                source: '',
-                id: '',
-                imgUrl: '',
                 name: '',
+                imgUrl: '',
+                source: 0,
+                id: '',
+                goods: [
+                    {
+                        imgUrl: '',
+                        name: '',
+                    }
+                ],
                 period: '',
-                shopId: '',
                 unit: ''
             },
             resetForm: '',
@@ -63,8 +136,8 @@ export default {
                 name: [
                     {
                         required: true,
-                        message: ' ',
+                        validator: nameValidator,
-                        trigger: 'blur'
+                        trigger: 'change'
                     }
                 ]
             }
@@ -73,8 +146,35 @@ export default {
     mounted() {
         this.resetForm = { ...this.form }
         // this.getTableData()
+        this.tbShopUnit()
     },
     methods: {
+        slectShop(res) {
+            if (this.productIds.length) {
+                res.map(async item => {
+                    if (!await this.checkShop(item.id)) {
+                        this.productIds.push({ ...item })
+                    }
+                })
+            } else {
+                this.productIds = res
+            }
+        },
+        selectUnitt(e) {
+            this.form.unit = this.units.find(item => item.id == e).name
+        },
+        // 获取单位
+        async tbShopUnit() {
+            try {
+                const res = await tbShopUnit({
+                    shopId: localStorage.getItem('shopId'),
+                    sort: 'id',
+                    page: 0,
+                    size: 100
+                })
+                this.units = res.content
+            } catch (error) { }
+        },
         // 切换类型
         tabChange(item) {
             this.form.source = this.tabs.findIndex(i => i.value == item.value)
@@ -95,12 +195,24 @@ export default {
         },
         // 提交
         onSubmitHandle() {
-            console.log(this.form)
             this.$refs.form.validate(async valid => {
                 if (valid) {
                     try {
-                        this.form.shopId = localStorage.getItem('shopId')
+                        if (this.form.source == 0) {
-                        let res = await tbShopCategoryPost(this.form, this.form.id ? 'put' : 'post')
+                            //  手动大导入
+                            this.form.goods = [{
+                                name: this.form.name,
+                                imgUrl: this.form.imgUrl
+                            }]
+                        } else {
+                            this.form.goods = this.productIds.map(item => {
+                                return {
+                                    name: item.name,
+                                    imgUrl: item.coverImg
+                                }
+                            })
+                        }
+                        let res = await tbShopStorageGood(this.form, this.form.id ? 'put' : 'post')
                         this.$emit('success', res)
                         this.close()
                         this.$notify({
@@ -115,18 +227,14 @@ export default {
             })
         },
         show(obj) {
-            // console.log(obj)
             this.dialogVisible = true
-            if (obj.pid) {
-                this.form.pid = obj.pid
-            }
             if (obj && obj.id) {
                 this.form = obj
-                if (obj.pic) {
+                if (obj.imgUrl && obj.source == 0) {
                     setTimeout(() => {
                         this.$refs.uploadImg.fileList = [
                             {
-                                url: obj.pic
+                                url: obj.imgUrl
                             }
                         ]
                     }, 100)
@@ -137,14 +245,30 @@ export default {
             this.dialogVisible = false
         },
         reset() {
+            if (this.form.source == 0) {
+                this.$refs.uploadImg.clearFiles()
+            }
             this.form = { ...this.resetForm }
-            this.$refs.uploadImg.clearFiles()
+            this.$refs.form.resetFields()
+
         }
     }
 }
 </script>
 
 <style scoped lang="scss">
+.goods_info {
+    background-color: #f9f9f9;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    .info {
+        flex: 1;
+        padding-left: 10px;
+    }
+}
+
 .head-container {
     display: flex;
     justify-content: center;
@@ -194,4 +318,71 @@ export default {
         }
     }
 }
+
+.shop_list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item_wrap {
+        $size: 80px;
+
+        .item {
+            $radius: 4px;
+            width: $size;
+            height: $size;
+            border-radius: $radius;
+            overflow: hidden;
+            position: relative;
+            margin-right: 10px;
+            margin-top: 10px;
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            &::after {
+                content: attr(data-index);
+                font-size: 12px;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                border-radius: 0 0 $radius 0;
+                align-items: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 10;
+            }
+
+            &::before {
+                content: '删除';
+                font-size: 12px;
+                width: 100%;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 10;
+                transition: all .1s ease-in-out;
+            }
+        }
+
+        .name {
+            width: $size;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
 </style>

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

@@ -3,29 +3,70 @@
         <div class="head-container">
             <el-form :model="query" inline>
                 <el-form-item>
-                    <el-button type="primary">添加酒品</el-button>
+                    <el-button type="primary" @click="$refs.addModal.show()">添加酒品</el-button>
                 </el-form-item>
                 <el-form-item label="搜索">
                     <el-input v-model="query.name" placeholder="酒名"></el-input>
                 </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>
         <div class="head-container">
-            <el-table :data="tableData.data" v-loading="tableData.loading"></el-table>
+            <el-table :data="tableData.data" v-loading="tableData.loading">
+                <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>
+                            <span style="margin-left: 10px;">{{ scope.row.name }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="单位" prop="unit">
+                    <template v-slot="scope">
+                        <el-tag type="primary">{{ scope.row.unit }}</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="有效期(天)" prop="period"></el-table-column>
+                <el-table-column label="来源" prop="source">
+                    <template v-slot="scope">
+                        <span v-if="scope.row.source == 0">手动导入</span>
+                        <span v-if="scope.row.source == 1">商品导入</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="120">
+                    <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>
+                            <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>
+                            </el-popconfirm>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
         </div>
-        <addModal />
+        <div class="head-container">
+            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+                @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        </div>
+        <addModal ref="addModal" @success="getTableData" />
+        <winAddModal ref="winAddModal" />
     </div>
 </template>
 
 <script>
+import { tbShopStorageGoodlist, tbShopStorageGood } from '@/api/application'
 import addModal from './addModal'
+import winAddModal from '../winestorage/addModal'
 export default {
     components: {
-        addModal
+        addModal,
+        winAddModal
     },
     data() {
         return {
@@ -40,9 +81,7 @@ export default {
                 }
             ],
             query: {
-                name: "",
+                name: ""
-                telphone: "",
-                status: 1
             },
             tableData: {
                 data: [],
@@ -52,6 +91,50 @@ export default {
                 total: 0
             }
         }
+    },
+    mounted() {
+        this.getTableData()
+    },
+    methods: {
+        // 删除
+        async delHandle(row) {
+            try {
+                let obj = { ...row }
+                obj.isDel = 1
+                await tbShopStorageGood(obj, 'put')
+                this.$notify.success('删除成功')
+                this.getTableData()
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 重置查询
+        resetHandle() {
+            this.tableData.page = 0;
+            this.query.name = ''
+            this.getTableData()
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1;
+            this.getTableData()
+        },
+        // 获取商品列表
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbShopStorageGoodlist({
+                    name: this.query.name,
+                    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>

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

@@ -1,23 +1,31 @@
 <template>
-    <el-dialog :title="form.id ? '编辑分类' : '添加分类'" :visible.sync="dialogVisible" @close="reset">
+    <el-dialog :title="form.id ? '编辑存酒' : '添加存酒'" width="500px" :visible.sync="dialogVisible" @close="reset">
         <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
-            <el-form-item label="选择用户" prop="nickname">
+            <template v-if="!form.id">
-                <el-select v-model="form.nickname" placeholder="请输入用户昵称" filterable remote :remote-method="getTableData"
+                <el-form-item label="选择用户" prop="userid">
-                    :loading="loading">
+                    <el-select v-model="form.userid" placeholder="请输入用户昵称" filterable remote
-                    <el-option v-for="item in options" :key="item.id" :label="`${item.nickName}-${item.telephone}`"
+                        :remote-method="queryAllShopUser" :loading="loading" @change="userChange">
-                        :value="item.id">
+                        <el-option v-for="item in options" :key="item.id" :label="`${item.nickName}-${item.telephone}`"
-                    </el-option>
+                            :value="item.id">
-                </el-select>
+                        </el-option>
-            </el-form-item>
+                    </el-select>
-            <el-form-item label="选择酒品">
+                </el-form-item>
-                <el-select v-model="form.index">
+                <el-form-item label="选择酒品">
-                    <el-option label="顶级" :value="1"></el-option>
+                    <el-select v-model="form.name" @change="wineChange" v-if="!wine">
-                    <el-option label="饮品" :value="2"></el-option>
+                        <el-option :label="item.name" :value="item.name" v-for="(item, index) in wineList"
-                    <el-option label="烤串" :value="3"></el-option>
+                            :key="index"></el-option>
-                </el-select>
+                    </el-select>
-            </el-form-item>
+                    <div class="goods_info" v-else>
-            <el-form-item label="数量">
+                        <el-image :src="form.imgUrl" style="width: 50px;height: 50px;"></el-image>
-                <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
+                        <div class="info">{{ form.name }}</div>
+                    </div>
+                </el-form-item>
+                <el-form-item label="数量">
+                    <el-input-number v-model="form.num" :step="1" step-strictly :min="1"></el-input-number>
+                </el-form-item>
+            </template>
+            <el-form-item label="数量" v-else>
+                <el-input-number v-model="num" :step="1" step-strictly :min="1" :max="form.num"></el-input-number>
             </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
@@ -29,19 +37,21 @@
 
 <script>
 import { queryAllShopUser } from '@/api/shop'
+import { tbShopStorageGoodlist, storageWin, storagePut } from '@/api/application'
 export default {
     data() {
         return {
             dialogVisible: false,
             loading: false,
             options: [],
+            num: '',
+            wine: false,
             form: {
                 id: '',
                 imgUrl: '',
                 name: '',
                 nickname: '',
-                num: '',
+                num: 1,
-                shopId: '',
                 status: '',
                 telphone: '',
                 unit: '',
@@ -50,23 +60,50 @@ export default {
             },
             resetForm: '',
             rules: {
-                name: [
+                userid: [
                     {
                         required: true,
                         message: ' ',
                         trigger: 'blur'
                     }
                 ]
-            }
+            },
+            wineList: []
         }
     },
     mounted() {
         this.resetForm = { ...this.form }
-        this.getTableData()
+        this.queryAllShopUser()
+        this.tbShopStorageGoodlist()
     },
     methods: {
+        // 选择用户
+        userChange(e) {
+            let user = this.options.find(item => item.id == e)
+            this.form.nickname = user.nickName
+            this.form.telphone = user.telephone
+        },
+        // 选择酒品
+        wineChange(e) {
+            let wine = this.wineList.find(item => item.name == e)
+            this.form.imgUrl = wine.imgUrl
+            this.form.expDay = wine.period
+            this.form.unit = wine.unit
+        },
+        // 获取酒品列表
+        async tbShopStorageGoodlist() {
+            try {
+                const res = await tbShopStorageGoodlist({
+                    page: 0,
+                    size: 100
+                })
+                this.wineList = res.content
+            } catch (error) {
+                console.log(error)
+            }
+        },
         // 获取用户列表
-        async getTableData(query = '') {
+        async queryAllShopUser(query = '') {
             this.loading = true
             try {
                 const res = await queryAllShopUser({
@@ -85,47 +122,67 @@ export default {
             this.$refs.form.validate(async valid => {
                 if (valid) {
                     try {
-                        this.form.shopId = localStorage.getItem('shopId')
+                        let res = ''
-                        let res = await tbShopCategoryPost(this.form, this.form.id ? 'put' : 'post')
+                        if (this.form.id) {
+                            res = await storagePut({
+                                id: this.form.id,
+                                num: this.num,
+                                type: 0
+                            })
+                            this.$notify({
+                                title: '成功',
+                                message: `取酒成功`,
+                                type: 'success'
+                            });
+                        } else {
+                            res = await storageWin(this.form)
+                            this.$notify({
+                                title: '成功',
+                                message: `存酒成功`,
+                                type: 'success'
+                            });
+                        }
                         this.$emit('success', res)
                         this.close()
-                        this.$notify({
-                            title: '成功',
-                            message: `${this.form.id ? '编辑' : '添加'}成功`,
-                            type: 'success'
-                        });
                     } catch (error) {
                         console.log(error)
                     }
                 }
             })
         },
-        show(obj) {
+        async show(obj = {}, wine = false) {
-            // console.log(obj)
             this.dialogVisible = true
-            if (obj.pid) {
-                this.form.pid = obj.pid
-            }
             if (obj && obj.id) {
-                this.form = obj
+                this.form = { ...obj }
-                if (obj.pic) {
-                    setTimeout(() => {
-                        this.$refs.uploadImg.fileList = [
-                            {
-                                url: obj.pic
-                            }
-                        ]
-                    }, 100)
-                }
             }
+            if (obj && obj.name) {
+                this.form.name = obj.name
+                this.form.imgUrl = obj.imgUrl
+                this.form.expDay = obj.expDay
+                this.form.unit = obj.unit
+            }
+            this.wine = wine
         },
         close() {
             this.dialogVisible = false
         },
         reset() {
             this.form = { ...this.resetForm }
-            this.$refs.uploadImg.clearFiles()
         }
     }
 }
-</script>
+</script>
+
+<style scoped lang="scss">
+.goods_info {
+    background-color: #f9f9f9;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    .info {
+        flex: 1;
+        padding-left: 10px;
+    }
+}
+</style>

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

@@ -3,7 +3,7 @@
         <div class="head-container">
             <el-form :model="query" inline>
                 <el-form-item>
-                    <el-button type="primary">添加存酒</el-button>
+                    <el-button type="primary" @click="$refs.addModal.show()">添加存酒</el-button>
                 </el-form-item>
                 <el-form-item label="搜索">
                     <el-input v-model="query.name" placeholder="酒名/用户昵称"></el-input>
@@ -24,14 +24,63 @@
             </el-form>
         </div>
         <div class="head-container">
-            <el-table :data="tableData.data" v-loading="tableData.loading"></el-table>
+            <el-table :data="tableData.data" v-loading="tableData.loading">
+                <el-table-column label="用户名" prop="nickname">
+                    <template v-slot="scope">
+                        <div style="display: flex;align-items: center;">
+                            <el-image src=""
+                                style="width:40px;height: 40px;background-color: #efefef;display: flex;align-items: center;justify-content: center;">
+                                <i class="el-icon-folder-delete" slot="error" style="font-size: 20px;color: #999;"></i>
+                            </el-image>
+                            <span style="margin-left: 10px;">{{ scope.row.telphone }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <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;">
+                                <i class="el-icon-folder-delete" slot="error"></i>
+                            </el-image>
+                            <span style="margin-left: 10px;">{{ scope.row.name }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="数量" prop="name">
+                    <template v-slot="scope">
+                        <span>{{ scope.row.num }}({{ scope.row.unit }})</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="存酒时间" prop="savTime"></el-table-column>
+                <el-table-column label="到期时间" prop="expTime"></el-table-column>
+                <el-table-column label="状态" prop="status">
+                    <template v-slot="scope">
+                        <el-tag :type="statusList.find(item => item.value == scope.row.status).type">{{
+                            statusList.find(item => item.value == scope.row.status).label }}</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="120">
+                    <template v-slot="scope">
+                        <div style="display: flex;gap: 10px;">
+                            <el-button type="text">查看记录</el-button>
+                            <el-button type="text" @click="$refs.addModal.show(scope.row)"
+                                v-if="scope.row.status == 1">取酒</el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
         </div>
-        <addModal />
+        <div class="head-container">
+            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+                @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        </div>
+        <addModal ref="addModal" @success="getTableData" />
     </div>
 </template>
 
 <script>
 import addModal from './addModal'
+import { storageList } from '@/api/application'
 export default {
     components: {
         addModal
@@ -41,11 +90,13 @@ export default {
             statusList: [
                 {
                     value: 0,
-                    label: '已取完'
+                    label: '已取完',
+                    type: 'warning'
                 },
                 {
                     value: 1,
-                    label: '未取完'
+                    label: '存储中',
+                    type: 'primary'
                 }
             ],
             query: {
@@ -61,6 +112,38 @@ export default {
                 total: 0
             }
         }
+    },
+    mounted() {
+        this.getTableData()
+    },
+    methods: {
+        // 重置查询
+        resetHandle() {
+            this.tableData.page = 0;
+            this.query.name = ''
+            this.getTableData()
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1;
+            this.getTableData()
+        },
+        // 获取商品列表
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await storageList({
+                    ...this.query,
+                    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>

src/views/application/winestorage.vue

@@ -38,7 +38,7 @@ export default {
     data() {
         return {
             applocation: JSON.parse(localStorage.getItem('applocation')),
-            tabActive: 1,
+            tabActive: 0,
             tabs: [
                 {
                     value: 1,