From 259aec07cd9016c4c2d8cfdc0b65a4ab695ea4ff Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Thu, 1 Feb 2024 12:11:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A1=8C=E5=8F=B0=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  59 +++-
 src/api/invoicing.js                          |  12 +
 src/api/table.js                              |  64 ++++
 .../shopList/index.vue}                       |   7 +-
 src/store/modules/app.js                      |   2 +-
 src/views/invoicing/operating_record.vue      |   9 +-
 src/views/invoicing/operation_in.vue          | 274 ++++++++++++++++++
 src/views/invoicing/operation_out.vue         | 274 ++++++++++++++++++
 .../invoicing/supplier_manage/purchase.vue    |   2 +-
 .../supplier_manage/purchase_detail.vue       |   2 +-
 .../invoicing/supplier_manage/refund.vue      | 136 +++++++++
 src/views/product/add_shop.vue                |  59 +---
 src/views/product/components/addGroup.vue     |   2 +-
 src/views/table/components/addEara.vue        |  73 +++++
 src/views/table/components/addTable.vue       | 117 ++++++++
 src/views/table/table_list.vue                | 209 +++++++++++++
 16 files changed, 1233 insertions(+), 68 deletions(-)
 create mode 100644 src/api/table.js
 rename src/{views/product/components/shopList.vue => components/shopList/index.vue} (94%)
 create mode 100644 src/views/invoicing/operation_in.vue
 create mode 100644 src/views/invoicing/operation_out.vue
 create mode 100644 src/views/invoicing/supplier_manage/refund.vue
 create mode 100644 src/views/table/components/addEara.vue
 create mode 100644 src/views/table/components/addTable.vue
 create mode 100644 src/views/table/table_list.vue

diff --git a/src/App.vue b/src/App.vue
index 19381ca..8f6cd69 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .tips {
   color: #999;
 }
@@ -33,4 +33,61 @@ export default {
   align-items: center;
   gap: 10px;
 }
+
+.shop_type_box {
+  display: flex;
+
+  .item {
+    $borderColor: #1890FF;
+    margin-right: 14px;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    padding: 6px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    &:hover {
+      cursor: pointer;
+      border-color: $borderColor;
+    }
+
+    &.active {
+      border-color: $borderColor;
+
+      .active_dot {
+        display: flex;
+      }
+    }
+
+    .active_dot {
+      $size: 26px;
+      background-color: $borderColor;
+      color: #fff;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: $size;
+      height: $size;
+      clip-path: polygon(100% 0, 0 0, 100% 100%);
+      display: none;
+      justify-content: flex-end;
+      padding-right: 2px;
+    }
+
+    .s_title {
+      font-weight: bold;
+      color: #555;
+    }
+
+    .intro {
+      color: #999;
+      font-size: 12px;
+      margin-top: -10px;
+    }
+  }
+}
 </style>
diff --git a/src/api/invoicing.js b/src/api/invoicing.js
index 29a1731..66a2a31 100644
--- a/src/api/invoicing.js
+++ b/src/api/invoicing.js
@@ -131,4 +131,16 @@ export function tbProductStockOperateDetail(id) {
     })
 }
 
+/**
+ * 操作出库/入库
+ * @returns
+ */
+export function tbProductStockOperateOutAndOn(data) {
+    return request({
+        url: `/api/tbProductStockOperate/outAndOn`,
+        method: 'post',
+        data
+    })
+}
+
 
