库存管理及model页布局构建

src/router/index.js

@@ -121,6 +121,15 @@ const routes = [{
             },
             component: () => import('@/views/productSpecManage/index')
         },
+        {
+            path: 'repertoryManage',
+            name: 'repertoryManage',
+            meta: {
+                icon: 'wallet',
+                name: '库存管理'
+            },
+            component: () => import('@/views/repertoryManage/index')
+        },
         {
             path: 'cameraManage/ioTable',
             name: 'ioTable',

src/views/repertoryManage/index.vue

@@ -0,0 +1,151 @@
+<template>
+    <div>
+        <div class="button-box">
+            <a-upload
+                name="file"
+                :multiple="true"
+                accept=".xlsx"
+                :action="uploadProps.action"
+                :showUploadList = 'false'
+                @change="handleChange"
+                ref="table"
+            >
+                <a-button type="primary" class="plc" >
+                    导入
+                </a-button>
+            </a-upload>
+        </div>
+        <a-table
+            :columns="columns"
+            :row-key="record => record.id"
+            :data-source="data"
+            :pagination="pagination"
+            @change="handleGetCameraIoList"
+        >
+        </a-table>
+    </div>
+</template>
+
+
+<script>
+import { importExcelUrl } from "@/api/importExcel";
+const columns = [
+    {
+        title: '序号',
+        // dataIndex: 'id',
+        customRender: (text, record, index) => {
+            return (
+                (record.pageNumber - 1) * 10 + index + 1
+            )
+        }
+    },
+    {
+        title: '商品名',
+        dataIndex: 'name',
+    },
+    {
+        title: '品规',
+        dataIndex: 'pro',
+    },
+    {
+        title: '数量',
+        dataIndex: 'num',
+    },
+    {
+        title: '货位',
+        dataIndex: 'pos',
+    },
+    {
+        title: '导入时间',
+        dataIndex: 'updateTime',
+    },
+];
+export default {
+    data() {
+        return {
+            pageNum:1,
+            pageSize:10,
+            data: [],
+            pagination:{
+                total:0,
+                current:1,
+                defaultPageSize:10, // 默认每页显示数量
+                showTotal: total => `共 ${total} 条数据`, // 显示总数
+                showSizeChanger:true, // 显示可改变每页数量
+                pageSizeOptions: ['10', '20', '30'],
+                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
+            },
+            loading: false,
+            columns,
+            visible:false,
+            modelType:'',
+            modelData:[],
+        };
+    },
+    computed:{
+        uploadProps() {
+            return {
+                action: 'dddddd'//上传Excel文件的路径
+            }
+        }
+    },
+    mounted() {
+        this.handleGetCameraIoList()
+    },
+    methods: {
+        handleChange(data) {
+            console.log(data)
+            // if (data.file.status == "done") { // 导入表格之后成功的回调
+            //     this.$message.success(data.file.response.message)
+            //     this.handleGetCameraIoList();
+            // } else if(data.file.status == 'error'){ // 导入表格之后失败的回调
+            //     this.$message.error(data.file.response.message)
+            // }
+        },
+        handleGetCameraIoList(pagination) {
+            console.log(pagination)
+            if(pagination){
+                this.pagination.current = pagination.current;
+                this.pagination.pageSize = pagination.pageSize;
+                this.pageNum = pagination.current;
+                this.pageSize = pagination.pageSize;
+            }
+            this.request();
+        },
+        request(){
+            // this.$api.httpApi.getCameraIoList({
+            //     data: {
+            //         page:this.pageNum,
+            //         size:this.pageSize,
+            //     }
+            // }).then(res => {
+            //     const pagination = { ...this.pagination };
+            //     pagination.total = res.data.total;
+            //     this.data = res.data.list;
+            //     this.pagination = pagination;
+            //     res.data.list.forEach((value,index) => {
+            //         value.pageNumber = this.pagination.current
+            //     });
+            // }).catch(err => {
+            //
+            // });
+        },
+    },
+    components:{
+
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .button-box{
+        position: absolute;
+        top:0;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .add{
+            margin-right: 20px;
+        }
+    }
+</style>