diff --git a/src/App.vue b/src/App.vue
index c624b6d..19381ca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,4 +14,23 @@ export default {
 .tips {
   color: #999;
 }
+
+.img_error {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon {
+    font-size: 20px;
+    color: #999;
+  }
+}
+
+.filter_wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 </style>
diff --git a/src/api/invoicing.js b/src/api/invoicing.js
new file mode 100644
index 0000000..cdc524e
--- /dev/null
+++ b/src/api/invoicing.js
@@ -0,0 +1,75 @@
+import request from '@/utils/request'
+
+/**
+ * 商品列表
+ * @returns
+ */
+export function tbProductGet(params) {
+    return request({
+        url: '/api/tbProduct',
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 进销存类型字典
+ * @returns
+ */
+export function dictDetail(params) {
+    return request({
+        url: `/api/dictDetail`,
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 库存记录列表
+ * @returns
+ */
+export function tbProductStockDetail(data) {
+    return request({
+        url: `/api/tbProductStockDetail/stock`,
+        method: 'post',
+        data
+    })
+}
+
+/**
+ * 变动数量
+ * @returns
+ */
+export function tbProductStockDetailSum(params) {
+    return request({
+        url: `/api/tbProductStockDetail/sum`,
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 供应商列表
+ * @returns
+ */
+export function tbShopPurveyorGet(params) {
+    return request({
+        url: `/api/tbShopPurveyor`,
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 增加供应商
+ * @returns
+ */
+export function tbShopPurveyor(data, method = 'post') {
+    return request({
+        url: `/api/tbShopPurveyor`,
+        method: method,
+        data
+    })
+}
+
+
diff --git a/src/views/invoicing/components/addSupplier.vue b/src/views/invoicing/components/addSupplier.vue
new file mode 100644
index 0000000..8955efb
--- /dev/null
+++ b/src/views/invoicing/components/addSupplier.vue
@@ -0,0 +1,93 @@
+<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="purveyorName">
+                <el-input v-model="form.purveyorName" placeholder="请输入供应商名称"></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话">
+                <el-input v-model="form.purveyorTelephone" placeholder="请输入联系电话"></el-input>
+            </el-form-item>
+            <el-form-item label="地址">
+                <el-input type="textarea" v-model="form.address" placeholder="请输入地址"></el-input>
+            </el-form-item>
+            <el-form-item label="标签">
+                <el-input v-model="form.tip" placeholder="请输入标签"></el-input>
+            </el-form-item>
+            <el-form-item label="备注">
+                <el-input type="textarea" v-model="form.remark" 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 { tbShopPurveyor } from '@/api/invoicing'
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                id: '',
+                purveyorName: '',
+                purveyorTelephone: '',
+                address: '',
+                tip: '',
+                remark: '',
+            },
+            rules: {
+                purveyorName: [
+                    {
+                        required: true,
+                        message: '请输入供应商名称',
+                        trigger: 'blur'
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        onSubmitHandle() {
+            this.$refs.form.validate(async valid => {
+                if (valid) {
+                    try {
+                        let res = await tbShopPurveyor({
+                            ...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.purveyorName = ''
+            this.form.purveyorTelephone = ''
+            this.form.address = ''
+            this.form.tip = ''
+            this.form.remark = ''
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/invoicing/components/invoicingDetail.vue b/src/views/invoicing/components/invoicingDetail.vue
new file mode 100644
index 0000000..65dd2f5
--- /dev/null
+++ b/src/views/invoicing/components/invoicingDetail.vue
@@ -0,0 +1,178 @@
+<!-- 进销存详情记录 -->
+<template>
+    <el-dialog title="详情记录" width="80%" :visible.sync="dialogVisible" @close="dialogVisible = false">
+        <div class="head-container">
+            <el-select v-model="query.type" placeholder="选择类型">
+                <el-option :label="item.label" :value="item.value" v-for="item in typeList" :key="item.id"></el-option>
+            </el-select>
+            <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
+                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
+            </el-date-picker>
+            <el-button type="primary" @click="getTableData">查询</el-button>
+            <el-button @click="resetHandle">重置</el-button>
+        </div>
+        <div class="head-container">
+            <div class="exchange_wrap">
+                <div class="item">
+                    <span>{{ exchange || 0 }}</span>
+                    <span>变动数量</span>
+                </div>
+            </div>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="变动数量" prop="stockNumber">
+                    <template v-slot="scope">
+                        <span class="num" :class="{ active: scope.row.stockNumber > 0 }">{{ scope.row.stockNumber }} {{
+                            scope.row.unitName
+                        }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="类型">
+                    <template v-slot="scope">
+                        <el-tag type="info">{{ scope.row.tagName }}</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="剩余库存">
+                    <template v-slot="scope">
+                        {{ scope.row.leftNumber - scope.row.stockNumber }} {{ scope.row.unitName }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作时间" prop="updatedAt">
+                    <template v-slot="scope">
+                        {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
+                    </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>
+    </el-dialog>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { dictDetail, tbProductStockDetail, tbProductStockDetailSum } from '@/api/invoicing'
+export default {
+    data() {
+        return {
+            dayjs,
+            dialogVisible: false,
+            typeList: [],
+            query: {
+                type: '',
+                createdAt: []
+            },
+            goods: '',
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                sort: 'id',
+                loading: false,
+                list: []
+            },
+            exchange: 0
+        }
+    },
+    methods: {
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbProductStockDetail({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    sort: this.tableData.sort,
+                    shopId: localStorage.getItem('shopId'),
+                    productId: this.goods.id,
+                    type: this.query.type,
+                    createdAt: this.query.createdAt
+                })
+                this.tableData.loading = false
+                this.tableData.list = res.content.map(item => {
+                    item.tagName = this.typeList.find(val => val.value == item.type).label
+                    return item
+                })
+                console.log(this.tableData.list)
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1
+            this.getTableData()
+        },
+        // 重置查询
+        resetHandle() {
+            this.query.blurry = ''
+            this.tableData.page = 0
+            this.tableData.list = []
+            this.getTableData()
+        },
+        async show(obj) {
+            this.dialogVisible = true
+            this.goods = obj
+            this.tbProductStockDetailSum()
+            await this.dictDetail()
+            await this.getTableData()
+        },
+        async tbProductStockDetailSum() {
+            try {
+                const { exchange } = await tbProductStockDetailSum({
+                    productId: this.goods.id
+                })
+                this.exchange = exchange
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        async dictDetail() {
+            try {
+                const res = await dictDetail({
+                    dictName: 'product_stock_type',
+                    page: 0,
+                    size: 100
+                })
+                this.typeList = res.content
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.head-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.num {
+    color: #67C23A;
+
+    &.active {
+        color: #F56C6C;
+    }
+}
+
+.exchange_wrap {
+    display: flex;
+    padding: 20px 30px;
+
+    .item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        span:nth-child(1) {
+            padding-bottom: 10px;
+            font-size: 24px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/invoicing/goods_stoks.vue b/src/views/invoicing/goods_stoks.vue
new file mode 100644
index 0000000..dd2ad49
--- /dev/null
+++ b/src/views/invoicing/goods_stoks.vue
@@ -0,0 +1,150 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-input v-model="query.name" size="small" clearable placeholder="商品名称" style="width: 100%;"
+                        class="filter-item" @keyup.enter.native="getTableData" />
+                </el-col>
+                <el-col :span="6">
+                    <el-button type="primary" @click="getTableData">查询</el-button>
+                    <el-button @click="resetHandle">重置</el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="商品信息">
+                    <template v-slot="scope">
+                        <div class="shop_info">
+                            <el-image :src="scope.row.coverImg" class="cover">
+                                <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>
+                                    <el-tag type="primary">{{ scope.row.typeEnum | typeEnum }}</el-tag>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="库存" prop="stockNumber">
+                    <template v-slot="scope">
+                        {{ `${scope.row.stockNumber} ${scope.row.unitName}` }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="库存开关">
+                    <template v-slot="scope">
+                        <el-switch v-model="scope.row.isStock" :active-value="1" :inactive-value="0"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100">
+                    <template v-slot="scope">
+                        <el-button type="text" size="mini" @click="$refs.invoicingDetail.show(scope.row)">库存记录</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <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>
+        <invoicingDetail ref="invoicingDetail" />
+    </div>
+</template>
+
+<script>
+import { tbProductGet } from '@/api/invoicing'
+import settings from '@/settings'
+import invoicingDetail from './components/invoicingDetail'
+export default {
+    components: {
+        invoicingDetail
+    },
+    data() {
+        return {
+            query: {
+                name: ''
+            },
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                sort: 'id',
+                loading: false,
+                list: []
+            }
+        }
+    },
+    filters: {
+        typeEnum(m) {
+            return settings.typeEnum.find(item => item.typeEnum == m).label
+        }
+    },
+    mounted() {
+        this.getTableData()
+    },
+    methods: {
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbProductGet({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    sort: this.tableData.sort,
+                    name: this.query.name,
+                    shopId: localStorage.getItem('shopId')
+                })
+                this.tableData.loading = false
+                this.tableData.list = res.content.map(item => {
+                    let stockNumber = 0
+                    for (let i of item.skuList) {
+                        stockNumber += i.stockNumber
+                    }
+                    item.stockNumber = stockNumber
+                    return item
+                })
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1
+            this.getTableData()
+        },
+        // 重置查询
+        resetHandle() {
+            this.query.blurry = ''
+            this.tableData.page = 0;
+            this.getTableData()
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.shop_info {
+    display: flex;
+    align-items: center;
+
+    .cover {
+        $size: 50px;
+        width: $size;
+        height: $size;
+        border-radius: 2px;
+        background-color: #efefef;
+    }
+
+    .info {
+        display: flex;
+        flex-direction: column;
+        padding-left: 10px;
+        justify-content: space-between;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/invoicing/supplier_manage/supplier_list.vue b/src/views/invoicing/supplier_manage/supplier_list.vue
new file mode 100644
index 0000000..9c37999
--- /dev/null
+++ b/src/views/invoicing/supplier_manage/supplier_list.vue
@@ -0,0 +1,110 @@
+<template>
+    <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"
+                    style="width: 200px;" />
+                <el-button type="primary" @click="getTableData">查询</el-button>
+                <el-button @click="resetHandle">重置</el-button>
+            </div>
+        </div>
+        <div class="head-container">
+            <el-button type="primary" icon="el-icon-plus" @click="$refs.addSupplier.show()">添加供应商</el-button>
+        </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="purveyorTelephone"></el-table-column>
+                <el-table-column label="地址" prop="address"></el-table-column>
+                <el-table-column label="标签" prop="tip"></el-table-column>
+                <el-table-column label="备注" prop="remark"></el-table-column>
+                <el-table-column label="操作" width="200">
+                    <template v-slot="scope">
+                        <el-button type="text" size="mini" round icon="el-icon-edit"
+                            @click="$refs.addSupplier.show(scope.row)">编辑</el-button>
+                        <el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
+                            <el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
+                                删除
+                            </el-button>
+                        </el-popconfirm>
+                    </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>
+        <addSupplier ref="addSupplier" @success="getTableData" />
+    </div>
+</template>
+
+<script>
+import { tbShopPurveyorGet, tbShopPurveyor } from '@/api/invoicing'
+import addSupplier from '../components/addSupplier'
+export default {
+    components: {
+        addSupplier
+    },
+    data() {
+        return {
+            query: {
+                name: ''
+            },
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                sort: 'id',
+                loading: false,
+                list: []
+            }
+        }
+    },
+    mounted() {
+        this.getTableData()
+    },
+    methods: {
+        // 删除
+        async delHandle(ids) {
+            try {
+                await tbShopPurveyor(ids, 'delete')
+                this.$notify({
+                    title: '成功',
+                    message: `删除成功`,
+                    type: 'success'
+                });
+                this.getTableData()
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbShopPurveyorGet({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    sort: this.tableData.sort,
+                    purveyorName: this.query.name,
+                    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.tableData.page = 0;
+            this.getTableData()
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1
+            this.getTableData()
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index 5eb77a2..4a86e44 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -159,20 +159,6 @@ export default {
 }
 </script>
 
-<style>
-.img_error {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .icon {
-    font-size: 20px;
-    color: #999;
-  }
-}
-</style>
 <style scoped lang="scss">
 .shop_info {
   display: flex;
diff --git a/src/views/product/specification.vue b/src/views/product/specification.vue
index bcb031c..111862e 100644
--- a/src/views/product/specification.vue
+++ b/src/views/product/specification.vue
@@ -81,7 +81,7 @@ export default {
         },
         // 分页回调
         paginationChange(e) {
-            this.tableData.page = e
+            this.tableData.page = e - 1
             this.getTableData()
         },
         // 删除