源文件

src/views/invoicing/operating_record.vue

@@ -0,0 +1,110 @@
+<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.account }}
+                    </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="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>
+            </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>