You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
10 KiB
277 lines
10 KiB
<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" @handelServiceConfirm="handelServiceConfirm"></card>
|
|
</van-tab>
|
|
<van-tab title="已完成">
|
|
<card :tableData="list"></card>
|
|
</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">
|
|
<p>服务时间</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>服务范围</p>
|
|
<span class="font-size13" @click="showTree = true, showPopup = true">{{ serviceScopeName || '请选择范围'
|
|
}}</span>
|
|
<p>接单身份</p>
|
|
<van-radio-group v-model="serviceOrgType">
|
|
<van-radio :name="item.serviceOrgType" v-for="(item) in roleList" :key="item.id"
|
|
@click="handelChangeRole(item.serviceOrgId)">{{ item.serviceOrgName
|
|
}}</van-radio>
|
|
</van-radio-group>
|
|
</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" :min-date="minDate" />
|
|
<van-datetime-picker v-if="showEnd" v-model="serviceTimeEnd" @confirm="handelCLickConfirmEnd"
|
|
@cancel="showPopup = false" type="datetime" title="结束时间" :min-date="minDate" />
|
|
<van-cascader v-if="showTree" v-model="cascaderValue" title="请选择范围" :options="treeOptions"
|
|
@close="showTree = false, showPopup = false" @finish="onFinish"
|
|
:field-names="{ text: 'objectName', value: 'objectId' }" />
|
|
</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 } 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: false,
|
|
serviceTimeStart: null,
|
|
serviceTimeEnd: null,
|
|
showStart: false,
|
|
showEnd: false,
|
|
showTree: false,
|
|
showPopup: false,
|
|
minDate: new Date(),
|
|
treeOptions: null,
|
|
cascaderValue: null,
|
|
serviceScopeName: null
|
|
};
|
|
},
|
|
created() {
|
|
this.getListMyIdentities()
|
|
this.getServiceListRcv()
|
|
this.getServiceScopeTree()
|
|
},
|
|
mounted() {
|
|
this.clientHeight = document.documentElement.clientHeight; //可视高度
|
|
console.log(this.clientHeight);
|
|
this.$nextTick(() => {
|
|
this.scroll = this.$refs.scroll;
|
|
this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载
|
|
})
|
|
},
|
|
methods: {
|
|
onFinish(value) {
|
|
this.showTree = false;
|
|
this.showPopup = false;
|
|
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) {
|
|
this.serviceTimeStart = this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
|
|
this.showPopup = false;
|
|
this.showStart = false;
|
|
},
|
|
handelCLickConfirmEnd(val) {
|
|
this.serviceTimeEnd = this.$dayjs(val).format('YYYY-MM-DD HH:mm:ss');
|
|
this.showPopup = false;
|
|
this.showEnd = false;
|
|
},
|
|
//提交接单
|
|
async receiveService() {
|
|
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;
|
|
} else if (this.showRole) {
|
|
parm.serviceOrgType = this.serviceOrgType;
|
|
parm.serviceOrgId = this.serviceOrgId;
|
|
}
|
|
console.log(parm);
|
|
let { data, code, msg } = await receiveService(parm)
|
|
if (code === 0) {
|
|
this.$toast.success('接单成功')
|
|
this.showRole = false;
|
|
this.pageNo = 1;
|
|
this.list = [];
|
|
this.getTableData();
|
|
}
|
|
},
|
|
handelChangeRole(val) {
|
|
this.serviceOrgId = val;
|
|
},
|
|
|
|
//接单
|
|
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.$toast.success('确认成功')
|
|
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 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.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 => {
|
|
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 = res.data.list;
|
|
|
|
}).catch(err => {
|
|
})
|
|
},
|
|
// 获取已完成
|
|
getServiceListCompleted() {
|
|
getServiceListCompleted({
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize
|
|
}).then(res => {
|
|
this.total = res.total;
|
|
this.requestFlag = res.data.list === 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>
|
|
|