lsappBms/lss_vue_wx/src/views/task/task.vue

<template>
	<div id="allocation">
        <div class="head taskHead">
            <mt-navbar v-model="selected" class="tab_head" v-on:click.native='getList'>
                <mt-tab-item id="tab1" :style="user.roles[0].roleDescribe == '部门领导'?'':'text-align:left;'">我的任务</mt-tab-item>
                <mt-tab-item id="tab2" v-if="user.roles[0].roleDescribe == '部门领导'">我发布的</mt-tab-item>
            </mt-navbar>
            <div class="filter">
                <img v-if="selected == 'tab2'" src="../../assets/image/add_black.png" v-on:click="register()">
                <img v-if="!isBlue"  src="../../assets/image/filter.png" v-on:click="showFilter()">
                <img v-else src="../../assets/image/filter_blue.png" v-on:click="showFilter()">
            </div>
        </div>
        <div class="head taskHead headInput">
            <div class="searchbox">
                <img src="../../assets/image/search.png" class="searchbox_img">
                <input v-on:keypress="searchKeyword" type="text" v-model="keyWord" class="searchbox_text" placeholder="搜索"/>
            </div>
        </div>
        <section class="_sorting-address">
            <div class="filter_title">任务分类</div>
            <ul class="filter_body task_type">
                <li v-for="(item,index) in labels" :id="'btn'+item.id" v-bind:class="{'active':index==0}" v-on:click="chooseType(index,item.id)">{{item.name}}</li>
            </ul>
            <div class="filter_title">任务状态</div>
            <ul class="filter_body task_status">
                <li v-bind:class="{'active':status == -1}" v-on:click='chooseStatus(-1)'>全部</li>
                <li v-on:click='chooseStatus(0)'>待派发</li>
                <li v-on:click='chooseStatus(1)'>已派发</li>
                <li v-on:click='chooseStatus(2)'>已接收</li>
                <li v-on:click='chooseStatus(3)'>待审核</li>
                <li v-on:click='chooseStatus(4)'>未通过</li>
                <li v-on:click='chooseStatus(5)'>已完成</li>
                <li v-on:click='chooseStatus(6)'>已延期</li>
                <li v-on:click='chooseStatus(7)'>已失效</li>
            </ul>
            <div class="filter_title">任务日期</div>
            <div class="filter_body task_date">
                <mt-field label="" placeholder="开始日期" type="date" v-model="form.start"></mt-field> 
                <div class="text">至</div>
                <mt-field label="" placeholder="结束日期" type="date" v-model="form.end"></mt-field>
            </div>
            <div class="filter_foot">
                <mt-button type="default" class="clearFilter" v-on:click.native='clearFilter'>清空</mt-button>
                <mt-button type="default" class="saveFilter" v-on:click.native='getList'>确认</mt-button>
            </div>
        </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="text item_name">
                        <span class="item_type item_span">({{item.tagName}})</span>
                        {{item.name}} 
                        <span v-if="item.state==0" class="item_status item_span">待派发</span>
                        <span v-if="item.state==1" class="item_status item_span">已派发</span>
                        <span v-if="item.state==2" class="item_status item_span">已接收</span>
                        <span v-if="item.state==3" class="item_status item_span">待审核</span>
                        <span v-if="item.state==4" class="item_status item_span">未通过</span>
                        <span v-if="item.state==5" class="item_status item_span">已完成</span>
                        <span v-if="item.state==6" class="item_status item_span">已延期</span>
                        <span v-if="item.state==7" class="item_status item_span">已失效</span>
                    </div>
                    <div class="text item_int">{{item.code}}</div>
                    <div class="text item_content">
                        {{item.content}}
                    </div>
                    <div class="text item_users">
                        <div class="userInfo">
                            <img src="../../assets/image/userHead.jpg">
                            <span>{{item.publisherName}}&nbsp;&nbsp;{{item.indate}}</span>
                        </div>
                        <div class="allUsers">
                            <a v-if="item.recipientId!=null">
                                <img v-if="item.recipientHedaPic==null" src="../../assets/image/userHead.jpg">
                                <img v-else :src="item.recipientHedaPic">
                            </a>
                            <a v-for="(head,num) in item.participantsVOS" v-if="head.userId != item.recipientId">
                                <img v-if="head.headPic==null" src="../../assets/image/userHead.jpg">
                                <img v-else :src="head.headPic">
                            </a>
                        </div>
                    </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: "",
                user: JSON.parse(sessionStorage.getItem("user")),
                power: sessionStorage.getItem("power"),
                selected: sessionStorage.taskTab==''?"tab1":sessionStorage.taskTab,
                isBlue: false,
                type: -1,
                status: -1,
                start: '',
                end: '',
                form: {
                    type: -1,
                    status: -1,
                    start: '',
                    end: '',
                },

                list: [],
                labels: [],
                pageNum: 1,
                pages: 1,

                popupVisible: false,
                loading: false,
                haveMore: false,
			}
        },
		methods: {
            // 任务列表
            getList() {
                this.$indicator.open();
                $("._sorting-address").removeClass("fixed-top");
                $('._navbar').attr('style','position: fixed;top:0;');
                this.isBlue = false;
                sessionStorage.taskTab = this.selected;
                this.http.post(this.port.task.list, {
                    'keyName': this.keyWord,
                    'pageNum': 1,
                    'uid': this.user.id,
                    'tagId': this.form.type==-1?"":this.form.type,
                    'state': this.form.status==-1?"":this.form.status,
                    'startTime': this.form.start,
                    'endTime': this.form.end,
                    'type': this.selected=='tab1'?0:1
                } , 
                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.task.list, {
                        'keyName': this.keyWord,
                        'pageNum': ++this.pageNum,
                        'uid': this.user.id,
                        'tagId': this.form.type==-1?"":this.form.type,
                        'state': this.form.status==-1?"":this.form.status,
                        'startTime': this.form.start,
                        'endTime': this.form.end,
                        'type': this.selected=='tab1'?0:1
                    } , 
                    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.task.label, {} , 
                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(event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                    this.getList();
                }
            },

            // 标签筛选
            showFilter() {
                $("._sorting-medical").removeClass("fixed-top");
                if($("._sorting-address").hasClass("fixed-top")){
                    $("._sorting-address").removeClass("fixed-top");
                    $('._navbar').attr('style','position: fixed;top:0;');
                }else{
                    $("._sorting-address").addClass("fixed-top");
                    $('._navbar').attr('style','position: fixed;top:0;');
                }
                this.isBlue = !this.isBlue;
            },

            // 标签选择
            chooseType(type,id) {
                this.type = type;
                this.form.type = id;
                $(".task_type li:nth-child("+ (type+1) +")").addClass("active").siblings().removeClass("active")
            },

            // 清空标签
            clearFilter() {
                this.type = -1;
                this.status = -1;
                this.start = '';
                this.end = '';
                this.form = {
                    type: -1,
                    status: -1,
                    start: '',
                    end: '',
                };
                $(".task_type li:nth-child(1)").addClass("active").siblings().removeClass("active")
                $(".task_status li:nth-child(1)").addClass("active").siblings().removeClass("active")
                this.getList();
            },

            chooseStatus(status) {
                this.status = status;
                this.form.status = status;
                $(".task_status li:nth-child("+ (status+2) +")").addClass("active").siblings().removeClass("active")
            },

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

            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;
        z-index: 105;
    }

    .headInput {
        margin-top: 0.44rem;
        border-bottom: 1px solid #dfdfdf;
        z-index: 1;
    }

    .taskHead .tab_head {
        width: 50%;
        display: inline-flex;
    }

    .filter {
        width: 50%;
        float: right;
        display: inline-block;
        text-align: right;
        padding: 0.08rem 0;
    }

    .filter img {
        width: 0.18rem;
        margin-right: 0.08rem;
    }

    .filter_foot {
        margin-top: 0.2rem;
    }

    .filter_foot > .mint-button--normal {
        width: 50%;
        float: left;
        border: none;
        box-shadow: none;
        border-radius: 0;
        font-size: 0.13rem;
    }

    .clearFilter {
        background: #fff;
    }

    .saveFilter {
        background: #36DE95;
        color: #fff;
    }

    .searchbox {
        display: inline-block;
        width: 100%;
        position: relative;
        margin-bottom: 0.05rem;
    }

    .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.14rem;
        height: 0.28rem;
        border-style:none;
        border: 1px solid #eee/*#2680EB*/;
        background: #eee;
        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;
    }
    /* 新任务头部 END */
    /* 筛选栏 START */
    ._sorting-address {
        position:fixed;
        top: -80%;
        width: 100%;
        height: 80%;
        z-index: 1;
        -webkit-transition-duration: 0.4s;
        /* background: #fff; */
        background: #efefef;
        overflow: auto;
    }

    ._sorting-address .filter_title {
        color: #999;
        font-size: 0.13rem;
        padding: 0.08rem 0.12rem;
    }

    ._sorting-address > ul {
        margin: 0;
        padding: 0;
        overflow: auto;
        width: 100%;
        background: #fff;
        box-sizing:border-box;
        width: 100%;
        -webkit-transition-duration: 0.4s;
    }

    ._sorting-address > ul > li {
        display: inline-block;
        width: 25%;
        float: left;
        padding: 0.08rem;
        text-align: center;
        box-sizing:border-box;
        border: 1px solid #eee;
    }

    ._sorting-address > ul > li.active {
        color: #2680EB;
        border: 1px solid #2680EB;
    }

    .fixed-top{
        top: 0.44rem;
    }

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

    .task_date {
        background: #fff;
    }

    .task_date .mint-field {
        display: inline-block;
        width: 46%;
        vertical-align: middle;
    }

    .task_date .text {
        display: inline-block;
        width: 5%;
        line-height: 48px;
        height: 48px;
        vertical-align: middle;
    }
    /* 筛选栏 END */

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

    .body > ul {
        margin-top: 0;
    }
    
    .body > ul li {
        padding: 0.08rem 0.15rem;
        background: #fff;
        margin-bottom: 0.08rem;
        border-bottom: 1px solid #ddd;
    }

    .body > ul li .item_span {
        color: #2680eb;
    }

    .body > ul li .item_status {
        float: right;
    }

    .body > ul li .text {
        line-height: 0.23rem;
        margin: 0.05rem  0 0 0;
    }
    
    .body > ul li .item_content {
        word-wrap:break-word;
        color: #333;
    }

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

    .body > ul li .item_users img {
        width: 0.18rem;
        border-radius: 50%;
        vertical-align: middle;
    }

    .body > ul li .item_users span {
        vertical-align: middle;
        margin-right: 0.12rem;
        color: #999;
    }

    .body > ul li .userInfo {
        width: 80%;
        display: inline-block;
    }

    .body > ul li .userInfo span {
        font-size: 0.12rem;
        vertical-align: middle;
        margin-left: 0.05rem;
    }

    .body > ul li .allUsers {
        float: right;
        width: 20%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999;
    }

    .body > ul li .allUsers a:not(:first-child) {
        margin-left: -0.07rem;
    }

    .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>
<style>
    .tab_head .mint-tab-item-label {
        font-size: 0.13rem;
        color: #999;
    }

    .taskHead .tab_head .mint-tab-item {
        padding: 0.08rem 0;
    }

    .taskHead .tab_head .mint-tab-item.is-selected {
        border: none;
    }

    .taskHead .tab_head .mint-tab-item.is-selected .mint-tab-item-label {
        color: #333;
        font-size: 0.16rem;
        font-weight: 700;
    }

    .task_date .mint-field input {
        text-align: center;
    }
</style>