lsappBms/lss_vue/src/views/assets/assets.vue

<template>
	<div id="allocation">
        <div class="head">
            <div class="searchbox">
                <img src="../../assets/image/search.png" class="searchbox_img">
                <input type="text" v-model="keyWord" class="searchbox_text" />
                <button v-on:click="searchKeyword()" class="searchbox_button">搜索</button>
            </div>
            <div class="btn_body">
                <img v-on:click.stop="showList()" class="btn_img" src="../../assets/image/add.png">
                <div class="btn_list" v-show="popupVisible">
                    <div v-if="power.indexOf('registered_assets') > -1" v-on:click="register()"><img src="../../assets/image/register.png">登记资产</div>
                    <div v-on:click="exportExcel()"><img src="../../assets/image/export.png">导出报表</div>
                </div>
            </div>
            <div class="searchkey">
                <div class="searchkey_word">
                    <a v-for="(item,index) in labels" :id="item.id" v-bind:class="{'active':item.id==tagId}" v-on:click="chooseTag(item.id,1)">{{item.name}}</a>
                </div>
                <div class="searchkey_btn">
                    <img v-on:click="showFilter()" src="../../assets/image/pull_down.png">
                </div>
            </div>
        </div>
        <section class="_sorting-address">
            <ul class="address_first">
                <li v-for="(item,index) in labels" :id="'btn'+item.id" v-bind:class="{'active':item.id==tagId}" v-on:click="chooseTag(item.id,0)">{{item.name}}</li>
            </ul>
        </section>
        <div class="body">
            <div class="noList" v-if="list.length==0">
                <img src="../../assets/image/noList.png">
            </div>
            <ul v-else v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                <li v-for="item in list" v-on:click="jumpTo(item.id)">
                    <div class="item_img">
                        <img v-if="item.pic != null" v-lazy="item.pic">
                        <img v-else src="../../assets/image/noPic.png">
                    </div>
                    <div class="text item_name">{{item.name}}</div>
                    <div class="text item_int">{{item.modelNumber}}</div>
                    <div class="text item_num">{{item.goodsNos.length}}{{item.unit}}</div>
                </li>
                <div class="order" v-if="haveMore">
                    <span class="line"></span>
                    <span class="txt">没有更多了</span>
                    <span class="line"></span>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
    import util from '../../common/js/util'
    
	export default {
		data() {
			return {
                keyWord: "",
                power: sessionStorage.getItem("power"),
                list: [],
                labels: [],
                pageNum: 1,
                pages: 1,
                tagId: sessionStorage.assetsTab==null?-1:sessionStorage.assetsTab,
                popupVisible: false,
                loading: false,
                haveMore: false,
			}
        },
		methods: {
            // 资产列表
            getList() {
                this.$indicator.open();
                this.http.post(this.port.assets.list, {
                    'keyName': this.keyWord,
                    'tagId': this.tagId==-1?"":this.tagId,
                    'pageNum': this.pageNum
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.list = res.data.list;
                        this.pages = 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
                    });
                })
            },

            loadMore() {
                if(this.pageNum == this.pages) {
                    this.haveMore = true;
                } else if(this.pageNum < this.pages) {
                    this.$indicator.open();
                    this.http.post(this.port.assets.list, {
                        'keyName': this.keyWord,
                        'tagId': this.tagId==-1?"":this.tagId,
                        'pageNum': ++this.pageNum 
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.pages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.list.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            },

            // 标签列表
			getLabels() {
                this.http.post(this.port.label.list, {} , 
                res => {
                    if (res.code == "ok") {
                        this.getList();
                        var array = [{"id":-1 , "name": "全部"}];
                        for(var i in res.data) {
                            array.push(res.data[i]);
                        }
                        this.labels = array;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            // 关键词搜索
            searchKeyword() {
                this.getList();
            },

            // 右上角按钮
            showList() {
                this.popupVisible = !this.popupVisible;
            },

            // 标签筛选
            showFilter() {
                $("._sorting-medical").removeClass("fixed-top");
                if($("._sorting-address").hasClass("fixed-top")){
                    $(".searchkey_btn img").removeClass("rotate")
                    $(".searchkey_btn img").addClass("rotate1")
                    $(this).removeClass("current");
                    $("._sorting-address").removeClass("fixed-top");
                    $('._navbar').attr('style','position: fixed;top:0;');
                }else{
                    $(".searchkey_btn img").removeClass("rotate1")
                    $(".searchkey_btn img").addClass("rotate")
                    $("._sorting-address").addClass("fixed-top");
                    $(this).addClass("current");
                    $("._current-medical").removeClass("current");
                    $('._navbar').attr('style','position: fixed;top:0;');
                }
            },

            // 标签选择
            chooseTag(id,type) {
                $("#"+id).addClass("active").siblings("a").removeClass("active");
                $("#btn"+id).addClass("active").siblings().removeClass("active");
                location.href = "#" + id;
                sessionStorage.assetsTab = id;
                $("._sorting-medical").removeClass("fixed-top");
                $(".searchkey_btn img").removeClass("rotate")
                $(".searchkey_btn img").addClass("rotate1")
                $(this).removeClass("current");
                $("._sorting-address").removeClass("fixed-top");
                $('._navbar').attr('style','position: fixed;top:0;');
                this.pageNum = 1;
                this.pages = 1;
                this.tagId = id;
                this.getList();
            },

            jumpTo(id) {
                this.$router.push("/detail/" + id);
            },
            
            register() {
                this.$router.push("/assetsRegister");
            },

            exportExcel() {
                this.$indicator.open();
                this.http.downloadFile(this.port.assets.listExcel, {
                    'keyName': this.keyWord,
                    'tagId': this.tagId==-1?"":this.tagId,
                } , 
                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
                    });
                })
            },

            globalClick(callback) {
                var _this = this;
                document.getElementById('allocation').onclick = function () {
                    _this.popupVisible = false;
                }
            }
        },
        created() {
            this.getLabels();
        },
		mounted() {
            this.globalClick();
		}
	}

</script>

<style scoped>
    /* 头部搜索框、筛选栏 START */
    .head {
        position: fixed;
        width: 100%;
        box-sizing:border-box;
        padding: 0.07rem 0.15rem 0 0.15rem;
        background: #ffffff;
        border-bottom: 1px solid #dfdfdf;
        z-index: 105;
    }

    .searchbox {
        display: inline-block;
        /* width: 75%; */
        width: 88%;
        position: relative;
        vertical-align: middle;
    }

    .searchbox img.searchbox_img {
        width:0.18rem;
        height: 0.18rem;
        position: absolute;
        left: 0.04rem;
        top: 0.05rem;
    }

    .searchbox input.searchbox_text {
        font-size: 0.16rem;
        height: 0.28rem;
        border-style:none;
        border: 1px solid #2680EB;
        border-radius: 50px;
        box-sizing:border-box;
        width: 100%;
        padding: 0 0.45rem 0 0.33rem;
    }

    input.searchbox_text:focus{
        outline: none;
    }

    .searchbox button.searchbox_button {
        border: 0;
        background-color: transparent;
        outline: none;
        height: 0.28rem;
        font-size: 0.13rem;
        background: #2680EB;
        color: #fff;
        border-radius: 50px;
        padding: 0 0.12rem;
        position: absolute;
        right: -0.01rem;
        top: 0;
    }
    
    .btn_body {
        display: inline-block;
        float: right;
        position: relative;
        margin-top: 0.03rem;
    }

    .btn_img {
        float: right;
        width: 0.25rem;
        vertical-align: middle;
    }
    
    .btn_list {
        position: absolute;
        right: 0;
        top: 0.37rem;
        border:#aaa;
        background: #fcfcfc;
        box-shadow: 5px 5px 10px #ccc;
        z-index: 105;
    }

    .btn_list:before {
        display: inline-block;
        width: 0;
        height: 0;
        border: solid transparent;
        border-width: 10px;
        border-bottom-color: #fcfcfc;
        content: "";
        position: absolute;
        top: -20px;
        right: 0.06rem;
    }

    .btn_list > div {
        width: 0.8rem;
        font-size: 0.13rem;
        padding: 0.1rem 0.15rem;
        border-bottom: 1px solid #efefef;
        text-align: center;
    }

    .btn_list > div img {
        width: 0.14rem;
        height: 0.14rem;
        vertical-align: middle;
        margin-right: 0.05rem;
    }

    .btn_list > div span {
        height: 0.15rem;
        line-height: 0.15rem;
        vertical-align: middle;
    }

    .searchkey {
        height: 0.35rem;
        line-height: 0.35rem;
        margin-top: 0.08rem;
    }

    .searchkey .searchkey_word {
        width: 93%;
        display: inline-block;
        overflow-x: auto;
        white-space: nowrap;
        vertical-align: middle;
    }

    .searchkey .searchkey_word::-webkit-scrollbar {
        display:none
    }

    .searchkey .searchkey_word a {
        font-size: 0.13rem;
        padding: 0 0.05rem;
        color: #333;
        text-decoration:none;
    }

    .searchkey .searchkey_word a.active {
        color: #2680EB;
    }

    .searchkey .searchkey_btn {
        display: inline-block;
        width: 7%;
        height: 100%;
        float: right;
    }

    .searchkey .searchkey_btn img {
        width: 0.25rem;
        /* height: 0.3rem; */
        vertical-align: middle;
    }

    .address_first .current{
        background:#eee;
        color: #6f83ff;
        border-left: 2px solid #6f83ff;
    }
    
    ._sorting-address {
        position:fixed;
        top: -50%;
        width: 100%;
        height: 50%;
        z-index: 1;
        -webkit-transition-duration: 0.4s;
        background: #fff;
    }

    ._sorting-address>ul {
        margin: 0;
        padding: 0;
        overflow: auto;
        height: 100%;
        width: 100%;
        -webkit-transition-duration: 0.4s;
        box-sizing:border-box;
        padding: 0.08rem 0.1rem;
    }

    ._sorting-address>ul>li {
        display: inline-block;
        height: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: #ccc;
        margin: 0.02rem 0.03rem 0.08rem;
        border: 1px solid #ccc;
        border-radius: 50px;
        width: 0.76rem;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    ._sorting-address>ul>li.active {
        border: 1px solid #2680EB;
        color: #2680EB;
    }

    ._sorting-address>ul.address_first {
        background: #fff;
        position: absolute;
        z-index: 1;
        border: 1px solid #ddd;
        box-shadow: 5px 5px 10px #ddd;
    }

    .fixed-top{
        top: 0.77rem;
    }

    .fixed-top::after{
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        background:rgba(0,0,0,0.2);
    }

    .rotate {
        transform-origin: center center;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }

    .rotate1 {
        transform-origin: center center;
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }
    /* 头部搜索框、筛选栏 END */

    /* 列表页 START */
    .body {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        padding: 0.81rem 0 0 0;
        /* height: calc(100% - 0.4rem); */
        height: calc(100% - 0.8rem);
        overflow-y: auto;
        background: #EFEFEF;
    }

    .body > ul {
        padding: 0 0.12rem;
        margin-top: 0;
    }
    
    .body > ul li {
        display: inline-block;
        width: 1.5rem;
        padding: 0.08rem 0.05rem;
        background: #fff;
        margin: 0.06rem 0.04rem;
        border-radius: 10px; 
    }

    .body > ul li .item_img img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .body > ul li .text {
        height: 0.23rem;
        line-height: 0.23rem;
        margin: 0.02rem  0 0 0;
    }

    .body > ul li .item_int {
        color: #B5B5B5;
        font-size: 0.12rem;
    }

    .body > ul li .item_num {
        color: #448DE4;
        font-weight: 600;
    }

    .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;
    }
    /* 列表页 END */
</style>