diff --git a/src/api/invoicing.js b/src/api/invoicing.js
index cdc524e..29a1731 100644
--- a/src/api/invoicing.js
+++ b/src/api/invoicing.js
@@ -72,4 +72,63 @@ export function tbShopPurveyor(data, method = 'post') {
     })
 }
 
+/**
+ * 进货/退货账目
+ * @returns
+ */
+export function tbShopPurveyorTransactGet(params) {
+    return request({
+        url: `/api/tbShopPurveyorTransact`,
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 进货账目详情
+ * @returns
+ */
+export function tbShopPurveyorTransactInfo(data) {
+    return request({
+        url: `/api/tbShopPurveyorTransact/info`,
+        method: 'post',
+        data
+    })
+}
+
+/**
+ * 进货账目汇总（单一供应商）
+ * @returns
+ */
+export function tbShopPurveyorTransactSum(params) {
+    return request({
+        url: `/api/tbShopPurveyorTransact/sum`,
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 操作记录
+ * @returns
+ */
+export function tbProductStockOperateList(data) {
+    return request({
+        url: `/api/tbProductStockOperate/list`,
+        method: 'post',
+        data
+    })
+}
+
+/**
+ * 操作记录详情
+ * @returns
+ */
+export function tbProductStockOperateDetail(id) {
+    return request({
+        url: `/api/tbProductStockOperate/${id}`,
+        method: 'get'
+    })
+}
+
 
diff --git a/src/assets/styles/eladmin.scss b/src/assets/styles/eladmin.scss
index e1e0195..8fe63d5 100644
--- a/src/assets/styles/eladmin.scss
+++ b/src/assets/styles/eladmin.scss
@@ -1,5 +1,5 @@
 .head-container {
-  padding-bottom: 10px;
+  padding-bottom: 20px;
   .filter-item {
     display: inline-block;
     vertical-align: middle;
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index a384479..b9d0726 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') || 'small'
+  size: Cookies.get('size') || 'Default'
 }
 
 const mutations = {
diff --git a/src/views/invoicing/components/operatingDetail.vue b/src/views/invoicing/components/operatingDetail.vue
new file mode 100644
index 0000000..a172041
--- /dev/null
+++ b/src/views/invoicing/components/operatingDetail.vue
@@ -0,0 +1,66 @@
+<template>
+    <el-dialog title="详情" width="80%" :visible.sync="dialogVisible" @close="dialogVisible = false">
+        <div class="head-container">
+            <span>【退货出库】</span>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.detail.stockSnap" v-loading="tableData.loading" height="400px">
+                <el-table-column :label="`商品名称${tableData.detail.stockSnap.length}`" prop="name"></el-table-column>
+                <el-table-column label="变动数量" prop="number">
+                    <template v-slot="scope">
+                        {{ scope.row.number }}{{ scope.row.unitName }}
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="head-container">
+            <div class="row">备注：{{ tableData.detail.remark }}</div>
+            <div class="row">操作人：{{ tableData.detail.operatorSnap.name }}</div>
+            <div class="row">创建时间：{{ tableData.detail.createdAt }}</div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { tbProductStockOperateDetail } from '@/api/invoicing'
+export default {
+    data() {
+        return {
+            dayjs,
+            dialogVisible: false,
+            tableData: {
+                loading: false,
+                detail: {
+                    stockSnap: [],
+                    operatorSnap: {
+                        name: ''
+                    }
+                }
+            }
+        }
+    },
+    methods: {
+        show(id) {
+            this.dialogVisible = true
+            this.getTableData(id)
+        },
+        async getTableData(id) {
+            this.tableData.loading = true
+            try {
+                const res = await tbProductStockOperateDetail(id)
+                this.tableData.loading = false
+                this.tableData.detail = res
+            } catch (error) {
+                console.log(error);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.row {
+    padding-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/invoicing/operating_record.vue b/src/views/invoicing/operating_record.vue
new file mode 100644
index 0000000..2096d94
--- /dev/null
+++ b/src/views/invoicing/operating_record.vue
@@ -0,0 +1,107 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <div class="filter_wrap">
+                <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
+                    end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getTableData">
+                </el-date-picker>
+                <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="type">
+                    <template v-slot="scope">
+                        {{ scope.row.type == 'reject' ? '退货出库' : '供应商入库' }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="商品数量" prop="totalAmount">
+                    <template v-slot="scope">
+                        {{ scope.row.stockSnap.length }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="备注" prop="remark"></el-table-column>
+                <el-table-column label="操作人" prop="status">
+                    <template v-slot="scope">
+                        {{ scope.row.operatorSnap.name }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="创建时间" prop="updatedAt">
+                    <template v-slot="scope">
+                        {{ dayjs(scope.row.stockTime).format('YYYY-MM-DD HH:mm:ss') }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="80">
+                    <template v-slot="scope">
+                        <el-button type="text" size="mini" @click="$refs.operatingDetail.show(scope.row.id)">
+                            查看详情
+                        </el-button>
+                    </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>
+        <operatingDetail ref="operatingDetail" />
+    </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { tbProductStockOperateList } from '@/api/invoicing'
+import operatingDetail from './components/operatingDetail'
+export default {
+    components: {
+        operatingDetail
+    },
+    data() {
+        return {
+            dayjs,
+            query: {
+                createdAt: []
+            },
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                sort: 'id',
+                loading: false,
+                list: []
+            }
+        }
+    },
+    mounted() {
+        this.getTableData()
+    },
+    methods: {
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbProductStockOperateList({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    shopId: localStorage.getItem('shopId'),
+                    createdAt: this.query.createdAt
+                })
+                this.tableData.loading = false
+                this.tableData.list = res.content
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 重置查询
+        resetHandle() {
+            this.query.createdAt = []
+            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/invoicing/supplier_manage/purchase.vue b/src/views/invoicing/supplier_manage/purchase.vue
new file mode 100644
index 0000000..622714f
--- /dev/null
+++ b/src/views/invoicing/supplier_manage/purchase.vue
@@ -0,0 +1,136 @@
+<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-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: 'purveyor',
+                    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/invoicing/supplier_manage/purchase_detail.vue b/src/views/invoicing/supplier_manage/purchase_detail.vue
new file mode 100644
index 0000000..1b5cf03
--- /dev/null
+++ b/src/views/invoicing/supplier_manage/purchase_detail.vue
@@ -0,0 +1,350 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <el-radio-group v-model="query.time" @change="timeChange">
+                <el-radio-button :label="item.value" v-for="item in timeList" :key="item.label">{{ item.label
+                }}</el-radio-button>
+            </el-radio-group>
+        </div>
+        <div class="head-container" v-if="query.time == 'custom'">
+            <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
+                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getTableData">
+            </el-date-picker>
+        </div>
+        <div class="head-container">
+            <div class="filter_wrap">
+                <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">
+            <div class="info_list">
+                <div class="item">
+                    <div class="icon_wrap" style="background-color: #F2D7FF;">
+                        <i class="icon el-icon-info" style="color:#C978EE;"></i>
+                    </div>
+                    <div class="info">
+                        <div class="n">￥{{ info.totalAmount }}</div>
+                        <div class="intro">总交易{{ info.waitCount }}笔</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="icon_wrap" style="background-color: #DFFECC;">
+                        <i class="icon el-icon-success" style="color:#47B505;"></i>
+                    </div>
+                    <div class="info">
+                        <div class="n">￥{{ info.paidAmount }}</div>
+                        <div class="intro">已支付金额</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="icon_wrap" style="background-color: #FFE7D6;">
+                        <i class="icon el-icon-circle-plus" style="color: #FF6B00;"></i>
+                    </div>
+                    <div class="info">
+                        <div class="n">￥{{ info.waitAmount }}</div>
+                        <div class="intro">待支付金额</div>
+                    </div>
+                </div>
+                <div class="item">
+                    <div class="icon_wrap" style="background-color: #FFF1D5;">
+                        <i class="icon el-icon-warning" style="color: #FEB420;"></i>
+                    </div>
+                    <div class="info">
+                        <div class="n">{{ info.waitNumber }}</div>
+                        <div class="intro">待支付笔数</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="head-container">
+            <div class="select_count_wrap">
+                <div class="select_count">
+                    <i class="icon el-icon-warning"></i>
+                    已选中
+                    <span class="n">{{ selectCount }}</span>
+                    项
+                </div>
+                <el-button>批量付款</el-button>
+            </div>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading" @select="selectHandle"
+                @select-all="selectHandle">
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
+                <el-table-column label="创建日期" prop="createdAt">
+                    <template v-slot="scope">
+                        {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="类型" prop="type">
+                    <template v-slot="scope">
+                        进货单
+                    </template>
+                </el-table-column>
+                <el-table-column label="总金额" prop="totalAmount">
+                    <template v-slot="scope">
+                        ￥{{ scope.row.totalAmount }}
+                    </template>
+                </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="status">
+                    <template v-slot="scope">
+                        <el-tag type="info">{{ types.find(item => item.value == scope.row.status).label }}</el-tag>
+                    </template>
+                </el-table-column>
+                <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') }}
+                    </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 { tbShopPurveyorTransactInfo, dictDetail, tbShopPurveyorTransactSum } from '@/api/invoicing'
+export default {
+    data() {
+        return {
+            dayjs,
+            timeList: [
+                {
+                    label: '全部',
+                    value: 'all'
+                },
+                {
+                    label: '今天',
+                    value: '0'
+                },
+                {
+                    label: '昨天',
+                    value: '-1'
+                },
+                {
+                    label: '最近7天',
+                    value: '-7'
+                },
+                {
+                    label: '最近30天',
+                    value: '-30'
+                },
+                {
+                    label: '本周',
+                    value: 'week'
+                },
+                {
+                    label: '本月',
+                    value: 'moth'
+                },
+                {
+                    label: '自定义',
+                    value: 'custom'
+                }
+            ],
+            types: [],
+            selectCount: 0,
+            query: {
+                type: '',
+                time: 'all',
+                createdAt: []
+            },
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                sort: 'id',
+                loading: false,
+                list: []
+            },
+            info: ''
+        }
+    },
+    mounted() {
+        this.dictDetail()
+        this.getTableData()
+        this.tbShopPurveyorTransactSum()
+    },
+    methods: {
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbShopPurveyorTransactInfo({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    sort: this.tableData.sort,
+                    purveyorId: this.$route.query.purveyorId,
+                    status: this.query.type,
+                    type: 'purveyor',
+                    createdAt: this.query.createdAt
+                })
+                this.tableData.loading = false
+                this.tableData.list = res.content
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 重置查询
+        resetHandle() {
+            this.query.time = 'all'
+            this.query.createdAt = []
+            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
+        },
+        // 选择时间
+        timeChange(e) {
+            this.query.createdAt = []
+            const format0 = 'YYYY-MM-DD 00:00:00'
+            const format1 = 'YYYY-MM-DD 23:59:59'
+            switch (e) {
+                case '0':
+                    this.query.createdAt = [dayjs().format(format0), dayjs().format(format1)]
+                    break;
+                case '-1':
+                    this.query.createdAt = [dayjs().add(-1, 'day').format(format0), dayjs().add(-1, 'day').format(format1)]
+                    break;
+                case '-7':
+                    this.query.createdAt = [dayjs().add(-7, 'day').format(format0), dayjs().format(format1)]
+                    break;
+                case '-30':
+                    this.query.createdAt = [dayjs().add(-30, 'day').format(format0), dayjs().format(format1)]
+                    break;
+                case 'week':
+                    this.query.createdAt = [dayjs().startOf('week').format(format0), dayjs().endOf('week').format(format1)]
+                    break;
+                case 'moth':
+                    this.query.createdAt = [dayjs().startOf('month').format(format0), dayjs().endOf('month').format(format1)]
+                    break;
+                default:
+                    break;
+            }
+            this.getTableData()
+        },
+        selectHandle(selection, row) {
+            this.selectCount = 0
+            this.selectCount = selection.length
+        },
+        async tbShopPurveyorTransactSum() {
+            this.info = await tbShopPurveyorTransactSum({ purveyorId: this.$route.query.purveyorId, type: 'purveyor' })
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.select_count_wrap {
+    display: flex;
+    align-items: center;
+
+    .select_count {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #e7f3ff;
+        width: 120px;
+        height: 40px;
+        font-size: 14px;
+        margin-right: 10px;
+        border-radius: 4px;
+
+        .icon {
+            margin-right: 4px;
+        }
+
+        .n {
+            margin: 0 4px;
+        }
+
+        .icon,
+        .n {
+            color: #409EFF;
+        }
+    }
+}
+
+.num {
+    color: #F56C6C;
+    font-weight: bold;
+}
+
+.count {
+    color: #409EFF;
+}
+
+.info_list {
+    display: flex;
+    gap: 20px;
+
+    .item {
+        flex: 1;
+        background-color: #fff;
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        background-color: #f5f5f5;
+
+        .icon_wrap {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            padding: 2px;
+
+            .icon {
+                font-size: 40px;
+            }
+        }
+
+        .info {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding-left: 20px;
+
+            .n {
+                font-size: 28px;
+                text-indent: -6px;
+            }
+
+            .intro {
+                font-size: 12px;
+                color: #999;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file