epmet-work-h5-chengyang/src/views/assistance/index.vue

<template>
    <div class='pages' ref="scroll">
        <div class="scroll-box" ref="scroll-content">
            <van-tabs :active="active" sticky @change="hadelChangeTab">
                <van-tab title="待接单">
                    <card :tableData="list" @handleCLickReceive="handleCLickReceive"></card>
                </van-tab>
                <van-tab title="待处理">
                    <card :tableData="list"></card>
                </van-tab>
                <van-tab title="已完成">内容 3</van-tab>
            </van-tabs>
        </div>
        <van-dialog v-model="showRole" title="请选择接单身份" show-cancel-button @confirm="receiveService">
            <van-radio-group v-model="serviceOrgType">
                <van-radio :name="item.serviceOrgType" v-for="(item) in roleList" :key="item.id">{{item.serviceOrgName}}</van-radio>
            </van-radio-group>
        </van-dialog>
        <van-dialog v-model="showScope" title="" show-cancel-button @confirm="receiveService">
            <van-datetime-picker
            v-model="serviceTimeStart"
            type="datetime"
            title="开始时间"
            :min-date="minDate"
            :max-date="maxDate"
            />
            至
            <van-datetime-picker
            v-model="serviceTimeStart"
            type="datetime"
            title="结束时间"
            :min-date="minDate"
            :max-date="maxDate"
            />
        </van-dialog>
        
    </div>
</template>
<script>
import card from './card.vue'
import throttle from 'lodash/debounce'
import { getServiceListRcv, getServiceListProcess , getServiceListCompleted,getCommonalityDetail,getMeasureDetail, getListMyIdentities,receiveService} from '@/api/service'
export default {
    data() {
        return {
            active: 0,
            clientHeight: false,
            scroll: null,
            pageNo: 1,
            pageSize: 4,
            list: [],
            total: 0,
            requestFlag:false,
            showRole:false,
            roleList:[],
            serviceOrgType:null,
            serviceOrgId:null,
            showScope:null
        };
    },
    created() {
        this.getListMyIdentities()
        this.getServiceListRcv()
    },
    mounted() {
        this.clientHeight = document.documentElement.clientHeight; //可视高度
        console.log(this.clientHeight);
        this.$nextTick(() => {
            this.scroll = this.$refs.scroll;
            this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载  		
        })
    },
    methods: {
         //提交接单
        async receiveService(){
            let parm = {
                ...this.formData,
                serviceOrgType:this.serviceOrgType,
                serviceOrgId:this.serviceOrgId,
                id:this.serverId
            }
            console.log(parm);
            // let {data,code,msg} = await receiveService(parm)
            // if(code === 0){
            //     this.$toast.success('接单成功')
            //     this.showRole = false;
            //     this.pageNo = 1;
            //     this.getTableData();
            // }
        },
        handleCLickReceive(item){
            this.showRole = item.source === 4;
            this.showScope = item.source === 0;
            this.serverId = item.id;
            if(item.source === 4){
                this.getMeasureDetail()
            }else {
                this.getCommonalityDetail()
            }
        },
        async getListMyIdentities(){
            let {data,code,msg} = await getListMyIdentities()
            if(code === 0){
                this.roleList = data;
                this.serviceOrgId = data[0].id;
            }
        },
       
        async getMeasureDetail(){
           let {data,code,msg} = await getMeasureDetail({id:this.serverId})
           if(code === 0){
            this.formData = data;
           }
        },
        async getCommonalityDetail(){
            let {data,code,msg} = await getCommonalityDetail({id:this.serverId})
           if(code === 0){
            this.formData = data;
           }
        },
        hadelChangeTab(e){
            this.list = [];
            this.pageNo = 1;
            this.active = e
            this.getTableData('tab')
        },
        //滚动加载
        bottomScroll: throttle(function () {
            let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度
            let scrollHeight = this.scroll.scrollHeight; //滚动条的高度
            let clientHeight = this.scroll.clientHeight; //可视区域的高度
            if (scrollTop + clientHeight >= scrollHeight) {
                this.pageNo++;
                this.getTableData()
            }
        }, 500),

        getTableData(tab){
            if ((this.active === 0 && this.requestFlag) || (tab && this.active === 0)) {
                    this.getServiceListRcv();
                } else if ((this.active === 1 && this.requestFlag) || (tab && this.active === 1)) {
                    this.getServiceListProcess();
                }else if((this.active === 2 && this.requestFlag ) || (tab && this.active === 2)){
                    this.getServiceListCompleted()
                }
                if(!this.requestFlag){
                    this.$toast({
                        message: '没有更多数据了',
                        duration: 1000
                    })
                }
        },
        //获取待接单
        getServiceListRcv() {
            getServiceListRcv({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                console.log(res);
                this.total = res.total;
                this.requestFlag = res.data.list.length === this.pageSize;
               this.list =  this.list.concat(res.data.list)
            }).catch(err => {

            })
        },
        // 获取待处理
        getServiceListProcess() {
            getServiceListProcess({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.total;
                // this.requestFlag = res.length === this.pageSize;
                this.list = res.data.list;

            }).catch(err => {
            })
        },
        // 获取已完成
        getServiceListCompleted(){
            getServiceListCompleted({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.total;
                this.requestFlag = res.length === this.pageSize;
                this.list = this.list.concat(...this.list, ...res.list);
            }).catch(err => {
            })
        }
    },
    destroyed() {
        this.scroll.removeEventListener('scroll', this.bottomScroll);//移除滚动监听
    },
    components: { card },
    computed: {},
    watch: {}
}
</script>

<style lang='less' scoped>
:deep(.van-tabs__content){
    padding: 0 10px 20px;
    box-sizing: border-box;
}
:deep(.van-dialog__content){
    padding:10px;
    box-sizing: border-box;  
}
</style>