index.vue

<style lang="less">
    #receive{
        table{
            width:100%;
            >thead{
                width:calc(100% - 1em);
                >tr{
                    height:35px;
                }
            }
            >tbody{
                display: block;
                height: 200px;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
                height: calc(100vh - 160px);
                >div{
                    background: #fff;
                    border-radius: 5px;
                    margin: 5px;
                    box-shadow: 0 1px 3px #bababa;
                    overflow: hidden;
                    >tr{
                        &.user{
                            background:#fff;
                            >td{
                                color:#5E9AFE;
                                text-align: left;
                                padding: 6px 15px;
                            }
                        }
                        &.num{
                            background:#fff;
                            >td{
                                &:not(:first-child){border-top:1px solid #eef4fe;}
                                padding:4px 0;
                                &:first-child{
                                    color:#229BD0;
                                }
                            }
                        }
                    }
                }
            }
            >tbody tr,>thead{
                display: table;
                width: 100%;
                // table-layout: fixed; /**表格列的宽度由表格宽度决定，不由内容决定*/
                text-align: center;
            }
            >thead th,>tbody td{
                width:50px;
            }
        }
    }
</style>
<template>
    <div id="receive">
        <div class="search">
            <searchComponent :search="search" :status="status"/>
        </div>
        <tab
            v-model="tabValue"
            prevent-default
            @on-before-index-change="switchTabItem"
            active-color="#5E9AFE"
            bar-active-color="#5E9AFE">
            <tab-item v-for="(v,k) in tabList" :key="k">{{v.sStoreName}}</tab-item>
        </tab>
        <table align="center" v-if="list.length>0">
            <thead>
                <tr>
                    <th>地点</th>
                    <th>匹数</th>
                    <th>米数</th>
                    <th>码数</th>
                    <th>重量</th>
                </tr>
            </thead>
            <tbody>
                <template v-for="(v,k) in list">
                    <div :key="k">
                        <tr class="user">
                            <td @click="toDetail(v.sProviderName)" style="text-decoration: underline;">{{v.sProviderName}}</td>
                        </tr>
                        <tr class="num">
                            <td>期初库存</td>
                            <td>{{v.nOldPieceQty||0}}</td>
                            <td style="color:#64B18B;">{{v.nOldLengthM||0}}</td>
                            <td>{{v.nOldLengthYD||0}}</td>
                            <td>{{v.nOldWeight||0}}</td>
                        </tr>
                        <tr class="num">
                            <td>本期入库</td>
                            <td>{{v.nInPieceQty||0}}</td>
                            <td style="color:#64B18B;">{{v.nInLengthM||0}}</td>
                            <td>{{v.nInLengthYD||0}}</td>
                            <td>{{v.nInWeight||0}}</td>
                        </tr>
                        <tr class="num">
                            <td>本期出库</td>
                            <td>{{v.nOutPieceQty||0}}</td>
                            <td style="color:#64B18B;">{{v.nOutLengthM||0}}</td>
                            <td>{{v.nOutLengthYD||0}}</td>
                            <td>{{v.nOutWeight||0}}</td>
                        </tr>
                        <tr class="num">
                            <td>本期库存</td>
                            <td>{{v.nStockPieceQty||0}}</td>
                            <td style="color:#64B18B;">{{v.nStockLengthM||0}}</td>
                            <td>{{v.nStockLengthYD||0}}</td>
                            <td>{{v.nStockWeight||0}}</td>
                        </tr>
                    </div>
                </template>
            </tbody>
        </table>
        <img v-else src="@/assets/noData.jpg" class="_img" style="width:100%" alt="" />
    </div>
</template>
<script>
import Util from "@/libs/util.js"
import searchComponent from '@/components/search'
import { Tab, TabItem } from 'vux'

export default {
    name:"receive",
    components:{searchComponent,Tab,TabItem},
    data(){
        return{
            tabList:[],
            list:[],
            search:{
                dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
                dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
                page:1,
                per_page:30,
                sStatus:'全部'
            },
            status:[],
            tabValue:0,
        }
    },
    created(){
        this.$store.dispatch('saveUserId',this.$route.params.userId);
        this.init();

        this.global.$off('searchData');
        this.global.$on('searchData',async ()=>{
            this.searchData();
        });
    },

    methods:{
        switchTabItem(index){
            this.tabValue=index
            this.searchData()
        },
        toDetail(name){
            this.$router.push({
                path:"/tiip/receive_varieties",
                query:{
                    sStockPlace:name,
                    sStoreNo:this.tabList[this.tabValue].sStoreNo
                }
            })
        },
        async init(){
            var value=await this.request("getTiipReceiveStorage",{
                data:[
                    {key:"url",value:"mmStore"},
                    {key:"sUserNo",value:this.$route.params.sUserNo}
                ]
            },"加载中",{})
            this.tabList=value

            this.searchData()
        },
        async searchData(){
            var value=await this.request("getTiipReceiveStorage",{
                data:[
                    {key:"url",value:"All"},
                    {key:"dStartDate",value:this.search.dBeginDate},
                    {key:"dEndDate",value:this.search.dEndDate},
                    {key:"sStoreNo",value:this.tabList[this.tabValue].sStoreNo},
                ]
            },"加载中",{})
            this.list=value
        },
    },
}
</script>