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

<template>
    <div class='pages' ref="scroll" style="scroll-behavior: smooth;">
        <div class="scroll-box" ref="scroll-content">
            <van-tabs :active="active" sticky @change="hadelChangeTab">
                <van-tab title="待接单">
                    <card :tableData="list" @handleCLickReceive="handleCLickReceive" @handelTodetail="handelTodetail">
                    </card>
                </van-tab>
                <van-tab title="待处理">
                    <card :tableData="list" @handelServiceConfirm="handelServiceConfirm"
                        @handelTodetail="handelTodetail" @handelServiceComplete="handelServiceComplete"></card>
                </van-tab>
                <van-tab title="已完成">
                    <card :tableData="list" @handelTodetail="handelTodetail" :active="active"></card>
                </van-tab>
            </van-tabs>
        </div>
        <!-- 接单个性需求 -->
        <van-dialog v-model="showRole" title="" show-cancel-button :before-close="handelReceiveService">
            <p class="required">接单身份</p>
            <van-radio-group v-model="serviceOrgTypeT">
                <van-radio :name="index" v-for="(item, index) in roleList" :key="item.id"
                    @click="handelChangeRole(index)">{{ item.serviceOrgName
                    }}</van-radio>
            </van-radio-group>
        </van-dialog>
        <!--接单共性需求  -->
        <van-dialog v-model="showScope" title="" show-cancel-button :before-close="handelReceiveService">
            <p class="required">服务时间</p>
            <span @click="showStart = true, showPopup = true" class="font-size13">{{ serviceTimeStart || '开始时间'
                }}</span><span class="tag-date">至</span><span @click="showEnd = true, showPopup = true"
                class="font-size13">{{ serviceTimeEnd || '结束时间' }}</span>
            <p class="required">服务范围</p>
            <span class="font-size13" @click="showTree = true, showPopup = true">{{ serviceScopeName || '请选择范围'
                }}</span>
            <p class="required">接单身份</p>
            <van-radio-group v-model="serviceOrgTypeT">
                <van-radio :name="index" v-for="(item, index) in roleList" :key="item.id"
                    @click="handelChangeRole(index)">{{ item.serviceOrgName
                    }}</van-radio>
            </van-radio-group>
        </van-dialog>
        <!--个性需求 完成服务 -->
        <van-dialog v-model="showComplete" title="我已完成需求人的需求" show-cancel-button :before-close="onBeforeClose">
            <p>服务开始时间</p>
            <span @click="showStart = true, showPopup = true" class="font-size13">{{ actualServiceStartTime || '服务开始时间'
                }}</span><span class="tag-date">至</span><span @click="showEnd = true, showPopup = true"
                class="font-size13">{{ actualServiceEndTime || '服务结束时间' }}</span>
            <p class="required">完成情况</p>
            <van-radio-group v-model="rdFinishResult">
                <van-radio name="resolved">已解决</van-radio>
                <van-radio name="unresolved">未解决</van-radio>
            </van-radio-group>
            <p>上传图片</p>
            <div class="block">
                <template>
                    <van-uploader v-model="fileList" :after-read="afterRead" :max-count="3"
                        :max-size="10 * 1024 * 1024" />
                </template>
            </div>
            <p class="required">评价</p>
            <van-rate v-model="rdScore" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
            <p>备注</p>
            <van-field v-model="rdFinishDesc" rows="2" autosize type="textarea" placeholder="请输入备注" />

        </van-dialog>
        <!--表单类 -->
        <van-popup v-model="showPopup" position="bottom">
            <van-datetime-picker v-if="showStart" v-model="serviceTimeStart" type="datetime" title="开始时间"
                @confirm="handelCLickConfirmStart" @cancel="showPopup = false,showStart=false" :min-date="minDate" />
            <van-datetime-picker v-if="showEnd" v-model="serviceTimeEnd" @confirm="handelCLickConfirmEnd"
                @cancel="showPopup = false,showEnd = false" type="datetime" title="结束时间" :min-date="minDate" />
            <van-cascader v-if="showTree" v-model="cascaderValue" :options="treeOptions"
                @close="showTree = false, showPopup = false" @change="onChange"
                :field-names="{ text: 'objectName', value: 'objectId' }" :closeable="false" >
                <template #title>
                        <div class="flex flex-end">
                            <span>选择范围</span>
                            <span @click="showPopup=false,showTree=false">完成</span>
                        </div>
                </template>
            </van-cascader>
        </van-popup>
    </div>