diff --git a/src/api/table.js b/src/api/table.js
new file mode 100644
index 0000000..006defc
--- /dev/null
+++ b/src/api/table.js
@@ -0,0 +1,64 @@
+// 桌台管理
+import request from '@/utils/request'
+
+/**
+ * 台桌列表
+ * @returns
+ */
+export function tbShopTableGet(params) {
+    return request({
+        url: `/api/tbShopTable`,
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 区域
+ * @returns
+ */
+export function tbShopAreaGet(params) {
+    return request({
+        url: `/api/tbShopArea`,
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 增加区域
+ * @returns
+ */
+export function tbShopArea(data, method) {
+    return request({
+        url: `/api/tbShopArea`,
+        method: method,
+        data
+    })
+}
+
+/**
+ * 删除区域
+ * @returns
+ */
+export function tbShopAreaDelete(data) {
+    return request({
+        url: `/api/tbShopArea`,
+        method: 'DELETE',
+        data
+    })
+}
+
+/**
+ * 增加台桌
+ * @returns
+ */
+export function tbShopTable(data, method) {
+    return request({
+        url: `/api/tbShopTable`,
+        method: method,
+        data
+    })
+}
+
+
diff --git a/src/views/product/components/shopList.vue b/src/components/shopList/index.vue
similarity index 94%
rename from src/views/product/components/shopList.vue
rename to src/components/shopList/index.vue
index 702c4c1..f17351a 100644
--- a/src/views/product/components/shopList.vue
+++ b/src/components/shopList/index.vue
@@ -20,7 +20,11 @@
                 <el-table-column label="商品信息">
                     <template v-slot="scope">
                         <div class="shop_info">
-                            <el-image :sr="scope.row.coverImg" style="width: 30px;height: 30px;"></el-image>
+                            <el-image :src="scope.row.coverImg" style="width: 30px;height: 30px;">
+                                <div class="img_error" slot="error">
+                                    <i class="icon el-icon-document-delete"></i>
+                                </div>
+                            </el-image>
                             <span>{{ scope.row.name }}</span>
                         </div>
                     </template>
@@ -125,7 +129,6 @@ export default {
             }
         },
         show(goods) {
-            console.log('show-goods===', goods)
             this.dialogVisible = true
             if (goods && goods.length) {
                 this.goods = goods
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index b9d0726..a12d707 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -6,7 +6,7 @@ const state = {
     withoutAnimation: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'Default'
+  size: Cookies.get('size') || 'default'
 }
 
 const mutations = {
diff --git a/src/views/invoicing/operating_record.vue b/src/views/invoicing/operating_record.vue
index 2096d94..0f73f10 100644
--- a/src/views/invoicing/operating_record.vue
+++ b/src/views/invoicing/operating_record.vue
@@ -24,7 +24,7 @@
                 <el-table-column label="备注" prop="remark"></el-table-column>
                 <el-table-column label="操作人" prop="status">
                     <template v-slot="scope">
-                        {{ scope.row.operatorSnap.name }}
+                        {{ scope.row.operatorSnap.account }}
                     </template>
                 </el-table-column>
                 <el-table-column label="创建时间" prop="updatedAt">
@@ -32,10 +32,13 @@
                         {{ dayjs(scope.row.stockTime).format('YYYY-MM-DD HH:mm:ss') }}
                     </template>
                 </el-table-column>
-                <el-table-column label="操作" width="80">
+                <el-table-column label="操作" width="120">
                     <template v-slot="scope">
                         <el-button type="text" size="mini" @click="$refs.operatingDetail.show(scope.row.id)">
-                            查看详情
+                            详情
+                        </el-button>
+                        <el-button type="text" size="mini" @click="$refs.operatingDetail.show(scope.row.id)">
+                            作废
                         </el-button>
                     </template>
                 </el-table-column>
diff --git a/src/views/invoicing/operation_in.vue b/src/views/invoicing/operation_in.vue
new file mode 100644
index 0000000..726cbc2
--- /dev/null
+++ b/src/views/invoicing/operation_in.vue
@@ -0,0 +1,274 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <el-form ref="queryForm" :model="queryForm" :rules="queryRules" label-position="left" label-width="80px">
+                <el-form-item label="出库类型">
+                    <div class="shop_type_box">
+                        <div class="item" v-for="(item, index) in shopTypes" :key="index"
+                            :class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
+                            <div class="s_title">{{ item.label }}</div>
+                            <div class="active_dot">
+                                <i class="el-icon-check"></i>
+                            </div>
+                        </div>
+                    </div>
+                </el-form-item>
+                <el-row>
+                    <el-col :span="8" v-if="shopTypes[shopTypesActive].value == 'purveyor'">
+                        <el-form-item label="供应商" prop="purveyorId">
+                            <el-select v-model="queryForm.purveyorId" placeholder="请选择供应商" style="width: 220px;">
+                                <el-option :label="item.purveyorName" :value="item.id" v-for="item in purveyorList"
+                                    :key="item.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="入库时间" prop="time">
+                            <el-date-picker v-model="queryForm.time" type="date" format="yyyy-MM-dd"
+                                value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 220px;">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row v-if="shopTypes[shopTypesActive].value == 'purveyor'">
+                    <el-col :span="8">
+                        <el-form-item label="应收金额">
+                            <el-input v-model="queryForm.totalAmount" placeholder="请输入应收金额"
+                                style="width: 220px;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="实收金额">
+                            <el-input v-model="queryForm.paidAmount" placeholder="请输入实收金额" style="width: 220px;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row v-if="shopTypes[shopTypesActive].value == 'purveyor'">
+                    <el-col :span="8">
+                        <el-form-item label="付款时间">
+                            <el-date-picker v-model="queryForm.paidAt" type="date" format="yyyy-MM-dd"
+                                value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 220px;">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="批号">
+                            <el-input v-model="queryForm.batchNumber" placeholder="请输入批号" style="width: 220px;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="备注">
+                            <el-input v-model="queryForm.remark" placeholder="请输入备注" style="width: 220px;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-form-item>
+                    <el-button type="primary" @click="$refs.shopList.show(tableData.list)">选择商品</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="head-container">
+            <el-button type="primary" plain>
+                共{{ tableData.list.length }}种商品，金额合计<span style="color: red;">￥{{ queryForm.totalAmount }}</span>
+            </el-button>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list">
+                <el-table-column type="index" width="50"></el-table-column>
+                <el-table-column label="商品名称" prop="name">
+                    <template v-slot="scope">
+                        <div class="name_wrap">
+                            <span class="name">{{ scope.row.name }}</span>
+                            <el-tag type="info" v-if="scope.row.specSnap" size="mini">{{ scope.row.specSnap }}</el-tag>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="进价">
+                    <template v-slot="scope">
+                        <el-input-number v-model="scope.row.guidePrice" :min="0" controls-position="right"
+                            @change="e => scope.row.totalAmount = e * scope.row.number"></el-input-number>
+                        <div class="tips">成本价￥{{ scope.row.costPrice }}/{{ scope.row.unitName }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="数量">
+                    <template v-slot="scope">
+                        <el-input-number v-model="scope.row.number" :min="0" controls-position="right"
+                            @change="e => scope.row.totalAmount = e * scope.row.guidePrice"></el-input-number>
+                        <div class="tips">入库前：{{ scope.row.stockNumber }}{{ scope.row.unitName }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="小计">
+                    <template v-slot="scope">
+                        <el-input-number v-model="scope.row.totalAmount" :min="0"
+                            controls-position="right"></el-input-number>
+                    </template>
+                </el-table-column>
+                <el-table-column label="变动后剩余库存">
+                    <template v-slot="scope">
+                        {{ scope.row.stockNumber + scope.row.number }}{{ scope.row.unitName }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="80">
+                    <template v-slot="scope">
+                        <el-button type="text" @click="tableData.list.splice(scope.$index, 1)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div>
+            <el-button type="primary" @click="submitHandle" :loading="queryFormLoading">确定</el-button>
+        </div>
+        <shopList ref="shopList" @success="selectShop" />
+        <el-dialog :visible.sync="showResult" :show-close="false" :close-on-press-escape="false"
+            :close-on-click-modal="false">
+            <el-result icon="success" title="出库提交成功" :subTitle="`共操作${tableData.list.length}件商品`">
+                <template slot="extra">
+                    <el-button type="primary" size="medium" @click="resetHandle">创建新的出库单</el-button>
+                    <router-link to="/invoicing/operating_record">
+                        <el-button size="medium">历史提交</el-button>
+                    </router-link>
+                </template>
+            </el-result>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import shopList from '@/components/shopList'
+import { tbShopPurveyorGet, tbProductStockOperateOutAndOn } from '@/api/invoicing'
+export default {
+    components: {
+        shopList
+    },
+    data() {
+        return {
+            shopTypesActive: 0,
+            shopTypes: [
+                {
+                    label: '供应商入库',
+                    value: 'purveyor'
+                },
+                {
+                    label: '其他入库',
+                    value: 'purchase'
+                }
+            ],
+            resetForm: '',
+            queryFormLoading: false,
+            queryForm: {
+                batchNumber: '',
+                list: [],
+                paidAmount: 0,
+                paidAt: '',
+                purveyorId: '',
+                purveyorName: '',
+                remark: '',
+                time: dayjs().format('YYYY-MM-DD'),
+                totalAmount: 0,
+                type: 'reject',
+                shopId: localStorage.getItem('shopId')
+            },
+            queryRules: {
+                purveyorId: [
+                    {
+                        required: true,
+                        message: ' ',
+                        trigger: 'change'
+                    }
+                ],
+                time: [
+                    {
+                        required: true,
+                        message: ' ',
+                        trigger: 'change'
+                    }
+                ]
+            },
+            purveyorList: [],
+            tableData: {
+                list: []
+            },
+            showResult: false
+        }
+    },
+    mounted() {
+        this.resetForm = { ...this.queryForm }
+        this.tbShopPurveyorGet()
+    },
+    methods: {
+        // 提交
+        submitHandle() {
+            this.$refs.queryForm.validate(async valid => {
+                if (valid) {
+                    try {
+                        this.queryFormLoading = true
+                        this.queryForm.list = this.tableData.list
+                        await tbProductStockOperateOutAndOn(this.queryForm)
+                        this.queryFormLoading = false
+                        this.showResult = true
+                    } catch (error) {
+                        console.log(error)
+                        this.queryFormLoading = false
+                    }
+                }
+            })
+        },
+        // 选择商品
+        selectShop(res) {
+            let arr = []
+            res.forEach(item => {
+                item.skuList.forEach(i => {
+                    arr.push({
+                        name: item.name,
+                        unitName: item.unitName,
+                        productId: item.id,
+                        number: 0,
+                        totalAmount: '',
+                        ...i
+                    })
+                })
+            })
+            console.log(arr)
+            this.tableData.list = arr
+        },
+        // 初始化
+        resetHandle() {
+            this.showResult = false
+            this.queryForm = { ...this.resetForm }
+            this.tableData.list = []
+        },
+        // 切换类型
+        changeTypeEnum(index) {
+            this.shopTypesActive = index
+            this.queryForm.type = this.shopTypes[index].value
+        },
+        // 获取供应商列表
+        async tbShopPurveyorGet() {
+            try {
+                const res = await tbShopPurveyorGet({
+                    shopId: localStorage.getItem('shopId'),
+                    page: 0,
+                    size: 100
+                })
+                this.purveyorList = res.content
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.name_wrap {
+    display: flex;
+    align-items: center;
+
+    .name {
+        margin-right: 10px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/invoicing/operation_out.vue b/src/views/invoicing/operation_out.vue
new file mode 100644
index 0000000..2f1cb12
--- /dev/null
+++ b/src/views/invoicing/operation_out.vue
@@ -0,0 +1,274 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <el-form ref="queryForm" :model="queryForm" :rules="queryRules" label-position="left" label-width="80px">
+                <el-form-item label="出库类型">
+                    <div class="shop_type_box">
+                        <div class="item" v-for="(item, index) in shopTypes" :key="index"
+                            :class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
+                            <div class="s_title">{{ item.label }}</div>
+                            <div class="active_dot">
+                                <i class="el-icon-check"></i>
+                            </div>
+                        </div>
+                    </div>
+                </el-form-item>
+                <el-row>
+                    <el-col :span="8" v-if="shopTypes[shopTypesActive].value == 'reject'">
+                        <el-form-item label="供应商" prop="purveyorId">
+                            <el-select v-model="queryForm.purveyorId" placeholder="请选择供应商" style="width: 220px;">
+                                <el-option :label="item.purveyorName" :value="item.id" v-for="item in purveyorList"
+                                    :key="item.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="出库时间" prop="time">
+                            <el-date-picker v-model="queryForm.time" type="date" format="yyyy-MM-dd"
+                                value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 220px;">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row v-if="shopTypes[shopTypesActive].value == 'reject'">
+                    <el-col :span="8">
+                        <el-form-item label="应收金额">
+                            <el-input v-model="queryForm.totalAmount" placeholder="请输入应收金额"
+                                style="width: 220px;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="实收金额">
+                            <el-input v-model="queryForm.paidAmount" placeholder="请输入实收金额" style="width: 220px;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row v-if="shopTypes[shopTypesActive].value == 'reject'">
+                    <el-col :span="8">
+                        <el-form-item label="付款时间">
+                            <el-date-picker v-model="queryForm.paidAt" type="date" format="yyyy-MM-dd"
+                                value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 220px;">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="批号">
+                            <el-input v-model="queryForm.batchNumber" placeholder="请输入批号" style="width: 220px;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="备注">
+                            <el-input v-model="queryForm.remark" placeholder="请输入备注" style="width: 220px;"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-form-item>
+                    <el-button type="primary" @click="$refs.shopList.show(tableData.list)">选择商品</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="head-container">
+            <el-button type="primary" plain>
+                共{{ tableData.list.length }}种商品，金额合计<span style="color: red;">￥{{ queryForm.totalAmount }}</span>
+            </el-button>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list">
+                <el-table-column type="index" width="50"></el-table-column>
+                <el-table-column label="商品名称" prop="name">
+                    <template v-slot="scope">
+                        <div class="name_wrap">
+                            <span class="name">{{ scope.row.name }}</span>
+                            <el-tag type="info" v-if="scope.row.specSnap" size="mini">{{ scope.row.specSnap }}</el-tag>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="进价">
+                    <template v-slot="scope">
+                        <el-input-number v-model="scope.row.guidePrice" :min="0" controls-position="right"
+                            @change="e => scope.row.totalAmount = e * scope.row.number"></el-input-number>
+                        <div class="tips">成本价￥{{ scope.row.costPrice }}/{{ scope.row.unitName }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="数量">
+                    <template v-slot="scope">
+                        <el-input-number v-model="scope.row.number" :min="0" controls-position="right"
+                            @change="e => scope.row.totalAmount = e * scope.row.guidePrice"></el-input-number>
+                        <div class="tips">出库前：{{ scope.row.stockNumber }}{{ scope.row.unitName }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="小计">
+                    <template v-slot="scope">
+                        <el-input-number v-model="scope.row.totalAmount" :min="0"
+                            controls-position="right"></el-input-number>
+                    </template>
+                </el-table-column>
+                <el-table-column label="变动后剩余库存">
+                    <template v-slot="scope">
+                        {{ scope.row.stockNumber - scope.row.number }}{{ scope.row.unitName }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="80">
+                    <template v-slot="scope">
+                        <el-button type="text" @click="tableData.list.splice(scope.$index, 1)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div>
+            <el-button type="primary" @click="submitHandle" :loading="queryFormLoading">确定</el-button>
+        </div>
+        <shopList ref="shopList" @success="selectShop" />
+        <el-dialog :visible.sync="showResult" :show-close="false" :close-on-press-escape="false"
+            :close-on-click-modal="false">
+            <el-result icon="success" title="出库提交成功" :subTitle="`共操作${tableData.list.length}件商品`">
+                <template slot="extra">
+                    <el-button type="primary" size="medium" @click="resetHandle">创建新的出库单</el-button>
+                    <router-link to="/invoicing/operating_record">
+                        <el-button size="medium">历史提交</el-button>
+                    </router-link>
+                </template>
+            </el-result>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import shopList from '@/components/shopList'
+import { tbShopPurveyorGet, tbProductStockOperateOutAndOn } from '@/api/invoicing'
+export default {
+    components: {
+        shopList
+    },
+    data() {
+        return {
+            shopTypesActive: 0,
+            shopTypes: [
+                {
+                    label: '供应商退货',
+                    value: 'reject'
+                },
+                {
+                    label: '其他出库',
+                    value: 'other-out'
+                }
+            ],
+            resetForm: '',
+            queryFormLoading: false,
+            queryForm: {
+                batchNumber: '',
+                list: [],
+                paidAmount: 0,
+                paidAt: '',
+                purveyorId: '',
+                purveyorName: '',
+                remark: '',
+                time: dayjs().format('YYYY-MM-DD'),
+                totalAmount: 0,
+                type: 'reject',
+                shopId: localStorage.getItem('shopId')
+            },
+            queryRules: {
+                purveyorId: [
+                    {
+                        required: true,
+                        message: ' ',
+                        trigger: 'change'
+                    }
+                ],
+                time: [
+                    {
+                        required: true,
+                        message: ' ',
+                        trigger: 'change'
+                    }
+                ]
+            },
+            purveyorList: [],
+            tableData: {
+                list: []
+            },
+            showResult: false
+        }
+    },
+    mounted() {
+        this.resetForm = { ...this.queryForm }
+        this.tbShopPurveyorGet()
+    },
+    methods: {
+        // 提交
+        submitHandle() {
+            this.$refs.queryForm.validate(async valid => {
+                if (valid) {
+                    try {
+                        this.queryFormLoading = true
+                        this.queryForm.list = this.tableData.list
+                        await tbProductStockOperateOutAndOn(this.queryForm)
+                        this.queryFormLoading = false
+                        this.showResult = true
+                    } catch (error) {
+                        console.log(error)
+                        this.queryFormLoading = false
+                    }
+                }
+            })
+        },
+        // 选择商品
+        selectShop(res) {
+            let arr = []
+            res.forEach(item => {
+                item.skuList.forEach(i => {
+                    arr.push({
+                        name: item.name,
+                        unitName: item.unitName,
+                        productId: item.id,
+                        number: 0,
+                        totalAmount: '',
+                        ...i
+                    })
+                })
+            })
+            console.log(arr)
+            this.tableData.list = arr
+        },
+        // 初始化
+        resetHandle() {
+            this.showResult = false
+            this.queryForm = { ...this.resetForm }
+            this.tableData.list = []
+        },
+        // 切换类型
+        changeTypeEnum(index) {
+            this.shopTypesActive = index
+            this.queryForm.type = this.shopTypes[index].value
+        },
+        // 获取供应商列表
+        async tbShopPurveyorGet() {
+            try {
+                const res = await tbShopPurveyorGet({
+                    shopId: localStorage.getItem('shopId'),
+                    page: 0,
+                    size: 100
+                })
+                this.purveyorList = res.content
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.name_wrap {
+    display: flex;
+    align-items: center;
+
+    .name {
+        margin-right: 10px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/invoicing/supplier_manage/purchase.vue b/src/views/invoicing/supplier_manage/purchase.vue
index 622714f..fcaab5b 100644
--- a/src/views/invoicing/supplier_manage/purchase.vue
+++ b/src/views/invoicing/supplier_manage/purchase.vue
@@ -2,7 +2,7 @@
     <div class="app-container">
         <div class="head-container">
             <div class="filter_wrap">
-                <el-input v-model="query.name" size="small" clearable placeholder="供应商" @keyup.enter.native="getTableData"
+                <el-input v-model="query.name" clearable placeholder="供应商" @keyup.enter.native="getTableData"
                     style="width: 200px;" />
                 <el-select v-model="query.type" placeholder="付款状态">
                     <el-option :label="item.label" :value="item.value" v-for="item in types" :key="item.id"></el-option>
diff --git a/src/views/invoicing/supplier_manage/purchase_detail.vue b/src/views/invoicing/supplier_manage/purchase_detail.vue
index 1b5cf03..b3207d4 100644
--- a/src/views/invoicing/supplier_manage/purchase_detail.vue
+++ b/src/views/invoicing/supplier_manage/purchase_detail.vue
@@ -104,7 +104,7 @@
                 <el-table-column label="备注" prop="remark"></el-table-column>
                 <el-table-column label="付款时间" prop="updatedAt">
                     <template v-slot="scope">
-                        {{ dayjs(scope.row.paidAt).format('YYYY-MM-DD HH:mm:ss') }}
+                        {{ scope.row.paidAt && dayjs(scope.row.paidAt).format('YYYY-MM-DD HH:mm:ss') }}
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" width="80">
diff --git a/src/views/invoicing/supplier_manage/refund.vue b/src/views/invoicing/supplier_manage/refund.vue
new file mode 100644
index 0000000..3ee03d9
--- /dev/null
+++ b/src/views/invoicing/supplier_manage/refund.vue
@@ -0,0 +1,136 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <div class="filter_wrap">
+                <el-input v-model="query.name" clearable placeholder="供应商" @keyup.enter.native="getTableData"
+                    style="width: 200px;" />
+                <el-select v-model="query.type" placeholder="付款状态">
+                    <el-option :label="item.label" :value="item.value" v-for="item in types" :key="item.id"></el-option>
+                </el-select>
+                <el-button type="primary" @click="getTableData">查询</el-button>
+                <el-button @click="resetHandle">重置</el-button>
+            </div>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="供应商" prop="purveyorName"></el-table-column>
+                <el-table-column label="剩余付款金额" prop="waitAmount">
+                    <template v-slot="scope">
+                        <span class="num" v-if="scope.row.waitAmount > 0">￥{{ scope.row.waitAmount }}</span>
+                        <span v-else>-</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="待付款笔数" prop="waitCount">
+                    <template v-slot="scope">
+                        <template v-if="scope.row.waitCount > 0">
+                            有<span class="count">{{ scope.row.waitCount }}笔</span>未付
+                        </template>
+                        <template v-else>-</template>
+                    </template>
+                </el-table-column>
+                <el-table-column label="状态" prop="type">
+                    <template v-slot="scope">
+                        <el-tag :type="scope.row.type == 0 ? 'warning' : 'success'">
+                            {{ scope.row.type == 0 ? '待支付' : '已完结' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="上笔进货日期" prop="lastTransactAt">
+                    <template v-slot="scope">
+                        {{ dayjs(scope.row.lastTransactAt).format('YYYY-MM-DD HH:mm:ss') }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="80">
+                    <template v-slot="scope">
+                        <router-link :to="{ name: 'purchase_detail', query: { purveyorId: scope.row.purveyorId } }">
+                            <el-button type="text" size="mini">查看详情</el-button>
+                        </router-link>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <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>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { tbShopPurveyorTransactGet, dictDetail } from '@/api/invoicing'
+export default {
+    data() {
+        return {
+            dayjs,
+            types: [],
+            query: {
+                name: '',
+                type: ''
+            },
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                sort: 'id',
+                loading: false,
+                list: []
+            }
+        }
+    },
+    mounted() {
+        this.dictDetail()
+        this.getTableData()
+    },
+    methods: {
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbShopPurveyorTransactGet({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    sort: this.tableData.sort,
+                    purveyorName: this.query.name,
+                    status: this.query.type,
+                    type: 'reject',
+                    shopId: localStorage.getItem('shopId')
+                })
+                this.tableData.loading = false
+                this.tableData.list = res.content
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 重置查询
+        resetHandle() {
+            this.query.name = ''
+            this.query.type = ''
+            this.tableData.page = 0;
+            this.getTableData()
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1
+            this.getTableData()
+        },
+        async dictDetail() {
+            const { content } = await dictDetail({
+                dictName: 'purveyor_transact_status',
+                size: 100,
+                page: 0
+            })
+            this.types = content
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.num {
+    color: #F56C6C;
+    font-weight: bold;
+}
+
+.count {
+    color: #409EFF;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/product/add_shop.vue b/src/views/product/add_shop.vue
index ad5d8cf..d0a1206 100644
--- a/src/views/product/add_shop.vue
+++ b/src/views/product/add_shop.vue
@@ -192,7 +192,7 @@
 import { tbShopUnit, tbShopCategoryGet, tbProductPost, tbProductSpecGet, tbProductGetDetail, tbProductPut } from "@/api/shop";
 import addUnit from './components/addUnit'
 import addClassify from './components/addClassify'
-import shopList from './components/shopList'
+import shopList from '@/components/shopList'
 import uploadImg from '@/components/uploadImg'
 import settings from '@/settings'
 export default {
@@ -556,63 +556,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.shop_type_box {
-    display: flex;
-
-    .item {
-        $borderColor: #1890FF;
-        margin-right: 14px;
-        border: 1px solid #ececec;
-        border-radius: 4px;
-        padding: 6px 24px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-
-        &:hover {
-            cursor: pointer;
-            border-color: $borderColor;
-        }
-
-        &.active {
-            border-color: $borderColor;
-
-            .active_dot {
-                display: flex;
-            }
-        }
-
-        .active_dot {
-            $size: 26px;
-            background-color: $borderColor;
-            color: #fff;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: $size;
-            height: $size;
-            clip-path: polygon(100% 0, 0 0, 100% 100%);
-            display: none;
-            justify-content: flex-end;
-            padding-right: 2px;
-        }
-
-        .s_title {
-            font-weight: bold;
-            color: #555;
-        }
-
-        .intro {
-            color: #999;
-            font-size: 12px;
-            margin-top: -10px;
-        }
-    }
-}
-
 .shop_list {
     .item {
         display: flex;
diff --git a/src/views/product/components/addGroup.vue b/src/views/product/components/addGroup.vue
index 6dc6412..c785a21 100644
--- a/src/views/product/components/addGroup.vue
+++ b/src/views/product/components/addGroup.vue
@@ -39,7 +39,7 @@
 
 <script>
 import { tbProductGroupPost, tbProductGroupPut, productListGet } from '@/api/shop'
-import shopList from './shopList'
+import shopList from '@/components/shopList'
 export default {
     components: {
         shopList
diff --git a/src/views/table/components/addEara.vue b/src/views/table/components/addEara.vue
new file mode 100644
index 0000000..58a9afc
--- /dev/null
+++ b/src/views/table/components/addEara.vue
@@ -0,0 +1,73 @@
+<template>
+    <el-dialog :title="form.id ? '编辑区域' : '添加区域'" :visible.sync="dialogVisible" @close="reset">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+            <el-form-item label="区域名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入区域名称"></el-input>
+            </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>
+</template>
+
+<script>
+import { tbShopArea } from '@/api/table'
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                id: '',
+                name: ''
+            },
+            rules: {
+                name: [
+                    {
+                        required: true,
+                        message: '请输入区域名称',
+                        trigger: 'blur'
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        onSubmitHandle() {
+            this.$refs.form.validate(async valid => {
+                if (valid) {
+                    try {
+                        let res = await tbShopArea({
+                            ...this.form,
+                            shopId: localStorage.getItem('shopId')
+                        }, this.form.id ? 'put' : 'post')
+                        this.$emit('success', res)
+                        this.close()
+                        this.$notify({
+                            title: '成功',
+                            message: `${this.form.id ? '编辑' : '添加'}成功`,
+                            type: 'success'
+                        });
+                    } catch (error) {
+                        console.log(error)
+                    }
+                }
+            })
+        },
+        show(obj) {
+            this.dialogVisible = true
+            if (obj && obj.id) {
+                this.form = JSON.parse(JSON.stringify(obj))
+            }
+        },
+        close() {
+            this.dialogVisible = false
+        },
+        reset() {
+            this.form.id = ''
+            this.form.name = ''
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/table/components/addTable.vue b/src/views/table/components/addTable.vue
new file mode 100644
index 0000000..8bfd55b
--- /dev/null
+++ b/src/views/table/components/addTable.vue
@@ -0,0 +1,117 @@
+<template>
+    <el-dialog :title="form.id ? '编辑台桌' : '添加台桌'" :visible.sync="dialogVisible" @close="reset">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+            <el-form-item label="选择区域" prop="areaId">
+                <el-select v-model="form.areaId" placeholder="请选择区域">
+                    <el-option :label="item.name" :value="item.id" v-for="item in areaList" :key="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="台桌名称">
+                <el-input v-model="form.name" placeholder="请输入台桌名称"></el-input>
+            </el-form-item>
+            <el-form-item label="客座数">
+                <el-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number>
+            </el-form-item>
+            <el-form-item label="网络预定开关">
+                <el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
+            </el-form-item>
+            <el-form-item label="类型">
+                <el-radio-group v-model="form.type">
+                    <el-radio-button :label="0">低消</el-radio-button>
+                    <el-radio-button :label="2">计时</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="最低消费" v-if="form.type == 0">
+                <el-input-number v-model="form.amount" :min="0" controls-position="right"></el-input-number>
+            </el-form-item>
+            <el-form-item label="每小时收费" v-if="form.type == 2">
+                <el-input-number v-model="form.perhour" :min="0" controls-position="right"></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>
+</template>
+
+<script>
+import { tbShopTable, tbShopAreaGet } from '@/api/table'
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                id: '',
+                name: '',
+                areaId: '',
+                maxCapacity: 0,
+                isPredate: 1,
+                type: 2,
+                perhour: 0,
+                amount: 0
+            },
+            rules: {
+                areaId: [
+                    {
+                        required: true,
+                        message: '请选择区域',
+                        trigger: 'blur'
+                    }
+                ]
+            },
+            areaList: []
+        }
+    },
+    mounted() {
+        this.tbShopAreaGet()
+    },
+    methods: {
+        onSubmitHandle() {
+            this.$refs.form.validate(async valid => {
+                if (valid) {
+                    try {
+                        let res = await tbShopTable({
+                            ...this.form,
+                            shopId: localStorage.getItem('shopId')
+                        }, this.form.id ? 'put' : 'post')
+                        this.$emit('success', res)
+                        this.close()
+                        this.$notify({
+                            title: '成功',
+                            message: `${this.form.id ? '编辑' : '添加'}成功`,
+                            type: 'success'
+                        });
+                    } catch (error) {
+                        console.log(error)
+                    }
+                }
+            })
+        },
+        show(obj) {
+            this.dialogVisible = true
+            if (obj && obj.id) {
+                this.form = JSON.parse(JSON.stringify(obj))
+            }
+        },
+        close() {
+            this.dialogVisible = false
+        },
+        reset() {
+            this.form.id = ''
+            this.form.name = ''
+        },
+        // 获取区域
+        async tbShopAreaGet() {
+            try {
+                const { content } = await tbShopAreaGet({
+                    shopId: localStorage.getItem('shopId')
+                })
+                this.areaList = content
+            } catch (error) {
+                console.log(error);
+            }
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/table/table_list.vue b/src/views/table/table_list.vue
new file mode 100644
index 0000000..bcb87c5
--- /dev/null
+++ b/src/views/table/table_list.vue
@@ -0,0 +1,209 @@
+<template>
+    <div class="app-container">
+        <el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
+            <el-tab-pane label="全部" name=""></el-tab-pane>
+            <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="`${item.id}`">
+                <div slot="label">
+                    {{ item.name }}
+                    <i class="icon el-icon-edit" @click.stop="$refs.addEara.show(item)"></i>
+                    <el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
+                        <i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
+                    </el-popconfirm>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+        <div class="head-container">
+            <div class="filter_wrap">
+                <el-button icon="el-icon-plus" @click="$refs.addEara.show()">添加区域</el-button>
+                <el-button type="primary" icon="el-icon-plus" @click="$refs.addTable.show()">添加台桌</el-button>
+                <el-button type="primary" icon="el-icon-download">下载台桌码</el-button>
+                <el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
+            </div>
+        </div>
+        <div class="head-container">
+            <div class="table_list">
+                <div class="item" v-for="item in tableList" :key="item.id">
+                    <div class="top">
+                        <div class="row row1">
+                            <span>0001</span>
+                            <div class="state">
+                                <span class="dot"></span>
+                                开台中
+                            </div>
+                        </div>
+                        <div class="row">
+                            <el-tag type="success" size="mini">低消</el-tag>
+                            <el-tag size="mini">可预约</el-tag>
+                        </div>
+                        <div class="row">
+                            <span class="tips">客座次数：5人</span>
+                        </div>
+                    </div>
+                    <div class="btm">
+                        <div class="btm_item">
+                            <i class="i el-icon-edit"></i>
+                        </div>
+                        <div class="btm_item">
+                            <i class="i el-icon-edit"></i>
+                        </div>
+                        <div class="btm_item">
+                            <i class="i el-icon-delete"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <addEara ref="addEara" @success="tbShopAreaGet" />
+        <addTable ref="addTable" @success="tbShopTableGet" />
+    </div>
+</template>
+
+<script>
+import addEara from './components/addEara'
+import addTable from './components/addTable'
+import { tbShopTableGet, tbShopAreaGet, tbShopAreaDelete } from '@/api/table'
+export default {
+    components: {
+        addEara,
+        addTable
+    },
+    data() {
+        return {
+            tabVlaue: '',
+            tabs: [],
+            tableList: []
+        }
+    },
+    mounted() {
+        this.tbShopAreaGet()
+    },
+    methods: {
+        tabClick() {
+            this.tbShopTableGet()
+        },
+        // 删除区域
+        async delHandle(ids) {
+            try {
+                await tbShopAreaDelete(ids)
+                this.tabVlaue = ''
+                this.tbShopAreaGet()
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        // 台桌列表
+        async tbShopTableGet() {
+            try {
+                const { content } = await tbShopTableGet({
+                    shopId: localStorage.getItem('shopId'),
+                    areaId: this.tabVlaue
+                })
+                this.tableList = content
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        // 获取区域
+        async tbShopAreaGet() {
+            try {
+                const { content } = await tbShopAreaGet({
+                    shopId: localStorage.getItem('shopId')
+                })
+                this.tabs = content
+                this.tbShopTableGet()
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.el-tabs {
+    margin-bottom: 0;
+}
+</style>
+<style scoped lang="scss">
+.icon {
+    margin-left: 10px;
+}
+
+.table_list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    .item {
+        border: 1px solid #ddd;
+
+        .top {
+            padding: 20px;
+
+            .row {
+                display: flex;
+                gap: 10px;
+
+                .tips {
+                    font-size: 12px;
+                }
+
+                &:not(:first-child) {
+                    margin-top: 14px;
+                }
+
+                &.row1 {
+                    justify-content: space-between;
+                    font-size: 14px;
+
+                    .state {
+                        display: flex;
+                        align-items: center;
+                        margin-left: 40px;
+
+                        .dot {
+                            $size: 6px;
+                            background-color: #67C23A;
+                            width: $size;
+                            height: $size;
+                            border-radius: 50%;
+                            margin-right: $size;
+                        }
+                    }
+                }
+            }
+        }
+
+        .btm {
+            border-top: 1px solid #ddd;
+            background-color: #efefef;
+            display: flex;
+
+            .btm_item {
+                flex: 1;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+
+                &:nth-child(1),
+                &:nth-child(2) {
+                    &::before {
+                        content: '';
+                        height: 50%;
+                        border-right: 1px solid #ddd;
+                        position: absolute;
+                        top: 25%;
+                        right: 0;
+                    }
+                }
+
+                .i {
+                    color: #666;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file