lsappBms/lss_vue_wx/src/views/assets/assetsOperation.vue

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="操作记录">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click="jumpBack()"></mt-button>
            </router-link>
            <mt-button slot="right" v-on:click="exportExcel()">导出</mt-button>
        </mt-header>
        <div class="detail_body">
            <mt-navbar v-model="selected" class="tab_head" v-on:click.native="changeTab">
                <mt-tab-item id="tab1">处置记录</mt-tab-item>
                <mt-tab-item id="tab2">维护记录</mt-tab-item>
            </mt-navbar>
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="tab1">
                    <div class="noList" v-if="disList.length==0">
                        <img src="../../assets/image/noList.png">
                    </div>
                    <ul v-else class="recordBox" v-infinite-scroll="loadMoreDis" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <li v-for="item in disList" class="one_recordBox detailBox">
                            <div class="record_head">
                                <div>{{item.modelNo}}</div>
                                <span v-if="item.goodState == 0">未用</span>
                                <span v-if="item.goodState == 1">在用</span>
                                <span v-if="item.goodState == 3">报废</span>
                            </div>
                            <div class="record_body">
                                <div>处置人：{{item.userName}}</div>
                                <div>处置时间：{{item.indate}}</div>
                                <div>操作：{{item.content}}</div>
                            </div>
                        </li>
                        <div class="order" v-if="haveMoreDis">
                            <span class="line"></span>
                            <span class="txt">没有更多了</span>
                            <span class="line"></span>
                        </div>
                    </ul>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab2">
                    <div class="noList" v-if="maiList.length==0">
                        <img src="../../assets/image/noList.png">
                    </div>
                    <ul v-else class="recordBox" v-infinite-scroll="loadMoreMai" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <li v-for="item in maiList" class="one_recordBox detailBox">
                            <div class="record_head">
                                {{item.modelNo}}
                            </div>
                            <div class="record_body">
                                <div>维护人：{{item.operator}}</div>
                                <div>联系方式：{{item.operatorPhone}}</div>
                                <div>维护厂家：{{item.company}}</div>
                                <div>联系方式：{{item.companyPhone}}</div>
                            </div>
                        </li>
                        <div class="order" v-if="haveMoreDis">
                            <span class="line"></span>
                            <span class="txt">没有更多了</span>
                            <span class="line"></span>
                        </div>
                    </ul>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                id: this.$route.params.id,
                selected: "tab1",

                disList: [],
                disPageNum: 1,
                disPages: 1,
                haveMoreDis: false,

                maiList: [],
                maiPageNum: 1,
                maiPages: 1,
                haveMoreMai: false,
			}
		},
		methods: {
            // 处置记录
            getListDis() {
                this.$indicator.open();
                this.http.post(this.port.assets.disposalRecord, {
                    'id': this.id,
                    'pageNum': 1
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.disList = res.data.list;
                        this.disPages = res.data.pages==0?1:res.data.pages;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            loadMoreDis() {
                if(this.disPageNum == this.disPages) {
                    this.haveMoreDis = true;
                } else if(this.disPageNum < this.disPages) {
                    this.$indicator.open();
                    this.http.post(this.port.assets.disposalRecord, {
                        'id': this.id,
                        'pageNum': ++this.disPageNum
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.disPages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.disList.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            },

            // 维护记录
            getListMai() {
                this.$indicator.open();
                this.http.post(this.port.assets.maintainRecord, {
                    'id': this.id,
                    'pageNum': 1
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.maiList = res.data.list;
                        this.maiPages = res.data.pages==0?1:res.data.pages;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            loadMoreMai() {
                if(this.maiPageNum == this.maiPages) {
                    this.haveMoreMai = true;
                } else if(this.maiPageNum < this.maiPages) {
                    this.$indicator.open();
                    this.http.post(this.port.assets.maintainRecord, {
                        'id': this.id,
                        'pageNum': ++this.maiPageNum
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.maiPages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.maiList.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            },

            changeTab() {
                if(this.selected == "tab1") {
                    this.getListDis();
                } else {
                    this.getListMai();
                }
            },

            // 导出
            exportExcel() {
                this.$indicator.open();
                if(this.selected == "tab1") {
                    this.http.downloadFile(this.port.assets.exportDis, {
                        'id': this.id,
                    } , 
                    res => {
                        this.$indicator.close();
                        let url = window.URL.createObjectURL(new Blob([res]))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', '操作记录.xlsx')
                        document.body.appendChild(link)
                        link.click()
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                } else {
                    this.http.downloadFile(this.port.assets.exportMain, {
                        'id': this.id,
                    } , 
                    res => {
                        this.$indicator.close();
                        this.$indicator.close();
                        let url = window.URL.createObjectURL(new Blob([res]))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', '操作记录.xlsx')
                        document.body.appendChild(link)
                        link.click()
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            },

            jumpBack() {
                this.$router.go(-1);
            }
        },
        created() {
            this.getListDis();
        },
		mounted() {
            
		}
	}

</script>

<style scoped>
    body {
        background: #EFEFEF;
    }

    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.8rem;
        padding-bottom: 0.15rem;
    }

    .tab_head {
        position: fixed;
        width: 100%;
        top: 0.4rem;
        z-index: 110;
        border-bottom: 1px solid #ddd;
    }

    .detail {
        background: #EFEFEF;
    }

    .detailBox {
        background: #fff;
        margin-bottom: 0.11rem;
    }

    .recordBox {
        margin: 0.12rem 0 0 0;
    }

    .one_recordBox {
        padding: 0.12rem 0.2rem;
    }

    .record_head {
        color: #5FA1F0;
        padding: 0 0 0.1rem 0;
        border-bottom: 1px solid #ccc;
    }

    .record_head > div {
        width: 85%;
        display: inline-block;
        vertical-align: middle;
    }

    .record_head span {
        color: #939393;
        float: right;
        vertical-align: middle;
    }

    .record_body {
        color: #777;
        font-size: 0.12rem;
        line-height: 0.23rem;
        margin-top: 0.12rem;
    }

    .noList {
        text-align: center;
        padding: 1.5rem 0;
    }

    .noList img {
        width: 1.2rem;
        height: 1.2rem;
    }

    .order {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
    }

    .order .line {
        display: inline-block;
        width: 1.2rem;
        border-top: 1px solid #ccc ;
        vertical-align: middle;
    }

    .order .txt {
        color: #ccc;
        font-size: 0.13rem;
        vertical-align: middle;
    }
</style>