</template>
<script>
import card from './card.vue'
import throttle from 'lodash/debounce'
import { getServiceListRcv, getServiceListProcess, getServiceListCompleted, getCommonalityDetail, getMeasureDetail, getListMyIdentities, receiveService, getServiceScopeTree, serviceConfirm, serviceComplete, getSearchResis } from '@/api/service'
import { uploadvariedfile } from '@/api/basic'
import { Dialog } from 'vant';
export default {
    data() {
        return {
            active: this.$store.state.app.tabActive,
            scroll: null,
            pageNo: 1,
            pageSize: 20,
            list: [],
            total: 0,
            requestFlag: false,
            showRole: false,
            roleList: [],
            serviceOrgType: null,
            serviceOrgId: null,
            showScope: false,
            serviceTimeStart: null,
            serviceTimeEnd: null,
            showStart: false,
            showEnd: false,
            showTree: false,
            showPopup: false,
            minDate: new Date(),
            treeOptions: null,
            cascaderValue: null,
            serviceScopeName: null,
            formData: {},
            showComplete: false,
            actualServiceStartTime: null,//服务开始时间
            actualServiceEndTime: null,//服务结束时间
            selfObj: {},
            rdFinishResult: null,//是否解决
            rdScore: 5,//评分
            fileList: [],//图片上传
            rdFinishDesc: null,//备注
            serviceOrgTypeT: null
        };
    },
    created() {
        this.getTableData('tab')
        this.getListMyIdentities()
        this.getServiceScopeTree()
    },
    mounted() {
        this.$nextTick(() => {
            this.scroll = this.$refs.scroll;
            if (this.$store.state.app.scrollTop) {
                setTimeout(() => {
                    this.$refs.scroll.scrollTo(0, this.$store.state.app.scrollTop);
                }, 500)
            }
            this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载  		
        })
    },
    activated() {

    },
    methods: {
        afterRead(file) {
            file.status = 'uploading'
            file.message = '上传中...'
            uploadvariedfile(file.file)
                .then(res => {
                    file.status = ''
                    file.message = '上传成功'
                    file.url = res.data.url
                    console.log(this.fileList)
                })
                .catch(() => {
                    file.status = 'failed'
                    file.message = '上传失败'
                })
        },
        handelServiceComplete(item) {
            if (item.source != 4) {
                Dialog.confirm({
                    message: `确定已完成“${item.title}”服务吗？`,
                }).then(() => {
                    this.serviceComplete(item)
                }).catch(() => {
                })
            } else if (item.source === 4) {
                this.showComplete = true;
                this.selfObj = item;
            }
        },
        onBeforeClose(action, done) {
            if (action === "confirm") {
                if (this.selfObj.source === 4) {
                    if (!this.actualServiceStartTime) {
                        this.$tips.warning('请选择服务开始时间')
                        return done(false)
                    }
                    if (!this.actualServiceEndTime) {
                        this.$tips.warning('请选择服务结束时间')
                        return done(false)
                    }
                    if (!this.rdScore) {
                        this.$tips.warning('请进行评价')
                        return done(false)
                    }
                    if (!this.rdFinishResult) {
                        this.$tips.warning('请选择完成情况')
                        return done(false)
                    }
                    let parm = {
                        source: this.selfObj.source,
                        id: this.selfObj.id,
                        actualServiceStartTime: this.actualServiceStartTime,
                        actualServiceEndTime: this.actualServiceEndTime,
                        rdScore: this.rdScore,
                        rdFinishResult: this.rdFinishResult,
                        rdFinishAttachments: this.fileList.map(item => ({ originFileName: item.file.name, type: item.file.type, format: 'image', url: item.url })),
                        rdFinishDesc: this.rdFinishDesc
                    }
                    this.serviceComplete(parm)
                    done(true)
                }

            }
            else {
                done(true);
            }
        },
        async serviceComplete(parm) {
            let { code } = await serviceComplete(parm)
            if (code === 0) {
                this.$tips.success('服务完成')
            }
        },

        async handelTodetail(item) {
            this.serverId = item.id;
            if (item.source === 4) {
                await this.getMeasureDetail()
            } else if (item.source === 1) {
                await this.getCommonalityDetail()
            } else {
                await this.getSearchResis()
            }
            this.$router.push({ name: 'assistanceDetail', params: { detail: this.formData, selfObj: item } })
        },
        onChange(value) {
            this.serviceScopeList = value.selectedOptions.map(item => ({ objectType: item.objectType, objectId: item.objectId, objectName: item.objectName }))
            this.serviceScopeName = value.selectedOptions.map(item => item.objectName).join('-')
        },
        handelCLickConfirmStart(val) {
            if (this.selfObj.processStatus === 20) {
                this.actualServiceStartTime = this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
            } else {
                this.serviceTimeStart = this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
            }
            this.showPopup = false;
            this.showStart = false;
        },
        handelCLickConfirmEnd(val) {
            if (this.selfObj.processStatus === 20) {
                this.actualServiceEndTime = this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
            } else {
                this.serviceTimeEnd = this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
            }
            this.showPopup = false;
            this.showEnd = false;
        },
        //提交接单
        async handelReceiveService(action, done) {
            if (action === "confirm") {
                let parm = {
                    ...this.formData,
                    id: this.serverId,
                }
                
                if (this.showScope) {
                    parm.serviceScopeList = this.serviceScopeList;
                    parm.serviceTimeStart = this.serviceTimeStart;
                    parm.serviceTimeEnd = this.serviceTimeEnd;
                    parm.serviceOrgType = this.serviceOrgType;
                    parm.serviceOrgId = this.serviceOrgId;
                    if (!this.serviceTimeStart) {
                        this.$tips.warning('请选择服务开始时间')
                        return done(false)
                    }
                    if (!this.serviceTimeEnd) {
                        this.$tips.warning('请选择服务结束时间')
                        return done(false)
                    }
                    if (!this.serviceScopeList) {
                        this.$tips.warning('请选择服务范围')
                        return done(false)
                    }
                    if (!this.serviceOrgId) {
                        this.$tips.warning('请选择接单身份')
                        return done(false)
                    }
                } else if (this.showRole) {
                    if (!this.serviceOrgId) {
                        this.$tips.warning('请选择接单身份')
                        return done(false)
                    }
                    parm.serviceOrgType = this.serviceOrgType;
                    parm.serviceOrgId = this.serviceOrgId;
                }
                console.log(parm);
                let { code } = await receiveService(parm)
                if (code === 0) {
                    this.$tips.success('接单成功')
                    this.showRole = false;
                    this.showScope = false;
                    this.pageNo = 1;
                    this.requestFlag = true;
                    this.list = [];
                    this.getTableData();
                }
            }
            else {
                done(true);
            }
        },

        handelChangeRole(val) {
            this.serviceOrgId = this.roleList[val].serviceOrgId;
            this.serviceOrgType = this.roleList[val].serviceOrgType;
        },
        //接单
        handleCLickReceive(item) {
            this.showRole = item.source === 4;
            this.showScope = item.source === 1;
            this.serverId = item.id;
            if (item.source === 4) {
                this.getMeasureDetail()
            } else {
                this.getCommonalityDetail()
            }
        },
        //确认服务
        async handelServiceConfirm(val) {
            let { data, code, msg } = await serviceConfirm({ id: val.id })
            if (code === 0) {
                this.$tips.success('确认成功')
                this.requestFlag = true;
                this.pageNo = 1;
                this.list = [];
                this.getTableData();
            }
        },
        async getListMyIdentities() {
            let { data, code, msg } = await getListMyIdentities()
            if (code === 0) {
                this.roleList = data;
            }
        },
        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;
            }
        },
        async getSearchResis() {
            let { data, code, msg } = await getSearchResis({ id: this.serverId })
            if (code === 0) {
                this.formData = data;
            }
        },
        async getServiceScopeTree() {
            let { data, code, msg } = await getServiceScopeTree({ id: this.serverId })
            if (code === 0) {
                this.treeOptions = [data];
            }
        },
        hadelChangeTab(e) {
            this.list = [];
            this.pageNo = 1;
            this.active = e;
            this.$store.dispatch('setTabActive', e);
            this.getTableData('tab')
        },
        //滚动加载
        bottomScroll: throttle(function () {
            console.log('滚动加载');
            let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度
            this.$store.dispatch('setScrollTop', 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 => {
                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.data.list.length === this.pageSize;
                this.list = this.list.concat(res.data.list)
            }).catch(err => {
            })
        },
        // 获取已完成
        getServiceListCompleted() {
            getServiceListCompleted({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.total;
                this.requestFlag = res.data.list.length === this.pageSize;
                this.list = this.list.concat(res.data.list)
            }).catch(err => {
            })
        }
    },
    destroyed() {
        this.scroll.removeEventListener('scroll', this.bottomScroll);//移除滚动监听
    },
    components: { card },
    computed: {},
    watch: {}
}
</script>

<style lang='less' scoped>
:deep(.van-cascader__title){
    width: 100%;
}
</style>